Segmented Control
分段控件
WebMobileDesktop上手难度: 中等
一排挤在一起的小按钮，选中其中一个，像被「分段」了一样。
Live Demo
真的可以点当前显示：今天的清理记录
你刚才看到的这个：iOS 照片查看器底部的「日 / 周 / 月」、Mac 的合成分段按钮、地图App 的「列表 / 地图」切换。
它到底是什么
Segmented Control 是一个紧凑的按钮组，选中项有填充色高亮。它的关键是：它和 Tabs 长得很像，但 Segmented 切换的是「同一块内容的小视图」，而不是「不同的页面」。
分段控件segmented control分段按钮按钮组segmented切换按钮组
Anatomy · 它由什么组成
Track外框
浅灰底，包住所有分段
Segment分段
等分或按内容宽度
Selected选中
白色填充 + 阴影
Label文字
1–4 字最佳
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 2–4 个视图之间的切换 | 用 |
| 所有选项都很短（1–4 个字） | 用 |
| 希望控件宽度跟着内容而不是通栏 | 用 |
| 每个选项需要一个独立 URL | 不用 |
| 选项文字长短差异很大 | 视情况 |
如果每个视图要能单独分享/收藏（要有各自 URL），用 Tabs。
文字长短不一会让分段宽度很怪——要么统一用图标，要么改用 Select。
Similar Patterns
别搞混一句话区分：一排挤在一起的小按钮，选中其中一个，像被「分段」了一样。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
加一个 Segmented Control：日 / 周 / 月 三段，选中项白色填充并带轻微阴影，切换只影响同一块区域，不改 URL。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加几个按钮可以切换。
改成这样说
加 Segmented Control：浅灰外框内含 2–4 段，选中项白底加阴影，滑块用 transform 平移动画，用 role=tablist/tab + aria-selected 表达，不改变 URL。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。