說起專業(yè)劈狐，小編學(xué)的是平面設(shè)計(jì)，后來慢慢轉(zhuǎn)到了網(wǎng)頁設(shè)計(jì)抡爹，這么多年過去了疏叨，小編用蟬知系統(tǒng)也是給多個(gè)行業(yè)領(lǐng)域的客戶定制了諸多的網(wǎng)站潘靖。所以今天小編來給大家分享一下怎么將平面設(shè)計(jì)的一些知識運(yùn)用到網(wǎng)頁設(shè)計(jì)當(dāng)中去。

形式美法則是人類在創(chuàng)造美的形式和過程中對美的形式規(guī)律的總結(jié)概括蚤蔓，世間萬物的美都可以用形式美法則來概括卦溢。在平面構(gòu)成中也有形式美法則：統(tǒng)一和變化，對稱和平衡秀又，節(jié)奏和韻律单寂，對比和調(diào)和。小編曾給大家介紹《寫給大家看的設(shè)計(jì)書》這本書吐辙，書中作者也概括了設(shè)計(jì)四大基本原則宣决，分別是：對比、重復(fù)昏苏、對其和親密性尊沸。平面構(gòu)成的形式美法則和Robin在書中概括出的設(shè)計(jì)四大原則中都包含了對比昵时，這兩者所表達(dá)的內(nèi)容是一樣的，可見對比在設(shè)計(jì)中的重要性椒丧。

一個(gè)網(wǎng)頁是由很多個(gè)不同元素構(gòu)成的，這些元素的重要性都不同救巷，有些元素需要特別突出壶熏、有些元素彼此之間存在著聯(lián)系，而另外的元素之間則一點(diǎn)關(guān)聯(lián)性都沒有浦译。如何去平衡元素中的等同和不同的元素特性棒假，就顯得特別重要，因?yàn)槿绻荒軐⑦@些元素在一個(gè)畫面當(dāng)中協(xié)調(diào)處理精盅，這個(gè)畫面便變得突兀帽哑。對比就是兩個(gè)或更多個(gè)元素之間的不同。通過對比叹俏，設(shè)計(jì)師就可以創(chuàng)造出視覺趣味性妻枕，同時(shí)引導(dǎo)用戶的注意力。

常見的對比有這么多的表現(xiàn)形式：

1)?色調(diào)上的明暗對比粘驰、冷暖對比等屡谐；

2)?形狀上的大小對比、方圓對比蝌数、粗細(xì)對比愕掏、長短對比等；

3)?方向上的垂直對比顶伞、水平對比饵撑、傾斜對比等；

4)?數(shù)量上的疏密對比等唆貌；

5)?圖片上的虛實(shí)對比滑潘、黑白對比等；

6)?事物的動(dòng)靜對比等锨咙。

對比的表現(xiàn)形式比較多众羡，今天小編先來跟大家分享一下網(wǎng)頁界面當(dāng)中的——色彩對比。

不同的顏色可以表達(dá)不同的感受蓖租，顏色上的對比也有很多粱侣，這個(gè)跟色彩構(gòu)成有很大的關(guān)系。顏色對比主要分色相對比蓖宦、明度對比和純度對比齐婴。

色相即各類顏色色彩的相貌稱謂，任何黑白灰以外的顏色都有色相的屬性稠茂。如朱紅柠偶、普藍(lán)情妖、檸檬黃等。色相是色彩的首要特征诱担，是區(qū)別各種不同色彩的最準(zhǔn)確的標(biāo)準(zhǔn)毡证。

明度指的就是色彩的亮度。比如：深黃蔫仙、中黃料睛、淡黃、檸檬黃等摇邦，這些黃顏色在明度上就不一樣恤煞。顏色有深淺、明暗的變化施籍，這些顏色在明暗居扒、深淺上的不同變化，也就是色彩的明度變化丑慎。

純度指的是色彩的鮮艷和深淺程度喜喂。純度是色彩鮮艷度的判斷標(biāo)準(zhǔn)，純度最高的色彩就是原色竿裂，隨著純度的降低夜惭，色彩就會(huì)變暗、變淡铛绰。

一诈茧、色相對比。兩種以上色彩組合后捂掰，由于色相差別而形成的色彩對比效果稱為色相對比敢会。它是色彩對比的一個(gè)根本方面，其對比強(qiáng)弱程度取決于色相之間在色相環(huán)上的距離（角度）这嚣，距離（角度）越小對比越弱鸥昏，反之則對比越強(qiáng)。

根據(jù)色相環(huán)可以看出色環(huán)上的顏色是多豐富多彩姐帚，隨意抽取兩個(gè)顏色吏垮，都能形成不一樣的對比。因此色相對比又分很多罐旗，有補(bǔ)色對比膳汪、對比色對比、鄰近色相對比等等九秀。

1遗嗽、互色對比

在色相環(huán)的組成中，相隔180 度的色彩我們稱之為互補(bǔ)色：紅與綠互補(bǔ)鼓蜒，黃與紫互補(bǔ)而藍(lán)色與橙色互補(bǔ)痹换≌髯郑互補(bǔ)色的對比效果強(qiáng)烈、眩目娇豫、響亮匙姜、極有力，但也需要慎用冯痢，因?yàn)槭褂貌划?dāng)易產(chǎn)生幼稚氮昧、原始、粗俗系羞、不安定、不協(xié)調(diào)等不良感覺霸琴。

Orangina這個(gè)網(wǎng)站就是巧妙的運(yùn)用了藍(lán)色和橙色互補(bǔ)色的對比椒振，設(shè)計(jì)者在顏色的輕重上做了很好的拿捏，整個(gè)網(wǎng)站以藍(lán)色為主梧乘，橙色為輔澎迎，加上適當(dāng)?shù)陌咨珌硐魅醭壬膶Ρ龋缑骘@得效果醒目和有沖擊力选调。

如果加大界面橙色部分會(huì)變成怎樣呢夹供？

可以看到，當(dāng)橙藍(lán)各占一半的時(shí)候仁堪，這時(shí)候的對比是最強(qiáng)烈的哮洽，也是最容易讓觀看的人產(chǎn)生不舒服的感受。當(dāng)減少橙色的比重弦聂，增加藍(lán)色的比重時(shí)鸟辅，這種不舒服感會(huì)隨之減少，當(dāng)兩者顏色比重差距越大時(shí)莺葫，你會(huì)覺得這個(gè)對比效果很明顯且不會(huì)讓你產(chǎn)生不適感匪凉。除了更改顏色的比重來讓對比色相互統(tǒng)一之外，還可以通過增加一兩個(gè)顏色來增加界面的協(xié)調(diào)性捺檬，起到過渡統(tǒng)一的作用再层。Orangina這個(gè)網(wǎng)站就增加了白色來協(xié)調(diào)整個(gè)畫面，白色的出現(xiàn)雖然只是點(diǎn)綴的作用堡纬，但是的確讓整個(gè)界面更加的協(xié)調(diào)聂受。

2、鄰近色相對比

鄰近色對比好理解一些烤镐，好比黃色跟橙色可以稱為鄰近色饺饭，草綠和果綠也可稱為鄰近色。色相環(huán)上相鄰的二至三色對比职车，色相距離大約30度左右瘫俊，為弱對比類型鹊杖。鄰近色相對比效果感覺柔和、和諧扛芽、雅致骂蓖、文靜，但也會(huì)讓人感覺單調(diào)川尖、模糊登下、乏味、無力叮喳，所以必須調(diào)節(jié)明度差來加強(qiáng)效果被芳。

Dotfusion設(shè)計(jì)公司這個(gè)網(wǎng)站整體采用橙色調(diào)，里面的一些方格也用到鄰近色來協(xié)調(diào)馍悟，但這樣鄰近色之間也形成了微弱的對比關(guān)系畔濒。整個(gè)界面最大的亮點(diǎn)就是左上角logo的地方，用了一個(gè)白色做底色來調(diào)和界面锣咒，接著用了一個(gè)藍(lán)綠色的色塊來點(diǎn)綴畫面侵状，使得整個(gè)色塊和橙色形成鮮明的對比，但又和整個(gè)橙色界面可以協(xié)調(diào)的融在一起毅整。

小編把藍(lán)綠色的區(qū)別稍微處理了一下趣兄，改成同個(gè)色系的，可以看出這個(gè)界面的沖擊力也變?nèi)趿说考怠Ｔ诰W(wǎng)頁的界面設(shè)計(jì)當(dāng)中艇潭，我們的確可以學(xué)習(xí)這種鄰近色對比，當(dāng)這種對比不夠明顯時(shí)戏蔑，可以嘗試加入一些對比色來提高整體的沖擊力暴区。

3、對比色對比

色相對比距離約120度左右辛臊，為強(qiáng)對比類型仙粱，要比鄰近色相對比鮮明、強(qiáng)烈彻舰、飽滿伐割。豐富，容易使人興奮激動(dòng)和造成視覺以及精神的疲勞刃唤。如黃綠與紅紫色對比等隔心，但是顏色之間協(xié)同統(tǒng)一的工作也比較難做。這種對比不容易單調(diào)尚胞，但一般需要采用多種調(diào)和手段來改善對比效果硬霍，不然就容易產(chǎn)生雜亂和過分刺激的效果。

Tymbark飲料這個(gè)界面采用了紅笼裳、黃唯卖、綠的這三種對比色對比粱玲，界面效果清新明快。

界面雖然用了紅黃綠三種豐富的顏色來表現(xiàn)拜轨，但是這個(gè)界面在調(diào)和這塊做得很好抽减。可以看到界面上的黃色是占面積是最大的橄碾，設(shè)計(jì)者降低了黃色的明度卵沉，使得整個(gè)黃色不會(huì)特別突兀。中間的綠色純度比較高法牲，雖然顏色的面積不大史汗，但凸顯了整個(gè)網(wǎng)站的主題顏色。右邊的紅色部分其實(shí)是整個(gè)畫面最小占比的拒垃，但是設(shè)計(jì)者在顏色的純度和明度上也做了一定的調(diào)整停撞，使得整個(gè)紅色不會(huì)很耀眼。整體來說這個(gè)界面將紅黃綠這三種顏色協(xié)調(diào)的統(tǒng)一在一起還是很成功的恶复，既能表現(xiàn)明快的主題怜森，又不會(huì)讓觀者產(chǎn)生不適感速挑。小編點(diǎn)贊谤牡！

4、零度對比

零度對比其實(shí)也分了幾塊姥宝，比如無彩色對比翅萤、無彩色與有彩色的對比、同種色相對比和無彩色與同種色相比四種腊满，這塊只要理解下無彩色的概念即可套么。

無彩色指的就是沒有色相的顏色，前面小編說的顏色都有色相碳蛋，但黑白灰這三種是沒有色相的胚泌，所以也被稱為無彩色。

無彩色對比：如黑與白肃弟、黑與灰玷室、中灰與淺灰，或黑與白與灰笤受、黑與深灰與淺灰等穷缤。

無彩色與有彩色的對比：如黑與黃、白與藍(lán)等箩兽。

同種色相對：如藍(lán)與淺藍(lán)（藍(lán)+白）色對比津肛，橙與咖啡（橙+灰）或綠與粉綠（綠+白）與墨綠（綠+黑）色等對比。

無彩色與同種色相比：如白與深藍(lán)與淺藍(lán)汗贫、黑與桔與咖啡色等對比身坐。

無彩色雖然無色相秸脱，但它們的組合在實(shí)用方面很有價(jià)值。下面小編給大家簡單舉兩個(gè)例子：

NewsTech設(shè)計(jì)公司這個(gè)網(wǎng)站采用了無彩色的對比掀亥，整個(gè)界面都是用了黑白灰來表現(xiàn)撞反，一般這種界面都會(huì)顯得比較冷酷和個(gè)性，但看久了也會(huì)覺得有點(diǎn)單調(diào)搪花。這個(gè)界面在黑白灰的處理上做得特別好遏片，通常只用黑白灰來表現(xiàn)主題難度很大，因?yàn)閷τ诮缑娴暮诎钻P(guān)系不好掌握撮竿，也不好凸顯主次關(guān)系吮便，但這個(gè)界面真是小編覺得推薦的一個(gè)，界面的主次關(guān)系很明顯幢踏，在點(diǎn)線面的處理上可以看出設(shè)計(jì)者花了不少心思髓需。

MINI 5-DOOR HATCH這個(gè)網(wǎng)頁就是采用了無彩色和有彩色的對比，整體畫面色彩對比特別明顯房蝉，容易彰顯個(gè)性和主題僚匆。黑色的底色、白色的字體和灰色logo搭幻，無彩色的黑白灰都運(yùn)用到了咧擂。有彩色選用了藍(lán)色，比較明亮檀蹋，也跟產(chǎn)品的顏色相呼應(yīng)松申。在整個(gè)畫面當(dāng)中，倘若沒有藍(lán)色出現(xiàn)俯逾，畫面會(huì)變得枯燥單調(diào)贸桶，加入藍(lán)色之后，整個(gè)畫面鮮活起來了桌肴。

二皇筛、明暗對比。

兩種以上色相組合后坠七，由于明度不同而形成的色彩對比效果稱為明度對比水醋。它是色彩對比的一個(gè)重要方面，是決定色彩方案感覺明快灼捂、清晰离例、沉悶、柔和悉稠、強(qiáng)烈宫蛆、朦朧與否的關(guān)鍵。

可以看到，明度變化里面也有低中高明度區(qū)分的耀盗。

POCARI SWEAT這個(gè)網(wǎng)站就是采用了藍(lán)色的明暗對比來設(shè)計(jì)的想虎，在這個(gè)界面當(dāng)中，右邊的深藍(lán)色顯得比較穩(wěn)重叛拷，左邊導(dǎo)航部分采用一個(gè)明亮的藍(lán)色舌厨，左右兩邊形成了鮮明的對比，這樣的界面穩(wěn)重中又帶著輕快忿薇，視覺效果也比較好裙椭。

三、純度對比署浩。

純度指的就是飽和度揉燃，檸檬黃的純度是比較高的，當(dāng)加入一點(diǎn)紅色之后就變成橙色筋栋，因而檸檬黃和橙色就形成了純度上的對比炊汤。兩種以上色彩組合后，由于純度不同而形成的色彩對比效果稱為純度對比弊攘。它是色彩對比的另一個(gè)重要方面抢腐，但因其較為隱蔽、內(nèi)在襟交，故易被忽略迈倍。在色彩設(shè)計(jì)中，純度對比是決定色調(diào)感覺華麗婿着、高雅授瘦、古樸醋界、粗俗竟宋、含蓄與否的關(guān)鍵。

純度變化里面也有低中高純度區(qū)分形纺。

ALIVE2013年活動(dòng)這個(gè)網(wǎng)站在整個(gè)色系的把握上特別好丘侠。整個(gè)高純度的綠底到墨綠色的山脈，都可以體現(xiàn)出純度的對比逐样。

后面的純度和明度可能比較容易混淆蜗字，純度指的是顏色的飽和度，明度指的是顏色的明暗程度脂新，這樣說可能比較好區(qū)分挪捕。關(guān)于色彩對比在網(wǎng)頁當(dāng)中的應(yīng)用，小編就給大家分析這三大點(diǎn)争便。色彩構(gòu)成的內(nèi)容涉及的比較廣级零，小編也只選擇了其中幾個(gè)有代表性的跟大家分享，這幾點(diǎn)是我這么多年在給蟬知客戶做定制網(wǎng)站的過程中總結(jié)出來的滞乙。如果你想更深入了解更多色彩對比相關(guān)的知識奏纪，小編覺得你可以買兩本色彩書籍去學(xué)習(xí)一下鉴嗤。學(xué)無止境，希望大家可以相互學(xué)習(xí)序调，共同進(jìn)步醉锅，加油吧設(shè)計(jì)師們！

參考文獻(xiàn)

１发绢、百度百科http://baike.baidu.com/link?url=dKEae6O95X0r3rGbEhIMqGFad23607Pdeuxpg0sDQZAFHm-r0O8oeSvFMPUhaXi4zc-Zul8LbloSEVLaXHUJi2k7c_OeGveXeZFAXSPU6EWpvpygg9qg17uTARTCbNmi

2硬耍、[1] 王平.色彩構(gòu)成[M].華中科技大學(xué)出版社 2008