iPhoneX适配之UI设计、交互设计

前言

       苹果发布了全新的iPhone X全面屏手机，这也是首款采用OLED屏幕的iPhone手机，它的正面设计被更多人吐槽，以前被戏称为“刘海”的凹槽如今有了更多其余名称，“眉毛”、“头帘”等等。对于用户而言，iPhone X 的刘海多是让人又爱又恨的设计。

1、设计尺寸

发布的iPhone 8属于常规升级，屏幕与以往的iPhone六、6S、7系列相同。在发布的新机中，只有iPhone X的分辨率发生了变化，但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面，新版的iPhone X与过去咱们熟知的iPhone 4.7''、iPhone 5.5'' 放大模式宽度相同。通俗的说，iPhone X可看作是iPhone 4.7'' 的加长版

然而，事情并非设计图加长这么简单。

2、交互设计

过去，咱们拿到的手机是方方正正的矩形，因此整个屏幕均可以看作是安全区域Safe Area，而现在因为iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计，对于开发者和设计师来讲，这个刘海带给他们的是更多的麻烦。Apple 更新了 Human Interface Guidelines来为开发者提供适配 iPhone X 指南，从中能够看出，Apple 但愿开发者将这个刘海毫无遮掩地呈如今 iPhone X 的「脑壳上」。

指南一：当为 iPhone X 适配应用时，请确保布局填充整个屏幕，同时不被设备的圆角、传感器和下方的 Home 条所遮挡。

在使用图片时，请注意长宽比差别。iPhone X具备不一样于其它iPhone的长宽比，所以，全屏其它iPhone图片在iPhone X上全屏显示时会出现裁剪。一样，全屏iPhone X图片在其它iPhone也会出现裁剪，因此请注意两种设备适配。

指南二：不要尝试去隐藏设备的圆角、刘海或 Home 条，好比故意在屏幕顶部和底部使用黑色素材。

参考iOS 原生应用可看出 Apple 的意思：刘海上下不要听任何内容。

大部分使用系统提供的标准UI元素（如导航栏）的APP会自动适应iPhone X！Navigation bar、tab bar和tool bar会扩展到屏幕顶部和底部弧形区域。若是app使用自定义控件或非标准布局，要在iPhone X上运行良好须要一点修改。

苹果给出的安全区域以下

页面内容不能超出安全区域（Safe Area）

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

iPhone X 状态栏高度更高，在电话和定位等后台任务时，高度不会变化（就是打电话和导航时，原先顶部增长的彩色带，如今变成时间信息底部的彩色气泡，见下图）

值得注意的是，iPhone X 底部操做栏目进行了细微的放大。除了常见的底部导航栏外，Safari底部操做栏也有放大讲完竖屏，再说横屏。和竖屏同样，横屏的内容也要放置在Safe Area中

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

底部虚拟Home指示条

做为去除实体Home按键后的衍生物，底部将出现一个虚拟的Home指示条，用以实现经常使用的交互功能，锁屏状态下向上滑动解锁，应用内向上滑动回到主屏，向上滑动并中止片刻进入多任务切换窗口，虚拟Home指示条大多数状况下将会存在于屏幕的下方，而这个虚拟Home指示条只有黑、白两种颜色。在底部有导航栏的app中，将会造成屏幕内的双下巴，部分应用若是具有从底部上滑的操做，为了和底部上滑回到主屏相区分，苹果提供了一个边缘保护的方案，第一次上滑是唤醒Home指示条，第二次才会激活原功能。而对于最受关注的全屏状态，虚拟Home指示条则会自动隐藏，不过尴尬的是，若是这时候是横屏状态，虚拟Home指示条也会跟随转动，而安卓虚拟按键则会始终存在于屏幕下方。全屏状态下点击屏幕后，虚拟Home指示条才会显示。

最后说下最核心的问题，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''提供了更多的内容高度，状态栏和底部能够带来更多的空间。但须要就屏幕内容进行适当的调整。

3、图标设计

底部导航栏图标，过去的作法是当前激活模块的图标为剪影风格，其余图标为线性风格。设计师须要作两套图标。分别是一套剪影，一套线性。而如今统一为剪影，而当前激活模块的图标使用平铺色表明激活。

4、系统色系加强

iPhone X上的显示器支持P3色彩空间，能够产生比sRGB更丰富，更饱和的颜色。使照片和视频的颜色更加逼真，加强视觉体验！

免责声明

本文以翻译《designingforiPhoneX》为主，借鉴参考文献并结和本身的工做经验整理而来，仅供各位设计师工做参考，非商业用途，对文中有争议或侵权行为，请及时联系我调整。谢谢大家的阅读！

参考文档：

一、《designingforiPhoneX》

二、三分钟弄懂iPhoneX设计尺寸和适配

三、iPhone X的全面屏 让设计师操碎了心

四、iPhoneX设计规范

阅读拓展：

一、设计师如何设计iPhoneX视觉稿