Tabs vs Segmented Control
为什么它们长得像但不是一回事
我有一组选项要切换，用 Tabs 还是 Segmented Control？
对比表
| Pattern | 切换什么 | 独立 URL | 数量 | 宽度 |
|---|---|---|---|---|
| Tabs标签页 | 整块内容（页面级） | 是，每个 tab 一个 URL | 2–5 个 | 通栏铺开 |
| Segmented Control分段控件 | 一个小控件的状态 | 否（同一页内） | 2–4 个 | 紧凑，跟着内容宽度 |
← 左右滑动查看完整表格
真实 Demo 对比
Tabs
标签页- 今天去了海边，捡到一块很特别的海玻璃
- 拍了一下午，其实就为了这一张
- 阴天也很好，光很柔
怎么判断：切换「看不同内容」
Segmented Control
分段控件当前显示：今天的清理记录
怎么判断：切换「同一内容的不同视图」
选型决策
- 每个选项要分享一个独立链接（可收藏、可以被搜索到）Tabs
- 只是想在同一块地方切换一个小视图（如 日/周/月）Segmented Control
- 超过 5 个选项考虑用 Select 下拉，别硬塞
最简判断：Tabs 是「页签」，能占满整个顶部；Segmented Control 是「按钮组」，是个小控件。如果你希望「切换后留在同一个 URL」，八成是 Segmented Control。