認(ren)識了色(se)彩(cai)，并不表示你(ni)就能對顏色(se)運用(yong)自(zi)如。配色(se)有理(li)性(xing)(xing)(xing)(xing)的(de)(de)層(ceng)(ceng)面(mian)，也有感(gan)性(xing)(xing)(xing)(xing)的(de)(de)層(ceng)(ceng)面(mian)。配色(se)也需要依循一定(ding)的(de)(de)節(jie)奏。有的(de)(de)配色(se)跳躍(yue)明快，有的(de)(de)又顯得舒緩柔(rou)和。我們從理(li)性(xing)(xing)(xing)(xing)出發的(de)(de)同時(shi)，也要把自(zi)己的(de)(de)觸(chu)角深(shen)入到(dao)感(gan)性(xing)(xing)(xing)(xing)的(de)(de)層(ceng)(ceng)面(mian)去理(li)解色(se)彩(cai)。
配色秩序
每一種色(se)彩都有其自身(shen)的(de)特質，而這一特性的(de)發揮，還需要(yao)依賴于色(se)彩在整個配(pei)色(se)時所處的(de)位置、面積等，也即色(se)彩與(yu)其他色(se)彩所形(xing)成的(de)秩序。
主色
主(zhu)(zhu)色(se)(se)(se)(se)是指(zhi)在(zai)配(pei)色(se)(se)(se)(se)中處于支配(pei)地(di)位的(de)(de)色(se)(se)(se)(se)彩。在(zai)配(pei)色(se)(se)(se)(se)前，主(zhu)(zhu)色(se)(se)(se)(se)是最(zui)先確定(ding)的(de)(de)顏色(se)(se)(se)(se)，例如，當我們想(xiang)要(yao)設計一個(ge)珠(zhu)寶展示的(de)(de)頁面，這(zhe)個(ge)頁面所需(xu)要(yao)什么(me)色(se)(se)(se)(se)彩時，我們決定(ding)采(cai)用紫色(se)(se)(se)(se)，而紫色(se)(se)(se)(se)就(jiu)是主(zhu)(zhu)色(se)(se)(se)(se)。主(zhu)(zhu)色(se)(se)(se)(se)的(de)(de)確定(ding)看起(qi)來并不困(kun)難，因(yin)為一開始被確定(ding)下主(zhu)(zhu)色(se)(se)(se)(se)只是定(ding)出一個(ge)宏觀方向(xiang)，并沒(mei)有細化成具體的(de)(de)色(se)(se)(se)(se)調(diao)。主(zhu)(zhu)色(se)(se)(se)(se)的(de)(de)選擇也非(fei)常自由(you)，因(yin)為并沒(mei)有完全正確的(de)(de)“公式”，每種(zhong)顏色(se)(se)(se)(se)都有它的(de)(de)特(te)性和優劣，沒(mei)有最(zui)好的(de)(de)顏色(se)(se)(se)(se)或最(zui)差的(de)(de)顏色(se)(se)(se)(se)。
最終(zhong)確定對主(zhu)色(se)(se)(se)色(se)(se)(se)調(diao)(diao)的選擇則需要(yao)感性的參與(yu)，你希(xi)望(wang)你的網站看上去“沉穩典雅”還(huan)是“清新明快”？這(zhe)些不同的感受都(dou)來自色(se)(se)(se)調(diao)(diao)的制約平衡(heng)。
一般(ban)情況下(xia)，主(zhu)色是配色中使用(yong)面積最(zui)多的(de)色彩。用(yong)于(yu)主(zhu)要(yao)的(de)組(zu)件(jian)、組(zu)件(jian)的(de)背景、大面積色塊等。
頁面中的主色(se)是清爽的藍色(se)。盡(jin)管背景也運用了大(da)面積(ji)的白色(se)，但是黑白灰(hui)屬于無彩色(se)，無彩色(se)并不參與(yu)到配色(se)過程(cheng)中。紅色(se)是作為襯托色(se)而出(chu)現的：
襯托色
襯托(tuo)色是(shi)主(zhu)色以外，為了襯托(tuo)主(zhu)色而(er)出現的(de)另(ling)一種(zhong)色彩(cai)。襯托(tuo)色通常為主(zhu)色的(de)互補色或(huo)對比色。襯托(tuo)色所使用的(de)面(mian)積可大可小(xiao)，只要(yao)達到襯托(tuo)的(de)目的(de)即可。
黃(huang)色(se)是主色(se)，藍色(se)襯托色(se)。藍黃(huang)兩色(se)互為對比色(se)：
襯托(tuo)色也可用在(zai)面積較大的地方，和主色平分秋(qiu)色，彼此呼應(ying)。
頁面的(de)主色(se)(se)(se)為(wei)橙色(se)(se)(se)，而(er)襯托(tuo)色(se)(se)(se)為(wei)淺色(se)(se)(se)粉(fen)，這兩(liang)種色(se)(se)(se)彩為(wei)鄰近色(se)(se)(se)，彼(bi)此飽和度上有非常明顯(xian)的(de)對比，也能很好的(de)襯托(tuo)出主色(se)(se)(se)，為(wei)頁面的(de)氛圍增加溫度：
一(yi)(yi)組配色(se)(se)中(zhong)一(yi)(yi)定會有一(yi)(yi)個主色(se)(se)，而襯托(tuo)色(se)(se)并非必(bi)不可少。是(shi)否采用(yong)襯托(tuo)色(se)(se)，取決于你的(de)(de)配色(se)(se)計劃。通常(chang)單一(yi)(yi)的(de)(de)色(se)(se)彩會比較單調，而利用(yong)襯托(tuo)色(se)(se)來強化(hua)主色(se)(se)的(de)(de)豐富(fu)變(bian)化(hua)是(shi)解決這一(yi)(yi)問題的(de)(de)方案之一(yi)(yi)。
背景色
背(bei)景(jing)色(se)經常(chang)表現(xian)為無彩色(se)（黑、白、灰）或者低(di)飽(bao)和度的(de)色(se)彩。背(bei)景(jing)色(se)主要是(shi)作為背(bei)景(jing)而存在，它(ta)最好不要以非(fei)常(chang)強(qiang)烈(lie)的(de)姿態出(chu)現(xian)。背(bei)景(jing)色(se)并(bing)非(fei)具有某種(zhong)功能，它(ta)是(shi)一個頁面(mian)的(de)基礎底(di)色(se)。
頁(ye)面的背(bei)景色(se)為藍(lan)綠(lv)色(se)到藍(lan)紫(zi)色(se)的漸(jian)變色(se)，因此配圖時(shi)就應該考慮與背(bei)景色(se)的搭配協(xie)調：
黑(hei)色作為背景色時，淺(qian)米(mi)色作為主(zhu)色，主(zhu)色和背景色之間的相(xiang)得益彰(zhang)，這時的背景色也可(ke)看作襯托色：
強調色
強(qiang)調色(se)是(shi)在(zai)主色(se)以外起強(qiang)調作用(yong)的(de)色(se)彩，可(ke)以說它(ta)(ta)是(shi)非常重(zhong)要的(de)視(shi)覺(jue)焦點。它(ta)(ta)本身具有一種獨(du)立性，因此在(zai)配色(se)上要與形成與主色(se)的(de)強(qiang)烈對比(bi)。它(ta)(ta)可(ke)以是(shi)主色(se)的(de)對比(bi)色(se)、互補色(se)等，使(shi)其能跳脫(tuo)于主色(se)的(de)色(se)彩。
頁(ye)面(mian)的主色為藍色，紅色則作(zuo)為強調(diao)(diao)色，在(zai)進(jin)入另一個頁(ye)面(mian)時，紅色又作(zuo)為了主色，而(er)紫色作(zuo)為了強調(diao)(diao)色：
強(qiang)調色所(suo)用的面積比較小，只要在焦點領域運(yun)用上強(qiang)調色，其本身就有著(zhu)聚焦的作用。有時(shi)候強(qiang)調色還扮演著(zhu)襯托(tuo)色的角色。
單色配(pei)色法：同(tong)色同(tong)源
單(dan)色系配(pei)色是指網站的頁面主色只(zhi)(zhi)使用(yong)一(yi)種顏色，需要(yao)(yao)注(zhu)意的是，所謂的單(dan)色并不“單(dan)”，往(wang)往(wang)運用(yong)單(dan)色系配(pei)色方(fang)案的是配(pei)圖(tu)較多的網站，這些配(pei)圖(tu)自身已經包含著豐富的色彩(cai)，從(cong)整(zheng)(zheng)個頁面來看，色彩(cai)就并不只(zhi)(zhi)有主色一(yi)種了(le)。當配(pei)圖(tu)的色彩(cai)也參與(yu)到(dao)了(le)頁面整(zheng)(zheng)體(ti)的配(pei)色體(ti)系中，只(zhi)(zhi)需要(yao)(yao)尋(xun)找到(dao)一(yi)種與(yu)配(pei)圖(tu)都能協調的色彩(cai)作為主色，就能輕松掌握單(dan)色配(pei)色法的技巧。
頁面(mian)的主色為清爽的藍(lan)綠(lv)色，這時選擇的背景(jing)配圖是人臉眼睛的部分，攝影作(zuo)品本身帶(dai)有柔(rou)和的肉(rou)色，與藍(lan)綠(lv)色相得(de)益(yi)彰(zhang)：
單(dan)色(se)(se)扮演主(zhu)色(se)(se)的(de)同時也扮演著強調色(se)(se)，在配色(se)(se)運(yun)用中，重要(yao)的(de)組件、焦(jiao)點的(de)部分(fen)都可以運(yun)用這一(yi)色(se)(se)彩，形成(cheng)明(ming)顯的(de)視覺重點框架(jia)。而與此(ci)同時，背(bei)景(jing)色(se)(se)應該盡量保持(chi)黑白灰，不對主(zhu)色(se)(se)造成(cheng)干擾。如果想要(yao)形成(cheng)一(yi)定(ding)的(de)層次，也可以在主(zhu)色(se)(se)調之外通(tong)過降低其色(se)(se)彩飽和(he)度(du)或明(ming)度(du)等(deng)方式，形成(cheng)單(dan)色(se)(se)配色(se)(se)中色(se)(se)彩的(de)空(kong)間視覺深(shen)度(du)。
在單色(se)(se)系(xi)配(pei)色(se)(se)法中，即使屬于同(tong)一色(se)(se)系(xi)，色(se)(se)調也會有所差(cha)異，因此(ci)這也是另一種配(pei)色(se)(se)方式(shi)，運用(yong)在配(pei)圖較少(shao)，且配(pei)圖色(se)(se)彩(cai)也并(bing)不多變的情況(kuang)下(xia)。
頁(ye)面主色(se)(se)為(wei)橙(cheng)色(se)(se)，也在細微(wei)的(de)地方展示出不同(tong)調性(xing)的(de)橙(cheng)色(se)(se)，當(dang)鼠標(biao)Hover按鈕變(bian)為(wei)更為(wei)偏紅的(de)橙(cheng)。背景色(se)(se)則用(yong)了淺橙(cheng)色(se)(se)作為(wei)底色(se)(se)。這(zhe)三種色(se)(se)彩都是橙(cheng)色(se)(se)，而表現了不同(tong)的(de)色(se)(se)彩空間層次：
當網站的配(pei)圖(tu)(tu)較多，往往既要(yao)考慮配(pei)圖(tu)(tu)本身(shen)的配(pei)色(se)(se)、配(pei)圖(tu)(tu)與(yu)配(pei)圖(tu)(tu)間的配(pei)色(se)(se)、配(pei)圖(tu)(tu)色(se)(se)彩(cai)與(yu)單一主色(se)(se)間的搭配(pei)。
想要將頁面變得(de)干凈(jing)清爽除了產品縮略圖本身要維持簡潔干凈(jing)的(de)(de)(de)背景、產品拍攝的(de)(de)(de)統一(yi)協調，同時也需(xu)要考慮產品彼此的(de)(de)(de)色(se)彩呼應(ying)：
主(zhu)色(se)(se)的單一(yi)色(se)(se)調(diao)不一(yi)定(ding)用(yong)在組件上，有(you)時也采用(yong)“反(fan)白(bai)”的處(chu)理，尤其是主(zhu)色(se)(se)本身比(bi)較強烈(lie)時，填(tian)充主(zhu)色(se)(se)作(zuo)為背景(jing)，傳遞(di)出主(zhu)色(se)(se)強烈(lie)的表現效果。
頁面中的藍(lan)色作為(wei)背景色的同時陰影部分(fen)顯(xian)出(chu)了圖片內容輪廓(kuo)，制造出(chu)朦朧(long)的視感，反白的文(wen)字更易于閱(yue)讀：
還(huan)有一種更加(jia)純粹的單色調(diao)配色方(fang)式，將整個網(wang)站的配圖(tu)設定(ding)為灰度圖(tu)案(an)，讓主色在整個黑白(bai)灰的氛(fen)圍(wei)中顯得格外醒(xing)目，從而突(tu)出主題。這樣做的好處(chu)是讓畫面更加(jia)簡(jian)約、克(ke)制(zhi)，當然(ran)也就失去了(le)繽紛(fen)華麗的氛(fen)圍(wei)。
配圖(tu)為黑白灰，作為主色(se)的(de)橙紅色(se)就能從中脫穎而出。這讓每個橙紅色(se)的(de)細(xi)節元素都格外分明：
將配(pei)圖的顏色“拿掉”是相對(dui)冒險的做法，只(zhi)在一些(xie)強調圖片的個性與質(zhi)感并不急于展(zhan)示產品所有細(xi)節給(gei)用戶的網站中所用較多，品牌站里可以采用這類(lei)方式來加強品牌的感染(ran)力和形(xing)象特征。
漸變配(pei)色法(fa)：夢幻滑(hua)翔(xiang)
漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)可以視為(wei)(wei)一(yi)種(zhong)(zhong)效(xiao)果，也可以當做一(yi)個手(shou)段。漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)中(zhong)(zhong)使(shi)用的(de)(de)(de)(de)多(duo)種(zhong)(zhong)色(se)(se)(se)(se)(se)(se)彩(cai)(cai)(cai)，將它們(men)的(de)(de)(de)(de)分(fen)布呈現(xian)柔和過(guo)渡，展示出夢幻之感(gan)。一(yi)般來說，我(wo)們(men)安排的(de)(de)(de)(de)漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)色(se)(se)(se)(se)(se)(se)往(wang)往(wang)是(shi)以兩種(zhong)(zhong)色(se)(se)(se)(se)(se)(se)彩(cai)(cai)(cai)為(wei)(wei)端點，中(zhong)(zhong)間過(guo)渡為(wei)(wei)兩種(zhong)(zhong)色(se)(se)(se)(se)(se)(se)彩(cai)(cai)(cai)的(de)(de)(de)(de)滑翔地帶(dai)，其(qi)(qi)覆蓋的(de)(de)(de)(de)色(se)(se)(se)(se)(se)(se)彩(cai)(cai)(cai)范圍較廣(guang)，因此，我(wo)們(men)很難判斷(duan)其(qi)(qi)主色(se)(se)(se)(se)(se)(se)是(shi)哪一(yi)固定的(de)(de)(de)(de)色(se)(se)(se)(se)(se)(se)值。從色(se)(se)(se)(se)(se)(se)溫的(de)(de)(de)(de)角度(du)為(wei)(wei)考慮，漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)可以有(you)暖(nuan)色(se)(se)(se)(se)(se)(se)漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)、冷色(se)(se)(se)(se)(se)(se)漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)，也有(you)冷暖(nuan)過(guo)渡的(de)(de)(de)(de)漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)，而從兩端的(de)(de)(de)(de)色(se)(se)(se)(se)(se)(se)彩(cai)(cai)(cai)之間的(de)(de)(de)(de)關系，又分(fen)為(wei)(wei)鄰近色(se)(se)(se)(se)(se)(se)漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)、對比色(se)(se)(se)(se)(se)(se)漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)等。不同的(de)(de)(de)(de)色(se)(se)(se)(se)(se)(se)調漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)所呈現(xian)出的(de)(de)(de)(de)品牌氛(fen)圍各(ge)有(you)千秋。不管怎(zen)樣，在輕設計(ji)中(zhong)(zhong)，漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)的(de)(de)(de)(de)色(se)(se)(se)(se)(se)(se)彩(cai)(cai)(cai)通常(chang)集中(zhong)(zhong)在高(gao)明度(du)的(de)(de)(de)(de)色(se)(se)(se)(se)(se)(se)調范圍，讓畫面顯得更(geng)為(wei)(wei)通透(tou)柔和。漸(jian)(jian)(jian)(jian)(jian)變(bian)(bian)(bian)的(de)(de)(de)(de)色(se)(se)(se)(se)(se)(se)彩(cai)(cai)(cai)范圍也不宜太(tai)廣(guang)，色(se)(se)(se)(se)(se)(se)彩(cai)(cai)(cai)分(fen)布太(tai)大讓畫面本身容(rong)易(yi)陷入于(yu)混沌中(zhong)(zhong)。
漸變常以背(bei)景的形式出現，或運用于較大的元素之上。根(gen)據漸變色的不同，所展示的配(pei)圖以及(ji)其他組件也(ye)要根(gen)據這(zhe)一(yi)漸變色而協調。
藍與紫、紫與粉(fen)色(se)的鄰(lin)近色(se)漸變(bian)過(guo)渡有一種夢幻般(ban)的感受，白色(se)文字以及配圖甄選也(ye)都考(kao)慮到與漸變(bian)色(se)彩的協調(diao)感。色(se)彩豐富飽滿，頁面(mian)則簡潔明(ming)快：
浮動于(yu)漸(jian)(jian)變背(bei)景(jing)上方的元素色(se)彩也可以與背(bei)景(jing)形成對比，這時，漸(jian)(jian)變色(se)的范圍就要(yao)更為精準清(qing)晰，以免讓色(se)彩變“渾濁”。畢竟在(zai)輕設(she)計中，維持畫面的“澄(cheng)清(qing)”是很重要(yao)的。
利用漸(jian)變色系配色法的靈活多變，在一張大(da)型配圖上方疊加一層透明漸(jian)變，也(ye)同(tong)樣(yang)是非常流行的做法。這樣(yang)作出的效果也(ye)相當炫目耀眼，能瞬(shun)間提升攝影本身的感染(ran)力。
為了(le)讓頁面變(bian)(bian)得更為“清(qing)澈(che)”，可(ke)以采用漸變(bian)(bian)映(ying)射的方式(shi)，即只對(dui)核心焦點(dian)運用藍綠(lv)漸變(bian)(bian)，而背景色(se)依然(ran)維持簡潔的白底，這(zhe)樣的做(zuo)法更巧妙地收住了(le)漸變(bian)(bian)大面積鋪開(kai)所(suo)形成(cheng)的華麗感，而像為主角打(da)開(kai)了(le)特(te)殊的鎂光(guang)燈：
利用漸(jian)變色的(de)變化，通過切換圖片，漸(jian)變色也隨即改(gai)變。由于漸(jian)變的(de)飽(bao)和(he)度(du)較高，因此其上方(fang)的(de)元素運用白色展(zhan)示，使(shi)文字清晰可(ke)辨：
漸變色鋪排整個(ge)背景，讓(rang)頁面展示出流光(guang)溢彩的氛圍：
現實世界中，我們很難發現有一塊完全凝固不(bu)變(bian)(bian)的(de)色(se)(se)彩，比如云彩雖(sui)說是白色(se)(se)，但總是又隱(yin)隱(yin)透出藍色(se)(se)、橙色(se)(se)等(deng)不(bu)同(tong)的(de)漸(jian)變(bian)(bian)色(se)(se)，天空也并不(bu)盡然是全然相同(tong)的(de)藍，而表現出了深淺不(bu)一的(de)色(se)(se)調。我們在(zai)設計中運用到漸(jian)變(bian)(bian)色(se)(se)，也就是讓(rang)畫(hua)面還(huan)原更多的(de)真(zhen)實。
被北極光渲染的星空本身(shen)就(jiu)帶著色(se)彩的漸變流淌，照片本身(shen)的色(se)彩漸變已表(biao)現出了動態的美輪美奐。
有時候背景運用(yong)漸變(bian)(bian)的(de)同時，前景對(dui)象也運用(yong)漸變(bian)(bian)色，利用(yong)漸變(bian)(bian)色進行填充后(hou)，整個畫面(mian)充滿了未來(lai)感：
還可(ke)以將漸變(bian)色(se)運用到元素上(shang)，這時漸變(bian)色(se)就需要(yao)更加濃烈(lie)鮮明，從(cong)背(bei)景凸顯出來，形(xing)成視覺強(qiang)調。
在需要被注意(yi)的大型(xing)文(wen)字(zi)中運用鮮艷度都非常高(gao)的大紅(hong)到紫(zi)色的漸變，背景采用接近(jin)無彩(cai)的暗(an)調，讓(rang)文(wen)字(zi)更(geng)加璀璨奪目(mu)：
漸變不僅是色(se)彩上的變化，還(huan)有更多是屬(shu)于時(shi)間的變化。開發網頁(ye)設計中漸變色(se)的運用絕不僅僅止步于此。
運用(yong)漸變色增加色彩的豐富感，同時(shi)又讓畫面(mian)不至于(yu)凌亂。這在(zai)很多品牌站(zhan)中所用(yong)較(jiao)多。如果希(xi)望頁面(mian)顯得嚴肅(su)，可以限制漸變所用(yong)的范圍。總之，漸變是一種“夢幻”的手段，而絕對非目的。
多色配(pei)色法(fa)：顏色的加減乘(cheng)除
色(se)彩不(bu)僅有(you)色(se)相(xiang)，還包(bao)括飽和(he)度、明度、色(se)溫等(deng)特(te)質，與此(ci)同時(shi)，從心理層面上還會(hui)衍生出色(se)彩的重量感、遠近距離等(deng)心理感受，兩種不(bu)同的色(se)彩相(xiang)互搭配，通過彼此(ci)的比(bi)例大(da)小關系會(hui)衍生出更多復雜的影響。
雙色互補
將色(se)環上(shang)處于(yu)180°相(xiang)對而存在(zai)的(de)色(se)彩進行搭配，這(zhe)(zhe)兩種(zhong)色(se)彩在(zai)視覺(jue)(jue)上(shang)形(xing)成互補(bu)關系。我們知(zhi)道色(se)彩并(bing)不能(neng)簡(jian)單陳述為紅色(se)、藍(lan)色(se)，因(yin)此在(zai)相(xiang)對的(de)關系上(shang)也不能(neng)簡(jian)單就概(gai)括紅與藍(lan)是互補(bu)這(zhe)(zhe)樣籠統的(de)結論(lun)，因(yin)為實際上(shang)紅色(se)和藍(lan)色(se)的(de)色(se)調(diao)都高低明(ming)暗種(zhong)類繁多。而我們知(zhi)道處于(yu)相(xiang)對180°位(wei)置(zhi)的(de)一組(zu)色(se)彩其(qi)本身相(xiang)互補(bu)充又相(xiang)互制衡(heng)的(de)關系，在(zai)實際運用中會(hui)催生一種(zhong)平衡(heng)的(de)視覺(jue)(jue)滿足感。我們要(yao)做的(de)依然是從情感上(shang)而非(fei)理(li)性層面打開視覺(jue)(jue)的(de)脈輪。
互補色(se)(se)處(chu)于色(se)(se)環上兩(liang)兩(liang)相對的位置，網頁設計中通常(chang)使用其中一(yi)個色(se)(se)彩作(zuo)為主色(se)(se)或背景色(se)(se)，另一(yi)個作(zuo)為強調色(se)(se)或襯托(tuo)色(se)(se)而加以運用：
當背景色(se)為(wei)藍色(se)的(de)同時(shi)，以橙(cheng)色(se)作為(wei)強調色(se)，藍色(se)和橙(cheng)色(se)為(wei)一組互補色(se)：
雙色互(hu)補在(zai)運用面上(shang)并非對(dui)半平分，而是有(you)選擇的(de)采取一主一輔有(you)機結(jie)合的(de)方(fang)式，這(zhe)樣有(you)利(li)于(yu)突出色彩(cai)的(de)性格主題(ti)。
三色對比
處于色環上距離(li)彼(bi)此120°位(wei)置的三種色彩，兩(liang)(liang)兩(liang)(liang)之間(jian)彼(bi)此為對比色，而這三種色彩的搭(da)配也會形(xing)成(cheng)非常和諧的組合。
此(ci)外，另(ling)有一(yi)(yi)類(lei)三色(se)組合，是以(yi)其中兩種色(se)彩彼此(ci)距離60°，第三種色(se)位于它們相對180°位置上。利用(yong)前(qian)兩種色(se)彩共同的力量(liang)而和另(ling)一(yi)(yi)個色(se)彩形(xing)成相互制衡的關系，同樣能催生出另(ling)一(yi)(yi)種和諧。
三色(se)(se)(se)對比有兩(liang)種(zhong)情(qing)況，一種(zhong)是在(zai)色(se)(se)(se)環(huan)上選取彼此間隔120°的色(se)(se)(se)彩，另(ling)一種(zhong)是有某個色(se)(se)(se)彩與(yu)其(qi)他兩(liang)個色(se)(se)(se)彩保持180°相對的關系：
當然，在網頁(ye)設(she)(she)計中，挑選(xuan)三種(zhong)色(se)(se)彩(cai)運(yun)用到(dao)頁(ye)面(mian)中，要主要對(dui)配圖(tu)本身(shen)色(se)(se)彩(cai)加以控制，否則容易讓頁(ye)面(mian)顯得凌亂。尤其(qi)是(shi)輕質風格(ge)的(de)(de)設(she)(she)計中，色(se)(se)彩(cai)盡量予(yu)以控制在三種(zhong)以內，如果要選(xuan)擇這類配色(se)(se)法，應該盡量選(xuan)擇明(ming)度(du)較高(gao)、飽和度(du)較低的(de)(de)色(se)(se)彩(cai)，沖淡色(se)(se)彩(cai)彼此的(de)(de)強烈沖擊。最好的(de)(de)辦法仍然是(shi)以某一個色(se)(se)彩(cai)作為(wei)主色(se)(se)，其(qi)他兩種(zhong)色(se)(se)彩(cai)起強調、對(dui)比的(de)(de)作用。
網(wang)頁設計選用藍色(se)、紫(zi)紅和粉紅的(de)(de)三(san)色(se)搭配，運用了(le)三(san)色(se)對比(bi)，看上去(qu)色(se)彩(cai)協調、活潑。網(wang)頁所采用的(de)(de)插畫配圖也遵循總的(de)(de)配色(se)規律，保持了(le)頁面配色(se)風格(ge)的(de)(de)統一性：
沒有(you)運用(yong)配圖的時候，整(zheng)個(ge)頁面回(hui)歸(gui)到極簡的狀態，這時運用(yong)純色對比，就是運用(yong)色彩本身的魅(mei)力來感染用(yong)戶。可(ke)以說，這樣的配色方式(shi)比較安全，讓審美變得(de)更(geng)加(jia)純粹(cui)。
頁面被(bei)三(san)種(zhong)色彩(cai)均等(deng)分布，呈現出非常(chang)嚴格(ge)的平衡(heng)感：
就像我們曾(ceng)經說(shuo)過(guo)，對單(dan)個(ge)頁面來說(shuo)，網(wang)頁設計會(hui)有個(ge)全局(ju)的(de)(de)(de)概念。有時候(hou)，網(wang)頁中一個(ge)頁面，或者一屏就可(ke)(ke)以(yi)被看作一件平面作品。所(suo)謂“三(san)(san)色(se)”可(ke)(ke)以(yi)是從整個(ge)網(wang)頁出(chu)發(fa)，也可(ke)(ke)以(yi)是從一個(ge)屏幕上來看。即使我們發(fa)現有的(de)(de)(de)網(wang)頁運用(yong)了不止(zhi)三(san)(san)種顏色(se)，但在一個(ge)屏幕中所(suo)出(chu)現色(se)彩仍(reng)然控制在了三(san)(san)色(se)對比的(de)(de)(de)狀(zhuang)態。網(wang)頁的(de)(de)(de)動態效果更是為(wei)配色(se)的(de)(de)(de)多變性增加了更多的(de)(de)(de)靈動空(kong)間。
為了(le)(le)體現出(chu)嬰兒系列產(chan)品(pin)品(pin)牌(pai)的(de)(de)活潑(po)童(tong)趣，運用(yong)多(duo)種色(se)(se)(se)彩(cai)可以表現出(chu)五彩(cai)繽紛，而選(xuan)用(yong)粉嫩的(de)(de)色(se)(se)(se)調則強(qiang)調了(le)(le)初生(sheng)嬰兒的(de)(de)柔和(he)感(gan)。頁面(mian)(mian)選(xuan)用(yong)了(le)(le)藍(lan)色(se)(se)(se)、紫色(se)(se)(se)、綠色(se)(se)(se)等(deng)色(se)(se)(se)彩(cai)作三色(se)(se)(se)調和(he)，往下(xia)拖動時，粉紅(hong)色(se)(se)(se)的(de)(de)出(chu)現讓(rang)頁面(mian)(mian)轉(zhuan)向了(le)(le)更加溫柔的(de)(de)氛圍，卻又與原有色(se)(se)(se)彩(cai)無沖(chong)突：
一屏一色
我們從(cong)一(yi)個(ge)(ge)屏幕的視覺出(chu)發，而非從(cong)全局來看，一(yi)個(ge)(ge)屏幕運用一(yi)個(ge)(ge)單色(se)(se)進行(xing)搭(da)配，是行(xing)之有(you)效的極簡(jian)風(feng)格配色(se)(se)法。它很好的解(jie)決了(le)色(se)(se)彩(cai)(cai)單一(yi)的問題，與此同時，整個(ge)(ge)網頁依然保有(you)豐(feng)富多彩(cai)(cai)的色(se)(se)彩(cai)(cai)印象。這類配色(se)(se)技巧在許多展示類的網頁中常見。
每一個頁(ye)面(mian)只運用一種主色(se)，雖然整個頁(ye)面(mian)由(you)多色(se)組成(cheng)，但色(se)彩(cai)與色(se)彩(cai)之(zhi)間呈現出(chu)了豐富的動態的和諧(xie)關系：
每一屏運用不同的背(bei)景色(se)，配圖以及網頁元素的色(se)彩，比如橙色(se)的按鈕和配圖與背(bei)景色(se)相協調：
網頁(ye)中的(de)(de)頁(ye)面(mian)切(qie)換也非常靈活，可以通過鼠標滾動實(shi)現(xian)，還能通過切(qie)換按(an)鈕切(qie)換主題畫面(mian)，也能達到一(yi)屏一(yi)色的(de)(de)目的(de)(de)。
EXTET.R的(de)首頁設計非常巧妙地(di)安排了一個(ge)類似時(shi)鐘一樣的(de)圓(yuan)形滾動播放主(zhu)屏畫(hua)面，畫(hua)面采(cai)用不同(tong)的(de)背景色和不同(tong)的(de)展(zhan)示(shi)主(zhu)題。造型別致(zhi)新穎：
大(da)多時候(hou)，多色配(pei)色時所(suo)選用的(de)配(pei)圖應該盡量(liang)保持不驚擾(rao)原有配(pei)色的(de)氛圍，或根據配(pei)圖來決定網頁的(de)配(pei)色方案。
顏色(se)(se)與(yu)顏色(se)(se)搭配絕不(bu)(bu)是(shi)簡單(dan)相加(jia)，而是(shi)運用(yong)色(se)(se)彩的(de)特性(xing)，作(zuo)出更加(jia)豐富的(de)加(jia)減乘除(chu)，其結果不(bu)(bu)是(shi)得到另一(yi)(yi)個單(dan)一(yi)(yi)的(de)色(se)(se)彩感受，而是(shi)綜合其上的(de)視覺效果和情感體驗。與(yu)其說色(se)(se)彩像幻術一(yi)(yi)樣(yang)無法抓取，不(bu)(bu)如說對于配色(se)(se)，忘掉條(tiao)(tiao)條(tiao)(tiao)框框的(de)理性(xing)分(fen)析，或許能(neng)得到更多。
版權(quan)說明：本文節(jie)選自《輕設(she)(she)計——網(wang)頁設(she)(she)計中的輕奢主(zhu)義與(yu)禪意(yi)思維》
蘇公網安備32030302000492號
