步骤条Steps
你可能会说
下单分三步，顶部要显示现在走到第几步了。
步骤条是展示多步流程及当前进度的导航与状态组件注册可显示“填写信息、验证邮箱、完成”，让用户知道当前在哪一步。它只展示状态；能否返回、跳过或等待审核需要页面另外说明。
也常被叫作Stepper步骤指示器流程步骤条
你可以这样告诉 AI Agent
结账流程请加入 Steps，清楚标出地址、配送、付款和确认；当前步骤、已完成步骤和可返回步骤要可见。完成地址后进入配送，再返回修改地址，确认步骤状态与已保存内容一致。
容易混淆？这样区分
步骤条Steps≠进度条 Progress
步骤条 Steps 展示有名称、有顺序的几个阶段；进度条 Progress 更适合表示上传了多少、处理到多少这类连续进度。
步骤条Steps≠旋转加载指示器 Spinner
步骤条 Steps 帮用户完成一段多步流程；旋转加载指示器 Spinner 只是告诉用户系统正在处理，不代表用户进入了下一步。
步骤条Steps≠数字输入框 Number Input
步骤条 Steps 在 Material Design 等体系里也叫 Stepper，表示多步流程；数字输入框 Number Input 旁的加减控件也可能被叫 Stepper。沟通时最好明确说“流程步骤条”或“数字步进器”。
什么时候用
- 流程有固定先后顺序：下单 → 支付 → 完成1填写信息2确认订单3完成支付
- 长表单拆成几步，一步一步填不压1基本信息2联系方式3完成姓名下一步
- 让用户知道现在第几步、还剩几步，心里有底1下单2支付3收货第 2 步，还差 1 步
- 跨页面的注册 / 发布流程，步骤本身就是导航1创建账号2完善资料3开始使用
什么时候不用
- 切换平级内容时应使用 标签页 Tabs，而不是步骤条1评论2历史3收藏这是并列内容，用标签页
- 步骤之间没有先后顺序，先做哪个都行1头像2昵称3签名先填哪个都行，不算步骤
- 步骤较多且缺少分组，流程显得冗长 → 拆成阶段或分页任务1填写2验证3协议4问卷5上传6审核7完成步骤过多会增加完成负担，应合并不必要环节
- 一步能完成的事硬拆成三步1输入邮箱2输入密码3完成简单登录不需要拆成多个步骤
组成结构 · Anatomy
✓填写信息
2确认订单
流程中的一环，有等待 / 进行 / 完成 / 出错四种状态
序号、对勾或感叹号用于标记步骤状态
用简短文字说明当前步骤
串起所有步骤，完成的段会变色
常见变体 · Variants
进行中Current
✓填写信息2确认订单
用户正走到这一步时高亮它
全部完成Finished
✓下单✓支付✓收货
所有步骤完成后显示完成状态
出错状态Error
✓下单!支付失败3收货
某一步失败时，标出失败步骤并提供修正指引
典型使用场景
电商下单流程
✓确认订单
2支付
3收货
🎧
声阔 Q45 降噪耳机 ×1¥ 899
合计 ¥ 899
多步表单填写
1基本信息
2联系方式
3完成
姓名
所在城市
新用户注册引导
欢迎加入 Museon
还差一步，验证邮箱即可完成注册
✓创建账号
2验证邮箱
3开始使用
2
6
发布审核流程
文章发布进度审核中
✓提交审核
2内容初审
3终审
4发布
📄《山系生活：周末徒步装备清单》已进入内容初审，预计 2 小时内完成
快速练习