适用：
- 有明确步骤流程的场景，如注册，新建等等
不适用：
-
步骤数量不确定或超过 6 步的场景
-
无明显顺序逻辑的场景，强制分步只会让用户觉得困惑
通用原则
步骤组件需明确显示用户当前的进度，包括已完成的步骤，当前步骤，以及剩余步骤。步骤组件给用户安全感、可控感。
-
3-6步
- 通常适合 3-6 步使用，过多的步骤与过于复杂的流程会挑战用户的耐心
-
逻辑性
- 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
-
引导性
-
通过一系列逻辑/编号步骤显示进度
-
展示一共具有多少步骤
-
表明当前所处步骤
-
表明步骤的各种状态，例如：未开始、正在进行、已完成和报错等状态
-
可对于步骤进行简要的解释
-
-
可用于步骤之间导航
- 可通过点击直接跳转到某个已完成的步骤
-
保存步骤后，可能会显示瞬态反馈消息（按需）
-
类型
| 类型 | 何时使用 |
|---|---|
| 水平展示 | 最常用的类型，适合步骤数少的场景。 |
| 垂直展示 | 步骤数较多时 |
| 迷你 | 水平展示基础上的简化版，适合页面中单个模块内使用 |
| 指向引导 | 严格的线性操作场景 |
水平展示
-
步骤自动按 X 轴方向进行移动
-
可搭配标题与描述
-
步骤数可自定义为其他图形
垂直展示
-
步骤按 Y 轴方向进行移动
-
可搭配标题与描述
-
步骤数可自定义为其他图形
迷你
-
基于「水平方向」类型补充的类型，样式更简单，尺寸更小。
-
通常不带描述，仅有标题做简单说明
-
步骤数可自定义为其他图形
指向引导
-
步骤按 X 轴方向进行移动
-
样式固定，无配图，无描述
-
只能严格按步骤进行，不可跳过任何一步
构成
-
步骤数 + 标题
-
步骤数
-
默认为数字，已完成的步骤则变为完成图形
-
步骤数可自定义为其他图形
-
-
标题
-
通常为词语或短语
-
纯文本
-
不允许折行
-
-
-
描述（可选）
-
纯文本
-
言简意赅，短句为佳
-
不允许折行，不需要增加
Link
-
-
步骤进度条
- 步骤与步骤之间的连接线，已完成的步骤间连接线需区别于未完成的。
行为
已完成的结点
-
用户已经完成的步骤
-
可根据实际需要确定是否可以点击回退
进行中的结点
-
指示当前所处的任务阶段
-
不可再次点击
-
如果当前结点出现错误，可按需禁止进入下一步
-
待进行的结点
用户未执行的结点
可根据实际需要确定是否可以点击提前查看
可点击
-
鼠标 hover 需给出可点击的反馈
-
点击之后，结点进入选中状态
不可点击
鼠标 hover 无反馈，不可点击
加载中
-
某一个结点正在提交数据
-
不可操作，直至加载结束
实践案例
样式
布局
