网站设计:浮动动作按钮提升UX的5种方式

网站建设

浮动操作按钮(FAB)是浮动在用户界面上方的带圆圈的图标。它的形状,位置和颜色确保它从UI的其余部分中脱颖而出。FAB于2014年推出了Google的Material Design原则。自此版本发布以来,FAB用户界面元素已在网络和移动设计中得到广泛采用。

虽然FAB可能被视为一个小的,似乎微不足道的UI组件,但它的影响可能很重要。鉴于模式使用正确,它意味着可以立即识别和访问。

网站设计:浮动动作按钮提升UX的5种方式

Android应用中的浮动操作按钮

1.代表霍尔马克行动

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

网站设计:浮动动作按钮提升UX的5种方式

浮动操作按钮表示应用程序中的主要操作。在此屏幕上暂停或恢复播放会告诉用户它是一个音乐应用程序。

根据Steve Jones的研究,当用户第一次使用按钮时,FAB表现出轻微的负面可用性影响。但是,一旦用户使用FAB成功完成任务,他们就能比传统的操作按钮更有效地使用它。

2.成为寻找工具

FAB是告诉用户下一步该做什么的自然提示。Google的研究表明,当面对不熟悉的屏幕时,许多用户依赖FAB进行导航。因此,FAB作为下一步做什么的标志非常有用。

网站设计:浮动动作按钮提升UX的5种方式

在Twitter中使用浮动操作按钮可以鼓励您发布内容

3.提供一系列操作

在某些情况下,按钮可以旋转并显示一些其他选项,如下面的Evernote示例中所示。FAB可以用一系列更具体的操作替换自己,您可以将它们设计为与用户相关联。根据经验,在按下时提供至少三个选项但不超过六个(包括原始浮动动作按钮目标)。

网站设计:浮动动作按钮提升UX的5种方式

还要记住,这些操作必须与FAB本身表达的主要操作相关,并且彼此相关:不要将这些显示的操作视为独立,就像放置在工具栏上时一样。

网站设计:浮动动作按钮提升UX的5种方式

不要: ‘我在哪里’行动与创建内容动作无关。

4.上下文意识

上下文在用户交互中起着重要作用。有时用户想要使用内容,有时他们想要执行操作。这一切都取决于背景。使用某些上下文行为可以将FAB的最佳功能带到任何应用程序的UX。我们以Google+为例。Google+会在用户与流进行关联时显示该按钮,并在该参与被撤消时隐藏该按钮。这两种状态依赖于上下文:当用户使用社交流时,主要操作是滚动,因此不需要FAB,并且当用户停止滚动时,他们可能想要发布内容。

网站设计:浮动动作按钮提升UX的5种方式

5.将两个国家连在一起

FAB不仅仅是一个圆形按钮,它还具有一些变形属性,可用于帮助用户在屏幕之间轻松自如。变形浮动操作按钮时,以逻辑方式在两个状态之间进行转换。下面示例中的动画保持了用户的方向感,并帮助用户理解视图布局中刚刚发生的更改,触发更改的内容以及如何在以后需要时再次启动更改。

网站设计:浮动动作按钮提升UX的5种方式

图片来源:Ehsan Rahimi

网站设计:浮动动作按钮提升UX的5种方式

图片来源:Dribbble

结论

有些人可能会说FAB是糟糕的用户体验。很容易说,因为用户和设计师不习惯它。我们已经习惯了熟悉的工具栏,而FAB的概念对我们来说还是比较新的。我们都知道新事物是如何努力的,但同时他们鼓励更精心设计的用户体验。正确使用,FAB对于最终用户来说可能是一个非常有用的模式。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/259148.html

(0)
上一篇 2022年5月21日
下一篇 2022年5月21日

相关推荐

发表回复

登录后才能评论