-卷首

熬夜看苹果发布会了吗？

我反正是没看

熬不起夜

如所有“谍照”泄露得一样

iPhone 发布了新机型

8 就不说了

这里聊聊 iPhone X

X 读作 Ten（10）

考虑到售价

Ten 读作“疼”也是合理的……

有没有顺手摸下腰？

—

如何为 iPhone X 设计交互界面？

iPhone X 如期而至，11 月 3 号就有得卖了。1125×2436 像素的超级视网膜显示屏挺屌的，它在屏幕顶部有一个切口（国内俗称：刘海~）您可以通过它使用未来感十足的脸部解锁功能（Face ID，俗称刷脸）

为这款美丽的机器将给设计师带来一些新的挑战，也将带来一些新的机会。在竖屏模式下，设备的宽度与 iPhone 6、7 和 8 相同，但比它们的屏幕足足高了 145pt，增加了 20％ 的屏幕垂直空间。

当在一倍的倍率下设计时，您需要创建一个 375×812 像素的画板。由于新 Retina 屏幕的缘故，它需要的切图资源是 @3x 的，如同之前的 iPhone 6、7、8 plus 一样。

创建设计时，您必须确保“刘海”不会遮住 UI。顺便说一句，Home 键化为了屏幕底部的小线，它取代了物理 Home 按钮。您可以从任何应用程序向上滑动回到主屏幕或多任务处理。

注意看屏幕底部的“白色条纹”（我想到了乐队“白色条纹”，毫无联系，请忽略）它是 Home 键的触发器（化身……）

使用 iOS 原生组件（导航栏、表、集合视图和制表符栏……）的 APP 会自动适应这款新的 iPhone，这些组件将自动布局、定位。

左边是 iPhone 8 的 UI 布局，右边是 UI 组件适应到 iPhone X 上的效果

如果你使用自定义布局，那你可能要花点心思考虑考虑它们如何适配到 iPhone X 上；若你使用自动布局，那么事情就简单的多了！

让我们再进一步研究一下

“拥抱这款酷炫的全屏机吧！”

创建全屏体验——让滚动视图滚动到屏幕的最底部甚至超出屏幕底部的边缘。

居中的重要信息——确保重要的内容中心对齐，使用对称的布局，但要注意，你的内容不要被“刘海”或某些“角落”挡住了。如果您使用自动布局，您的内容将自动放置在安全区域内，因此您的设计不会隐藏在角落，或被挡在“刘海”或代表 Home 键的那截横线后面。

新的状态栏——由于“刘海”的缘故，新的状态栏分为两部分。如果你的 UI 在这个空间做了一些设计（以前的 20pt 高，现在是 44pt）确保它可以在高度上动态改变。幸运的是，如果用户拨打电话或正在使用导航程序则不会更改高度。

新的状态栏，高度变了，分为两块了。中间那一坨黑的就是“刘海”了，它里面包含了传感器、摄像头等硬件。

关于隐藏状态栏——如果您在设计中隐藏状态栏，Apple 会要求您重新考虑此决定。由于屏幕较高，您可以更多地显示内容，因此苹果可能会取消隐藏状态栏。用户可以在那里（状态栏）找到有用的信息，而且大部分时间状态栏的位置也不会被其他 UI 所侵犯到。

全屏图像——如果您在设计中使用全屏图像，则需要更新新的 iPhone。图片可能被裁剪，视觉的重要部分可能被隐藏。

不要在屏幕底部放置交互控件——因为底部已经有了那截小横线（Home 键触发器）所以，您在底部放置一些交互控件时，可能因为失误而触发到 Home 功能，从而影响你使用软件。

任何时候都不要隐藏 Home 键触发器——系统会在用户几秒钟不触摸屏幕时，将它自动隐藏。当用户再次触摸屏幕时，它将重新出现。这个功能对沉浸式使用场景（看视频或照片）很友好。Home 触发器（小横线）也会根据应用程序的背景自动更改颜色。

更多的颜色——新的超级视网膜显示屏可以显示更多的颜色，P3 色域代替了 sRGB，这意味着它会显示更丰富和更饱和的颜色。视频和照片会看起来更棒！

注意使用手势——由于物理 Home 键已经消失，您可以通过手势与您的 iPhone 进行交互。当你向上滑动时你就回到主屏幕或去到多任务视图。在 Home 触发器上向左和向右滑动时，您可以在打开的多任务应用程序之间切换。从屏幕顶部向下滑动，您可以访问通知或控制中心。在游戏中更是如此，您可以使用可能会覆盖原生 iOS 手势的自定义手势。您可以通过实施“边缘保护”来实现自己的手势，不过请谨慎使用，因为这将使您的用户更难使用系统功能。

刷脸功能——以前的 iPhone 具有 Touch ID 功能，允许用户通过指纹来解锁设备或执行密码锁定的操作。Touch ID 传感器被隐藏在 Home 键内部，但 iPhone X 的 Home 键已经在 屏幕中了，所以苹果用更先进和安全的方式来解锁你的设备——Face ID（刷脸）它使用非常高深的算法来检测您的脸部并解锁您的设备。这个功能可能会影响到你的 UI 设计，请确保 iPhone X 的用户能使用它。另外，不要在登录或菜单中引用 Touch ID，用 Face ID 吧。

自定义键盘——当您设计自定义键盘时，不应该在键盘上添加表情符号或听写按钮。因为它将出现在 Home 触发器（还记得那小截横线嘛？）周围，从而带来误操作的可能。

更大的导航栏——iOS 11 中原生导航栏的设计得到了更新，它们现在更高了。这款设计在屏幕较高的 iPhone X 上将会非常出色，并将与新的状态栏完美结合。所以考虑在你的设计中使用它，在滚动屏幕时它还自带了漂亮的原生动效。

总结

iPhone X 屏幕高出了 145pt，所以以 375×812pt 设计而不是 375x667pt。

iPhone X 使用 @3x 的切图资源。

创建全屏体验。

重要的、居中的信息，千万不要被“刘海”挡住了。

状态栏高度以前是 20pt，现在高达 44pt，而且是分开的。

全屏图像应该被完全显示。

不要在屏幕底部添加按钮，会引起误操作。

不要隐藏 Home 触发器（那截小横线）除非非做不可。

P3 色域更丰富，饱和度更高。

注意在 Home 键触发器和状态栏附近的自定义手势，不要混淆原生手势。

Face ID 替换 Touch ID，更新您的 UI。

自定义键盘不需要添加表情符号和听写按钮。

更大的导航栏将在这个高大的显示屏上看起来更棒、动画效果也很好。

如何预览我的 APP UI？

您可以使用 Xcode 9 模拟器预览您的应用程序，它将立即显示您的 UI 是否需要更新。

在哪里可以找到 iOS 11 和 iPhone X 设计资源？

想下载的朋友，请给我留言。

原文地址：https://blog.prototypr.io/designing-for-the-iphone-x-4239d5ac736c

注：以上大部分信息来自 Apple UI 指南。