# Steps 步骤条

用于引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤。

# 设计说明

# 使用说明

# 使用规则

步骤条步数建议: 3 ≤ 步数 ≤ 5(点状步骤条除外)。

# 使用场景

当任务负责或者存在先后关系的情况下,将其分解成一系列步骤,简化任务,引导用户按照流程完成任务。

# 体现功能

  • 编号步骤;
  • 显示运动方向(通常是从左到右或从上到下);
  • 区分当前步骤以及剩余步骤;
  • 纳入一个指示步骤成功完成的指标。

# 页面布局

步骤条在页面使用过程中,一般位于页面或内容模块的上方、下方或左侧位置。

# 状态展示

当前流程出现失败或告警状态时,对应步骤条标题和锚点导航变为红色,起到突出警示作用。

# 辨析说明

时间轴、进度条、步骤条常会造成使用者混淆使用,为了正确使用组件,以下为辨析说明:

# 正确示范

当页面或模块宽度有限或步骤数较多情况下,不建议使用横向滚动条,建议精简步骤数或采用竖直步骤条。

# 类型

# 水平步骤条

  • 定义: 步骤按 X 轴⽅向进⾏移动,是步骤条的默认类型,可搭配标题与描述,可采用数字、点状、图标等样式设计。

  • 对齐方式: 整体水平分布画板,为了突出锚点导航,向导标题与备注信息对齐方式采用左对齐。

# 竖直步骤条

  • 定义: 步骤按 Y 轴⽅向进⾏移动,垂直展示,可搭配标题与描述,多用于空间较窄的场景或移动端。

  • 对齐方式: 整体垂直分布画板,向导标题与备注信息对齐方式采用左对齐。

# 简洁风格步骤条

  • 定义: 清晰直观的表达流程包含哪些内容

  • 对齐方式: 整体水平分布画板

# 点状步骤条

  • 定义: 清晰直观的表达流程包含哪些内容。

  • 对齐方式: 整体水平分布画板,锚点导航与向导标题左右居中对齐。

# 文案

当向导表明的任务复杂时,建议简化任务以至于只需少按几个按钮就可以解决问题。

  • 向导标题: 标题应该简短且具有描述性,解释最重要的信息;
  • 备注信息: 简明扼要说明备注信息。

# 交互行为

  • 提供“取消”按钮: 有时候用户由于各种原因,决定不再完成向导。为了避免正在寻找出路的用户感到沮丧,请在向导页面中包含“取消”按钮。
  • 允许回到“上一步”: 如果用户需要修改先前的数据或查看先前的数据,提供“上一步”按钮或通过点击“锚点导航”和“向导标题”回到上一步。
上次更新: 12/13/2023, 10:00:16 AM