iPhone X移动端UI设计指南

四.iPhone X的安全区域

我们先看下iPhone 7的安全区域。安全区域会根据状态栏，标题栏，标签栏是否出现，而有所不同。具体看下图

接下来，我们再看下具体看下iPhone X的安全区域，下图中示意了竖屏和横屏状态下，各自的最大安全区域。

安全区域可以这么理解，设计师在设计界面时，要严格把定制化内容放置在安全区域以内。举一个横屏的例子，下图中绿色区域是设计师可定制的业务内容区域，红色区域不允许有业务内容。安全区域可以防止内容覆盖状态栏，导航栏，工具栏和标签栏。

下图中蓝色区域属于安全区域中的间距。无论是i7还是iX,都有相应的间距。

最后，可以从下面这个图，对比下，i7和iX横屏时，表现方式的差别