广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

设计中的对比设计手法,你了解多少?
发布日期:2025-01-21 09:45:19 浏览次数: 1026 来源:小渔印象

做设计的朋友可能经常听到这句话,叫做:无对比不设计。虽然很多人都知道对比在设计中的重要程度,但在工作中却还是会出现很多的问题。本期就以对比作为切入点,解决设计中经常会遇到的一些问题

作为设计师,我们在工作中时常会遇到这样的情况:作品缺少层次感、画面主次不分明、版式单调、呆板、太过常规化……这也是许多设计师在设计工作中的痛点。

首先,什么是对比?


通俗一点讲的话,对比就是一个元素与其他元素相互比较的设计手法,是通过营造元素之间的视觉差异化,从而制造出来的视觉冲突。

下面主要说一下在使用对比手法时常见的误区:


1. 对比不明朗:这也是很多新手设计师常会犯的失误,明明使用了对比,但差异化的体现总是似有若无,不够明显、不够直观。下面看个错误的案例:

2. 对比缺少目的性:特别是画面元素多的时候,这里也想强调那里也想强调,结果致使画面主次关系不突出、元素之间相互抢戏。


对比的重点在于:你想着重强调的元素是什么,就可以运用对比的手法让它跟其他元素之间形成视觉上明显的差异化。

你有没有认真思考过,在设计工作中,甲方常说的:放大、加重、加粗背后具体的意义是什么?


答案其实就是:对比!


对比手法是设计工作中不可或缺的重要手段之一,可以说只要是做设计,就离不开对比。那么该有人问了:对比在设计工作中有哪些作用呢?


一:对比是信息整理的重要手段,可以让观者快速分辨出哪些是主要信息,哪些是次要信息,迅速抓住重点,提高阅读效率。


二:提升画面整体的层次及跳跃感,改变作品呆板、单调的视觉感受。


三:可以使画面更加生动、有趣,强烈的对比能提升视觉冲击力。


四:更加吸引用户眼球,对比的手法还可以让作品更加出彩。

在设计中对比手法有很多种具体的表现形式,比如:色彩、大小、粗细、长短、明暗、质感、留白、形态、朝向、虚实、透视、图文、表情、文字、远近等等。

在设计中对比手法虽然有多种多样的表现形式,但在目的性和作用上,也是有很多的共通性的,下面我们就以对比目的展开,逐一讲解。

对比手法说起来最被人熟知的作用,就是突出主体,通俗点说就是通过对比的手法让用户知道哪个是主角、哪些是配角。


不管是通过大小、长短、粗细、色彩、形态等等各种不同的表现手法,都要保证能形成明显的视觉差异化,使元素之间互为参照物,看下面这个简单的例子:

显然红色的色块更吸引人的眼球,也更容易引起注意,因为它周围的黑色色块都是雷同的,没有明显的视觉冲突,相反,红色的色块跟周围其他元素不同,差异化非常明显,这就是通过色彩对比的手法突出了主体。


在这里不得不提到格式塔原理:我们人类会在无意识中,把相同的形状或形状、形态相似的物品看做一个整体。对比就是利用这个原理,人为制造视觉差异化,突出你想突出的视觉元素。


下面欣赏几个类似的设计案例:

以上案例就是通过色彩对比,使得主体得到了凸显,其他的视觉元素保持相对的统一,这就是对比最常见的作用。同样适用于其他表现形式:大小、粗细、长短、虚实……

只要恰当的使用对比手法,在设计中对于作品整体的层次感提升就会很有帮助,比如最常见的大小对比:

如上图所示,在层级关系上已经是有大有小、有主有次了,在设计中可以说这是最简单的层次感体现方式了。


即使使用最简单的对比手法,也能体现出视觉上的层级关系,如果是为了提升设计作品整体的层次感,我们就可以把对比做的更丰富一些,比如:综合运用大小、虚实的对比形式,对于层次感的提升会有更大的效果。

下面再看几个案例:

如图所示,采用虚实的对比手法让作品具有了空间上的前后遮挡关系,给人感觉视觉层次更加丰富、立体。


再比如我们经常见到的广告产品场景图,也很喜欢采用这种虚实对比的展示形式:

视觉元素的虚化是为了体现画面整体的层次,较实的物品是主体,是为了突出强调的,这样就形成了虚实对比。


类似的案例还有:

这里补充说一点:视觉层次感不单单是指空间维度上的变化,也可以通过提升整体画面的视觉丰富度来体现,比如下面这个案例:

如上面的案例所示,单看左侧黑白稿,仅通过大小、粗细和明暗对比就让画面整体在视觉上很有层次感。再看右侧的案例,在左侧案例的基础上加入色彩对比的形式,使得画面整体层次感更加丰富,像这种层次感就是通过视觉丰富度来体现的。


强调一点:不要拘泥于某一种对比的形式,可以相互结合来使用,这样无论是信息整理还是对于画面的主次关系、提升层次感,均会起到很好的加强、辅助的作用。

很多时候,作品会给人感觉很平淡、乏味,这让很多新手设计师头疼不已,而通过对比手法就可以很好的改善以上问题。


咱们先来简单的理解下跳跃率:画面上“大块部分”与“小块部分”之间的比叫做“跳跃率”,更通俗点讲:就是大块与小块之间的对比强度。


对比强度的体现可以是一种或者多种。


看下面这个案例:

上图左侧和右侧的案例从设计角度讲都不错,只是这两张图给人的感觉有些不同,左侧案例给人一种相对安静、统一的视觉感受,主体突出也很明显。


右侧案例则是通过明显的色块分割背景,形成强烈的视觉冲突,使得画面整体给人感觉更加的活跃、具有跳跃性,也更有层次感。


类似案例还有:

多数情况可以这样理解:在视觉元素不变的情况下,对比越强烈,画面的活跃度就越大,下面再举个简单的例子:

上面左右两个画面虽然文案一样,但给人的视觉感受却差别很大,很明显右侧画面在视觉上更具有跳跃性,文字信息也更有层次感。这都要归功于对比的手法,因为加强了对比,让该突出的更突出,所以画面在视觉上给人的感受也就更活跃。


当你的作品经常让人觉得单调、呆板、画面平淡、缺少亮点时,就要仔细检查一下你的作品有没有做好对比?


在这里同时也要强调:画面并非越跳跃就越好,比如一些作品本身就是想营造一种宁静、统一的感觉。而像儿童节或者青少年、运动这类海报,整体感觉活跃一些就会更好。所以要结合最终目的进行设计。

设计感对于作品来说有什么作用?例如我们常见的点缀性的元素、英文、线条等等,其元素本身在作品中并没有太大的含义,只是起到辅助、点缀的作用。


你可能会听到甲方或老板这样问你:为什么要加英文,有几个能看懂的?


加英文除了丰富画面的作用,还有个目的就是提升作品的设计感。


但需要注意:不要一味强调设计感而忽视了目的性,设计感或许可以让你原本70分的作品向90分提升,但肯定不会将50分的作品提升到70分,因为你最基本的都没做好,谈设计感就是本末倒置了。


为了更直观的理解,看下面这张示例:

四个案例同样都是以设计二字为主体,下侧两个案例就属于过分强调设计感而忽略了目的性,主体文字的识别性高于一切设计感。而上侧两个案例,相比而言,右侧在兼顾主体文字识别性的情况下,让人感觉更具有层次感和设计感,画面也更新颖。


当标题性的关键文字经过特殊处理后,与常规文字就形成了对比,可以理解为对比手法中的形态对比,看下面这个案例:

如图所示,此案例就用到了文字之间肌理和大小的对比形式,不仅丰富了文案的主次关系,还间接提升了作品的整体设计感。


类似的案例还有:

综上所述:尤其是虚实、形态、图文、空间、位置、角度,诸如此类的对比形式,对提升作品的设计感会有很大帮助。


在大多数的情况下,形式感强的对比都会依附于常规对比形式之上,也就是说先要做好基础的设计,再追求所谓的设计感。要牢记:设计的目的性高于设计感的体现!

氛围感这个词大家并不陌生,比如:温馨、忧郁、活泼、寒冷、激烈等等,而我们常用的对比手法就有提升氛围感的作用,比如:强烈的色彩对比,就能体现出活泼、对抗、激烈的氛围;空间位置的对比能体现出趣味性。


我们继续看下面几个案例:

如上所示,通过颜色对比的手法,即冷暖色调的对比,加强了作品整体的氛围感和视觉冲击力,也正因为如此,使得作品给人的视觉感受更加立体化。


对比无处不在,一些很有意思的创意往往都来源于对比手法,只是呈现形式有所不同而已,比如:

小猫与老虎在形态上形成了强烈的对比,作品给人的感受是新颖、有趣,这就是对比所带来的新奇感受。


类似的案例还有:

前面也讲到,对比也在一定程度上能体现对抗、激烈的氛围,除了刚刚看到的冷暖色对比外,还有哪些呢?


下面看几个案例:

通过形态、表情、位置的对比,也可以体现出对抗、激烈的氛围。


通过上面这些案例你会发现,即使采用相同的对比手法,很多时候带给我们的视觉感受也是各不相同的,往往在强调某种作用时,无形中也兼顾了其他的作用,比如:当对比是为了强调突出主体时,同时也兼顾了整体的层次感……


总之在设计中,我们无需刻意强调哪种对比形式对应哪种作用,因为很多时候都是互通的,根据自己的设计目的,做到灵活使用即可。

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询