底部标签栏（Bottom Tab Bar）是什么：效果预览与 AI 设计提示词

效果预览

⌂首页 🔍发现 ♡收藏 ☰我的

适合用在哪

移动端 Web App、PWA、小程序风格的页面结构。

容易踩的坑

页面底部没留出 64px + 安全区的 padding，最后一屏内容被标签栏遮住。
只放图标不配文字，抽象图标让新用户猜不出功能、点击率下降。
当前项仅靠颜色区分且未设 aria-current，读屏用户不知道所在页面。

设计提示词 · Prompt

底部标签栏（Bottom Tab Bar）：固定底部、高 56-64px + 底部安全区（env(safe-area-inset-bottom)），毛玻璃白底 + 顶部 1px 描边。3-5 个 tab（超过 5 个用户体验崩坏），每个是图标 + 10-11px 文字；当前项品牌色，图标切换时加弹跳（scale 1.1 回落）或图标替换（线性→填充）。中间位可放凸起的中央按钮（FAB 式）。Web 里注意：底部固定栏要配 env(safe-area-inset-bottom)，iPhone 上别让 home indicator 压住图标。页面切换保留 tab 状态。

Bottom Tab Bar: Fixed to the bottom, 56-64px tall + the bottom safe area (env(safe-area-inset-bottom)), frosted-glass white background + a 1px top border. 3-5 tabs (more than 5 breaks the experience), each an icon + 10-11px label; the active item is brand-colored, and switching icons adds a bounce (scale 1.1 then settle) or an icon swap (outline → filled). The middle slot can hold a raised center button (FAB-style). On the web: a fixed bottom bar must use env(safe-area-inset-bottom) so the iPhone home indicator doesn't cover the icons. Preserve tab state across page switches.

常见搭配

同一页面里经常和「底部标签栏」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

安全区适配Safe Area Insets 悬浮操作按钮FAB (Floating Action Button)应用骨架App Shell 触摸反馈Touch Feedback / Active States

演示 HTML 结构

<div class="s s--abs" style="display:flex;justify-content:center;background:var(--i-bg2)">
  <div class="d-phoneframe">
    <div class="d-phoneframe__body">
      <span class="d-phoneframe__ln" style="width:80%"></span>
      <div class="d-img d-img--cool" style="height:30px"></div>
      <span class="d-phoneframe__ln" style="width:60%"></span>
    </div>
    <div class="d-tabbar">
      <span class="d-tabbar__tab is-on"><i>⌂</i>首页</span>
      <span class="d-tabbar__tab"><i>🔍</i>发现</span>
      <span class="d-tabbar__tab"><i>♡</i>收藏</span>
      <span class="d-tabbar__tab"><i>☰</i>我的</span>
    </div>
  </div>
</div>