如何构建有效的排版层次结构

有效地组织设计中的内容，使其易于理解和使用是设计师最重要的工作之一。 而且由于设计师使用的大部分内容都是基于文本的，因此创建有效的排版层次结构是设计师可以学习的最重要的事情之一。

虽然练习和尝试创建有效的层次结构是真正掌握技能的最佳方式，但设计师应该先学习一些指导方针，然后再自行着手。 毕竟，如果不先了解规则是什么，就不可能有效地打破规则。

什么是排版层次结构？

初学者有时会低估使用排版层次结构的必要性。 然而看看这个例子：

双方都在传达相同的信息，但在左侧，无法分辨出有标题、子标题和正文。 在右侧，很明显，所提供的信息存在层次结构。

排版层次结构向读者展示了要关注哪些信息——哪些是最重要的，哪些只是支持要点。

有各种各样的东西构成了网络上的排版层次结构。 这些包括：

尺寸。 大小通常是新设计师在尝试创建排版层次结构时首先考虑的问题。 并且有充分的理由：读者可以立即、轻松地识别它。 更大 = 更重要，更小 = 不那么重要。 但是当有这么多其他选项来创建层次结构时，大小可能会成为一个拐杖。

重量。 使字体更粗或更细是另一种易于识别的创建层次结构的方法，即使非设计师也很容易识别。

颜色。 作为创建层次结构的一种方式，颜色经常被忽视，但它是一个很棒的选择。 即使使用给定颜色的较浅和较深的阴影也可以创建更明显的层次结构。 在类型和背景之间创建更多对比也可以增加排版层次结构。

对比。 除了对比色之外，不同字体大小、粗细和样式之间的对比也是创建排版层次结构的关键。 字体大小只有一两个点的差异不会产生足够的对比度，使大多数用户可以清楚地看到层次结构。 相反，设计师应该使用易于区分的尺寸、重量和样式来轻松地在标题或正文等内容之间创建对比。

案子。 虽然从可读性的角度来看，将正文文本大写通常不是一个好主意，但在标题或副标题中使用大写字符有助于区分不同的标题或其他类型。

位置和对齐。 标题和副标题的位置，以及设计师想要突出的其他类型，会对类型在层次结构中的位置产生很大影响。 例如，居中类型往往会使其脱颖而出。 在页面的常规页边距之外设置类型也可以使该类型在页面的层次结构中脱颖而出。

如何创建排版层次结构（并以视觉方式组织您的设计）

在创建排版层次结构时，设计师有很多选择。 但仅仅知道创建层次结构的内容并不一定有助于设计师创建有效的层次结构。

首先要考虑的事情之一是设计应该有多少层次结构。 作为一般规则，每个设计都应包括三个层次结构：标题、副标题和正文。 从那里开始，由设计师来考虑可能需要的其他级别。 这些可能包括标题、附加副标题、引语和元信息（例如文章的作者或日期）。

从那里开始，关键是要弄清楚如何区分层次结构的不同部分。 不言而喻，但标题应该比副标题更突出，副标题应该比正文更突出。 标题通常应该不如正文那么突出，而引语应该在正文和副标题之间。

类型 尺寸

存在传统的印刷比例以帮助设计师入门。 但这只是一个起点，设计师应该在偏离这些传统尺度的同时，随意尝试不同的重量和风格。 大多数基于正文的大小并从那里扩展。

大多数设计师都熟悉The Elements of Typographic Style中的经典印刷比例，因为它们往往是大多数文字处理程序在选择字体大小时提供的默认值。 规模是：

6、7、8、9、10、11、12、14、16、18、21、24、30、36、48、60 和 72。

还有其他印刷比例示例，它们遵循各种数学方程式来计算增加的​​尺寸。

设计人员倾向于默认为 12 磅正文大小，但将其增加到 14 或 16（甚至高达 24）可以提高可读性，具体取决于所使用的字体。 例如，Jeffrey Zeldman 的个人网站使用 24px 字体大小作为正文，而 Vogue.com 使用 19px 正文大小。

不过，在最终确定实际比例之前，设计师应该确保设计中使用的字体已经最终确定。 即使在技术上“相同”大小时，不同的字体也会显得更大或更小。

选择协调字体

通常将“专业”设计与更业余的努力区分开来的是字体的组合。 有效地组合字体部分是直觉，部分是科学，但设计师可以遵循一些指导方针来组合来自不同家族的字体。

首先，将衬线与无衬线混合比组合两个衬线或两个无衬线要容易得多。 但这并不像抓住任何衬线和任何无衬线那么简单，然后将它们放在一起设计。

考虑使用字体的上下文。 例如，如果设计应该是轻松有趣的，那么请确保字体适合这种情绪。 如果设计更严肃，那么字体应该反映这一点。 换句话说，组合的任何字体的情绪都应该匹配。

设计师也应该利用对比来发挥自己的优势。 将细字体和粗字体组合在一起通常比将两种重量非常相似的字体组合效果更好。

寻找具有相似 x 高度的字体（基线和字体中小写字母的平均线之间的距离）。 这有助于防止字体之间的冲突。 其他有助于防止冲突的事情包括类似的字距调整和字符形状。 非常圆的字体不应该与更多的方形字体结合使用。

虽然指南有助于创建字体组合，但没有什么能取代实验和实践。 设计师应该花时间尝试字体并尽可能多地练习组合它们。 对于预算和可用资源不允许大量试验和错误的项目，找到一些可以在各种环境中工作的备用字体组合也很有帮助。

有了这些指南，设计师可以按照网页排版来源 Better Web Type 为创建有效组合而制定的四步流程：

1. 为您的主体文本找到锚字体
2. 为可能的组合找到一些辅助字体
3. 评估组合
4. 消除/选择字体组合

其他注意事项

在选择最终字体后尝试不同的样式和粗细可以创建额外的层次结构级别，而无需创建超大的主标题。 保持字体大小大致相同，但将更重要的标题设为粗体，同时将不太重要的标题设为斜体，从而创建明确的视觉层次结构。

颜色也可以这样做。 强调色的副标题比与正文颜色相同的副标题更突出。 设计师应该在副标题中使用颜色来区分更重要的文本，而不是仅仅依赖字体大小。

间距也可用于将重要的标题和副标题分开。 在标题周围创造更多空间，使它们从随附的正文中脱颖而出，使它们更加突出。 相比之下，与正文间隔相同的副标题变得不那么重要了。

甚至字符之间的间距也可用于创建层次结构。 分隔字符可以使特定的行更加突出。 当与这些字母大写结合使用时，这尤其有效。 不过，设计师应该注意不要过度使用，因为如果过度使用它也会显得很业余。

结论

实验和实践是掌握排版层次结构的最佳方法，但学习这些指南将帮助设计师从正确的角度开始。 第一步是了解尺寸、颜色、间距、重量和其他因素如何影响有效的层次结构。

一旦在设计师的头脑中（和实践）建立了这些基础知识，他们就可以更直观地创建遵循或打破必要的“规则”的视觉层次结构，从而创造出独特的设计，让用户受到启发和愉悦。

• • •

进一步阅读 Toptal 设计博客：

• 可读性设计——网页排版指南（附信息图）
• 了解字体分类的细微差别
• 设计基础——视觉层次结构指南（附信息图）
• 网页和印刷设计的字体样式
• 通过清晰的视觉层次提升您的用户体验