iPhone X，一款屏幕更高且几乎没有边框的新一代iPhone。iOS11伴随着iPhone X的诞生而产生新的适配规则。5.8英寸的OLED屏幕比iPhone 8 Plus的5.5英寸屏幕还要大，但机身尺寸与iPhone 8相同。对于设计师而言，这意味着更自由的设计空间。

更高的屏幕

正如下图所示，高出来的145 pt可能意味着增加了一行内容，或者增加了一个我们曾经认为太过狭窄的菜单。尽管分辨率不一样，但是这部分多出来的空间同样适用于iPhone 8 and 8 Plus，因为它们拥有相同的比例。

更多的内容空间

如果与最初的iphone相比，iPhone X增加了332 pt的高度，这相当于7个导航条的高度。未来在新款iPhone上呈现的内容将会看起来更棒，同时汉堡包菜单也被弱化。

当把不同时代的两款iPhone放在一起时，我们可以注意到内容的空间几乎翻了一番。普遍来说，这意味着目前的应用程序需要包含这些栏目：状态栏、导航栏、选项卡和用于访问主屏幕的指示器（home indicator）。省去这些栏目不仅会使用户体验变差，而且还会让你的应用程序与iOS的原生程序不一致。

“齐刘海”

也许新设计中最有争议的前10%是“齐刘海”。原深感摄像头系统，也被成为凹槽（国内形象的称为“齐刘海”），它作为一个分割元素使得iPhone X的屏幕真正实现了“从屏幕边缘到手机边缘”。从技术上来看，由于集成了Face ID、摄像头和听筒，去掉凹槽是不可能的，从设计上来看，这是苹果近年来最大的妥协之一。但是，看看其他手机制造商是如何解决这个问题的时候，不管是“高额头”还是“低下巴”，抑或是两者的结合，很难说他们没有妥协。

苹果建议不要使用黑色状态栏来隐藏这个凹槽。他们的理由是，尽管这个地方很令人头疼，但是其仍然为状态栏和额外的内容提供了宝贵的空间。它使得上下文内容产生连贯性，同时给人一种屏幕更大的感觉。诸如壁纸、地图和色彩等背景元素在被圆角和凹槽稍微修剪时不会受到太大影响。通过隐藏该空间，你的app将会感觉更小，同时与其它应用程序不一致。

大标题

在iOS 11中，屏幕的标题大小一般为34pt（点），并且是粗黑字体。有趣的是，当你向上滑动屏幕时，标题会自动转换到导航栏的位置上，把宝贵的空间还给我们。在横屏的状态下只留给导航栏很小的一部分区域，这就给设计师们提出了一个非常明确的信息，首先，你应该更合理的利用这些额外的空间；其次，你需要使你的设计具有自动适配性，因为很可能在竖屏的时候拥有的额外空间，横屏的模式下这些空间就不存在了。

更大的状态栏

状态栏的高度相较之前增加了一倍多，从20pt增加到44pt。现在通知栏可以通过左状态栏下滑来唤醒，而控制中心则是由右导航栏的下滑操作来唤醒的。当快速完成操作后，用户只需要轻扫一下屏幕的底部边缘就能轻松返回到主屏幕。但是，如果想要看到导航栏，就必须中断轻扫这个动作。

安全区域布局指南

当我们在为iPhone X进行设计时，我们应当时刻注意并且尽量去避免设计的内容被圆角和凹槽裁剪掉的情况。怎样才能更好的避免这样的情况呢？安全区域的使用可以很好的帮助你，确保内容不被裁剪掉。一般来说，背景的使用上可以不受安全区域的限制，而文本，图像和按钮这些都需要在安全区域内进行设计。

横屏状态下的iPhone X

在横屏的模式中，状态栏是隐藏的，目的是为了将内容的空间最大化。iOS 11 的导航栏减小到了32pt，标签栏是30pt，虚拟home键的尺寸为23pt。虽然大多数情况下用户不会在iPhone X上切换到横向模式，但还会有一些比较重要的使用场景会用到横屏的模式。例如，我们在翻看横向的照片，全屏视频或者阅读文字较大的文章时，都会采用横屏的模式。当用户完成使用后，会直觉性的切换回竖屏模式，那么，我们就必须要保证切换后的内容也可以正常展示给用户，特别是当设备在横屏时停留在一个比较舒适的位置的时候。

如果你的app已经可以适配到iPad上了，那为什么不能也很好的在iPhone 上进行横屏适配呢？大多数的app都已经开始采用响应式布局的设计理念，从而以最小的成本来获得最大的收益。

iPhon X横屏状态下的网页

如果你是一名产品设计师，你可能会在网页上进行工作。在横屏的iPhone X上，你的网页在左右两侧会存在一个较大的空白区域。这是因为安全区自动切割超出安全区域的内容部分所带来的糟糕结果。为了避免这种尴尬，苹果***了一套规范以此指导你的网页在横屏时适配iPhone X。这样基本可以使网页在横屏状态横向拓展背景以填充屏幕的同时，确保安全区域内网页内容的完整显示。

圆角

内容的剪辑也会发生在iPhoneX屏幕的四角。除非你隐藏了状态栏及底部的触碰区，否则不会面对这样的问题，因为他们覆盖了屏幕的四角。但是，对于大多数全屏使用的应用程序，比如相机确保四角中有足够的空白是非常重要的。建议你的按钮半径设置为16pt，以完美的遵循圆角的规则。

在iOS模拟器上预览你的应用程序

发布之后iPhone X可能会迅速售空，因此，我们大多数人无法立即使用。 手头没有设备，唯一的方法就是通过iOS模拟器。您可以通过安装Xcode来预览您的应用程序和网站。

汉堡菜单之死

十年来，设计师们争先恐后地在原先的iPhone小屏幕上适配着内容，有很多设计师因为标签栏占用了太多的屏幕空间而彻底省去它。还有一些人的做法相对有创意一些，他们会放一个能从左面滑出的按钮来替代。这也就是最初的汉堡菜单。虽然起初很新鲜有趣，但最终却发现它是可用性的一个噩梦。因为在使用时，用户需要更多的点击操作。这也就意味着二级标签会更少使用。而且人们常常会忘记还隐藏了更多的内容。

随着屏幕的变大，单手操作也开始受到了影响。苹果公司甚至设计了双击home键就可以下滑整个用户界面的手势操作，这样以便手指可以够到导航栏。而汉堡菜单通常又是放在屏幕的左上角，用户就需要一个额外的双击才能到达这个菜单了。这也就导致了用户更难对这个菜单进行操作。随着屏幕的加长，设计师也不再需要那么纠结内容占了多少屏幕空间了。所以现在设计时都会选择用标签栏来取代汉堡菜单。iPhone X更是如此，也就是说，如果你的应用程序有超过两部分的内容，那我们就强烈建议你使用标签栏，而且iOS11的标签栏占用的屏幕空间也更小。

汉堡菜单在网页设计上是很常见的，也可以说是移动网页在手机上的设计体验比不上基于手机的设计体验更好的原因之一。虽然目前一些适配手机的网页采用了原生的控件，这对于网页设计来说是一个很棒的方法，但是，在iOS系统中尤其是iPhone X的设计中，你依然应该使用标签栏来代替汉堡菜单。

自适应布局和多任务处理

随着越来越多的屏幕分辨率需要适配，让你的页面布局具有适配性越加重要。使用像Sketch的Constraints和Xcode的Auto Layout这样的工具，你需要在设计的时候要考虑到屏幕尺寸是灵活的，在需要的时候可以展开多余的菜单。

STACK VIEWS

在Xcode里，你还会发现Stack Views, 这是一个神奇的工具用来帮助你的布局实现更灵活的变化。一些元素和组可以动态的堆积在一起，你需要做的仅仅是编辑是元素间的间距以及框内的内容填充。然后你可以使用Auto Layout来完成剩下的工作。苹果的建议是先使用Stack Views再使用Auto Layout。

点（pt）和像素（px）

开发人员使用点值，因此了解点值与像素的区别非常重要。当iPhone第一次推出时，这两个单位是一样的：1pt等于1px。然后，当视网膜的屏幕出现时，1pt变成了2px。所以，把pt看做首代iPhone中一个物理区域的标准大小，px就是存在于这个物理区域内的实际像素的密度（iPhone 4，5，6，7，8 = @ 2x，iPhone 8 Plus，iPhone X = @ 3x）。

iPhone的解决方案

iPhone主要有5个分辨率：320×480 pt（iPhone 4），320×568 pt（iPhone 5），375×667 pt（iPhone 8），414×736 pt（iPhone 8 Plus）和375×812 pt（iPhone X）。布局不缩放，但可基于屏幕的分辨率进行扩展。例如，导航栏只调整宽度，但保持相同的高度，里面的元素大小也保持不变。

iPhone 8 Plus是唯一在横向模式下更像iPad的iPhone。换句话说，此时可能会出现一个左侧导航来替代标签栏。