- 设计理论 -

设计更好的悬浮按钮

作者:w.t.y 原文出处:海盐社
2018-08-21

19.jpeg

按钮是设计的过程中,经常使用的一种控件。最近来在研读谷歌Material Design规范时,其中有单独一节阐述了悬浮按钮。于是产生研究悬浮按钮的想法。结合看到一篇外文,整理后推荐给各位。

悬浮按钮是谷歌Material Design语言的一个常用控件。大多出现在安卓App中。其形状像浮在界面上方的带阴影圆形图标,是安卓的UI交互中关键元素之一。

下面从使用场景、注意事项、动效相关三方面来分析一下悬浮按钮的使用规则和内容等。

01 使用场景

1. 执行关键的操作

悬浮按钮通常用来承载关联度最高、最重要、最常用的操作。在App中,应该用来承载界面的最关键操作,核心功能。

WechatIMG2.jpeg

如图,这是一个音乐播放器应用,播放音乐是其核心关键功能,在屏幕上的暂停/播放交互功能是通过使用悬浮按钮来触发的。

2. 作为引导工具

悬浮按钮还可为用户提供下一步的提示和引导作用。据Google 研究表明,当用户面对一个陌生的界面时,更倾向点击悬浮按钮来了解界面功能。因此,悬浮按钮在功能上有类似路标的属性。

640.gif

如图,地图类界面里,醒目的定位和导航悬浮按钮引导用户进行操作。

02 注意事项

1. 避免指代不明的悬浮按钮

悬浮按钮因其是一个典型的纯图标按钮,不包含文字标签来解释说明其功能。而用户对常用的普遍识别性高的图标始终是少数,如果遇到指代不明的图标,会影响用户的判断。

WechatIMG3.jpeg

如上图悬浮按钮,或许能猜出它是与分享相关。但它的分享功能具体指向什么地方,有什么效果,不得而知。用户只有通过点击它,才能知道这个按钮的功能,这就产生了一种认知负担。用户必须记忆住这个悬浮按钮的功能才行。如果把所有的类似的App的图标和对应的APP都记住,这个工作量可不小。

所以在选择图标时一定要选择用户容易识别和指向明确的图标。如果实在布方便情愿不要使用悬浮按钮。

WechatIMG4.jpeg

比如上图,左图笔记类应用,主要的功能是记录、查看笔记。此时,悬浮按钮上的笔的图标,所表达的含义就很清晰了。右图相机类应用,相机的图标明显表示了拍照功能,一目了然。

2.一屏只使用一个悬浮按钮

悬浮按钮在界面中是最突出和抢占视觉焦点,所以要么只使用一个悬浮按钮,要么干脆别用。

WechatIMG5.jpeg

如图,一个界面上过多的悬浮按钮则会失去突出重点的目的。

3.悬浮按钮只承载积极的正向操作

悬浮按钮是关键性的操作,它也应是积极正向的交互,比如创建、点赞、分享、搜索等,而不应该是非积极或破坏性的操作,比如删除、归档、后退等。

WechatIMG6.jpeg

这一点,在Material Design的相关设计规范中对悬浮按钮所承载交互和图标有指引说明。

需要注意的是,悬浮按钮也不应是不完整交互,比如剪切和粘贴是一组组合交互,它们应组合出现在例如菜单栏当中,而不是在悬浮按钮中单个出现。

4.减少不必要悬浮按钮

悬浮按钮在界面里浮于最上方,色彩显眼,高亮,吸引人视觉焦点。所以一定角度上,增加一个悬浮按钮,会带来一些弊端。

WechatIMG7.jpeg

比如 Google Photos ,当打开图库时,首先看到的是搜索悬浮按钮。对大多数的用户而言,Photos里,搜索是非主要交互,首要的操作是浏览图片,所以此处并不需要搜索悬浮按钮。此外,悬浮按钮会分散用户查看图片的注意力。

WechatIMG8.jpeg

再如Gmail邮箱,这里悬浮按钮的视觉区域挡住了邮件内容、时间、收藏按钮,对操作造成不便。

所以如果不是核心关键操作,尽可能减少不必要的悬浮按钮。

03 动效相关

悬浮按钮本身非常灵活,它不止是单一的按钮,也可以通过扩展、变形等衍生出一些新的内容。

1. 扩展为一系列操作

在某些情况下,点击悬浮按钮可以扩展出子操作。通过展开,将不同功能组合收纳其中,以替代原来的单一交互,这样可提供更多操作选项。

WechatIMG9.jpeg

如斗鱼TV,发布悬浮按钮里提供给用户多样化UGC选择按钮,功能更丰富方便。

需要注意的是这些收纳子级的按钮必须与开始的总悬浮按钮是关联一体的;且根据悬浮按钮快速高效的原则,扩展按钮数量3~6为宜。

2.变形为新的界面

悬浮按钮可以不只为按钮形态,借助动效它可以延伸到整个屏幕,变为独立的界面。

640 (1).gif

640 (2).gif

如上图动效,悬浮按钮都阐述了前后界面的逻辑关系,作为界面转场的中间枢纽。

3.滚动时隐藏悬浮按钮

为便于用户在滚动的过程中阅读界面内容,悬浮按钮应在滚动界面的时候隐藏起来,静止后予以显示。

640 (3).gif

如Medium 安卓客户端当中,就是这么使用悬浮按钮的,当界面滚动到文章底部的时候,悬浮按钮会再次出现。

小结

全文浅析了悬浮按钮的相关设计内容。我们在设计时有几个要点:

a.使用场景:关键性操作;重要功能引导性作用。

b.注意事项:不使用指代不明图标;一个页面只显示一个悬浮按钮;承载积极正向操作;减少过多不必要使用。

c.动效相关:可以拓展成3~6个子级功能操作;可以交互转场为新界面;滚动时需隐藏悬浮按钮。

原文链接:https://uxplanet.org/floating-action-button-in-ux-design-7dd06e49144e

20.jpeg

海盐社.jpeg

喜欢就分享
精选评论