浮动操作按钮(FAB)是浮动在用户界面上方的带圆圈的图标。它的形状,位置和颜色确保它在UI的其余部分中脱颖而出。FAB在2014年通过Google的Material Design原则发布而得到普及。自该版本发布以来,FAB用户界面元素已在Web和移动设计中被广泛采用。
尽管FAB可以看作是很小的,看似微不足道的UI组件,但其效果可能很重要。假设该模式已正确使用,则意味着它是立即可识别和可访问的。

Android应用中的浮动操作按钮
1.代表标志性行动
理想情况下,FAB应突出显示最相关或最常用的操作,应将其用于应用程序的主要特征。如果要在应用程序中使用FAB,则必须仔细考虑应用程序的设计,并且必须将用户的可能操作归结为一个突出的功能。例如,音乐应用可能具有表示“播放/停止”的FAB。类似Instagram的应用程序可能具有表示“拍照”的FAB。

浮动动作按钮表示应用程序中的主要动作。在此屏幕上暂停或恢复播放将告诉用户这是一个音乐应用程序。
根据史蒂夫·琼斯(Steve Jones)的研究,FAB在用户首次使用该按钮时显示出对可用性的轻微影响。但是,一旦用户使用FAB成功完成一项任务,他们将比传统的操作按钮更有效地使用它。
2.成为寻路工具
FAB是告诉用户下一步操作的自然提示。Google的研究表明,面对陌生的屏幕时,许多用户都依赖FAB进行导航。因此,FAB作为下一步工作的路标非常有用。

在Twitter中使用浮动操作按钮可以鼓励您发布内容
3.提供一套行动
在某些情况下,如下面的Evernote示例所示,使按钮旋转并公开其他一些选项是合适的。FAB可以将其替换为一系列更具体的操作,并且可以将它们设计为与用户相关。根据经验,在按下时至少提供三个选项,但不要超过六个(包括原始的浮动操作按钮目标)。

还请记住,这些动作必须与FAB本身表达的主要动作相关,并且彼此相关:如果将这些显示的动作放在工具栏上,则不要像对待它们那样独立。

请勿: “我在哪里”操作与创建内容操作无关。
4.注意上下文
上下文在用户交互中起着重要作用。有时用户想要消费内容,有时他们想要执行操作。这完全取决于上下文。使用某些上下文行为可以将FAB的优点带到任何应用程序的UX中。让我们以Google+为例。当用户与信息流互动时,Google +会显示该按钮,而当互动反向时会隐藏该按钮。这两个状态取决于上下文:当用户与社交流互动时,主要动作是滚动,因此不需要FAB;当用户停止滚动时,他们可能想发布一些内容。

5.将两个国家联系在一起
FAB不仅是一个圆形按钮,它还具有一些可转换的属性,您可以使用这些属性来简化屏幕之间的用户。变形浮动操作按钮时,请以逻辑方式在两个状态之间进行转换。以下示例中的动画保持了用户的方向感,并帮助用户理解了视图布局中刚刚发生的更改,触发更改的原因以及以后在需要时如何再次发起更改。

图片来源:Ehsan Rahimi

图片来源:Dribbble
结论
高端网站设计能会说FAB是糟糕的UX。之所以说是诱人的,是因为用户和设计师对此并不习惯。我们已经习惯了熟悉的工具栏,而FAB的概念对我们来说仍然相当陌生。我们都知道新事物很难实现,但同时又鼓励了更精心设计的用户体验。正确使用FAB对于最终用户而言可能是一个非常有用的模式。