Step 步骤

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

用法

适用：

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

不适用：

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

通用原则

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

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

格式

类型

水平展示

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

垂直展示

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

迷你

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

指向引导

• 步骤按 X 轴方向进行移动
• 样式固定，无配图，无描述
• 只能严格按步骤进行，不可跳过任何一步

构成

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

行为

已完成的结点

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

进行中的结点

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

用户未执行的结点

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

可点击

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

不可点击

鼠标 hover 无反馈，不可点击

加载中

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

实践案例

<carousel-form header-style='2' titles="stepTitles" cancel="ok()">
  <slide-form valid="valids.stepOneOver()" active="slide.active" is-add="true" tab-index="0" on-enter="initBlock1()">
    <form class="maincontent" style="width: 100%;padding-bottom:50px" name="form1">
      <input type="hidden" id="form1" value="{{form1.$valid}}">
      ...
    </form>
  </slide-form>
  <slide-form valid="valids.stepTwoOver()" is-add="true" tab-index="1" on-enter="initBlock2()">
    <form class="maincontent createVms" style="width: 100%;padding-bottom:50px" name="form2">
      <input type="hidden" id="form2" value="{{form2.$valid}}">
      ...
    </form>
  </slide-form>
  <slide-form valid="valids.stepThreeOver()" is-add="true" tab-index="2" on-enter="initBlock3()">
    <form class="maincontent createVms" style="width: 100%;padding-bottom:50px" name="form3">
      <input type="hidden" id="form3" value="{{form3.$valid}}">
      ...
    </form>
  </slide-form>
  <carousel-tables>
  </carousel-tables>
</carousel-form>