步骤条Steps
页面导航展示一项流程包含几步和当前进度
也常被叫作Stepper步骤指示器流程步骤条
步骤条常用于注册、下单和资料提交，让用户知道已经完成什么、接下来做什么。它只展示流程状态；是否可以返回、跳过或等待审核，要由页面操作另外说明。
✓填写信息
2确认订单
3完成支付
容易混淆？这样区分
步骤条Steps≠进度条Progress
步骤条 Steps 展示有名称、有顺序的几个阶段；进度条 Progress 更适合表示上传了多少、处理到多少这类连续进度。
步骤条Steps≠旋转加载指示器Spinner
步骤条 Steps 帮用户完成一段多步流程；旋转加载指示器 Spinner 只是告诉用户系统正在处理，不代表用户进入了下一步。
步骤条Steps≠数字输入框InputNumber
步骤条 Steps 在 Material Design 等体系里也叫 Stepper，表示多步流程；数字输入框 InputNumber 旁的加减控件也可能被叫 Stepper。沟通时最好明确说“流程步骤条”或“数字步进器”。
什么时候用
- 流程有固定先后顺序：下单 → 支付 → 完成1填写信息2确认订单3完成支付
- 长表单拆成几步，一步一步填不压1基本信息2联系方式3完成姓名下一步
- 让用户知道现在第几步、还剩几步，心里有底1下单2支付3收货第 2 步，还差 1 步
- 跨页面的注册 / 发布流程，步骤本身就是导航1创建账号2完善资料3开始使用
什么时候不用
- 只是切换并列内容 → 用 标签页 Tabs1评论2历史3收藏这是并列内容，用标签页
- 步骤之间没有先后顺序，先做哪个都行1头像2昵称3签名先填哪个都行，不算步骤
- 步骤超过五六步，看着就不想开始1填写2验证3协议4问卷5上传6审核7完成七步？用户第一步就放弃了
- 一步能完成的事硬拆成三步1输入邮箱2输入密码3完成登录也要分三步？
组成结构 · Anatomy
✓填写信息
2确认订单
1步骤Step流程中的一环，有等待 / 进行 / 完成 / 出错四种状态
2步骤图标Icon序号、对勾或感叹号，一眼看出状态
3步骤标题Title两到四个字说清这一步干嘛
4连接线Connector串起所有步骤，完成的段会变色
常见变体 · Variants
进行中Current
✓填写信息2确认订单
用户正走到这一步时高亮它
全部完成Finished
✓下单✓支付✓收货
所有步骤走完,给个打勾的交代
出错状态Error
✓下单!支付失败3收货
某一步失败时标红,让人知道去哪改
典型使用场景
电商下单流程
✓确认订单
2支付
3收货
🎧
声阔 Q45 降噪耳机 ×1¥ 899
合计 ¥ 899
多步表单填写
1基本信息
2联系方式
3完成
姓名
所在城市
新用户注册引导
欢迎加入 Museon
还差一步，验证邮箱即可完成注册
✓创建账号
2验证邮箱
3开始使用
2
6
发布审核流程
文章发布进度审核中
✓提交审核
2内容初审
3终审
4发布
📄《山系生活：周末徒步装备清单》已进入内容初审，预计 2 小时内完成