{ "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。", "schemaVersion": "1.0.0", "kind": "entry", "locale": "zh-CN", "id": "linear-flow", "name": { "zh": "线性流程结构", "en": "Linear Flow Structure" }, "page": "https://designvocabulary.com/zh/entries/linear-flow/", "self": "https://designvocabulary.com/zh/entries/linear-flow.json", "alternates": { "zh-CN": "https://designvocabulary.com/zh/entries/linear-flow.json", "en": "https://designvocabulary.com/en/entries/linear-flow.json" }, "site": { "catalogSchemaVersion": "0.1.0", "entries": 158, "index": "https://designvocabulary.com/zh/entries/index.json", "query": "https://designvocabulary.com/api/query?lang=zh", "guide": "https://designvocabulary.com/zh/agents/", "llms": "https://designvocabulary.com/llms.txt" }, "provenance": { "sourceBacked": [ "entry.definition" ], "editorial": [ "entry.boundary", "entry.signature", "entry.when", "entry.when_not", "entry.tradeoff", "entry.comparison", "entry.rules", "entry.relations", "entry.implementationNote", "entry.behavior" ], "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。", "editorialStatus": "drafted", "specimenData": "fictional", "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。", "sources": [ { "id": "linear-flow-baymard-checkout", "url": "https://baymard.com/learn/checkout-flow-ux-optimization", "title": "Baymard Institute · Checkout Flow UX Optimization Guide", "checkedAt": "2026-09-15", "archive": { "status": "available", "confirmed": true, "url": "https://web.archive.org/web/20260916041859/https://baymard.com/learn/checkout-flow-ux-optimization", "capturedAt": "2026-09-16T04:18:59Z", "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/learn/checkout-flow-ux-optimization" } }, { "id": "linear-flow-nng-wizards", "url": "https://www.nngroup.com/articles/wizards/", "title": "Nielsen Norman Group · Wizards: Definition and Design Recommendations", "checkedAt": "2026-09-15", "archive": { "status": "available", "confirmed": true, "url": "https://web.archive.org/web/20260916041857/https://www.nngroup.com/articles/wizards/", "capturedAt": "2026-09-16T04:18:57Z", "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/wizards/" } }, { "id": "linear-flow-wcag-redundant-entry", "url": "https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html", "title": "W3C WAI · WCAG 2.2 Understanding SC 3.3.7 Redundant Entry", "checkedAt": "2026-09-15", "archive": { "status": "available", "confirmed": true, "url": "https://web.archive.org/web/20260916042025/https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html", "capturedAt": "2026-09-16T04:20:25Z", "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/redundant-entry.html" } } ], "lists": [ { "id": "L-C", "edition": "classic", "seat": 10, "origin": "issue-1-ledger", "page": "https://designvocabulary.com/zh/lists/L-C/", "json": "https://designvocabulary.com/zh/lists/L-C.json" } ], "ordered": false, "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。" }, "entry": { "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" ] } }