标签页和分段控件怎么选？
一句话做出判断
标签页用来切换不同内容。分段控件只改变同一界面里的模式、筛选或值。
每个选项都有一大段不同内容时，用标签页。少量短选项只改变同一内容时，用分段控件。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Tabs
↗ 选项卡
选项卡是一排标签，会切换同一个内容区，但不会离开当前的主要任务。
“概览”“动态”和“权限”会切换下方内容，但仍留在同一个项目里。
- 什么时候用
- 只有少量同一级的内容区，而且标签要一直看得到时，就使用选项卡。
- 什么时候不要用
- 不要把选项卡当成跳转到无关页面的小链接。
- 代码里的名称
role="tablist"
Toggle Group
↗ 切换按钮组
一组有标签的开关按钮。互相独立的选项可以有一个或多个保持按下。
切换按钮组
文本编辑器可以同时开启粗体和斜体。每个按钮都会说明自己是否已按下。
- 什么时候用
- 只有少量、可撤销的模式，而且当前状态要一直看得见时使用。
- 什么时候不要用
- 只能提交一个选项时，用单选按钮。普通表单的多选数据则用复选框。
- 代码里的名称
button[aria-pressed] in a labeled group
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 选项卡Tabs | 只有少量同一级的内容区，而且标签要一直看得到时，就使用选项卡。 | 不要把选项卡当成跳转到无关页面的小链接。 | role="tablist" |
| 切换按钮组Toggle Group | 只有少量、可撤销的模式，而且当前状态要一直看得见时使用。 | 只能提交一个选项时，用单选按钮。普通表单的多选数据则用复选框。 | button[aria-pressed] in a labeled group |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 选项卡（Tabs）、切换按钮组（Toggle Group） 中，为真实用户流程选出最合适的界面模式。判断规则：标签页用来切换不同内容。分段控件只改变同一界面里的模式、筛选或值。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。