分步向导

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

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

{
  "id": "wizard",
  "type": "interaction",
  "name": {
    "zh": "分步向导",
    "en": "Wizard"
  },
  "aliases": [
    "向导",
    "分步流程",
    "setup wizard"
  ],
  "granularity": "flow",
  "intents": [
    "configure",
    "reduce-complexity"
  ],
  "tags": [
    "步骤",
    "设置",
    "新手",
    "上一步",
    "进度"
  ],
  "definition": "把一项任务拆成按既定顺序逐步完成的多个页面，后续步骤可依赖前面输入的信息；用户通过下一步与上一步在页面之间移动。",
  "boundary": "分步向导是流程模式而不是页面结构：它规定固定、有序的阶段和显式的下一步、上一步与进度，不同于渐进披露的按需展开，也不同于把所有字段放在一页里的单栏长表单。若一页就能装下全部问题，或问题之间没有先后依赖，通常不需要向导。",
  "signature": [
    "步骤有固定顺序，并显示当前位置与总步数",
    "每一步只处理任务的一个方面，配有显式的下一步与上一步",
    "返回上一步后已填写的内容仍然保留"
  ],
  "when": [
    "新手或偶尔执行的任务，例如首次配置、安装、接入设备",
    "后续问题依赖前面的回答，必须按顺序收集",
    "一次性完成的任务步骤多到一页放不下"
  ],
  "when_not": [
    "熟练用户高频重复的任务，逐页点击会显得拖沓而受控",
    "问题之间没有先后依赖，一个对话框或单页表单更轻",
    "把多个彼此无关的任务硬塞进同一个向导"
  ],
  "tradeoff": "换来的是每一步的专注与对新手的引导，代价是更多的点击与页面切换；步数过多或分支过多时用户会失去对位置的把握。",
  "comparison": {
    "focus": "让用户按既定顺序一步一步完成单个任务",
    "mechanism": "把任务拆为有序页面，用导航按钮与进度指示串联",
    "cost": "额外的页面切换、状态保持与退出路径的实现负担"
  },
  "sources": [
    {
      "id": "nng-wizards",
      "title": "NN/g · Wizards: Definition and Design Recommendations",
      "url": "https://www.nngroup.com/articles/wizards/",
      "claim": "向导是让用户按既定顺序输入信息的分步流程，后续步骤可依赖前面的输入；建议展示步骤列表并高亮当前步骤、提供前后导航、每步自足、允许中途退出并保存状态，且主要用于新手或不常执行的流程。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/wizards/",
        "status": "available",
        "checkedAt": "2026-09-16T04:18:31.200Z",
        "jobId": "spn2-68c8f2410a7c9c9c5a1635be180c8e07a9e17593",
        "url": "https://web.archive.org/web/20260916041857/https://www.nngroup.com/articles/wizards/",
        "timestamp": "20260916041857"
      }
    },
    {
      "id": "ms-win-wizards",
      "title": "Microsoft Learn · Wizards (Windows UX guide)",
      "url": "https://learn.microsoft.com/en-us/windows/win32/uxguide/win-wizards",
      "claim": "向导用于多步骤任务，多步必须合成用户眼中的单一任务；每页只处理一个方面；下一步不代表承诺，上一步应始终可用且导航时保留用户选择；先考虑对话框或单页等更轻的替代方案。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://learn.microsoft.com/en-us/windows/win32/uxguide/win-wizards",
        "status": "available",
        "checkedAt": "2026-09-15T18:35:11.212Z",
        "jobId": "spn2-86d4406779219d57c5806545c97b47c6d077d8e6",
        "url": "https://web.archive.org/web/20260915183647/https://learn.microsoft.com/en-us/windows/win32/uxguide/win-wizards",
        "timestamp": "20260915183647"
      }
    },
    {
      "id": "wcag-redundant-entry",
      "title": "W3C · Understanding SC 3.3.7: Redundant Entry (WCAG 2.2, Level A)",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html",
      "claim": "同一流程中用户先前输入或被提供的信息若需再次输入，应自动填充或可供选择；例外是重新输入属必要、涉及安全或原信息已失效。该准则旨在帮助用户完成多步骤流程。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html",
        "status": "available",
        "checkedAt": "2026-09-16T04:19:11.084Z",
        "jobId": "spn2-7f13ad73a95fde3c32f93308701438b13ad1ea73",
        "url": "https://web.archive.org/web/20260916042025/https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html",
        "timestamp": "20260916042025"
      }
    }
  ],
  "relations": [
    {
      "target": "progressive-disclosure",
      "kind": "related",
      "condition": "次要内容可以按需展开而无需固定顺序",
      "reason": "渐进披露由用户决定何时展开，向导则规定阶段顺序；不要因为内容较多就把可选设置做成必经步骤。",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "composes_with",
      "condition": "设计向导中的单个步骤页面",
      "reason": "每一步只关注一个决定，单栏表单能让该步的字段顺序清楚且不分散注意力。",
      "basis": "editorial"
    },
    {
      "target": "error-prevention",
      "kind": "realized_by",
      "condition": "任务分步后每步可即时校验",
      "reason": "把输入拆到有序步骤中，可以在进入下一步前发现并修正错误，而不是提交整张长表单后才报错。",
      "basis": "editorial"
    },
    {
      "target": "modal-dialog",
      "kind": "composes_with",
      "condition": "任务必须先完成才能继续使用主界面",
      "reason": "向导可以放在模态容器中，但这会叠加打断代价；能内嵌为页面的向导优先内嵌。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "用户处于任意步骤",
      "instruction": "显示当前步骤位置与总步数，并允许返回上一步而不丢失已填内容。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "同一流程中需要用到用户已输入的信息",
      "instruction": "自动填充或提供可选值，不要再次要求输入；仅在必要、涉及安全或信息已失效时例外。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "规划每一步的内容",
      "instruction": "让每一步聚焦一个决定，不把多个子任务或标签页塞进同一页。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "用户想中途退出",
      "instruction": "提供退出途径并说明后果，例如已填内容是否保存、能否稍后继续。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "step-active",
      "step-completed",
      "step-pending",
      "validating",
      "committed",
      "exited"
    ],
    "a11y": [
      "步骤指示器以文字暴露当前位置，例如第 2 步，共 4 步",
      "切换步骤后焦点移到新步骤的标题或首个控件",
      "上一步与下一步为可键盘操作的真实按钮"
    ],
    "motion": "步骤切换不依赖动画；减弱动态偏好下直接替换内容"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须验证返回上一步是否保留输入、步骤位置是否被辅助技术读出，以及是否存在重复索取已填信息的步骤。",
  "image": {
    "src": "/images/wizard.webp",
    "alt": "虚构的 FIELDNOTES 设置界面：顶部四步进度指示器中第二步高亮，中间是一个聚焦的表单区块，底部左右分别是上一步与下一步按钮。"
  },
  "searchTerms": [
    "steps",
    "setup",
    "beginners",
    "back",
    "progress"
  ]
}