排版的层级划分与信息美化：常见却不易解决的问题？

排版主要就是在做层级划分以及信息美化的工作。

这并非一个新颖的议题，却普遍存在，且处理起来颇具挑战。在版面布局中，信息分类越多，明确层级关系就越显关键，自然，这也意味着更高的难度。本文，葱爷将携手各位，共同探讨并解决这一难题。

为什么要有层级关系

由于一个版面往往包含多种元素和丰富信息，比如在画册的版面中，我们可能会遇到图片、主标题、副标题、正文内容、注释、页眉以及页脚等。这些信息的重要性也有所不同。若排版缺乏层次感，如同下图中所示：

这样的版面从视觉上看会显得特别单调，缺乏变化与设计元素，因而整体上并不美观。更关键的是，它缺乏层次感与视觉引导，使得读者难以辨识画面的主次，这无疑会显著减少阅读效率和信息传递的效能。

经过重新编排，该图对各类信息进行了精心调整与美化，使得版面呈现出鲜明的层次结构，从而在视觉效果和阅读体验上都有了显著提升，这也正是版式设计中层级关系之所以重要的原因所在。

如何正确安排层级关系？

1. 按信息的重要程度来安排它们的层次等级

存在层级关系便意味着有主次之分，那么在视觉呈现上，如何区分主次呢？这需要与信息的优先级相匹配。我们需要确保最为关键的信息得到显著展示，相对次要的信息则需适当突出，而对于不那么重要的信息，则应进行弱化处理。

上图中文字的布局呈现出明显的层次结构，其中标题占据核心地位，采用醒目的大写Didot字体，而“ART”与“FASHION”这两个关键词的字号尤为突出，构成了最高层级；相对而言，“THE”和“OF”等非关键词则采用了较小的字号，属于次一级别。

在第三层级的引用中，应采用小写字母和常规衬线字体，字号略小于标题中的非关键词部分，并施加水平倾斜效果，以此与其他信息内容进行区分。

正文为第四层级，字体与引文相同，但字号要小一点；

注解为第五级，字体为无衬线体，字号比正文更小；

第六层的页码虽然相较于正文及注释的字体略大，但因其位于页面左下角且占据的面积有限，故而并不显眼。

页脚属于第七级，其字体大小及样式与注释保持一致，且应放置在页面右下角，同时采用垂直排列的排版方式。

因此，在运用某些修饰手法时，我们需明确哪些手法能最有效地凸显信息，哪些手法次之，以及哪些手法可能起到弱化作用。具体这些手法有哪些，葱爷将在后续进行归纳与剖析。

2. 层级区分要尽量明显

例如，在字号大小的对比上，即便标题的字体仅比正文多出两三号，理论上标题的确显得更为突出，但实际效果却并不显著。因此，我们不妨将标题的字号适当放大。

上图中，图片内容格外引人注目，然而，其他文字类别的视觉特征在区分度上并不显著，且整体层次感较为单薄。

调整后的效果不仅显著区分了不同信息的字号大小，而且还在颜色、字体样式以及粗细程度等方面进行了调整，这样一来，不同信息在视觉上显得更加清晰，层次感也因此变得更加突出和多样化。

3. 区分的手法不要太单调

为了使画面更具吸引力，我们应当力求信息层级的修饰手段更加多样化；特别是在广告创意或促销海报的设计过程中，这一点显得尤为关键。某些人的设计作品在版面布局上层次分明，给人以丰富的视觉体验，但整体观感却显得较为平淡无奇，缺乏亮点。这或许是因为他们在运用修饰技巧上显得过于单一和乏味，例如，下图中展示的信息元素仅通过大小、字体（实际上字体间的差异并不显著）、线条粗细以及色彩来区分，导致整体效果未能达到令人瞩目的地步。

在方案二里，我对某些文字的排版朝向进行了调整，同时加入了色块来强调特定内容，还将“fashion”字样换成了手写风格，从而与版面中的其他字体形成鲜明对比。

经过修改，画面的层次感得到了显著增强，因此整体视觉效果相较于修改前显得更加丰富多彩，设计感更加突出，细节也更加丰富。

有哪些区分层级的表现手法

1. 位置区分

在版面布局中，上方和左侧区域往往更能吸引观者的目光，而下方和右侧则相对较弱。因此，标题通常被放置在左上角或靠近版面中心偏上的位置。正文内容则多置于版面中央，而页码、注释以及其他补充信息则常位于版面底部。按照这种布局方式，可以有效地构建起信息的层级结构。

2. 大小区分

较大的目标往往更能吸引人们的目光，因此，在文本布局中，通常字号最大的内容都承载着最为关键的信息，诸如标题、主题、关键卖点等。图中展示了在位置区分的基础上，通过字号大小的差异，信息之间的层次结构一目了然。

3. 粗细区分

文字笔画的粗细差异，即所谓的粗细区分，在相同字体和字号条件下，粗笔画字体相较于细笔画字体显得更为醒目。因此，在原图的基础上引入粗细变化，不仅使得层级关系更加分明，同时也增强了整体的美观度。

4. 字体区分

不同的字体展现出各自的风格和视觉效果，因此，采用不同字体的方式来区分不同层级的信息，不仅能在视觉上对这些信息进行分类，还能有效提升读者的阅读效率。当然，字体的种类不宜过多，以2至3种为宜。若在上图的基础上进一步引入字体变化，层级的区分是否会变得更加清晰可见呢？

此外，不同字体的视觉效果也有所不同，一般来说，那些笔画粗犷、设计简洁的字体，相较于笔画细腻、结构复杂的字体，往往能带来更强烈的视觉冲击感。

5. 色彩区分

色彩能够为设计注入个性，例如在下面的图中融入金色元素，整个版面便显得更加高贵和典雅，而且局部的金色能够从周围的广阔白色与黑色中脱颖而出，进一步扩大了文字间的层次感。

6. 透明度区分

将不同透明度的元素组合，可营造出一种虚实相间的视觉效果，进而增强版面的立体感。将关键信息设计为高透明度，有助于拉近与读者的距离，而将非关键信息调整为低透明度，则可以使它们显得更加遥远，这无疑是区分层次的一种有效策略。

7. 线框突出

在文字中添加边框，如同用笔在书籍中圈出特定文字一般，这能使其显得格外醒目。这种效果不仅体现在有线框的文字与无框文字之间的区分，而且不同形状的边框之间也能相互区分。例如，在图示中，大标题采用了矩形边框，而小标题前的序号则使用了圆形边框。

8. 造型区分

图中采用了各式各样的线框设计，进而衍生出一种区分信息层级的策略——即通过造型差异来划分，比如在下一张图中，主标题采用了矩形轮廓、副标题则采用了箭头形状、正文内容则以对话框样式呈现，这样一来，各类信息便在造型上形成了鲜明对比，同时，它们也与那些未加外框的页脚内容实现了彻底的区分。

注：造型不仅能在线框中展现，亦能在色块、图像以及各个元素中得以体现。

9. 色块突出

色块作为一种极具视觉冲击力的设计元素，因此，在关键文字信息中加入色彩对比强烈的色块，能够显著提升其显眼度。同时，有色块与无色块的文字之间形成的鲜明对比，也有助于更清晰地划分层级。

10. 空间突出

此处的空间感并非通过调整元素的透明度来营造，而是强调对关键信息的立体化处理，以使其与平面元素形成鲜明对比。比如，下图中主标题通过重叠手法营造出立体感，副标题则通过添加立方体来增强立体效果，二者均因此得到了更为丰富和突出的表现。

11. 直线突出

版式设计中，直线扮演着多种角色，诸如突出重点、增添美感、划分信息区域等。图中的例子展示了直线如何为特定信息赋予独特的呈现方式，进而产生不同层次的吸引力，并有效区分各部分内容。

12. 图形突出

增加图形信息可以显著提升关键信息的显著性，图片因其鲜明的视觉冲击力，当其被置于大标题之上时，该区域的吸引力便得到显著增强；在副标题两侧装饰以类似书名号的图形，更能彰显其独特性；而在小标题前添加一个菱形装饰，不仅使整体视觉效果更加美观，同时也有助于将该部分内容与其它区域区分开来。

13. 方向区分

采用不同的排版方式对信息进行区分，同样可以取得良好的效果。当然，并非所有信息都需要采用不同的排版方向。实际上，横排通常是阅读的最优选择。因此，在下图中，标题和页脚的文字分别采用了竖排和曲线排版，而小标题则进行了轻微的水平倾斜，从而使得层级关系更加清晰。

14. 质感区分

通过为版面信息赋予不同的质感，可以有效地进行区分，比如在下面的示例图中，主标题采用了与图片相似的质感进行填充，副标题则使用了金色渐变效果，而其他内容则未添加质感，这样不仅使得它们之间的层次感更加明显，同时也使得整体画面看起来更加丰富多彩。

15. 点线面区分

尽管点线面三者之间存在着紧密的联系，然而在视觉表现上，它们之间仍存在显著的差别。因此，在将版面中的信息视作点线面进行设计和排版的过程中，不仅能有效提升版面的设计美感，同时还能显著增强信息的辨识度。

将文字中笔画较粗、字号较大的部分进行描边处理，并将填充设置为0，这样就能将面转换成线；同时，若将一句话的字间距调整至超过单个文字的宽度，则可以将线条分解为独立的点。

实例演练

众多繁杂的讨论之后，葱爷以一个贴近生活的商业实例进行归纳，具体来看，长隆乐园的开园宣传广告设计要求包括：设计一幅尺寸为1080x2560的竖式电子屏幕海报。

观察上图可知，除了图像与二维码之外，文字内容大致可分为四至七个不同层次。因此，接下来我们将依据位置、字体样式、字号以及粗细程度等因素，对这些层次进行细致的划分，具体划分方式如图所示。

在狭长的版面区域内，自上而下的视觉走向显得最为适宜、便于阅读。观察上图可知，此做法呈现的效果尚可。因此，我们将对各个部分的文字内容进行逐一处理。

海报的核心内容便是这一大标题，因此特别为其增添了带有立体感的金属光泽及光影效果，从而在视觉质感与空间层次上显著区别于其他信息区域。

“特惠出游”这一信息虽不及标题重要，却仍需凸显，故我特别设计了一个带有优惠意味的飘带形状的线框来加以强调，同时确保其突出度不会超过标题本身。

“关于‘开放时间’以及‘开放园区及酒店’的描述，其结构形式颇为相似，均以小标题配合具体内容呈现。考虑到版面设计需避免过于繁杂与花哨，我对这两部分内容采取了统一的设计手法。具体来说，小标题不仅采用了粗体字，还在其两侧添加了菱形的小图标作为装饰，而正文部分则通过金色字体与白色小标题形成对比，以增强视觉效果。”

“五一特惠扫码抢”系指引消费者扫描展示图中的二维码，故此表述应紧邻二维码呈现，同时为强化“五一特惠”一词的辨识度，特将字体粗细及色彩与“扫码抢”区分开来，并在其下方增设一指向二维码的箭头标志，以增强二者间的关联性。

信息经过单独处理之后，我们不妨审视一下它们在版面上的整体呈现，通过下方的图示，我们可以明显观察到其层级结构既丰富又清晰，并且安排得相当得当。

目前版面尚显空旷，内容分布较为分散，缺乏一定的设计美感。因此，我们考虑采用线框与直线对版面信息进行整合与划分，使其呈现出类似表格的布局。

在首尾部分，特别针对特惠旅游活动和二维码设计，特意进行了创新处理，以降低表格的刻板印象。

在二维码两侧点缀些许装饰性文字，以实现视觉上的均衡感，随后，再为背景增添些许底纹，整个设计便告完成。

总结

合理地对版面中的各个元素和信息进行分层，是版式设计中的核心任务。阅读完本文后，您或许已经察觉到，各种设计技巧本质上都在进行对比。因此，我们常言，无论从事何种设计工作，都无法脱离美观、对比、统一、平衡、清晰等设计原则。衷心希望这篇文章对您有所助益。

如果本篇文章对你有所帮助，给葱爷点个赞吧，谢谢！

如何处理好文案和图片之间的层级关系，看这篇文章就够啦！

今日，我们继续为大家呈现《一图胜千言：照片即海报》系列的最新篇章，着重探讨如何有效协调文字与图像的层次布局。

阅读文章 >

继续浏览有关 排版设计信息层级 的文章