【设计技巧】iPhone X 设计图该怎么弄

iPhone X发布有段时间了，最近也是工作中遇到要适配iPhone X，所以仔细研究了一番。网上的适配设计文章很多，本文就是是自己看完这些文章后做的理解总结，希望对大家在做设计图时有所帮助。

注明：以下图片内容均来自网络

中文字幕苹果官方的iPhone X 设计指南

1、iPhone X 屏幕和之前的几代有何不同？

如图所示，iPhone X 的屏幕是这个样子，四周多了圆角，屏幕顶部有“刘海”，底部取消和home按键。

2、iPhone X 的安全区域与布局边距怎么定义。

为了不影响内容的显示，必须保证所有内容不能被圆角、上方“刘海”和底部指示器遮挡，所以要在安全区域内进行设计。

3、设计稿尺寸有变化吗？

iPhone X 是1125px*2436px，换算为逻辑尺寸是375pt*812pt；iPhone8是750px*1334px，换算为逻辑尺寸是375pt*667pt，可以发现屏幕尺寸上宽度没有变化，只是垂直高度多了812pt-667pt=145pt，也就意味着屏幕增加了20%的显示空间。

竖屏尺寸：1125px*2436px  (375pt × 812pt)

横屏尺寸：2436px*1125px  (812pt × 375pt)

4、和其他iPhone相比有什么不同，设计稿怎么设定？

iPhone X 和iPhone 8 相比顶部的状态栏（Status Bar）由之前的20pt变为现在的44pt，多出44pt-20pt=22pt，底部由于多了指示器（Home Indicator），所以从之前只有标签栏（Tab bar）49pt变为83pt，指示器的预留高度为83pt-49pt=34pt。由于状态栏和指示器，实际多出的可自由利用的有效高度是145pt-34pt-22pt=87pt。键盘高度由原来的216pt变为现在的219pt。设计文字输入时，要注意这一点。下图是具体的设计稿尺寸规范，大家可以根据这个尺寸来设定自己的iPhone X 设计图。

此图来自站酷大神王羽枫，我只对文字内容做下修改调整

http://www.zcool.com.cn/work/ZMjQwMTQ5NzY=.html

此图来自站酷大神王羽枫，我只对文字内容做下修改调整

http://www.zcool.com.cn/work/ZMjQwMTQ5NzY=.html

5、是不是要多切一套图啊？

全新的iphone x会不会多切一个尺寸的图呢？答案是不用的，来让我们一起分析一波，一探究竟。

我们从iPhone的尺寸看起，前面说过iPhone X 尺寸是1125px*2436px；iPhone 8 尺寸是750px*1334px，那么算数好的可以看出，1125是750的1.5倍，1125是375的3倍，所以iPhone X 可以适配@3x的切图，和8p、7p、6p适配图一样，并没有多一套所谓@4x的切图，所以在切图这里设计师门不用慌张了，按照你的设计图输出@2x和@3x的切图即可。

6、顶部的状态栏和底部的指示器预留部分，颜色怎么选择啊？

这两处不可以自己定义颜色，系统会自动判断背景的颜色，深色背景时显示深色，浅色背景时显示浅色。

最后附上iOS11 UIKit 模板 PSD+Sketch+XD 源文件

链接: https://pan.baidu.com/s/1bL4C7W 密码: u3fq