标签页（Tabs）是什么：效果预览与 AI 设计提示词

效果预览

概览

分析

设置

适合用在哪

功能说明分块、后台多视图切换、产品详情分栏。

容易踩的坑

未实现 role="tablist" 与方向键切换，键盘用户只能逐个 Tab 穿过每个标签。
切换时内容面板高度骤变，下方内容上下跳动，应固定最小高度或平滑过渡。
移动端 5 个均分标签每个不足 60px，中文标签被截断成两个字。

设计提示词 · Prompt

标签页（Tabs）：外层一条浅灰圆角轨道（背景 #EAEBEF、圆角 12px、内边距 4px），标签平铺其中、均分宽度。选中项变成白底小卡（圆角 8px + 轻微投影 + 深色 650 字重），未选中项为中性灰 560 字重。切换时用滑块式过渡（transform 位移，260ms cubic-bezier(.32,.72,0,1)）而不是直接闪现。下方内容面板提供 16-24px 上间距。标签数量超过 5 个时改为底部 2px 下划线指示器（Underscore Indicator）形式并允许横向滚动。

Tabs: an outer light gray rounded track (background #EAEBEF, 12px radius, 4px padding), with tabs laid flat inside at equal widths. The selected tab becomes a small white card (8px radius + subtle shadow + dark 650 weight); unselected tabs are neutral gray at 560 weight. Switch with a sliding transition (transform translation, 260ms cubic-bezier(.32,.72,0,1)) rather than an instant swap. The content panel below gets 16-24px of top spacing. When there are more than 5 tabs, switch to a 2px bottom underline indicator (Underscore Indicator) style and allow horizontal scrolling.

常见搭配

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

漫游焦点Roving Tabindex 下划线动画标签Animated Underline Tabs 图表卡片容器Chart Card Container 骨架屏Skeleton Loading

演示 HTML 结构

<div class="s d-tabs">
  <div class="d-tabs__bar">
    <div class="d-tabs__tab is-on">概览</div>
    <div class="d-tabs__tab">分析</div>
    <div class="d-tabs__tab">设置</div>
  </div>
  <div class="d-tabs__panel">
    <div class="d-tabs__line d-tabs__line--a" style="width:58%"></div>
    <div class="d-tabs__line" style="width:92%"></div>
    <div class="d-tabs__line" style="width:76%"></div>
  </div>
</div>