「翻译」苹果官方 iPhone X 人机界面指南

鹿园

奥特曼真的存在

了解如何为新推出的全屏幕超视网膜显示屏优化你的应用和游戏。

阅读信息：

阅读时间：约8分钟
流量预估：4.9MB
资源下载：Apple UI Design Resources
相关视频：Designing for iPhone X | Building Apps for iPhone X

iPhone X 采用了一块大尺寸，高分辨率，圆润，边到边的显示屏，提供了前所未有的丰富内容和沉浸式体验。

屏幕尺寸

纵向上，iPhone X 的显示屏宽度与 iPhone 6，7，8的4.7“显示屏一致。但 iPhone X 的显示屏比4.7”显示屏高145 pt，导致垂直方向多出来大约20%的区域可以显示更多的内容。

为你应用里的所有视觉元素提供高清的素材。iPhone X 搭配一块比例因子为@3x 的高清显示屏。对于文字和其他矢量图形，最好提供可以无视分辨率的 PDF 文件。对点阵图，你可以提供@3x 和@2x 两种比例因子的素材。更多请参阅 Image Size and Resolution 和 Custom Icons。

布局

在为 iPhone X 设计时，你必须确保布局填满屏幕，并且不会被设备的圆角，上端的传感器或用于访问主屏幕的指示条遮挡。

大多使用标准的，系统提供的如导航栏，表格和集合等 UI 元素的应用会自动适应新屏幕。背景会延伸到显示屏边缘，而 UI 元件也会被适当地布置。

对于自定义布局的应用，支持 iPhone X 也不难，尤其是当你的应用使用了自动布局并遵守了安全区和边距布局规范。

在 iPhone X 上预览你的应用。你可以使用 Xcode 附带的模拟器来预览应用，检查遮挡或其他布局问题。但是像高色域图像显示效果之类问题，最好在真机上预览。

提供全屏的体验。确保背景延伸到显示屏的边界，并且如表格和集合等垂直可滚动的 UI 元素，确保它们一直延展到底部。

插入必要内容以防遮挡。一般来说，内容应该居中对称，这样它在任何方向看起来都很赞，不会被四角，传感器或访问主屏幕的指示条遮挡。为获得最佳效果，搭建界面时请使用标准的系统提供的 UI 元素和自动布局。所有应用都应遵循 UIKit 中定义的安全区和边距布局规范，这个规定保障了基于设备和内容的稳妥的摆放。安全区同时预防了内容和状态栏，导航栏，工具栏，标签栏的重叠问题。

留心状态栏的高度。状态栏在 iPhone X 上比在其他 iPhone 上更高。如果你的应用采用了一个固定高度的状态栏并将内容摆放其下，则必须更新为根据用户的设备来动态定位内容。请注意，当如录音和定位等后台任务处于激活状态时，iPhone X 上的状态栏不会改变高度。

如果你的应用隐藏状态栏，请重新考虑 iPhone X 上的情况。iPhone X 上的显示屏比高度为4.7“的 iPhone 提供了更多的垂直空间，状态栏占据了你应用可能没有完全利用的一块屏幕区域。状态栏显示了对人们有用的信息，它只应该在能带来更多价值的情况下被隐藏。

在复用现有视觉元素时，留心比例差异。iPhone X 具有不同于4.7“ iPhone 的长宽比，因此4.7” iPhone 上的全屏图像在 iPhone X 上显示时会被裁剪或等比缩放以适应屏幕。同样，iPhone X 上的全屏图像在在4.7“ iPhone 上显示时也会被裁剪或等比缩放以适应屏幕。请确保重要的视觉内容在两种屏幕尺寸上都能很好展示。

避免将交互式控件摆放在屏幕的底部和角落。用户在显示屏底部使用滑动手势来访问主屏幕和多任务切换，这些手势可能会干扰你在此区域中的自定义手势。屏幕上方的两个角落太远了，并不是用户的操作舒适区。

不要在关键显示区域搞花样。请勿尝试通过在屏幕顶部和底部放置黑色色块来隐藏设备的圆角，传感器或主屏指示条。不要使用像括号，边框，形状或指示文字等视觉装饰在这些区域吸引用户注意力。

谨慎允许自动隐藏主屏指示条。当启用自动隐藏时，如果用户几秒没有触摸屏幕，指示条将消失。当用户再次触摸屏幕时重新出现。这种行为应该只被用于例如播放视频或幻灯片的观看场景。

更多请参阅 Adaptivity and Layout。

颜色

iPhone X 的显示屏支持 P3 色彩空间，拥有比 sRGB 更丰富，更饱和的颜色。

使用更丰富的颜色来增强视觉体验。采用高色域的照片和视频会更加栩栩如生，使用高色域的信息样式和状态指示会更有效果。更多请参阅 Color。

手势

iPhone X 的显示屏使用屏幕边缘手势来访问主屏幕，多任务处理，通知中心和控制中心。

避免和系统级的屏幕边缘手势冲突。人们会在每个应用里使用这些屏幕边缘手势。在少数情况下，像游戏这样的沉浸式应用可能需要自定义优先于系统手势的屏幕边缘手势 - 滑动一次会调用应用的自定义手势，第二次则会调用系统手势。这种方式（称为边缘保护）应谨慎使用，因为它使得用户难以访问系统级的操作。更多请参阅 Gestures。

其他注意事项

准确引用身份验证方式。iPhone X 采用 Face ID 进行身份验证。如果你的应用集成 Apple Pay 或其他系统身份验证功能，请勿在 iPhone X 上引用Touch ID。同样，请确保你的应用程序在支持 Touch ID 的设备上没有引用 Face ID。更多请参阅 Authentication。

不要重复提供系统已有的键盘功能。在 iPhone X 上即使自定义键盘，Emoji，Globe 和 Dictation 按钮也常置于键盘的下方。你的应用无法影响这些按钮，因此请避免在自定义键盘中重复布置这些按钮，以至给用户带来困扰。更多请参阅 Custom Keyboards。

文章总结