【翻译】iPhone X 界面指南

翻译自苹果开发者指南

iPhone X

iPhone X 拥有高分辨率、圆角、无边框的大屏幕，它提供了前所未有的体验，非常逼真，表现力丰富。

屏幕尺寸

在竖屏下，iPhone X 的显示屏宽度和4.7"的 iPhone 6，iPhone 7，iPhone 8 的显示屏宽度�相匹配。然而 iPhone X 比4.7"的显示高出145pt，导致它大致多出20%的垂直空间可以用来展示内容。

横屏显示规格	竖屏显示规格
1125px × 2436px (375pt × 812pt @3x)	2436px × 1125px (812pt × 375pt @3x)

为你的App中的所有贴图提供高分辨率图片。iPhone X 显示高分辨的@3x贴图。对于字形和其他平面的矢量图形，最好提供与分辨率无关的 PDFs。对于栅格图，可以提供@2x和@3x版本的图片。详情见图片尺寸和分辨率和自定义图标。

布局

在为 iPhone X 做设计时，你必须确保布局占满屏幕，并且不会被设备圆角、传感器仓（译者注：iPhone X 的刘海）或虚拟 Home 所遮挡。

大多数使用标准系统提供的 UI 元素（例如 navigation bar, table, collection）的 App，会自动适应设备的新外形。背景会延伸到显示屏的边缘，并且 UI 元素被适当地插入和定位。

4.7" iPhone	iPhone X

对于自定义布局的 App，适配 iPhone X 也比较简单，尤其是你的 App 使用了 Auto Layout 和它里面的安全区与边界布局指南（safe area and margin layout guides）。

在 iPhone X 中预览你的 App。你可以使用模拟器（Xcode 附带）来预览你的 App，来检查裁剪和其他的布局问题。一些功能，比如 wide color imagery，最好使用真机上预览。

提供全屏幕体验。确保背景延伸到显示屏的边界，并且垂直可滚动的布局（比如 table, collection）一直延续到底部。

插入必要的内容以防止被裁剪。一般来说，展示内容应该是居中对称的，所以就可以在横竖屏上看起来都很棒，还不会被角落和刘海剪裁掉，或者被虚拟 Home 遮挡掉。最好的办法，就是使用系统提供的标准 UI 组件和 Auto Layout 来构建你的用户界面。所有 App 都应该遵循 UIKit 定义的安全区和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区还可以防止内容覆盖 status bar，navigation bar，tool bar 和 tab bar。

注意 status bar 的高度。iPhone X 的 status bar 比其他 iPhone 要高。如果你的 App 假定了一个固定的状态栏高度，用于将内容定位在状态栏的下方，那你就必须更新你的 App，来基于用户的设备来动态定位内容。需要注意的是：当后台任务（例如录音和定位）活动时，iPhone X 不会改变状态栏的高度。

如果你的 App 当前隐藏了状态栏，那么对于 iPhone X 就需要重新考虑这个问题。iPhone X 的显示比 4.7" iPhone 提供了更多的垂直空间，而且状态栏占据的空间可能是你的 App 不会利用的。状态栏显示的信息也是对用户有用的。它只应该为额外的价值而隐藏起来。

4.7" 全屏图片	iPhone X 上被剪裁	iPhone X 加框展示
iPhone X 全屏图片	4.7" 设备上被裁剪	4.7" 设备上加框展示

使用已有图片时，需要注意长宽比例的差异。iPhone X 与 4.7" iPhone 拥有不同的长宽比。因此，4.7" iPhone 的全屏图片显示在 iPhone X 上会被裁减或者加框。同样的，iPhone X 的全屏图片显示在 4.7" iPhone 上也会被裁减或者加框。需要确保重要的内容在不同的显示屏尺寸上都可以被展示出来。

避免在屏幕的底部和角落里放置交互控件。用户使用底边滑动手势来访问主屏和切换 App，这些手势可能会取消掉这些区域中你自己实现的手势交互。用户要接触到屏幕的远角并不容易，也不舒服。

不要遮罩或者强调关键的显示功能。不要企图通过在顶部和底部放置黑条来隐藏掉设备圆角、传感器仓，或者虚拟 Home。不要使用像括号、边框、形状或引导文案这样的视觉装饰来强调这些区域。

谨慎启用自动隐藏虚拟 Home。当自动隐藏生效时，如果用户几秒没有触碰屏幕，虚拟 Home 就会淡出。当用户触摸屏幕时它又会出现。只有当用户在观看的时候，比如播放视频或照片幻灯，才启用这个功能。

详见自适应和布局。

颜色

iPhone X 可以支持 P3 色彩空间，比 sRGB 更丰富更饱和。

使用 wide color 来增强视觉体验。使用 wide color 的照片和视频更加逼真，视觉数据和状态显示也更加具有感染力。详见 颜色管理。

手势

iPhone X 上的显示屏使用屏幕边缘手势来访问主屏幕、切换 App、通知中心和控制中心。

避免和系统的屏幕边缘手势相互干扰。在所有 App 中，用户都要用到这些手势。只有在极少数情况下，例如像游戏这样的沉浸式 App 可能需要自定义的屏幕边缘手势，优先于系统手势，第一次滑动会调用特定 App 的手势，第二次滑动则会调用系统手势。使用这种行为（称之为边缘保护）的时候应该谨慎，因为它使得用户难以访问系统级操作。详见手势。

设计的附加注意事项

使用正确的认证方式。iPhone X 支持 Face ID 认证。如果你的 App 集成了 Apple Pay 或其他系统身份验证功能，请勿在 iPhone X 上使用 Touch ID。同样的，也要确保你的 App 在支持 Touch ID 的设备上不要使用 Face ID。

不要重复定义系统提供的键盘功能。在 iPhone X 上，即使使用自定义键盘，Emoji / Globe 按钮和 Dictation 按钮也自动显示在键盘的下方。你的 App 不能影响这些按钮，所以避免在键盘中重复这些按钮造成混乱。

资源

从资源下载 Photoshop 和 Sketch 的 iPhone X 设计模板。