亦称步骤导航，通过按序列将任务流程分解为多个步骤，体现任务过程的方向和其中的各个关键环节，引导用户按流程完成任务。

用法

适用：

  • 有明确步骤流程或者存在先后关系的场景，如注册，新建等等

不适用：

  • 步骤数量不确定的场景
  • 无明显顺序逻辑的场景，强制分步只会让用户觉得困惑

通用原则

步骤组件需明确显示用户当前的进度，包括已完成步骤、当前步骤、剩余步骤。步骤组件给用户安全感、可控感。

  • 3-6步
    • 通常适合 3-6 步使用，过多的步骤与过于复杂的流程会挑战用户的耐心
  • 逻辑性
    • 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
  • 引导性
    • 通过一系列逻辑/编号步骤显示进度
      • 展示一共具有多少步骤
      • 表明当前所处步骤
      • 表明步骤的各种状态，例如：未开始、正在进行、已完成和报错等状态
      • 可对于步骤进行简要的解释
    • 步骤之间可导航，通过点击直接跳转到某个已完成的步骤
    • 保存步骤后，可能会显示瞬态反馈消息（按需）

格式

类型

类型 何时使用
水平展示 最常用的类型，适合步骤数少的场景。
垂直展示 步骤数较多时或者横向空间充足时
点状（暂时不用） 简化版步骤条，可在页面中单个模块内使用，节约空间

水平展示

image.png

  • 步骤自动按 X 轴方向进行移动
  • 可搭配标题与描述
  • 步骤数可自定义为其他图形

垂直展示

image.png

  • 步骤按 Y 轴方向进行移动
  • 可搭配标题与描述
  • 步骤数可自定义为其他图形

点状（暂时不用）

image.png

  • 基于「水平方向」类型补充的类型，样式更简单，尺寸更小。
  • 通常不带描述，仅有标题做简单说明
  • 步骤数可自定义为其他图形

构成

image.png

  1. 步骤数 + 标题
    • 步骤数
      1. 默认为数字，已完成的步骤则变为完成图形
      2. 步骤数可自定义为其他图形
    • 标题
      1. 通常为词语或短语
      2. 纯文本
      3. 不允许折行
  2. 描述（可选）
    • 纯文本
    • 言简意赅，短句为佳
    • 允许折行
  3. 步骤进度条
    • 步骤与步骤之间的连接线，已完成的步骤间连接线需区别于未完成的。

行为

已完成的结点

  • 用户已经完成的步骤
  • 可根据实际需要确定是否可以点击回退

进行中的结点

  • 指示当前所处的任务阶段
  • 不可再次点击
  • 如果当前结点出现错误，可按需禁止进入下一步
  • 待进行的结点

用户未执行的结点

可根据实际需要确定是否可以点击提前查看

可点击

  • 鼠标 hover 需给出可点击的反馈
  • 点击之后，结点进入选中状态

不可点击

鼠标 hover 无反馈，不可点击

加载中

  • 某一个结点正在提交数据
  • 不可操作，直至加载结束

实践案例

image.png