干货!利用「对比原则」做出抢眼设计的十个技巧(附案例)

以前一直以为设计最重要的是灵感,但后来才发现并不是这么回事,更重要的是设计知识以及工作带来的经验。对比原则是设计上一个很常用的手法,它可以突出重点,按照不同的重要级信息传递给用户,同时还可以给用户带来视觉性的趣味。

设计师没有完美的魔法公式,对比原则也是一样,需要在工作中不断尝试,总结经验。今天给大家分享十个在色彩上的常用技巧,一起来看下有哪些需要注意的点。(译者:@喪心病狂十六夜貓

01 将色彩的明暗增加对比

「值」是色彩的亮度或者暗度的表示用语。使用白色和黑色,可以做成无数的对比值。但是,当作成对比度强的设计时,也就没有必要使用黑色和白色了。通过调整色彩的明暗度来增强对比使设计中的一部分变得可见是最简单的技术之一。

在下面的这个设计案例中,在照片上配上文字会使其变得难以阅读,在白色的文字上添加紫色到蓝色的渐变色,就成了一个很好的对比。

02 利用色相,色调增加对比

色相、色调是指,在从很久以前就开始使用的 12 色色轮中,所选择的特定的颜色名称的绘画用语。但是这种色彩的原理,不管是绘画还是网页设计,都可以去利用他。在这个色轮里有几个名词需要了解一下。

互补色:指的是选择色轮上面对面的那一组颜色,例如红和绿,蓝和橙。互补色的特点是高对比度,所以如何掌握颜色之间的平衡,也就成了难点。

在下面的设计案例中,使用了简单的互补色,他看起来非常的有吸引力,他将图像中的各种情报都整理的很好,是非常具有实际意义的设计案例。

分散互补色:指的是选中主色之后,分布在主色对面的互补色两侧相邻的颜色。这种配色有较强的视觉对比,可以设计出有着强烈碰撞的设计效果。

三色系:指的是选中主色后,以主色画一个等边三角形的配色方案。

当你在使用色轮进行设计时,我们要有「没必要只是用纯色」这样的念头。在越来越多的实践中,不断的去尝试提高降低颜色的明度和各种各样的颜色组合,来表现出最棒的对比效果吧。

03 利用色温增加对比

所有的颜色都是有温度的,他可以被分为暖色、冷色或者中性色。红色、橙色或者黄色会给人温暖的感觉,而蓝色、绿色则会给人冷的感觉,黑和白就给人中性的感觉(还有些不常见的米色和茶色,也归属这一类。),颜色就按这样来进行划分。利用颜色的温度的不同来进行配色,例如暖色和冷色进行组合,可以给人一种巨大的反差。

下面这个设计案例,使用鲜艳的蓝色和黄色这样不同的色温,在网页布局上实现了对比。像这样,Call−to−Action(行为召唤)将按钮与背景区分出来,产生引人注意的效果。


04. 利用颜色的浓度增加对比

颜色的浓度,也被称为色彩饱和度。纯粹明亮的颜色,他的饱和度状态就是 100%;越是接近灰色,他的饱和度也就越低。明亮的色调和黑色一起使用的话,就能产生特别的引人注意的效果。在设计中可以作为一个特别的组成部分,为了强调出重要的部分,一定要谨慎的使用。

在下面的这个设计案例中,可以使用降低了饱和度的橙红色,将其放置在山顶同样降低了饱和度的绿色上。利用互补色组合,通过调整色彩的饱和度来吸引眼球,为你的设计赋予更多的活力。

05. 利用图形增加对比:几何图形VS不规则图形

大多数图形,是可以被分类为具有几何意义的几何图形,或者不规则的图形。在均匀对称的几何图形的角落,使用一些柔和的非对称的不规则图形,可以进行很好的对比。

下面的这个设计案例,在复杂抽象的有机图片中,我们可以看到,很好的插入了强调排版的直线和曲线,他们补充的位置非常好。

06. 利用图形增加对比:锐角边VS曲线边

在使用图形帮助设计的另一个方法,就是利用边框。在任何设计要素中,比如按钮,就可以使用锐角边或者是曲线边。按钮的形状越柔软,圆滑,给人的视觉效果就越友好;角的形状越是整齐,给人的感觉就越是严肃。通过两种不同的形状,我们可以创建一个对比。

在下面这个设计案例中,我们可以看到很好的利用了锐角和曲线进行排版,表现出了一种惊人的对比感。

07. 利用纹理增加对比

图片相同,设计的要素不同,例如使用纹理,对比的效果也就出来了。粗糙与细致 ,硬与软,立体与平面等。作为特殊的打印加工,纹理和别的技术不同,可以应用于任何内容。通过使用网络上免费的素材,可能性是非常广阔的。

在下面这个案例中,在清爽的 LOGO 上,添加上砂质纹理,表现出一种复古的质感。粗糙质感的纹理和复古的颜色,是为了表现出复古氛围的最佳选择。

08. 利用比例和尺寸增加对比

对比不仅可以增加视觉趣味,也可以帮助我们展现相关联的设计要素的优先级。如果设计要素的尺寸相同,就无法表现出他们的层级关系。不管是怎样的读者,我们都需要将重要的东西优先传达给他们。

在下面这个设计案例中,使用了被扩展的非常大的照片作为杂志封面,也不会对其他的设计要素进行干扰。实际上,通过调整大小,形状和配色、版式,可以强调出照片的焦点部分。

09. 利用视觉重量增加对比


在比例和尺寸相同的情况下,利用视觉重量就可以将设计中重要的部分给凸显出来了。在视觉重量中,将那个元素与剩余的元素进行显著的区分,这种方法我们称之为高对比度。此外,通过使用纹理。配色和图形等,给他一种「重」的印象,也能做出有魅力的设计。

在下面的设计案例中,是介绍在美国辛辛那提,有着当地文化气息的建筑的明信片。当然,建筑在明信片中是最大的设计要素,但关键词「Enjoy more」却更能吸引眼球。这当然是因为,他的颜色是最暗的。


10. 利用留白增加对比


在有限的空间中,为了最大化的填入信息,我们常利用填补式的设计,留白或者空白、负空间等方法,将设计要素进行区分/整理,做成一个平衡的布局,也是非常重要的。通过这种方法,你可以将用户的时间集中到重要的要素上,从而和其他的要素产生有效的对比。

在下面的这个设计案例中,留白和细边框线相结合,我们就完成了将网页信息精辟概括的设计模型。在左右上下进行了适当的留白,在产品信息中也利用了留白,引起了用户的兴趣。


以上就是十个色彩对比的技巧,由于篇幅原因,还有构图对比等另外十个原则我们下周再见,想提前了解的朋友可以回复「庖丁开发」本公众号「对比」俩字看文章

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,335评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,895评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,766评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,918评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,042评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,169评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,219评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,976评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,393评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,562评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,193评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2 351

推荐阅读更多精彩内容

  • 本文摘要 可以说我们每个人每天无时无刻都在和颜色打交道,作为一名设计师,对颜色更是敏感。色彩的搭配影响着每个作品的...
    郑乔尹在旅游阅读 12,483评论 0 7
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,900评论 25 707
  • 总有一天,会有一个人,看你写过的所有状态,读完写的所有微博,看你从小到大的所有照片,甚至去别的地方寻找关于你的信息...
    养只猫吧阅读 102评论 0 0
  • 那天早上6点20迷迷糊糊的拿起手机,登入心悦心理协会的官方QQ,推送每天的早安心语。说说发完后,下意识的往下看了一...
    因为期待阅读 368评论 0 4
  • 后来啊,后来就再也不敢跟她说喜欢了,因为我害怕我用来挽回我和她之间的关系忍着痛说的这种喜欢是种保护欲都变成了徒劳。
    ClRsUhSyHl阅读 163评论 0 0