编辑式版面

尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：标题层级在真实内容管理系统中是否被正确保留、引文摘录是否与正文实时同步而不产生不一致、以及图片与说明在响应式断点下重排时是否仍保持关联不被拆散。

{
  "states": [
    "wide-multi-column-body",
    "narrow-single-column-body"
  ],
  "a11y": [
    "标题层级连续且语义正确，供屏幕阅读器按标题跳转",
    "引文在无障碍树中不重复播报为独立的新信息来源，图片说明与图片保持关联朗读"
  ],
  "motion": "无"
}

{
  "id": "editorial-layout",
  "type": "layout",
  "name": {
    "zh": "编辑式版面",
    "en": "Editorial Layout"
  },
  "aliases": [
    "长文版面",
    "Long-Form Article Layout",
    "杂志式版面"
  ],
  "granularity": "page",
  "intents": [
    "read-content",
    "organize-content"
  ],
  "tags": [
    "标题层级",
    "引文",
    "图注",
    "长文",
    "版式"
  ],
  "definition": "把标题、导语（副标题/引言段）、正文、引文与图片说明按印刷编辑的做法组织成一篇长文页面，靠真实的标题层级与字号、字重差异共同表达谁是标题、谁是正文；引文从正文中摘出放大展示，用于强调而非替代信息，图片与其说明作为一个整体单元出现。",
  "boundary": "关注的是长文页面内部标题、导语、正文、引文、图注之间的排版关系与阅读顺序，不是网格本身的行列力学（模块化网格）或单一顺序内容流的取舍（单列布局）——编辑式版面通常搭在单列或模块化网格之上，但讨论的是页面内部的文本层级和图文关系，不是承载它的坐标系。瑞士风格是可选的视觉语言，跨越版式与视觉两个类别；编辑式版面不预设某一种视觉风格。",
  "signature": [
    "使用真实的标题元素（如 h1/h2）区分标题与正文，而不仅靠字号变化",
    "导语段落先于正文出现，字号或字重介于标题与正文之间",
    "引文以更大字号从正文中摘出并重复展示，图片与其说明文字保持相邻、成对出现"
  ],
  "when": [
    "呈现一篇有标题、导语、正文与配图的长文，如文章、专题报道或案例研究",
    "正文较长，需要用引文制造视觉停顿并提示关键内容，帮助扫读",
    "文中配有需要解释或归属的图片，说明文字必须与对应图片一起阅读"
  ],
  "when_not": [
    "内容本身就是简短的列表或卡片摘要，没有连续正文与标题层级可组织",
    "只需要决定页面用几栏网格或单一顺序列来承载内容——那是模块化网格或单列布局要回答的问题",
    "为了视觉效果给普通段落套用标题标签或放大字号，而实际结构仍是同一层级的正文"
  ],
  "tradeoff": "清晰的标题层级和图文说明让长文更易扫读、更易被辅助技术理解结构，但引文摘录需要额外编辑判断——摘录不当会误导读者对正文重点的理解，制作与维护标题层级、图注关联也比单一样式的正文段落更费工。",
  "comparison": {
    "focus": "长文页面内部标题、导语、正文、引文与图注之间的排版关系",
    "mechanism": "真实标题层级传达结构，引文摘录重复强调，图片与说明成对出现",
    "cost": "需要持续维护标题层级的语义正确性，以及引文摘录与正文的一致性"
  },
  "sources": [
    {
      "id": "editorial-layout-mdn-headings",
      "title": "MDN · Heading Elements",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements",
      "claim": "说明标题元素的作用是表达文档的语义层级，供屏幕阅读软件按标题跳转以了解页面结构；不应跳过标题层级，也不应把标题元素当作调整文字大小的手段，字号调整应使用 CSS 而非改变标题级别。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements",
        "status": "available",
        "checkedAt": "2026-09-16T05:39:17.184Z",
        "jobId": "spn2-2a0a1b4ac0f16c8759e5d7c20d5ce8316dbafde7",
        "url": "https://web.archive.org/web/20260916054037/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/Heading_Elements",
        "timestamp": "20260916054037"
      }
    },
    {
      "id": "editorial-layout-wikipedia-pull-quote",
      "title": "Wikipedia · Pull quote",
      "url": "https://en.wikipedia.org/wiki/Pull_quote",
      "claim": "定义引文（pull quote）为从正文中摘出、用作版面视觉元素的关键语句或摘录，用来吸引读者阅读全文或突出某个要点；其内容本就来自正文，可能为节省空间或清晰而略作缩写或改写，而不是引入正文之外的新信息。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://en.wikipedia.org/wiki/Pull_quote",
        "status": "available",
        "checkedAt": "2026-09-16T05:39:29.608Z",
        "jobId": "spn2-7840f14ecc52683f58e57cae61f27058cc72c613",
        "url": "https://web.archive.org/web/20260916053952/https://en.wikipedia.org/wiki/Pull_quote",
        "timestamp": "20260916053952"
      }
    },
    {
      "id": "editorial-layout-mdn-figure",
      "title": "MDN · The Figure with Optional Caption element",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure",
      "claim": "说明 figure 与其中的 figcaption 说明文字被作为一个整体单元引用；图片及其说明即使被移动到文档的其他位置也应保持关联、不影响主文流程，figcaption 同时为 figure 提供无障碍名称。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure",
        "status": "available",
        "checkedAt": "2026-09-16T05:40:02.979Z",
        "jobId": "spn2-b1dad3a2c145361af704bfc488e137e36642d79d",
        "url": "https://web.archive.org/web/20260916054125/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/figure",
        "timestamp": "20260916054125"
      }
    }
  ],
  "relations": [
    {
      "target": "single-column",
      "kind": "composes_with",
      "condition": "长文正文需要一条稳定的阅读列",
      "reason": "编辑式版面常把正文放在单列布局之上，但讨论的是标题、引文、图注等文本层级，不是列本身的取舍。",
      "basis": "editorial"
    },
    {
      "target": "modular-grid",
      "kind": "composes_with",
      "condition": "页面需要在统一坐标系里安排标题、多栏正文与配图",
      "reason": "模块化网格提供行列坐标系承载版面，编辑式版面在其上安排标题层级与图文关系；两者概念层级不同。",
      "basis": "editorial"
    },
    {
      "target": "swiss",
      "kind": "composes_with",
      "condition": "页面选择瑞士风格作为视觉语言",
      "reason": "瑞士风格是跨越版式与视觉的字体、留白语言，可以叠加在编辑式版面之上，但编辑式版面本身不预设某一种视觉风格。",
      "basis": "editorial"
    },
    {
      "target": "card-grid",
      "kind": "alternative",
      "condition": "决定内容是深入阅读的一篇长文还是并列浏览的多个摘要",
      "reason": "编辑式版面服务单篇长文内部的标题与正文层级，卡片网格服务多个同构条目的并列浏览，两者面对的浏览方式不同。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "页面需要区分标题、导语与正文",
      "instruction": "用真实的标题元素（如 h1/h2/h3）表达层级顺序，不要只靠加大字号或加粗而不改变标签语义；标题层级需保持连续，不跳级。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "正文中插入引文强调某个要点",
      "instruction": "引文的内容必须已经出现在正文中，只起到重复强调、吸引扫读的作用；不要把只在引文里出现、正文没有的信息作为读者获取该信息的唯一入口。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "图片带有说明文字，页面在窄屏或不同断点下重新排布",
      "instruction": "把图片与其说明放在同一个关联单元中，让两者在版面重排时始终保持相邻、不被拆散到不同区域。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "wide-multi-column-body",
      "narrow-single-column-body"
    ],
    "a11y": [
      "标题层级连续且语义正确，供屏幕阅读器按标题跳转",
      "引文在无障碍树中不重复播报为独立的新信息来源，图片说明与图片保持关联朗读"
    ],
    "motion": "无"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "尚无可操作的样本；插图为编辑示意。落地到产品时仍须验证：标题层级在真实内容管理系统中是否被正确保留、引文摘录是否与正文实时同步而不产生不一致、以及图片与说明在响应式断点下重排时是否仍保持关联不被拆散。",
  "image": {
    "src": "/images/editorial-layout.webp",
    "alt": "一个虚构的 FIELDNOTES 文章页面：顶部是大号标题，下方是较小的导语行，中段是两栏正文，中间嵌有一个用更大字号突出的引文框，底部是一张图片和其下的说明文字。"
  },
  "searchTerms": [
    "heading hierarchy",
    "pull quote",
    "caption",
    "long-form",
    "typographic layout"
  ]
}