iPhoneX设计规范详解，层层带入，简单秒懂～
自己整理的iPhone x设计规范详解
前段时间学习iPhone x的设计规范，结果在各大设计平台找了些资料，发现不是晦涩难懂就是错误很多，下载了很多的源文件来研究发现也是不规范？？？后来请教了一些朋友，做了下总结，终于把这剪不断理还乱的关系整理清楚了。
做成图表形式，超级简单易懂～
有失误的地方请指出，我虚心接受哈哈～
-----------------------------------------------------------------------------------
首先，这是一个很详细的iPhone界面尺寸图，左边有很多单位，UI设计师只需要懂得两个单位就行了：pt（逻辑分辨率）和px（物理分辨率）。
相信有经验的设计师都会清楚这两个单位，不清楚的百度一下就好啦～
我个人是这样简单理解的：在@1x中：1pt=1px，在@2x中：1pt=2px，在@3x中：1pt=3px，
而使用sketch做设计，可以选择的iPhone 6/7/8尺寸也就是@2x尺寸是375*667，可是@2x尺寸应该是750*1334啊，为什么呢？因为单位不一样，sketch和Adobe Xd 中是pt单位的尺寸，如上图，画板中的内容也是pt为单位的，相当于是用一倍图做设计（因为国外设计师喜欢用1倍图啦）。
如果还是喜欢二倍图做设计，比如我，会直接选择创建一个750*1334的画板。
-----------------------------------------------------------------------------------
然后呢，iPhone 6/7/8是适配@2x，iPhone x是适配@3x，上图没有x的尺寸，这张图就很详细了。主要还是看px和pt。
整理清楚pt和px的关系后，就可以看下图了
我自己整理的表格，会发现6和x的pt单位尺寸宽度是一样的，所以就有将x的设计规范应用在@2x上面，这样对于设计师更友好方便，相当于把6的尺寸延长了，状态栏、导航栏的尺寸高度增加，因为x机型的刘海设计导致不得不这样做
标签栏的尺寸不变，但是x机型底部有个镂空的hone按钮，标签栏要避开这个位置，所以底部会增加一个安全区域，高度为102px，安全区域上面才是底部标签栏。
当然也可以按照@3x，也就是原本的iPhone x尺寸做设计，下图中也有对应的尺寸规范，这样的弊端就是用惯了1倍或者2倍的设计师，对于图形或者字体尺寸不好掌握，而且为了适配@1x和@2x机型，尺寸要使用6的倍数，挺麻烦的。
所以为了不那么麻烦，直接在@2x上面做iPhone x的设计是最好的。除了机型限制的状态栏、导航栏问题，其他都可以沿用原来的@2x的设计规范。
做惯了一倍图设计的设计师，也可以在sketch或Adobe Xd中使用pt单位的尺寸设计，也就是一倍图的尺寸，因为这两个设计软件是矢量图形，切图就不会失真。而ps是位图软件，所以为了适配最好是使用@2x尺寸。
这下是不是就很清楚了？
还有一些细节问题
由于机型原因，所以会有安全区域（如图），横屏显示的安全区域如图所示，尺寸延续竖屏的设计规范。
2.home按钮是镂空的，除了标签栏之外，其他的内容比如歌曲列表，在home栏下也是可以点击的。
3.文章中的部分图片来源于网络，所以会有水印，我懒得去p了......希望能帮助到有需要的人～
谢谢观看~
