Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

分步向导

Wizard

加入比较 +

把一项任务拆成按既定顺序逐步完成的多个页面,后续步骤可依赖前面输入的信息;用户通过下一步与上一步在页面之间移动。

示意图 · 编辑插画,尚无可操作示例
虚构的 FIELDNOTES 设置界面:顶部四步进度指示器中第二步高亮,中间是一个聚焦的表单区块,底部左右分别是上一步与下一步按钮。
虚构的 FIELDNOTES 设置界面:顶部四步进度指示器中第二步高亮,中间是一个聚焦的表单区块,底部左右分别是上一步与下一步按钮。

识别特征

  • 步骤有固定顺序,并显示当前位置与总步数
  • 每一步只处理任务的一个方面,配有显式的下一步与上一步
  • 返回上一步后已填写的内容仍然保留

概念边界

分步向导是流程模式而不是页面结构:它规定固定、有序的阶段和显式的下一步、上一步与进度,不同于渐进披露的按需展开,也不同于把所有字段放在一页里的单栏长表单。若一页就能装下全部问题,或问题之间没有先后依赖,通常不需要向导。

什么时候考虑它

  • 新手或偶尔执行的任务,例如首次配置、安装、接入设备
  • 后续问题依赖前面的回答,必须按顺序收集
  • 一次性完成的任务步骤多到一页放不下

什么时候慎用

  • 熟练用户高频重复的任务,逐页点击会显得拖沓而受控
  • 问题之间没有先后依赖,一个对话框或单页表单更轻
  • 把多个彼此无关的任务硬塞进同一个向导

取舍

换来的是每一步的专注与对新手的引导,代价是更多的点击与页面切换;步数过多或分支过多时用户会失去对位置的把握。

条件规则 · 编辑建议

当用户处于任意步骤必须显示当前步骤位置与总步数,并允许返回上一步而不丢失已填内容。
当同一流程中需要用到用户已输入的信息必须自动填充或提供可选值,不要再次要求输入;仅在必要、涉及安全或信息已失效时例外。
当规划每一步的内容建议让每一步聚焦一个决定,不把多个子任务或标签页塞进同一页。
当用户想中途退出建议提供退出途径并说明后果,例如已填内容是否保存、能否稍后继续。

相关词条

渐进披露 ↗相关但不同 · 次要内容可以按需展开而无需固定顺序

渐进披露由用户决定何时展开,向导则规定阶段顺序;不要因为内容较多就把可选设置做成必经步骤。

单列布局 ↗可以配合 · 设计向导中的单个步骤页面

每一步只关注一个决定,单栏表单能让该步的字段顺序清楚且不分散注意力。

错误预防 ↗具体体现 · 任务分步后每步可即时校验

把输入拆到有序步骤中,可以在进入下一步前发现并修正错误,而不是提交整张长表单后才报错。

模态对话框 ↗可以配合 · 任务必须先完成才能继续使用主界面

向导可以放在模态容器中,但这会叠加打断代价;能内嵌为页面的向导优先内嵌。

来源与支持范围

NN/g · Wizards: Definition and Design Recommendations ↗

向导是让用户按既定顺序输入信息的分步流程,后续步骤可依赖前面的输入;建议展示步骤列表并高亮当前步骤、提供前后导航、每步自足、允许中途退出并保存状态,且主要用于新手或不常执行的流程。

检索日期:2026-09-15 · 存档于 2026-09-16
Microsoft Learn · Wizards (Windows UX guide) ↗

向导用于多步骤任务,多步必须合成用户眼中的单一任务;每页只处理一个方面;下一步不代表承诺,上一步应始终可用且导航时保留用户选择;先考虑对话框或单页等更轻的替代方案。

检索日期:2026-09-15
W3C · Understanding SC 3.3.7: Redundant Entry (WCAG 2.2, Level A) ↗

同一流程中用户先前输入或被提供的信息若需再次输入,应自动填充或可供选择;例外是重新输入属必要、涉及安全或原信息已失效。该准则旨在帮助用户完成多步骤流程。

检索日期:2026-09-15 · 存档于 2026-09-16

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意。应用到产品时仍须验证返回上一步是否保留输入、步骤位置是否被辅助技术读出,以及是否存在重复索取已填信息的步骤。

{
  "states": [
    "step-active",
    "step-completed",
    "step-pending",
    "validating",
    "committed",
    "exited"
  ],
  "a11y": [
    "步骤指示器以文字暴露当前位置,例如第 2 步,共 4 步",
    "切换步骤后焦点移到新步骤的标题或首个控件",
    "上一步与下一步为可键盘操作的真实按钮"
  ],
  "motion": "步骤切换不依赖动画;减弱动态偏好下直接替换内容"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。