564      阿里云  技术社区[云栖]

iOS11人机交互指南-01：iPhone X概览

转自：优阁视觉

iPhone X 的全面屏具有更大尺寸和更高的分辨率，提供了前所未有的沉浸式体验。为了适配这种前卫的设计，以至于在 iOS 11 人机交互指南中专门新增了 iPhone X 的部分。

一、屏幕尺寸

iPhone X 使用 5.8 寸的超视网膜屏幕，采用 2436px * 1125px 分辨率的三倍图，转换成对应的一倍图是 375pt * 812pt，宽度与 4.7寸的 iPhone 6，iPhone 7 和 iPhone 8 相匹配（375pt * 667pt）。在高度方面，iPhone X 上的屏幕比 4.7寸 iPhone 多 145pt，增加了 20％ 的内容垂直空间。

iPhone X 的屏幕是 @3x 高分辨率，矢量图形最好提供独立于分辨率的 PDF 文件。对于位图，需要同时提供 @2x 和 @3x 的切图文件。

二、布局

当为iPhone X设计时，必须确保布局填满屏幕，而不被设备的圆角、传感器外壳或访问主屏幕的指示器所掩盖。

大多数使用标准的、系统提供的UI元素（如导航栏、表格和集合）的应用程序可以自动适应设备的新形式。背景材料扩展到显示的边缘，并且适当地插入和定位UI元素。

对于自定义布局的应用程序，如果应用程序使用自动布局并遵循安全区域和边缘布局指南的话支持 iPhone X 也应该相对容易。

2.1 预览应用

可以使用模拟器（包括 Xcode 开发工具）预览并检查是否存在剪切和其他布局问题。一些功能，如颜色比较多的图像，最好能在实机上预览。

2.2 提供全屏体验

确保背景延伸到屏幕边缘，而垂直滚动的布局，如标签和其他工具栏始终位于底部。

2.3 插入必要内容以防止被裁切

一般来说，内容应是居中对称的，确保它在任何方向看起来都很好，而且不会被角落或设备外壳裁切。为了达到最佳效果，使用标准的、系统提供的控件元素和自动布局来设计界面。所有的应用程序布局应遵循由 UIKit 间隔出来的安全区域，这些区域可以根据设备和上下文进行适当填充。安全区也可以防止内容改变状态栏，导航栏，工具栏和标签栏的位置。

2.4 注意状态栏的高度

iPhone X 上的状态栏比其他 iPhone 都高。如果应用固定状态栏高度来定位内容，必须更新应用布局，基于用户设备来动态定位内容。注意，当像录音和位置跟踪这样的后台任务处于活动状态时，iPhone X上的状态栏不会改变高度。

2.5 隐藏状态栏，请重新考虑

iPhone X 比 4.7寸 的 iPhone 能显示更多的垂直空间，状态栏可以填充程序无法充分利用的屏幕区域，告知用户最有用的信息，只有某些特殊目的才隐藏状态栏。

2.6 注意重用界面的长宽比差异

由于和 4.7寸 的设备长宽比不同，4.7寸设备界面在 iPhone X 上会被左右裁切或是上下黑边处理。同样，iPhone X 界面在 4.7寸设备会被上下裁切或是左右黑边处理。所以，要确保在两个显示屏幕上都保留重要的视觉内容。

2.7 避免最底部和角落放置交互控件

iPhone X 的下边缘使用滑动手势来返回主屏幕或者进行应用切换，所以底部可能会影响应用的手势操作。角落是不舒适区域，没有交互控件最好。

2.8 不要掩盖或特别注重异型区域

不要试图通过在屏幕顶部和底部放置黑条来掩盖设备圆角、传感器外壳或返回主屏幕的指示器。不要使用像括号、边框、形状或教学文字等视觉装饰让用户特别注重这些区域。

2.9 允许自动隐藏指示器

当启用自动隐藏时，如果用户几秒钟没有触摸屏幕，指示器就会淡出。再次触摸屏幕时会显示，给用户沉浸式体验。

三、颜色

在 iPhone X 支持 P3 色彩空间，比 sRGB 更丰富、更饱和，增强视觉体验。让照片、视频有了更多细节。

四、手势

iPhone X使用屏幕边缘的手势来返回主屏、应用切换、查看通知中心和控制中心。

4.1 返回主屏

从底部向上轻扫一下，即可返回主屏幕

点击播放 GIF/1768K

4.2应用切换

向上轻扫并停顿一下，可显示所有打开的 app

点击播放 GIF/1635K

4.3控制中心

向下轻扫，就能打开可个性化设置的控制中心

点击播放 GIF/1928K

避免干扰系统屏幕边缘手势，人们依靠这些手势完成系统级操作。在极少数情况下，像游戏这样的沉浸式应用可能需要自定义屏幕边缘手势，这些手势优先于系统手势。第一次滑动调用特定于应用手势，第二次滑动调用系统手势。这种行为（称为边缘保护）应该谨慎执行，因为它使用户难以访问系统级操作。

五、其他设计思考

5.1 身份验证

iPhone X 支持人脸身份认证。如果应用与苹果支付或其他系统认证功能相集成，不要在 iPhone X 上引用 Touch ID，同样要确保应用不在支持 Touch ID 的设备上引用 Face ID。

5.2 不重复系统键盘功能

在 iPhone X 上，即使用自定义键盘，表情/世界按钮和听筒按钮也会自动显示在键盘下方。应用不能影响这些按钮，因此避免在键盘中重复这些按钮，以免混乱。

六、资源

相应的 UIkit 可以在我们的 uikit.me 下载，PS 和 Sketch 都有，当然也可以点击原文下载哟～

点击播放 GIF/104K

最后更新：2017-10-08 15:23:14

  上一篇： iphoneX都已经高调更新色彩 你还有什么理由低调下去？

  下一篇： iPhone凭什么卖到这么贵？它第一个不服