标签页 UI 系统 是做什么的？
目的
标签页 UI 系统提供了一种设计和构建标签页的方法论——标签页是允许用户在同一上下文中切换相关内容面板的导航元素。标签页是渐进式披露的关键模式，通过将信息组织成逻辑组来减少认知负载，而无需页面重新加载。一套系统化的方法可确保标签页具有清晰的活动状态、逻辑分组，并能在不同设备上优雅地适配。
使用场景
- 产品详情页： 将规格、评论、配送信息和常见问题组织成可扫描的章节。
- 账户设置： 将用户资料、安全、通知和计费设置分组。
- 数据面板： 在不同的数据视图之间切换（例如，“概览”、“分析”、“历史”）。
- 搜索结果： 按类型筛选结果（例如，“全部”、“图片”、“视频”、“新闻”）。
- 复杂表单： 将大型表单分解为主题化的章节（如果步骤不需要严格按顺序完成）。
何时不使用
- 顺序步骤： 如果用户必须按特定顺序完成内容，请改用
step-progress-system。 - 全局导航： 标签页应管理页面内的内容；在不同页面间移动请使用
site-navigation-system。 - 比较信息： 如果用户需要同时查看两个章节的内容，请不要使用标签页。考虑使用手风琴或并排布局。
- 项目太少： 如果只有两个项目且内容较短，考虑同时显示两者或使用简单的切换开关。
- 项目太多： 如果有超过 6-7 个标签页，界面会变得杂乱。考虑使用侧边栏导航或基于下拉框的筛选器。
输入
- 内容清单： 标签标签及其对应内容面板的列表。
- 使用上下文： 标签页将位于何处（例如，主要内容区域、侧边栏或模态框内）。
- 优先级： 这是页面的主要焦点还是次要细节？
- 现有系统： 流体间距、排版比例和交互状态定义。
输出
- 标签解剖规范： 触发器（标签页）、标签列表（容器）和面板（内容）的视觉定义。
- 状态矩阵： 针对默认、悬停、活动、焦点和禁用状态定义的视觉处理方式。
- 响应式策略： 处理溢出（滚动、换行或折叠为手风琴/选择）的规则。
- 可访问性蓝图： ARIA 角色、键盘映射和焦点管理规则。
工作流
1. 定义内容关系
确保所有标签页处于同一层级，并与同一父实体相关。标签应简短（1-3 个词）并使用一致的字母大小写。
2. 建立视觉解剖
应用 visual-hierarchy-system 定义标签列表：
- 活动标签： 必须是最突出的。结合颜色、字体粗细和视觉指示器（如下边框或背景填充）。
- 非活动标签： 应看起来可交互但次要。
- 内容面板： 通常与活动标签共享一个视觉容器或对齐方式，以营造“连接”的感觉。
3. 定义交互逻辑
- 即时切换： 内容应在交互后立即更改。
- 悬停与点击： 标签页绝不能在悬停时切换；需要明确的点击或敲击。
- 默认状态： 默认情况下通常激活第一个标签页，除非用户返回到特定状态。
4. 优化间距和触控
应用 fluid-spacing-system 和 interactive-state-system：
- 触控目标： 每个标签触发器应满足 WCAG 2.2 SC 2.5.8（最小 24x24px）；对于主要标签页 UI，建议 44x44px。
- 内部间距： 在标签之间使用一致的间距（通常为
--space-s或--space-m）。 - 活动指示器： 确保“活动”线条或背景足够厚，以便清晰可见。
5. 规划响应式
确定标签列表如何处理窄视口：
- 水平滚动： 最常见的移动端模式。允许标签列表水平溢出，并带有微弱的渐变或箭头指示更多内容。
- 手风琴转换： 对于长内容，在移动端将标签页转换为手风琴布局。
- 选择菜单： 对于实用性的标签页，在移动端用
<select>元素替换标签列表。
决策规则
- “标签”规则： 如果标签长度差异很大，请使用左对齐标签。如果它们一致且数量较少，请使用居中或两端对齐标签。
- 水平与垂直：
- 水平： 标准的内容顶部组织。
- 垂直： 最适合深层列表（设置）或水平空间有限但垂直空间充足的情况。
- “七”规则： 将水平标签限制在 7 个项目以内。如果需要更多，请重新评估信息架构或使用垂直布局。
- 活动指示器： 始终使用颜色以外的方式指示活动状态（例如，2px-3px 的下划线或粗体字重变化）。
约束条件
- 可访问性： 遵循 ARIA APG 标签页模式——容器上使用
role="tablist"，每个触发器上使用role="tab"并带有aria-selected和aria-controls，以及role="tabpanel"并带有指向其标签页的aria-labelledby。只有活动标签具有tabindex="0"；非活动标签使用tabindex="-1"（漫游 tabindex）。 - 激活模式： 对于快速、轻量的面板，优先使用自动激活（箭头键移动焦点并立即切换面板内容）。如果切换触发昂贵的网络请求，请使用手动激活（箭头键仅移动焦点；
Enter/Space确认）。 - 键盘导航： 左/右箭头（对于垂直标签页则是上/下箭头）在标签之间移动；
Home/End跳转到第一个/最后一个标签；Tab将焦点移出标签列表并进入活动面板。 - 对比度： 活动和非活动状态必须满足 WCAG AA（文本对比度 4.5:1）。
- 响应式： 标签页绝不能导致页面水平滚动；标签列表本身应处理溢出。
常见失败模式
- 隐藏的活动状态： 使用难以看清的细微颜色变化，让用户不确定自己正在查看哪个部分。
- 内容跳跃： 标签面板高度差异很大，导致用户切换标签时页脚上下跳动。
- 误用于导航： 使用标签页链接到单独的页面，这打破了用户对即时内容切换的期望。
- 移动端截断： 在移动端截断标签标签而不提供查看其余部分的方式。
- 缺少焦点状态： 忘记为键盘用户设计可见的焦点环。
验证标准
- 所有标签页都与同一上下文相关。
- 活动状态在视觉上可区分（不仅仅是颜色）。
- 每个标签触发器至少满足 WCAG 2.2 24x24px 的触控目标最小值（建议 44x44px）。
- 正确分配 ARIA 角色（
tablist、tab、tabpanel），并实现了aria-selected和漫游tabindex。 - 根据 ARIA APG 标签页模式支持键盘导航（箭头键、Home/End）。
- 定义了响应式行为（滚动、手风琴或选择）。
- 内容面板与标签页保持一致的视觉关系。