跳到主要内容
界面图谱Interface Atlas
☰
EN
交互模式Form / Flow

多步表单

Wizard

别名:多步表单分步填写向导步骤表单一步步填的表单wizardstepper form

这是什么

把长表单拆成有序步骤,每步聚焦少量字段,逐步推进到完成。用步骤指示器标出进度与当前位置,用户可回看已完成步骤、修正后再前进,末步通常汇总确认。它把"填不完的大表单"变成可完成的小任务,降低单屏认知负荷。

交互实验室

试一试,再决定怎么用

正在加载实验室…

✓ 适用场景

  • 字段超过约 8 个,且可按主题自然分组
  • 填写有先后依赖,后一步答案取决于前一步
  • 注册、预订、开户、理赔等长流程申请

✕ 不适用场景

  • 字段很少,一屏填完比翻步骤更快
  • 步骤之间毫无依赖,强制线性只会碍事
  • 用户需要反复对照全部字段(如并排比较填写)

常见形式

线性

Linear

严格一步一步推进,不可跳步,最常见

自由顺序

Free-order

步骤可点击跳转,已完成步打勾

带确认步

With review

末步汇总全部答案,提交前可回改

实现要点

gridflexboxaria-current="step"fieldset

步骤指示用有序列表,当前步标 aria-current="step",完成步可点击回跳;每步内容放在 fieldset + legend 内表达分组。切换步时先跑本步校验,通过再前进;数据在内存中累积, 提交才落库。移动端把指示器压缩为"第 N/共 M 步"。尊重 prefers-reduced-motion, 步间切换可只做淡入或无动画。

相关概念

表单校验Form Validation

在用户填写表单的过程中或提交时检查输入合法性,并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改",而不是提交后被一整个错误页打回。

交互模式搭配使用
步骤条Stepper

用有序节点展示任务的阶段、当前位置和已完成步骤的进度组件。它通常与分步表单配合,把较长任务拆成易理解的阶段。步骤条负责说明进度,下一步和上一步负责推进流程;进入下一步前应校验当前输入,返回时应保留已经填写的信息。

组件搭配使用
渐进式披露Progressive Disclosure

把信息分层呈现:先给最常用、最必要的部分,把次要细节藏到"展开""下一步""显示更多"后面, 用户主动索取时才展示。它解决的是一次性塞给用户太多内容的问题—— 降低初始认知负担,让界面入门简单,同时保留深度供高级用户按需取用。

交互模式相似概念
新手引导Onboarding Tour

用"蒙层 + 聚光高亮 + 分步气泡"的方式带用户认识界面:每一步只露出一个关键区域并就地解释, 上一步/下一步与步骤指示器控制节奏,可随时跳过。它把功能说明放在功能发生的位置, 而不是让用户去文档里自己找。

交互模式相似概念

参考来源

Markdown 版(给 Agent) · JSON