悬浮操作按钮（FAB (Floating Action Button)）是什么：效果预览与 AI 设计提示词

效果预览

滚过首屏后弹性出现，承载页面的核心动作

适合用在哪

移动端 Web 的"新建/发布/联系"主操作、长列表页。

容易踩的坑

FAB 与在线客服气泡同在右下角叠放，两个悬浮钮互相遮挡、误触频发。
只有图标没有 aria-label，读屏只念出「按钮」，用户不知道作用。
FAB 一直显示且无底部留白，列表最后一项的操作按钮被它挡住。

设计提示词 · Prompt

悬浮操作按钮（FAB）：右下角固定（距边 16-20px、避开底部导航），56-64px、圆角 16px 或全圆、品牌渐变底 + 白图标 + 大范围同色投影。滚动行为：首屏隐藏（避免遮 Hero 的 CTA），滚过 600px 后弹性滑入；滚到底部附近可自动收起（不挡最后内容）。扩展形态：点开后展开 2-3 个迷你 FAB（speed dial）或变形为输入框。必须只有一个 FAB——页面出现两枚悬浮按钮是灾难。阴影要"飘"：0 12px 28px -8px 级别。

Floating Action Button (FAB): Fixed at the bottom right (16-20px from the edges, clear of bottom navigation), 56-64px, 16px corner radius or fully round, brand gradient background + white icon + a wide same-color shadow. Scroll behavior: hidden on the first screen (so it doesn't cover the Hero CTA), springs in after scrolling past 600px; can auto-retract near the bottom (so it doesn't block the last content). Expanded forms: tapping opens 2-3 mini FABs (speed dial) or morphs into an input field. There must be only one FAB — two floating buttons on a page is a disaster. The shadow should "float": around 0 12px 28px -8px.

常见搭配

同一页面里经常和「悬浮操作按钮」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

底部标签栏Bottom Tab Bar 安全区适配Safe Area Insets 抽屉面板Drawer / Sheet 在线客服气泡Chat Widget

演示 HTML 结构

<div class="s s--abs" style="background:linear-gradient(180deg,#f4f4f7,#e9eaef)">
  <div class="d-fabwrap">
    <span class="d-fabwrap__hint">滚过首屏后弹性出现，承载页面的核心动作</span>
    <button class="d-fab--mini">♡</button>
    <button class="d-fab">＋</button>
  </div>
</div>