(转载)iPhoneX适配之UI设计、交互设计

  1. 云栖社区>
  2. 博客>
  3. 正文

(转载)iPhoneX适配之UI设计、交互设计

小曼study 2017-10-23 10:13:00 浏览489

原文地址:http://blog.csdn.net/u011363981/article/details/78011757#reply

前言
苹果近日发布了全新的iPhone X全面屏手机,这也是首款采用OLED屏幕的iPhone手机,它的正面设计被更多人吐槽,之前被戏称为“刘海”的凹槽现在有了更多其他名称,“眉毛”、“头帘”等等。对于用户而言,iPhone X 的刘海可能是让人又爱又恨的设计。
爱的是,这一刘海像司马昭之心一样传达着「我在使用 iPhone X」这一个事实,正如 iPhone 7 的亮黑色一般。当然,包括 Face ID 以及 Animoji 等在内的新颖功能也会让人爱不释手。恨的原因,也很明显,这个刘海让屏幕不再方正圆润,就像一块膏药般永远的贴在你的屏幕上。看视频、看照片亦或其他,当你使用大部分应用时,它可能都会很显眼。
这几天被iPhone X一顿刷屏,标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子,与设计图无关的内容通通不提,开始。
一、设计尺寸

img_5046278e28eb697707f7107000823b16.png
img_cb704d2680c1c01f8ac4e76394fa7654.jpe

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

然而,事情并不是设计图加长这么简单。
img_6fd5a45c1497d546b18339f1b62a7f5a.png

二、交互设计
过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域Safe Area,而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计,对于开发者和设计师来说,这个刘海带给他们的是更多的麻烦。Apple 更新了 Human Interface Guidelines来为开发者提供适配 iPhone X 指南,从中可以看出,Apple 希望开发者将这个刘海毫无遮掩地呈现在 iPhone X 的「脑袋上」。

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

img_670f86d05914408cc5183cb916609f38.png

在使用图片时,请注意长宽比差异。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上运行良好需要一点修改。
苹果给出的安全区域如下
img_49d81b789bbad68843444b10ef7e9191.png

页面内容不能超出安全区域(Safe Area)
img_b87a504e15a3e1814f2e5022af91f904.png

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

iPhone X 状态栏高度更高,在电话和定位等后台任务时,高度不会变化(就是打电话和导航时,原先顶部增加的彩色带,现在变成时间信息底部的彩色气泡,见下图)
img_353b6f509b9950a665851319ae6b5356.png

img_2200ad8afd8e7d7dda185cb6f1477582.png

img_ee71be9dfdd34c9d92ac9849430d75c6.png
image.png

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

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

底部虚拟Home指示条
作为去除实体Home按键后的衍生物,底部将出现一个虚拟的Home指示条,用以实现常用的交互功能,锁屏状态下向上滑动解锁,应用内向上滑动回到主屏,向上滑动并停止片刻进入多任务切换窗口,虚拟Home指示条大多数情况下将会存在于屏幕的下方,而这个虚拟Home指示条只有黑、白两种颜色。 在底部有导航栏的app中,将会形成屏幕内的双下巴,部分应用如果具备从底部上滑的操作,为了和底部上滑回到主屏相区分,苹果提供了一个边缘保护的方案,第一次上滑是唤醒Home指示条,第二次才会激活原功能。而对于最受关注的全屏状态,虚拟Home指示条则会自动隐藏,不过尴尬的是,如果这时候是横屏状态,虚拟Home指示条也会跟随转动,而安卓虚拟按键则会始终存在于屏幕下方。全屏状态下点击屏幕后,虚拟Home指示条才会显示。
最后说下最核心的问题,Safe Area 范围有多大?比对了官网上所有与iPhone X相关的界面,可以确定,Safe Area区间如下:

img_9e0a4209d6b3629038773515486c2656.png
image.png
    对于习惯用750x1334作图的设计师而言,iPhone X的到来并不会带来太大影响,iPhone X与iPhone 4.7’’之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异
img_04d68ed4716fef537e84bea39193525c.png
image.png
img_47a1f375d720e84a868207564eef9452.png
image.png
img_ee8391d9418abd4b3999177342743a5c.png
image.png
img_3f95fa470cbcd249eb3070dd1340f52d.png
image.png
    iPhone 4.7 与iPhone X 的Safe Area高度仅相差67 Point(134 px,@2x)

对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。但对于如:新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。


img_3f4bcf6a1915140924a13328e46a4924.png
image.png
img_a17c5d3a4530e200b31d447376e2855c.png
image.png

由于 iPhone X的屏幕比例发生变化,对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响,需要对页面结构进行适当微调。如果应用程序需要隐藏状态栏,请重新考虑iPhone X上的布局。iPhone X的显示高度相对于iPhone 4.7''提供了更多的内容高度,状态栏和底部可以带来更多的空间。但需要就屏幕内容进行适当的调整。


img_62f958d16423b2a0d959db5fbc71b16c.png
image.png
img_6657f8b6d6962ac8a35c6cbc915fce36.png
image.png

三、图标设计
底部导航栏图标,过去的做法是当前激活模块的图标为剪影风格,其他图标为线性风格。设计师需要做两套图标。分别是一套剪影,一套线性。而现在统一为剪影,而当前激活模块的图标使用平铺色代表激活。

img_478b08bc38bb723a307c6ecf0debe4b9.png
image.png

四、系统色系增强
iPhone X上的显示器支持P3色彩空间,可以产生比sRGB更丰富,更饱和的颜色。使照片和视频的颜色更加逼真,增强视觉体验!


img_df20877648d5b4a7742013dee2ae79ee.png
image.png

免责声明
本文以翻译designing for iPhone X为主,借鉴参考文献并结和自己的工作经验整理而来,仅供各位设计师工作参考,非商业用途,对文中有争议或侵权行为,请及时联系我调整。谢谢你们的阅读!

参考文档:
1、designing for iPhone X
2、三分钟弄懂iPhoneX设计尺寸和适配
3、iPhone X的全面屏 让设计师操碎了心
4、iPhoneX设计规范

阅读拓展:
1、设计师如何设计iPhoneX视觉稿