iPhone X 已经正式和大众见面了，大家对于 iPhone X 的评价好坏呈冰火两极分布，那对于 UI
发布会谢幕了，媒体们也发完了新闻稿，朋友圈也热闹过了，接下来的工作该轮到设计师了。iPhone X 11 月才发货，但你也许已经接到设计任务了。在这之前，让我们先来看看这个 iPhone X，对 UI 设计师的日常工作有什么影响。
iPhone X 迈向了全面屏，移除了原本在手机底部的实体 Home 键，取而代之的是一条 134 × 5 PT 的虚拟 Home 指示条。「底端上划」成为了全局性的系统操作，它可以让你返回桌面(原本的单击 Home 键)，或者切换应用程序(原本双击 Home 键)。我将这个虚拟 Home 指示条的特性总结为以下五点：
苹果在最新的开发文档中指出，这个 Home 指示条是「至关重要的系统元素」，除了在某种特殊条件下，这个指示条将永远伴随着你的 App，成为强制的设计元素出现在屏幕中。这就意味着：在你的 App 设计中你将不得不为它保留位置，并考虑好周围元素与它的兼容关系。
什么?你说你想做彩虹渐变指示条?少侠你太天真了……这个虚拟 Home 指示条只有亮/暗两种模式，它会自动根据周围背景，选择将自己变身成白色或是黑色，从而尽可能地和周围背景有所区分。
iOS 自带的通讯录是一个典型的带有底部导航栏的 App，对比 iPhone 8 和 iPhone X，你会发现在 iPhone X 上，底部导航栏并不在真正的「底部」，它是悬浮在虚拟 Home 条上方的。对拥有底部导航栏的 App 而言，iPhone X 这个全面屏的「下巴」并非可用区域，它并不真的「全面」。
但同时，Apple 的设计则例中也指出，如果 App 的底部是可滚动的内容(比如一个长列表视图)，那么官方给出的建议是：
放心大胆地霸占整个屏幕吧!发现文字和 Home 指示条重叠了?没关系!这是官方推荐的正确做法!事实上，用户依然可以点选最下方的列表条目。这种情况下，全面屏才是真的「全面」了。
美国著名的股票交易软件 Robinhood 就使用了类似的交互。在买入/卖出股票这样的关键操作里，它使用了「底部上划」。
尽管不是严格意义上的「底端上划」，但虚拟 Home 指示条的介入无疑增加了误操的机率。在 iPhone X 设计时，类似这样涉及到屏幕底部上下滑动的交互都需要更谨慎的思考、更严格的测试。
当然，iPhone X 并没有强制禁止这种交互操作。它给开发者们留了一条路：「在万不得已必须要这样做的情况下」，开发者可以开启「边缘保护」功能(Edge Protection)。开启后，第一次底端上划将只是唤醒 Home 指示条，再次上划才会激活原有功能。
在播放视频时，开发者可以开启虚拟 Home 条「自动隐藏」功能从而获得沉浸式体验。开启后，视频播放时虚拟 Home 条将自动消失;单击屏幕后就又会出现。
看着新的 iOS 设计规范文档，一个陌生又熟悉的词浮现在我的脑海中——出血(bleed)。
在平面印刷设计中，为了顾及之后纸张裁切过程中可能出现的误差，设计师会在画布四周留出的一点边缘空间，这一圈额外的空间就叫做「出血」。同时，设计师一般也会设置一个「安全区」，确保设计稿中的重要内容都出现在安全区内。
对数字化时代下的 UI 设计师来说，我们本可以永远把「出血」和「安全区」的概念永远抛之脑后，因为屏幕不用裁切!
全世界也许 99.99% 的手机屏都是规整的矩形，我们的安全区就是整块矩形屏(安卓系统底部的虚拟按键可以近似理解为屏幕外，设计时可以忽略)。然而 iPhone X 这个妖蛾子的出现，又迫使我们重新找回那个久远的记忆……
手机纵向持握状态下，安全区是从屏幕最顶端往下 44 PT 开始计算的，要注意的是，它并不是和「齐刘海」完全齐平的，而是要再往下一点。「下巴」位置上，从下往上推 34 PT 以上的部分开始才被视为安全区。
横向状态下(假设是逆时针旋转 90 度)，原本的「刘海」部分到了左侧，「出血」部分实际占用面积不变，而尽管虚拟 Home 条挪到了下方的长边上，屏幕最右边虽然没有任何系统及元素，但苹果依然建议将其设置为与左侧「刘海」相对称的「出血」。
也就是说，在横向状态下，你的安全区是个半岛，只有上方是连接到屏幕边缘的。这又是为什么呢?为什么苹果官方不建议设计师充分利用最右边的空白面积呢?为什么非要左右对称地设置「出血」呢?
尤其考虑到对于很多手机游戏来说，任何一点屏幕空间都是宝贵的，血条，金钱，操作键，小地图，大地图等等，太多元素逼着设计师充分利用每一寸空间了。
苹果官方给出的解释是：由于你无法预测用户在横向持握下会把「刘海」放在左边还是右边，如果安全区不是横向居中放置的，会造成界面中元素与手机边缘的相对位置不固定。
他们认为，用户在使用手机时(尤其是玩游戏的时候)高度依赖手部的肌肉记忆，不对称设计尽管空间利用率更高，但与用户的肌肉记忆相背，由此导致的失败操作容易让用户沮丧。因此，苹果向广大设计师们高声疾呼：请把按键全都放到安全区里来吧!
乔布斯曾说，手持设备最理想的屏幕尺寸应该是 4 寸。然而随着乔老爷子英年早逝，苹果在「越来越大」的路上越走越远(据说很大一部分原因是为了顺应亚洲市场的需求)。iPhone 如今已经增大到了惊人的 5.8 寸。
一般人大拇指大概 2.5 – 2.7 寸长，iPhone 7/8 Plus 是 5.5 寸，日常生活中我注意到，广大 Plus 用户已经发展出了一套独特的手部微调动作，来让自己的拇指够到左上角的「返回」键(为人类的适应力感到惊叹!)。尽管如此，这么大的屏幕已经超越了绝大多数普通用户的拇指覆盖范围。
无论是在通勤地铁上，还是走在路上一手拿奶茶，另一手拿手机，在很多情境下单手操作是无法避免的。苹果在 iPhone 7 / 7 Plus 中设计了两次轻触 Home 键将屏幕整体下移的精彩交互。
然而，随着 iPhone X 移除了实体 Home 键的，这个精彩的交互设计也随之消失了。虽然很多人已经习惯了直接在 iPhone 上的左滑返回，但以下两个因素阻碍了它成为事实标准的返回操作：
App 自带的横滑操作可能造成交互冲突。比如：邮件类 App 中的归档操作，列表控件中的删除操作，「走马灯」控件(Carousel)的横向滚动等等。
在 5.8 寸的 iPhone X 上，左上角的「拇指盲区」变得更大了。而基于 F 型流动视线设计的很多 App，通常都会将它们最重要的功能入口置于左上角(用户最先看到的内容原本正好处于拇指舒适区的边缘)。而到了 iPhone X 上，视线优先和拇指舒适就未必重合了——iPhone X 给设计师出了一道难题。
如果你的 App 中用到了全屏背景图，比如启动画面(Splash screen)，你需要注意不同屏幕比例的适配问题，确保图片被切割后依然保留主体部分。如果你的启动画面里有人物模特，尤其需要注意屏幕比例变化造成的切割位置的变化(半身人像如果正好切到手肘的位置会显得很奇怪)。
iPhone X 的屏幕分辨率达到 1125px × 2436px(458 PPI)。更高屏幕画质意味着位图素材的尺寸也要相应变大。这种情况下，尽可能多地使用 PDF 矢量图形可以在更大程度上为 App 瘦身，节省流量。
看到这里，作为设计师的你也许会觉得：这 iPhone X 就是个大坑!是的，我看完新的设计文档确实也有这种感觉……
有(且可能仅有这一条)—— 那就是大家再也不用考虑打电话，WiFi 热点分享等特殊状态下的设计啦!因为 iPhone X 用状态栏时间的背景颜色来统一表示这些特殊状态(不再有高度变化)，喜大普奔!
新增的虚拟 Home 指示条，将成为你不得不考虑的设计元素之一。希望你还能记得它的五个特性：如影随形、黑白双煞、真 · 全面屏、鸠占鹊巢、自动隐身。
全面屏 iPhone 更大，也更瘦长了。但对你来说，你要时刻牢记一个陌生又熟悉的词——「安全区」，尤其是在横向持握状态下。
你尽可能多地使用矢量图形了吗?你的 App 安装包变大了多少?全屏图片被奇怪地切割了吗?你放在左上角的主功能键是否超出了拇指舒适区?有空的时候，不妨想一想，「返回」操作是否还有别的可能?
每年夏末的苹果发布会落幕，媒体离场，段子手退散，舞台上留下的只有无数设计师、产品经理和开发者们。他们打开默默工作，以确保几周之后，用户可以在新 iPhone 上正常、愉悦地使用他们的产品。
也许你并不会买 iPhone X，也许看着那道「齐刘海」你内心的强迫症小人已经闹翻，但你还是一字一字看起了新的苹果设计规范和这篇文章。尽管 iPhone X 让你的工作更麻烦了，你还是会把每个设计稿做到像素级的精确 —— 因为你是一名设计师，希望用双手让这个世界变得更好。
网站在前期的时候都是很难上排名的吗，那么是因为你的网站基础优化都没做好，怎么可能会有排名呢，首页说到了基础的优化那就要从根本的地方说起。前期就是先把网站的设计和网...
随着情人节的结束，2月份的设计圈干货大合集悄然更新。新的工具新的资源，依然是以往的分量，依然是相同的味道。和过去的合集相似，免费的素材、工具、服务占据了列表中9成的...
每个网站都是由不同功能不同类型的页面构成的，当用户打开错误链接的时候，网站的404页面就派上用场了。一个可靠的404页面在告知用户他们走错地方的同时，还应当引导用户继续浏...
今天来给大家讲讲如何用Axure实现上下滚动效果。 如何实现上下滚动效果： 让内容在显示区域滚动; 内容面板没有接触到顶部时，让内容面板移动至顶部; 内容面板接触到顶部，没有接...
你还在加班为每一个小功能的实现自己“码码码”吗?今天想早点下班的你，快来看看我最新发现的工具包吧!有了他们，这些功能你只需要直接用，或者用一点时间把他们优化的比作者创造时更...
这篇文章，给大家分享一个后台设计的小技巧。 后台产品的判断标准 我们已经将后台产品定义为一款办公性质的产品，满足用户在工作当中的一些需求。这让后台产品的好坏能够简单...
Landy：大家都知道做网页设计有栅格，有纵向栅格也有横向栅格，栅格提供内容布局的规范，让信息组织更有条理，我们在栅格规范内做设计，上下左右、垂直居中对齐，横平竖直、方...
如今的用户界面中，图标绝对是不可或缺的元素。虽然绝大多数的图标都很小，甚至不被人注意到，但是它们帮助设计和用户解决了许多问题。图标是可用性和导航的关键，用户能够感...
随着各类App的业务功能不断丰富，小红点已经成为互联网从业者们最常使用的运营工具之一，每当有新的运营内容或新功能上线，大家的做法往往是在那放个红点就行了。然而简单粗暴...
在设计登录注册页的时候，也是很讲究技巧的，不能够马虎的设计几个字加两个文本框就当完成了。要明白，这是你所有页面中最基础的一个，小细节尚且决定成败，打好基础，也是在...