ui设计iphonex模板（UI设计师必知的iPhoneX设计细节）

ui设计iphonex模板（UI设计师必知的iPhoneX设计细节）底部须预留34pt给Home Indicator（下面有详细说明）。Status Bar高度由20pt增长为44pt。实际分辨率：1125×2436 px与其他iOS装置的差异以下都是与iPhone 6、7、8（375×667pt）相比。

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

尺度

画面大小：375×812 pt

密度：@3x

实际分辨率：1125×2436 px

与其他iOS装置的差异

以下都是与iPhone 6、7、8（375×667pt）相比。

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

底部须预留34pt给Home Indicator（下面有详细说明）。

相当于两个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后方」作为背景色即可。

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

边距

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

Safe Area与Layout Margins

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

直向（Portrait）

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

横向（Landscape）

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

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

Home Indicator

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

外观

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

Edge Protection

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

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

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

Auto-Hide

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

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