iPhone X

总结一下iPhone X的设计注意事项：

1. 使用超级视网膜屏：需要使用高分辨率图像@3X图标、色彩支持P3、

2. 手机尺寸不同：控件需要放在安全区内避免被遮挡、状态栏高度、图片宽高比、视频使用原始宽高比

3. 相机使用ARKit：支持Face ID

一、简单介绍一下iPhone X的特别之处：

1. 整张手机屏幕都是超级视网膜屏

5.8英寸的超级视网膜屏，采用新技术来精确设计屏幕的曲线弧度，呈现优雅的圆角。而且超级视网膜屏支持1000000比1的高动态范围和最佳的色彩准确度，视觉效果达到惊人效果。

解读：视网膜屏，根据人眼的视网膜可观看的最小像素尺寸来设置的屏幕，降低视觉上看屏幕会出现的像素点效果。

2.Face ID

使用人脸识别技术来惊醒解锁、身份验证、付费等。使用相机进行设置，相机通过投影和分析30000不可见点，创建一个由设备加密和保护的脸部贴图。

解读：传说中的刷脸解锁、刷脸支付。

3.TrueDepth相机使用ARKit

相机添加了ARKit后，可以准确的检测人脸进行识别，也可在应用中呈现AR效果。

解读：就像某宝的捉猫游戏。

4.Core ML 和 Metal 2使用A11仿生芯片

使用A11仿生芯片可提高应用的性能。新的API功能，包括图像块、图快着色、线程组共享等大大优化了。

解读：一些渲染的、酷炫的特效显示会更流畅。

二、关于设计

iPhone X，拥有更大的、更高分辨率的、圆形的、边对边超级视网膜屏，提供前所未有的沉浸式、丰富的体验。

屏幕尺寸

iPhone X的宽度为375pt，与4.7英寸的与iPhone 6、iPhone7、iPhone 8一样。

高度为812pt，比4.7英寸屏幕高了145pt，在高度上增加了20%。

iPhone X需要使用高分辨率图像。字形和其他平面、矢量图，最好提供独立的pdf文件。对于栅格化图片，需要提供@2X、@3X图。

布局

在iPhone X设计中，要确保布局满屏显示时不被设备的圆角、传感器外壳、进入屏幕的指示器遮挡。

大多数应用程序使用系统提供的UI元素，导航栏、表格、集合，会自动适应设备的新表单元素。背景会自动延展到设备边缘，UI元素也会自动调节位置。

应用自定义布局，则需要遵循应用自动布局、安全区域和边缘布局指南，才能适配iPhone X。

在iPhone X上预览应用

可以使用模拟器预览应用，检查剪切和其他布局问题。若应用支持横屏布局，请确保设备向左转或向右转时布局正常。在iPhone X上不支持倒立竖屏模式。

一些功能，例如宽色图像，在实际设备中预览效果更好。

提供全屏显示体验

确保背景延伸到设备屏幕边缘位置，垂直方向布局可滚动。就好像表格和集合，控件布局需要延展到设备屏幕的底部位置。

摆放基本内容防止被裁剪

一般来讲，内容应该摆放在居中位置，以保证在任何方向上查看都是正常的，不会被边缘角落或设备的传感器外壳遮挡、也不会被访问主屏幕的指示器遮挡。

使用系统标准的界面元素以及自动布局来构建界面。而且应用应该遵循UIKit定义的安全区域和布局边界，确保基于设备和上下文的适当设置。

安全区域也适用于状态栏、导航栏、工具栏、标签栏。

注意状态栏高度

iPhone X的状态栏比一般的手机要高。应用要根据用户的设备动态定位内容来设置状态栏，而不应该固定状态栏高度。当有后台任务时，状态栏高度也不改变。

注意图片的宽高比

iPhone X的宽高比与4.7英寸手机的宽高比不一样。若直接使用适配4.7英寸的图片，图片会被裁剪掉一部分或无法满屏显示。因此需要保留两种宽高比的图片。

避免交互控件放置于屏幕底部或角落

底部滑动手势会访问主屏幕和应用切换器，会影响应用内定义的手势。角落位置则是用户的困难区域。

全角按钮

全角按钮超出屏幕的安全区，和屏幕宽度一致的显示方式，会使按钮看起来不像按钮。因此按钮最好就是设置为圆角，且宽度为安全区宽度，按钮底部与安全区底部对齐，避免与Home指示符冲突。

不要掩盖或特别关注显示功能

不要试图隐藏设备的圆角、传感器外壳、指示器。也不要使用括号等视觉装饰来装饰这些区域。

允许自动隐藏指示器

（适用于观看体验时）启用自动隐藏时，用户未触摸屏幕几秒指示器就会隐藏。用户再次触摸屏幕，指示器再次显示。

颜色

iPhone X支持P3色彩空间，这是一种比sRGB更丰富、更饱和的色彩。

使用广泛的颜色增强视觉体验

使用宽色彩的照片和视频、视觉数据、状态指示灯，更具有影响力。

视频

系统播放器提供两种观影模式：全屏幕模式和适合屏幕模式。默认情况下，系统会根据视频的宽高比选择适合的模式，用户也可以在播放过程中切换模式。

全屏幕模式，视频缩放填充显示，某些边缘位置可能会被裁剪。

适合屏幕模式，整个视频在屏幕上都是可见的。

确保自定义的播放器按预期行事

使用播放器播放视频时，显示的画面应该是适配屏幕的而不应该裁剪视频画面，而且也允许用户在使用播放器播放期间切换模式。

始终以原始的视频宽高比显示

若视频内容嵌入填充为符合标准的宽高比，用户切换模式时，系统无法正常显示。

手势

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

避免干扰系统范围的屏幕边缘手势

在应用中，都会使用手势进行操作。关于自定义的程序手势与系统手势的混合调用，在使用时需要谨慎。

其他注意事项

准确的验证方式

iPhone X支持人脸识别，而其他设备支持指纹识别。请勿在iPhone X上使用指纹识别，而在其他设备上使用人脸识别。

请勿复制系统键盘

iPhone X可以自定义键盘，Emoji/Globe键和听写键会自动显示在键盘下方，不需要重复调用，避免造成混淆。

边缘处理

确保网站在iPhone X边缘间的处理。

尝试翻译一下iOS设计规范，一同学习。

iOS Human Interface Guidelines

原文链接：

https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

[译] iOS设计规范：概述二