30-运用对比打造层次和变化

一、文字组中的对比

1.字形对比

比如汉字的黑体和宋体搭配，宋体和书法体搭配，黑体和卡通体搭配等；

不同字形的中文和英文在同一个文字组中使用也属于字形对比。在同一个文字组合版面中，切忌使用同一个字形的不同字体，比如两个差别不是很大的黑体，因为这样对比不是很清晰，给人一种模棱两可的感觉。

使用同一个字体的情况，给人感觉很统一，很一致，但是缺少变化

加入宋体和粗衬线体增强对比，通过距离和大小的把握，并不会给人冲突感。整个文字看上去是一个整体，而整体中又存在了变化。这就是字形对比带来的效果。

2.字号对比

通过变换字号来实现整体的秩序感。文字有层级关系，而表示这种层级关系最好的办法就是字号对比。

使用线框或色块合理调整字号，也可以让它变得好看。

字号对比可以迅速拉开层级关系，但是要注意对比的程度不能太大。

3.字距对比

这个文字组看起来下方的文字有些长，上半部分显得有些密集。

通过调整字距让文字组在长短上有对比，又可以让文字显得透气一些。

4.字重对比

文字组整体字重偏轻，也就是整体的笔画比较细，

第三个真正实现了字重对比，但是很难，做的不好版面容易出现过多对比而显得凌乱。比较保险的是前两个，只靠字号实现对比。

二、笔画对比

通过不同字体笔画之间的结合形成对比

1.宋体&黑体

将宋体和黑体的笔画结合进行交叉替换

出现了一种新的感觉，延伸出的字形存在笔画对比

2.宋体&书法

将部分文字的笔画替换成书法效果，就可以为版面增加一些变化

[图片上传失败...(image-ee7616-1584630573408)]

笔画对比的设计手法可以打破字库字体给人平庸的印象，在作为主体形象时更加具有视觉吸引力，而且操作难度也不是很大，不像字体设计那样需要扎实的基本功。所以当你觉得版面有些单调但又不想添加过多元素的时候可以考虑使用此方法。

但是这个方法对设计主题和风格都有一定的要求，并不能在每个设计中都用到。

三、大小对比

通过三张图片大小的对比，使版面更有冲击力

四、粗细对比

在画面左侧将文字信息排版好。

在右侧添加一个具有粗细对比的图像，这里我们没有选择图片，而是选择了一张线稿插画，最后为其添加背景色，使主体插画跟背景颜色有一个联系，而不是彼此孤立的存在。

五、长短对比

书籍封面设计

将主标题排列在版面上方。

将其他信息做成标签式形式，使用白色块来保证文字的识别。

将中英文的书名竖排在版面中。

因为书名跟雨有关，所以我们可以添加相关的图形元素。这里添加了浅灰色的云朵，然后在上方添加不同的线代表雨。颜色使用较亮的颜色，与整体的无彩色形成对比，使版式更加丰富。

还可以将笔画处理成空心的形式丰富版面。

最后加入书封。

六、曲直对比

选择图片作为主视觉。

在图片下方加入山的插画图形。

然后将书籍名称和作者放进去。现在版面中都是横向和竖向的线，而且都是线的形态，为了增加对比，右上角可以添加曲线文字。

这样版面中就存在了曲直对比。

七、轻重对比

这里我们设计一张海报，首先选择两张图片，因为我们预想是要做轻重对比的，但是这两个图片明显不平衡，左边重很多。

将图片上下排列，比较重的图放在上面，轻一点的放在下面，下面的图有一定的留白空间，所以可以用来添加文字。

现在这个版面看上去像是被分割成了两个画面，为了使其有一定的联系，可以将文字组向上移动，这样就起到了串联的作用。

但是这样识别度又有一定问题，所以继续调整。

添加黑色块增加文字识别度，同时凸显了板块中的轻重对比，黑色块形成了最重的元素，其次是上图，最次是下图，这样也符合了这个版面的阅读顺序。

设计更多的是一种心理感受，一个优秀的版面往往是对比和平衡共存的，比如这个版面，虽然具有明显的轻重对比，但是通过对元素的把控，对元素位置和大小的调整，使得这个版面在视觉上相对平衡。

拿炒菜举例，一道美味通常需要放很多佐料，不能因为一个人爱吃咸，就不放甜和辣，而是在整体咸口的基础上，适当添加一些其他的味道。设计在这点上也是同样的道理。

八、方向对比

将主标题放到版面中，横跨版面向下复制，底部留一些空间编排其他文字。这样整体画面框架就出来了。

为了丰富版面，我们选择了一个图形元素，变换不同的角度，角度和方向一定是有规律的，随意这个版面在目前为止有一定的方向对比。

然后刻画图形，增加一些光影。但是这样它又遮挡了下方的文字，而且图片和文字没有什么联系。

将图片调整成透明状，就既有真实感，又具有图文的联系。文字还有一些透视的感觉。
这里就使用了图形的方向对比。

九、差异对比

差异对比指的是在一个画面里边大部分元素是几乎一样的，而极个别的元素是不一样的。而这个不一样的元素就被凸显了出来。

复制元素填充版面。因为元素相近，所以画面中没有视觉焦点。

我们为人物下方的O填充一个红色，那么有彩色的O在整体白色的文字中就被凸显了出来，进而形成了一种差异对比。

十、疏密对比

找到一张和主题相关的背景作为主视觉

将内容信息两端对齐进行编排，这样就会有大小对比。

然后我们画出网格，横向划分5栏。

然后将文字压扁，占据一个横向网格的位置，这样就不会影响背景图片了。而整张海报呈现一种简洁的风格，文字组的排列紧凑，而图片又很简单不复杂，从而让版面形成了疏密对比。

十一、虚实对比

创建海报版面，先编排文字信息

添加图片背景，虽然图片不错，但是和文字的对比关系不是很强。

对图片进行模糊处理，这样可以突显文字，增加虚实对比。同时增加饱和度，增加噪点。但是整体还是有些太顺，缺少变化。

将标题打散，但是又有些抢眼。

将文字再模糊处理。

将竖向文字加在人脸的位置，既填补了画面的空白，又给版面增添了方向的对比。

十二、动静对比

动静对比有很多种，比较常见的是将文字或图片进行角度的倾斜，这样在视觉上可以产生一种动视。也可以通过添加简单的小元素丰富画面，让画面更加灵动。也可以通过点线面的处理，比如用线体现动感。

健身的网页首屏，选择一张具有动感的图片

调整位置，在左侧放置文字。

使用红色的线条作为文字的强调。

将其他的信息编排进来， 播放按钮可以使用红色，与左边的按钮形成一个简单的呼应。这里具有动态的拳头和静态的文字，二者之间就形成了很好的动静对比。

十三、色彩对比

用对比配色直接将版面一分为二，颜色暂且填充灰色。

选择小狗的图片作为版面的主体。

对版面进行分栏。

根据网格放置文字内容。

提取关键信息放大处理，放置到图片下方，降低透明度。

然后将其它文字放置到版面中。这样在上方文字和下方文字之间形成了层次感和进深感。

选择对比强的黄和紫进行配色，同时将文字反白。

每一种配色都很好看