20个超实用的对比设计技巧,让您的设计脱颖而出

在设计中,对比的运用绝对不只是黑与白、大与小这么简单。事实上,对比的运用是设计中很重要的一个环节,因为对比可以帮助你的设计建立出层次,告诉读者哪一个是比较重要的部分。适当的运用对比可以让整体设计的视觉效果更加有趣。想像一下,如果你的设计都是相同的大小、形状与颜色,是不是令人感到相当无趣。

然而,对比的运用要掌握好整体的平衡性,一旦使用过多,会不知道到底想要强调画面中的哪部分,会让读者产生困惑,甚至比不用效果还要糟糕。如果所有的元素都使用对比,就看不出重点在哪里。

所以到底对比运用的秘诀到底是什么?很遗憾,对比的运用并没有一定的公式。有效的对比运用通常来自设计师自身的潜意识和创意,看到这里你可能开始觉得这就像设计师的独门秘方,很难摸透,先别急着放弃,让平面设计师 Janie Kliever 教你掌握这以下 20 个诀窍,就能让对比为你的设计加分。

如何在你的设计中运用对比

1. 明暗色的对比

设计中的对比运用20个超实用案例02

明度是指以纯白和纯黑为两个极端,颜色亮暗的程度。你不必用全黑白的配色来创造高对比的设计,尝试比较亮或比较暗的颜色,是凸显设计中某些部分的好方法之一。

设计中的对比运用20个超实用案例03
例子:明暗色对比

这是个简单的例子,深色的字配浅色背景,反之亦然,就像这个设计一样。照片上的小字常常难以阅读,这里用白色的字搭配蓝紫色的深色阴影,突显出文字。

2. 色调的对比

设计中的对比运用20个超实用案例04

色调是用来形容特定颜色的艺术名词,传统上是指色轮中的 12 个颜色,但色彩理论对图像和网页设计师来说也是很好用的,我们可以从画家用了好几世纪的色轮抽出几种经典的配色,创造出高对比度的组合,包括:互补色,补色分割,三等分

设计中的对比运用20个超实用案例05
例子:互补色

互补色:色轮中在正对面的颜色,比如说红色和绿色、蓝色和橘色,互补色是高对比和高饱和的。上图使用了简单,互补的色彩主题,同时满足了视觉震撼及实用性,把不同的部分区隔开来。

补色分割:色轮上的任一色加上其对比色两侧的颜色。这个配色是绝对比还是很强,但没互补色这么戏剧化。

三等分:均分色轮的任三色。

记住你不必用像色轮表一样最纯最亮的色调,它们有时候会互相冲突。调亮、调暗或调淡在实务上比较实用,而且还是能发挥对比的效果。

3. 色温的对比

设计中的对比运用20个超实用案例06

所有的颜色可以依色温分成三类:暖色、冷色、中性色。红、橘、黄归类为暖色,蓝和绿则是冷色,黑、白、灰就是中性的。有时候驼色和棕色也算中性,视使用情境而定。混合使用不同色温能制造戏剧效果。

4. 饱和度的对比

设计中的对比运用20个超实用案例07

饱和度就是色彩的浓度,最纯最亮的颜色就是饱和度 100%,愈接近灰色,饱和度就愈低。使用亮或淡色可以作为设计中的对比策略。亮色总能吸引注意,搭配黑色效果更好,适量使用可以凸显出设计中重要的部分。

设计中的对比运用20个超实用案例08
例子:饱和度的对比

上图中这个网页设计将高饱和,橘红色的字放在淡的绿色森林前面。这不只是配色对比,还运用了饱和度对比来加强戏剧性。

5. 形状的对比:几何图形和有机形状

设计中的对比运用20个超实用案例09

大部分的形状可以大致分为几何(矩形、三角形、圆形等等)或有机(流线型、大自然会出现的形状)。有棱有角的规律几何形状,能和有机形状弯曲、不对称的特质达成很好的对称。

设计中的对比运用20个超实用案例10
例子:形状的对比

上图中的LOGO融合了有机到几乎抽象的形状和笔直、干净的字型线条,形成很好的对比。

6. 形状的对比:直角和圆角

设计中的对比运用20个超实用案例11

另一个利用形状对比的方式就是直角和圆角,不论是字型、边框线、按钮或其他功能,都能产生微妙的对比。圆角通常给人柔软、随性或友善的感受,而直角则看起来规律、僵硬。

设计中的对比运用20个超实用案例12
例子:直角和圆角

如上图中的设计,两种文字直角和圆角的对比十分强烈。

7. 材质的对比

设计中的对比运用20个超实用案例13

就像形状一样,不同的材质特性也很适合用来对比:粗糙和平滑、硬和软、凸出和扁平。印刷技术中也有很多类型的技巧用来形成对比,如局部UV和烫金等。在本文中指的是视觉上的材质,在如今,设计软件和网上的免费素材中材质的选择相当多。

设计中的对比运用20个超实用案例14
例子:材质的对比

上图中粗糙坚韧的质感,给线条干净的LOGO带来了复古感,这种材质能制造出复古、陈旧的风格。

8. 大小的对比

设计中的对比运用20个超实用案例15

大小的对比除了能增添视觉上的趣味以外,还能表达不同元素间的先后顺序。如果画面中每样东西大小都一样,观者就无法辨识哪样比较重要。加入大小对比不只实用,还能创造动态且有趣的戏剧效果。

设计中的对比运用20个超实用案例16
例子:大小的对比

上图中的这张杂志封面用一张大照片来强调主题,但它并没有吃掉其他的设计元素,字体的尺寸、形状和颜色都能妥善聚焦。

9. 视觉比重的对比

设计中的对比运用20个超实用案例17

就像大小的对比一样,视觉比重也是强调重点的好方法,视觉比重大致上就是让其中一项元素特别突出,也就是对比度很高的意思。视觉比重大的元素不一定就特别大,你也可以用其他元素,像是颜色、形状、材质等让它更引人注意。

设计中的对比运用20个超实用案例18
例子:视觉比重的对比

上图中这一系列宣传文化场馆的明信片,虽然每张设计中的建筑物都是占用空间最大的元素,但「Enjoy More.」的标语因为颜色最深,所以也能抓住你的目光。

10. 空间与留白的对比

设计中的对比运用20个超实用案例19

在设计当中塞满资讯看起来很诱人,但是适度的留白能让它更有组织,让版面更平衡。如果画面比较复杂,在重要的物件周围留点空间,可以让它更突出,吸引更多注意。

设计中的对比运用20个超实用案例20
例子:空间与留白的对比

上面这张网页概念图,利用了留白和分隔线来整理资讯,左右两栏都留了相当充足的空间,产品图片甚至留了最多空间,让它成了视觉焦点。

11. 构图的对比

设计中的对比运用20个超实用案例21

每个设计都在平衡和张力之间摇摆,要让你的设计平衡却不无聊,活泼却不混乱,方法之一就是选择合理的构图方式,并在过程中加入一些对比。要知道从何开始,可以先试着学一点艺术家和摄影师常用的传统构图技巧:三分法则和对角线构图

设计中的对比运用20个超实用案例22
例子:构图的对比,三分法则

三分法则:把你的画面从垂直和水平各切成三等份,然后把重点放在四个交点之一,这是创造动感的方法。最无聊的设计就是把所有重要的东西都放在正中央。在上面的网页设计主图中,玫瑰和标题两样物件的中间点大约就位于三分法则的上面两个交叉点,组成了平衡且相互配合的构图。这张图还包含了常见的三个一组构图技巧。

对角线构图:对角线或 S 形构图可以帮你的设计增加一点动感,并导引观者的视线,对角线构图看起来比传统上,以水平和垂直线条为主的格状设计更有趣。

12. 意料之外的对比

设计中的对比运用20个超实用案例23

上图中的设计技巧在有些时候会很有效,因为打的是一个出其不意,它不是刻板的可预料的,这些意料之外的元素能为设计带来对比,比如说在低调的设计中加入亮色,打破一致和不变,激发观者的兴趣。

设计中的对比运用20个超实用案例24
例子:意料之外的对比

上图中的文字以不寻常的方式搭配照片,给简单直接的设计添上了一点潇洒。

13. 重复图案的对比

设计中的对比运用20个超实用案例25

策略性地使用重复的设计元素图案,可以像前述的构图技巧一样,创造焦点或引起兴趣,或者重复使用一项视觉主题,也能带来更大的视觉冲击。

设计中的对比运用20个超实用案例26
例子:重复图案的对比

像上图这张平面设计师的名片,它使用了重复图案来达成平衡,并替重点文字加粗。这个图案也代表了这位设计师的个人标志,进一步呼应品牌主题。

14. 位置和方向的对比

设计中的对比运用20个超实用案例27

设计都需要符合某种结构,如:文字以特定方式对齐、各元素安排在版面的特定位子、留白也要精心布置。一致性是普通设计的关键,不过故意把一些物件有条件地混合,能做出一些有趣的对比。

设计中的对比运用20个超实用案例28
例子:位置和方向的对比

上面这个LOGO使用了往一边倾斜的字体,和周围笔直而方正的文字形成对比,另外,手写和无衬线字型也形成了对比。

15. 距离和分隔的对比

设计中的对比运用20个超实用案例39

将相关的把内容进行分类,能够表达他们之间有所关联,并把你的设计整理得更容易懂,同理,分隔线等物件可以把设计分成几个特定区域。也可以搭配数量的对比,在一堆物件中的独立物件会特别突出,反之亦然。

设计中的对比运用20个超实用案例30
例子:距离和分割的对比

像简历这种充满文字的设计,好的结构是关键。将距离、对齐方式和颜色等互相配合,让塞满资讯的页面易于阅读。

16. 视觉线索的对比

设计中的对比运用20个超实用案例31

加州州立大学富勒顿分校研究显示,人类可以记住 80% 看过的东西,这也是设计如此重要的原因。设计是一种工具,但人们注意力持续时间很短,有时候观者需要一点提示来找到重点,这就是视觉线索发挥功用的时候。你可以直接用箭头或各种形状把重点圈起来,或者在文字框中加入底线或虚线。

设计中的对比运用20个超实用案例32
例子:视觉线索的对比,用文字+背景图片表达内容重点

或像上图的例子,用文字+背景图片表达内容重点。

17. 复杂和简单的对比

设计中的对比运用20个超实用案例33

可以在设计中将复杂和简单的风格相混合,这是另一个利用对比强调彼此的概念。

设计中的对比运用20个超实用案例34
例子:复杂和简单的对比

以上图中的贴纸为例,华丽的花朵图案配上中间简洁的字体,如此强烈的对比反而搭配得很好,也加强了戏剧张力。

18. 字型的对比

设计中的对比运用20个超实用案例35

字体是大多数设计中不可或缺的一部份,也提供增加对比的好机会,你可以将以上所提的对比应用到字体上,不过选择或创造自制字体的时候有些地方要特别考虑。

首先是字型的搭配,如果设计中运用超过一种字型,一定要让它们非常一眼就能分出来,让它们能负责不同任务,比如标题或内文使用不同的字型。如果字型不同却又太接近,会容易混淆或像是不小心弄错。

设计中的对比运用20个超实用案例36
例子:字型的对比

其中一种基本的方法就是选择一个衬线字型和一个无衬线字型,它们是很好的互补,同时也能产生对比效果。

19. 小心运用字体的对比

设计中的对比运用20个超实用案例37

混合使用字型的时候,对比很重要,但造成冲突就不好了。选择两种非常不同的字型很容易造成冲突,除非你是故意营造这种感觉,不然通常会看起来很怪。搭配字型通常得依赖直觉,没什么固定准则,所以就是多练习,培养你的直觉。

设计中的对比运用20个超实用案例38
例子:小心运用字体的对比

上图中的资讯图表混合多种字型达成一种好玩,像是电路的外观,和幽默的内文相衬。不过没有一种字型太突出,它们和设计搭配得很好。

20. 字型风格和粗细的对比

设计中的对比运用20个超实用案例39

很多字型有各种选择,像是细、粗、斜体、紧密、延展或较小的大写版本。这些选择能让你组织文字,运用不同的字体特色制造对比。可以试着使用不同的字体大小或颜色制造更多对比。

设计中的对比运用20个超实用案例40
例子:字体风格和粗细的对比

上图中这个设计使用了不同粗细的无衬线字型,营造了一种简练的感觉,少量出现的衬线字型也增添了一些对比。

总结

设计中的对比运用是一个很重要也值得去掌握的技巧,通过对比的运用,我们能很好地突出设计的重点,并使其更加美观。通过这篇文章,相信您已经了解了一些有用设计对比运用技巧,您也可以开始出发,设计和创造出更多的应用方法了,祝设计愉快!

如果您需要帮助,欢迎联系北美印刷专家