Date 2026-01-22 22:54:36
排版主要是做层次划分和信息美化。
这不是一个很新的话题，但它是一个很常见的问题，不容易解决。在一个布局中，信息组越多，打开信息之间的层次关系就越重要。当然，难度越大。在这篇文章中，葱叶会带你去解决这个问题。
因为一个布局中通常有各种各样的元素和信息，比如图片、标题、小标题、文本、注释、页眉、页脚等。如果在排版中没有层次关系，这些信息将是重要的和次要的，如下图所示：
然后这个布局会在视觉上看起来很平坦，缺乏变化和设计感，所以不会好看。更重要的是，由于缺乏层次和视觉指导，观众感觉不到图片中的主次关系，阅读和信息传播的效率将大大降低。
上图重新排版后，对不同类别的信息进行了视觉调整和处理。布局有很强的层次感，大大提高了美观性和阅读性。这就是为什么布局设计应该有层次关系。
1. 根据信息的重要性来安排它们的等级
如果有层次，就会有主次，视觉上谁是主，谁是次？这必须呼应信息的重要性。我们应该使最重要的信息最突出，次要的信息应该突出，而不重要的信息应该被削弱。
上图中的文字排版有着鲜明的层次关系，标题最重要，使用大写Didot字体，关键词“ART”和“FASHION“最大的字号是第一级；非关键词”THE”和“OF“使用较小的字号，为第二级；
引文为第三级，采用小写和普通衬线体，字体大小略小于标题中的非关键字，并采用水平倾斜效果来区分其他信息；
文本为第四级，字体与引文相同，但字体大小较小；
注释为第五级，字体为无衬线体，字体大小于正文；
页码为第六级。虽然字号比文字和注释大一点，但由于位置在左下角，整体面积小，并不突出；
页脚为第七级，字体大小与注释相同，但位于右下角，排版方向为垂直排列。
因此，在使用一些修改技能时，我们应该知道哪些技能可以最大限度地突出信息，哪些次要技能，哪些技能可以削弱，哪些具体技能，洋葱将在后面进行总结和分析。
2. 层次分化应尽可能明显
例如，字体大小的区别。如果标题文本仅比文本大两个或三个，虽然标题在理论上更为突出，但效果将非常不明显，因此我们可以大胆扩大标题。
△ 除图片突出外，各文字信息类视觉表现差异不明显，层次不丰富。
△ 调整后，不仅区分了不同信息的大小，而且改变了颜色、字体、厚度等方面，使不同的信息在视觉上更加开放。因此，信息的层次关系变得更加鲜明和丰富。
3. 区分手法不要太单调
如果你想让图片更有吸引力，你应该尽可能丰富用于区分信息级别的修改技术。这在广告设计或促销海报设计中尤为重要。有些人设计的布局层次丰富，层次感强，但整体看起来有点单调，不精彩。这可能是因为他们使用的修改技术太少和单调。例如，下图中的各种信息只有大小和字体（事实上，字体差异不大）、由于笔画厚度和颜色的差异，整体效果并不十分出彩。
而且在方案2中，我还改变了一些文字的排版方向，并添加了色块来突出一些信息，并且“fashion将字体改为手写体，使其与布局中的其它字体明显区分开来。
修改后，有更多的方法可以区分层次关系，所以整个画面给人比修改前更丰富、更有设计感、更详细的感觉。
1. 位置区分
我们都知道，在一个布局中，位置越高，越容易吸引读者的注意，反之亦然，所以左上角或垂直位置，通常用于排列标题，文本一般在布局中心，布局底部通常用于排列页码、注释，或一些额外的信息，以这种方式排列信息，也可以创造一个简单的层次关系。
2. 大小区分
目标越大，吸引注意力的可能性就越大。因此，在文本排版中，最大的字体大小通常是最重要的信息，如标题、主题、核心卖点等。如下图所示，在位置差异和大小差异的基础上，层次关系变得非常明显。
3. 粗细区分
厚度的区别是指笔画的厚度。在相同的字体和大小下，笔画粗的字体比笔画细的字体更突出。因此，在上图的基础上，再加上厚度的变化，不仅进一步加强了层次关系，而且提高了美观性。
4. 字体区分
不同的字体有不同的色调和视觉感觉，所以使用不同层次的信息，也可以在视觉上对这些信息进行分类，以提高读者的阅读效率。当然，字体不应该太多，最好是2-3种。在上图的基础上继续添加字体的变化，层次差异是否更明显。
此外，不同字体的视觉冲击力也不同。一般来说，字体笔画粗、简单的字体比笔画细、复杂的字体具有更强的视觉冲击力。
5. 色彩区分
色彩可以赋予设计个性。例如，在下图中添加金色后，布局变得更加优雅和高贵，局部金色将跳出大面积的白色和黑色，打开文本之间的层次关系。
6. 透明度区分
不同透明度的元素在一起会形成虚拟和真实的对比效果，从而增强布局的空间感，将重要信息设置为高透明度，使其更接近读者，将不那么重要的信息设置为低透明度，使其远离读者，这也是打开层次的有效手段。
7. 线框突出
给文本增加线框，就像用笔圈出书中的一些文字一样，效果更突出。不仅有线框的文字可以与无线框的文字分开，而且不同形状的线框也可以分开。例如，下图中的大标题使用矩形线框，小标题前的序列号使用圆形线框。
8. 造型区分
上图中使用了不同形状的线框，这延伸了区分信息层次的另一种方法：造型区分。例如，在下图中，大标题使用矩形、副标题使用箭头和内文使用对话框。因此，这些信息在形状上有明显的区别，它们与没有外框形状的页脚信息完全分开。
注:造型不仅可以体现在线框上，还可以体现在色块、图片和元素上。
9. 色块突出
色块是一种视觉冲击力强的设计元素，因此在重要的文本信息中加入色彩对比鲜明的色块可以使其更加突出。色块与无色块的文本形成鲜明对比，也可以使层次分化更加明显。
10. 空间突出
不同于通过设置不同透明度的元素来塑造空间感，这里的突出空间是指为一些重要信息增加三维效果，使其与平面元素保持距离。例如，下图中的标题通过重叠创建了三维效果。副标题添加了一个立方体，使其具有三维效果。这两个元素得到了进一步的丰富和突出。
11. 直线突出
直线在布局设计中有很多功能，如强调、装饰、区分信息等。下图用直线赋予了一些信息不同的表达形式，使其具有不同程度的吸引力，并相互打开层次。
12. 图形突出
通过在关键信息中添加图形也可以使其更加突出。图片具有强烈的视觉冲击力，因此当图片叠加在标题上时，该区域的整体吸引力将大大增强；在副标题的左右两侧添加类似书名的图形可以使其更加特殊；在标题前添加一个小钻石不仅可以使其更加美观，还可以将其与其他内容区分开来。
13. 方向区分
不同的信息采用不同的排版方向，也可以有效区分，当然，并不是说所有的信息排版方向都不同，毕竟，水平排是最适合阅读的，所以下图只使用垂直排和曲线排版的标题和页脚，此外，小标题做了轻微的水平倾斜处理，水平关系也非常明显。
14. 质感区分
不同的纹理也可以有效地区分布局中的信息。例如，在下图中，大标题填充图片纹理，副标题填充金色渐变纹理，而其他信息没有添加纹理，因此它们之间的层次关系也非常开放，图片效果更丰富。
15. 点线面区分
虽然点、线、面之间有着密切的联系，但三者在视觉呈现上仍然存在很大的差异。因此，如果将布局中的信息作为点、线、面进行设计和排版，不仅可以增强布局的设计感，还可以达到加强信息区分的效果。
注：如果笔画较厚，字体大，填充设置为0，则表面可转换为线；如果将单词间距增加到超过单词宽度，则可以将线拆分为点。
说了这么多，最后，洋葱用一个非常脚踏实地的商业案例来总结。以下是长隆开园广告的设计内容，要求设计1080x2560垂直电子屏幕海报。
从上图可以看出，除了图片和二维码外，文本信息可以分为4-7个层次。因此，让我们从位置、字体、大小和厚度等方面进行分类，如下图所示：
在狭长的布局空间中，从上到下的视觉过程显然是最合理、最容易阅读的。从上图来看，效果还可以。接下来，我们将单独处理文本信息的各个部分。
标题是海报中最重要的信息，所以它增加了一点三维的金属效果和投影效果，使其在纹理和空间上与其他信息区分开来。
“优惠旅游”是仅次于大标题的重要信息，所以也应该突出，但突出效果不能超过大标题，所以我添加了一个标志性的优惠带线框。
“开放时间”和“开放公园和酒店”的内容形式有点相似，即小标题和内容。为了使布局中的表达形式不太多或太昂贵，我使用了相同的处理方法，除了小标题除了使用粗体外，还在其左右增加了一个菱形的小图形，而内部则使用金色来区分小标题的白色。
“扫码抢五一优惠”是为了引导大家扫描图片中的二维码，所以这句话当然要和二维码排在一起。为了再次突出“五一优惠”这个词，它还将字体的厚度和颜色与“扫码抢”区分开来，并在它们的底部增加了一个箭头符号，以加强它与二维码的联系。
单块信息处理完成后，我们来看看它们在布局中的整体效果。从下图可以看出，层次关系丰富、鲜明、合理。
到目前为止，布局仍然有点空，信息非常分散，缺乏设计感，所以我们可以使用线框和直线来整合和区分布局中的信息，并将其设计成类似的表格。
一头一尾(优惠旅游和二维码)也刻意打破，削弱了表格的规则感。
在二维码左右两侧添加一点装饰文本，使其视觉更加平衡，最后在背景上添加一点底纹。
合理划分布局中的元素和信息是布局设计中最重要的工作。读完这篇文章后，你也应该发现所有的技术都在进行比较，所以这仍然是一句老话， 无论我们做什么，都离不开美观、对比、统一、平衡、清晰等设计原则。我希望这篇文章能对你有所帮助。
假如这篇文章对你有帮助，给葱爷点赞吧，谢谢！
今天，我将继续为大家带来一系列关于新一期《拍照就是海报》的文章，重点介绍如何处理文案和图片之间的层次关系。
阅读文章 >欢迎关注作者微信微信官方账号:「葱爷」
