悬浮胶囊导航（Floating Pill Dock）是什么：效果预览与 AI 设计提示词

效果预览

⌂ ◈ ◉ ▤ ☰

适合用在哪

作品集、创意产品、移动端与桌面端通用的轻量导航。

容易踩的坑

底部悬浮未加 env(safe-area-inset-bottom)，在 iPhone 上与 Home 指示条重叠。
纯图标按钮没有 aria-label 和 tooltip，超过 5 个图标后用户靠猜。
底部胶囊遮住页面最后一屏的按钮或版权信息，需给 body 留出同等底部内边距。

设计提示词 · Prompt

悬浮胶囊导航（Floating Pill Dock）：不贴顶边，而是固定悬浮在视口底部居中（或距顶 24px）的一枚胶囊——白底 85% 不透明 + backdrop-filter:blur(14px) saturate(1.8)、1px 近乎白色的描边、圆角 999px、内边距 6px、投影 0 12px 26px -12px rgba(16,17,26,.35)。内部图标按钮为 40-44px 的圆形或方形，当前项用品牌渐变填充 + 白图标，其余悬停时浅色底。滚到页面某个位置后可自动隐藏，向上滚动时再出现（Smart Nav）。

Floating Pill Dock: instead of sticking to the top edge, a pill floats fixed at the bottom center of the viewport (or 24px from the top) — white at 85% opacity + backdrop-filter:blur(14px) saturate(1.8), a 1px near-white stroke, 999px radius, 6px padding, shadow 0 12px 26px -12px rgba(16,17,26,.35). Inside, icon buttons are 40-44px circles or squares; the current item is filled with the brand gradient + white icon, the rest get a light background on hover. It can auto-hide after scrolling past a certain point and reappear when scrolling up (Smart Nav).

常见搭配

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

工具提示Tooltip 安全区适配Safe Area Insets 毛玻璃卡片Glassmorphism Card 底部标签栏Bottom Tab Bar

演示 HTML 结构

<div class="s d-dock">
  <div class="d-dock__bg"></div>
  <div class="d-dock__bar">
    <span class="d-dock__item">⌂</span>
    <span class="d-dock__item is-on">◈</span>
    <span class="d-dock__item">◉</span>
    <span class="d-dock__item">▤</span>
    <span class="d-dock__item">☰</span>
  </div>
</div>