UX 中的悬浮操作

悬浮操作按钮，英文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.只代表积极的动作

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

积极操作的例子

悬浮按钮与动效

悬浮按钮是灵活的。可以延伸，变形和反应。

1.延伸成一系列动作

在一些情况下，按钮可以延伸出一系列的动作，如下图Evernote的例子。悬浮按钮可以用一系列更加确切的动作代表它自己，并且你可以将它设计得与上下文更加关联。但记住：

1）这些动作必须与主要操作统一，并且与其他的操作相关联。不要将它们当做是工具栏的操作，因为工具栏的操作通常都是独立的。

2）作为基本的规则，3到6个延展的按钮比较好（包括最初的那个按钮）。

可延展的悬浮按钮

2.悬浮按钮可以变形成新的界面

悬浮按钮不仅仅是一个圆形按钮，它有一些变形的属性，可以帮助页面之间更良好地过渡。悬浮按钮可以转换为app中不同的视图。

悬浮按钮可以提升屏幕之间的过渡效果。

当悬浮按钮变形，开始与结束的两个屏幕逻辑严密地融合在一起。例如，下图的动画起到了方向引导的作用，并且帮助用户去理解层次的变化，去理解变化的触发点，这样下次操作会更加顺畅。

切换页面的悬浮按钮

3.悬浮按钮可以在滑动时隐藏

悬浮按钮如果妨碍到了浏览，则可以隐藏。例如下方的例子，悬浮按钮在滑动的时候被隐藏，这样就不会挡到阅读的视线。

滑动时候消失的悬浮按钮

Medium app也很好地用了这个技术。“喜欢”按钮在滑动的时候是被隐藏的，当到达文章的尾部，又出现了，出现的时机比较适宜，是用户阅读完文章，并想要点赞的时候。

小结

如果你要在app中使用悬浮按钮的话，必须要小心考虑用户的可能操作，将部分重要的操作转化为悬浮按钮的操作。如果使用正确，悬浮按钮对于用户来说会是一种很新奇有效的模式。

作者 Linfolio

关键字：设计, UX, 悬浮

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！