# Steps 步骤条
用于引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤。
# 设计说明
# 使用说明
# 使用规则
步骤条步数建议: 3 ≤ 步数 ≤ 5(点状步骤条除外)。
# 使用场景
当任务负责或者存在先后关系的情况下,将其分解成一系列步骤,简化任务,引导用户按照流程完成任务。
# 体现功能
- 编号步骤;
- 显示运动方向(通常是从左到右或从上到下);
- 区分当前步骤以及剩余步骤;
- 纳入一个指示步骤成功完成的指标。
# 页面布局
步骤条在页面使用过程中,一般位于页面或内容模块的上方、下方或左侧位置。
# 状态展示
当前流程出现失败或告警状态时,对应步骤条标题和锚点导航变为红色,起到突出警示作用。
# 辨析说明
时间轴、进度条、步骤条常会造成使用者混淆使用,为了正确使用组件,以下为辨析说明:
# 正确示范
当页面或模块宽度有限或步骤数较多情况下,不建议使用横向滚动条,建议精简步骤数或采用竖直步骤条。
# 类型
# 水平步骤条
定义: 步骤按 X 轴⽅向进⾏移动,是步骤条的默认类型,可搭配标题与描述,可采用数字、点状、图标等样式设计。
对齐方式: 整体水平分布画板,为了突出锚点导航,向导标题与备注信息对齐方式采用左对齐。
# 竖直步骤条
定义: 步骤按 Y 轴⽅向进⾏移动,垂直展示,可搭配标题与描述,多用于空间较窄的场景或移动端。
对齐方式: 整体垂直分布画板,向导标题与备注信息对齐方式采用左对齐。
# 简洁风格步骤条
定义: 清晰直观的表达流程包含哪些内容
对齐方式: 整体水平分布画板
# 点状步骤条
定义: 清晰直观的表达流程包含哪些内容。
对齐方式: 整体水平分布画板,锚点导航与向导标题左右居中对齐。
# 文案
当向导表明的任务复杂时,建议简化任务以至于只需少按几个按钮就可以解决问题。
- 向导标题: 标题应该简短且具有描述性,解释最重要的信息;
- 备注信息: 简明扼要说明备注信息。
# 交互行为
- 提供“取消”按钮: 有时候用户由于各种原因,决定不再完成向导。为了避免正在寻找出路的用户感到沮丧,请在向导页面中包含“取消”按钮。
- 允许回到“上一步”: 如果用户需要修改先前的数据或查看先前的数据,提供“上一步”按钮或通过点击“锚点导航”和“向导标题”回到上一步。