FAB
浮动操作按钮
MobileWeb上手难度: 中等
一直浮在屏幕角落的那个圆形按钮，通常承载「新建」这个动作。
Live Demo
真的可以点页面内容（可以滚很长）
你刚才看到的这个：Google Material 系应用右下角那个圆形带加号的按钮、小红书右下角的「+」发布按钮、备忘录右下角的铅笔——都是 FAB。
它到底是什么
FAB 的设计意图是「拇指随时可及的快捷入口」。它出现在 App 的右下角，好处是跳出层级、随时可用，代价是遮挡内容和持续占用视觉注意力。
悬浮按钮浮动按钮FABfloating action button悬浮操作
Anatomy · 它由什么组成
Surface圆形底
56×56px，阴影提升悬浮感
Icon图标
24px，居中
Position位置
右下 16px + 安全区
Extended展开态
带文字的 Extended FAB
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 移动端有一个高频主操作（新建 / 拍摄 / 记一笔） | 用 |
| 该操作在多层页面下都应该可达 | 用 |
| 页面是长列表滚动型 | 用 |
| 工具栏里已经有一个主按钮 | 不用 |
| 主操作会遮挡底部关键内容 | 不用 |
在 5 个以内的 Tab 布局里再加 FAB 会造成重复——「新建」通常该在 Bottom Navigation 里。
它总是浮在最上层，位置太靠下会挡住底部列表的最后一行。
Similar Patterns
别搞混一句话区分：一直浮在屏幕角落的那个圆形按钮，通常承载「新建」这个动作。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在移动端页面右下角加一个 FAB，圆形带加号图标，点击新建内容；滚动列表时保持固定，不随内容滚走。
不要只对 AI 说
Bad → Better不要这样对 AI 说
右下角放个加号。
改成这样说
在移动端右下角加 FAB：56px 圆形、深色实心、Plus 图标、shadow 提升，aria-label="新建"，bottom 需加上底部导航高度与安全区。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。