分段控制系统 是做什么的？
目的
分段控制系统提供了一种设计方法论，用于构建紧凑、互斥的选择器（也称为按钮组、滑动开关或分段按钮）。与导航菜单或内容面板标签页不同，分段控件作为内联修饰符在单一上下文或表单中使用。它允许用户立即更改显示格式、过滤单个数据集或在高度受限的空间范围内选择输入选项。
系统化方法确保这些控件具有一致的视觉关系、清晰的交互提示、无缝的布局缩放以及正确的语义可访问性模式，避免被误认为是通用按钮或标签页导航。
用例
- 视图切换： 切换相同内容的显示呈现方式（例如，“网格与列表与地图”或“面板与日历”）。
- 定价与计费切换： 选择计费频率（例如，“每月与每年”），直接改变价格显示。
- 微过滤/子分段： 在特定子类别内过滤活动列表（例如，消息中的“全部与未读与已加星标”）。
- 内联选项选择： 在表单中用2到5个高优先级选择替换笨重的下拉选择菜单（例如，“小号与中号与大号”）。
- 交互状态切换器： 修改实时图表中的活动指标参数（例如，时间段“7天与30天与1年”）。
何时不使用
- 完整页面导航： 如果点击项目会更改页面URL或将用户导航离开当前视图上下文，请使用
site-navigation-system。 - 大型内容面板切换： 如果切换选项显示完全不相关且布局复杂的内容块（例如设置面板或文档标签页），请使用
tab-ui-system。 - 选项数量过多： 如果有超过5个选项，请使用下拉选择或过滤抽屉，以防止视觉拥挤和水平文本溢出。
- 多选设置： 如果用户可以同时选择多个活动选项，请使用分组复选框或标签（
badge-and-tag-system）。 - 二元动态切换： 对于触发即时后台进程的单一开/关设置（例如，“启用通知”），请使用标准切换开关（
accessible-switch-implementation）。
输入
- 选项清单： 互斥标签、图标或值的列表（通常为2至5个）。
- 控制范围： 控件充当表单输入、布局视图修改器还是指标切换器。
- 容器约束： 确切的宽度和布局环境（例如，内联紧邻搜索框、居中于定价卡片、或在移动设备上全宽）。
- 样式令牌： 字体排版比例、间距变量（
fluid-spacing-system）、交互状态（interactive-state-system）和颜色令牌。
输出
- 控件解剖规范： 轨道（背景容器）、分段（各个按钮）和活动指示器（滑动或突出显示的背景）的视觉定义。
- 行为ARIA映射： 选择正确的ARIA角色（
role="radiogroup"与role="tablist"）及键盘导航规则。 - 状态转换矩阵： 默认、悬停、活动/选中、聚焦和禁用状态的样式定义。
- 响应式流程规则： 水平缩放、全宽流体行为以及在移动设备上回流或回退到
<select>的规范。
工作流
1. 识别语义意图
确定控件是修改值还是修改显示视图：
- 表单输入或微过滤： 语义上充当单选组。它更改存储或提交时发送的值，或立即重新过滤内联列表。
- 视图控制器： 语义上充当标签页列表。它在同一容器内切换活动的可见面板或呈现方式。
2. 设计视觉解剖结构
构建高度精致、统一的视觉组件。设计包含三个核心层：
- 轨道： 一个单一水平容器，带有微妙的背景颜色（例如低对比度灰色）、小内边距（通常为2px到4px）和圆角（半圆角或药丸形）。
- 分段： 肩并肩放置在轨道内的按钮。它们必须共享相等的宽度（两端对齐）或根据内容宽度调整并保持一致的内边距。
- 活动指示器： 一个滑动的物理卡片或高亮显示，具有鲜明的背景（通常是白色或主题色）和微妙的阴影（
elevation-and-depth-system），位于活动文本下方以视觉上提升它。
3. 建立状态与动效编排
为每个交互阶段配置不同的视觉反馈：
- 默认状态： 非活动文本使用次要中性色，对比度足够高（至少4.5:1）。
- 悬停状态： 在目标分段上添加微妙的悬停背景高亮，以指示可点击性。
- 选中状态： 文本变为主要/粗体样式，活动指示器滑动到其下方。
- 聚焦状态： 通过键盘导航时，在活动分段周围绘制清晰、高对比度的焦点轮廓。焦点指示器不得超出轨道边界。
- 禁用状态： 降低不透明度（通常为40%），并禁用鼠标指针。
4. 代码与交接注释
注释实现的结构性要求：
- 等宽分布： 指定flexbox对齐方式（
flex: 1 1 0%），以便在适当时均匀分布分段。 - 滑动指示器过渡： 指定CSS过渡规则（
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1)）用于滑动活动指示器卡片，确保通过使用硬件加速属性（transform和opacity而不是直接更改left/width属性）来避免累积布局偏移（CLS）。
5. 规划响应式行为
定义分段控件在小视口上如何缩放：
- 流体两端对齐： 在移动屏幕上将轨道和分段扩展为100%宽度，充当全宽底部栏或标题组件。
- 标签截断与最小宽度： 强制设置分段的最小宽度，以防止文本换行导致单个按钮内出现多行。
- 溢出下拉回退： 如果选项在320px视口内无法容纳且不出现视觉损坏，则使用响应式CSS媒体查询将分段控件布局替换为本机
<select>下拉菜单。
决策规则
单选组与标签页列表模式
| 标准 | 使用单选组模式（role="radiogroup"） | 使用标签页列表模式（role="tablist"） |
|---|---|---|
| 主要功能 | 编辑数据属性或内联过滤列表。 | 在布局视图或面板之间切换。 |
| 表单集成 | 集成在 <form> 内部或充当输入。 | 不在标准表单中；管理布局视图模式。 |
| ARIA角色 | 父级：role="radiogroup"，子级：role="radio" 配合 aria-checked="true/false"。 | 父级：role="tablist"，子级：role="tab" 配合 aria-selected="true/false"。 |
| 键盘导航 | 箭头键立即移动选择；Tab键退出组。 | 箭头键立即移动焦点；空格/回车键激活。 |
视觉布局：固定等宽与自适应流体宽度
- 固定等宽： 最适合短而统一的标签（例如，“7天”、“30天”、“90天”或“网格”、“列表”）。每个分段宽度相同，提供视觉对称性。
- 自适应流体宽度： 最适合标签字符长度差异较大时（例如，“所有项目”与“待验证”）。每个分段围绕文本包裹并保持一致的内边距（例如
12px 16px）。
约束条件
- 对比度： 活动和非活动文本分段必须符合WCAG AA最低对比度 4.5:1 与其背景的比率。
- 触摸目标尺寸： 每个分段必须提供至少 24x24px 的交互区域（WCAG 2.2 SC 2.5.8），但强烈建议最小高度为 40px 到 44px，以在移动设备上实现无缝的手指点击。
- 焦点指示器： 当前选定的分段或活动焦点目标上的键盘焦点必须清晰可见。确保焦点环不会夹在相邻分段之间或被其遮挡。
- 无文本换行： 分段文本应为单行，绝不能在按钮内换行到多行。这会破坏垂直节奏并导致视觉重叠。
- 减少动效： 如果实现了动画滑动指示器，请通过
@media (prefers-reduced-motion: reduce)尊重用户操作系统偏好，禁用滑动效果并立即切换不透明度或轮廓高亮。
常见失败模式
- 布局偏移（CLS）： 更改活动分段会改变活动按钮的宽度，导致相邻元素左右跳动。
- 导航谬误： 将主要的全局页面导航样式设为分段控件，导致用户期望页面内即时内容更改，从而产生混淆。
- 缺少选定提示： 仅使用微妙的字体粗细更改或低对比度指示器，使低视力用户难以识别哪个选项被选中。
- 键盘陷阱： 无法在控件内绑定标准键盘箭头键，迫使仅使用键盘的用户单独按
Tab键遍历每个选项。 - 移动端挤压： 允许4段控件在移动设备上收缩，直到标签重叠、截断到无法辨认或超出轨道的边界。
验证标准
- 根据控件的功能（单选组与标签页列表），选择了清晰的语义ARIA模式。
- 每个分段满足最小24x24px的触摸目标尺寸（移动端首选44px）。
- 非活动和活动文本对比度符合WCAG AA标准（>= 4.5:1比率）。
- 活动指示器在滑动过渡期间使用硬件加速的CSS属性（
transform）以防止累积布局偏移（CLS）。 - 定义了响应式行为（流体两端对齐、最小宽度或下拉选择回退）。
- 分段内的文本保持单行，无垂直换行或裁剪。
- 明确处理了
@media (prefers-reduced-motion: reduce)过渡回退。