分段控制器（Segmented Control）是什么：效果预览与 AI 设计提示词

效果预览

日

周

月

滑块平滑移动，而不是切背景色

适合用在哪

切换数据视图（日/周/月）、切换列表排布方式、小型二元或三元选择。

容易踩的坑

选项超过 4 个或文案长短悬殊，等宽分段放不下，应改用标签页或下拉。
未选中文字只有 40% 灰，对比度约 2.5:1，低于 WCAG 4.5:1 的要求。
只用 div 点击实现，键盘无法聚焦；应基于 radio 组或 role="radiogroup"。

设计提示词 · Prompt

分段控制器（Segmented Control）：一条 1px 描边的浅灰胶囊轨道（内边距 3px、圆角 10-12px），内部 2-4 个等宽选项。选中项下方是一块绝对定位的白色滑块（圆角 7-8px + 轻微投影），滑块位置随选中项用 transform 平滑移动（260ms cubic-bezier(.32,.72,0,1)），不要用背景色直接切换。选中文字深色 650 字重，未选中 40% 灰。整体高度控制在 32-36px，非常适合放在表格或图表的右上角作为视图切换。

Segmented Control: a light gray pill track with a 1px stroke (3px padding, 10-12px radius) holding 2-4 equal-width options. Beneath the selected option sits an absolutely positioned white slider (7-8px radius + subtle shadow), whose position moves smoothly with transform as the selection changes (260ms cubic-bezier(.32,.72,0,1)) — don't just swap the background color. Selected text is dark at 650 weight, unselected text 40% gray. Keep the overall height at 32-36px; it works very well in the top-right corner of a table or chart as a view switcher.

常见搭配

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

折线图Line Chart 图表卡片容器Chart Card Container 月付年付切换Billing Toggle 数据表格Data Table

演示 HTML 结构

<div class="s d-seg d-seg--3">
  <div class="d-seg__track">
    <div class="d-seg__thumb" style="transform:translateX(52px)"></div>
    <div class="d-seg__opt">日</div>
    <div class="d-seg__opt is-on">周</div>
    <div class="d-seg__opt">月</div>
  </div>
  <span class="d-tiny">滑块平滑移动，而不是切背景色</span>
</div>