UI 设计适配 iPhone X UI 设计在 iPhone X 上的变化

UI 设计在 iPhone X 上的变化，一图胜千言：

解开工程项目中的 Safe Area 约束，根据官方 Human Interface Guidelines 稍作调整，大部分的界面适配都没有疑问。然而 80% 的时间总是花在 20% 不确定的地方上，这篇文章试图探讨一下适配过程中可能遇到的疑难。

底部按钮和 toolbar

由于屏幕底部多出 Home Indicator，如果界面中的按钮或 toolbar 元素原先在底部，为了不与 Home Indicator 冲突，需要作出处理。如果是独立成块状的按钮，类似系统原生的 Action Sheet 的视觉样式（下图左），将按钮整体上移即可。

但如果是紧贴屏幕边缘的按钮（下图右），出于对「菲兹定律」的考虑，这时不应该简单将按钮上移，而是同时增加按钮的面积和热区，使得按钮依然紧贴屏幕底部、用户点击屏幕边缘的时候依然对按钮起作用。这取决于按钮的视觉效果。

按下按钮、手指离开前的按钮状态

这有一些特殊情况，有时底栏会使用到主题色的色块按钮，它很引人瞩目，如果仅仅将底栏整体上移（下图左），不符合刚才提及的交互法则；如果单独扩大主题色按钮的面积和热区（下图中），视觉效果又让我们难以接受；这时把按钮改为独立的块状样式（下图右），或许是更好的选择。

个人更认同的适配方案，左：饿了么，右：支付宝淘票票

甚至事后诸葛亮地猜测一下，iOS 11 的某些风格转变，是不是也有这方面的考虑？

iOS 的数字键盘、计算器 App，左：iOS 7~10，右：iOS 11

Status bar

If your app currently hides the status bar, reconsider that decision for iPhone X.

如果你们的 App 现在隐藏了 status bar，那么请在 iPhone X 上重新考虑一下这个决定吧。

经常见到隐藏 status bar，或把 status bar 底色设置为透明、和内容重合的设计（一般是焦点图），这可以换来不错的视觉效果，但在 iPhone X 上可能会让内容被遮挡，这会是个潜在的问题。

尴尬的个人封面图

如果图片由设计师制作或运营人员上传，只需要制商量好图片规范即可，毕竟最终效果还在把控之中。但如果用户可以自由上传图片、效果不可控制，这或许就需要将内容移到 status bar 下方，或者增大图片区的高度、尽量减少这种情况的发生。

底部进度条

依然是与 Safe Area 相关的元素，一些阅读类 app 会在顶部或底部显示有进度条，既体现了阅读进度，又不会干扰到阅读。但现在，这会被屏幕倒角所遮挡，也需要重新考虑了。

尴尬的底部进度条

简单将进度条上移，虽然可以避免遮挡的问题，但视觉效果不尽人意。或许可以换一种形式，用百分比数字来代替进度条，保证沉浸的阅读。

最后别忘了新增开屏图的尺寸

开屏是国内 App 常见的广告形式。由于屏幕宽高比从 16:9 增大到接近 20:9，比例悬殊，如果共用同一套素材、使用居中裁切的方式，左右两侧会被裁切掉不少。如果要求素材在制作的时候预留出安全区域，不仅安全区域需要定得很大、增加了设计的难度，且效果两边不讨好。

在不同屏幕宽高比的手机上共用一套开屏图素材

这不仅是 iPhone X 上会遇到，随着全面屏的趋势，很快，普遍手机的屏幕宽高比也会提高。建议新增一种针对全面屏的尺寸，按屏幕宽高比来调取不同尺寸的图片资源。