正文
![]()
阅前叨逼叨：这篇文章很长，因为这是一篇真正的干货。
看过或听过一大堆理论知识的你，有没有被很多自相矛盾的设计原则搞混过？比如你把做好的设计发给总监看，然后他告诉你太乱了，要统一，于是你苦苦调整了一番，当再发给他看时，他却说太平淡了，要有对比。你心想，总监特么是不是在玩我啊，一会要统一，一会要对比，这不是自相矛盾吗？是吗？当然不是，其实你自己心里明白，只是你不知道如何平衡这两者的关系。类似这种“矛盾”的设计原则还有好几对，接下来葱爷要把它们一一厘清，让这些理论知识能真正指导设计实践。
// 一、对齐与变化 //
对齐是版式设计最基础的原则之一，具体指版面中的字与字、字与图、图与图要对齐，常用的对齐方式有左对齐、右对齐、上对齐、下对齐、居中对齐、两端对齐等。
对齐的目的是为了使版面更整洁，更便于阅读，
比如下面这些作品都用到了大量的对齐关系。
![]()
![]()
我们来举个实例，假设你现在要设计一则手机banner图，目的是宣传某款手机的拍照功能，文案如下：
![]()
这种图不难做，你打算直接用一部手机和几张摄影作品作为画面的主视觉，于是去图片网站找了几张能体现该手机拍照功能好的图片：
![]()
图片找好后，你把其中一张图片填充到手机里作为屏幕背景，其余图片分散在手机周围，然后你把整个视觉主体放在了版面中央，文字则按主次排在了两侧，大致效果如下：
![]()
你盯着画面，正琢磨着还要加点什么的时候，总监不知何时出现在了你身后，他面无表情地盯着你的电脑，嘴里慢吞吞地吐出几个字：“太乱了，好LOW”，之后就消失了。你很聪明，立刻明白了总监是想要自己排得更整洁、更有序一点。在目前的版面中虽然个别元素之间有对齐关系，但是缺乏整体的对齐，且图片采用了自由式排版，所以会显得混乱。于是你尝试把图片对齐排列，文字则以图片为基准进行对齐。
![]()
▲左边的文字部分与右边的图片部分保持上下对齐，标题与内文为左右两端对齐，icon与文字则是左对齐。
![]()
上图很“完美”地执行了对齐原则，整个版面干净、整洁了许多，视觉流程也更简单了。这下总OK了吧，你心想，然而事情并没你想的简单。因为总监不知何时又出现在了你的身后，他瘪着嘴一脸嫌弃地说到：“太呆板了，有点变化好不好？”变化？难道又要调回改之前那种状态啊？当然不是，你其实是要在现有的基础上做一些变化。排版的难点和精妙之处就在这里，
既要对齐，又不能机械的对齐，既要整洁有序也要灵活有变化。
如何做到这一点呢？ 我的理解是：
要在对齐中制造一点变化，在变化中找到对齐关系。
比如下面这些作品：
![]()
![]()
现在你知道了，上面的方案之所以死板主要是因为文字部分与图片部分对得太整齐，所以需要改变其中一个版块，该版面的视觉主体是图片，所以调整图片更合适。由于文字是呈水平排列的，那么图片部分是不是可以倾斜摆放形成一定的反差呢？这样既可以制造变化还能加强版面的空间感。
![]()
▲除了把图片倾斜之外，LOGO也与内文错开移到了左上角，最下边的直线也可以延伸到了版面之外。
好，我们现在再回过头来看看这件作品是否符合前面我说的，“要在对齐中制造一点变化，在变化中找到对齐关系”这一要领。
![]()
从上图中可以看出，图片虽然做了倾斜，却是在对齐的基础上做的变形扭曲；版面中的元素虽然不是都对齐了某条直线，但是没有哪一个元素是孤立的，每一个元素都与版面中的其他元素有对齐关系；更重要的是，
左边文字版块的视觉重心与右边图片版块的视觉重心也是呈水平对齐的，所以整个画面才得以平衡。
二、统一与对比
虽然设计的构成要素只有文字、图片、色彩这三个，但是每一个要素都有无数种表现形式，不同的字体、字号、色值、质感、风格、图片、方向等等，
如果在一个版面内含有太多不同的东西，会显得很杂乱，从而让人心生厌烦，所以，需要通过某种方式把这些“不同”统一起来，已达到舒适、协调的效果。
![]()
![]()
以一则运动品牌的轮播图设计为例，文案如下：
![]()
这类设计以运动员作为主体最容易出效果，所以我们需要找一个正在奔跑的人物图片：
![]()
▲恩，这个人的姿势不错，就他了。
运动品牌最重要的是要设计出动感和时尚感，所以我把背景分割成一红一蓝两个倾斜的色块，然后把人物放在画面中央，文字分布在左右两边，以制造出强烈的视觉冲击。
![]()
由于有一个动感十足的模特和背景，所以整体看来还是比较符合运动海报的调性，但视觉上有点乱，因为有很多细节没有统一，比如人物倾斜的角度和背景色块、标题倾斜的角度不一样，主要文字的字体风格不一样（NIKE和JUST DO IT的字体比较硬朗，而蓄势待发的字体相对较柔），元素的风格也不统一（圆角的了解更多按钮与整体风格不搭），还有各元素的颜色也缺少联系等等。
那该怎么办呢？这里就需要用到统一的原则了，我们可以试着把上面提到的不统一的地方都统一起来，如下图：
![]()
▲调整后的方案二，字体都是简洁有力的黑体字，而且把左右两边的字体进行了水平对齐、背景色改为单一的渐变色、人物和文字的倾斜角度也统一了，“了解更多”的按钮也改成了平行四边形色块、颜色更是被缩减到了三种。
调整之后确实不乱了，但是也有了新的问题，因为各元素太过统一使得画面缺乏层次和对比，该突出的信息也没有得到突出。这时候就需要用到与统一对立的另一个原则：对比。
对比，是把具有明显差异、矛盾和对立的双方安排在一起，进行对照比较的表现手法，目的是为了使设计更有层次、增加视觉冲击力。
设计中常见的对比有大小对比、字体对比、色彩对比、空间对比、方向对比、长短对比、粗细对比、曲直对比、轮廓对比、虚实对比等等。
![]()
![]()
想要处理好统一于对比的关系，需要记住两个要领：
1.各元素的调性要统一、元素的呈现方式要有对比。2.要保证画面中的对比关系不会破坏整体的协调性。
顺着这样的思路，我们来给上图增加一些对比关系，例如方案二的标题倾斜角度太大，不美观，所以我干脆把它的倾斜方向改为垂直倾斜，既保留了动感也增强了对比，更加美观。在文字的字号上，我选择突出品牌名缩小广告语，加强了大小对比、并且还恢复了之前把背景一分为二的做法，只是增加了一点空间感，并把人物服装的颜色与背景色做了统一。调整后的效果如下：
![]()
