超详细的iPhone X设计规范！

iPhone X是Apple今年秋季推出的最新手机之一！带来了全面屏新设计、能以你的脸作为密码的面容 ID 功能,以及iPhone迄今最强大、最智能的芯片！国行iPhone X将于10月27号开始接受预约购买，售价人民币8388起！

尺寸

在纵向方向上，iPhone X上的显示屏的宽度与iPhone 6，iPhone 7和iPhone 8的4.7英寸显示屏的宽度相匹配。然而，iPhone X上的显示屏比4.7英寸显示屏高145pt，大约20％的内容垂直空间。

屏幕分辨率 1125 x 2436px（375pt×812pt @3x）

所以从页面视觉来看，我们依然采用老办法，从2x的iPhone7做为基准去做一稿设计，唯一变化的是可能我们需要采用更高的导航栏，更高的底部标签栏。所以，iPhone X将延用@3x，不会采用@4x！

布局

在设计iPhone X的界面时，您必须确保布局填满屏幕，并且不会被设备的圆角，传感器外壳或被主屏幕的指示灯遮蔽。

大部分使用系统提供的标准UI元素（如导航栏）的APP会自动适应iPhone X！

左图：4.7英寸iPhone  右图：iPhone X

如果是自定义布局的APP，适配iPhone X也应该比较容易，特别是您的APP布局遵守了安全区域和边距布局指南。在上架APP之前，您最好使用Simulator（Xcode内置）来预览APP，检查是否存在布局问题。但如果是测试功功或色彩校对，最好在实际设备上预览。

如果提供全屏体验时，设计师需要付出更多的时间来测试页面，看看在横竖屏切换的时候，有没有元素遮蔽的现象。！

注意状态栏的高度。iPhone X的状态栏比在其他iPhone上更高。如果您的APP内容定位在状态栏的下方，则必须更新您的APP。请注意，当背景任务（如录音和位置跟踪）处于活动状态时，iPhone X上的状态栏不会改变高度。

如果您的APP目前隐藏状态栏的话，请重新考虑iPhone X布局。因为iPhone X提供了更多的内容垂直空间，可以让用户获得更多有用的信息，比隐藏隐藏价值大。

在使用图片时，请注意长宽比差异。iPhone X具有不同于其它iPhone的长宽比，因此，全屏其它iPhone图片在iPhone X上全屏显示时会出现裁剪。同样，全屏iPhone X图片在其它iPhone也会出现裁剪，所以请注意两种设备适配。

还有要注意不要将交互控件放置在屏幕底部和角落。因为这些区域是用户不好操作的位置，或者操作起来不舒服！

图标设计

底部导航栏图标，过去的做法是当前激活模块的图标为剪影风格，其他图标为线性风格。设计师需要做两套图标。分别是一套剪影，一套线性。而现在统一为剪影，而当前激活模块的图标使用平铺色代表激活。

配色

iPhone X上的显示器支持P3色彩空间，可以产生比sRGB更丰富，更饱和的颜色。使照片和视频的颜色更加逼真，增强视觉体验！