新媒体视觉系列(3):对比

发表于 讨论求助 2021-07-18 14:06:32



在之前的文章《新媒体运营必需知道的 4 个设计原则》中,琛姐谈到过 4 个设计的基本原则——亲密性、对齐、重复、对比


本文是对「对比」原则的修正和补充。


对比的目的主要有 2 个,一个是打破统一的版面设计,增强视觉效果。比如,差不多的两个拳头放在一起时,画面很平淡,因为只存在方向的对比:



但如果是一个老人的拳头和一个小孩的拳头出现在同一画面,视觉效果就会强烈很多,因为同时存在方向、大小、糙嫩3种类型的对比:

 


对比的另一个目的是组织信息逻辑。完全统一的版面无法有效阅读,只有通过对比,读者才能对信息逻辑一目了然,对比越强烈,信息逻辑就越清晰。

 

比如,一篇文章一般由标题、小标题、正文组成,如果标题和正文间的对比不够强烈,就很难一眼看出文章的逻辑,比如下面左图中,只有文字大小的对比,小标题就不够显眼,辨识较困难,如果加强对比,增加粗细和颜色的对比,改成右图的样式,对比就非常鲜明了,信息逻辑也就一目了然。

 

图片来源:《写给大家看的设计书》

 

对比的方式主要有:方向对比、形状对比、色彩对比、字体对比和图文对比。

 


1.方向的对比


排版布局时,可以采用不同的方向进行对比,比如下图中纵向文字和横向文字就形成了鲜明的对比:

 


这种方向的对比不只存在于文字和文字之间,也可以运用于图像和文字间,比如下图的海报中,图像主体中的地平线是水平的,横向的,文字部分是垂直的,纵向的,方向的对比也非常鲜明。

 


公众号 HomeFacialPro 的排版中也采用了这种方向的对比,标题部分采用纵向布局,正文部分横向排列,整体视觉效果非常灵动。

 


公众号Voicer中的部分插图也使用了横向和纵向文字的对比,并增加了动态效果,进一步强化了对比。

 



2.形状的对比

 

1)大VS小


同时放置2张或2张以上的图片时,常规的方式是将2张图设置成同样的尺寸和比例:

 


但这样很容易显得单调、乏味,更好的办法是加入尺寸的对比,比如,将上图中的其中一个对象缩小,在尺寸上和另外一个对象形成对比,改成下图这样,整体效果会更生动、活泼:

 


2)几何VS有机

 

大部分形状可以分为几何形状和有机形状 2 大类。

 

几何形状主要包括正方形、矩形、三角形、圆形等规则形状(如下图左),有机形状主要是指受自然启发的不规则形状(如下图右)。

 


规则的几何形状可以和不规则的有机形状形成很好的对比。比如,下面的这张海报就是由规则的外矩形框和不规则的内边框组成,对比效果非常好。

 



3.色彩的对比

 

色彩的对比方案非常丰富,最为典型的有暖色和冷色的对比、亮色和暗色的对比、互补色对比等等,琛姐在之前的文章《新媒体运营必须知道的色彩搭配常识》中详细讲解过色彩相关概念,不清楚的童鞋可以点进去看看,这里不再赘述。

 

一般来说,色轮的右上方是暖色,左下方为冷色。暖色给人的印象:生动、激情、有表现力,给人感觉在空间的位置靠前。适用于前景色。冷色给人的印象:谨慎、冷静、平静感,给人感觉在空间的位置靠后。适用于背景色。

 


所以,当我们把这两种颜色放在一起时,对比非常强烈,而且一般把冷色作为背景,暖色作为前景。比如,下面这张海报,就是采用冷暖色的对比,冷色(蓝色)作背景,暖色(红色)作前景。

 


明暗的对比非常常见,比如,下面的这张图片,就是用暗色作背景,高亮的HOTEL标志作前景,对比非常鲜明,主题很突出。

 


互补色是色轮上相对的2种颜色,互补色对比是色彩对比中最鲜明的组合之一,比如红色和绿色。

 


这种对比非常鲜明,画面冲突感很强,故有“红配绿,唱大戏”之说。因为这种搭配的不稳定性,在正式的设计中比较少见。如果想特别引人注目,可以尝试采用。比如,电影《三枪拍案惊奇》就大量采用了互补色的对比,整体视觉效果非常夸张。

 



4.字体的对比

 

字体可以分为衬线体和非衬线体 2 大类,衬线体的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同(如下图左)。无衬线字体,没有这些额外的装饰,而且笔画的粗细差不多(如下图右)。



根据经验,最好选择一种衬线字体和一种非衬线字体来设置对比,因为通常来说,互补的两种元素会产生很好的对比效果。下图logo中非衬线体和衬线体,以及书写体的对比完美平衡了整个设计。

 



5.图文的对比

 

在前面的平衡中我们已经说过,图片和文字的视觉重量是不一致的,一般情况下,遵循图重文轻的原则,所以,将图片和文字放在一起时,可以有效突出图片,将图片作为有效的视觉线索。比如,下图中的箭头符号,在一大片文字中显得非常突出,成为了有效的视觉线索。

 



小结


对比的目的主要有 2 个,一个是打破统一的版面设计,增强视觉效果。另一个目的是组织信息逻辑。对比的方式主要有:方向对比、形状对比、色彩对比、字体对比和图文对比。

发表
26906人 签到看排名