单列布局

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：宽屏下实际行长、字段是否真正单列且标签关联正确、长页面的标题层级与锚点是否足以扫视、以及窄屏堆叠顺序是否按任务重新排定。

{
  "states": [
    "narrow",
    "wide-with-margins"
  ],
  "a11y": [
    "DOM 顺序即阅读顺序，标题层级支持跳转",
    "每个字段有可见且关联的标签"
  ],
  "motion": "无"
}

{
  "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"
  ]
}