iPhone X 适配指南

从上周五，我的 iPhone X 总算到了，迫不及待的开机点亮，哇～ 还真是很惊艳。异形全面屏无疑是它的最大亮点，这样做的好处就是可以让别人一眼就能认出来这是 iPhone X，哦不是，可以使用 Face ID，满足你的装 X 梦。

代价嘛，就是要专门为 iPhone  X 做适配，而且 iOS 11 的人机交互指南单独为它新增了一节。当中的坑还真不少，下面就跟大家详细说说。

一、尺寸

iPhone  X 是真 3 倍图，屏幕分辨率是 1125×2436 px，对应的设计稿尺寸是 375×812 pt。看到 375 就有种看到亲人的感觉，这也就意味着宽度上几乎不用做修改。

与 iPhone 6、7、8 (375×667pt) 相比，Status Bar 高度由 20pt 变为 44pt。

底部必须给主页指示器（Home Indicator）预留 34pt，加上 Tab Bar 高度由 49pt 变成 83pt。

所以实际多出来的高度是 145-24-34 = 87pt。

另外，键盘高度由 216pt 变为 291pt，多出了 75pt，文字输入区一定要注意。

适配方法

顶部将 375×667pt 的设计稿的 Status Bar 换成 iPhone X 的 Status Bar。Navigation Bar 如果是按 44pt 做的不用修改，如果是 64pt 在 Symbols 里把高度向上延伸 24pt  并填充原有颜色。

底部预留 34pt 用与放置主页指示器（Home Indicator），有 Tab Bar、Toolbar 的页面如果是用  Symbols 做的将他们下延 34pt 并填充原有颜色。没有 Bar 的页面底部不用再填充颜色，只需盖上主页指示器即可。

二、布局

为了不让边角圆角和留海影响使用，苹果为此不惜引入两个新的概念：安全区域（Safe Area）与 布局边距（ Layout Margins）。安全区域用于承载内容， 布局边距限制内容边界。

适配方法

竖屏模式：安全区域延伸至屏幕左右两侧，上方留 44pt 给 Status Bar，下方留 34pt 给 主页指示器，布局边距数值根据产品自定义。

横屏模式：安全区域被四面围城，左右各留 44pt，上方留32pt，下方留21pt，布局边距数值根据产品自定义。

三、Don’ts and Do’s

3.1 不隐藏 iPhone X 特点，也不要强调它

3.2 确保控件在安全区域内，特别要注意与主页指示器保持距离

3.3 横屏模式保持控件位置对称，帮助用户建立肌肉记忆

3.4 原来靠边的控件需修改样式

为了帮助大家完成这个过渡，苹果官方出了一个设计指南视频，强烈推荐大家观看

是不是觉的缺了点什么，没错，你还缺少一套 iPhone X 的 UIkit 和 最新的 SF Pro 字体。需要的朋友不用客气啦

链接: https://pan.baidu.com/s/1slNXmAp 密码: i2w8