多步表单
Wizard
别名:多步表单分步填写向导步骤表单一步步填的表单wizardstepper form
这是什么
把长表单拆成有序步骤,每步聚焦少量字段,逐步推进到完成。用步骤指示器标出进度与当前位置,用户可回看已完成步骤、修正后再前进,末步通常汇总确认。它把"填不完的大表单"变成可完成的小任务,降低单屏认知负荷。
交互实验室
试一试,再决定怎么用正在加载实验室…
✓ 适用场景
- 字段超过约 8 个,且可按主题自然分组
- 填写有先后依赖,后一步答案取决于前一步
- 注册、预订、开户、理赔等长流程申请
✕ 不适用场景
- 字段很少,一屏填完比翻步骤更快
- 步骤之间毫无依赖,强制线性只会碍事
- 用户需要反复对照全部字段(如并排比较填写)
常见形式
线性
Linear
严格一步一步推进,不可跳步,最常见
自由顺序
Free-order
步骤可点击跳转,已完成步打勾
带确认步
With review
末步汇总全部答案,提交前可回改
实现要点
gridflexboxaria-current="step"fieldset步骤指示用有序列表,当前步标 aria-current="step",完成步可点击回跳;每步内容放在 fieldset + legend 内表达分组。切换步时先跑本步校验,通过再前进;数据在内存中累积, 提交才落库。移动端把指示器压缩为"第 N/共 M 步"。尊重 prefers-reduced-motion, 步间切换可只做淡入或无动画。
相关概念
在用户填写表单的过程中或提交时检查输入合法性,并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改",而不是提交后被一整个错误页打回。
交互模式搭配使用用有序节点展示任务的阶段、当前位置和已完成步骤的进度组件。它通常与分步表单配合,把较长任务拆成易理解的阶段。步骤条负责说明进度,下一步和上一步负责推进流程;进入下一步前应校验当前输入,返回时应保留已经填写的信息。
组件搭配使用把信息分层呈现:先给最常用、最必要的部分,把次要细节藏到"展开""下一步""显示更多"后面, 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担,让界面入门简单,同时保留深度供高级用户按需取用。
交互模式相似概念用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面:每一步只露出一个关键区域并就地解释, 上一步/下一步与步骤指示器控制节奏,可随时跳过。它把功能说明放在功能发生的位置, 而不是让用户去文档里自己找。
交互模式相似概念