iPhone X拥有超大，高分辨率，圆角，无边框的屏幕，带给你前所未有的内容丰富的沉浸式体验。

屏幕尺寸

从纵向来看，iPhone X的显示屏宽度与iPhone 6，iPhone 7和iPhone 8的4.7英寸显示屏的宽度相一致。然而，iPhone X上的显示屏高度则比4.7屏高出145pt，因此多出约20％的垂直空间展示更丰富的内容。

竖屏尺寸：1125px×2436px（375pt×812pt @ 3x）

横屏尺寸： 2436px×1125px（812pt×375pt @ 3x）

在你的APP中为所有配图应用高分辨率图片。iPhone X使用了比例因子为@ 3x的高分辨率显示屏。对于字形和其他平面、矢量图形，它支持独立分辨率的PDF。对于光栅类的图稿，则提供了@ 3x和@ 2x的分辨率。详情请参阅《图像大小和分辨率》和《自定义图标》。

布局

在设计iPhone X时，你必须确保页面布局能填满整个屏幕，并且不会被设备的圆角，传感器外壳或用于访问主屏幕的指示灯遮蔽。

大多数使用标准系统提供的UI元素（如导航栏，表格和集合）的应用程序会自动适应设备的新外形。背景材料延伸到显示屏的边缘，并且适当地插入和放置UI元素。

4.7" iPhone

iPhone X

对于具有自定义布局的应用程序，支持iPhone X相对比较容易，特别是该应用使用自动布局并遵守了安全区域和边距布局原则。

在iPhone X上预览APP。你可以使用Simulator（附带Xcode）来预览App，并检查和剪辑其他布局问题。而另外一些功能，如多元色彩图像，则最好在实际设备上进行预览。

提供全屏体验。确保背景延伸到显示屏的边缘，并且垂直可滚动的布局（如表格和集合）则应保证能够一直延续到底部。

注意内容被剪裁。通常来说，内容应该是居中对称的，所以它从任何方向看起来都很棒，不会被角落或设备的传感器外壳剪裁，或被访问主屏幕的指示器遮挡。在这里，建议你使用系统提供的的元素和自动布局来构建页面获得更好的适配效果。同时，所有应用程序都应遵循UIKit定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。

注意状态栏的高度。 iPhone X上的状态栏比在其他iPhone更高。如果应用程序的固定状态栏高度将定位内容下方的状态栏，你必须基于用户的设备更新应用程序的动态位置的内容。需要注意的是，当背景任务（如录音和位置跟踪）处于应用状态时，iPhone X上的状态栏不会改变高度。

如果你的应用程序隐藏了状态栏，建议重新考虑。iPhone X与显示高度为4.7 英寸的iPhone相比，提供了更多的内容垂直空间，但状态栏占据应用程序的部分区域导致屏幕不能充分利用。状态栏也显示对用户有用的信息，但只能隐藏以交换附加价值。

在重复使用现有图稿时，请注意比例差异。 iPhone X的长宽比不同于4.7英寸的iPhone，因此，把一个能在4.7 英寸iPhone全屏显示的图形放到iPhone X上就会被裁剪或加框。同样，一个全屏iPhone X图稿在4.7 英寸的iPhone上显示时会被裁剪或呈柱状图形。面对这种情况，尽量确保重要的视觉内容能支持不同尺寸的设备。

避免将交互式控件放置在屏幕底部和角落。用户一般在显示屏底部使用滑动手势来访问主屏幕和进行应用程序切换，这些手势可能会取消他们在此区域中实现的自定义手势。可以让用户轻松触及屏幕中最遥远的区域。

不要掩盖或突出关键显示功能。不要试图通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或指示器来访问主屏幕。也不要使用像括号，边框，形状或指示性文本等视觉装饰来引起用户对这些区域的特别注意。

允许自动隐藏指示灯，以便轻松访问主屏幕。当启用自动隐藏时，如果几秒钟内用户没有触摸屏幕，指示灯将熄灭。当用户再次触摸屏幕时，指示灯将重新亮起。这种操作一般只适用于播放视频或照片幻灯片此类被动观看体验。

具体请参阅《适应性和布局》。

颜色

iPhone X上的显示器支持P3色彩空间，可以产生比sRGB更丰富，更饱和的颜色。

使用多元的色彩来增强视觉体验。使用多元颜色的照片和视频更加逼真，视觉数据和状态指示器则显得更有影响力。具体请参阅《色彩管理》。

 

手势

iPhone X上的显示屏使用屏幕边缘手势来访问主屏幕，应用程序切换器，通知中心和控制中心。

避免干扰系统范围的屏幕边缘手势。用户通常依靠这些系统的手势在每个应用程序中进行操作。只有在极少数情况下，像游戏这样的沉浸式应用程序可能需要自定义的屏幕边缘手势，优先于系统的手势 - 第一次滑动会调用特定于应用的手势，而第二次滑动则会调用系统手势。这种行为（称为边缘保护 ）应该谨慎实施，因为它使得用户难以访问系统级的操作。具体请参阅《手势》。

附加设计注意事项

参考准确认证方法。总所周知，iPhone X支持Facebook ID身份验证。如果你的应用程序集成了Apple Pay或其他系统的身份验证功能，请勿在iPhone X上引用Touch ID。同理，请确保你的应用程序在支持Touch ID的设备上未引用Face ID。具体请参阅《验证》。

不要重复系统已有的键盘功能。 在iPhone X上，即使使用自定义键盘，Emoji / Globe按钮和Dictation按钮也自动显示在键盘的下方。你的应用程序不能影响这些按钮，因此避免在键盘中重复这些按钮造成混乱。具体请参阅《自定义键盘》。

原文作者：Apple Official

原文链接：https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/