联合创智
上市公司品牌战略 & 品牌设计

联合创智
所在位置: 首页 > 新闻 > 深圳vi设计 > 网页中用到的对比原则(一):色彩对比

网页中用到的对比原则(一):色彩对比

2017-11-29

说起专业,小编学的是立体设计,后来渐渐转到了网页设计,这麼多年过来了,小编用蝉知零碎也是给多个行业范畴的客户定制了诸多的网站。所以明天小编来给大家分享一下怎样将立体设计的一些知识运用到网页设计当中去。

方式美规律是人类在发明美的方式和进程中对美的方式规律的总结概括,人间万物的美都可以用方式美规律来概括。在立体构成中也无形式美规律:一致和变化,对称战争衡,节拍和韵律,比照和谐和。小编曾给大家引见《写给大家看的设计书》这本书,书中作者也概括了设计四大根本准绳,辨别是:比照、反复、对其和密切性。立体构成的方式美规律和Robin在书中概括出的设计四大准绳中都包括了比照,这两者所表达的内容是一样的,可见比照在设计中的重要性。

一个网页是由很多个不同元素构成的,这些元素的重要性都不同,有些元素需求特别突出、有些元素彼此之间存在着联络,而另外的元素之间则一点关联性都没有。如何去均衡元素中的同等和不同的元素特性,就显得特别重要,由于假如不能将这些元素在一个画面当中协调处置,这个画面便变得突兀。比照就是两个或更多个元素之间的不同。经过比照,设计师就可以发明出视觉兴趣性,同时引导用户的留意力。

罕见的比照有这麼多的表现方式:

1) 色彩上的明暗比照、冷暖比照等;

2) 外形上的大小比照、方圆比照、粗细比照、长短比照等;

3) 方向上的垂直比照、程度比照、倾斜比照等;

4) 数量上的疏密比照等;

5) 图片上的真假比照、彩色比照等;

6) 事物的动态比照等。

比照的表现方式比拟多,明天小编先来跟大家分享一下网页界面当中的——颜色比照。

 

不同的颜色可以表达不同的感受,颜色上的比照也有很多,这个跟颜色构成有很大的关系。颜色比照次要分色绝对比、明度比照和纯度比照。

色相即各类颜色颜色的容颜称谓,任何彩色灰以外的颜色都有色相的属性。如朱红、普蓝、柠檬黄等。色相是颜色的首要特征,是区别各种不同颜色的最精确的规范。

明度指的就是颜色的亮度。比方:深黄、中黄、淡黄、柠檬黄等,这些黄颜色在明度上就不一样。颜色有深浅、明暗的变化,这些颜色在明暗、深浅上的不同变化,也就是颜色的明度变化。

纯度指的是颜色的艳丽和深浅水平。纯度是颜色艳丽度的判别规范,纯度最高的颜色就是原色,随着纯度的降低,颜色就会变暗、变淡。

 

一、色绝对比。两种以上颜色组合后,由于色相差异而构成的颜色比照效果称爲色绝对比。它是颜色比照的一个基本方面,其比照强弱水平取决于色相之间在色相环上的间隔(角度),间隔(角度)越小比照越弱,反之则比照越强。

 

依据色相环可以看出色环上的颜色是多丰厚多彩,随意抽取两个颜色,都能构成不一样的比照。因而色绝对比又分很多,有补色比照、比照色比照、临近色绝对比等等。

1、互补色比照

在色相环的组成中,相隔 180 度的颜色我们称之爲互补色:红与绿互补,黄与紫互补而蓝色与橙色互补。互补色的比照效果激烈、眩目、嘹亮、极无力,但也需求慎用,由于运用不当易发生老练 、原始、粗鄙、不安宁、不协调等不良觉得。

 

Orangina这个网站就是巧妙的运用了蓝色和橙色互补色的比照,设计者在颜色的轻重上做了很好的拿捏,整个网站以蓝色爲主,橙色爲辅,加上适当的白色来减弱橙色的比照,界面显得效果醒目和有冲击力。

 

假如加大界面橙色局部会变成怎样呢?

 

可以看到,当橙蓝各占一半的时分,这时分的比照是最激烈的,也是最容易让观看的人发生不舒适的感受。当增加橙色的比重,添加蓝色的比重时,这种不舒适感会随之增加,当两者颜色比重差距越大时,你会觉得这个比照效果很分明且不会让你发生不适感。除了更改颜色的比重来让比照色互相一致之外,还可以经过添加一两个颜色来添加界面的协调性,起到过渡一致的作用。Orangina这个网站就添加了白色来协调整个画面,白色的呈现虽然只是装点的作用,但是确实让整个界面愈加的协调。

2、临近色绝对比

临近色比照好了解一些,好比黄色跟橙色可以称爲临近色,草绿和果绿也可称爲临近色。色相环上相邻的二至三色比照,色相间隔大约30度左右,爲弱比照类型。临近色绝对比效果觉得柔和、调和、俗气、文静,但也会让人觉得单调、模糊、有趣、有力,所以必需调理明度差来增强效果。

 

Dotfusion设计公司这个网站全体采用橙色彩,外面的一些方格也用到临近色来协调,但这样临近色之间也构成了微弱的比照关系。整个界面最大的亮点就是左上角logo的中央,用了一个白色做底色来谐和界面,接着用了一个蓝绿色的色块来装点画面,使得整个色块和橙色构成鲜明的比照,但又和整个橙色界面可以协调的融在一同。

 

小编把蓝绿色的区别略微处置了一下,改成同个色系的,可以看出这个界面的冲击力也变弱了。在网页的界面设计当中,我们确实可以学习这种临近色比照,当这种比照不够分明时,可以尝试参加一些比照色来进步全体的冲击力。

3、比照色比照

色绝对比间隔约120度左右,爲强比照类型,要比临近色绝对比鲜明、激烈、丰满。丰厚,容易使人兴奋冲动和形成视觉以及肉体的疲劳。如黄绿与红紫色比照等,但是颜色之间协同一致的任务也比拟难做。这种比照不容易单调,但普通需求采用多种谐和手腕来改善比照效果,不然就容易发生芜杂和过火安慰的效果。

 

Tymbark饮料这个界面采用了红、黄、绿的这三种比照色比照,界面效果清爽明快。

界面虽然用了红黄绿三种丰厚的颜色来表现,但是这个界面在谐和这块做得很好。可以看到界面上的黄色是占面积是最大的,设计者降低了黄色的明度,使得整个黄色不会特别突兀。两头的绿色纯度比拟高,虽然颜色的面积不大,但凸显了整个网站的主题颜色。左边的白色局部其实是整个画面最小占比的,但是设计者在颜色的纯度和明度上也做了一定的调整,使得整个白色不会很耀眼。全体来说这个界面将红黄绿这三种颜色协调的一致在一同还是很成功的,既能表现明快的主题,又不会让观者发生不适感。小编点赞!

 

4、零度比照

零度比照其实也分了几块,比方无黑色比照、无黑色与有黑色的比照、同种色绝对比和无黑色与同种色相比四种,这块只需了解下无黑色的概念即可。

无黑色指的就是没有色相的颜色,后面小编说的颜色都有色相,但彩色灰这三种是没有色相的,所以也被称爲无黑色。

无黑色比照:如黑与白 、黑与灰、中灰与浅灰,或黑与白与灰、黑与深灰与浅灰等。

无黑色与有黑色的比照:如黑与黄、白与蓝等。

同种色绝对:如蓝与浅蓝(蓝+白)色比照,橙与咖啡(橙+灰)或绿与粉绿(绿+白)与墨绿(绿+黑)色等比照。

无黑色与同种色相比:如白与深蓝与浅蓝、黑与桔与咖啡色等比照。

无黑色虽然无色相,但它们的组合在适用方面很有价值。上面小编给大家复杂举两个例子:

 

NewsTech设计公司这个网站采用了无黑色的比照,整个界面都是用了彩色灰来表现,普通这种界面都会显得比拟冷漠和特性,但看久了也会觉得有点单调。这个界面在彩色灰的处置上做得特别好,通常只用彩色灰来表现主题难度很大,由于关于界面的彩色关系不好掌握,也不好凸显主次关系,但这个界面真是小编觉得引荐的一个,界面的主次关系很分明,在点线面的处置上可以看出设计者花了不少心思。

 

MINI 5-DOOR HATCH这个网页就是采用了无黑色和有黑色的比照,全体画面颜色比照特别分明,容易彰显特性和主题。黑色的底色、白色的字体和灰色logo,无黑色的彩色灰都运用到了。有黑色选用了蓝色,比拟亮堂,也跟商品的颜色相照应。在整个画面当中,假使没有蓝色呈现,画面会变得单调单调,参加蓝色之后,整个画面鲜活起来了。

 

 

二、明暗比照。

两种以上色相组合后,由于明度不同而构成的颜色比照效果称爲明度比照。它是颜色比照的一个重要方面,是决议颜色方案觉得明快、明晰、活跃、柔和、激烈、朦胧与否的关键。

 

可以看到,明度变化外面也有低中拙劣度区分的。

 

POCARI SWEAT这个网站就是采用了蓝色的明暗比照来设计的,在这个界面当中,左边的深蓝色显得比拟稳重,右边导航局部采用一个亮堂的蓝色,左右两边构成了鲜明的比照,这样的界面稳重中又带着轻快,视觉效果也比拟好。

三、纯度比照。

纯度指的就是饱和度,柠檬黄的纯度是比拟高的,当参加一点白色之后就变成橙色,因此柠檬黄和橙色就构成了纯度上的比照。两种以上颜色组合后,由于纯度不同而构成的颜色比照效果称爲纯度比照。它是颜色比照的另一个重要方面,但因其较爲荫蔽、内在,故易被疏忽。在颜色设计中,纯度比照是决议色彩觉得华美、庸俗、古朴、粗鄙、宛转与否的关键。

 

纯度变化外面也有低中高纯度区分。

 

ALIVE2013年活动这个网站在整个色系的掌握上特别好。整个高纯度的绿底到墨绿色的山脉,都可以表现出纯度的比照。

前面的纯度和明度能够比拟容易混杂,纯度指的是颜色的饱和度,明度指的是颜色的明暗水平,这样说能够比拟好区分。关于颜色比照在网页当中的使用,小编就给大家剖析这三大点。颜色构成的内容触及的比拟广,小编也只选择了其中几个有代表性的跟大家分享,这几点是我这麼多年在给蝉知客户做定制网站的进程中总结出来的。假如你想更深化理解更多颜色比照相关的知识,小编觉得你可以买两本性彩书籍去学习一下。学无尽头,希望大家可以互相学习,共同提高,加油吧设计师们!

 

声明:本文“ 网页中用到的对比原则(一):色彩对比 ”信息内容来源于网络,文章版权和文责属于原作者,不代表本站立场。如图文有侵权、虚假或错误信息,请您联系我们,我们将立即删除或更正。
最新新闻
相关新闻
相关标签
免费评估,获取需求清单和报价,总监一对一咨询。
做品牌直接找总监谈
总监一对一免费咨询与评估
点击咨询总监
相关案例
RELATED CASES
总监微信

总监微信咨询 舒先生

业务咨询 张小姐

业务咨询 付小姐