当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >细节决定成败！悬浮按钮如何设计才能带来完美体验？

细节决定成败！悬浮按钮如何设计才能带来完美体验？

发布时间：2018-11-17 19:57:24

悬浮操作按钮（Floating Action Button，FAB），或者说悬浮按钮，是Android应用中最常见的一个控件。悬浮按钮通常是圆形，底部的Material Design风格的阴影让它看起来悬浮在整个UI之上。悬浮按钮是Android UI交互中最关键的元素之一，在用户流程中至关重要。悬浮按钮非常的易用，但是要正确的使用它，还是要遵循一些基本的规则。

什么时候适合使用悬浮按钮？

A、执行关键的操作

悬浮按钮通常用来承载相关度最高、最常用、最重要的操作。通常，在应用中，它应该承载特征性的操作，核心功能，就像下面的例子一样：

悬浮按钮用来触发应用中的主操作。屏幕上的暂停/播放交互使用悬浮按钮来触发，说明这个应用是一个音乐播放器。

B、作为引导工具

悬浮按钮还可以为用户提供下一步的提示和引导。Google的研究表明，当面对不熟悉的界面之时，许多用户都倾向于点击悬浮按钮来探索，获取引导。因此，悬浮按钮在功能上有类似路标的属性。

Twitter就将发推功能做成了悬浮按钮。

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

悬浮按钮色彩显眼，高亮，非常抓人眼球。当你打开界面的时候，想要不去注意到它都不行，因为它太明显了。但是，并不是每个界面都需要悬浮按钮，因为不是每屏都有标志性的、重要的操作。

不要滥用悬浮按钮，它只为了关键操作而存在！

Android系统中Google Photos应用就是一个典型的案例。当你打开它的图库的时候，首先映入眼帘的是用于搜索的悬浮按钮，这个时候，悬浮按钮存在2个关键的问题：

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

●悬浮按钮会分散用户的注意力。

小贴士：判断一个界面的主要操作其实并没有看起来那么简单。为了简化任务，并且考量你是否需要悬浮按钮，可以参考这个“五分钟规则”：如果你花费了5分钟还没找到这一屏的主要操作，那么这说明这一屏不需要悬浮按钮。

悬浮按钮最佳实践

A、避免出现“迷之导航”

实际上我们这里说的迷之导航指的是“Mystery meat navigation”，通常简称为MMN，这句讽刺式的术语源于Web Pages That Suck的站长Vincent Flanders，指的是那些难于被发现、目的不明、只有当光标移动到其上才能发现、直到打开才知道其内容的“隐藏式”链接。

实际上，悬浮按钮所存在的问题和MMN有点相似，它是一个典型的图标式按钮，并不包含文字标签来说明其功能，而通用的、普遍被认识的图标始终是少数。举个例子，下面的按钮是什么功能？

有人能猜出它与分享相关，那么它的分享功能具体是指向什么地方，有什么效果，你能确知么？你想要知道，就必须点击它。的确，点击这些按钮来发现其功能，耗费的时间非常短，风险也不高，但是这终究是一种认知负担，不是吗？最麻烦的地方在于，用户必须记住它的功能才行。

将所有的的这些图标和相应的APP都记住，这个工作量可不小。

当然，使用图标式的按钮本身并不存在问题，前提是，APP的上下文环境要明晰，用户才能够清晰判断按钮的含义和功能。举个例子，你使用的是笔记类应用，很明显，主要的功能是记录、查看笔记。那么这个时候，悬浮按钮上的笔的图标，所表达的含义就很清晰了。

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

悬浮按钮在界面中是突出的，也是最具有侵略性的，所以要么只使用一个悬浮按钮，要么干脆别用。

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

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

Material Design的设计规范中对于悬浮按钮所承载交互和图标有指引说明。

悬浮按钮和动效

悬浮按钮本身非常灵活，它可以扩展、变形，也可以给予反馈。

A、扩展为一系列操作

在某些情况下，点击悬浮按钮可以扩展出其他的常用操作（就像Evernote这样）。通过扩展，用一组相关、常用的悬浮按钮来替代原来的单一交互，这样是可行的，它们是一体的，可展开也能收纳，不常驻，这和前面所提到的原则并不冲突。

不过，这样的设计要注意几点：

●这些操作必须与开始的总悬浮按钮是关联起来的，它们是一体的，不要把展开后的按钮视为单独的存在。

●作为一般规则，这组拓展出来的按钮不应少于3个，不能多余6个，否则违反了作为悬浮按钮的快速、高效的原则。

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

悬浮按钮可以不一直都为按钮形态，借助动效它能够延伸到整个屏幕，变为独立的界面。

悬浮按钮能够作为界面转化的中间枢纽。

当悬浮按钮变形为界面的时候，它阐明了前后界面之间的逻辑关系，就像下面的案例：

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

为了便于用户在滚动的过程中阅读内容，悬浮按钮可以在滚动界面的时候，隐藏起来。

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

结语

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

（本文转载于优设网，原作者：Nick Babich，译者：@陈子木，原文地址：http://www.uisdc.com/floating-action-button-in-ux-design）

上一篇 2011年网页设计趋势全面分析

下一篇绝对干货：动效在UI设计中的3个关键用途！

返回列表

学员作品赏析

2101期学员李思庭作品
2104期学员林雪茹作品
2107期学员赵凌作品
2107期学员赵燃作品
2106期学员徐正浩作品
2106期学员弓莉作品
2105期学员白羽新作品
2107期学员王佳蕊作品

热门课程

专业讲师指导快速摆脱技能困惑

多种教程总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

知道了这17种剪辑技巧，做短视频博主上热门洒洒水啦！

电影剪辑通常被称为“隐形的艺术”，尽管剪辑师的名号不如导演的名号响，但是如果缺少了剪辑师对拍摄素材的二次加工，电影作品将缺少其......
迪士尼如何使用Maya制作《海洋奇缘2》

今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！

增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
短视频怎么剪能上推荐？这10个概念请记牢！

在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
探秘皮克斯！《头脑特工队》的幕后制作

今天，我们聊聊皮克斯的《头脑特工队》系列
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？

中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......