it-swarm.cn

材质设计的浮动操作按钮是否提供了不良的用户体验?

Google的 (材料设计 )主要侧重于清晰的视觉效果和良好的用户体验,但我有一个问题要问: 浮动操作按钮

这是一个大按钮,出现在许多Google Android)应用程序的右下角。该按钮浮动在内容的顶部。

对我来说,我认为这看起来很糟糕,并且阻碍了内容的显示。我习惯于驻留在按钮栏中的按钮,而不是漂浮在内容上方。另一个缺点是只能有一个浮动按钮,因此只能在其中放置一个最常见的动作。

另一方面,这种类型的按钮通过不用底栏阻止内容,确实提供了额外的屏幕空间。它还允许将频繁按下的按钮放置在屏幕底部附近,更靠近大型设备上用户的手指。

这种类型的按钮是否为用户提供了良好的体验?是否应该在其他应用程序中使用?还是这只是Google的错误设计决定?这种做法是否也应扩展到桌面和Web应用程序?请提供推理甚至更好的研究或文章来支持您的答案。

37
Keavon

诱人的是,因为我们不习惯,所以它一定不是很好的体验。我认为我们的意思是变革一定是一种很好的体验……这并不令人感到舒适,但是最终结果实际上可能比我们以前更好。

我们已经习惯了工具栏,但是有多少次我们迷失在菜单中或被一排按钮所迷惑?从可用性的角度来看,单个浮动操作按钮在许多方面都得到了改进。必须仔细考虑应用程序的设计,并且必须将用户的可能动作归结为一个最突出的功能。假设屏幕的其余部分用于消费/阅读,则按钮必须用于创建。它的位置对于引起注意很重要。如果向下滚动,它也可以隐藏

在某些情况下,如在“收件箱”应用中所见,该按钮可以旋转并暴露其他一些选项是合适的。

所以不,我不会说材料设计会带来糟糕的用户体验。实际上,它鼓励设计更仔细的用户体验。

我想引用一些消息来源对此进行更多说明,但目前我处于移动状态。

29
Matt

优点:菲特定律:

坏处:Google Material Design设计的最大缺陷在于按下按钮时的反馈。在物理世界中,一个按下的按钮退回到了背景中。在Google的Lollipop中,情况恰恰相反,当您按下按钮时,它会浮动,这与用户的习惯相反。 pressed button

19
GRVNT

在某些情况下,我可以看到它与它背后的任何东西融为一体,这是一件坏事。

惯用左手的人仍可能必须更改其握持设备的方式才能按下按钮,因为该按钮可能无法触及,这取决于他们的拇指可以触及多远。

7
ipavl

面向对象的动作

在实现浮动功能按钮的Material Design的所有示例中,我们都已经看到了应用程序中一个面向对象的概念在起作用:

  • 电子邮件(收件箱)
  • 文档(文档/驱动器)
  • 新闻(报亭)
  • 方向(地图)

可以说,最重要的单个动作的概念围绕着应用程序处理的关键概念对象创建了很好的用户动作层次结构,并且无意中(或有意地)为工具提供了焦点。

在大多数情况下,可以说这是用户打开应用程序的目的,因此有理由使操作处于或多或少永久可见的状态,并且使用视觉约定意味着您永远不必- search表示该单个操作。

不要严格遵循准则

“另一个缺点是只能有一个浮动按钮,因此只能在其中放置一个最常见的动作。”

有趣的是,只有严格遵守提供的基本规则,才会出现这种情况。但是,Google在电子邮件应用程序“收件箱”中实施Material Design方面颇具创意。看到: enter image description here

我认为,将鼠标悬停在主要动作按钮上可以显示上下文/相关动作。

4
yellow-saint

很难说一种方法。我们可以列出优点和缺点并提供意见,但归根结底,这将主要基于意见。

所有这些,请务必谨慎判断屏幕截图。在UX中,我们必须面对的一大障碍是基于静态文档...线框,实体模型,屏幕截图等获得的反馈。

这些都不提供交互的任何细微差别,这些细微差别通常是整个体验中“成败”的方面。

我不是(知道),但是有很强的直觉,即您提出的问题在实际使用中会大大减轻。由于浮动按钮是静态的,而内容不是静态的,因此提供的对比度水平是我们在查看静态图像时根本无法“看到”的。

2
DA01

我认为使用透明度可以解决您提到的屏蔽内容问题。我已经看到这确实适用于带有滚动窗口的移动应用程序。

事实是,在移动设计中,很难找到放置操作按钮的位置。我真的很喜欢FAB的用途,我认为它们确实有效。不幸的是,这意味着我将设计转移到IOS时必须重新考虑!

A picture of a Balsamiq mobile mockup with a transparent floating action button

0
Lisa Tweedie

FAB的一些优点:

  • 一种区分按钮重要性的方法。它使用户知道最重要的动作是什么,从而减轻了认知负担。
  • 最常见动作的明确亮点。它可以帮助用户进行下一步(在大多数情况下),从而减轻认知负担。
  • 更好的可达性。 FAB可以出现在很多地方,但是最常见的位置往往比工具栏更容易到达。此外,与工具栏不同,它为设计人员提供了按钮放置位置的更多自由度。

也就是说,FAB并不适合所有用例。在某些情况下,您可能会发现没有一个明确的主要动作,或者该按钮吸引了太多的注意力,或者确实阻碍了它。例如,如果我正在观看全屏视频,则不希望FAB挡住我的视线。要查看它是否适合您,请自己尝试一下。

另外,我应该提到,类似于FAB的按钮并非Material Design所独有。它已被Microsoft使用:

Microsoft Photo Viewer

Windows Media Player

IE 11

还有Firefox:

enter image description here

的确,这些都没有覆盖任何内容,但是FAB不必覆盖任何内容。在 guidelines 中有几个示例,其中没有内容被覆盖-例如“我的文件”应用或媒体播放器。并且,当内容被覆盖时,Google会谨慎处理其应用程序,以通过增加可滚动区域以适应FAB来显示内容。

0
Tin Man