iPhone X 适配指南

文章整理了一些关于iPhone X 适配法则，希望对你有所帮。

iPhone X 11月才发货，但现在也许你就已经接到适配任务了。

官方已经出了「Designing for iPhone X」视频，结合官方文档「人机交互指南」，你需要的适配指南墨刀为你整理出来啦！

文章较长，建议先马后看。

注：文中图片大部分来自官方视频截图和文档配图，请放心食用。

好了，我们开始梳理重点吧！

更高更清晰的屏幕

1、比例变化 iPhone X 的显示宽度与 4.7 寸的 iPhone 6、7、8 相一致。不过 iPhone X 的显示屏比 4.7 寸显示屏高 145pt，为内容增加了大约 20% 的垂直显示空间。

对于更加狭长的屏幕，按钮和内容是否需要重新排布都需要再做考量。

另外，在我们做全屏图的时候，需要注意长宽比的差异，尤其需要注意屏幕比例变化造成的切割位置的变化。

看了看切割示意，感觉还是老老实实做单独适配 iPhone X 的图片比较稳妥……

2、Super Retina iPhone X 达到了 2436 x 1125 像素分辨率，458 ppi，官方称之为 Super Retina 屏。

更高屏幕画质意味着位图素材的尺寸也要相应变大。

对于 Super Retina 屏，官方建议尽可能多使用 PDF 矢量图形，这将会获得更好的展示，同时还可以减小 App 所占容量。

全面屏的妥协产物：「留海」与安全区 让强迫症为止颤抖的「留海」可以说是苹果为了全面屏的一个妥协。同时，为了让屏幕能尽可能大，屏幕四个角全变成了圆角。

异形屏幕无疑让产品设计师感到抓狂，官方对此提出的解决方案是：「安全区布局」（Safe Area Layout Guide）。

1、安全区布局 「安全区」顾名思义，就是一块你可以把重要元素放在里面，而不用担心由于屏幕异形导致交互问题的区域。