說起專業，小編學的是立體設計，后來漸漸轉到了網頁設計，這麼多年過來了，小編用蟬知零碎也是給多個行業范疇的客戶定制了諸多的網站。所以明天小編來給大家分享一下怎樣將立體設計的一些知識運用到網頁設計當中去。

方式美規律是人類在發明美的方式和進程中對美的方式規律的總結概括，人間萬物的美都可以用方式美規律來概括。在立體構成中也無形式美規律：一致和變化，對稱戰爭衡，節拍和韻律，比照和諧和。小編曾給大家引見《寫給大家看的設計書》這本書，書中作者也概括了設計四大根本準繩，辨別是：比照、反復、對其和密切性。立體構成的方式美規律和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年活動這個網站在整個色系的掌握上特別好。整個高純度的綠底到墨綠色的山脈，都可以表現出純度的比照。

前面的純度和明度能夠比擬容易混雜，純度指的是顏色的飽和度，明度指的是顏色的明暗水平，這樣說能夠比擬好區分。關于顏色比照在網頁當中的使用，小編就給大家剖析這三大點。顏色構成的內容觸及的比擬廣，小編也只選擇了其中幾個有代表性的跟大家分享，這幾點是我這麼多年在給蟬知客戶做定制網站的進程中總結出來的。假如你想更深化理解更多顏色比照相關的知識，小編覺得你可以買兩本性彩書籍去學習一下。學無盡頭，希望大家可以互相學習，共同提高，加油吧設計師們！