为什么做版式设计你总是没有思路？

@琳琳和止水是一样的 ：作为一名专业的设计师，布局设计能力直接影响到设计师的水平。我们的许多设计朋友在复制的优秀作品中，往往只是被华丽的外观所吸引，很少考虑设计背后的秘密。所以在这里，我总结了布局设计原则的几个方面，结合一些具体的实际操作演示，这样不熟悉的设计师朋友就可以快速掌握布局设计。

目录

构图平衡设计原则设计过程案例演示

第一，布局组成

主题：视觉焦点，主导整个设计(可以是人/物/文字/图片)，整个布局最吸引人的部分，相当于主角的角色。

文案：辅助解释或指导主体，毕竟，有时我们把一只小狐狸放在旁边，用户不能准确地知道它在说什么，配角的角色。

装饰元素：装饰元素，可有可无，具体根据布局需要；良好的装饰元素可以渲染气氛，大多数装饰元素遵循三角形原则，类似于下图中的云，群体表演的作用。

背景：可分为纯色/彩色纹理/图片/图形等。

二、构图平衡

在设计中，平衡是实现统一的重要途径。如果上述元素处于平衡状态，则设计看起来统一，给人一种整体印象。因此，平衡是视觉传达设计的一个重要方面。布局平衡分为对称平衡、非对称平衡和整体平衡三类。

1. 对称平衡

对称是同等数量的平衡，对称设计是一种静态、可预见、组织和平衡布局的设计。对称构图相对容易创建，具有稳定、庄严、整洁、和平、安静、古典的特点。

2. 非对称平衡

不对称在不对等元素之间创造秩序和平衡。由于布局不可预见，非对称设计的空间发生了变化。其特点是动态、灵活、充满活力。不对称构图较多，常见形式有以下六种。

对角构图：

文案放置在布局的对角线方向上。一方面，它避免了常见的中间布局，另一方面，它为中心主体留下了更多的创意空间；此外，中心图形也可以设计为对角线，使整个构图看起来更加平衡。

发射状构图：

点缀元素围绕中心的文案或图形发射，使中心的视觉容易聚焦，视觉冲击感更强。

比如电商推广活动，淘宝、JD.COM等。会经常使用发射性构图来创造活泼的推广活动。

中心构图：

这是我们最常见的组成部分之一，文案和主页在中间页面，注意主体位于版本的核心应该尽可能辉煌，使用设计技能来吸引读者的注意，以避免乏味。

s形构图：

文案或图形放在线条转折处，整体呈现 s 形状。此外，线条的起点和重点也是读者容易关注的地方。你可以放一些重要的信息。这种构图灵活有趣，可以引导用户跟随 s 轨迹阅读信息。

二分构图：

文案与主体分开，呈左右或上下构图形式。需要注意的是，文案应采用对齐原则。这种构图也更容易创建。

形状构图：

主体和文案的组合可以是圆形、三角形、矩形和其他形状的组成。请注意，如果使用三角形构图，最好是倒金字塔结构，以便更容易引导用户进入下一个信息层。

3. 整体平衡(满版平衡)

整体平衡是指图片充满整个布局，文案布局在上下、左右、中间，以图像为主要吸引力，视觉传达直观而强烈。整个版本的构图，给人一种慷慨、伸展的感觉。注：在设计过程中，这种类型的文本处理很容易出现「嘈杂」，因此，为了避免拥挤的空间，适当删除一些单词。

三、设计原则

在了解了构图形式后，我们还需要了解一些基本的设计原则。虽然我们可以在其他地方反复看到这些原则，但我仍然需要在这里强调，因为它可以帮助我们在打破规则之前知道规则是什么。另一点是，这些原则不是独立的，而是可以同时考虑和结合的，而不是唯一的选择：

1. 对比

缺乏对比，作品会变得枯燥，无法有效传递信息。艾美奖设计师，Blind 公司创始人 Chris Do 说过 contrast is king(对比至上)，利用好对比，可以引导用户在页面上的视觉，并产生焦点。

产生对比的一般方法可以是：尺寸对比、厚度对比、冷暖色对比...无论是哪种比较，当你期望比较效果有效时，你需要大胆而明显。不要比较12号和13号文本的大小。这毫无意义。不要胆小。设计也是如此。

2. 对齐

任何元素都不能随意放置在布局上。每个项目都应该与页面上的某个内容有一定的视觉联系。在布局上找到可对齐的元素，尽管它们可能很远。需要注意的是，避免同时使用多种对齐方法。

左边的海报采用矩形构图，右边的海报采用二分构图，但文案找到了清晰的对齐线，使布局有序美。

3. 亲密性

同类相似，异类相远，相关元素相近，组合在一起，成为一个视觉单位，而不是多个孤立和分散的状态，有助于组织信息，减少混乱，使结构更加清晰。根据文案内容进行合理的分组和分类。

左边的海报文案分为四组，清晰有组织。中心的主体和装饰元素也采用了亲密原则，使中心的主体看起来更饱满；右边的海报主体采用发射构图，整体金字塔倒置，容易引导用户阅读下一个信息层。

4. 重复

重复的目的是统一和增强视觉效果。例如，标题是相同的字体或大小或厚度。但需要注意的是，为了避免重复太多的元素，重复太多只会让人讨厌，要注意重复「度」。太多的重复会混淆焦点，这意味着没有焦点。一般来说，以均匀的重复模式作为背景使用。

在左边的海报中，我们的视线会被不同的女孩吸引，左上角的女孩和文案「敏感词万岁」相互呼应，这种同质的区别，即变异元素，用于制作视觉焦点。

右边的海报是葛西熏设计师为日本名仲条正义设计的个人展览海报。重复的形象是一个脸颊鼓鼓的孩子的形象。我不知道我是在喝酒还是呕吐。这个有影响力的形象实际上是展览的主题「饮&呕吐」回声，设计师想在生活中表达仲条正义的创作，就像这个重复的形象一样，不断吸收，不断推翻，最终不断创造。

5. 留白

空白是虚拟空间对比的作用。适当的空白可以使页面透气、呼吸和舒适。当堆积大量的视觉信息时，每个元素都应该通过眼睛扫描和大脑处理。当找不到关键点时，用户的眼睛和大脑很容易疲劳。在内容较多的情况下，尽量减少视觉分组；此外，利用更多的负空间来创建一些聪明的负空间。

左边在留白的同时，利用负空间巧妙地将海报的主题作为主题「美食」和「美酒」结合起来。右边的海报是日本大师原创研究的设计作品。大量的空白空间使中间寿司更加精致。较少而安静的视觉元素提高了作品的质量感。

6. 变化

一成不变的元素很容易枯燥，布局也缺乏灵活性。如果某些元素的位置、大小或颜色发生变化，打破僵硬平淡的布局，使画面具有层次感，这是打破图案的好方法。

如果左边的海报把所有的元素都放在位置上，那将是一个文案和角色之间中间距离的构图。当他们的位置发生一些位移时，整个页面就会变得更加有趣。右边的海报使用了 s 如果这些圆圈的大小和颜色相同，可能没有多少人会耐心阅读。

四、设计过程

在我们了解布局元素、构图和设计原则之前，所以我们如何在工作中使用它们，下面介绍我自己的设计过程，每个人的过程都是不同的，我们可以根据自己的习惯进行调整。

1. 沟通需求，确认主题

当你收到需求时，不要急于立即开始第一步。首先要找到正确的需求方向，以提高工作效率，用一半的努力得到两倍的结果。沟通主要关注以下几个方面：

需求的目的是什么？目标用户是谁？背景是什么？-在这么多的文案或材料中，哪一个是一级和二级？-划分信息水平，寻找关键风格的要求或建议是什么？你能用三个关键词来表达它吗？-预期效果是否达成一致

Ps：关于风格沟通的第三步，建议双方用图片进行沟通和表达。说到底，每个人都是对的。「高大上」对它的理解是不同的。有些人认为它是五颜六色的黑色，有些人认为它是大量的空白。有了图片，我们可以分析图片符合要求「高大上」提取具体元素的原因是什么？「感觉」情绪板设计系统也应用于具体化。

2. 确定构图形式，学会引导视线h5>

根据之前的沟通和风格关键词，收集用于表达信息的元素，包括图形、图像和文本，然后在草稿或头脑中构思如何有效地传达信息。此外，作为一名设计师，我们应该学会引导用户的阅读视线。例如，如果你找到了一个向上看的模型，你可以把副本放在海报上，用户会习惯性地沿着模型的视线自然地看到副本。

3. 色彩搭配，五种平衡关系

关于配色，我们可以在网上看到很多方法和理论。我认为这五种颜色平衡方法更实用、更容易理解。我们应该根据实际需要使用合适的配色方案。

互补色-相互衬托

互补色是色环上的两种相对颜色，海报中的绿色和红色就是这种关系，相互映衬，相互映衬，从而达到平衡。

冷暖色-情感表达

当我们想表达强烈的情感时，我们可以用冷暖色来比较，经常在电影海报或插图中看到。

深浅色-色彩层次

这里的深度是指黑、白、灰对比的重量和轻度。一般来说，大而深的颜色更重要，小而浅的颜色更次要。我们可以看看前面提到的海报黑白版的构图，我们会发现这个规则更明显。

中性色彩和色彩-视觉聚焦

中性色是指黑色、白色和灰色，也被称为无色，当中性色作为背景色时，颜色部分会更加突出和集中。

纯色和颜色-平衡多色关系

如果在一张图片中，主体本身的颜色更丰富和明亮，背景颜色也是丰富多彩的，那就令人眼花缭乱，通常被称为热眼睛，此时通常使用纯色背景来缓解视觉疲劳和平衡颜色之间的关系。

4. 确定字体搭配

不同的字体有不同的气质，根据风格选择合适的字体。如果你遇到一个更好的字体，但不知道它叫什么名字，你可以找到一些网站来搜索字符，比如寻找字体网络，以避免伸出派对。

黑体

无衬线字体具有强烈的工业现代感，给人一种刚性和力量感，主要用于表达简单或信任的主题。

宋体

细腻典雅的衬线字体，纤细细长，具有复古的特点，主要用于表达文学或时尚的主题。

圆体

圆笔画圆润、柔软、可爱、亲和力强，多用于女性或儿童的主题领域。

书法体

书法体的特点是潇洒大方，气势磅礴，有历史感，多用于表达传统文化或历史主题。

哥特体

哥特式是一种装饰性很强的衬线字体，在线条的交界处和末端有明显的厚度变化和装饰。其特点是尖锐、尖锐，主要用于表达恐怖、魔法童话或战争的主题。

艺术体

艺术风格实际上是指具有强烈艺术风格和设计感的字体，如像素风格、手写字体、汉仪六字简等。其特点是轻松活泼，具有观赏性和趣味性。

五、案例演示

以上案例大多是平面展览或电影海报，所以实际工作中的网页，banner、闪屏或者 ui 界面怎么样？事实上，方法是相同的，布局设计的原则应用于各个方面。在这里演示一个移动终端 banner 设计案例。

首先，操作小妹妹的副本非常简单，没有冗长到让我分为一级、二级和三级；其次，需求的目的也非常明确，即突出两个材料和按钮；最后，只要产品的整体基调一致，就没有奇怪的建议。所以在这里介绍一下产品的背景，pins 是少女心拼图 app，界面简洁清新，有多种布局模板和背景。很快，我在脑海中简单地构思了构图的方法。事实上，这三种构图形式都可以，但为了更好地突出按钮和材料的效果，我最终选择了对角线构图。

首先，在黑白手稿的情况下，文案和主体布局良好，使主次关系清晰；考虑到目标用户大多是女孩，使用圆字体，颜色匹配主要是参考 pins 的 logo 配色，少女心品牌色；最后，调整细节，添加一些装饰元素，其中网格是 pins 更受欢迎的背景。简单 banner 这样完成了。

当我们的工作内容不能满足做更多文本的平面海报的欲望时，我们可以考虑自我命题的练习。当我听到徐伟的新歌《无人知晓》时，我有一些感受和想法，然后做了一些 C4d 材料，想用它作为主题和歌名来做排版练习:

在我开始这样做之前，我想这次我想做一张视觉直观而强烈的海报。此外，主体是文案和材料的结合，所以我使用了全版本的构图。在黑白灰中确定主角和配角的位置，然后调整字体和距离。

然后调整主体中的四个单词与材料之前的交叉和重叠。调整细节后，我尝试了两种配色方案，一种是使用主要材料的颜色，平静和谐；另一种是红色和蓝色，直观而强烈。

总结

最后，在设计布局时，我们应该注意不断调整和检查这些方面。同样，当你看到一张海报时，你不知道如何思考和分析它，你也可以从这些方面开始：

主题是否清晰？视觉焦点是否突出？构图是否平衡（三种平衡关系）设计原则是否合理使用（六种设计原则）细节是否丰富？ 是否有趣? 细节考验设计师的感受。(字体、颜色、光影等。)

上海报案例图片采编于网络，版权归原作者所有。

「豪斯先生平面课系列」

“解锁构图的新姿势！让平面作品变得高大的三种构图技巧”“大师的平面课！八种简单有效的方法可以帮助你提高设计水平”“每个人都知道设计真相，为什么不改变自己呢？”