分段控件Segmented
你可能会说
就两三个选项并排，点哪个选哪个，像 iPhone 那种切换条。
把少量选项并排放在一起，点一下就切换当前查看方式例如在任务页点击“列表 / 看板 / 日历”，同一批任务会换一种展示方式。它不负责前往另一个页面；选项很多时也不适合全部塞进这里。
也常被叫作分段选择器Segmented Control
容易混淆？这样区分
分段控件Segmented≠按钮 Button
分段控件 Segmented 是一组互斥选项，选中一个就会取消另一个；按钮 Button或按钮组（Button Group）只是执行动作，多个按钮之间不代表互斥选项。
什么时候用
- 少量互斥选项，点选后立即生效：列表 / 看板 / 日历列表看板日历
- 只换展示方式不换内容：预览 / 源码预览源码
- 选项文案简短明确：日 / 周 / 月日周月选项较少，文案简短易扫读
- 工具栏上做即时筛选：今天 / 本周 / 本月今天本周本月
什么时候不用
- 切换整组平级页面内容时，应使用 标签页 Tabs概览配置日志
- 选项较多或文案较长时，使用 选择器 Select 更容易浏览全部前端后端设计运营测试选项过多会压缩单项宽度，标签难以快速扫读
- 表单中选择一个值并在提交后生效时，通常使用 单选框 Radio优先级低中高提交提交才生效的话，单选框更直白
- 表达功能开关时使用开关 Switch；切换视图才使用分段控件开关只有两个状态，开关更顺手
组成结构 · Anatomy
列表看板日历
整体容器，灰底圆角
白底高亮，表示当前值
其余可选值，点了就换
常见变体 · Variants
默认Default
列表看板日历
少量并列视图需要在原位置快速切换时
带图标Icon
☰ 列表▦ 看板📅 日历
文案太抽象时，加图标一眼认出
小尺寸Small
日周月
空间紧张的工具栏里用
典型使用场景
列表 / 看板视图切换
迭代任务列表看板日历
待办 · 2
登录页 UI 走查
接口联调
进行中 · 1
看板拖拽排序
已完成 · 5
需求评审
图表类型切换
访问趋势折线柱状饼图
一二三四五六日
日 / 周 / 月粒度切换
数据中心日周月
本周活跃用户
2,318
本周订单
486
本周营收
¥3.6万
预览 / 源码切换
延伸阅读 · 权威出处