2024年8月19日发(作者：羊天逸)
悬浮按钮的使用原则
当要用悬浮的时候，考虑下在哪使用？什么条件下使用？不使用行不行？使用了
带来了什么效果？如果效果不好怎么办？哪些界面需要使用？一个界面都有要
展示的要素，当悬浮窗的使用是不是影响本界面的因素，其他的界面的关联性等
等。
最近突然好多应用内开始使用悬浮按钮来吸引人的注意力，也是最近运营说一
个活动要做悬浮图标，才发现其他的互金产品已经开始做了，感觉就是忽如一夜
春风来，遍地都是悬浮图。
对于悬浮图标的应用场景，和悬浮图标的实现，悬浮图标的应用案例来说，其
实我并不是非常了解。因为相对于常规的来说，目前的悬浮其实都是按照微信里
的来剽窃的，除了系统自带的悬浮图标。
我们也和技术讨论下对于这个活动是不是需要来说，我先从自己的角度认识
下。
针对：什么是悬浮，悬浮的形式，悬浮的使用场景，悬浮的作用，悬浮的交互
来稍微了解下。
1 / 7
小贴士：判断一个界面的主要操作其实并没有看起来那么简单。为了简化任务，
并且考量你是否需要悬浮按钮，可以参考这个“五分钟规则”：如果你花费了5
分钟还没找到这一屏的主要操作，那么这说明这一屏不需要悬浮按钮。
一、什么是悬浮
悬浮操作按钮（Floating Action Button，FAB），或者说悬浮按钮，是 Android
应用中最常见的一个控件。悬浮按钮通常是圆形，底部的Material Design 风
格的阴影让它看起来悬浮在整个UI之上。悬浮按钮是Android UI 交互中最关
键的元素之一，在用户流程中至关重要。
二、悬浮的形状
悬浮图标一般都是原型，但是也可以根据自己的风格进行设计不同的形状，
UI上，往往是最色彩大胆最直观的页面元素；在功能上，往往是代表用户在
页面上最高频次的操作。但是一般悬浮图标不能过大，尺寸固定在：
2 / 7
前端实现方法：/p/bfba98ec49b0
三、悬浮按钮的使用场景及作用
试想下最常见的一种场景，当有一个很长很长的页面，你翻页到最下面的时候
发现前面几行的文字和其有关联，你想回头去看，那这种返回最顶端的悬浮按钮
的存在是多么可高兴的事情啊。你最经常用的抖音，有喜欢、分享、音乐点击的
悬浮按钮，你最喜欢的事情都给你最直观的的表达。充分给了你表达喜欢的去向
和看到同类音乐自己创作的便利。
音乐类的app的界面，使用播放暂停的功能触发。
我最近有一个活动上线，但是我没有很明显的位置，可供用户查看，怎么办？
我怎么达到我想要的推广目的啊？
来活动期间悬浮解决：
所以悬浮按钮其实起到的作用有：
3 / 7
1. 导航工具栏
悬浮按钮可以在进行点按或滚动操作时变换成工具栏。 工具栏可以包含相关
的操作，文本和搜索字段等。当用户通过滚动发出他们有兴趣继续浏览内容的信
号，滚动消失的工具栏则大大地节省了屏幕空间，整体的使用体验会非常流畅。
不过这个我目前见到的很少。
2. 引导
当你想要宣传你想要的展示的时候，悬浮是个很醒目的操作，他一般会用一些
很大胆的色彩来告知用户，来看啊，我这有你感兴趣的。
悬浮按钮可以简单地触发某个动作或在某处导航，常用于触发功能、菜单或导
航。
3. 核心功能
一般很核心的功能一直都存在的功能也会使用悬浮按钮，一直存在于界面，时
刻告知用户我们要做的是什么，我可以给你提供到什么。
4. 触发和扩展一系列操作
4 / 7
除了单一的功能触发外，通过悬浮按钮更常用于触发一系列的操作，通过扩展，
用一组相关、常用的悬浮按钮来替代原来的单一交互。常见的形式有拓展按钮，
拓展表单等。
四、设计的原则
1. 选择适当的悬浮按钮尺寸
悬浮按钮主要用于促进用户行为，它们通过在UI上浮动的圆圈图标来区分，
并且具有包括变形，启动和传送锚点的运动行为。一般有两种尺寸：默认版和迷
你版（仅用于与其他界面元素创建视觉连续性）。
默认的尺寸一般为56*56dp，迷你版的尺寸为40*40dp。界面宽度低于460dp
时，需要从默认尺寸（56dp）调整至迷你尺寸（40dp）。
2. 悬浮按钮只承载正向操作
由于悬浮按钮通常承载的是主要的、有代表性的操作，通常它应该是个积极正
向的交互，比如创建、分享、探索等。唯一的悬浮按钮不应该执行破坏性的操作。
比如删除、归档。它不应该是非特定的操作，或者是不完整的交互，比如剪切
和粘贴是一组组合交互，它们应该存在于菜单栏当中，而非悬浮按钮中。
3. 大尺寸屏幕上的悬浮按钮
5 / 7
悬浮按钮在大尺寸的屏幕上可以放置在扩展的APP栏、工具栏或者结构性的元
素（前提不阻碍其他元素）和表单的边缘上。
需要注意的是：每个页面只能出现一个悬浮按钮，也不要将悬浮按钮与一个页
面上的所有元素产生关联，悬浮按钮本身显眼抓人眼球，滥用悬浮按钮会分散用
户的注意力。
五、悬浮的交互
打开一个单独的页面，后面是一个单独的页面挑战
点击扩展展示更多悬浮图标，一般不能超过六个
页面简单的动画交互展开，一个半页面展开，此时是前后的逻辑变化。
我看了最近很多互金产品都开始使用了活动的悬浮按钮在app中，这样做的目
的应该就是为了吸引用户，但是看到了使用的界面只有首页上有。其他页面都没
有，可能也是怕影响其他页面的核心功能吧，为了防止起到不好的影响。
毕竟对于四个主要的菜单栏来说：首页、投资、发现、我的来说用户首先进入
的就是首页中，首页是最显眼的推荐作用，投资页是最不适合的，会影响用户的
选择。
悬浮的时机
6 / 7
悬浮的位置
悬浮的交互和动画效果
六、结后语
当要用悬浮的时候，考虑下在哪使用？什么条件下使用？不使用行不行？使用
了带来了什么效果？如果效果不好怎么办？哪些界面需要使用？
一个界面都有要展示的要素，当悬浮窗的使用是不是影响本界面的因素，其他
的界面的关联性等等。
悬浮按钮看起来很简单，但是要在APP设计的时候正确使用，还是要注意细节、
场景和用户需求的。正确使用悬浮按钮，会有事半功倍的效果。
7 / 7
2024年8月19日发(作者：羊天逸)
悬浮按钮的使用原则
当要用悬浮的时候，考虑下在哪使用？什么条件下使用？不使用行不行？使用了
带来了什么效果？如果效果不好怎么办？哪些界面需要使用？一个界面都有要
展示的要素，当悬浮窗的使用是不是影响本界面的因素，其他的界面的关联性等
等。
最近突然好多应用内开始使用悬浮按钮来吸引人的注意力，也是最近运营说一
个活动要做悬浮图标，才发现其他的互金产品已经开始做了，感觉就是忽如一夜
春风来，遍地都是悬浮图。
对于悬浮图标的应用场景，和悬浮图标的实现，悬浮图标的应用案例来说，其
实我并不是非常了解。因为相对于常规的来说，目前的悬浮其实都是按照微信里
的来剽窃的，除了系统自带的悬浮图标。
我们也和技术讨论下对于这个活动是不是需要来说，我先从自己的角度认识
下。
针对：什么是悬浮，悬浮的形式，悬浮的使用场景，悬浮的作用，悬浮的交互
来稍微了解下。
1 / 7
小贴士：判断一个界面的主要操作其实并没有看起来那么简单。为了简化任务，
并且考量你是否需要悬浮按钮，可以参考这个“五分钟规则”：如果你花费了5
分钟还没找到这一屏的主要操作，那么这说明这一屏不需要悬浮按钮。
一、什么是悬浮
悬浮操作按钮（Floating Action Button，FAB），或者说悬浮按钮，是 Android
应用中最常见的一个控件。悬浮按钮通常是圆形，底部的Material Design 风
格的阴影让它看起来悬浮在整个UI之上。悬浮按钮是Android UI 交互中最关
键的元素之一，在用户流程中至关重要。
二、悬浮的形状
悬浮图标一般都是原型，但是也可以根据自己的风格进行设计不同的形状，
UI上，往往是最色彩大胆最直观的页面元素；在功能上，往往是代表用户在
页面上最高频次的操作。但是一般悬浮图标不能过大，尺寸固定在：
2 / 7
前端实现方法：/p/bfba98ec49b0
三、悬浮按钮的使用场景及作用
试想下最常见的一种场景，当有一个很长很长的页面，你翻页到最下面的时候
发现前面几行的文字和其有关联，你想回头去看，那这种返回最顶端的悬浮按钮
的存在是多么可高兴的事情啊。你最经常用的抖音，有喜欢、分享、音乐点击的
悬浮按钮，你最喜欢的事情都给你最直观的的表达。充分给了你表达喜欢的去向
和看到同类音乐自己创作的便利。
音乐类的app的界面，使用播放暂停的功能触发。
我最近有一个活动上线，但是我没有很明显的位置，可供用户查看，怎么办？
我怎么达到我想要的推广目的啊？
来活动期间悬浮解决：
所以悬浮按钮其实起到的作用有：
3 / 7
1. 导航工具栏
悬浮按钮可以在进行点按或滚动操作时变换成工具栏。 工具栏可以包含相关
的操作，文本和搜索字段等。当用户通过滚动发出他们有兴趣继续浏览内容的信
号，滚动消失的工具栏则大大地节省了屏幕空间，整体的使用体验会非常流畅。
不过这个我目前见到的很少。
2. 引导
当你想要宣传你想要的展示的时候，悬浮是个很醒目的操作，他一般会用一些
很大胆的色彩来告知用户，来看啊，我这有你感兴趣的。
悬浮按钮可以简单地触发某个动作或在某处导航，常用于触发功能、菜单或导
航。
3. 核心功能
一般很核心的功能一直都存在的功能也会使用悬浮按钮，一直存在于界面，时
刻告知用户我们要做的是什么，我可以给你提供到什么。
4. 触发和扩展一系列操作
4 / 7
除了单一的功能触发外，通过悬浮按钮更常用于触发一系列的操作，通过扩展，
用一组相关、常用的悬浮按钮来替代原来的单一交互。常见的形式有拓展按钮，
拓展表单等。
四、设计的原则
1. 选择适当的悬浮按钮尺寸
悬浮按钮主要用于促进用户行为，它们通过在UI上浮动的圆圈图标来区分，
并且具有包括变形，启动和传送锚点的运动行为。一般有两种尺寸：默认版和迷
你版（仅用于与其他界面元素创建视觉连续性）。
默认的尺寸一般为56*56dp，迷你版的尺寸为40*40dp。界面宽度低于460dp
时，需要从默认尺寸（56dp）调整至迷你尺寸（40dp）。
2. 悬浮按钮只承载正向操作
由于悬浮按钮通常承载的是主要的、有代表性的操作，通常它应该是个积极正
向的交互，比如创建、分享、探索等。唯一的悬浮按钮不应该执行破坏性的操作。
比如删除、归档。它不应该是非特定的操作，或者是不完整的交互，比如剪切
和粘贴是一组组合交互，它们应该存在于菜单栏当中，而非悬浮按钮中。
3. 大尺寸屏幕上的悬浮按钮
5 / 7
悬浮按钮在大尺寸的屏幕上可以放置在扩展的APP栏、工具栏或者结构性的元
素（前提不阻碍其他元素）和表单的边缘上。
需要注意的是：每个页面只能出现一个悬浮按钮，也不要将悬浮按钮与一个页
面上的所有元素产生关联，悬浮按钮本身显眼抓人眼球，滥用悬浮按钮会分散用
户的注意力。
五、悬浮的交互
打开一个单独的页面，后面是一个单独的页面挑战
点击扩展展示更多悬浮图标，一般不能超过六个
页面简单的动画交互展开，一个半页面展开，此时是前后的逻辑变化。
我看了最近很多互金产品都开始使用了活动的悬浮按钮在app中，这样做的目
的应该就是为了吸引用户，但是看到了使用的界面只有首页上有。其他页面都没
有，可能也是怕影响其他页面的核心功能吧，为了防止起到不好的影响。
毕竟对于四个主要的菜单栏来说：首页、投资、发现、我的来说用户首先进入
的就是首页中，首页是最显眼的推荐作用，投资页是最不适合的，会影响用户的
选择。
悬浮的时机
6 / 7
悬浮的位置
悬浮的交互和动画效果
六、结后语
当要用悬浮的时候，考虑下在哪使用？什么条件下使用？不使用行不行？使用
了带来了什么效果？如果效果不好怎么办？哪些界面需要使用？
一个界面都有要展示的要素，当悬浮窗的使用是不是影响本界面的因素，其他
的界面的关联性等等。
悬浮按钮看起来很简单，但是要在APP设计的时候正确使用，还是要注意细节、
场景和用户需求的。正确使用悬浮按钮，会有事半功倍的效果。
7 / 7