给设计师看的iPhone X 设计规范&设计指南

Ssserena

北京/UI设计师/8年前/9856浏览

版权

Ssserena

网络上很多类似文章不够全面，还有部分通篇介绍与设计无关的东西，索性自己整理一篇。

注：所有内容依据Apple官方发布设计指南。

一、屏幕尺寸与分辨率

iPhone X @3x 1125*2436

有什么变化？

1、在iPhone X之前，尽管iPhone已经有不同的屏幕尺寸，例如iPhone6s、iPhone 7 Plus等，但都是16:9的屏幕，而新的iPhone X是13:6屏幕（812 x 375 pt），屏幕相对来说增加了大约20%的垂直空间。

2、iPhone X 的屏幕分辨率达到 1125px × 2436px（458 PPI），可以显示高分辨率的@3x图片。对于其他平面和矢量的图形，最好提供独立分辨率的PDF格式的图片；对于其他栅格化的图片，需要提供@3x和@2x的图片。

需要注意什么？

全屏图、单屏显示界面、H5页等需要特别注意。

如果App中使用到了全屏背景图，且没有资源给两种比例的屏幕单独做适配，就需要考虑在不同比例切换的时候是否会影响到图片。（如图）4.7寸iPhone的全屏图像在iPhone X上显示时会出现剪裁或letterboxed（横向有留白）。同样，iPhone X上的全屏图像在4.7寸的iPhone上显示也会被剪裁或pillarboxed（纵向有留白）。

这种屏幕上的变化对于大部分瀑布流的页面来说，几乎没有什么影响。但对于新手引导、音乐播放等单屏显示界面需要重新布局（单屏高度提供了更多的内容高度），还有靠“等比缩放”完成适配的H5活动页结构也需要适当微调以适应iPhone X。

另外对于需要隐藏状态栏的应用程序，也需要重新考虑布局。所以如果不是特别需要沉浸式体验的界面，如视频、看图片，建议不要隐藏状态栏。

二、布局

在为iPhone X做设计时，由于之前的直角屏幕变为了圆角，所以我们必须确保布局覆盖到整个屏幕，不会被设备屏幕上的圆角、传感器和指示灯所遮蔽。

对于应用程序中大多数使用标准化的、系统提供的UI元素（如导航栏、表格等）会自动适配iPhone X。背景延伸到显示器边缘。

三、Home 指示条

iPhone X 迈向了全面屏，移除了原本在手机底部的实体 Home 键，取而代之的是一条 134 x 5 pt 的虚拟 Home 指示条，交互形式也由之前的「单击或双击Home键」统一操作为「底端上划」，需要我们设计注意什么呢？

1、避免将交互控件放在屏幕底部和角落。人们在屏幕底部使用滑动手势显示主屏幕和应用程序切换，这些手势可能会取消之前在此区域中的自定义手势。屏幕的两个角落可能是人们难以舒适到达的区域。

2、设计时为它保留位置。除了在某种特殊条件下，这个指示条将永远伴随着你的 App，成为强制的设计元素出现在屏幕中。这就意味着，我们设计时不得不留出空间放这条线，并考虑好周围元素与它的兼容关系。

3、如果 App 的底部是可滚动的内容则不用考虑。iOS 自带的通讯录是一个典型的带有底部导航栏的 App，对比 iPhone 8 和 iPhone X，你会发现在 iPhone X 上，底部导航栏是悬浮在虚拟 Home 条上方的。但Apple 的设计则例中也指出，如果 App 的底部是可滚动的内容（比如一个长列表视图）则不需要考虑，尽管让它们重叠吧！

四、安全区

手机竖屏状态下，安全区为屏幕顶端向下 44 pt（顶部刘海还要靠下一点），底部向上 34 pt 。

以上是官方提供的布局指南，这个布局有助于内容的定位，对齐和间距安全区域可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。

竖直时的安全区可延伸至萤幕左右两侧，上部留44pt给状态栏;布局边距通常左右再内缩15pt。

横向时的安全区左右两侧皆内缩44pt;布局边距通常左右再内缩15pt。

需要特别注意的是，将手机横向展示时，需要注意“刘海”区域，做设计时尽可能左右对称内缩，可达成体验的一致性。

（不对称设计尽管空间利用率更高，但与用户的肌肉记忆相背）

五、需要思考的问题

以上是男性和女性的单手持握的热区图

以上是iPhone各个型号和尺寸手机右手持握的热区图

乔布斯曾说，手持设备最理想的屏幕尺寸应该是 3.5 吋。iPhone 如今已经增大到了惊人的 5.8 吋。一般人大拇指大概 2.5 - 2.7 吋长，iPhone 7/8 Plus 是 5.5 吋，所以苹果在 iPhone 6 Plus 中第一次引入了两次轻触 Home 键将屏幕整体下移的交互设计。