步骤与进度系统 是做什么的？
目的
步骤与进度系统技能提供了一种方法论，用于设计和文档化用户在多步骤流程或等待后台任务时的进展。它确保复杂的工作流（如结账或用户引导）被分解为可管理的块，通过告知用户当前的位置、已完成和剩余任务来降低认知负荷。
使用场景
- 电商结账： 引导用户完成配送、支付和确认。
- 多步骤表单： 将长数据录入任务分解为逻辑区块。
- 用户引导： 可视化新账户的设置过程。
- 加载/上传状态： 传达长时间运行操作的进度。
- 学习路径： 展示课程或学习大纲中的进展。
何时不使用
- 单视图任务： 如果一个任务可以在一个视图中完成且无需切换上下文，进度系统只会增加不必要的干扰。
- 无限滚动： 滚动浏览内容，没有明确的“结束”点。
- 关键高速交互： 显示进度指示器的延迟会影响时间敏感任务（例如实时游戏 UI）。
输入
- 步骤清单： 完成任务所需的离散阶段列表。
- 任务类型： 是用户驱动的序列（步进器）还是系统驱动的过程（进度条）？
- 线性性： 步骤必须按顺序完成，还是用户可以跳跃？
- 内容限制： 每个步骤的标签、描述和图标。
输出
- 进度框架： 组件类型的定义（水平、垂直或圆环）。
- 状态矩阵： “待处理”、“活动”、“完成”和“错误”状态的视觉规范。
- 响应式策略： 指示器如何适应移动视口（例如隐藏标签、切换为数字）。
- 可访问性规格： ARIA 角色、活动区域和键盘交互规则。
工作流
1. 分类进度类型
确定最合适的视觉模式：
- 水平步进器： 最适合桌面端 3–5 步的线性过程。
- 垂直步进器： 最适合非线性过程、步骤内容长度不一或移动优先的流程。
- 连续进度条： 最适合系统驱动的任务（上传、加载）或具有大量微步骤的过程。
- 进度圆环： 最适合仪表盘小部件或空间极度有限的情况。
2. 定义步骤层次和标签
- 主标签： 步骤的简洁名称（例如“配送”）。
- 辅助标签（可选）： 简短描述或状态（例如“进行中”）。
- 视觉指示： 数字（用于顺序）、图标（用于上下文）或点（用于极简设计）。
3. 建立状态可视化
为每个状态定义清晰的视觉区别：
- 待处理： 低对比度，通常显示为灰色。
- 活动： 高对比度，通常使用主品牌色或“发光”效果。
- 完成： 使用“勾选”图标和独特的颜色（通常是绿色或活动颜色的柔和版本）。
- 错误： 使用“警告”图标和语义错误颜色（红色）。
4. 设计动效和反馈
- 过渡： 在步骤之间使用微妙的动画来加强进展感。
- 可点击性： 确定用户是否可以点击之前的步骤返回。
- 验证： 可视化步骤有效/已完成，以允许继续。
5. 规划响应式适配
多步骤指示器在移动端容易出现问题：
- 标签精简： 在移动端隐藏文本标签，只显示数字或图标。
- 转换为“第 X 步，共 Y 步”： 用简单的文本或数字摘要替换完整的可视化条。
- 垂直转换： 在小屏幕上将水平条转换为垂直列表。
决策规则
- 5 步规则： 如果水平步进器超过 5 个步骤，切换到垂直步进器或简单的“第 X 步，共 Y 步”文本指示器，以避免杂乱。
- 图标 vs. 数字： 如果顺序至关重要，使用数字；只有在图标能提供即时语义价值时才使用图标（例如支付的“信用卡”图标）。
- 线性性： 如果用户必须按顺序完成步骤，禁用对“未来”步骤的点击。如果是灵活的设置，允许跳跃。
- 上下文保留： 始终显示当前、上一个和下一个步骤的标签。其他步骤必要时可以截断。
约束
- 可访问性：
- 对于连续条，使用
role="progressbar"，搭配aria-valuenow、aria-valuemin、aria-valuemax和人类可读的aria-valuetext（例如“第 2 步，共 4 步：支付”）。 - 使用
aria-current="step"标识序列中的活动步骤。 - 确保活动步骤与未激活步骤的对比度满足 WCAG AA（4.5:1）。
- 如果步骤可点击，其目标区域必须满足 WCAG 2.2 SC 2.5.8（最小 24x24px，建议 44px），并暴露可见的
:focus-visible状态。
- 对于连续条，使用
- 层级： 进度指示器应该是指引，而非主要焦点。通常位于内容顶部（水平）或左侧（垂直）。
- 响应性： 不得造成水平溢出。
常见失败模式
- “神秘进度”： 显示条但没有标签或百分比，让用户疑惑“还要多久？”
- 不可访问的状态： 仅使用颜色（如绿色 vs. 灰色）表示完成，而没有图标或文本。
- 拥挤的水平布局： 在水平布局中强制放置过多步骤，导致移动端文本重叠或点击目标过小。
- 缺乏持久性： 在多步骤流程的某些页面隐藏进度指示器，导致用户失去位置感。
验证标准
- 当前步骤与已完成和即将到来的步骤有明显区分。
- 完成的步骤使用非颜色的指示器（如对勾标记）。
- 移动视图功能正常，不会溢出或杂乱。
- ARIA 角色和
aria-current正确应用。 - 系统处理单个步骤的“错误”状态。
- 指示器在流程的所有步骤中位置一致。