咨询热线:

17661095540

联系QQ:

2863379292

官方微信:

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了

微信营销

导读:发布会谢幕了,媒体们也发完了新闻稿,朋友圈也热闹过了,接下来的工作该轮到设计师了。iphone X 11月才发货,但你也许已经接到设计任务了。在这之前,让我们先来看看这个iphoneX,对UI

发表日期:2019-03-21

文章编辑:兴田科技

浏览次数:10233

标签:

发布会谢幕了,媒体们也发完了新闻稿,朋友圈也热闹过了,接下来的工作该轮到设计师了。iphone X 11月才发货,但你也许已经接到设计任务了。在这之前,让我们先来看看这个iphoneX,对UI设计师的日常工作有什么影响。

新增的虚拟 Home 指示条——你不得不考虑的设计元素之一

iphone X 迈向了全面屏,移除了原本在手机底部的实体Home键,取而代之的是一条 134x 5pt 的虚拟Home指示条。

「底端上划」成为了全局性的系统操作,它可以让你返回桌面(原本的单击Home键),或者切换应用程序(原本双击Home 键)。我将这个虚拟Home指示条的特性总结为以下五点:

特性一:如影随形

苹果在新的开发文档中指出,这个 Home 指示条是「至关重要的系统元素」,除了在某种特殊条件下,这个指示条将永远伴随着你的 App,成为强制的设计元素出现在屏幕中。这就意味着,在你的 App 设计中你将不得不为它保留位置,并考虑好周围元素与它的兼容关系。

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

特性二:黑白条

这个虚拟 Home 指示条只有亮/暗两种模式,它会自动根据周围背景,选择将自己变身成白色或是黑色,从而尽可能地和周围背景有所区分。

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

特性三:全面屏

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

iOS 自带的通讯录是一个典型的带有底部导航栏的 App,对比 iphone 8 和 iphone X,你会发现在 iphone X 上,底部导航栏并不在真正的「底部」,它是悬浮在虚拟 Home 条上方的。对拥有底部导航栏的 App 而言,iphone X 这个全面屏的「下巴」并非可用区域,它并不真的「全面」。

但同时,Apple 的设计则例中也指出,如果 App 的底部是可滚动的内容(比如一个长列表视图),那么官方给出的建议是:放心大胆地霸占整个屏幕吧!发现文字和 Home 指示条重叠了?没关系!这是官方推荐的正确做法!事实上,用户依然可以点选下方的列表条目。这种情况下,全面屏才是真的「全面」了。

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

特性四:底部上划

美国著名的股票交易软件 Robinhood 就使用了类似的交互。在买入/卖出股票这样的关键操作里,它使用了「底部上划」。尽管不是严格意义上的「底端上划」,但虚拟 Home 指示条的介入无疑增加了误操的机率。在 iphone X 设计时,类似这样涉及到屏幕底部上下滑动的交互都需要更谨慎的思考、更严格的测试。

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

当然,iphone X 并没有强制禁止这种交互操作。它给开发者们留了一条路:「在万不得已必须要这样做的情况下」,开发者可以开启「边缘保护」功能(Edge protection)。开启后,次底端上划将只是唤醒 Home 指示条,再次上划才会激活原有功能。

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

特性五:自动隐身

在播放视频时,开发者可以开启虚拟 Home 条「自动隐藏」功能从而获得沉浸式体验。开启后,视频播放时虚拟 Home 条将自动消失;单击屏幕后就又会出现。

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

「安全区」——这词儿怎么听起来有点耳熟?

看着新的 iOS 设计规范文档,一个陌生又熟悉的词浮现在我的脑海中——出血(Bleed)!!!

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

在平面印刷设计中,为了顾及之后纸张裁切过程中可能出现的误差,设计师会在画布四周留出的一点边缘空间,这一圈额外的空间就叫做「出血」。同时,设计师一般也会设置一个「安全区」,确保设计稿中的重要内容都出现在安全区内。

对数字化时代下的 UI 设计师来说,我们本可以永远把「出血」和「安全区」的概念永远抛之脑后,因为屏幕不用裁切!全世界也许 99.99% 的手机屏都是规整的矩形,我们的安全区就是整块矩形屏(安卓系统底部的虚拟按键可以近似理解为屏幕外,设计时可以忽略)。然而 iphone X 这个妖蛾子的出现,又迫使我们重新找回那个久远的记忆……

让我们来看看苹果定义的 iphone X 设计「安全区」吧:

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

手机纵向持握状态下,安全区是从屏幕顶端往下 40 pt 开始计算的,要注意的是,它并不是和「齐刘海」完全齐平的,而是要再往下一点。「下巴」位置上,从下往上推 34 pt 以上的部分开始才被视为安全区。

纵向持握状态下的安全区设计还比较容易理解,但到了横向持握状态,安全区的概念就有点反直觉了:

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

横向状态下(假设是逆时针旋转 90 度),原本的「刘海」部分到了左侧,「出血」部分实际占用面积不变,而尽管虚拟 Home 条挪到了下方的长边上,屏幕右边虽然没有任何系统及元素,但苹果依然建议将其设置为与左侧「刘海」相对称的「出血」。也就是说,在横向状态下,你的安全区是个半岛,只有上方是连接到屏幕边缘的。这又是为什么呢?为什么苹果官方不建议设计师充分利用右边的空白面积呢?为什么非要左右对称地设置「出血」呢?尤其考虑到对于很多手机游戏来说,任何一点屏幕空间都是宝贵的,血条,金钱,操作键,小地图,大地图等等,太多元素逼着设计师充分利用每一寸空间了。

苹果官方给出的解释是,由于你无法预测用户在横向持握下会把「刘海」放在左边还是右边,如果安全区不是横向居中放置的,会造成界面中元素与手机边缘的相对位置不固定。他们认为,用户在使用手机时(尤其是玩游戏的时候)高度依赖手部的肌肉记忆,不对称设计尽管空间利用率更高,但与用户的肌肉记忆相背,由此导致的失败操作容易让用户沮丧。因此,苹果向广大设计师们高声疾呼:请把按键全都放到安全区里来吧!

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

尺寸大了,比例变了,这意味着……

对网页设计师来说,iPhone X 意味着什么?可怜的设计师又要焦虑了 咋建网站

在 iphone X 之前,尽管 iphone SE,7 和 7 plus 的屏幕尺寸大小不同,但都是 16:9 的屏幕。而 iphone X 差不多是个 13:6 的屏幕(812 x 375 pt)。屏幕的绝对尺寸也变大了,从 4.7 寸增大到 5.8 寸——这些对设计来说意味着什么呢?

上一篇:

暂无信息

上一篇:

暂无信息

相关推荐

更多新闻