# 步骤条

步骤条是引导用户按步骤完成任务的导航条。

## 使用规则

- 需要用户完成复杂任务时，可将任务拆分成存在先后关系的一系列步骤，引导用户阶段性完成。
- 非引导用户操作，只展示流程状态的场景，应使用时间轴。

## 组成要素

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/c564994dd4445c8d60d7f13c6c7620ee_vYjfZKtlDP.png?height=402&lazyload=true&maxWidth=800&width=2048)

1. **步骤节点**:  以图形化的方式展示步骤条中每个节点的状态
1. **标题**:   每个步骤的标题文本
1. **辅助说明（可选）**:   进一步说明当前步骤需要传达的信息
1. **连接线** :  串联起每一个步骤节点，组成完整的步骤条

## 控件类型

### 类型总览

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/cfaac28a6235d04e8bddc5a193fe1501_2rp17nqAtU.png?height=1144&lazyload=true&maxWidth=800&width=2048)

步骤条根据页面中的使用位置可分为横向和纵向两类。每种类别提供基础步骤条与空间有限时使用的简单步骤条。

### 基础步骤条

- 基础步骤条分为横向与纵向两种，基本构成元素一致

- 步骤条中节点个数通常建议在3-7个之间，大于 7 步的任务应考虑优化任务流程

- 根据需求，可以自定义节点的icon

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/62f1af5e8412148dc0b227ad267f3067_z8Wh5RFp4w.png?height=1258&lazyload=true&maxWidth=800&width=2048)

### 简单步骤条

- 多用于页面空间受限，或不需要在视觉上强调步骤条的场景

- 步骤条中节点个数通常建议在 3-7 个之间，大于 7 步的任务应考虑优化任务流程

- 推荐在标题文本中使用数字作为前缀

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/19493868658cdb9acad21b39bb137dbe_cvZ79mo5fW.png?height=990&lazyload=true&maxWidth=800&width=2048)

## 通用样式规则

### 尺寸说明

- 应尽量保证同一步骤条中节点文字的区域长度、宽度保持一致

- 标题使用祈使句，简短清晰，尽量一行展示完整。最多不超过两行，超出需要考虑优化文案

- 纵向步骤条的标题对齐规则：基础型标题与节点中心对齐。点状型标题首行与节点中心对齐

- 辅助说明内容最多不超过两行，超出则优先考虑优化文案，展示不全时省略超出内容

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/aa48a7a8e83bfea3294d1dcf4fb8e4ce_aXQqqi5xxe.png?height=1576&lazyload=true&maxWidth=800&width=2880)

<br>
**横向步骤条自适应：**

- 横向步骤条位于步骤内容的上方。每个步骤节点宽度保持一致，等宽自适应

- 横向步骤条推荐使用 24px 的步骤间距

- 横向步骤条的整体宽度可以根据所处的容器进行自定义。当容器宽度受限，步骤间距可以动态变化，支持最小间距为0，继续缩小浏览器宽度，步骤条不做进一步自适应

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/e9d058213c01fa8a0ae3d125c2d0c458_l05qcxHuE0.png?height=728&lazyload=true&maxWidth=800&width=2048)

<br>
**纵向步骤条自适应：**

- 纵向步骤条位于步骤内容的左侧。每个步骤节点高度保持一致，按照最大尺寸步骤等高自适应

- 纵向步骤条的间距可根据内容调整，使用 4 的倍数

- 纵向步骤条的整体宽度不限制，根据实际场景判断

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/6939d7d5e71ff653abc38f2b6546f90e_e9dnhdTSbx.png?height=874&lazyload=true&maxWidth=800&width=2880)

### 交互说明

步骤条通常会与上一步/下一步等按钮配合使用。可根据需求，配置步骤节点是否为可点击：

- 无法点击的节点，鼠标 Hover 时无变化
- 可点击的节点，点击后，前序步骤节点默认已完成，后续节点默认未开始

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/e36b9d5c5d19c99c4f99e31270ba565e_h1VUItVYo7.png?height=1964&lazyload=true&maxWidth=800&width=2048)

### 特殊交互

若需要点击切换操作步骤，但不改变步骤状态，可以考虑搭配分页Tab使用。

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/35adaa74c846ed4a790a366698c59266_uuARGLtqrZ.png?height=286&lazyload=true&maxWidth=800&width=2048)

## 步骤条 Steps 与 时间轴 Timeline 对比

- 步骤条：为帮助用户完成复杂任务的而拆分的步骤（例如表单填写场景），使任务操作简单易行。通常为 3-7 个节点。标题与描述多使用祈使句，字数少
- 时间轴：多用于对事件的追溯，通过每一步的具体时间点为核心线索，使记录的事件详细清晰。多使用陈述句，字数较多