UI设计师谈：如何评价 iPhone X 的设计规範

【原文刊登于知乎，作者：Riceman 米饭侠，苹果仁授权转载】

10 个设计师里9 个强迫症，剩下那个去设计了iPhone X……

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

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

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

特性一：如影随形

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

<img src=”https://www.xwie.com/uploadfile/2021/0629/73136t2yfbtqkxkj.png” data-rawwidth=”2890″ data-rawheight=”1912″ class=”origin_image zh-lightbox-thumb” width=”2890″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73138my5jbcofjds.png”>

特性二：黑白双煞

什么？你说你想做彩虹渐变指示条？少侠你太天真了……这个虚拟Home 指示条只有亮／暗两种模式，它会自动根据周围背景，选择将自己变身成白色或是黑色，从而尽可能地和周围背景有所区分。

<img src=”https://www.xwie.com/uploadfile/2021/0629/73149hwozgvkybre.png” data-rawwidth=”1678″ data-rawheight=”526″ class=”origin_image zh-lightbox-thumb” width=”1678″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73151obqbrxakuec.png”>

特性三：真· 满版萤幕

<img src=”https://www.xwie.com/uploadfile/2021/0629/731545vnftrn3zv1.png” data-rawwidth=”3360″ data-rawheight=”1890″ class=”origin_image zh-lightbox-thumb” width=”3360″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73156xgcxu05xs5c.png”>iOS 自带的通讯录是一个典型的带有底部导航栏的App，对比iPhone 8 和iPhone X，你会发现在iPhone X 上，底部导航栏并不在真正的「底部」，它是悬浮在虚拟Home条上方的。对拥有底部导航栏的App 而言，iPhone X 这个满版萤幕的「下巴」并非可用区域，它并不真的「全面」。

但同时，Apple 的设计则例中也指出，如果App 的底部是可滚动的内容（比如一个长列表视图），那么官方给出的建议是：放心大胆地霸占整个萤幕吧！发现文字和Home 指示条重叠了？没关係！这是官方推荐的正确做法！事实上，用户依然可以点选最下方的列表条目。这种情况下，满版萤幕才是真的「全面」了。

<img src=”https://www.xwie.com/uploadfile/2021/0629/73157kjkdstdtkte.png” data-rawwidth=”3360″ data-rawheight=”1890″ class=”origin_image zh-lightbox-thumb” width=”3360″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73158zmxzlcu0blt.png”>

特性四：鸠占鹊巢

如果你的App 带有「底端上划」这样的炫酷操作……Apple 的建议是：少侠要不你还是重新考虑一下？因为这个操作方式我们已经佔了！

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

<img src=”https://www.xwie.com/uploadfile/2021/0629/731595ta2zunjd12.png” data-rawwidth=”2890″ data-rawheight=”1912″ class=”origin_image zh-lightbox-thumb” width=”2890″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73160dc4paplsj1y.png”>当然，iPhone X 并没有强制禁止这种操作方式操作。它给开发者们留了一条路：「在万不得已必须要这样做的情况下」，开发者可以开启「边缘保护」功能（Edge Protection）。开启后，第一次底端上划将只是唤醒Home 指示条，再次上划才会激活原有功能。

<img src=”https://www.xwie.com/uploadfile/2021/0629/731613kw1myj3ho3.png” data-rawwidth=”3360″ data-rawheight=”1890″ class=”origin_image zh-lightbox-thumb” width=”3360″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73165bmqt5cqivof.png”>

特性五：自动隐身

在播放视频时，开发者可以开启虚拟Home 条「自动隐藏」功能从而获得沉浸式体验。开启后，视频播放时虚拟Home 条将自动消失；单击萤幕后就又会出现。

<img src=”https://www.xwie.com/uploadfile/2021/0629/73169ecrilduex5y.png” data-rawwidth=”3360″ data-rawheight=”1890″ class=”origin_image zh-lightbox-thumb” width=”3360″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73170wrzb0o2izuo.png”>

「安全区」——这词儿怎么听起来有点耳熟？

看着新的iOS 设计规範文档，一个陌生又熟悉的词浮现在我的脑海中——出血（bleed）。

<img src=”https://www.xwie.com/uploadfile/2021/0629/73175z1024gc3r4b.png” data-rawwidth=”582″ data-rawheight=”308″ class=”origin_image zh-lightbox-thumb” width=”582″ data-original=”https://www.xwie.com/uploadfile/2021/0629/731793s4xdh3h3xn.png”>在平面印刷设计中，为了顾及之后纸张裁切过程中可能出现的误差，设计师会在画布四周留出一点边缘空间，这一圈额外的空间就叫做「出血」。同时，设计师一般也会设置一个「安全区」，确保设计稿中的重要内容都出现在安全区内。

对数字化时代下的UI 设计师来说，我们本可以永远把「出血」和「安全区」的概念永远抛之脑后，因为萤幕不用裁切！全世界也许99.99% 的手机萤幕都是规整的矩形，我们的安全区就是整块矩形萤幕（安卓系统底部的虚拟按键可以近似理解为萤幕外，设计时可以忽略）。然而iPhone X 这个妖蛾子的出现，又迫使我们重新找回那个久远的记忆……

让我们来看看苹果定义的iPhone X 设计「安全区」吧：

<img src=”https://www.xwie.com/uploadfile/2021/0629/73181b52yckl2tjr.png” data-rawwidth=”3360″ data-rawheight=”1890″ class=”origin_image zh-lightbox-thumb” width=”3360″ data-original=”https://www.xwie.com/uploadfile/2021/0629/731824usezxxgcbq.png”>手机纵向持握状态下，安全区是从萤幕最顶端往下44 pt 开始计算的，要注意的是，它并不是和「齐刘海」完全齐平的，而是要再往下一点。「下巴」位置上，从下往上推34 pt 以上的部分开始才被视为安全区。

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

<img src=”https://www.xwie.com/uploadfile/2021/0629/731843oidqkpgcop.png” data-rawwidth=”3360″ data-rawheight=”1890″ class=”origin_image zh-lightbox-thumb” width=”3360″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73185sq5ctnw4tnu.png”>横向状态下（假设是逆时针旋转90 度），原本的「刘海」部分到了左侧，「出血」部分实际佔用面积不变，而儘管虚拟Home 条挪到了下方的长边上，萤幕最右边虽然没有任何系统及元素，但苹果依然建议将其设置为与左侧「刘海」相对称的「出血」。也就是说，在横向状态下，你的安全区是个半岛，只有上方是连接到萤幕边缘的。这又是为什么呢？为什么苹果官方不建议设计师充分利用最右边的空白面积呢？为什么非要左右对称地设置「出血」呢？尤其考虑到对于很多手机游戏来说，任何一点萤幕空间都是宝贵的，血条，金钱，操作键，小地图，大地图等等，太多元素逼着设计师充分利用每一寸空间了。

苹果官方给出的解释是，由于你无法预测用户在横向持握下会把「刘海」放在左边还是右边，如果安全区不是横向居中放置的，会造成界面中元素与手机边缘的相对位置不固定。他们认为，用户在使用手机时（尤其是玩游戏的时候）高度依赖手部的肌肉记忆，不对称设计儘管空间利用率更高，但与用户的肌肉记忆相背，由此导致的失败操作容易让用户沮丧。因此，苹果向广大设计师们高声疾呼：请把按键全都放到安全区里来吧！

<img src=”https://www.xwie.com/uploadfile/2021/0629/73186n0pba2jbkoh.png” data-rawwidth=”3360″ data-rawheight=”2370″ class=”origin_image zh-lightbox-thumb” width=”3360″ data-original=”https://www.xwie.com/uploadfile/2021/0629/73189dvzwqeoci2c.png”>

前往下一页：UI设计师谈：如何评价 iPhone X 的设计规範？（二）

　　免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！