配色方法，三種UI的選擇配色方法(4)

方法一:色輪配色

色輪由 12 種基本的顏色組成。

首先包含的是三原色（ Primary colors ），即藍、黃、紅。

原色混合產生了二次色（ Secondary colors ），用二次色混合，產生了三次色（ tertiary colors ）。

色輪有五個同心環(huán)組成，從暗到亮-暗色處于大環(huán)，明色處于小環(huán)，而中間是顏色的基本色相。

根據(jù)顏色的關系有以下幾種配色分類

a、單色配色

單色搭配就是以一個顏色為主，然后利用顏色的深淺來進行搭配的方法，即色輪中，一種色相的暗、中、明三種色調，單一顏色是比較單調，所以利用顏色的深淺變化來增加多彩性。

優(yōu)點：畫面統(tǒng)一，搭配時相對簡單而且一般都不會給人難看的感覺，一般不會給人難看的感覺。

案例:

b、鄰近色配色

在色相環(huán)上相鄰的色彩互為鄰近色

優(yōu)點 : 色調統(tǒng)一,具有低對比度的和諧美感。這種顏色搭配產生了一種令人悅目、低對比度的和諧美感。類比色非常豐富，在設計時應用這種搭配同樣讓你輕易產生不錯的視覺效果。

案例:

c、互補色和對比色配色

互補色是在色相環(huán)上180°相對的兩個顏色，而對比色則是在色相環(huán)上150°到180°范圍內相對的兩個顏色。

優(yōu)點：補色和對比色形成強列的對比效果，傳達出活力、能量、興奮等意義。補色要達到最佳的效果，最好是其中一種面積比較小，另一種比較大。比如在一個藍色的區(qū)域里搭配橙色的小圓點。

案例:

d、分裂補色配色

如果我們同時用補色及類比色的方法來確定的顏色關系，就稱為分裂補色。

優(yōu)點：這種顏色搭配既具有類比色的低對比度的美感，又具有補色的力量感。形成了一種既和諧又有重點的顏色關系。如在上面三種顏色中，紅色就顯得更加突出。

案例:

e、原色搭配配色

除了在一些兒童的產品中，三原色同時使用是比較少見的。但是，無論是在中國還是在美國的文化中，紅黃搭配都是非常受歡迎。紅黃搭配應用的范圍很廣――從快餐店到加油站，我們都可以看見這兩種顏色同時在一起。

藍紅搭配也很常見，但只有當兩者的區(qū)域是分離時，才會顯得吸引人，如果是緊鄰在一起，則會產生沖突感。

案例:

f、二次色搭配

二次色之間都擁有一種共同的顏色――其中兩種共同擁有藍色，兩種共同擁有黃色，兩種共同擁有紅色,所以它們輕易能夠形成協(xié)調的搭配。

優(yōu)點：如果三種二次色同時使用，則顯得很舒適、吸引，并具有豐富的色調。它們同時具有的顏色深度及廣度，這一點在其它顏色關系上很難找到。

案例:

方法二: 疊柔配色法

這個方法，看起來復雜，但用起來很簡單。

主要分三個步驟

1、任意選擇一個白色或黑色 , 或黑白漸變（可以是點、線、面…甚至字體）

2、 然后混合模式選擇疊加或柔光

3、 調整透明度（1%-100%隨意，省心的做法是直接鍵入一個整數(shù)值，比如：輕質感類頁面可以選20%-40%，重質感感類可以鍵入60%或以上）

如下圖（將色塊使用“柔光”混合模式,調整不一樣的數(shù)值得到不同的效果）

同樣的方法：界面中的字體顏色、細節(jié)線條、按鈕漸變、邊角高光、描邊陰影……都可以用這樣的方法取色使用這個方法的優(yōu)點是:色彩獲得比較簡單 , 無需了解色彩的指數(shù)和直方圖 , 不用看色輪.....只需要設計師具備色彩的審美 , 能夠合理的應用。

方法三: 色彩提取法

這個方法是從現(xiàn)有的自然色、圖片色中提取所要的顏色，給應用和搭配贏得了不少的時間。

1、找圖

找一張符合所要設計界面風格的圖(本教程用圖為Galaxy S4自帶壁紙）

2、提取顏色

將圖片放入PS中，點擊“存儲web所有格式”（Windows快捷鍵為Ctrl+shift+Alt+s）,格式選擇png，色塊選擇8。

在顏色顯示區(qū)域會留下8種顏色，點擊顏色區(qū)域右側下拉按鈕，會找到“存儲顏色表”，把他存儲到桌面上或者你容易找到的地方。然后用PS打開，色板中會顯示剛才提取到的顏色。

成功提取出8種顏色

3、應用

具體的顏色應用為：

1、導航文字及l(fā)ogo的顏色為最淺的藍色；

2、Banner區(qū)域既大背景，這里用了開始的圖片。上面的大標題logo則用了最深的藍色；

3、內容區(qū)域出現(xiàn)的提取到的三個色相的色彩，如果只是排列剩下的幾個顏色的話，顏色會很沖，所以用了幾張圖片來過度顏色調整畫面的節(jié)奏。現(xiàn)在看來效果還不錯，內容區(qū)域的文字顏色與導航文字一致，都是最淺的藍色；

4、內容區(qū)域的幾個按鈕并沒有用提取的顏色，而是用白色疊加然后調整透明度出來的。

總結 : 以上的三種配色方法思路是完全不一樣的，希望多多少少能帶給大家一些收獲。在學習新的方法的同時，也要學會舉一反三，結合自己已有的經驗和設計師獨有的對色彩的感覺，形成一套屬于自己的配色方法。