苹果ui设计真的很棒吗（iPhoneX来了UI设计小伙们慌了）

苹果ui设计真的很棒吗（iPhoneX来了UI设计小伙们慌了）底部顶部所以说我们的设计页面内容不能超出安全区域（Safe Area）避免将触发交互行为的按钮放在屏幕的底部，人们会在屏幕底端使用手势进入主屏或切换应用。（底部横条是Home键）页面顶部和底部变化如下：

13号一早，大家都在讨论iphone 8P和8X的配置，价格以及发售时间，然后……也就在几分钟后，UI设计师小伙伴们才陆续反应过来，8X是全屏的，那么之前做的那些APP的IOS版本750*1334的设计稿是否能适配呢，好吧，不想加班……不想加班……不要让我改稿……

首先，让我们先来看看官方出的iPhone X适配分析

然而，事情并不是设计图加长这么简单，这次的8X可是有“刘海”的。

过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是Safe Area安全区域，而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用的是圆角设计，需要设计师对绘图区域做出调整。苹果给出的安全区域如下：

所以说我们的设计页面内容不能超出安全区域（Safe Area）

避免将触发交互行为的按钮放在屏幕的底部，人们会在屏幕底端使用手势进入主屏或切换应用。

（底部横条是Home键）页面顶部和底部变化如下：

顶部

底部

右上图可以看到为了回避“刘海”和圆角，iPhone X的顶部状态栏和底部菜单栏都进行了增高。

值得注意的是，iPhone X 底部操作栏目进行了细微的放大。除了常见的底部导航栏外，Safari底部操作栏也有放大

讲完竖屏，再说横屏。

和竖屏一样，横屏的内容也要放置在Safe Area中：

避免将触发交互行为的按钮放在屏幕的角落中。人们会在屏幕底端使用手势进入主屏或切换应用。这些系统的全局操作优先于App的操作。如果把功能放在角落里，用户操作起来也很费劲，尽量在用户手指可及区域内设计功能。

最后说下最核心的问题，Safe Area 范围有多大？

下午我比对了官网上所有与iPhone X相关的界面，可以确定，Safe Area区间如下：

顶部

页面设计标识

对于习惯用750x1334作图的设计师而言，iPhone X的到来并不会带来太大影响，iPhone X与iPhone 4.7’’之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异。

iPhone 4.7 与iPhone X 的Safe Area高度仅相差67 Point（134 px，@2x）

对于大多数采用瀑布流的页面来说，仅仅是屏幕高度上的变化，可以无视。

但对于如：新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。

由于 iPhone X的屏幕比例发生变化，对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响，需要对页面结构进行适当微调。

最后，如果应用程序需要隐藏状态栏，请重新考虑iPhone X上的布局。iPhone X的显示高度相对于iPhone 4.7''提供了更多的内容高度，状态栏和底部可以带来更多的空间。但需要就屏幕内容进行适当的调整。

如果不是特别需要沉浸式体验的界面，如视频、看图片，建议不要隐藏状态栏。

所以，UI设计师小伙们呢，要改图了，打起精神，迎接新的挑战吧。