别怕！教你适配 iPhone X的奇葩刘海和长脸

iPhone  x 来了，他那修长的身材，黑色齐刘海，刺激着每一个设计师的神经，这么奇葩造型怎么适配？别怕，下面帮你搞定。

苹果十周年发布会，让大家又度过一个不眠之夜，面对史上最贵iPhone，朋友，你的肾准备好了吗？

十周年，果然不负众望，苹果搞出了幺蛾子机型，大长脸齐刘海的 iPhone X，还有一个神奇的刷脸功能，从此，生活就变成了这样：

当然即使如此，也一定挡不住大家买买买的热情。

然而作为UI设计师，心情却是复杂而沉重的：

沃草！中间这个“刘海”造型！这个长脸尺寸！是又要做一版吗？

别怕，下面就来说说，这个奇葩造型如何应对，其实，安卓的尺寸都过来了，没有切不了的苹果啦~

为了单位一致，本文数值采用@1x来说明。

先来看看尺寸，不管物理像素如何，我们用逻辑像素来做设计。iPhone X 的逻辑像素宽度并没有变化，与iPhone 6,7和8相同。只是长度增加了145pt。当设计@1x时 （iPhone 6,7：375X667pt），做iPhone  X的适配的话，画布建为375x812pt。

由于Retina屏，比例是13:6。在切图时候，需要导出@3x的尺寸，即1125x2436pt。

另外，屏幕显示不再是矩形，而是切割成了大圆角矩形，为了避免显示遮挡，我们需要在四周留出更多边距。

大家吐槽刘海来了！稳住，我们能赢！

顶部状态栏，由于全屏和“刘海”的关系，变得更高了，由20pt变成了44pt。

状态栏变高，导航栏的空间也变大了，变成了88pt，除了视觉更舒适，也能考虑更多的内容。

除了顶部的变化，底部工具栏也有改变，看到右图的黑线了吗？这是新的home indicator。由于它在屏幕中，避免干扰操作，这个区域需要空出来，官方文档距离是34pt。

怎么避免“刘海”尴尬？

很简单，要保持好安全距离，刘海片儿一点也不可怕！我根据官方文档量了下，红色部分边距是10pt（@1x）

全屏的图片需要考虑这个问题，特别是人物。否则一律贴上黑色刘海片儿。

游戏等需要横屏的，关键信息左右都要留出空间，否则........

那么横屏的游戏到底要怎么显示呢？我认为应该是这样的：

虽然说顶部状态栏44pt，底部home indicator是34pt，但是我们无法控制用户是向左还是向右横屏，因此两边如果要放功能按钮的话，左右留出44pt+10pt的范围，底部留出home indicator的34pt。背景和无关紧要的图则充满屏幕。

iPhone X 的屏幕分辨率是1125x2436px（458 PPI）。如此高的分辨率使得图片需要更大，并且最好全部都是矢量的，这里推荐PDF格式。图片更清楚，体积更小。

别怕！教你适配 iPhone X的奇葩刘海和长脸

来总结一下 iPhone X 对于适配的变化吧：

1.高度增加了145pt，变成812pt.

2.屏幕圆角显示，注意至少留10pt边距。

3.状态栏高度由20pt变成44pt，留意这个距离就能避开“刘海”的尴尬。

4.底部工具栏需要为home indicator留出34pt边距。

怎么样，是不是没那么可怕？你还发现哪些变化呢？欢迎讨论。

---

如果你喜欢我的分享记得给我留言或者点赞哦，

也可以把你的问题写在下面的评论区。

更多相关的文章记得去我的主页查阅哦。