翻译自苹果开发者指南
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 设计模板。