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

前言

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

        爱的是，这一刘海像司马昭之心一样传达着「我在使用 iPhone X」这一个事实，正如 iPhone 7 的亮黑色一般。当然，包括 Face ID 以及 Animoji 等在内的新颖功能也会让人爱不释手。恨的原因，也很明显，这个刘海让屏幕不再方正圆润，就像一块膏药般永远的贴在你的屏幕上。看视频、看照片亦或其他，当你使用大部分应用时，它可能都会很显眼。

        这几天被iPhone X一顿刷屏，标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子，与设计图无关的内容通通不提，开始。

一、设计尺寸

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

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

二、交互设计

        过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是安全区域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 条，比如故意在屏幕顶部和底部使用黑色素材。