用户体验模式6 分钟阅读·Updated 2026 年 10 月·ExodeUI 团队
浮动操作按钮：何时使用 FAB 以及如何为其设置动画
当浮动操作按钮有帮助时，当它有害时，每个屏幕一个 FAB、扩展 FAB 和 FAB 菜单、滚动行为和运动。
直接总结和定义
核心要点
使用浮动操作按钮来执行屏幕上最重要的操作，例如撰写或创建。每个屏幕仅显示一个，在没有明确主要操作的屏幕上跳过它，当图标不清楚时使用带标签的扩展 FAB，并在展开、滚动折叠或打开菜单时保持其动作有目的。
FAB 的用途是什么
Material Design 3 将 FAB 描述为屏幕的主要操作，并建议不要在一个屏幕上显示多个 FAB。它还指出，并非每个屏幕都需要 FAB，例如当图像已经代表主要操作时。
变体
材料提供了多种形式：
- 标准 FAB：众所周知的操作（例如撰写）的图标。
- 扩展 FAB：图标加标签，对于不太明显的操作和较大的屏幕上更清晰。
- 大型 FAB：用于突出的主要操作，适合更宽的窗口，例如平板电脑和展开的可折叠设备。
- FAB 菜单：FAB 打开一组简短的相关操作。
何时不使用一个
在主要操作已经很明显并且覆盖重要内容或控件的屏幕上，跳过 FAB 进行次要或破坏性操作。在 iOS 上，FAB 不是本机模式； iPhone 用户更熟悉工具栏或导航栏按钮。
运动
当人们滚动时，FAB 通常会从扩展折叠到标准，然后再次展开，并且在点击时可以转换为工作表或菜单。这些转换解释了动作的去向及其内容的来源。保持它们简短，避免在每个滚动条上弹跳，并尊重减少的运动。
要记住的关键 Principle
- 每个屏幕一个 FAB，用于主要操作
- 并非每个屏幕都需要一个
- 当图标不明显时使用扩展FAB
- 避免 FAB 进行轻微或破坏性行为
- 使用动作来显示 FAB 内容的来源
常见问题解答
来源
- FAB guidelines — Material Design 3