Stepper
步骤条
WebMobileDesktop上手难度: 中等
一个需要分几步完成的长流程，用一排编号节点告诉你「现在第几步、还剩几步」。
Live Demo
真的可以点第 2 步 / 共 4 步 · 填写地址
你刚才看到的这个：电商下单的「购物车 › 填写地址 › 支付 › 完成」，或者注册账号时的「第 2 步 / 共 4 步」——都是 Stepper。
它到底是什么
Stepper 的价值是消解「不知道还有多久」的焦虑。它和 Tabs 的区别在于：Stepper 有先后顺序，步骤之间是流程关系；Tabs 是平行的内容切换。
步骤指示器向导步骤step indicatorwizard steps流程步骤
Anatomy · 它由什么组成
Step Node步骤节点
圆圈，内含序号或图标
Connector连接线
已完成部分染色
Label步骤名
已完成 / 当前 / 未开始三态
Current Step当前步骤
高亮 + 加粗
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 任务必须按顺序完成（3–5 步最合适） | 用 |
| 步骤多到用户会担心「还有多久」 | 用 |
| 允许回退到已完成步骤 | 用 |
| 一步就能完成的任务 | 不用 |
| 步骤数量会动态变化 | 视情况 |
一步就能做完的事情硬拆成三步，是纯粹的用户伤害。
超过 5 步时横向排布会挤爆，移动端应改成「第 2 步 / 共 5 步 + 进度条」。
Similar Patterns
别搞混一句话区分：一个需要分几步完成的长流程，用一排编号节点告诉你「现在第几步、还剩几步」。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
把结算流程做成 Stepper，共 4 步：购物车 / 地址 / 支付 / 完成。当前步高亮，已完成步显示对勾，可点击回退到已完成步骤。
不要只对 AI 说
Bad → Better不要这样对 AI 说
加个进度提示让用户知道走到哪了。
改成这样说
结算流程用 Stepper 显示 4 步（购物车/地址/支付/完成）：已完成打勾、当前步高亮、可回退到已完成步骤，移动端改为「第 2 步 / 共 4 步」。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。