中山网站设计公谈用五种浮动按钮增加网站体验设计

2020-04-23 14:00:00

移动应用中的浮动动作按钮(FAB)可以为我们在移动网站的制作中提供一些互动的灵感。浮动操作按钮是浮动在用户界面上的图标。它的形状、位置和颜色使它在众多设计元素中脱颖而出。浮动按钮在谷歌2014年的设计标准中发布和推广。现在,浮动按钮用户界面元素已经广泛应用于web和移动设计中。

虽然浮动按钮看起来很小,甚至看似微不足道的视觉组件,但其作用非常重要,始终引导用户点击。只要使用正确,它的用户就可以立即识别并访问点击。

一、表示当前页的重要操作

理想情况下,浮动按钮应该突出显示相关或常用的操作,它应该被应用程序用作操作的主要功能。如果要在应用程序中使用Fab,必须仔细考虑设计,并且用户可能的操作必须归因于单个突出的功能。例如,音乐应用程序可能有播放/停止的fab。类似的instagram应用程序可能有一个表示“拍照”的浮动按钮。

操作按钮表示应用程序中的主要角色。在此屏幕上暂停或继续播放,以告诉用户这是一个音乐应用程序。

根据史蒂夫·琼斯的研究,当用户次使用按钮时,Fab对可用性显示出轻微的负面影响。然而,一旦用户成功地完成了任务,他们就可以比传统的操作按钮更有效地使用Fab。

浮按地面是一个自然的提示,告诉用户下一步要做什么。谷歌的调查显示,当面对不熟悉的屏幕时,许多用户通过浮动按钮导航。所以,fab是一个非常有用的信号,我们不需要考虑下一步该怎么做。

使用浮动操作按钮twitter鼓励您的文章内容

二、提供一组操作(多个)

在某些情况下,它是旋转的右键,以便在Evernote下面可以看到其他一些选项。Fab可以用一系列更具体的动作来取代自己。可以设计用户上下文。根据经验,至少提供三个选项后,按不超过六个(包括原始浮动操作按钮的目标)。

还要记住,这些操作必须是Fab本身表示的、相互关联的主要操作:如果可以在工具栏中找到这些发现的行为,则不要将它们视为独立的。

不要说:“我的行为不涉及创造内容的行为。”。

上下文在用户交互中起着重要的作用。有时用户想要使用内容,有时他们想要执行操作。这完全取决于上下文。使用一些上下文行为为任何应用程序的浮动按钮带来的用户体验。让我们以谷歌为例。当用户使用流时,Google show按钮与隐藏在这种交互中相反。这两个操作需要指导:当用户和社交流有吸引力时,主要的行为之一是滚动,因此不需要浮动按钮,当用户停止滚动时,他们可能会想要一些东西。

浮动按钮不仅仅是一个圆形按钮,它有一些革命性的功能,可以用来帮助您的用户在屏幕上轻松。变形动作按钮时,在两个状态之间进行逻辑转换。在下面的示例中,动画保持了用户的方向感,并帮助用户了解在视图布局中刚刚发生的更改、触发更改的原因以及在需要时如何重新开始更改。