为 iPhone X 而设计

iPhone X 的超视网膜显示屏 给了你更多显示内容 和创造沉浸式体验的空间 这个视频会引导你 设计在所有 iOS 设备上体验都很棒的 App 和游戏 首先我们来看看新显示屏的 一些重要方面 iPhone X 的显示屏有 3 倍的图像缩放系数 当生产并交付图像素材时 我们推荐使用 PDF 格式 因为它们与分辨率无关 而且可能可以显著缩小你的 App 的体积 当需要栅格化图像时 请确保在你 App 的素材目录下 包括 2 倍和 3 倍的分辨率 为了精简你的生产 我们建议使用“Apple UI Design Resources（Apple UI 设计资源）” 中包含的模版 你可以在“Apple Human Interface Guidelines（Apple 人机界面准则）” 的“Resources（资源）”中下载它们

iPhone X 的显示尺寸为 宽 375 pt 高 812 pt 在 3 倍显示模式下 这等价于 1125 x 2346 像素 宽 375 pt 意味着它和 iPhone 6 iPhone 7 和 iPhone 8 的 4.7 英寸显示屏有相同的宽度 所以对于短边上 显示的内容数量 这些设备不会有任何区别 高 812 pt 意味着它比 4.7 英寸的显示屏 要高 145 pt 超出的高度 提供了大约 20% 显示内容的空间 当然 超视网膜显示屏 最引人注意的特点 是它的形状 为了使外观更加匀称 显示屏遵循了四个圆角的产品设计理念 升级你的 App 以在新的显示屏上使用 涉及到扩展视觉元素 以填充显示屏的视窗 同时也要保持控制 掌握关键信息 防止视觉元素在角落被割裂 或被传感器槽遮挡 在 iPhone X 上 人们可能会在显示屏底部边缘 的任何位置向上轻扫 以实现多任务处理 或者回到主屏幕 显示屏底部的指示器 提供了针对此交互的提示 这个指示器显示在你 App 的界面上 在设计你的 App 时 你需要考虑到这一点

如果你的 App 使用 UIKit 的控件和 Auto Layout 为 iPhone X 和我们的其他设备 设计和开发 App 将会非常简单 标准的 UIKit 元素 比如导航栏 表格视图和集合视图 在 iPhone X 上都会自动调整 导航栏 标签栏和工具栏 在所有的 iOS 设备上 都会自动调整合适的位置和缩放比例 导航栏的背景素材 会延伸到显示屏的顶部边缘 而标签栏和工具栏的背景素材 会延伸到底部 同时 它们包含的元素会自动调整位置 防止被其他元素 遮挡或切割 在横向模式下 表格视图将会占满显示屏的整个宽度 但是表格中单元格的内容视图是嵌入的 如果你的 App 使用 Auto Layout 视图将会自动适配 iPhone X 的显示屏尺寸 对于 iOS 11 我们添加了一个新的 Layout Guide（布局指南） 叫做 Safe Area Layout Guide（Safe Area 布局指南） Safe Area Layout Guide 帮助你 在置放内容和控件时 避免与系统 UI 元素重叠 在 iPhone 8 上 如果没有任何栏可见 Safe Area 将会和视窗 大小相同 如果状态栏可见 Safe Area 的顶端边缘将会下降一些 以指示状态栏的高度 Safe Area 将会嵌入 以容纳导航栏 工具栏或标签栏 在 iPhone X 上 Safe Area Layout Guide 提供了一个额外的好处 即使没有任何栏在屏幕上可见 在竖向模式下 它嵌入在屏幕的顶部和底部边缘之间 它通过让界面元素远离 传感器槽 显示屏的圆角 和主屏幕指示器 来帮助你避免它们被 切割或遮挡 在横向模式下 Safe Area 从屏幕的侧边嵌入 主屏幕指示器由于同样的原因 也是这样 所以 举个例子 表格中这些行单元格的 内容视图的宽度被 Safe Area 约束 以防止它们被传感器槽遮挡 或者被 显示屏的圆角切割 并且 表格的的顶部边缘也嵌入在固定的位置 以防止与导航栏重叠 重叠和切割在 iPhone 8 上并不是问题 Safe Area 的宽度和显示屏的宽度匹配 进而 表格可以无边界地域性 你会注意到内容和控件 都嵌入在 Safe Area 中了 这种嵌入是通过另一个 Layout Guide 实现的 叫做 Layout Margin（界面边距） Layout Margin 提供了跨越多个 App 的 一致的内容边距 并帮助你把内容 与其他控件对齐 即使你没有在用 Auto Layout UIView 也提供了 Safe Area 嵌入 和 Layout Margin 属性的值 现在我们来说 Auto Layout 的最后一个注意事项 iPhone 6 iPhone 7 iPhone 8 和 iPhone X 都属于 Size Class 中的 Compact Width 这在本质上意味着你 App 的界面 在这些设备上应该保持一致 如果你的 App 有自定义控件 或非标准界面 你可能需要对你 App 的界面进行一些细微的调整 以在 iPhone X 上良好地运行 这包括两个方面 首先 你的 App 或游戏 应该总是填满它运行的显示屏 在屏幕顶部或底部添加黑框 会让你的 App 看起来狭小 拥挤 并且与 iPhone X 上的其他 App 不一致 在设计背景图形 或渲染背景场景时 请时刻铭记 iPhone X 的显示屏 和 4.7 英寸的显示屏有不同的宽高比 为 iPhone 8 16:9 宽高比设计的背景图形 如果要在 iPhone X 上拉伸以填满的话 会在沿着左右边缘裁剪 如果要收缩以匹配的话 则会采用“邮箱模式” 类似地 为 iPhone X 设计的背景图形 在 iPhone 8 上 有可能会被 在顶部和底部边缘被裁切 或者采用“邮筒模式” 最好使用兼容尺寸的图像 这样特定的视觉信息将会保持可见 无论显示屏的宽高比是多少 更新界面的第二部分涉及到嵌入 或调整交互元素和关键信息的位置 所有距离视窗边缘或角落 过近的元素 都有可能被显示屏的圆角切割 或被传感器槽遮挡 所以请确保潜入控件 和其他元素来避免这些事情的发生

同样 应该使用 Safe Area Layout Guide 和 Layout Margin 来确定合适的嵌入值 同样值得注意的是 置于设备边缘的控件 根据设备不同的握持方式 可能会更难触控得到 嵌入控件可以让与它的交互更快 并且更舒适 塞到角落里 或在屏幕边缘下方的视觉元素 可能需要修改 因为嵌入它们可能也没什么用 在一些情况下 更改视觉处理方案可能是必要的

请同样注意 iPhone X 上的 状态栏也比其他设备上的要高 以固定的绝对长度 嵌入内容视图 将会让它们的顶部边缘被状态栏遮住 在 iPhone X 上 状态栏不再会由于 后台任务 例如电话或者定位服务运行 而改变高度 这为建立更连贯的用户体验提供了帮助 而无需考虑状态栏的风格

在 iPhone X 上 状态栏占据了屏幕上的一块 你的 App 可能不会完全用到的区域 如果你隐藏了状态栏 来为你的 App 界面获取更多空间 你可能需要重新考虑一下那是否必要 现在是一个关于横向模式的小提示 多数 App 在控件和视觉信息处于中心的时候 拥有最佳的外观和功能 根据设备旋转的方式不同 不对称的界面漂移的位置也不同 这回导致不连贯的用户体验 也会潜移默化地削弱人们 建立肌肉记忆的能力

最后 我们来说一些关于能提示 人们可以向上轻扫 以实现多任务处理 或者回到主屏幕的指示器 的重要注意事项 由于这个交互是 使用 iOS 设备体验的核心 指示器需要总是清晰可见 为了帮助实现这一点 iOS 动态地调整指示器的外观 以保持与背景之间有效的对比 当背景颜色较亮的时候 指示器的外观偏暗 当背景颜色较暗的时候 指示器的外观偏亮 当设计你 App 的界面 以良好适配主屏幕指示器时 最好不要把界面元素 置于距主屏幕指示器过近的地方 一种简单的做法是 在指示器周围的 Safe Area 中 放置一些不可滚动的内容 来留出一些不活跃的空间 通过视觉装饰 来让指示器引起注意 是不可取的 比如花括号 花框 或者其他方式

如先前提到的一样 人们可以通过 在显示屏底部 向上轻扫 实现多任务处理 或者回到主屏幕 多数情况下 轻扫手势出现在显示屏的中间 所以这个交互不太可能 与你 App 中的交互产生冲突 然而 如果你的 App 或者游戏鼓励人们 沿着显示屏的最底部滑动 你可能想要为显示屏底部的边缘 启用边缘保护 这会让指示器拥有一个更细致的外观 并改变它的行为 这样一来 只有轻扫两次才能退出你的 App 第一次轻扫或拖曳 会拉起指示器并激活控件 而轻扫第二次允许人们 退出你的 App 或游戏 由于边缘保护会导致不连贯的用户体验 请仅在绝对必要的时候才启用它 与轻扫不同 轻点显示屏底部边缘 只会影响你的 App 或游戏 例如 对于轻点表格中的行单元格 无论它是否在指示器后面 都会有相同的结果

垂直可滚动的视图 比如表格视图或集合视图 应该一致延伸到显示屏底部 而不应该被限制在 Safe Area 中 最后 在显示全屏视觉内容的时候 你可以启用自动隐藏的行为 自动隐藏会让指示器 在显示屏几秒钟内没有被触摸的情况下淡出 而在显示屏被触摸时 就会淡入回来 请谨慎使用自动隐藏这一行为 仅在人们不太可能频繁触摸显示屏的情况下使用 好的 要了解更多 iPhone X 设计准则 请前往 developer.app.com/design 以访问 Apple Human Interface Guidelines 你可以在该页面上下载最新版本的 iOS Apple UI Design Resources 我们已经更新了针对 iPhone X 的 Sketch 和 Photoshop 模版 很快就会更多的更新