---
title: 步骤条
slug: 步骤条
category: 组件
figma_node_id: 1:9
figma_page_name: ＞步骤条
aliases: [Steps, Stepper, 进度条, 流程步骤, step indicator]
last_extracted: 2026-05-19
status: ok
---

# 步骤条

> 引导用户按既定顺序完成多步操作的流程指示控件。按形态分可操作 / 只读 / 带图标 / 垂直四种，按节点状态枚举当前节点 / 已完成 / 未完成 / 处理中 / 异常五态。每个步骤可携带主标题（"步骤一"）与辅助信息文案。

## 类型与号型

### 步骤条类型（来自 Figma 标签）

| 类型 | 适用场景 |
|---|---|
| 可操作步骤条 | 用于可以随意在节点间切换的场景；点击节点即可跳转 |
| 只读步骤条 | 用于不可在节点间切换的场景；节点只展示状态，不响应点击 |
| 带图标的步骤条 | 适用于需要自定义图标的场景；图标规范同：AIO-聊天输入框-下拉弹窗，具体图标应与含义匹配 |
| 垂直步骤条 | 垂直方向排列的步骤条，常用于竖排布局或窄屏场景 |
| 简易步骤条 | 适用于步骤数较少时，主要引导用户按步骤完成操作 |
| 序号步骤条 | 用数字编号代替图形节点，强调顺序性 |

### 何时使用

- 引导用户按步骤完成较长流程（如设置向导、注册流程、审批流）
- 步骤间存在严格先后顺序时使用
- 步骤数量在 3–7 步范围内最佳；超过 7 步建议拆分阶段或使用导航 + 标题代替

## 尺寸规格

- 桌面端画板与移动端画板分别托管在 `26:2520`（桌面端）与 `26:2513`（移动端）两个 Frame 下
- 步骤展示规则（移动端）：**去掉两侧边距 16px 后均等分**。如共 3 个步骤、375 屏宽：每一步骤在 `(375 - 16×2) / 3` 居中
- 步骤间连线长度取决于实际页面宽度
- 节点之间的连接线为细线（典型描边色 `C-Coolgray50 #E1E6F0`）

## 状态

每个步骤节点的状态枚举：

| 状态 | 含义 |
|---|---|
| 当前节点（current） | 用户当前所处步骤，高亮显示 |
| 已完成（done） | 用户已完成的步骤，常以实心节点 + 对号图标表示 |
| 未完成（todo） | 尚未到达的步骤，弱化显示 |
| 处理中（processing） | 异步任务进行中的中间态 |
| 异常（error / 异常步骤） | 当前步骤失败或卡住，需提示用户处理 |

### Hover / 禁用反馈

> 如果节点不可跳过、回溯，则已完成 / 非下一个节点不可点击，hover 时鼠标指针呈禁用态。

## 颜色与 token

| 用途 | hex | token 名 |
|---|---|---|
| 当前节点 / 主色 | `#3377FF` | 主按钮蓝（同按钮主色） |
| 主文字 | `#11141A` | 主标题文字色 |
| 正文文字 | `#17181A` | 步骤标题正文色 |
| 辅助文字 | `#5C6373` | 「这是辅助信息文案」灰色描述 |
| 占位 / 未完成文字 | `#878D99` | `C-Coolgray60` 未完成节点文字 |
| 一级分隔 / 连接线 | `#E1E6F0` | `C-Coolgray50` 步骤间连线 |
| 浅灰背景 | `#F7F8FA` | `C-Coolgray20` 卡片底色 |
| 描述文字次级 | `#5C6473` | 极相近的描述灰，与 `#5C6373` 区分 |
| 渐变装饰底 | `linear-gradient(-64deg, rgba(51,119,255,0) 0%, rgba(51,119,255,0.06) 100%)` | 步骤条容器装饰渐变 |

异常态颜色未在本页 globalVars 中以独立 fill 给出，结合「异常」语义推断使用警示红（`Vermilion60 #FF5040`）。

> 关联色彩 token 见 [色彩](../基础/色彩.md)。

## 间距与排布

- **水平步骤条**：节点中心点在每个等分区间居中，热区与每个步骤所占区间相同
- **垂直步骤条**：节点垂直堆叠，连接线为短竖线，常用于侧边导航或窄屏
- 节点直径与节点—文字之间的间距未在 globalVars 单独标注，需配合 Figma 实例尺寸量取
- 字体规范：
  - 主标题（步骤名 / 24px）：PingFang SC Medium 24px / 行高 24px
  - 正文（步骤名 / 12px）：PingFang SC Medium 12px / 行高 12px
  - 辅助文案：PingFang SC Regular 12px

## 文案规则

- 步骤名优先用 2–5 字短语（"步骤一" / "填写信息" / "确认提交"）
- 辅助信息文案用于补充说明步骤目的，避免与步骤名重复
- 异常步骤需配合明确的错误描述（在外层 Toast / Banner 中给出原因）

## 交互行为

按交互行为分两类：

### 主要交互：通过页面按钮推进

> 点击页面中"上一步"、"下一步"按钮（主要）。

- 第一步中，"上一步"按钮隐藏 / 置灰
- 最后一步中，"下一步"按钮替换为"提交"等话术
- 按钮位置取决于实际页面内容

### 辅助交互：直接点击步骤条节点

> 点击步骤条中的节点。

- 仅可操作步骤条支持节点点击跳转
- 如果节点不可跳过、回溯，则已完成 / 非下一个节点不可点击，hover 时鼠标指针呈禁用态
- 只读步骤条节点完全不响应点击

### 进度反馈

- 已完成节点显示对号图标（来自 `移动端列表/对号` 组件）
- 处理中节点显示动效或处理中文字
- 异常节点显示警示态视觉

## 示例

![移动端步骤条总览](../图片/组件/步骤条/mobilestepsoverview.png)
![桌面端步骤条总览](../图片/组件/步骤条/desktopstepsoverview.png)
![可操作步骤条](../图片/组件/步骤条/mobilestepsoverview.png)
![只读步骤条](../图片/组件/步骤条/mobilestepsoverview.png)
![带图标的步骤条](../图片/组件/步骤条/mobilestepsoverview.png)
![垂直步骤条](../图片/组件/步骤条/mobilestepsoverview.png)
![简易步骤条](../图片/组件/步骤条/mobilestepsoverview.png)
![序号步骤条](../图片/组件/步骤条/desktopstepsoverview.png)
![步骤节点状态-当前节点](../图片/组件/步骤条/mobilestepsoverview.png)
![步骤节点状态-异常步骤](../图片/组件/步骤条/mobilestepsoverview.png)

## 设计考量 / 原文摘录

> 步骤展示规则：去掉两侧边距 16px 后，均等分（如共 3 个步骤，则每一步骤在（375-16×2）/3 居中），热区与每个步骤所占区间相同。
>
> 线条长度取决于实际页面宽度。
>
> 按钮位置取决于实际页面内容。
>
> 如果节点不可跳过、回溯，则已完成 / 非下一个节点不可点击，hover 时鼠标指针呈禁用态。

- **以页面按钮为主交互通道**：步骤条本身是次要导航，主推进力来自页面"上一步 / 下一步"按钮
- **可点击节点的能力受流程刚性约束**：跳过 / 回溯权限由业务定义，非组件默认能力
- **辅助文案是可选信息**：步骤名足够清晰时可省略辅助文案，避免视觉拥挤

## 不推荐用法

- 步骤数 > 9 时使用步骤条（建议拆分阶段或使用 [面包屑](面包屑.md)）
- 在不存在先后顺序的页面间使用步骤条
- 同时显示步骤条与水平 Tabs，导致导航语义混乱
- 异常步骤无明确错误提示（用户不知道下一步如何处理）
- 步骤名使用动词长句（超出节点容器宽度）

## 关联

- 推进步骤条的「上一步 / 下一步」按钮见 [按钮](按钮.md)
- 异常态错误提示见 [横幅提示](横幅提示.md) / [Toast](Toast.md)
- 步骤切换中的加载反馈见 [加载](加载.md)
- 步骤条中的对号 / 自定义图标见 [图标](../基础/图标.md)
- 色彩 token 见 [色彩](../基础/色彩.md)
