这款美丽的机器将给设计师带来一些新的挑战，也将带来一些新的机会。

　　iPhone X(也读作：iPhone 10)正式发布了，并定于11月3日开卖。它内置震撼的超级Retina屏幕，其分辨率为1125×2436像素。 在其屏幕顶部还有一个切口(俗称“刘海”)，你可以通过它来体验未来感十足的脸部解锁功能。

　　这款美丽的机器将给设计师带来一些新的挑战，也将带来一些新的机会。在竖屏模式下，设备的宽度与 iPhone 6、7 和 8 相同，但比它们的屏幕足足高了145pt，这样就增加了20%的垂直显示空间。

　　当在一倍的倍率下设计时，你需要创建一个 375×812px的画板。由于新Retina 屏幕的缘故，你不必像iphone8一样输出@2x的图片，它需要的切图资源是 @3x 的，如同之前的 iPhone 6、7、8 plus 一样。

　　开始创建设计时，你必须确保你的界面不会因设备的独特性(圆角，顶部的切口以及Home键)而被遮挡住。顺便说一句，Home 键化为了屏幕底部的小横线，它取代了物理 Home 键按钮。你可以从任何应用程序向上滑动回到主屏幕或做多任务处理。

　　看那条白色的线，它就是新的home键

　　如果你目前的应用程序是用iOS原生组件(导航栏、表格、集合视图和标签栏)，那么你的应用程序将会适应这款新的iPhone。它们将在新的iPhone自动布局和定位。

　　左边是 iPhone 8 的 UI 布局，右边是 UI 组件适应到 iPhone X 上的效果

　　如果你使用自定义布局，你的应用程序可能需要更新以适应新的屏幕布局。如果你使用自动布局，那就容易多了。

　　让我们再进一步

　　首先，“拥抱这款酷炫的全屏机吧!”

　　确保你创建了全屏体验。让滚动视图滚动到屏幕最底部甚至超出显示器弯曲底部的边缘。苹果还要求你在设计时避开顶部切口和底部圆角，所以不要放置黑色的状态栏，这样会让它看起来像是教科书式的iPhone8。

　　居中嵌入重要信息。确保重要内容在中心对齐，并使用对称的布局, 这样你的UI界面就不会被设备的传感器(切口)或圆角所截断。如果你是用自动布局，你的内容将自动适配到安全区域，所以你的设计不会被遮挡在传感器(切口)或者Home键之后。

　　新的状态栏。由于显示器顶部的传感器(切口)，新的状态栏被分成两部分。如果你的UI 在这个空间做了一些设计(以前的 20pt 高，现在是 44pt)，你需要对UI界面做些改变确保它可以在高度上动态改变，因为在iPhoneX上状态栏加高了。最重要的是, 如果用户拨打电话或使用导航程序时，这个高度不会改变, 这一点在其他的iphone 上也是一样。

　　分成两部分并且增高了的状态栏

　　显示新的状态栏。如果你目前在设计中隐藏了状态栏，苹果会要求你重新考虑这个决定。由于屏幕较高，你有更多的空间显示你的内容，充分利用状态栏。用户可以在那里(状态栏)找到有用的信息，大部分时间这个位置都不会被其他UI元素占用。

　　全屏图像。如果你目前在设计中使用了全屏图像, 你需要在新的 iPhone上更新。图片可能被裁切, 视觉的重要部分也可能被隐藏。

　　不要在屏幕底部放置交互控件。Home键周围的间距仅仅是为手势触碰创建的，向上滑动回到主屏幕。将按钮放在Home键或视屏底部圆角附近，都不是好选择。用户很可能意外的触碰到Home键，很难进入想去的用户界面。你仍然可以使用标签栏和功能栏，但请记住，它们的操作应不干扰Home键。

　　不要隐藏Home键。当用户几秒钟不触碰屏幕时，IOS可以在你的应用程序中将Home键自动隐藏。当用户再次触摸屏幕时, 它将重新出现, 这主要应用于如观看视频或照片这种身临其境的场景。Home键还会根据应用程序的背景自动更改颜色。

　　色彩更丰富。新的超级Retina显示屏，可以显示更多的颜色，P3色彩模式代替了sRGB。这意味着它会显示更丰富和更饱和的颜色。特别是视频和照片，看起来会更棒。