Material Design: 为什么浮动操作按钮是一个坏的设计

泡在网上的日子 / 文 发表于2015-06-15 06:09 第次阅读 Material Design,浮动操作按钮

原文:Material Design: Why the Floating Action Button is bad UX design 

Material Design 是谷歌一年以前介绍的一种设计语言,它代表了该公司试图建立跨平台用户体验的雄心壮志。它的特点是鲜明的色彩,利用阴影营造层的印象,以及用平滑的动画效果为安卓平台带来良好的用户体验。

但是Material Design里面有个东西自去年引入以来就把我弄糊涂了:那就是浮动操作按钮。

FAB是一个浮动于UI之上的圆形按钮,用于谷歌所描述的“promoted action”。代表一个用户在特定屏幕上最常用操作。

因为醒目的设计,FAB很难被忽略,它脱颖而出 - 这也是问题所在。

虽然在理论上FAB似乎会带来好的用户体验,但是实际上,FAB的过度采用可能会对整个用户体验有害,下面是一些原因。


blob.png

它们夺去了我们的沉浸式体验

FAB过于显眼了 - 它们差不多位于所有UI元素之上。添加一个FAB会减弱沉浸式的体验,特别对那些本来就旨在提供沉浸式体验的app有很大影响。


谷歌的最新Photos app 就是一个例子。


blob.png


Photos app 打开是一个带有浮动搜索按钮的gallery视图,但问题是,当我打开一个Photos app ,我只想看我的图片而已。

浮动搜索按钮把用户从沉浸式的图片浏览中打扰出来,但这正是这个app的首要目的。诚然,图片智能搜索是谷歌Photos app的独有功能,但是这就意味着它应该放在首位吗(我不这样认为)?

具有讽刺一位的是,谷歌也是赞同我的观点的。在它关于Material Design FAB的页面上,谷歌解释了“不是每一个屏幕都需要浮动操作按钮”,接着还继续说到“基本的操作时点击gallery里面的图片,因此不需要按钮”。哎哟。

它们挡住别人了

同样是这个问题,我们从另一面来阐述,这个方面比上面的还要严重:FAB 挡住其它元素了。因为FAB在屏幕上的特殊地位,它“成功”的挡住了其它内容。

不过先打住,FAB只是一个很小的圆形按钮而已,能挡住多少内容?

如果你看看Photos app的截图,你会发现搜索按钮挡住了一张缩略图的50% - 完全可以大到遮住一张脸了。如果你想看到最后一行的4张缩略图饿话,总是需要额外的滚动一段距离。不过这还不是最糟糕的。

blob.png

用户dumazy 在Graphic Design Stack Exchange上发表了一篇关于这个问题的文章,它遇到了FAB 挡住了“喜欢”按钮与时间的情况。这衍生出一个所有带有列表的app都会面临的问题,尤其是在显示到列表最后一个item的时候,这个时候列表无法滚动了,无论如何都会有item的操作按钮被挡住。


Promoted actions 也许并没有那么常用

在进行交互设计的时候,要记住80/20原则,即80%的情况下,用户只会使用20%的功能。换句话说,绝大多数的工作都应该花在设计用户最常用的功能上面。

其实理论上,FAB就是要做这件事,但是如果“promoted action”其实并不怎么被用户使用呢?

以谷歌的Gmail应用为例。


blob.png

 Gmail app上的FAB是撰写邮件按钮,暗示用户可能做的主要操作时创建一封新邮件。

但事实上呢?

大量的研究表明,50%的邮件时在移动设备上阅读的,但是鲜有证据表明在撰写邮件方面是相同的情况。结合我们的实际经验就知道,绝大多数用户都是使用邮件应用的查阅功能。

也许少量的人会在移动设备上回复邮件,但是那是发生在他们打开了邮件之后(注意着意味着他们绕过了FAB)。这种用户行为可能是因为不完美的输入机制导致的,表明用户的基本行为时阅读,而不是创建。

那么“撰写邮件”的FAB是干什么的呢?只在极少数情况下,它让用户感到方便,但是其他时间都是徒占空间而已。

我们需要FAB吗? 错了 — 我们想要FAB吗?

显然,不是所有使用了FAB的应用都降低了用户体验。有许多使用了FAB却合情合理的出色例子,它们提高了那些app的用户体验。

blob.png

谷歌地图就是正确使用FAB的案例。用户在地图上所做的主要操作就是获得方向,所以使用FAB来做这件事情就完全合理。

但是地图是一个非常特殊的案例,用户在地图上的主要关注点集中在屏幕的中心。绝大多数应用中,如果带有列表或者网格视图,都意味着用户会与屏幕上任何地方的内容发生交互,包括FAB常被放置的地方。

同样应该考虑到上面只讲了故事的一方面:在实际使用中,即便用户滚动,FAB也总是固定在某处。但是按照谷歌在Material Design中强调的,手势设计和界面设计同样重要。上面的截图没能反映出在内容滚动场景下FAB所表现出来的缺乏手势响应的缺点。

那么,当FAB的优秀例子如此稀少的时候,我不禁要问,我们需要FAB吗?

当我们看待FAB的缺点时,可以把它简化为这样的认识:用户在app上不仅会执行操作,还会查看内容。

Material Design中FAB的设计是基于用户经常使用某个操作的前提,因此需要一个高优先级的按钮。

但是在很多app中,跟Photos app一样,用户的焦点在消费内容:在Photos app中,用户想查看照片,在gmail中用户想阅读邮件,在facebook app中,用户想阅读来自朋友的留言。

这样一来,FAB则是牺牲内容换取操作的设计哲学。我们需要问自己,这种交换是否值得?准确的说,这是我们想要的交换吗?

当FAB大多数时候都是降低用户体验的时候,当难以评估出app中最常用操作的时候,当需要额外采用一些方法的时候(比如滚动消失,或者元素位置不定的列表),我的答案是坚定的NO。

谷歌的Material Design是非常好的设计语言规则的统一,但是FAB,则不仅仅是那个fab。

收藏 赞 (2) 踩 (0)
上一篇:Design Support Library (II): 浮动操作按钮及注意事项
原文 Design Support Library (II): Floating Action Button 如果你读了我的第一篇文章 Navigation View ,你可能会想Android Design support library 还有哪些其它的东西。今天我们来谈谈浮动操作按钮(Floating ActionButton)。 介绍 浮动操作按钮(Float
下一篇:Android应用Activity、Dialog、PopWindow、Toast窗口添加机制及源码分析
转自 工匠若水 的博客 http://blog.csdn.net/yanbober/article/details/46361191 1 背景 之所以写这一篇博客的原因是因为之前有写过一篇 《Android应用setContentView与LayoutInflater加载解析机制源码分析》 ,然后有人在文章下面评论和微博私信中问我关于A