总结！设计师如何设计iPhoneX稿

iPhone X发布，彻底全新的设计，也彻底定义了新的体验，与以往的iPhone都有不同，玻璃外壳、搭载着苹果A11处理器，电池续航能力比iPhone 7长了两个小时，并且在iPhone X的设计上首次使用了全面屏、面部识别、无线充电等技术，搭载1200万像素双摄镜头。

然鹅，这些我觉得没有那顶部的刘海惹人注目，那么UI界面设计和交互细节也会有很多改变，不敢评价，总结一下官方文档的内容好了，就当作笔记了……

设计适配：

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

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

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