10个对比设计技巧:来自设计师的分享

20个对比设计技巧:来自设计师的分享(附案例分析)_meitu_4

对比不仅仅是指黑与白或大与小这样的对立。

事实上,对比是每一项设计都应该体现的重要原则。为什么这么说呢?因为对比有助于组织设计元素,构建设计层次,也就是让设计中的最重要的部分凸显出来。并提示读者去关注这些部分。善用对比除了能强调焦点外,还可以增加视觉趣味。如果一项设计中的所有元素都是相同的尺寸、相同的形状或颜色,那么看上去就会非常枯燥,但增强对比度就会使设计全然不同。然而,和大多数设计概念一样,在运用对比时要注意掌握平衡;对比度过大会导致混乱或不和谐的视觉效果。如果所有的设计元素都形成对比,反而无法突出重点,跟毫无对比时的效果是一样的。那如何才能恰当地运用对比来提升设计品质?遗憾的是,并没有可供套用的万能公式。因为这个过程往往是在你打磨设计技巧时不知不觉发生的。也许你会觉得这听起来像是设计师不外传的独门绝技,但先别急着放弃。对比其实是每个人都可以使用的一种设计工具,它可以为你的设计项目组织和增添视觉趣味。如何在设计中加入对比:

01.亮暗色彩对比

1

色值指颜色的亮暗程度,纯黑和纯白是极限值。但是你不一定要用黑白两色来形成强烈的对比。将一个色彩调亮一个调暗是增加对比,突出设计中某些部分的最简单的方法之一。这张照片上的文本很小,本来应该难以阅读,但是设计师将文本调成了亮白色,将背景调成了暗淡的蓝紫色,色值的对比凸显了文本,使其易于辨认。

2

02.色调对比

3

色调是艺术家称呼某种特定颜色的术语,也就是色轮上的12种颜色之一。色彩理论同样可以运用于平面设计和网页设计。数百年来,画家一直用色轮中的经典配色创作对比度高的作品,我们可以借鉴这一方法来进行设计。一些配色方案包括:

  • 互补色:色环上相对的两种颜色,比如红和绿,蓝和橘。互补色对比强烈,饱和度高。这个徽章运用了简单的对比色,将设计分为了几个有序的部分,既醒目又实用。
4
  • 分散的互补色:由色环上任意一种基本色与该基本色的互补色相邻的两种颜色构成。这种搭配具有强烈的视觉对比,但没有用互补色那么夸张的效果。
  • 三色系:由任何在色环上等间距的三种颜色构成的色系。

记住在实际运用中不一定要用高饱和度的纯色。因为你可以从上面的色环图看出,有些颜色搭配起来并不协调。选择一些更亮,更暗或更柔和的颜色对现实生活中的设计可能更加实用,而且依然可以使设计有不错的对比度。

03.色温对比

5

颜色可以根据色温分为几个类型:暖色、冷色和中性色。红、橘、黄属于暖色;蓝、绿为冷色;黑、白、灰为中性色(在某些情况下米色和棕色也会被归类为中性色)。在设计中使用不同色温的颜色,尤其是冷色和暖色搭配,会产生强烈的对比。例如,这个网页设计运用了浅蓝色和亮黄色两种不同色温的颜色形成对比。这能够唤起消费者的购买欲,同时也有效地凸显了主画面。另外,由于两种颜色都略微带点绿,偏向冷色调,所以整个设计虽然对比强烈但依然非常协调。

6

04.色彩强度对比

7

色彩强度也称色彩饱和度。一种颜色最纯最亮的状态就叫100%饱和,越接近灰色就越不饱和。亮色和暗色不管是单独还是搭配使用都能有效地在设计中形成高低对比。亮色总是能吸引人的注意,尤其是运用在黑色背景上时。你可以在设计中使用少许这样的颜色搭配来强调重要的部分。这个网页设计采用的正是这一方法。高度饱和的橙红色文本在暗淡的深绿色背景衬托下格外显眼。这不仅是因为使用了醒目的互补色,还因为加入了不同饱和度的颜色来增强对比效果。

8

05.形状对比:有机形状和几何形状

9

大部分形状都可以归为两类:几何形状(如长方形,三角形,圆形等)和有机形状(如液体形状的和源自自然物体的形状)。前者较为规整,后者往往弯曲且不对称,二者搭配使用可形成良好的对比。下面的标志设计融入了有机的抽象形状,它与整齐的排版互为补充,同时也构成了对比。

10

06.形状对比:棱和角

11

想在设计中巧妙地使用形状对比还有一种方法,那就是在字体、边框等其他设计元素的棱角上运用一点形状。圆润的形状通常给人更柔和、随意和友好的感觉,而尖锐的形状则给人更整齐干脆的印象。在进行设计时你可以将这些特质进行对比,下图的文字就是按其字面意思使用了不同的形状构成对比。

12

07.质感对比

13

和形状一样,不同特性的质感也可以形成对比,比如粗糙和光滑、坚硬和柔软、立体和平面等。任何质感都是非常直观的,除非你使用了特殊的印刷效果或其他物理手段。只要把各种设计软件的功能和网上找到的免费平面设计素材相结合,就可以创造出许多对比效果。下图中,磨砂质感为线条清晰的标志加入了一点复古的感觉。使用恰当的质感和做旧处理能为设计创造出磨损效果,使其看上去质朴或复古。

14

08.尺寸和层次对比

15

对比除了可以为设计添加视觉趣味外,还有助于联系不同的设计元素并创建层次。如果每个设计元素大小都接近,那么就无法形成层次感,观众就不知道应该先看什么,或者什么是最重要的部分。所以有效运用层次不仅具有实用性,还能简便地创造出动态且有趣的设计布局,为设计增添戏剧效果。这张封面上的巨幅照片强调了这期杂志的主题,但是它并没有压过其他设计元素的风采。实际上是字体的尺寸、形状和色彩的综合作用强化了照片这一焦点。

16

09.视觉重量对比

17

和层次对比一样,视觉重量也是强调设计元素重要性的一种方法。视觉重量指让一种元素在设计中突出的设计手法。换句话说就是具有高对比度。设计中视觉重量最多的元素(通常为设计的焦点)不一定是页面上最大的元素。你可以通过运用颜色、质感、形状等特性来区分某个元素,使其更“有分量”,或更显眼。我们来看看下面这个案例。这是美国辛辛那提市为宣传当地的文化场所而发行的一系列明信片。显然各种建筑插图是每张明信片上最大的元素,但是“Enjoy More”的标语却更引人注目,因为在整个页面上它的颜色最深。

18

10.通过空白创造对比

19

很多人在设计的时候都希望尽可能的用信息将页面填满,但其实空白可以起到区分和整理设计元素的作用,对设计平衡的布局非常重要。在设计一个复杂的布局时,在重要的元素周围留出一些空白区域(当然不一定要是白色的),这样可以将观众的注意力吸引过来,并使这些元素与其他部分产生有效的对比。这个网页版面设计采用了空白和细分界线来有效地组织信息。页面左右两栏的周围都有大片空白,产品图片四周的空白范围则更大,这使其成为吸引消费者注意力的中心。

20

现在你已经掌握一些了增加设计对比度的有效方法,是时候把它们运用到实践中了。和往常一样,希望你在设计中收获快乐!