1. 组件来源

Stepper 的源头其实很「烟火气」：早期桌面时代Windows系统、以及Photoshop 那些老软件的安装向导大都分为“Welcome → License → Choose Folder → Install → Finish” 等安装步骤。

因为软件很复杂，厂商怕用户被一整个长表单吓跑，所以拆成几页，并在顶部画一串步骤，让用户知道自己没迷路。

线下世界的影子： 报税、办银行卡、医院就诊，其实也都有隐形 Stepper：先挂号，再分诊，再检查，再开药。 人类本能地用「阶段」来理解复杂流程——我们不擅长面对“一个巨大的任务”，但很擅长“完成第 1 步、再完成第 2 步”。

早期 Web / 后来移动端： 当表单、注册流程、申请流程搬到线上之后，开发者发现： 一页堆满几十个字段，转化率惨不忍睹； 拆成几页，并告诉用户“总共就这几步”，成功率明显上升。于是，Stepper 从「辅助说明」升级成了一等公民组件：它不再只是装饰，而是产品里用来管理复杂任务的「仪式化骨架」。

2. 工作原理

从表面看，Stepper 就是：几颗点 + 一根线 + 几个标题。从系统和认知的角度看，它同时在做三件事：

1. 定义这件事有几个阶段（阶段边界）
2. 标记你现在在哪个阶段（当前定位）
3. 告知你离终点还有多远（进度预期）

2.1 设计视角

对于设计者而言，设计和使用Stepper关键不是逻辑，而是“策略”，设计者必须关注：

• 哪些步骤可以跳过？
• 修改前面内容会不会影响后面？
• 在哪个节点保存草稿？
• 错误是停留在当前步骤，还是回到有错误的那一步？

这些策略决定了 Stepper 是“温柔的教练”，还是“严苛的监工”。

2.2 用户视角

用户真正感知到的，不是状态机，而是：

• 「我现在在哪？」
• 「还要多久？」
• 「如果中途有问题，我还能回头吗？」

所以，一个 Stepper 是否「好用」，核心在于它能不能建立：

1. 位置感： “我知道现在是第几步，这一步干嘛。”
2. 边界感： “我大致知道还有几步、每一步要干嘛，流程不会无限延伸。”
3. 掌控感： “我可以回头修正，不会一不小心就把自己弄得很被动。”

技术上只是一串状态，心理上却是一个被可视化的旅程。