悬浮按钮要怎么设计才能带来好体验？

悬浮按钮要怎么设计才能带来好体验？

浮动 *** 作按钮(FAB)或浮动按钮是Android应用程序中最常见的控件。悬停按钮通常是圆形的，底部材质设计风格的阴影使其看起来悬停在整个UI上。悬停按钮是AndroidUI交互中最关键的元素之一，在用户过程中至关重要。悬停按钮非常容易使用，但要正确使用它，我们仍然必须遵循一些基本规则。

在今天的文章中，您将找到以下问题的答案:

什么时候适合使用悬浮按钮？悬浮按钮的最佳实践有哪些？悬浮按钮要如何同动效结合起来优化用户体验？什么时候适合使用悬浮按钮A、执行关键的 *** 作

悬停按钮通常用于承载最相关、最常用和最重要的 *** 作。通常，在应用程序中，它应该承载特征 *** 作、核心功能，就像下面的例子:

悬停按钮用于触发应用程序中的主要 *** 作。屏幕上的暂停/播放交互由悬停按钮触发，表明该应用程序是音乐播放器。

B、作为引导工具

悬停按钮还可以为用户提供下一步的提示和指导。谷歌的研究表明，当面对不熟悉的界面时，许多用户倾向于点击悬停按钮来探索并获得指导。因此，悬停按钮在功能上类似于路标。

Twitter将tweet功能变成了一个浮动按钮。

C、并不是每屏都需要悬浮按钮

悬浮按钮的颜色很显眼，很醒目。当你打开界面的时候，你甚至察觉不到，因为太明显了。但是，不是每个界面都需要悬停按钮，因为不是每个屏幕都有标志性的重要 *** 作。

不要滥用悬停键，它只为按键 *** 作而存在！

Android系统中的GooglePhotos应用就是一个典型的案例。当你打开它的图库时，首先看到的是用于搜索的悬停按钮。此时，悬停按钮有两个关键问题:

对于绝大多数的用户而言，搜索是非主要交互。首要的 *** 作是浏览图片，所以此处并不需要悬浮按钮。悬浮按钮会分散用户的注意力。

提示:判断一个界面的主要 *** 作，其实没有看起来那么简单。为了简化任务，考虑是否需要悬停按钮，可以参考这个“五分钟法则”:如果5分钟还没有找到这个屏幕的主要 *** 作，就说明这个屏幕不需要悬停按钮。

悬浮按钮最佳实践A、避免出现“迷之导航”

实际上，我们在这里谈论的神秘导航指的是“神秘肉导航”，通常缩写为MMN。这个具有讽刺意味的术语来自文森特·弗兰德斯(VincentFlanders)，他是一个糟糕的网页的网站管理员，指的是难以找到的“隐藏”链接，这些链接的目的不明，只有当光标移动到它们上面时才能发现，直到打开它们时才知道它们的内容。

实际上，悬停按钮的问题类似于MMN。它是一个典型的图标按钮，并且它不包含解释其功能的文本标签。然而，通用的和公认的图标总是少数。比如下面这个按钮的作用是什么？

有人能猜到和分享有关，那么它的分享功能指向哪里，有什么作用呢？你能确定吗？如果你想知道，你必须点击它。诚然，点击这些按钮发现它们的功能需要的时间非常短，风险也不高，但毕竟是一种认知负担，不是吗？最麻烦的是用户要记住它的功能。

记住所有这些图标和相应的应用程序，这是一个很大的工作量。

当然，使用图标按钮本身是没有问题的，前提是APP的脉络清晰，让用户能够清楚地判断按钮的意义和功能。例如，您正在使用笔记应用程序。很明显，主要功能是记录和查看笔记。那么，这个时候，悬停按钮上的钢笔图标的意思就很清楚了。

B、一屏只使用一个悬浮按钮

悬停按钮在界面中很突出，也是最具攻击性的，所以要么只用一个悬停按钮，要么根本不用。

C、悬浮按钮只承载正向 *** 作

因为悬停按钮通常承载的是主要的、代表的 *** 作，应该是一种正向的交互，比如创建、分享、探索。唯一的悬停按钮不应该执行破坏性的 *** 作，如删除和存档。它不应该是非特定的 *** 作或不完整的交互。比如剪切和粘贴是一组组合的交互，它们应该存在于菜单栏而不是悬停按钮中。

材料的设计规范有关于浮动按钮所携带的交互和图标的说明。

悬浮按钮动效

悬停按钮本身非常灵活。它可以膨胀、变形并给出反馈。

A、扩展为一系列 *** 作

在某些情况下，点击悬停按钮可以扩展其他常见 *** 作(如Evernote)。通过扩展，用一组相关的、常用的浮动按钮代替原来单一的交互是可行的。它们是集成的、可扩展的和可伸缩的，而不是常驻的，这与前面提到的原则并不冲突。

但是，这种设计应该注意几点:

这些 *** 作必须与开始的总悬浮按钮是关联起来的，它们是一体的，不要把展开后的按钮视为单独的存在。作为一般规则，这组拓展出来的按钮不应少于3个，不能多余6个，否则违反了作为悬浮按钮的快速、高效的原则。

B、悬浮按钮变形为新的界面

浮动按钮不能永远是一个按钮，但可以借助动态效果扩展到整个屏幕，成为一个独立的界面。

浮动按钮可以作为界面转换的中间枢纽。

当悬停按钮转换为界面时，它澄清了前后界面之间的逻辑关系，如下例所示:

C、滚动的时候隐藏悬浮按钮

为了方便用户在滚动时阅读内容，在滚动界面时可以隐藏悬停按钮。

Medium的Android客户端就是这样使用悬停按钮的。当滚动到文章底部时，悬停按钮会再次出现。事实上，他们的网页也采用了类似的设计模式。

结语

悬停按钮看起来很简单，但是在设计APP的时候要想正确使用，就要注意细节、场景和用户需求。正确使用悬停按钮，会事半功倍。

译者:@陈

翻译自:优视

原文地址:uxplanet

作者:尼克·巴比奇

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/zz/780318.html