线性流程结构

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：每一屏是否都能返回且不丢数据、进度指示是否与实际步骤一一对应而非被合并隐藏、流程中是否被悄悄塞入了未声明的可选分支、以及重复信息是否按 WCAG 3.3.7 做了自动填充或可选择而非强制重新输入。

{
  "states": [
    "first-step",
    "middle-step",
    "last-step"
  ],
  "a11y": [
    "每屏的步数与当前位置以文字形式呈现，不只靠进度条颜色或形状传达",
    "返回控件有文字名称、可键盘操作，返回后表单数据以编程方式恢复到原有字段",
    "屏幕切换后页面标题或标题层级随之更新，供屏幕阅读器播报当前所在步骤"
  ],
  "motion": "屏幕之间的前进与后退可用方向一致的短促过渡表达顺序，并尊重减少动态偏好"
}

{
  "id": "linear-flow",
  "type": "layout",
  "name": {
    "zh": "线性流程结构",
    "en": "Linear Flow Structure"
  },
  "aliases": [
    "顺序流程",
    "Sequential Flow",
    "Linear Flow"
  ],
  "granularity": "experience",
  "intents": [
    "organize-content"
  ],
  "tags": [
    "线性流程",
    "顺序结构",
    "无分支",
    "信息架构",
    "引导式流程"
  ],
  "definition": "把完成一次任务所需的屏幕排成唯一预定的先后顺序、不设分支或旁路，用户只能沿这一条路径依次前进，如账号引导、结账或分步设置；Baymard 的结账流程优化指南主张流程要完全线性、不重复展示同一屏幕，并让返回操作保留已填写的数据。",
  "boundary": "线性流程结构描述的是信息架构层面的顺序关系——把一次任务的屏幕排成唯一路径，本身不规定具体交互控件。分步向导是实现这种结构最常见的交互模式，向导提供下一步/上一步与进度指示；但同一条线性路径也可能只用简单的『继续』链接或整页跳转来呈现，此时结构仍是线性的，只是没有采用向导这种模式。它不同于渐进披露：渐进披露由用户自行决定何时展开次要内容，屏幕数量与顺序并不固定；它也不同于层级导航结构：层级导航是一棵可探索的树，用户能在兄弟分支之间横向移动、可以往返浏览，而线性流程只有一条路径，没有兄弟节点可供选择，也不打算被重复访问。",
  "signature": [
    "屏幕按唯一先后顺序排列，每一屏只指向下一屏，没有可选分支或旁路",
    "每一屏都显示总步数与当前所处位置，例如『第 2/4 步』或对应的进度指示",
    "提供返回上一屏的控件，返回后此前填写或选择的内容仍然保留，不必重新输入"
  ],
  "when": [
    "任务必须按依赖顺序完成，后一步依赖前一步已提供的信息或已做的决定，如结账或账号设置",
    "希望把用户的注意力锁定在一条路径上，减少中途分心或误入其他分区的机会",
    "任务通常只做一次或极少重复，不需要长期保留一棵可供反复探索的导航结构"
  ],
  "when_not": [
    "内容之间没有先后依赖，用户可能只想查看其中一两项，这时按需展开的渐进披露更合适",
    "用户需要反复浏览、比较或在同级分区之间跳转，这时应改用层级导航结构或列表",
    "步骤数量会经常变化、或某些用户需要跳过部分步骤，被迫套入唯一顺序只会制造额外摩擦"
  ],
  "tradeoff": "路径单一、认知负担低，用户不必决定接下来去哪里，也不容易迷失方向；但缺乏灵活性，无法跳步或并行处理多个决定，一旦步骤设计过长或塞入了没有依赖关系的内容，就会拖慢原本可以并行完成的任务。",
  "comparison": {
    "focus": "让一次任务的屏幕按唯一顺序依次呈现",
    "mechanism": "一条没有分支或旁路的预定路径，配合位置与步数指示",
    "cost": "牺牲灵活性与并行性，步骤设计不当或塞入无依赖内容会拖长任务"
  },
  "sources": [
    {
      "id": "linear-flow-baymard-checkout",
      "title": "Baymard Institute · Checkout Flow UX Optimization Guide",
      "url": "https://baymard.com/learn/checkout-flow-ux-optimization",
      "claim": "主张结账流程要\"完全线性\"、绝不重复展示同一屏幕；应支持浏览器返回按钮并确保所有已填表单数据被保留，避免用户被迫重新输入；若使用多步结账，进度指示必须与实际步骤一一对应，隐藏或合并步骤会造成困惑。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/learn/checkout-flow-ux-optimization",
        "status": "available",
        "checkedAt": "2026-09-16T04:18:30.964Z",
        "jobId": "spn2-e9ce7fc1e227c543c8e2631f5b56598c3c3c02f7",
        "url": "https://web.archive.org/web/20260916041859/https://baymard.com/learn/checkout-flow-ux-optimization",
        "timestamp": "20260916041859"
      }
    },
    {
      "id": "linear-flow-nng-wizards",
      "title": "Nielsen Norman Group · 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": "linear-flow-wcag-redundant-entry",
      "title": "W3C WAI · WCAG 2.2 Understanding SC 3.3.7 Redundant Entry",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html",
      "claim": "A 级成功标准，要求多步骤流程中此前由用户提供或系统提供给用户的信息，在同一流程中再次需要时应自动填充或可供用户直接选择，而不是强制手动重新输入；意在降低认知负担，尤其帮助有短期工作记忆困难的用户完成多步骤流程，仅当重新输入是活动目的本身、出于安全需要或原数据已失效时可以例外。",
      "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": "wizard",
      "kind": "realized_by",
      "condition": "需要在界面上具体呈现这条唯一路径",
      "reason": "分步向导是线性流程结构最常见的交互实现，提供下一步/上一步与进度指示；结构本身不规定控件，向导只是实现它的一种模式。",
      "basis": "editorial"
    },
    {
      "target": "hierarchical-navigation",
      "kind": "alternative",
      "condition": "决定信息架构是唯一路径还是可探索的树",
      "reason": "层级导航结构允许用户在兄弟分支之间横向移动、反复浏览；线性流程结构只有一条路径，没有兄弟节点可选，也不打算被重复访问。",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "composes_with",
      "condition": "设计线性流程中的单个步骤页面",
      "reason": "每一屏只承载当前步骤需要的内容，单列布局能让该步的字段与说明按顺序排列、不分散注意力。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "用户处于线性流程的任意一屏（第一屏除外）",
      "instruction": "必须提供返回上一屏的控件，且返回后此前填写或选择的内容必须保留，不能要求用户重新输入已提供过的信息。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "流程被呈现为线性、没有分支的结构",
      "instruction": "不要在其中插入可选的分支或旁路步骤；如果某些内容确实是可选的，应放到流程之外用渐进披露呈现，而不是塞进一条本应唯一的路径里制造隐藏分叉。",
      "strength": "recommend",
      "basis": "editorial"
    },
    {
      "when": "流程包含多于一屏",
      "instruction": "在每一屏说明总步数与当前所处位置，例如『第 N / 共 M 步』或与实际步骤一一对应的进度指示，不要隐藏或合并步骤。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "first-step",
      "middle-step",
      "last-step"
    ],
    "a11y": [
      "每屏的步数与当前位置以文字形式呈现，不只靠进度条颜色或形状传达",
      "返回控件有文字名称、可键盘操作，返回后表单数据以编程方式恢复到原有字段",
      "屏幕切换后页面标题或标题层级随之更新，供屏幕阅读器播报当前所在步骤"
    ],
    "motion": "屏幕之间的前进与后退可用方向一致的短促过渡表达顺序，并尊重减少动态偏好"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：每一屏是否都能返回且不丢数据、进度指示是否与实际步骤一一对应而非被合并隐藏、流程中是否被悄悄塞入了未声明的可选分支、以及重复信息是否按 WCAG 3.3.7 做了自动填充或可选择而非强制重新输入。",
  "image": {
    "src": "/images/linear-flow.webp",
    "alt": "一个虚构的 FIELDNOTES 应用界面：三个屏幕并排显示，屏幕之间用向右箭头连接表示前进顺序，另有一条从右向左的返回箭头；中间的屏幕以陶土色高亮表示当前所处步骤，整体为奶油、陶土、鼠尾草绿的扁平暖色调。"
  },
  "searchTerms": [
    "linear flow",
    "sequential structure",
    "no branching",
    "information architecture",
    "guided flow"
  ]
}