iphone x 来了，他那修长的身材，黑色齐刘海，刺激着每一个设计师的神经，这么奇葩造型怎么适配？别怕，下面帮你搞定。
苹果十周年发布会，让大家又度过一个不眠之夜，面对史上最贵iphone，朋友，你的肾准备好了吗？
十周年，果然不负众望，苹果搞出了幺蛾子机型，大长脸齐刘海的iphone X，还有一个神奇的刷脸功能，从此，生活就变成了这样：
当然即使如此，也一定挡不住大家买买买的热情。
然而作为UI设计师，心情却是复杂而沉重的：
沃草！中间这个“刘海”造型！这个长脸尺寸！是又要做一版吗？
别怕，下面就来说说，这个奇葩造型如何应对，其实，安卓的尺寸都过来了，没有切不了的苹果啦~
为了单位一致，本文数值采用@1x来说明。
先来看看尺寸，不管物理像素如何，我们用逻辑像素来做设计。iphone X 的逻辑像素宽度并没有变化，与iPhone 6,7和8相同。只是长度增加了145pt。当设计@1x时 （iPhone 6,7：375X667pt），做iphone X的适配的话，画布建为375x812pt。
由于Retina屏，在切图时候，需要导出@3x的尺寸，即1125x2436pt。
另外，屏幕显示不再是矩形，而是切割成了大圆角矩形，为了避免显示遮挡，我们需要在四周留出更多边距。
大家吐槽刘海来了！稳住，我们能赢！
顶部状态栏，由于全屏和“刘海”的关系，变得更高了，由20pt变成了44pt。
状态栏变高，导航栏的空间也变大了，变成了88pt，除了视觉更舒适，也能考虑更多的内容。
除了顶部的变化，底部工具栏也有改变，看到右图的黑线了吗？这是新的home indicator。由于它在屏幕中，避免干扰操作，这个区域需要空出来，官方文档距离是34pt。
怎么避免“刘海”尴尬？
很简单，要保持好安全距离，刘海片儿一点也不可怕！我根据官方文档量了下，边距是10pt（@1x）
全屏的图片需要考虑这个问题，特别是人物。否则一律贴上黑色刘海片儿。
游戏等需要横屏的，关键信息左右都要留出空间，否则........
那么横屏的游戏到底要怎么显示呢？我认为应该是这样的：
虽然说顶部状态栏44pt，底部home indicator是34pt，但是我们无法控制用户是向左还是向右横屏，因此两边如果要放功能按钮的话，左右留出44pt+10pt的范围，底部留出home indicator的34pt。背景和无关紧要的图则充满屏幕。
来总结一下iphone X 对于适配的变化吧：
1.高度增加了145pt，变成812pt.
2.屏幕圆角显示，注意至少留10pt边距。
3.状态栏高度由20pt变成44pt，留意这个距离就能避开“刘海”的尴尬。
4.底部工具栏需要为home indicator留出34pt边距。
怎么样，是不是没那么可怕？你还发现哪些变化呢？欢迎讨论。
欢迎加入UI设计群587751709
网友评论