{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "single-column",
  "name": {
    "zh": "单列布局",
    "en": "Single-Column Layout"
  },
  "page": "https://designvocabulary.com/zh/entries/single-column/",
  "self": "https://designvocabulary.com/zh/entries/single-column.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/single-column.json",
    "en": "https://designvocabulary.com/en/entries/single-column.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": "single-column-baymard-forms",
        "url": "https://baymard.com/blog/avoid-multi-column-forms",
        "title": "Baymard Institute · Avoid Multi-Column Layouts for Checkout Forms",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915183153/https://baymard.com/blog/avoid-multi-column-forms",
          "capturedAt": "2026-09-15T18:31:53Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/blog/avoid-multi-column-forms"
        }
      },
      {
        "id": "single-column-nng-forms",
        "url": "https://www.nngroup.com/articles/web-form-design/",
        "title": "Nielsen Norman Group · Website Forms Usability: Top 10 Recommendations",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915183306/https://www.nngroup.com/articles/web-form-design/",
          "capturedAt": "2026-09-15T18:33:06Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/web-form-design/"
        }
      },
      {
        "id": "single-column-baymard-line-length",
        "url": "https://baymard.com/blog/line-length-readability",
        "title": "Baymard Institute · Readability: The Optimal Line Length",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260915183224/https://baymard.com/blog/line-length-readability",
          "capturedAt": "2026-09-15T18:32:24Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/blog/line-length-readability"
        }
      }
    ],
    "lists": [
      {
        "id": "L-C",
        "edition": "classic",
        "seat": 4,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/L-C/",
        "json": "https://designvocabulary.com/zh/lists/L-C.json"
      },
      {
        "id": "L-Y",
        "edition": "2026-focus",
        "seat": 7,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/zh/lists/L-Y/",
        "json": "https://designvocabulary.com/zh/lists/L-Y.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "id": "single-column",
    "type": "layout",
    "name": {
      "zh": "单列布局",
      "en": "Single-Column Layout"
    },
    "aliases": [
      "单栏布局",
      "One-Column Layout",
      "Single Column"
    ],
    "granularity": "page",
    "intents": [
      "organize-content",
      "read-content"
    ],
    "tags": [
      "单列",
      "阅读",
      "表单",
      "移动优先",
      "布局"
    ],
    "definition": "把页面内容与表单字段自上而下排成一列，让视线沿单一方向前进；表单研究指出单列比多列更少出现跳过、误读字段与填错。",
    "boundary": "指有意选择的单列阅读或任务页面结构，如文章、表单、移动优先页面，而不是主从布局在窄屏上被迫塌缩成的一栏；也不同于分步的线性流程——向导是流程，单列是承载每一步的页面结构。少量逻辑上属于同一实体的短字段（如城市/邮编）并排放在一行，仍算单列表单。",
    "signature": [
      "一条居中的内容列，左右留白随宽度变化而内容不换列",
      "标题、段落、字段、按钮自上而下按同一顺序排列",
      "表单标签紧贴在字段上方，主按钮位于列尾"
    ],
    "when": [
      "长文阅读、说明页或文档，需要稳定的阅读节奏",
      "结账、注册、申请等需要逐项填写的表单",
      "移动优先或同一模板要跨屏宽复用的页面"
    ],
    "when_not": [
      "用户需要并排比较多个条目或字段时，表格、主从或网格更合适",
      "内容之间有明显主次层级、需要一眼概览时，可考虑 Bento 网格",
      "只是把宽屏上互不相关的模块在窄屏机械堆叠，而没有重新排定优先级"
    ],
    "tradeoff": "阅读与填写路径清晰，宽窄屏共用一套结构；但页面会变长，需要靠标题、分组与锚点维持可扫视性，宽屏上若不限制列宽则行长过长而难读。",
    "comparison": {
      "focus": "让阅读或填写沿单一方向进行",
      "mechanism": "一条受限宽度的内容列",
      "cost": "页面变长，需要限制行长并维护内部分组"
    },
    "sources": [
      {
        "id": "single-column-baymard-forms",
        "title": "Baymard Institute · Avoid Multi-Column Layouts for Checkout Forms",
        "url": "https://baymard.com/blog/avoid-multi-column-forms",
        "claim": "基于多轮可用性测试指出，单列表单比多列表单更少出现跳过字段、误读字段与填错；多列会把注意力引向多个方向；而逻辑上属于同一实体的 2–3 个字段（如日期、城市/州/邮编）并排一行不会造成问题。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/blog/avoid-multi-column-forms",
          "status": "available",
          "checkedAt": "2026-09-15T18:30:00.883Z",
          "jobId": "spn2-e536ba729fd025f76ee2741ee0c7b4adcce4ef1d",
          "url": "https://web.archive.org/web/20260915183153/https://baymard.com/blog/avoid-multi-column-forms",
          "timestamp": "20260915183153"
        }
      },
      {
        "id": "single-column-nng-forms",
        "title": "Nielsen Norman Group · Website Forms Usability: Top 10 Recommendations",
        "url": "https://www.nngroup.com/articles/web-form-design/",
        "claim": "建议表单保持单列，因为多列会打断向下移动的纵向动量；标签应紧贴字段，移动端与较短的桌面表单把标签放在字段正上方，只有城市/州/邮编这类短且相关的字段可共用一行。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/web-form-design/",
          "status": "available",
          "checkedAt": "2026-09-15T18:30:44.112Z",
          "jobId": "spn2-6fbac744d7c1e3fe83dcaa4b7fea006f37525eb1",
          "url": "https://web.archive.org/web/20260915183306/https://www.nngroup.com/articles/web-form-design/",
          "timestamp": "20260915183306"
        }
      },
      {
        "id": "single-column-baymard-line-length",
        "title": "Baymard Institute · Readability: The Optimal Line Length",
        "url": "https://baymard.com/blog/line-length-readability",
        "claim": "指出正文每行约 50–75 个字符较易读，并引用 WCAG 1.4.8 的每行不超过 80 字符；行太宽让眼睛难以定位行首行尾，行太窄则频繁回扫打断节奏；建议用 max-width 约 70ch 或 34em 限制列宽。",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/blog/line-length-readability",
          "status": "available",
          "checkedAt": "2026-09-15T18:30:46.871Z",
          "jobId": "spn2-b5f16cdb5afcd12cc6585cba9a2f891754d04092",
          "url": "https://web.archive.org/web/20260915183224/https://baymard.com/blog/line-length-readability",
          "timestamp": "20260915183224"
        }
      }
    ],
    "relations": [
      {
        "target": "master-detail",
        "kind": "alternative",
        "condition": "决定页面是逐项查阅还是顺序阅读或填写",
        "reason": "主从靠列表与详情联动，窄屏塌缩成的一栏仍是主从；单列是从一开始就按顺序组织内容。",
        "basis": "editorial"
      },
      {
        "target": "proximity",
        "kind": "informs",
        "condition": "在长单列中安排标签、字段与分组",
        "reason": "标签贴近字段、相关字段成组，靠的是接近律，否则单列会退化成一串等距的碎片。",
        "basis": "editorial"
      },
      {
        "target": "bento",
        "kind": "alternative",
        "condition": "内容需要一眼概览而非顺序阅读",
        "reason": "Bento 用块面尺寸表达层级与并列；单列用顺序与留白表达先后。",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "单列中包含正文段落",
        "instruction": "限制列宽，使正文每行大致在 50–75 个字符（不超过 80），例如用 max-width 约 70ch。",
        "strength": "recommend",
        "basis": "editorial"
      },
      {
        "when": "页面是需要逐项填写的表单",
        "instruction": "保持字段单列、标签置于字段正上方；只让逻辑上属于同一实体的短字段并排。",
        "strength": "recommend",
        "basis": "editorial"
      },
      {
        "when": "宽屏上的多栏页面要在窄屏改为单列",
        "instruction": "按任务重新排定模块顺序与取舍，不要仅因视口变窄就把互不相关的模块原样堆叠。",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "behavior": {
      "states": [
        "narrow",
        "wide-with-margins"
      ],
      "a11y": [
        "DOM 顺序即阅读顺序，标题层级支持跳转",
        "每个字段有可见且关联的标签"
      ],
      "motion": "无"
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：宽屏下实际行长、字段是否真正单列且标签关联正确、长页面的标题层级与锚点是否足以扫视、以及窄屏堆叠顺序是否按任务重新排定。",
    "image": {
      "src": "/images/single-column.webp",
      "alt": "一个虚构的 FIELDNOTES 文章与表单页面，内容居中排成一列：标题、几段正文、上下堆叠的表单字段与一个按钮，两侧留白宽裕。"
    },
    "searchTerms": [
      "single column",
      "reading",
      "forms",
      "mobile-first",
      "layout"
    ]
  }
}