網頁中用到的對比原則（一）：色彩對比

提及專業，小編學的是平面設計，後來慢慢轉到了網頁設計，這麼多年過去了，小編用蟬知系統也是給多個行業領域的客戶定製了諸多的網站。因此今天小編來給你們分享一下怎麼將平面設計的一些知識運用到網頁設計當中去。

 

形式美法則是人類在創造美的形式和過程當中對美的形式規律的總結歸納，世間萬物的美均可以用形式美法則來歸納。在平面構成中也有形式美法則：統一和變化，對稱和平衡，節奏和韻律，對比和調和。小編曾給你們介紹《寫給你們看的設計書》這本書，書中做者也歸納了設計四大基本原則，分別是：對比、重複、對其和親密性。平面構成的形式美法則和Robin在書中歸納出的設計四大原則中都包含了對比，這二者所表達的內容是同樣的，可見對比在設計中的重要性。

 

一個網頁是由不少個不一樣元素構成的，這些元素的重要性都不一樣，有些元素須要特別突出、有些元素彼此之間存在着聯繫，而另外的元素之間則一點關聯性都沒有。如何去平衡元素中的等同和不一樣的元素特性，就顯得特別重要，由於若是不能將這些元素在一個畫面當中協調處理，這個畫面便變得突兀。對比就是兩個或更多個元素之間的不一樣。經過對比，設計師就能夠創造出視覺趣味性，同時引導用戶的注意力。

 

常見的對比有這麼多的表現形式：

1) 色調上的明暗對比、冷暖對比等；

2) 形狀上的大小對比、方圓對比、粗細對比、長短對比等；

3) 方向上的垂直對比、水平對比、傾斜對比等；

4) 數量上的疏密對比等；

5) 圖片上的虛實對比、黑白對比等；

6) 事物的動靜對比等。

 

對比的表現形式比較多，今天小編先來跟你們分享一下網頁界面當中的——色彩對比。

 

不一樣的顏色能夠表達不一樣的感覺，顏色上的對比也有不少，這個跟色彩構成有很大的關係。顏色對比主要分色相對比、明度對比和純度對比。

色相即各種顏色色彩的相貌稱謂，任何黑白灰之外的顏色都有色相的屬性。如硃紅、普藍、檸檬黃等。色相是色彩的首要特徵，是區別各類不一樣色彩的最準確的標準。

明度指的就是色彩的亮度。好比：深黃、中黃、淡黃、檸檬黃等，這些黃顏色在明度上就不同。顏色有深淺、明暗的變化，這些顏色在明暗、深淺上的不一樣變化，也就是色彩的明度變化。

純度指的是色彩的鮮豔和深淺程度。純度是色彩鮮豔度的判斷標準，純度最高的色彩就是原色，隨着純度的下降，色彩就會變暗、變淡。

 

1、色相對比。兩種以上色彩組合後，因爲色相差異而造成的色彩對比效果稱爲色相對比。它是色彩對比的一個根本方面，其對比強弱程度取決於色相之間在色相環上的距離（角度），距離（角度）越小對比越弱，反之則對比越強。

根據色相環能夠看出色環上的顏色是多豐富多彩，隨意抽取兩個顏色，都能造成不同的對比。所以色相對比又分不少，有補色對比、對比色對比、鄰近色相對比等等。

 

1、互補色對比

在色相環的組成中，相隔 180 度的色彩咱們稱之爲互補色：紅與綠互補，黃與紫互補而藍色與橙色互補。互補色的對比效果強烈、眩目、響亮、極有力，但也須要慎用，由於使用不當易產生幼稚 、原始、粗俗、不安定、不協調等不良感受。

Orangina這個網站就是巧妙的運用了藍色和橙色互補色的對比，設計者在顏色的輕重上作了很好的拿捏，整個網站以藍色爲主，橙色爲輔，加上適當的白色來削弱橙色的對比，界面顯得效果醒目和有衝擊力。

若是加大界面橙色部分會變成怎樣呢？

能夠看到，當橙藍各佔一半的時候，這時候的對比是最強烈的，也是最容易讓觀看的人產生不舒服的感覺。當減小橙色的比重，增長藍色的比重時，這種不舒服感會隨之減小，當二者顏色比重差距越大時，你會以爲這個對比效果很明顯且不會讓你產生不適感。除了更改顏色的比重來讓對比色相互統一以外，還能夠經過增長一兩個顏色來增長界面的協調性，起到過渡統一的做用。Orangina這個網站就增長了白色來協調整個畫面，白色的出現雖然只是點綴的做用，可是的確讓整個界面更加的協調。

 

二、鄰近色相對比

鄰近色對比好理解一些，比如黃色跟橙色能夠稱爲鄰近色，草綠和果綠也可稱爲鄰近色。色相環上相鄰的二至三色對比，色相距離大約30度左右，爲弱對比類型。鄰近色相對比效果感受柔和、和諧、雅緻、文靜，但也會讓人感受單調、模糊、乏味、無力，因此必須調節明度差來增強效果。

Dotfusion設計公司這個網站總體採用橙色調，裏面的一些方格也用到鄰近色來協調，但這樣鄰近色之間也造成了微弱的對比關係。整個界面最大的亮點就是左上角logo的地方，用了一個白色作底色來調和界面，接着用了一個藍綠色的色塊來點綴畫面，使得整個色塊和橙色造成鮮明的對比，但又和整個橙色界面能夠協調的融在一塊兒。

小編把藍綠色的區別稍微處理了一下，改爲同個色系的，能夠看出這個界面的衝擊力也變弱了。在網頁的界面設計當中，咱們的確能夠學習這種鄰近色對比，當這種對比不夠明顯時，能夠嘗試加入一些對比色來提升總體的衝擊力。

 

 

三、對比色對比

色相對比距離約120度左右，爲強對比類型，要比鄰近色相對比鮮明、強烈、飽滿。豐富，容易令人興奮激動和形成視覺以及精神的疲勞。如黃綠與紅紫色對比等，可是顏色之間協同統一的工做也比較難作。這種對比不容易單調，但通常須要採用多種調和手段來改善對比效果，否則就容易產生雜亂和過度刺激的效果。

 

Tymbark飲料這個界面採用了紅、黃、綠的這三種對比色對比，界面效果清新明快。

界面雖然用了紅黃綠三種豐富的顏色來表現，可是這個界面在調和這塊作得很好。能夠看到界面上的黃色是佔面積是最大的，設計者下降了黃色的明度，使得整個黃色不會特別突兀。中間的綠色純度比較高，雖然顏色的面積不大，但凸顯了整個網站的主題顏色。右邊的紅色部分實際上是整個畫面最小佔比的，可是設計者在顏色的純度和明度上也作了必定的調整，使得整個紅色不會很耀眼。總體來講這個界面將紅黃綠這三種顏色協調的統一在一塊兒仍是很成功的，既能表現明快的主題，又不會讓觀者產生不適感。小編點贊！

 

 

四、零度對比

零度對比其實也分了幾塊，好比無彩色對比、無彩色與有彩色的對比、同種色相對比和無彩色與同種色相比四種，這塊只要理解下無彩色的概念便可。

無彩色指的就是沒有色相的顏色，前面小編說的顏色都有色相，但黑白灰這三種是沒有色相的，因此也被稱爲無彩色。

無彩色對比：如黑與白 、黑與灰、中灰與淺灰，或黑與白與灰、黑與深灰與淺灰等。

無彩色與有彩色的對比：如黑與黃、白與藍等。

同種色相對：如藍與淺藍（藍+白）色對比，橙與咖啡（橙+灰）或綠與粉綠（綠+白）與墨綠（綠+黑）色等對比。

無彩色與同種色相比：如白與深藍與淺藍、黑與桔與咖啡色等對比。

 

無彩色雖然無色相，但它們的組合在實用方面頗有價值。下面小編給你們簡單舉兩個例子：

 

NewsTech設計公司這個網站採用了無彩色的對比，整個界面都是用了黑白灰來表現，通常這種界面都會顯得比較冷酷和個性，但看久了也會以爲有點單調。這個界面在黑白灰的處理上作得特別好，一般只用黑白灰來表現主題難度很大，由於對於界面的黑白關係很差掌握，也很差凸顯主次關係，但這個界面真是小編以爲推薦的一個，界面的主次關係很明顯，在點線面的處理上能夠看出設計者花了很多心思。

 

 

MINI 5-DOOR HATCH這個網頁就是採用了無彩色和有彩色的對比，總體畫面色彩對比特別明顯，容易彰顯個性和主題。黑色的底色、白色的字體和灰色logo，無彩色的黑白灰都運用到了。有彩色選用了藍色，比較明亮，也跟產品的顏色相呼應。在整個畫面當中，假若沒有藍色出現，畫面會變得枯燥單調，加入藍色以後，整個畫面鮮活起來了。

 

 

2、明暗對比。

兩種以上色相組合後，因爲明度不一樣而造成的色彩對比效果稱爲明度對比。它是色彩對比的一個重要方面，是決定色彩方案感受明快、清晰、沉悶、柔和、強烈、朦朧與否的關鍵。

能夠看到，明度變化裏面也有低中高明度區分的。

POCARI SWEAT這個網站就是採用了藍色的明暗對比來設計的，在這個界面當中，右邊的深藍色顯得比較穩重，左邊導航部分採用一個明亮的藍色，左右兩邊造成了鮮明的對比，這樣的界面穩重中又帶着輕快，視覺效果也比較好。

 

3、純度對比。

純度指的就是飽和度，檸檬黃的純度是比較高的，當加入一點紅色以後就變成橙色，於是檸檬黃和橙色就造成了純度上的對比。兩種以上色彩組合後，因爲純度不一樣而造成的色彩對比效果稱爲純度對比。它是色彩對比的另外一個重要方面，但因其較爲隱蔽、內在，故易被忽略。在色彩設計中，純度對比是決定色調感受華麗、高雅、古樸、粗俗、含蓄與否的關鍵。

純度變化裏面也有低中高純度區分。

ALIVE2013年活動這個網站在整個色系的把握上特別好。整個高純度的綠底到墨綠色的山脈，均可以體現出純度的對比。

 

 

後面的純度和明度可能比較容易混淆，純度指的是顏色的飽和度，明度指的是顏色的明暗程度，這樣說可能比較好區分。關於色彩對比在網頁當中的應用，小編就給你們分析這三大點。色彩構成的內容涉及的比較廣，小編也只選擇了其中幾個有表明性的跟你們分享，這幾點是我這麼多年在給蟬知客戶作定製網站的過程當中總結出來的。若是你想更深刻了解更多色彩對比相關的知識，小編以爲你能夠買兩本色彩書籍去學習一下。學無止境，但願你們能夠相互學習，共同進步，加油吧設計師們！

 

參考文獻

１、百度百科：色彩構成

二、[1] 王平.色彩構成[M].華中科技大學出版社 2008