iPhoneX的小刘海，UI设计师的大麻烦

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