主页 > 头脑圈新 >UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通 >

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

来源:sunbet(官网)中文手机版     2020-06-09 04:52:13     阅读次数:879

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

台湾时间 9 月 12 日凌晨,苹果在贾伯斯剧院发表了 iPhone X,主打满版萤幕的 iPhone X 取消了 Touch ID,代之以 Face ID。

为了实现更为安全的脸部辨识,iPhone X 正面的满版萤幕上方有一条浏海,上面整合了红外线镜头、近距离感应器、泛光感应元件、环境光感应器、左 / 上扬声器、麦克风、前镜头和一个名为点状投影器的元件。它会投影 30000 多个肉眼不可见的光点在你脸上,对你的脸绘製一幅三维的深度「脸谱图」,然后和系统记录的脸谱图进行比对。

对于开发这来说,这些都不重要!!重要的是:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通
王者荣耀游戏画面合成图

这个萤幕上的浏海究竟要怎幺支援呀!

哦,不过这篇文章并不是为了吐槽这个点的。毕竟再怎幺吐槽,再过一个多月 iPhone X 就要出货了,不管怎样最终还是要面对现实。

经过了一段时间的沈澱,全世界的开发者们似乎已经找到了几种处理 iPhone X 浏海满版萤幕的方法。

首先是纵向的问题:

纵向主要是顶部的导航栏、状态栏和底部 TabBar 的问题。

iPhone X 开发尺寸与 iPhone 8 的宽度一致,在垂直方向上多了 145 pt,这就意味着多出 20% 的垂直空间, APP 可以展示更多的内容。

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

但是多出来的 145 pt 并不是方方正正的矩形,而是被浏海切割成了异形区域。

于是就有人尝试,既然苹果没有把浏海做齐,那透过软体把浏海两侧的空白填上不就可以了嘛。

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

这样是不是就顺眼多了?「Ears」的名称也很贴切吧。

然而苹果的「Human Interface Guidelines」明确禁止了这种做法。

苹果规定:注意内容不要被裁切,建议内容为居中对称已不被圆角或感应器等遮挡,也建议使用系统提供的的元素以及自动布局来构建页面获得更好的支援效果。注意 StatusBar 的高度,iPhone X 的状态栏高度会更高,如果有开发者对 NavgationBar 的位置是透过固定值进行位置的定位,建议升级 App。

而且如果 App 是隐藏 StatusBar 的,苹果建议开发者重新考虑,iPhone X 为用户在垂直空间上提供了更多展示空间,且状态栏中也包含了用户需要知道的资讯,除非能透过隐藏状态栏带给用户额外的价值,否则苹果建议将状态栏还给用户。

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

苹果给出了 iPhone X 设计布局的安全区意见是这样的:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

也就是说,开发者还要保证设计布局能够填充整个萤幕,而核心内容又不能被装置的大圆角、感应器 、以及底部的 Home Indicator 遮挡。

如果没有支援 iPhone X,就会变成这样:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通
图片来源:奇点开发者 @图拉鼎

另一款成功设计的 App 效果图是这样的:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通
来源:四叶新媒体联合创始人微博 @Saic

当然,比起纵向的问题,横向的问题更大。

首先是苹果 iOS 内建的 Safari 在横萤幕状态下网页两侧会填充一定的空白,就变成了这样:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

与对应,苹果给出的横萤幕状态下的安全区域是这样的:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

好吧,既然要载入空白区域,那捲动的时候捲轴该怎幺「优雅」的穿过浏海?
苹果的 Safari 捲轴在横萤幕状态下穿过浏海的时候难道就变成贪食蛇了?

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

还有这样的:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通
当然,这些都是苹果不允许的。

还有开发者把弹出功能键放在了浏海那一侧,由于也是黑色的背景,看起来更有一体感了:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

而横萤幕打游戏的时候,操作界面被浏海遮挡。所以操作功能键需要放在苹果建议的安全区域,其他的背景图用来填充空白。

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

也就是说,按照苹果的开发指南,无论横萤幕还是直立萤幕,要支援 iPhone X 这样有浏海的萤幕,除了审美感需要提高,App 重要的功能键、TabBar 等需要放在苹果建议的安全区域内,其他的地方用 App 背景页或者状态栏填充。

而如果想把男女朋友的照片设为锁定萤幕桌布的话,需要找一张人物稍微「居中」或者「居下」的照片,否则就会变成了这样:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通

还有些需要我们的审美去适应的情况,尤其是全萤幕模式下浏览照片、看影片以及 Safari 阅读模式。

比如这样的:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通
图片:微博 @Jonny

iPhone X 浏海里的 Face ID 虽然很强大,但是这样的异形萤幕真是难为开发者和使用者了。

哦,对了关于开头那个王者荣耀的吐槽,根据中国游戏社群中关村在线,腾讯官方的应对方法是这样的:

UI大难题!面对碍眼的iPhoneX浏海,各地开发者显神通
上一篇:
下一篇:

相关评论

sunbet(官网)中文手机版|当下网站|视点潮流|网站地图 申博官网备用网址_MG线上官方 申博官网备用网址_皇冠客户端