跳到主要内容
Termlib

布局模式 · 操作流程

分步向导

Wizard

也叫：分步表单、步骤向导、多步表单、Stepper、Multi-step Form

把一个较长的操作拆成几个有先后顺序的步骤，每屏只处理一步，顶部步骤条显示进度，用上一步、下一步推进。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

这个开通流程请做成分步向导（Wizard）：顶部步骤条显示「基本信息、选择套餐、确认支付、完成」四步，已完成的步骤显示对勾，当前步骤高亮；中间只显示当前步骤的表单；底部左侧「上一步」、右侧「下一步」。进入下一步前先校验本步字段，返回上一步时保留已填内容，最后一步按钮改为「提交」。

发给

01判断

你的内容是这样吗？

对照两列，确认分步向导是不是你要找的。

符合这些情况，用分步向导

  • 操作有明确的先后步骤，后一步依赖前一步的结果时
  • 需要填写的字段很多（十几个以上），可以按主题分成三到五组时
  • 用户第一次完成某件事、需要被一步步引导时

是这些情况，换成别的

  • 字段不多（十个以内）、彼此没有先后关系时

    改用单页表单

  • 用户需要反复回来单独修改其中某一项时

    改用设置页

  • 只读展示内容、没有填写或选择操作时

    改用描述列表

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    只有四五个字段也拆成三步，每一步只有一个输入框

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    返回上一步时已填的内容被清空

  3. 03

    没有步骤条，用户不知道一共几步、还剩多少

  4. 04

    点「下一步」不校验，到最后提交时才一次性报出前面所有步骤的错误

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

顶部是横向步骤条，中间是当前步骤的内容区（通常是一小段表单），底部是「上一步」「下一步」按钮栏。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1顶部一排带序号或对勾的步骤节点，用线连起来
  2. 2中间只有少量表单字段
  3. 3底部有「上一步」「下一步」按钮

04解释

详细解释

分步向导把一件复杂的事拆成三到五步，比如「填写基本信息 → 选择套餐 → 确认支付 → 完成」。页面顶部是步骤条，标出当前在第几步、前面哪些已完成；中间只显示当前这一步要填写或选择的内容；底部是「上一步」和「下一步」按钮，最后一步变成「提交」。

这样设计是为了降低心理负担：面对一个有三十个字段的长表单，很多人会直接放弃；拆成几步后，每步只有几个问题，用户知道还剩多少，更容易坚持填完。后面的步骤还可以根据前面的选择动态变化。

它和单页表单的区别是步骤之间有依赖或明确顺序；如果字段没有先后关系、总数也不多，拆成多步只会增加点击次数。它和设置页也不同：设置页是随时回来改某一项，向导通常只从头到尾走一遍。

开发者信息
术语 ID
layout-wizard
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .ant-steps
  • .el-steps
  • .arco-steps
  • .t-steps
  • .n-steps
  • .MuiStepper-root
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • wizard
  • onboarding
  • multi-step
  • step-form
  • multi-step-form
  • checkout-steps
  • setup-wizard
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Wizard
  • Onboarding
  • MultiStepForm
  • StepForm
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30