如何构建有效的印刷层次结构

本文概述

• 什么是印刷层次结构？
• 如何创建印刷层次结构(并在视觉上组织你的设计)
• 总结

在设计中有效地组织内容, 使内容易于理解和使用是设计师最重要的工作之一。由于设计人员使用的大部分内容都是基于文本的, 因此创建有效的印刷层次结构是设计人员可以学习的最重要的内容之一。

练习和尝试创建有效的层次结构是真正掌握该技能的最佳方法, 但在制定自己的规则之前, 设计人员应首先学习一些准则。毕竟, 如果不先了解规则是什么, 就不可能有效地打破规则。

什么是印刷层次结构？

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

比较这两个示例, 可以很明显地看出印刷层次结构为何如此重要。

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

印刷层级结构向读者显示了要重点关注的信息, 这是最重要的, 而这仅是重点。

Web上的印刷层级结构有很多种。这些包括：

尺寸。大小通常是新设计师在尝试创建印刷层次结构时首先要考虑的问题。并有充分的理由：它可以立即被读者轻松识别。较大=较重要, 较小=较不重要。但是, 当有太多其他选项可以创建层次结构时, 大小可能成为关键。

重量。使字体变粗或变细是创建层次结构的另一种容易理解的方法, 即使非设计人员也可以轻松地确定层次结构。

颜色。颜色通常被视为创建层次结构的一种方法, 但这是一个不错的选择。即使使用给定颜色的较浅和较深的阴影也可以创建更独特的层次结构。在字体和背景之间建立更多的对比也可以增加印刷层次。

对比。除了对比色之外, 不同字体大小, 粗细和样式之间的对比也是创建印刷层次结构的关键。字体大小仅相差一两个点, 就不会产生足以使层次结构对大多数用户显而易见的对比度。相反, 设计人员应使用易于区分的大小, 权重和样式来轻松在标题或正文之间进行对比。

案件。从可读性的角度来看, 大写正文文本通常不是一个好主意, 但在标题或副标题中使用大写字母可以帮助区分不同的标题或其他类型。

位置和对齐方式。标题和子标题的位置以及设计人员想要突出的其他类型, 可能会对类型在层次结构中的位置产生很大影响。例如, 居中类型倾向于使其突出。在页面的常规页边距之外设置类型也可以使该类型在页面的层次结构中脱颖而出。

如何创建印刷层次结构(并在视觉上组织你的设计)

在创建印刷层次结构时, 设计师有很多选择。但是, 仅了解创建层次结构所需要的内容并不一定会帮助设计人员创建有效的层次结构。

首先要考虑的事情之一是设计应具有多少层次结构。通常, 每个设计都应包括三个层次结构：标题, 小标题和正文。从那里开始, 设计师可以考虑可能需要的其他级别。这些内容可能包括标题, 其他子标题, 引号和元信息(例如作者或文章上的日期)。

从那里开始, 弄清楚如何区分层次结构的不同部分的关键。它应该不用说, 但是标题应该比小标题更突出, 而子标题应该比正文副本更突出。标题通常不应比正文复制突出, 并且引号应在正文和副标题之间。

KonMari网站使用许多层次的印刷层次结构：标题图像中的主要标题, 每个部分上方的子标题以及页面介绍性段落中的较大文本以及常规正文。

字号

存在传统的印刷比例尺来帮助设计师入门。但这只是一个起点, 设计人员应在不偏离这些传统比例的情况下随意尝试不同的权重和样式。大多数内容的缩放比例基于正文的大小, 并从此处扩展。

大多数设计人员都熟悉”印刷风格元素”中的经典印刷比例, 因为它们往往是大多数文字处理程序在选择字体大小时提供的默认设置。规模为：

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字体大小。

Zeldman.com使用大型主体来提高可读性。

但是, 在最终确定实际比例之前, 设计人员应确保设计中使用的字体已完成。即使从技术上说, 相同的尺寸, 不同的字体也可能会明显变大或变小。

选择协调字体

除了更加业余的努力之外, 经常使”专业”设计脱颖而出的是字体的组合。有效地组合字体是部分本能和部分科学, 但是设计师可以遵循一些准则来组合不同系列的字体。

首先, 将衬线与无衬线混合使用比组合两个衬线或两个无衬线要容易得多。但这并不只是简单地抓住任何衬线和无衬线, 然后将它们组合在一起进行设计。

考虑使用字体的上下文。例如, 如果设计应该轻巧有趣, 那么请确保字体适合该心情。如果设计较为严肃, 则字体应反映出来。换句话说, 正在组合的任何字体的情绪都应该匹配。

Morenita网站结合了衬线字体和无衬线字体, 这两种字体都具有复古感和高端感。

设计师也应该利用对比来获得优势。组合细字体和粗字体通常比组合两种重量非常相似的字体效果更好。

Bench结合了粗体和较轻的字体, 以吸引人们注意特定的字体。

查找具有类似x高度(字体的基线和小写字母的平均行之间的距离)的字体。这有助于防止字体之间发生冲突。其他有助于防止冲突的内容包括相似的字距调整和字符形状。具有非常圆形的字母样式的字体不应与更多的方形字体结合使用。

虽然准则可以帮助创建字体组合, 但是没有什么可以替代实验和实践。设计师应该花时间尝试字体并尝试尽可能地将它们组合在一起。找到一些可以在多种情况下使用的后备字体组合, 对于预算和资源不多的试验项目也很有帮助。

昆士兰芭蕾舞团使用衬线字体和无衬线字体来创建动态的印刷层次结构。两者的类似x高度可以帮助两种字体很好地协同工作。

掌握了这些准则, 设计人员可以遵循网络排版来源Better Web Type提出的四步过程, 以创建有效的组合：

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

其他注意事项

选择最终字体后, 尝试使用不同的样式和权重可以创建其他层次的层次结构, 而不必创建超大的主标题。保持字体的大小大致相同, 但是使更重要的标题变为粗体, 而使次要字体不太重要的斜体会创建明确的视觉层次。

颜色也可以这样做。带有强调色的副标题比与正文文本具有相同颜色的副标题更加突出。设计师应在其副标题中使用颜色, 以区分更重要的文本, 而不必完全依靠字体大小。

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

字符之间的均匀间距可用于创建层次结构。隔开字符可以使特定行更加突出。与大写字母结合使用时, 此功能特别有效。但是, 设计人员应注意不要过度使用它, 因为如果过度使用它也会显得有些业余。

总结

实验和实践是掌握印刷层次结构的最佳方法, 但是学习这些指南将有助于设计师从正确的角度入手。了解尺寸, 颜色, 间距, 重量和其他因素如何有助于有效的层次结构是第一步。

一旦在设计师的思想(和实践)中确立了这些基础, 他们便可以根据需要以更直观的方式创建遵循或打破”规则”的视觉层次结构, 从而创造出使用户感到鼓舞和愉悦的独特设计。

• • •

在srcmini设计博客上进一步阅读：

• 可读性设计– Web排版指南(带有信息图)
• 了解字体分类的细微差别
• 设计基础–视觉层次结构指南(带有信息图)
• Web和印刷设计的字体样式
• 清晰的视觉层次结构提升你的用户体验