Tabs 标签页
标签页像文件夹上的小标签。你还在同一个柜子里,只是切换到另一个同级分区。它适合把同一对象的不同视角放在一起,但不适合藏住重要流程。
关键结构图
当前相关远处弱强
上方三个 tab 横排,第二个高亮,下方对应第二个内容面板显示。
What
Tabs 是在同一层级的多个内容面板之间切换的界面组件。
Tabs 标签页是一种在同层级内容面板之间切换的组件模式。每个 tab 代表一个互斥的内容视图,当前选中项要清楚可见,键盘和屏幕阅读器也应能理解关系。它的边界是同级切换,不是深层导航或流程步骤。
StructureTabs = 同级内容 + 当前选中 + 快速切换 + 不离开当前语境
When
当用户需要在同一页面里切换概览、详情、记录、设置、评论等同级视图时,可以使用 tabs。
How
先确认各面板是否同级,再给每个 tab 使用短而明确的名称。选中状态要清楚,内容切换要保持页面上下文,并支持键盘导航和正确的可访问关系。
Examples
项目详情页用 tabs 切换 概览、任务、文件、设置。用户仍在同一个项目里,只是看不同面板。
结账流程不适合用 tabs 表示步骤,因为用户需要按顺序完成信息填写、支付和确认。
来源
类型:可访问性规范 / 设计系统实践
事实线:WAI-ARIA APG 提供 tabs pattern,用于组织一组 tab 与对应 tab panel 的关系;多个设计系统也把 tabs 作为同层内容切换组件。
依据:WAI-ARIA APG Tabs Pattern、Material Design tabs、Atlassian tabs。
边界:适合同一对象的不同视图;不适合承载必须按顺序完成的步骤。
常见误读:不要把 tabs 当作万能收纳。被藏在 tab 里的关键信息可能会降低可发现性。