迅维网

标题: 如何评价新版 iPhone X 的设计规范？ [打印本页]

作者: 给我闪 时间: 2017-11-3 12:57
标题: 如何评价新版 iPhone X 的设计规范？
设计iPhone X -秋季2017 -视频-苹果开发者

作者: keajoo 时间: 2017-11-3 12:57

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

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

　　iPhone X 迈向了全面屏，移除了原本在手机底部的实体 Home 键，取而代之的是一条 134 x 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 指示条重叠了？没关系！这是官方推荐的正确做法！事实上，用户依然可以点选最下方的列表条目。这种情况下，全面屏才是真的「全面」了。

特性四：鸠占鹊巢
　　如果你的 App 带有「底端上划」这样的炫酷操作……Apple 的建议是：少侠要不你还是重新考虑一下？因为这个交互我们已经占了！

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

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

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

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

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

　　在平面印刷设计中，为了顾及之后纸张裁切过程中可能出现的误差，设计师会在画布四周留出一点边缘空间，这一圈额外的空间就叫做「出血」。同时，设计师一般也会设置一个「安全区」，确保设计稿中的重要内容都出现在安全区内。

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

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

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

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

　　横向状态下（假设是逆时针旋转 90 度），原本的「刘海」部分到了左侧，「出血」部分实际占用面积不变，而尽管虚拟 Home 条挪到了下方的长边上，屏幕最右边虽然没有任何系统及元素，但苹果依然建议将其设置为与左侧「刘海」相对称的「出血」。也就是说，在横向状态下，你的安全区是个半岛，只有上方是连接到屏幕边缘的。这又是为什么呢？为什么苹果官方不建议设计师充分利用最右边的空白面积呢？为什么非要左右对称地设置「出血」呢？尤其考虑到对于很多手机游戏来说，任何一点屏幕空间都是宝贵的，血条，金钱，操作键，小地图，大地图等等，太多元素逼着设计师充分利用每一寸空间了。

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

尺寸大了，比例变了，这意味着……

　　在 iPhone X 之前，尽管 iPhone SE，7 和 7 Plus 的屏幕尺寸大小不同，但都是 16:9 的屏幕。而 iPhone X 差不多是个 13:6 的屏幕（812 x 375 pt）。屏幕的绝对尺寸也变大了，从 4.7 吋增大到 5.8 吋——这些对设计来说意味着什么呢？

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

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

　　无论是在通勤地铁上，还是走在路上一手拿奶茶，另一手拿手机，在很多情境下单手操作是无法避免的。苹果在 iPhone 6 Plus 中第一次引入了两次轻触 Home 键将屏幕整体下移的交互设计。

　　然而，随着 iPhone X 移除了实体 Home 键的，这个精彩的交互设计也随之消失了。虽然很多人已经习惯了直接在 iPhone 上的左滑返回，但以下两个因素阻碍了它成为事实标准的返回操作：

　　1）该交互方式的可见性为零，可发现性较低

　　2）App 自带的横滑操作可能造成交互冲突。比如：邮件类 app 中的归档操作，列表控件中的删除操作，「走马灯」控件（Carousel）的横向滚动等等。

　　也许现在是时候重新思考左上角的返回键了。在这里提供一个特殊的应用例子仅作抛砖之用：

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

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

矢量图形 PDF 是你的朋友
　　iPhone X 的屏幕分辨率达到 1125px × 2436px（458 PPI）。更高屏幕画质意味着位图素材的尺寸也要相应变大。这种情况下，尽可能多地使用 PDF 矢量图形可以在更大程度上为 App 瘦身，节省流量。

给设计师唯一的好消息……

　　看到这里，作为设计师的你也许会觉得：这 iPhone X 就是个大坑！是的，我看完新的设计文档确实也有这种感觉……对设计师来说，有没有什么好消息呢？
有（且可能仅有这一条）—— 那就是大家再也不用考虑打电话，WIFI 热点分享等特殊状态下的设计啦！因为 iPhone X 用状态栏时间的背景颜色来统一表示这些特殊状态（不再有高度变化），喜大普奔！

总结

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

新增的虚拟 Home 指示条，将成为你不得不考虑的设计元素之一。希望你还能记得它的五个特性：如影随形、黑白双煞、真 · 全面屏、鸠占鹊巢、自动隐身。
全面屏 iPhone 更大，也更瘦长了。但对你来说，你要时刻牢记一个陌生又熟悉的词——「安全区」，尤其是在横向持握状态下。
你尽可能多地使用矢量图形了吗？你的 App 安装包变大了多少？全屏图片被奇怪地切割了吗？你放在左上角的主功能键是否超出了拇指舒适区？有空的时候，不妨想一想，「返回」操作是否还有别的可能？

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

　　也许你并不会买 iPhone X，也许看着那道「齐刘海」你内心的强迫症小人已经闹翻，但你还是一字一字看起了新的苹果设计规范和这篇文章。尽管 iPhone X 让你的工作更麻烦了，你还是会把每个设计稿做到像素级的精确 —— 因为你是一名设计师，你希望用自己的双手，让这个世界变得更好，哪怕是那么一点。

作者: ejinjing 时间: 2017-11-3 12:57
　　普通设计师一枚，总结一下官方文档的内容，就当作笔记了……内容以《designing for iPhone X》视频为主，视频前半部分与新版HIG/Overview/iPhoneX部分内容相同，后面用一些实例总结重点。白色配图来自HIG，黑色配图来自视频截图。括号内容是本人的备注。（为方便阅读，以下内容文字在前图片在后）

————————正文分割线————————
　　iPhone X 屏幕宽375pt，1125px@3x，高812pt，比iPhone 8 高度多出20%。（真正的@3x！）

　　为iPhone X设计需要确保布局填充屏幕，不被圆角、传感器和home指示器（下面有说明）所掩盖。

　　iPhone X 屏幕底部任意位置上滑可以返回主屏或者进入任务切换界面，屏幕底部有一个home指示器固定显示在app上层。

　　大多数app使用系统提供的UI元素，会自动适应iPhone X 的屏幕。Navigation bar、tab bar和tool bar会扩展到屏幕顶部和底部弧形区域。

　　水平布局时，table view全屏显示，内容只在中间安全区显示，iOS 11新增了一种布局叫做「Safe Area layout guide」。（下图蓝色+红色区域是安全区域，红色是margin，注意水平布局时不显示状态栏，安全区底部仍然要留出home指示器的位置）

　　如果app使用自定义控件或非标准布局，要在iPhone X上运行良好需要一点修改。

　　一、全屏显示

　　iPhone X和4.7寸iPhone屏幕长宽比不同，提供 Fill 和 Fit 2种图片缩放方式。

　　二、重新设置关键交互和关键信息的位置。

　　交互元素不要靠近角落（发现大量我比苹果设计师聪明系列）

　　屏幕边缘的视觉元素要移动位置，部分情况下要重新设计。

　　iPhone X 状态栏高度更高，在电话和定位等后台任务时，高度不会变化（就是打电话和导航时，原先顶部增加的彩色带，现在变成时间信息底部的彩色气泡，见下图）

　　水平布局时，交互元素两侧距离相等，左侧右侧旋转时位置固定，方便用户记忆。

　　最后，底部指示器是系统的核心交互，会强制显示，针对浅色和深色背景会改变颜色。

　　底部按钮要避开home指示器，home指示器不需要特殊强调（不要duang！）

　　应用可以打开edge protection（边缘保护？），第1次操作拉出home指示器，第2次退出应用。

　　在底部的点击操作不会触发home指示器，即使app内容在指示器下层，也可以被点击。

　　全屏模式时指示器自动隐藏，触摸屏幕可以显示。

———————如何评价的分割线———————

　　感觉对iPhone X 的评价点主要集中在「齐刘海」上，贴一个李楠的回答李楠：iPhone X 为什么用“齐刘海”，而不是“窄额头”？只是为了贵么？

　　设计规范内用了大量篇幅解决屏幕边缘不规则带来的问题，总结就是app尽量全屏显示，但可交互内容限制在安全区内，底部要给home指示器留空间。至于说效果好不好，我觉得还是要上手用过之后才能评价。

作者: 闲不住a 时间: 2017-11-3 12:57
这个时候需要转一张it之家的图片
纯属恶搞

作者: 印度大拿 时间: 2017-11-3 12:57
仍认为 iPhone X 的「刘海」应该做平整，它有用，官方规范里叫「Sensor Housing」，内藏8个重要传感器。搞成异型明显是向「全面屏」妥协，但并不讨巧，反而对软硬件层面都有影响：既在App设计时需额外考虑适配布局，也没给未来可扩展的其他传感器预留空间。其实是个劳师动众、性价比不高的设计决策。
另外，「安全区」正是一个受制于「刘海」的妥协产物，要投鼠忌器的避开「刘海」和「屏幕圆角」，在异型屏中切出一个上下左右对称的矩形，其实降低了全面屏的实际利用率。同时，目前设计规范里关于「安全区」的定义比较模糊，那个 Margin 的宽度还是动态自适应的，怎么个动态法？请继续看开发文档，这又导致进一步增加了设计&开发的学习成本和工作量。…… 是不是平白无故搞出一场蝴蝶效应，因为一个刘海，引出了一堆本不需要的额外事端。

作者: ZmAXxoJF 时间: 2017-11-3 12:57
我觉得这里面最大的疑点是为什么home指示器要跟着屏幕一起旋转。毕竟物理home键是一直保留在那个位置的，那么把home指示器在横屏的时候放到底下，用户能不能习惯是个问题。
然后这么做显然是有drawback，就是损失了本来就有限的宽度空间。笔记本电脑上大家都说带鱼屏带鱼屏，现在倒好，iPhone X一横大概只能称之为水蛇屏了……

作者: tgboler 时间: 2017-11-3 12:57
事实证明，所有不使用官方控件而是自己造轮子的，都死得比较惨…

作者: chaojiwantong 时间: 2017-11-3 12:57
一看就知道两边是类似macbook pro 的 Touch Bar 的存在，单纯的放信号和电量，还能有简单的操作，有钱任性，强调的就是体验。

作者: wason1 时间: 2017-11-3 12:57
可操作性 >> 照顾少部分人的审美

找个同样大小的手机，试一试单手伸手去按四角边缘的按钮，能不能握紧手机都是问题。

至于被吐槽最多的顶部区块，无非就是守旧的屏幕是方的的固有意识占据了主流。而切割出了一小块通知区域，其实反而让主显示区更加完整。

作者: ZmAXxoJF 时间: 2017-11-3 12:57
看题目，问的是设计规范。iphone x好不好你我都没摸过，求别说。
我就有一个疑问，明年苹果出的新手机，还带不带刘海儿。
如果以后都不带，就iphone x带，我说x是畸形怎么了，来咬我？
明年买来手里还没捂热呢，隔一年可能就没人给你做适配了。
（16年3月发布的se，现在很多app适配都有点不上心了，投入产出比哇）
而且为了适应一款手机，去补充这么多规范，大开白名单，我觉得不行！
iphone x的刘海丑，就丑在自己身上，不买就是了。
但是丑到ios 11的设计规范里，还得让人去做额外的适配。
连sketch源文件都得出两个份，iphone x一份，其他一份。

我只能说：excited！

明年苹果大手一挥，ios 12一推送。
你说谁还记得ios 11里面有iphone x这一节？

朋友们，好不容易通过自我奋斗挣来的钱，买手机怎么就不考虑历史进程了呢？
那帮设计师现在跪舔苹果一时爽，说刘海真鸡儿好看。
两年后人家忙着去跪舔真·全面屏，你还真指望这帮人去给你做刘海儿屏适配？
天呐，醒醒吧！

作者: qfwoshiyu 时间: 2017-11-3 12:57
跑个题

届时百度搜iPhoneX提示可能会是这样的：iPhoneX下面哪一条线怎么去掉？
iPhoneX下面为什么会有一条线？

被残酷的现实冲击到……
无奈接受现实……
然后默默打开AssistiveTouch并无视那条线……

全民开启AssistiveTouch时代………

—————分割—————
以上夸张了哈，不过手势和AT届时肯定是两个对立阵营……

作者: TejUKCJa 时间: 2017-11-3 12:57
为什么不把指示条放到两个耳朵上？

左边那条下滑桌面，右滑锁定左滑解锁
右边那条下滑切换应用左滑锁定右滑解锁

同时两个指示条保持常黑，显示时间电量等

我觉得这样好很多

作者: inmyhome 时间: 2017-11-3 12:57
对@Riceman 米饭侠的一些观点我是不认可的。他那些观点是将iPhonex跟以前的iPhone设计对比得到的。我觉得应该用未来设计趋势的全4面无边框进行对比来评价现在的iPhonex比较合适。

他说的第一个观点：如影随形

既然是对标4面无边框手机，那我们全4面无边框的安卓手机是怎么做的呢？大概就是上图的样子，底部是黑色的功能栏。现在对比一下苹果的方案，哪个好？相信大家都知道
他的第二个观点：黑白双煞

我想知道他能提出这个槽点满满的观点，难不成也想着把安卓下面的功能栏做出渐变色？
有人可能会说渐变色做不了但可以和背景融为一体的呀。像这种

我想说现在大部分安卓软件都没有这样做，只有自家的软件才这么干（截自emui）苹果是要求软件适配的
退一万步说，假设全部安卓软件都做到了跟背景适配，其实真正对标苹果那个指示条的是安卓上面的三角形，圆形，及正方形。说苹果是黑白双煞的，跟说这三角形是黑白双煞没区别。
他的第三个观点：真全面屏

可以看到未来全4面无边框的安卓手机，在有功能栏的情况下，下面的项目依旧没有在底部显示。
他的第四个观点：鸠占鹊巢

他的逻辑是现在iphonex的底部上划对以前一些原本就运用底部上划的app造成不便。而在我看来，事实并不是这样的。上划导致的误操作在以前的iPhone就存在：上划拉出控制中心。你可以说ios上划会导致误操作，但不能说iPhonex的设计对一些app造成影响。毕竟这些影响早已存在，并不是iphonex才出现的
最后，我最不同意的是他说的拇指盲区变大

他只是单单从屏幕尺寸得到的结论，认为5.8英寸的盲区比7plus的5.5寸要大。这是不对的，因为他还有一个变量没有考虑进来。那就是屏幕正面的巨大变化。我简单地说：按照他的逻辑，假设iPhonex是5.5寸，那x和7plus是一样的拇指盲区。但实际是这样吗？你们再想想7plus的下巴应该大部分区域都不是盲区吧。现在7plus的下面变成屏幕了尺寸从5.5变成6.2。没有下巴的6.2寸的7plus比有下巴的5.5寸7plus盲区增加了很多？这就是单靠尺寸判断拇指盲区而不考虑其他变量的结果。想不明白自己琢磨去！

作者: discuznt 时间: 2017-11-3 12:57
我觉得，如果不是苹果这样做，风评一定会比现在差到不知哪去了。还是帮主遗泽啊，造就了一个努力证明苹果不可质疑的群体

作者: gooobooo 时间: 2017-11-3 12:57

　　最近总结的iPhone X的设计规范，比楼主详细全面一些，贴在这里，大家一起讨论。

iPhone X 设计规范总结

　　9月13日，苹果秋季新品发布会发布了iPhone X。尽管看到了苹果久违的创新和进步，但除了调侃超高的售价和面部识别的段子外，设计师讨论的更多是iPhone X的创新给设计和适配带来的挑战。下面是观根据苹果WWDC官方视频和IOS Human Interface Guildlines总结一下官方推荐的设计实践。闲话少叙，来张iPhone X镇楼。

全面屏

　　全面屏算是自乔大爷仙去之后iPhone外观最大的创新了。当然创新有风险，为了最大化显示空间，苹果去掉了标志性的Home键，并使用了圆角屏幕，甚至顶部传感器区域留出了一个刘海。虽然一向的惯例是苹果会使用新技术弥补或革新旧技术或设计的不足，但至少现在我们不得不面对这些改变给设计师带来了挑战。

屏幕尺寸

　　足够诚意，在手机尺寸没有变大的情况下，苹果给iPhone X祭出了5.8寸的屏幕。尽管实际测量并去掉遮挡区域后， iPhone X的实际显示面积要比iPhone 8 Plus小很多。

　　屏幕尺寸方面，在竖屏情况下5.8寸的iPhone X显示宽度与4.7寸的iPhone 6、7、8宽度一致（这里是像素尺寸，武林尺寸还是有差异的），不过iPhone X在竖向上高出了145pt，高出近20%。

分辨率

　　iPhone X使用超视网膜屏，竖屏1125px × 2436px（375pt × 812pt @3x）像素分辨率，458ppi的屏幕像素密度。官方推荐，最好为你的应用或游戏所有视觉元素提供高分辨率图素。对于文字和其他矢量图素最好使用与分辨率无关的PDFs格式；对于位图，需要提供@3x和@2x两个版本的原图。

长宽比

　　与其他16:9版本不同，iPhone X屏幕屏幕长宽比为 13：6，直追目前安卓比较流行的2：1和21：9。尽管苹果提供的Autolayout为IOS各种设备的适配提供了解决方案，也许这个屏幕长宽比对普通的APP影响可能不大，但却给需要自定义的游戏UI设计带来了极大的挑战。这代表很多界面可能需要压黑边或者内容两边显示大量留白。具体请参照后面的官方推荐。

状态栏

　　虽然刘海看起来很奇怪，不过在竖屏的情况下，刘海和两边的时间、网络和电源等状态结合的倒是不错。不仅如此，iPhone X状态栏的特殊状态也做了优化，通过对时间背景的变化来表现打电话和热点接入状态，再也它们带来的高度变化导致UI高度变化了。

Home指示条

　　Home键的消失算是iPhoneX除了全面屏外最大的改变之一了。在iPhoneX之前，物理Home键一直是苹果产品的标志性设计。Home键承载了太多功能，如单击唤醒手机、返回主屏；双击唤出多任务；三击唤出辅助快捷键；长按启动Siri；轻按指纹识别解锁或支付等。正因为如此，Home键过度使用带来的失灵等问题，才常常被诟病。

　　而现在一条全新的Home指示条取代了物理Home键，并用低端上划手势实现返回桌面和切换程序功能。而其它的功能则采用新技术替代或集成到了旁边的开机键上。

　　苹果最新文档指出，Home指示条至关重要，除了特定条件下，它将永远在屏幕底部（无论竖屏还是横屏），这意味着你在设计中必须考虑它的存在。注意它与导航栏或底部内容的冲突和融合。与很多苹果其他界面元素一样，Home指示条会随背景自动改变成明暗状态，提供黑白两种颜色。官方明确不建议开发者为Home指示条进行自定义。

　　那么是不是就代表开发者无法使用这个区域，屏幕中导航条就一直存在，且屏幕上划功能就无法使用了呢？如果是的话，苹果的全面屏不就不全面了吗？所以答案当然是否定的。首先，苹果指示建议核心内容和功能放在安全区内，而类似列表和图片集等功能是可以现在到屏幕底部的。

　　其次，为了为给照片和视频等应用提供沉浸体验，苹果允许开发者可以开启Home指示条自动隐藏功能。开启后几秒钟不触碰屏幕，指示条会自动隐藏。触控屏幕后再次出现。官方建议，这个功能应该只在被动观看体验时（播放视频或照片幻灯等）启用。官方并没有游戏界面的处理方式，所以对于游戏而言，这个指示条要常驻显示。

　　再次，苹果允许开发者在必要的情况下开启边界保护功能。 开启后，第一次上划唤醒Home指示条，再次滑动会激活开发者设定的功能。但笔者依然不建议您这么做，因为这是系统独占的功能。一是操作会变得繁琐并可能会误操作，而是使用它难以为您的应用形成必要的操作关联。

圆角和刘海

　　为了最大化利用机身为屏幕提供更大的空间，iPhoneX使用了之前从来没有使用过的圆角屏幕（半径44pt）和存放各种传感器的刘海（高度等级30pt）。这代表您放在角落的内容极有可能被裁剪而造成显示不全，从而影响查看和体验。

　　当然对于大多数使用标准的、系统提供的UI元素的应用这不是什么问题，IOS给出了官方布局如下，很好的规避了裁切的问题。那么关于布局官方指南又有哪些呢？

界面布局

　　上面介绍了iPhoneX全面屏带来的新变化及带来的新挑战，那么我们如何进行全面屏设计来避免内容被圆角、刘海以及Home指示条遮盖和干扰呢？

安全区

　　为了既能获取全屏沉浸体验，并避免自由设计造成的各种设计问题，苹果首次引入了安全区的概念。那么苹果如何定义安全区呢？

　　如果你的应用是竖屏的，苹果推荐屏幕的顶端和低端需要留出足够的留白，细心的同学可能发现，上下好像不太一样。你想的没错，上下并不是对称的。安全区的顶端始于屏幕顶端44pt（132px）处，而下端距离屏幕底端34pt（102px）处。这很好理解，一是为了面遮挡，而是为了能为Home底端上划操作和控制中心顶部下划操作留出足够空间，防止误操作。如果你自己观察官方应用的话，你会发现，竖屏的全安全区悄悄是iPhoneX与其他设备真正适配的内容区域。

　　如果你的应用是横屏，苹果不仅推荐左右需要流出足够的空间，屏幕下端也要为Home指示条留出足够的空间。与竖屏一样，有刘海的一侧留出44pt，无刘海的一侧34pt。你可能会奇怪，右边没有什么内容，为什么也要留白呢？官方给出的解释是，一般来说内容应该居中显示，而且你无法预测刘海到底会在那一侧，如果不居中放置，会造成屏幕翻转时UI元素位置相对不固定。而用户玩游戏的时候是高度依赖肌肉记忆的，而不对称的屏幕不利于玩家形成肌肉记忆，所以官方建议要把核心内容放到安全区里来。当然屏幕底部为Home指示条留出来的区域并不是不可以放置内容，而是尽量不要防止可交互的元素。

边距

　　基于平衡视觉和适配两方面的考量，iPhone X继承了边距（Margins）的概念。如果您从事过视觉设计或网站设计应该对这个概念不陌生。在iPhone X中，边距与安全区的边缘重合，但是上下贯通屏幕顶部和底部。

　　边距的存在进一步规范了内容的布局方式，值得注意的是无论是安全区和边距的存在主要是为了规范核心内容和主要交互功能，而不是无交互的背景或者场景。
适配

　　根据官方推荐，您的应用最好使用标准的系统提供的UI元素控件以及AutoLayout自动布局构建界面。并应该遵循UIkit定义的安全区和布局边距，这样可以确保所有内容可以随设备和情景合理内嵌。也能避免遮挡状态栏、导航栏、工具栏以及标签栏。更重要的是您的应用或游戏在各个设备上可以自动适配。而不需要做专门的适配方案。

　　官方不推荐通过屏幕顶部和底部压黑边尝试隐藏设备的圆角、刘海（传感器壳体）或者Home指示条。同样不要使用像贴边支架、边框、图形或说明文字这样的视觉装饰特别处理这部分区域。

　　同样官方推荐避免将交互元素放在屏幕底部或者角落。因为从屏幕底部上划被用户激活Home指示条并回到主屏或进入多任务切换，且系统会取消你在这个区域布局的手势。而屏幕角落区域很难触控。更不要设计非对称布局。

　　当然如果您不遵循官方推荐，那么您需要在界面的同时需还需要考虑系统的状态栏等各种内容的显示问题。所以，苹果强烈不推荐您自定义。

推荐布局

核心内容及操作

　　如安全区中所讲的一样。为了更好地进行适配和良好的布局，官方推荐所有核心内容和操作需要内嵌在安全区内。从而避免与状态栏、导航栏、工具栏及标签栏重合。

　　但对于内容的推荐官方也推荐需要竖屏滑动的内容，比如列表或者照片库等需要延伸到屏幕底部。

　　所以我们可以简单地理解：对于需要频繁操作的功能，官方建议不好超出安全区切除Margin的区域；而核心内容留好边距后顶部依然需要遵循安全区的顶端，但底部可以延伸到屏幕底部。

背景或场景

　　为了更好地全屏体验和沉浸体验，需要确保应用背景或类似游戏的场景平铺全屏。其实从官方演示的app中可以看出，这个游戏的控件并没有严格遵循安全区的概念，估计当时并不清楚官方的设计规范。至少有一点我们可以知道，我们主要内容可以紧贴安全区的边缘，也就是说如果你的内容是贴边的，你可以忽略Margins。

全屏图素和视频

　　关于全屏元素的适配，官方给出了下面两种情况的适配方法，简单来说就是宽度适配或者高度适配，以保证您的内容的正常显示。但是我们知道iPhone X的长宽比与其他设备的分辨率是差异是很大的。所以推荐两种方式

基于16:9分辨率适配

　　可以看出，如果使用较小的长宽比作为基础的话，应该以宽度进行适配。

基于13:6分辨率适配

　　同样，如果使用较大的长宽比作为基础的话，应该以高度进行适配。

　　但无论哪一种适配方式，需要保证重要的视觉内容现在是屏幕中间，这样无论选择哪种适配方式，在两种屏幕上都不会因为适配裁剪而丢失。
相关总结

iPhone X 全面屏分辨率为2436px × 1125px (812pt × 375pt @3x)，长宽比为13:6，GUI最好使用PDF格式矢量切图或者提供@2x和@3x的图素。
苹果对状态栏做了很好的优化，再也不用担心各种状态导致的高度变化给UI设计带来的影响
Home指示条除非被动查看消失以外，一般都会常驻在界面上，不能自定义，且需要给其留足空间，虽然苹果提供了边界保护允许开发者在不得已情况下使用底部上划功能，但是不建议用。
圆角和刘海并不会影响你的设计，因为苹果提出了安全区的概念，并以此为适配区域。
横屏的安全区与竖屏的安全区有所不同，因为横屏下方需要留出Home指示条的空间。
边距的概念是为了更好的排版布局，保证统一的视觉体验。
边距和安全区规范的都是核心内容和交互功能，而不是无交互的背景和场景。
苹果推荐开发者遵循UIkit定义的安全区、边距等标准UI元素并使用AutoLayout自动布局界面，以方便适配其他设备。
苹果不推荐通过压黑边或其他装饰的方式处理刘海和圆角以及Home指示条。
苹果不推荐将交互元素放在屏幕底部或者角落，以及各种奇怪的不对称布局。
苹果推荐将核心内容和操作放到安全区以内，但对于列表和图片集等可以滑动的控件苹果推荐延伸到屏幕底部。
为了获得更好的沉浸体验，苹果推荐无交互的背景和场景需要铺面全屏。
全屏背景和视频内容的无论你是宽度适配还是高度适配，都需要保证核心内容在中心区域内，防止被裁切影响传达。

　　当然iPhone X上还有很多其他创新，如采用色彩锐利的OLED超级视网膜屏；支持3D面部识别解锁手机，支持AirPower无线充电；后置竖排1200万像素广角及长焦镜头，支持人像背景虚化等，这些创新展开也会有很多对交互设计和视觉设计的影响，这里就不一一赘述了。
　　如有遗漏，欢迎一起讨论，版权归作者所有。状态请注明出处。

作者: twxd 时间: 2017-11-3 12:57
苹果的LOGO 本来就有个缺，这是对图灵的纪念。乔布斯设计的LOGO，IphoneX这是对帮主和LOGO最大的致敬。也是未来苹果的标识。否则都全面屏，都一样了，有啥区别。

作者: 爱上阿南 时间: 2017-11-3 12:57
虽然x挺符合我的审美，内心感到必须赞一个，但是面对干瘪的钱包，我不得不压抑内心的欲望，振臂高呼：好丑，丑出新天际，丑到新高度！

作者: inmyhome 时间: 2017-11-3 12:57
乔布斯见了会流泪。

作者: aHNtCqDM 时间: 2017-11-3 12:57
ipone X 作为一台全面屏的设备，和上一代的 iPhone 7 还是有着很大的区别，这些区别不仅体现在材质和工业设计上，在界面交互上也有一些差异。ipone X 的显示屏所能显示的内容和 4.7 英寸的 iPhone 7 一样「宽」（同为 375pt），但在高度方面就比原先多出了 145 pt ，再加上 iPhone X 去掉了最为标志性的 Home 键，这两点直接导致的就是界面的布局和交互会发生相应的变化。

△ 图 / Apple
接下来我们来看看在 iPhone X 上都有哪些交互变化。
注：下文中的「iPhone 7」指搭载 iOS 10 的 iPhone 7，「iPhone X」指搭载 iOS 11 的 iPhone X。
Home 键

iPhone 7：为实体 Home 键。
iPhone X：官方称呼为 Home Indicator，形状为一根横线，在主屏幕时是自动隐藏的。在使用软件时，例如观看视频，如果手指长时间不触碰屏幕也会自动隐藏。

△ 屏幕底部的横线（Home Indicator）
主屏幕

iPhone 7：按下 Home 键。
iPhone X：从底部向上轻扫一下，即可返回主屏幕。

多任务

iPhone 7：双击 Home 键； iOS 10 中可以在屏幕边缘使用 3D Touch 按压进入多任务列表。
iPhone X：从底部向上轻扫并停顿一下，就能激活多任务界面。

快速切换回上一个应用

iPhone 7：重按（3D Touch）屏幕左边缘，然后向右滑动，就能切换回上一个应用。
iPhone X：有两种方式：从屏幕底部向上轻扫并停顿一下，然后向右滑动，就能切换回上一个应用。

△ 图 / iMore 或者直接在屏幕底部的小横线（Home Indicator）上左右滑动，也能快速切换应用。

△ 图 / Apple
解锁屏幕

iPhone 7：抬起手机点亮屏幕，按下 Home 键并同时完成 Touch ID 解锁，识别后自动进入主屏幕。
iPhone X：抬起手机点亮屏幕（或用手指点一下屏幕来点亮），使用 Face ID 解锁，识别后会停留在解锁完成的界面，需要从底部向上轻扫才能进入主屏幕。

△ 图 / The Verge
辅助功能快捷键

iPhone 7：在「设置 – 通用 – 辅助功能 – 辅助功能快捷键」中选择需要使用的功能后（比如 VoiceOver），按三下 Home 键即可快速激活。
iPhone X：设置过程类似，激活方式改为连按三下侧边按钮。

SOS 紧急联络

iPhone 7：iOS 10 中无 SOS 紧急联络功能；iOS 11 在「设置 – SOS 紧急联络」中打开，激活方式为连按五次电源键。
iPhone X：设置过程类似，长按侧边按钮和音量上键来激活。

呼出 Siri

iPhone 7：长按 Home 键呼出 Siri ，或者对 iPhone 说「嘿，Siri」。
iPhone X：长按侧边按钮（原「电源键」，后改名为「侧边按钮」），就能呼出 Siri。

Apple Pay

iPhone 7：锁屏状态下双击 Home 键呼出 Wallet。
iPhone X：连按两下侧边按钮，即可使用 Apple Pay。

控制中心

iPhone 7：由屏幕底部向上滑动呼出控制中心。
iPhone X：从屏幕右上角向下轻扫。

通知中心

iPhone 7：由屏幕顶部向下滑动呼出通知中心。
iPhone X：从屏幕左上角或者中间向下轻扫即可（暂不清楚中间区域是否和控制中心对半分），关闭时向上轻扫。

（图 / The Verge）
屏幕截图

iPhone 7： Home 键和电源键同时按下，即可截图。
iPhone X：因为 iPhone X 没有实体 Home 键，所以改成同时按下侧边按钮和音量上键。

关机

iPhone 7：长按电源键后，滑动关机滑块；在「设置 – 通用」里滑到底部，有个「关机」按钮；按 5 下侧边按钮激活 SOS 紧急联络模式后，顶部有个关机滑块。
iPhone X：在「设置 – 通用」里滑到底部，有个「关机」按钮；长按侧边按钮和音量上键激活 SOS 紧急联络模式后，顶部有个关机滑块。

说了这么多，但是周莹少奶奶同款齐刘海还真是个性非凡~我认识的设计师里面对这款卸妆不能开机，看着齐刘海想入非非的都已经跃跃欲试了，不知道11月真正发售以后会带来如何令人震惊的使用体验~
静候佳（tu）音（cao）

欢迎光临迅维网 (https://www.chinafix.com/)