点击蓝字

关注我们

只有那些疯狂到以为自己可以改变世界的人，才能改变这个世界。

前言

北京时间今天凌晨1点，苹果再一次让全世界沸腾。iPhone X 带给我们的最大改变：全屏 Super Retina显示屏。它提供了更多的内容显示空间，同时也营造了更加深入的沉浸感。作为 iOS 开发者，在为强大的 Face ID 和全面屏欣喜的同时，我更担忧“齐刘海”的适配！ 下面结合官方的人机交互指南，来了解下如何设计 App 才能在iPhone X 和其他所有 iOS 设备上都看起来很棒。

人机交互指南

屏幕大小

在竖屏下，iPhone X 上的显示的宽度与 iPhone 6，iPhone 7和 iPhone 8的4.7“显示屏的宽度保持一致。然而，iPhone X 比4.7”显示屏高了145个点，这导致增加了大约20％的内容垂直空间。

Portrait

Landscape

1125px × 2436px (375pt × 812pt @3x)

2436px × 1125px (812pt × 375pt @3x)

布局

在 iPhone X 布局中，最关键的是：必须确保布局填满屏幕，同时又不会被设备的圆角，传感器外壳或用于访问主屏幕的指示灯所遮盖。

可喜的是，大多数标准的系统提供的UI元素和控件（如 navigation bars，tables 和 collections）都已经为新外形做了很好的适配。 背景已经延伸到显示器的边缘，并且UI元件被很恰当地插入和定位在安全区域。 因此，对于具有自定义布局的 App，支持iPhone X 也应该比较容易，特别是如果使用了 AotuLayout 并遵守安全区域(safe area)和边距布局(margin layout)指南。这些在上文都已经有过较详细的阐述。 下面说几点需要特别注意的：

在 iPhone X 上预览 App: 在拿到新机之前，也可以先使用 Simulator 来预览和检查下布局问题。 但是一些依赖硬件的功能，如图像效果和交互体验，最好还是在真机上预览。

始终保持全屏体验: 确保背景延伸到显示区域的边缘，并且垂直可滚动的布局（如 tables 和 collections）一直延续到底部。

防止边缘内容被裁剪: 一般来说，内容应该是居中对称的，这样它在任何方向看起来都会很棒，不会被边角角或设备外壳夹住，或被主屏幕的指示器遮挡。 为了获得最佳效果，请使用标准的系统界面元素和 AutoLayout 构建界面。 所有 App 都应遵循 UIKit 定义的安全区域和布局边距，因为这些区域可以根据设备和上下文进行适当的填充。 安全区域还可以防止内容覆盖status bar, navigation bar, toolbar, 以及 tab bar.

注意 status bar 的高度: status bar 在iPhone X 上比在其他 iPhone上更高。 如果假定你固定 status bar 的高度用于将内容定位在 status bar 的下方，那么现在必须更新你的的 App，才能根据用户的设备动态定位内容。 特别需要注意，当背景任务（如录音和位置跟踪）处于活动状态时，iPhone X上的状态栏不会改变高度。

重新考虑隐藏 status bar: iPhone X 较之显示高度为4.7“iPhone 的显示屏提供了更多的内容垂直空间，status bar 占据的只是扩展出来的屏幕区域。况且 status bar 更直观的显示用户有用的信息，如果非要隐藏状态栏，那最好用与这些信息同等重要的内容替代。

注意长宽比差异: iPhone X 具有不同于4.7“iPhone 的长宽比。因此，全屏4.7”iPhone 图形在iPhone X 上全屏显示时出现裁剪或 letterboxing 。同样，全屏iPhone X 图形全屏显示在4.7“iPhone 上时也会被裁剪或 pillarboxing ，因此要确保重要的视觉内容适配这两种尺寸。

避免交互式控件出现在屏幕底部和角落: iPhone X 提供了显示屏底部的滑动手势来访问主屏幕和应用程序切换器的新交互方式，这些手势可能会取消在此区域中实现的自定义手势。 况且屏幕的两个角落过多复杂的交互也不是最佳体验的良好实践。

不要遮挡或者特别修饰显示特性来引起用户注意: 请勿尝试隐藏设备的圆角、传感器外壳，或者通过在屏幕顶部和底部放置控件来访问主屏幕的引导。也要特别注意不要试图使用像括号，边框或各种符号等视觉修饰这些特殊区域。

为了轻松访问主屏幕允许自动隐藏指示器: 当开启自动隐藏时，如果用户离开屏幕几秒钟，指示器将消失。 当用户再次触摸屏幕时，它会重新出现。 这种行为应该只能用于提升观看体验，如播放视频或照片幻灯片。

色彩

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

可以使用 wide color 来增强视觉体验。 它可以让照片和视频更加逼真生动。

手势

想必大家都在发布会上看到了，iPhone X 上的显示屏可以使用屏幕边缘手势来访问主屏幕，应用程序切换器，通知中心和控制中心。适应这个新变化的同时，对于开发者要特别注意：避免干扰系统范围的屏幕边缘手势:用户依赖这些手势在每个 App 中操作，所以在极少数情况下，比如游戏这种强调沉浸式体验的 App 可能需要自定义的屏幕边缘手势，优先级高于系统的手势。 这种行为（称为边缘保护）应该谨慎使用，因为它使得用户难以访问系统级的操作。

补充的注意事项

1、认证方法准确：iPhone X 支持 Face ID进行身份验证。 如果你的 App 集成了 Apple Pay 或其他系统身份验证功能，请务必注意不要在 iPhone X 上引用 Touch ID。同样地，也请确保不要在支持Touch ID 的设备上引用 Face ID。

2、不要重复增加系统提供的键盘功能：在 iPhone X上，即使使用自定义键盘，Emoji / Globe 按钮和 Dictation 按钮也自动显示在键盘的下方。 你的 App 不能影响这些按钮，因此避免在键盘中重复增加这些按钮造成混乱。

最后

因为 iPhone X 的不同长宽比和“齐刘海”的原因，确实有不少适配工作需要处理。但体验至上的苹果，不会把这算作 iPhone X 的缺陷。在我看来，最大的缺陷是它太贵了。不过，可能这只是我个人的缺点吧……