UI设计师需要知道的iPhone X细节

设计新知 · 公众号 · · 2017-09-15 09:48

正文

请到「今天看啥」查看全文

包含Home Indicator，Toolbar高度由44pt增长为83pt。

一般设计原则

如果你的UI“顶部”有导航栏或其他类似的条状元件，那么一般来说，在设计稿将导航栏的背景色往往延伸44pt，“垫在状态栏后方”作为背景色即可（见下图）。

如果你的UI“底部”有Tab Bar，工具栏或其他类似的条状元件，在设计稿将背景色往往延伸34pt，“垫在首页指示器后方”作为背景色即即可。

若是使用系统原生（Native）的导航栏，标签栏或工具栏，以上的行为系统（UIKit）都将自动替你完成，设计师不需要特别向开发者说明。

边距

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

安全区域与布局边距

一般在做UI设计时，背景色或较不重要的内容可完整地延伸至萤幕边缘;主要的内容呈现区域（例如表格视图）会往内缩（indent）一层，称为“ 安全区 ”;而通常文字或是按钮等更加关键的物件，考虑到美观及操作性，会再内缩一层，称之为“ 布局边距 ”。这边提到的关键字皆是iOS开发的专有名词，可用来与开发者沟通。