Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

编辑式版面

Editorial Layout

加入比较 +

把标题、导语(副标题/引言段)、正文、引文与图片说明按印刷编辑的做法组织成一篇长文页面,靠真实的标题层级与字号、字重差异共同表达谁是标题、谁是正文;引文从正文中摘出放大展示,用于强调而非替代信息,图片与其说明作为一个整体单元出现。

示意图 · 编辑插画,尚无可操作示例
一个虚构的 FIELDNOTES 文章页面:顶部是大号标题,下方是较小的导语行,中段是两栏正文,中间嵌有一个用更大字号突出的引文框,底部是一张图片和其下的说明文字。
一个虚构的 FIELDNOTES 文章页面:顶部是大号标题,下方是较小的导语行,中段是两栏正文,中间嵌有一个用更大字号突出的引文框,底部是一张图片和其下的说明文字。

识别特征

  • 使用真实的标题元素(如 h1/h2)区分标题与正文,而不仅靠字号变化
  • 导语段落先于正文出现,字号或字重介于标题与正文之间
  • 引文以更大字号从正文中摘出并重复展示,图片与其说明文字保持相邻、成对出现

概念边界

关注的是长文页面内部标题、导语、正文、引文、图注之间的排版关系与阅读顺序,不是网格本身的行列力学(模块化网格)或单一顺序内容流的取舍(单列布局)——编辑式版面通常搭在单列或模块化网格之上,但讨论的是页面内部的文本层级和图文关系,不是承载它的坐标系。瑞士风格是可选的视觉语言,跨越版式与视觉两个类别;编辑式版面不预设某一种视觉风格。

什么时候考虑它

  • 呈现一篇有标题、导语、正文与配图的长文,如文章、专题报道或案例研究
  • 正文较长,需要用引文制造视觉停顿并提示关键内容,帮助扫读
  • 文中配有需要解释或归属的图片,说明文字必须与对应图片一起阅读

什么时候慎用

  • 内容本身就是简短的列表或卡片摘要,没有连续正文与标题层级可组织
  • 只需要决定页面用几栏网格或单一顺序列来承载内容——那是模块化网格或单列布局要回答的问题
  • 为了视觉效果给普通段落套用标题标签或放大字号,而实际结构仍是同一层级的正文

取舍

清晰的标题层级和图文说明让长文更易扫读、更易被辅助技术理解结构,但引文摘录需要额外编辑判断——摘录不当会误导读者对正文重点的理解,制作与维护标题层级、图注关联也比单一样式的正文段落更费工。

条件规则 · 编辑建议

当页面需要区分标题、导语与正文必须用真实的标题元素(如 h1/h2/h3)表达层级顺序,不要只靠加大字号或加粗而不改变标签语义;标题层级需保持连续,不跳级。
当正文中插入引文强调某个要点必须引文的内容必须已经出现在正文中,只起到重复强调、吸引扫读的作用;不要把只在引文里出现、正文没有的信息作为读者获取该信息的唯一入口。
当图片带有说明文字,页面在窄屏或不同断点下重新排布建议把图片与其说明放在同一个关联单元中,让两者在版面重排时始终保持相邻、不被拆散到不同区域。

相关词条

单列布局 ↗可以配合 · 长文正文需要一条稳定的阅读列

编辑式版面常把正文放在单列布局之上,但讨论的是标题、引文、图注等文本层级,不是列本身的取舍。

模块化网格 ↗可以配合 · 页面需要在统一坐标系里安排标题、多栏正文与配图

模块化网格提供行列坐标系承载版面,编辑式版面在其上安排标题层级与图文关系;两者概念层级不同。

瑞士国际主义 ↗可以配合 · 页面选择瑞士风格作为视觉语言

瑞士风格是跨越版式与视觉的字体、留白语言,可以叠加在编辑式版面之上,但编辑式版面本身不预设某一种视觉风格。

卡片网格 ↗条件替代 · 决定内容是深入阅读的一篇长文还是并列浏览的多个摘要

编辑式版面服务单篇长文内部的标题与正文层级,卡片网格服务多个同构条目的并列浏览,两者面对的浏览方式不同。

来源与支持范围

MDN · Heading Elements ↗

说明标题元素的作用是表达文档的语义层级,供屏幕阅读软件按标题跳转以了解页面结构;不应跳过标题层级,也不应把标题元素当作调整文字大小的手段,字号调整应使用 CSS 而非改变标题级别。

检索日期:2026-09-15 · 存档于 2026-09-16
Wikipedia · Pull quote ↗

定义引文(pull quote)为从正文中摘出、用作版面视觉元素的关键语句或摘录,用来吸引读者阅读全文或突出某个要点;其内容本就来自正文,可能为节省空间或清晰而略作缩写或改写,而不是引入正文之外的新信息。

检索日期:2026-09-15 · 存档于 2026-09-16
MDN · The Figure with Optional Caption element ↗

说明 figure 与其中的 figcaption 说明文字被作为一个整体单元引用;图片及其说明即使被移动到文档的其他位置也应保持关联、不影响主文流程,figcaption 同时为 figure 提供无障碍名称。

检索日期:2026-09-15 · 存档于 2026-09-16

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

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

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

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。