iPhone X官方人机交互指南 - 尺寸分辨率布局等

苹果十周年纪念款手机iPhone X已经发布，齐刘海成立当今的热门话题，但是作为开发者必须对最新的iPhone X有一个更全面的了解。

苹果官方地址

iPhone X

iPhone X包括一个大型，高分辨率，圆形的边缘到边缘的显示器，提供了一个沉浸式，内容丰富的体验，从未像以前那样。

屏幕尺寸

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

为您的应用程序中的所有图稿提供高分辨率图像。
iPhone X具有比例因子为@ 3x的高分辨率显示。
对于字形和其他平面的矢量图形，最好提供独立于分辨率的PDF。
对于光栅化图稿，您可以提供@ 3x和@ 2x版本的作品。
请参阅图像大小和分辨率和自定义图标。

关于屏幕尺寸的个人补充

iPhone X的尺寸是1125x2436像素，可以看出来1125是750的1.5倍，375的3倍，那么就可以适配@3X。

iPhone机型对比

从上图可知，iPhone X与Plus系列公用一套图，设计稿尺寸选750x1334px，对应输出@2X和@3X图即可。

布局

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

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

对于具有自定义布局的应用，支持iPhone X也应该比较容易，特别是如果您的应用使用自动布局并遵守安全区域和边距布局指南。

在iPhone X上预览您的应用程序。您可以使用Simulator（Xcode附带）来预览应用程序，并检查剪辑和其他布局问题。一些功能，如宽彩色图像，最好在实际设备上预览。

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

插入必要内容以防止剪辑。一般来说，内容应该是居中对称的，所以它在任何方向看起来都很棒，不会被角落或设备的传感器外壳夹住，或被访问主屏幕的指示器遮挡。为获得最佳效果，请使用标准的系统提供的界面元素和自动布局构建您的界面。所有应用程序都应遵循UIKit定义的安全区域和布局边距，这些区域可以根据设备和上下文进行适当的填充。安全区域还可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。

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

如果您的应用程序目前隐藏状态栏，请重新考虑iPhone X上的决定。iPhone上的显示高度为4.7“iPhone的显示屏提供了更多的内容垂直空间，状态栏占据您应用程序可能赢得的屏幕区域状态栏还显示人们发现有用的信息，只能隐藏以交换附加值。

在重复使用现有图稿时，请注意长宽比差异。iPhone X具有不同于4.7“iPhone的长宽比，因此，全屏4.7”iPhone图形在iPhone X上全屏显示时出现裁剪或letterboxed。同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7“iPhone上，确保重要的视觉内容保持在两种显示尺寸上。

避免将交互式控件明确放置在屏幕底部和角落。人们使用显示屏底部的滑动手势访问主屏幕和应用程序切换器，这些手势可能会取消您在此区域中实现的自定义手势。屏幕的两个角落可能是困难的地方让人们舒适地到达。

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

允许自动隐藏指示灯，以便轻松访问主屏幕。当启用自动隐藏时，如果用户没有触摸屏幕几秒钟，指示灯将熄灭。当用户再次触摸屏幕时，它会重新出现。这种行为应该只能用于被动观看体验，如播放视频或照片幻灯片。

请参阅适应性和布局。

颜色

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

使用广泛的颜色来增强视觉体验。
使用宽颜色的照片和视频更加逼真，使用宽色的视觉数据和状态指示器更有影响力。请参阅颜色管理。

手势

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

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

附加设计注意事项

参考认证方法准确。iPhone X支持Face ID进行身份验证。
如果您的应用程序与Apple Pay或其他系统身份验证功能集成，请勿在iPhone X上引用Touch ID。同样，请确保您的应用程序在支持Touch ID的设备上未引用Face ID。请参阅验证。

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

资源

下载Photoshop和Sketch 资源中的 iPhone X UI设计模板。