对网页设计师来说，iPhone X 意味着什么？可怜的设计师又要焦虑了

发布会谢幕了，媒体们也发完了新闻稿，朋友圈也热闹过了，接下来的工作该轮到设计师了。iPhone X 11月才发货，但你也许已经接到设计任务了。在这之前，让我们先来看看这个iPhoneX，对UI设计师的日常工作有什么影响。

新增的虚拟 Home 指示条——你不得不考虑的设计元素之一

iPhone X 迈向了全面屏，移除了原本在手机底部的实体Home键，取而代之的是一条 134x 5pt 的虚拟Home指示条。
「底端上划」成为了全局性的系统操作，它可以让你返回桌面（原本的单击Home键），或者切换应用程序（原本双击Home 键）。我将这个虚拟Home指示条的特性总结为以下五点：

特性一：如影随形

苹果在新的开发文档中指出，这个 Home 指示条是「至关重要的系统元素」，除了在某种特殊条件下，这个指示条将永远伴随着你的 App，成为强制的设计元素出现在屏幕中。这就意味着，在你的 App 设计中你将不得不为它保留位置，并考虑好周围元素与它的兼容关系。

特性四：底部上划

美国著名的股票交易软件 Robinhood 就使用了类似的交互。在买入/卖出股票这样的关键操作里，它使用了「底部上划」。尽管不是严格意义上的「底端上划」，但虚拟 Home 指示条的介入无疑增加了误操的机率。在 iPhone X 设计时，类似这样涉及到屏幕底部上下滑动的交互都需要更谨慎的思考、更严格的测试。

当然，iPhone X 并没有强制禁止这种交互操作。它给开发者们留了一条路：「在万不得已必须要这样做的情况下」，开发者可以开启「边缘保护」功能（Edge Protection）。开启后，次底端上划将只是唤醒 Home 指示条，再次上划才会激活原有功能。

手机纵向持握状态下，安全区是从屏幕顶端往下 40 pt 开始计算的，要注意的是，它并不是和「齐刘海」完全齐平的，而是要再往下一点。「下巴」位置上，从下往上推 34 pt 以上的部分开始才被视为安全区。

纵向持握状态下的安全区设计还比较容易理解，但到了横向持握状态，安全区的概念就有点反直觉了：

「拇指盲区」更大了

乔布斯曾说，手持设备理想的屏幕尺寸应该是 4 寸。然而随着乔老爷子英年早逝，苹果在「越来越大」的路上越走越远（据说很大一部分原因是为了顺应亚洲市场的需求）。iPhone 如今已经增大到了惊人的 5.8 寸。

一般人大拇指大概 2.5 - 2.7 寸长，iPhone 7/8 Plus 是 5. 5 寸，日常生活中我注意到，广大 Plus 用户已经发展出了一套独特的手部微调动作，来让自己的拇指够到左上角的「返回」键（为人类的适应力感到惊叹！）。尽管如此，这么大的屏幕已经超越了绝大多数普通用户的拇指覆盖范围。

在 5.8 寸的 iPhone X 上，左上角的「拇指盲区」变得更大了。而基于 F 型流动视线设计的很多 App，通常都会将它们重要的功能入口置于左上角（用户先看到的内容原本正好处于拇指舒适区的边缘）。而到了 iPhone X 上，视线优先和拇指舒适就未必重合了——iPhone X 给设计师出了一道难题。

注意全屏图

如果你的 App 中用到了全屏背景图，比如启动画面（Splash screen），你需要注意不同屏幕比例的适配问题，确保图片被切割后依然保留主体部分。如果你的启动画面里有人物模特，尤其需要注意屏幕比例变化造成的切割位置的变化（半身人像如果正好切到手肘的位置会显得很奇怪）。当然，有资源给两种屏幕比例做适配素材的同学可以忽略这一条。

总 结

几天后，当你在设计软件里新建出个形状诡异的 iPhone X 画布，请记得：

新增的虚拟 Home 指示条，将成为你不得不考虑的设计元素之一。

全面屏 iPhone 更大，也更瘦长了。但对你来说，你要时刻牢记一个陌生又熟悉的词——「安全区」，尤其是在横向持握状态下。

你尽可能多地使用矢量图形了吗？你的 App 安装包变大了多少？全屏图片被奇怪地切割了吗？你放在左上角的主功能键是否超出了拇指舒适区？有空的时候，不妨想一想，「返回」操作是否还有别的可能？

每年夏末的苹果发布会落幕，媒体离场，段子手退散，舞台上留下的只有无数设计师、产品经理和开发者们。他们默默工作，以确保几周之后，用户可以在新 iPhone 上正常、愉悦地使用他们的产品。

苹果网页设计分析