界面图鉴
步骤条Stepper
步骤条到底是什么？和标签页、面包屑长得都有点像，怎么分？
一串按顺序排开的步骤节点，标出你在第几步、还剩几步，把长流程切成小口。
01 · 拆开看看
这一块由什么组成
名字来自 step——一步一步来。它把一条长流程切成几段，每段一个节点，告诉你走到哪、还剩几步、能不能回头。组成：
节点Node
一个圆圈，里面是序号或对勾。
连线Connector
节点之间的那条线，走过的部分会变色。
标签Label
每一步叫什么：填资料、验证邮箱。
状态State
已完成、进行中、未到达——三种样子一眼分得清。
02 · 常见变体
同一个零件，几种摆法
桌面端最常见，节点一字排开。
每步下面可以放说明和表单。
手机 onboarding 常用，只剩几个小点。
03 · 火眼金睛
这个页面里，哪一个是步骤条？
四条横着排的东西，只有一条在说「你走到第几步了」。
点一块试试，看看它叫什么
不是它。标签页是几个平级视图，想先看哪个都行，没有先后。
不是它。面包屑说的是「你在站点的第几层」，是位置，不是流程。
就是它！三个节点串成一线，前面打了勾、中间点亮、后面还灰着——这就是流程的进度。
不是它。进度条是一段连续的量（62%），步骤条是几个离散的站。
04 · 用与不用
什么时候该上它
- 三步以上的线性流程：注册、下单、配置向导
- 步骤之间有先后依赖
- 用户需要知道「还要多久才填完」
- 只有两步——直接放两个按钮
- 步骤可以任意顺序——那是标签页
- 表示网站的层级位置——那是面包屑
05 · 想一想
一道题，检查眼力
注册流程是「填资料 → 验证邮箱 → 设置密码」，必须按顺序来。顶部导航用什么？
标签页可以乱序跳，用户会直接跳过验证邮箱。有先后依赖的流程不能用它。
对。步骤条既显示进度，又通过「未到达的步骤不能点」把顺序锁住了。
面包屑表示层级位置，不表示流程进度——它不会告诉用户还剩几步。
06 · 说给 AI 听
让 AI 改它时，这样说
说清能不能回头、能不能跳步——这两条规则决定了它是向导还是标签页。
把注册表单拆成三步的 stepper，顶部显示当前第几步
已完成的步骤显示对勾，可以点回去修改
未到达的步骤不能点，灰掉
手机上把 stepper 改成小圆点，只显示当前步骤名
最容易踩的坑
步骤条是承诺：写了「共 3 步」就别在第 3 步之后突然冒出第 4 步。还有，步数超过 5 个就该合并了——没人想看到「第 2 步，共 9 步」。