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