iOS11人机交互指南-01 iPhone X概览

iPhoneX具有更大、更高大分辨率、圆形的、边缘到边缘的显示器，它提供了前所未有的沉浸式、内容丰富的体验。

屏幕尺寸

在人群定位（人物画像苹果官网用的是Portrait）方面，iPhoneX显示屏的宽度与iPhone6、iPhone7和iPhone84.7显示器的宽度相匹配。但是iPhoneX显示屏的高度是145pt，比4.7"显示屏高，大约能够显示垂直空间内额外20%的内容

应用程序的所有艺术品都能呈现高分辨率的图像。iPhoneX的显示器是@3x高分辨率，符号等的平面、矢量图形，最好采用独立分辨率的PDF格式。对于位图，需要同时提供@2x和@3x的切图文件。

布局

当为iPhoneX设计时，必须确保布局填满屏幕，而不被设备的圆角、传感器外壳或访问主屏幕的指示器所掩盖。

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

对于自定义布局的应用程序，支持iPhoneX也应该相对容易，尤其是如果应用程序使用自动布局并遵循安全区域和边缘布局指南的话。

在iPhone上预览您的应用程序。你可以使用模拟器（包括Xcode）预览您的应用程序和检查是否存在剪切和其他布局问题。一些功能，如颜色比较多的图像，最好能在实机上预览。

提供全屏体验。确保背景延伸到显示器的边缘，而垂直滚动的布局，如标签和其他工具栏一直位于底部。

插入防止裁剪的基本内容。一般来说，内容应该居中和对称地插入，确保它在任何方向看起来都很好，而且不会被角落或设备的传感器外壳剪切，或者被用来访问主屏幕的指示器遮蔽。为了达到最佳效果，使用标准的、系统提供的控件元素和自动布局来设计界面。所有的应用程序布局应遵循由UIKit间隔出来的安全区域，保证适当的嵌入基于设备上下文。安全区也可以防止内容改变状态栏，导航栏，工具栏和标签栏的位置。

注意状态栏的高度。iPhone上的状态栏比其他iPhone高。如果你的应用程序假定一个固定状态栏高度来定位内容低于状态栏，你必须更新你的应用程序布局动态地基于用户的设备定位内容。注意，当像录音和位置跟踪这样的后台任务处于活动状态时，iPhoneX上的状态栏不会改变高度。

如果你的应用程序目前隐藏状态栏，在PhoneX请重新考虑这个决定。iPhoneX上的显示高度比4.7个“iPhone”显示更多的垂直空间，而状态栏占据了应用程序可能无法充分利用的屏幕区域。状态栏告知用户最有用的信息。只有为了某些特殊目的才隐藏状态栏。

注意重用现有界面的长宽比差异。iPhone4.7“X和iPhone的纵横比不同。所以，全屏幕4.7“iPhone界面出现裁剪或文本框全屏幕显示。全屏幕的iPhoneX界面出现在4.7“iPhone会被剪切。确保在两个显示大小上都保留重要的视觉内容。

避免在屏幕的最底部和角落放置交互控件。人们在显示器的下边缘使用滑动手势来访问主屏幕和应用程序切换器，这些手势可能会取消在这个区域中实现的自定义手势。屏幕的角落可能是难以到达的舒适区域。

不要掩盖或启用重要功能时需要特别注意。不要试图通过在屏幕顶部和底部放置黑条来隐藏设备的圆角、传感器外壳或访问主屏幕的指示器。不要用视觉装饰如支架、挡板，形状，或说明文字唤起人们特别注意这些方面。

允许自动隐藏指示器以方便地访问主屏幕。当启用自动隐藏时，如果用户没有触摸屏幕几秒钟，指示器就会淡出。它出现在用户触摸屏幕时再次。这种行为应该启用只有被动的观看体验，比如观看视频或照片幻灯片。

颜色

在iPhoneX支持P3彩色空间的显示，它可以产生比sRGB更丰富、更饱和的色彩。

使用多种颜色来增强视觉体验。照片和视频，使用广泛的色彩更逼真，使用多种颜色的视觉数据和状态的指示器更有效。

手势

iPhoneX使用屏幕边缘的手势来访问主屏幕、应用程序切换器、通知中心和控制中心。

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

其他设计思考

关于验证方法准确。iPhoneX支持人脸身份认证。如果你的应用与苹果支付或其他系统认证功能相集成，不要在iPhoneX上引用TouchID，同样要确保你的应用程序不在支持TouchID的设备上引用人脸ID。

不要重复系统提供键盘功能。在iPhoneX上，即使使用自定义键盘，表情/世界按钮和听写按钮自动出现在键盘上。你的应用程序不能影响这些按钮，所以不要在键盘上重复它们，以免造成混乱。

资源

下载iPhoneX的UI设计模板资源（地址：https://developer.apple.com/design/resources/#ios-apps）

• 来自：简书

• 作者：Doria2016
  

• 链接：http://www.jianshu.com/p/7b15f92fc73e

• iOS开发整理发布，转载请联系作者授权