頁面設(shè)計(jì)的色彩理論
上傳日期：2016年11月11日 瀏覽次數(shù):521次
我們?cè)谠O(shè)計(jì)的運(yùn)用上重點(diǎn)在于創(chuàng)造一個(gè)沒有過的形態(tài)，把形體潤(rùn)飾得協(xié)調(diào)美觀，它受社會(huì)的制約，重視地方特征。為了在設(shè)計(jì)中有效的使用色彩我們必須掌握一些色彩的基礎(chǔ)理論知識(shí)，結(jié)合自己的實(shí)際經(jīng)驗(yàn)，來營(yíng)造我們的作品。同一色彩有數(shù)之不盡的應(yīng)用方法，并沒有非常機(jī)械的色彩調(diào)和的法則，在一定的原則下靠我們自己的眼睛和審美觀點(diǎn)來做出選擇。
色彩構(gòu)成(Interaction of color)，可以理解為色彩的作用，是在色彩科學(xué)體系的基礎(chǔ)上，研究符合人們知覺和心理原則的配色。配色有三類要素：光學(xué)要素(明度、色相、純度)，存在條件(面積、形狀、肌理、位置)，心理因素(冷暖、進(jìn)退、輕重、軟硬、樸素華麗)，設(shè)計(jì)的時(shí)候運(yùn)用邏輯思維選擇合適的色彩搭配，產(chǎn)生恰當(dāng)?shù)纳蕵?gòu)成。最優(yōu)秀的配色范本是自然界里的配色，我們觀察自然界里的配色，通過理性的提煉最終獲得我們所需要的東西。
色彩構(gòu)成并非是只能意會(huì)不能言傳的東西，它是有自己一套相關(guān)理論的，詳細(xì)的目前國內(nèi)相關(guān)書籍有《色彩設(shè)計(jì)大全》(日本色彩設(shè)計(jì)中心編)，值得一看。說到色彩，不能不提到色立體，標(biāo)準(zhǔn)的色彩設(shè)計(jì)的定義顏色可以這樣表示(括號(hào)內(nèi)是window的顏色名稱)：h色相(色調(diào)) S:純度(飽和度) B:明度(亮度)，把這三個(gè)要素作成立體坐標(biāo)，就構(gòu)成色立體。
目前比較通用的色立體有三種：孟賽爾立體、奧斯特瓦德色立體、日本研究所的色立體，它們中應(yīng)用的最廣泛的是蒙塞爾色立體，我們所用的圖象編輯軟件顏色處理部分大多源自孟賽爾色立體的標(biāo)準(zhǔn)。下面我們簡(jiǎn)單的介紹孟塞爾色立體的表色系，它根我們的設(shè)計(jì)工作最為相關(guān)。
色立體構(gòu)架示意
色相：在從紅到紫的光譜中，等間的選擇5個(gè)色，即紅(R)、黃(Y)、藍(lán)(B)、紫(P)。相鄰的兩個(gè)色相互混合又得到：橙(YR)、黃綠(GY)、藍(lán)綠(BG)、藍(lán)紫(PB)、紫紅(RP)，從而構(gòu)成一個(gè)首位相交的環(huán)，被稱為孟賽爾色相環(huán).
孟賽爾色相環(huán)
明度：從黑到白中間增加9個(gè)均勻過渡的灰度階段，被稱為明度尺。
純度：在同等明度的條件下，從灰色到純色的變化。
色彩調(diào)和與色彩感覺
色彩調(diào)和是一個(gè)很復(fù)雜的問題，它還包括視覺的心理平衡，人們視覺習(xí)慣，社會(huì)因素等。各個(gè)領(lǐng)域根據(jù)自己行業(yè)經(jīng)驗(yàn)都有自己的色彩調(diào)和理論，不同行業(yè)之間的色彩調(diào)和理論是不同的。我們可以這樣來定義色彩調(diào)和：使對(duì)比的色彩成為不帶尖銳刺激的協(xié)調(diào)統(tǒng)一的組合，它的總體效果總是要與視覺心理相適應(yīng)，能滿足視覺的心理平衡，它不單單只是色與色之間的組合問題，還與面積，形狀，等色彩賦予對(duì)象有關(guān)。
色彩調(diào)和受有時(shí)間、區(qū)域和欣賞習(xí)慣有關(guān)。目前比較通用的色彩調(diào)和方式有2種：1、共性調(diào)和，2、面積調(diào)和，我們分開來討論這兩個(gè)方式在頁面中的應(yīng)用。
共性調(diào)和有三種不同的形式：
1、明度對(duì)比調(diào)和與色彩調(diào)和感覺;去除明度尺的上下兩端白(10)和黑(0)，其余9個(gè)階段分成三個(gè)基調(diào)(1)、(2)、(3)低明度基調(diào);(4)、(5)、(6)中明度基調(diào);(7)、(8)、(9)高明度基調(diào)。
2-3種顏色，明度配色應(yīng)用：第一個(gè)字指明度的主調(diào)，顏色必須占構(gòu)圖的1/2以上(這一點(diǎn)在Web界面設(shè)計(jì)中有點(diǎn)特殊，主調(diào)的面積是一種視覺感覺上的面積，而不是實(shí)際的頁面面積。)，屬于支配地位。
高長(zhǎng)調(diào)：(8)、(9)、(1)明快;
高短調(diào)：(8)、(9)、(5)輕柔;
中長(zhǎng)調(diào)：(5)、(9)、(1)強(qiáng)壯;
中短調(diào)：(5)、(7)、(3)沉悶;
低長(zhǎng)調(diào)：(2)、(9)、(1)威嚴(yán);
低短調(diào)：(2)、(5)、(1)憂郁;
中高短調(diào)：(5)、(9)、(7)希望;
中低短調(diào)：(5)、(3)、(1)低沉;
多種顏色連續(xù)對(duì)比的調(diào)式：不強(qiáng)調(diào)面積比，容易造成節(jié)奏。
高1/2明度列(5)以上，晨曦、朦朧;
低1/2明度列(5)以下，苦悶;
高3/4明度列(3)-(10)激昂、奮進(jìn);
低3/4明度列(0)-(7)雄渾、有力;
全明度列(0)-(10)豐富、跳躍
明度的對(duì)比配色在頁面中我們可以經(jīng)常看到，我們來看看下面的頁面，如下圖中這個(gè)頁面給人什么感覺呢，明快，和諧。
主基調(diào)：■ #9CCE00 H：75 S：100 B：81 (8)
明度列：本出應(yīng)用了多種明度色彩，(*表現(xiàn)出這樣的感覺實(shí)際上還有其他方面的原因，我們這里只討論明度的原因)仔細(xì)觀察我們可以發(fā)現(xiàn)明度都在81-98之間，把一些小的差距忽略不計(jì)我們可以把它視為 (8)、(9)、(1)。那么在上表中我們可以找到：高長(zhǎng)調(diào)：(8)、(9)、(1)明快，從上面列舉的例子可以很明顯的看出明度對(duì)比在頁面設(shè)計(jì)中的應(yīng)用。留心觀察，我們可以發(fā)現(xiàn)很多類似的例子，只是很多明度對(duì)比中還參雜著其他的因素不易察覺而已。
在設(shè)計(jì)網(wǎng)頁界面時(shí)，明度對(duì)比調(diào)和在很多情況下是不單獨(dú)存在的，它往往需要結(jié)合其他的調(diào)和方式，作為一種輔助的調(diào)和方式存在，單獨(dú)的明度對(duì)比調(diào)和的頁面它有一個(gè)很顯著的缺點(diǎn)，就是畫面沉悶。如果以明度對(duì)比調(diào)和作為主要調(diào)和方式的頁面需要在其他的輔助色的用色上多多考慮，如果輔助色能打破沉悶的感覺那么效果還是比較理想的。
明度對(duì)比調(diào)和的掌握，在最初我們可以做一些類似的明度對(duì)比的練習(xí)。在藝術(shù)教育課程里一般都采用水粉來繪制，其實(shí)同樣也可以用電腦來練習(xí)，培養(yǎng)色彩感覺。當(dāng)有一定基礎(chǔ)后結(jié)合其他構(gòu)成來練習(xí)。
色相對(duì)比調(diào)和與色彩調(diào)和感覺;色相對(duì)比以孟賽爾色相環(huán)為主。
兩個(gè)色相對(duì)比調(diào)和的取色方法和相應(yīng)的色彩感覺：
h : h 和諧，統(tǒng)一。
h : (h±1°;～30°;)類似，活潑。
h : (h±30°;~60°;)準(zhǔn)對(duì)比，生動(dòng)。
h : (h±120°;~150°;)對(duì)比，強(qiáng)烈。
h : (h±180°;)補(bǔ)色，刺激
在實(shí)際應(yīng)用的時(shí)候注意明度變化和兩個(gè)色彩的主次位置。還有的說法是把孟賽爾色相環(huán)已有的十個(gè)色相的基礎(chǔ)上平分為100份，那么在色環(huán)上就是100等分，用色環(huán)的間隔數(shù)來表示，本人認(rèn)為用角度的算法比較準(zhǔn)確。
多個(gè)色相對(duì)比調(diào)和的取色方法和相應(yīng)的色彩感覺：
色相環(huán)120度以內(nèi)：等差取色，如：n : (n+12) : (n+24) : (n+36);等比，如：n : (n+13) : (n+25) : (n+37)。現(xiàn)代感強(qiáng)等。
色相環(huán)180度以內(nèi)：等差取色，如：n : (n+20) : (n+40) : (n+60);等比，如：n : (n+20) : (n+50)。強(qiáng)烈。
色相環(huán)380度以內(nèi)：等差取色，如：n : (n+30) : (n+60);等比，如：n : (n+10) : (n+27.5) : (n+57.5)。刺激。
兩個(gè)同一色對(duì)比調(diào)和
主基調(diào)：■ # FF7318 H：24 S：91 B：100
■ # FF6300 H：24 S：100 B：100
兩個(gè)類似色對(duì)比調(diào)和
主基調(diào)：■ # FFCE00 H：48 S：100 B：100
■ #FFA000 H：38 S：100 B：100
兩個(gè)補(bǔ)色對(duì)比調(diào)和
主基調(diào)：■ # FFCE00 H：48 S：100 B：100
■ # 4273A5 H：210 S：60 B：60
多個(gè)色相對(duì)比調(diào)和
主基調(diào)：■ # 945A18 H：32 S：84 B：58
■ # 5A2F00 H：31 S：100 B：35
■ # 633100 H：30 S：100 B：39
■ # 401F00 H：29 S：100 B：25
色相對(duì)比調(diào)和只是幫助你最快的找到相匹配的顏色區(qū)域，最后效果還是要靠自己的顏色直覺。
轉(zhuǎn)載：互聯(lián)網(wǎng)
