UX 中的悬浮操作

2017-06-08 10:47:00

悬浮操作按钮，英文Floating Action Button，简称FAB，它是一个在安卓app中常用的操作。大概形式是一个圆形的按钮在UI上层浮动，这是一个让设计师们展示产品重要功能的地方。悬浮按钮是简单易用的UI元素，可能正是因为这样吧，使用的时候不会太纠结，以至于有时候会错误地运用在设计中。

这篇文章中有几个点：

什么时候用？
怎么用？
悬浮按钮与动画要怎么结合，才能提升UX？

悬浮按钮，什么时候用呢？

1.象征性的动作

悬浮按钮中包含了最高频使用的动作。它们代表了你app强有力的特点。理想地说，悬浮按钮应该像下面例子一样，代表你整个app最核心的功能。

音乐播放按钮为主导的悬浮按钮

2.作为导航

悬浮按钮可以作为自然引导用户的线索。Google的研究表明，当面对着不太熟悉的界面，很多用户甚至要依赖悬浮按钮去导航。因此，悬浮按钮作为重点的路标，是比较有用的。

引导发帖与评论的悬浮按钮

3.但，不是所有的界面都需要悬浮按钮

悬浮按钮是多彩的，悬升的，打破网格的存在。静谧天空中的一个热气球的感觉。所以很难去忽略它，但那无可厚非，因为本来就是为了突出，才设计它的呀。但不是所有的界面度需要这个悬浮按钮，理由很简单，并不是每个界面都有重要的操作。

不要不计成本地用悬浮按钮，它只能是用于重要的操作。

一个很好的例子是安卓的Google Photos app。这个app以gallery（画廊）形式打开，其中有一个用作搜索的悬浮按钮。那么问题来了：

1）搜索对于大多数用户来说，都是额外的操作。主要的用户任务是浏览照片。所以，没有必要去使用悬浮按钮。

2）悬浮按钮的使用会干扰用户，并且分散用户在照片上的注意力。

Google Photos app的悬浮按钮

小提示：找出界面中的最主要操作，不是表面上看那么简单。为了去简化任务，理解你是否需要悬浮按钮，你需要使用一个简单的五分钟原则：如果你已经纠结了五分钟，去考虑你最主要的操作是什么，那么很明显，这么悬浮按钮在这个界面上不是很必要。

最佳实践

1.避免不清晰的导航

不清晰的导航其实还有一个英语上的词叫做“Mystery meat navigation”，直译就是神秘的肉导航，最早是一个较多Vincent Flanders的人创造的，他也是“Web Pages That Suck”这个著名网站的创始人。什么是“神秘的肉”呢？我查了一下，其实来源于美国学校餐厅里的肉，因为有些已经被加工，所以它们原本的样子已经不太清晰了，所以看到这块肉的时候，也不太知道这是一块肉，以至于不太想吃。因此神秘的肉导航，就是指一些不太清晰的导航。

悬浮按钮是用按钮的形式展现的，因此一个问题就是这些按钮很难理解。NNgroup也指出，很少icon是大家都公认的。例如你能猜到下图的icon是什么意思么？

含义模糊的悬浮按钮

当然直到你点之前，你都不会知道按钮具体代表什么意思。并且如果一个用户要去“猜”的话，你的按钮就变成一块“神秘的肉”了。有人可能说，用来认识这些功能的时间是很短的，就点一下就好，因此风险很小。是的，只是点一下而已，不太花时间，但，这里有一个认知负担的问题：

用户需要去记住它包含了什么意思。

记住一个悬浮按钮，还好，但如果所有的app都有这个悬浮按钮，那你就要去记住所有app不同悬浮按钮的不同含义。

我们可以用图标来代表按钮，可是使用的时候必须要跟整个场景匹配，并且需要确保用户能够理解。整体的上下文场景，可以帮助用户区理解按钮的操作。例如，如果你有个做笔记的app，那么很自然，最主要的功能就是去写，去看笔记。那么一个笔图标的悬浮按钮就很容易理解了。

2.一个界面只使用一个悬浮按钮

因为悬浮按钮是那么地打眼，所以要么只用一个，要么干脆不用。

多个悬浮按钮的假设情况

3.只代表积极的动作

因为悬浮按钮有特殊的风格，所以一般也用它来突出某些特点。那么这些特点最好也是带有积极含义的特点。例如说创建，分享，探索等等。悬浮按钮不应该是破坏性的，例如删除，例如存档。它们不应该是模糊的，或者带有警告性质的，或者一些比较限制的行为，例如复制黏贴文字，也不应该是一些本应在工具栏的操作，例如改变音量。