Date 2026-04-20 14:52:35

你看过或听过很多理论知识,被很多矛盾的设计原则搞糊涂了吗?比如你把设计发给导演,然后他告诉你太乱了,要统一,你就努力调整了。再发给他的时候,他说太平淡了,要有对比。你以为一段时间要统一,一段时间要对比。这不是矛盾吗?当然不是。其实你心里知道,只是不知道怎么平衡两者的关系。
类似这种「矛盾」还有几对设计原则。接下来,葱爷要逐一理清,让这些理论知识真正指导设计实践。
对齐是布局设计最基本的原则之一。具体来说,布局中的单词应与单词、单词和图片、图片和图片对齐。常用的对齐方法包括左对齐、右对齐、上对齐、下对齐、中对齐、两端对齐等。对齐的目的是使布局更加整洁,更容易阅读。例如,以下作品使用了大量的对齐关系。


让我们举个例子,假设你现在想设计一个手机banner图,以宣传某款手机的摄影功能,文案如下:

这张照片并不难做到。你计划直接使用一部手机和几部摄影作品作为图片的主要视觉,所以你去图片网站找到一些可以反映手机照片功能的图片:

找到图片后,您将其中一张图片填充到手机中作为屏幕背景,其余图片分散在手机周围,然后将整个视觉主体放在布局中心,文本按主次排列在两侧,一般效果如下:

当你盯着画面,想加点什么的时候,导演不知道什么时候出现在你身后。他毫无表情地盯着你的电脑,慢慢地吐出几个字:「太乱了,好LOW」,然后就消失了。你很聪明,立刻明白导演想让自己更整洁有序。
在目前的布局中,虽然个别元素之间存在对齐关系,但缺乏整体对齐,图片采用自由排版,因此会显得混乱。所以你试着对齐图片,文本以图片为基准。

△ 左边的文字部分与右边的图片部分保持上下对齐,标题与内文对齐,icon 与文字左对齐。

上图很「完美」实施对齐原则,整个布局干净整洁,视觉过程更简单。这总是可以的,但事情并不像你想象的那么简单。因为导演不知道什么时候会再次出现在你身后,他平着嘴说:「太死板了,有点变化好不好?」
变化?你必须恢复以前的状态吗?当然不是。事实上,你必须在现有的基础上做出一些改变。这就是排版的难点和精致之处。它不仅应该对齐,而且不应该机械地对齐;它应该是整洁、有序和灵活的。如何做到这一点?我的理解是:在对齐中创造一点变化,在变化中找到对齐关系。例如,以下作品:


现在你知道,上述方案是僵化的,主要是因为文本部分和图片部分太整洁,所以你需要改变其中一个部分。该布局的视觉主体是图片,因此更适合调整图片。因为文本是水平排列的,图片部分可以倾斜并形成一定的对比吗?这不仅可以创造变化,而且可以增强布局的空间感。

△ LOGO除了倾斜图片外,还与内文错开移动到左上角,底部的直线也可以延伸到布局之外。
现在让我们回顾一下这部作品是否符合我之前说的,「在对齐中创造一点变化,在变化中找到对齐关系」这一要素。

从上图可以看出,虽然图片是倾斜的,但它是在对齐的基础上变形和扭曲的。虽然布局中的所有元素都不对齐一条直线,但没有一个元素是孤立的。每个元素都与布局中的其他元素对齐。更重要的是,左侧文本部分的视觉重心也与右侧图像部分的视觉重心水平对齐,因此整个图像可以平衡。
虽然设计的组成部分只是文本、图片、颜色,但每个元素都有无数的表达形式,不同的字体、大小、颜色价值、纹理、风格、图片、方向等。如果一个布局中有太多不同的东西,它就会显得非常混乱和无聊,所以你需要以某种方式把它们放在一边「不同」统一,达到舒适协调的效果。


以一个运动品牌的轮播图设计为例,文案如下:

以运动员为主体的这种设计最容易产生效果,所以我们需要找到一张正在奔跑的人物图片。

△ 这个人的姿势很好,只有他。
体育品牌最重要的是设计动感和时尚感,所以我把背景分成两个倾斜的色块,一个红色和一个蓝色,然后把角色放在图片的中央,文本分布在左右两侧,以创造强烈的视觉影响。

因为有一个动态的模型和背景,所以整体看起来更符合运动海报的色调,但视觉有点混乱,因为有很多细节不统一,如角色倾斜角度和背景色块,标题倾斜角度不同,主要字体风格不同(NIKE和JUST DO IT字体比较硬朗,准备出发的字体比较软),元素的风格不统一(对圆角的了解更多,按钮与整体风格不匹配),各种元素的颜色缺乏联系等。
我该怎么办?这里需要统一的原则。我们可以尝试统一上述所有不统一的地方,如下图所示:

△ 调整后的方案2,字体是简单有力的黑色字体,左右字体水平对齐,背景颜色改为单一渐变颜色,角色和文本的倾斜角度也统一,「了解更多」按钮也改为平行四边形色块,颜色减少到三种。
调整后,确实没有混乱,但也有新的问题,因为元素太统一,导致图片缺乏层次和比较,突出的信息也不突出。此时,需要使用另一个与统一对立的原则——比较。
比较是将明显差异、矛盾和对立的双方安排在一起进行比较的一种表达方式,旨在使设计更加层次化,增加视觉冲击力。设计中常见的比较包括尺寸比较、字体比较、颜色比较、空间比较、方向比较、长度比较、厚度比较、直线比较、轮廓比较、虚拟和真实比较等。


要处理好统一与对比的关系,必须记住两个要点:
各元素的调性要统一,元素的呈现要对比。确保图片中的对比关系不会破坏整体协调性。按照这个想法,让我们在上图中添加一些比较关系。例如,方案2的标题倾斜角度太大,不美观,所以我只是把它的倾斜方向改为垂直倾斜,这不仅保留了动态性,而且增强了对比度,更美观。在文本名称上,我选择突出品牌名称,缩小广告语言,加强尺寸对比,恢复以前将背景分成两部分的做法,只是增加了一点空间感,统一了角色服装的颜色和背景颜色。调整后的效果如下:

我们可以观察到,方案3确实比方案1更协调,比方案2更有层次感和视觉冲击力,整体色调仍然年轻、时尚、动态。这里采用了统一和比较的原则。
简约应该是大家听得最多的设计原则。简约极简主义的设计也很受欢迎,但我们也很困扰,因为我们所做的所谓极简主义设计往往被称为过于单调和丰富;那些自我感觉丰富的设计会被称为混乱。为什么?让我们首先正确理解简单和丰富。
简单并不意味着设计应该使用最少的元素,而不是任何修改,而是设计的主要目的应该简单,视觉过程应该清晰,视觉应该集中,主次应该清晰。


△ 虽然上图的设计有很多元素和颜色,但整体感觉还是很简单的。
丰富并不意味着画面中必须有很多元素或叠加一堆效果,而是指细节、层次和质感。


△ 虽然上图的设计总体上看起来很简单,但并不单调。
为了便于理解,让我们举个例子:农产品手册的封面设计。封面的必要元素非常简单,只有一个 Logo 还有一个文案,所以我们很容易想到做一个极简主义的设计。白色背景和一个 Logo 和一行文字,再加上一张特殊的纸,做一些工艺,就能显得很高,很多大品牌也是这么做的。

这也是一个可以接受的解决方案,但表达方法真的太简单了,既不能反映设计师的设计技能,也不能反映农业品牌的基调和特点,缺乏吸引力,所以我们需要做加法,让它变得更丰富。
如何丰富?最直接的方法是引入图片和色块。因为类别是农产品,文案侧重于健康和安全,我们可以找到绿色和生态的图片。

为了与狭长的布局保持统一,我还将图片切割成垂直版本的矩形,并结合相同大小的绿色块,形成布局的主要视觉。标志放置在图片的左侧,如下图所示:

这样做仍然有一些设计感,但也增加了类别属性,但缺乏细节,不耐用,所以你仍然需要添加一些东西。当然,新的元素只能作为辅助,不能太引人注目。在图片方面,我很快就想到了叶脉。叶脉也可以与图片中的叶元素相关,适合做底纹,所以我找到了另一张叶脉的图片。

将叶脉图片放在图层底部作为背景处理。这里有三种情况。首先,如果叶脉图完全铺设,整个布局不会留下空白,因此会显得压抑;第二,显示整个叶子,但这样处理会显得非常吝啬。因此,我只用叶脉图覆盖了大约一半的布局,这与图片部分相呼应。这种效果看起来更舒适。

图片部分已经改进,但现在图片中仍然缺乏一点装饰元素,添加一点文案是一个好主意,所以我添加了文案和品牌名称的英文。

加法后,整个画面变得丰富多了,层次也打开了,给人的感觉还是比较简单的,既不凌乱也不压抑,因为每个元素主次分明,既有联系,又没有干扰。但是做加法的时候也要把握程度。比如下图有点堆得太多,看起来很复杂,不精致。

要处理简单而丰富的关系,需要注意两点:
要保证主体单一、精致;要保证简单的装饰元素与主体形成互补。规范和突破是布局设计中存在的矛盾原则。规范是指布局中的元素应按照一定的规则或在特定的范围内设计,以使图片更加有序,更像一个整体。


△ 上图中的主要元素规范在一个矩形中,然后每个小矩形组合成一个大矩形,看起来非常整体和设计。
与规范相反的是打破,这意味着打破规范、束缚和平静,使画面看起来更加灵活、动态和视觉冲击。


△ 用色块或图片创造束缚感,然后将部分元素冲出色块,是规范和打破的经典组合。
可以说,经过严格的规范,有很多优秀的设计变得非常漂亮,但有些设计选择打破规范,但也取得了非常惊人的效果。那么,什么时候应该严格遵守规范呢?我们什么时候应该打破规范?事实上,在一个完整的设计中,最好有两者,平衡两者的关键是:先打破规范,即在良好规范的基础上选择一些局部打破。
葱叶仍然用相册的封面设计来解释这个案例。这是一本介绍中国移动云服务平台方案的小册子,副本如下:

显然,封面的视觉色调应该有科技感,能够反映互联网、信息、大数据等关键词,所以我找到了一张看起来很科技的图片。

这种相册的布局通常应该简单规则,所以我决定使用网格系统来辅助排版。除了标志外,所有元素都以图片为封面的主要视觉排列在矩形图片中,所有文本根据网格设置保持左对齐。所有元素的高度和宽度以及所有元素之间的间距都严格按照网格排版。

△ 标准布局整体上看起来非常严谨。
然而,这也导致了布局变化不足、规则过多等问题,因此我们可以在此基础上尝试做一些事情「打破」。
比如原本的 LOGO 离图片太近,看起来很压抑,这里不需要完全按照网格排版,我们可以根据自己的感受 LOGO 与图片更加分离;中文标题、短期标题和英文标题太拥挤,可以移动一点;文本部分不一定在图片范围内,所以我在英文标题中添加了一个蓝色块,并将色块移出图片区域;并将下面的公司名称排列在图片下面。调整后的效果如下:

△ 调整后的方案,构图也发生了相应的变化,以前是上下构图,现在变成了对角构图。

在标准的基础上打破后,我们可以看到布局的清洁度仍然存在,整体色调仍然简洁严肃,但比调整前更灵活、更有设计感。
设计不是一个简单的加减法,也不是只要对齐,统一这些非常简单,方向非常明确的原则,因为没有原则可以让我们直接到设计的终点,但我们的目标是明确的,是做有效的设计,所有的设计原则,设计手段为目标服务。
欢迎关注作者的微信公众号:「葱爷」
