UI设计师必知的iPhoneX设计细节！

阅读604

光读 HIG 是不够的，这里帮你整理一些更细节的资讯，让你省去向开发者问东问西的时间。

尺度与其他 iOS 装置的差异

以下都是与 iPhone 6、7、8相比。

Status Bar 高度由 20pt 增长为 44pt。

底部须预留 34pt 给 Home Indicator 。

宽度不变，画面高度多出 145pt，但由于 Status Bar 以及 Home Indicator，实际多出可自由利用的有效显示高度应该为：

145 – 24– 34= 87pt

相当于两个 Table Cell 的高度。

键盘高度由 216pt 增长为 291pt，设计文字输入区域时要小心。

 包含 Home Indicator，Tab Bar 高度由 49pt 增长为 83pt。包含 Home Indicator，Toolbar 高度由 44pt 增长为 83pt。 一般设计原则

如果你的 UI「顶部」有 Navigation Bar 或其他类似的条状元件，那幺一般来说，在设计稿将 Navigation Bar 的背景色往上延伸 44pt，「垫在 Status Bar 后方」作为背景色即可。

如果你的 UI「底部」有 Tab Bar、Toolbar 或其他类似的条状元件，在设计稿将背景色往下延伸 34pt，「垫在 Home Indicator 后方」作为背景色即可。

若是使用系统原生的 Navigation Bar、Tab Bar 或 Toolbar，以上的行为系统都将自动替你完成，设计师不需要特别向开发者说明。

边距

由于 iPhone X 萤幕四边有圆角，上方有感应器区域 ，因此 UI 设计师需要留意，内容在展示、或是随着使用者操作、捲动时，最好要考虑到这些因素，不要让关键的 UI 被圆角剪裁，或是被 Sensor Housing 遮挡。

Safe Area 与 Layout Margins

一般在做 UI 设计时，背景色或较不重要的内容可完整地延伸至萤幕边缘；主要的内容呈现区域会往内缩一层，称为「Safe Area」；而通常文字或是按钮等更加关键的物件，考虑到美观及操作性，会再内缩一层，称之为「Layout Margins」。这边提到的关键字皆是 iOS 开发的专有名词，可用来与开发者沟通。

直向

直向时的 Safe Area 可延伸至萤幕左右两侧，上部留 44pt 给 Status Bar；Layout Margins 通常左右再内缩 15pt。

横向

横向时的 Safe Area 左右两侧皆内缩 44pt；Layout Margins 通常左右再内缩 15pt。

需要特别注意的是，横向时一侧有 Sensor Housing 挡住，另一侧则是乾净的，但做设计时儘可能左右对称内缩，可达成体验的一致性，帮助使用者建立操作的肌肉记忆 。

Home Indicator

Home Indicator 为 iPhone X 萤幕下方的一个操控区域，外观是一条粗线 ，由萤幕底部往上滑动可返回主画面 ，或进入多工管理画面 。

外观

不可客製/自订外观 ，系统会自动判断背景颜色，深色背景时显示浅色 Bar，浅色背景时则显示深色 Bar。

Edge Protection

如果你的 UI 带有由萤幕底部往上滑动的手势，可能会与系统的手势冲突，这时可告诉开发者该 UI/画面需要启用「Edge Protection」。

启用时，Home Indicator 将会变得较为透明，并下降位置 ，让全萤幕体验更为完整。当使用者第一次由下往上滑动时，此手势将保留给你的 App 使用，而不会触发 Home Indicator；当使用者在这时进行第二次滑动，才会触发。

注意：此选项将造成使用者不便，因此当真的有需要时再考虑启用。

Auto-Hide

UI 中若是有影片播放等需要降低干扰的状况，需要完全隐藏 Home Indicator，可启用「Auto-Hide」选项，启用后，若是使用者数秒内没有操作行为，Home Indicator 将自动隐藏，直到使用者触碰画面才会再度出现。

注意：此选项将造成使用者困惑，因此当真的有需要时再考虑启用。