零基礎(chǔ)！為新手量身打造的安全配色指南

今天對(duì)一些配色技巧和方法做一個(gè)分享和總結(jié)，無(wú)論你有美術(shù)基礎(chǔ)/色彩基礎(chǔ)還是零基礎(chǔ)，都可以使用此方法創(chuàng)造出安全的配色方案。

所謂安全配色，就是遵循一些設(shè)計(jì)規(guī)范，色彩規(guī)范，適應(yīng)于Web和其它方面的UI設(shè)計(jì)，在這些色彩的基礎(chǔ)上，只要能控制好比例，就可以大膽的配色，無(wú)需參考，無(wú)需臨摹，無(wú)需借鑒。一種感性的安全配色，一種符合標(biāo)準(zhǔn)的安全配色。

這次分享介入了一些自己學(xué)習(xí)過(guò)總結(jié)過(guò)的色彩理論，當(dāng)然如果同學(xué)們能夠?qū)W習(xí)鞏固好自己的色彩理論，扎實(shí)好自己的美術(shù)功底，對(duì)玩轉(zhuǎn)色彩是非常有好處的哦。本文章由沒(méi)位道博主@Chuckie-Chang 分享整理, 歡迎大家交流。

學(xué)習(xí)配色的3種方法

學(xué)習(xí)方法 1: 顏料涂鴉

買一點(diǎn)顏料，水彩，水粉，丙烯都可以，學(xué)習(xí)一點(diǎn)點(diǎn)色彩的基礎(chǔ)知識(shí)，然后使用各種顏料大膽的調(diào)色，你會(huì)發(fā)現(xiàn)，原來(lái)色彩與色彩之間很神奇，又那么好玩，何為優(yōu)秀?無(wú)需去考慮，跟著自己的喜好走，亂涂亂畫(huà)，使用顏料大膽調(diào)和。

學(xué)習(xí)方法 2：觀察生活

比如我們的木質(zhì)桌子，它由那些相似的棕色組成?雜點(diǎn)，灰塵，晚上使用臺(tái)燈或者白天的自然光下，桌子的顏色的飽和度，明暗度會(huì)有什么改變。再如外面的大樹(shù)，不同的時(shí)間，它的陰影的長(zhǎng)短，深淺，角度，有什么不同，不同植物的綠色有什么樣的差別，多看看，多拍拍，你會(huì)有很多色彩的感覺(jué)。

學(xué)習(xí)方法 3：玩轉(zhuǎn)軟件

比如使用Photoshop CS以上的插件Adobe Kuler, CC2015版本是Adobe Color Themes. 觀察他們的色彩模式，色環(huán)角度，顏色位置，也能大幅度找到很多色彩感覺(jué)。

要零配色，不經(jīng)過(guò)任何參考創(chuàng)造UI界面設(shè)計(jì)的安全配色方案，我們可以通過(guò)四個(gè)階段來(lái)訓(xùn)練，來(lái)學(xué)習(xí)。

第一階段，色彩知識(shí)理解

熟悉一下基本的『常用的色彩常識(shí)』，快速熟悉，你可以不去記憶概念，術(shù)語(yǔ)解釋，只需要看圖即可!!!當(dāng)然如果你學(xué)習(xí)精神可佳，自己去學(xué)習(xí)了解下術(shù)語(yǔ)概念啦。

(這一階段的圖片多出自互聯(lián)網(wǎng)，自己用過(guò)的一些配色軟件截圖，其它美術(shù)書(shū)籍，都是些比較常見(jiàn)的圖片，這里我根據(jù)自己學(xué)習(xí)理解程度，根據(jù)自己的喜好做了一定的篩選整理)

如果要對(duì)色彩把控準(zhǔn)確一些，多一些感覺(jué)，我們可以學(xué)習(xí)一些常用的色彩知識(shí)，當(dāng)然一些不是怎么用的了解一下，我這里也不列出來(lái)，下面是我自己常用的一些色彩知識(shí)。

(至于很多色彩術(shù)語(yǔ)的準(zhǔn)確，詳細(xì)的解釋，我就不重復(fù)寫(xiě)出來(lái)啦，想了解的自己去百度百科或者買點(diǎn)美術(shù)書(shū)籍學(xué)習(xí)一下，這里我主要是直觀的觀察色彩，使用感覺(jué)去了解基本的色彩原理)：

1. 色環(huán)、色相、明度、對(duì)比色、冷暖色

直接看這種圖，大概你就懂這些色彩術(shù)語(yǔ)指什么了

2. 三原色

三原色分為兩種：

a)光源、顯示屏：紅綠藍(lán)(RGB)，設(shè)計(jì)常用。

b)顏料、油漆桶、美術(shù)：紅黃藍(lán)。

3. 無(wú)色系

說(shuō)簡(jiǎn)單點(diǎn)，黑白灰，現(xiàn)實(shí)生活中，無(wú)色系色彩是相當(dāng)多的。

4. 類比色，相似色

直接看圖，色環(huán)中的角度，一目了然。

5. 互補(bǔ)色，對(duì)比色

直接看圖，180度對(duì)角線即是。

6. 單色

某個(gè)色彩的『明度』變化即是。

7. 分裂補(bǔ)色(同時(shí)用補(bǔ)色及類比色的方法來(lái)確定的顏色關(guān)系)

稍微有點(diǎn)復(fù)雜的色彩關(guān)系，但是也蠻常用的：

8. 二次色(三位一體)

像不像個(gè)魔法陣，可以旋轉(zhuǎn)取色哦。

9. CMYK

CMY是3種印刷油墨名稱的首字母：青色Cyan、品紅色Magenta、黃色Yellow。而K取的是Black最后一個(gè)字母，之所以不取首字母，是為了避免與藍(lán)色(Blue)混淆。

常用的印刷色，了解一下，做UI我就不怎么考慮這個(gè)啦。

10. 色彩心理學(xué)

這個(gè)是我自己看了美國(guó)視覺(jué)設(shè)計(jì)教材后摘下的，也就是大家常說(shuō)的色彩的內(nèi)涵，色彩傳達(dá)的意義。

11. 偏色調(diào)整

當(dāng)你使用顏料玩色彩的時(shí)候就比較常用啦，如果用Photoshop 去玩的話，那是可以反悔的。

偏黃：減黃

偏紅、品：加青(紅色的補(bǔ)色)、減品

偏紫：(多大量藍(lán)，少量紅)加黃，減品

偏綠：加品

第二階段，配色軟件運(yùn)用

快速了解了上面常用的一些色彩知識(shí)后，就可以使用軟件進(jìn)行配色啦，這里我就歸納整理了一些方法，大家可以做參考，由于每個(gè)人的配色習(xí)慣不同，僅作參考。

(這一階段的圖片是自己親自實(shí)操截圖的)

1. 馬賽克配色法

這種方法非常簡(jiǎn)單，不需要使用軟件搭建色彩關(guān)系，隨便選一張圖片，建議『風(fēng)景照』，因?yàn)榇笞匀坏纳适亲詈椭C的，最安全的，不建議使用別人的插畫(huà)或者設(shè)計(jì)作品來(lái)馬賽克。

a)首先要想想自己做的設(shè)計(jì)的目標(biāo)是什么?我是要做個(gè)人網(wǎng)站?還是要做萬(wàn)圣節(jié)UI?還是要做企業(yè)產(chǎn)品站?還是要做女生主題?還是…….

b)然后根據(jù)你了解的色彩心理學(xué)，如果是要做女生使用的UI，那我們可以使用粉紅，紫色等等女生會(huì)喜歡的鮮艷的色彩，那我們嘗試找一張『秋天，落葉，唯美』風(fēng)景照

下圖是我直接百度找的，小圖大圖有水印無(wú)水印無(wú)所謂，我們不拿來(lái)商用，我們只是拿來(lái)『馬賽克』，不會(huì)侵犯版權(quán)，沒(méi)事。

c)然后使用Photoshop把它馬賽克了，濾鏡下的馬賽克，記得要大大的碼。

做到以下的效果：

d)好了，配色方案已經(jīng)出來(lái)了，很安全，你還要怎樣?如果你嫌棄這個(gè)顏色，要調(diào)整，圖層建立一個(gè)飽和度調(diào)節(jié)層即可，方便快速。

根據(jù)需要調(diào)整即可，我箭頭標(biāo)注的都是安全的色彩哦，自己也可以篩選一些。

2. Photoshop 插件法(Adobe Kuler, Adobe Color Themes)

這種方法直接使用高版本的Photoshop配色插件即可，默認(rèn)都自帶，CS6至以上的版本都默認(rèn)自帶了其中一種。

a)比如我要設(shè)計(jì)一個(gè)圣誕節(jié)的網(wǎng)站，圣誕節(jié)有糖果，有圣誕樹(shù)，那我就需要定義一個(gè)『核心色』，綠色或者紅色，圣誕樹(shù)或者圣誕帽的顏色。

然后我就可以直接使用軟件大膽建立配色方案啦。

這里我選擇『綠色』，我不用在意我的綠色的飽和度明度是怎樣選擇的，我只要根據(jù)自己的感覺(jué)，先選擇一個(gè)綠色就行。

好，就它了，選擇了很亮的綠色，也不算自然綠。

b)然后把工具欄的背景色設(shè)置成這個(gè)色，方便我們直接在插件中調(diào)用。

c)打開(kāi)插件，把我們的背景色應(yīng)用到插件的『基礎(chǔ)色 base color』中, 點(diǎn)擊箭頭所示按鈕即可

選擇色彩的搭配方式，依次是：相似色、單色、二次色(三位一體色組合)、互補(bǔ)色(對(duì)比色)、復(fù)合色、暗色(陰影色)、自定義。

選擇后，你可以拖動(dòng)色彩的控制點(diǎn)變換，確定后點(diǎn)擊如圖的按鈕即可添加到色板中使用

色板如下：

好啦，配色方案已出，如果你需要，可以增加對(duì)比色，我自己常用的3種色彩搭配模式是：相似色，單色，對(duì)比色(適當(dāng))

在你正式設(shè)計(jì)web或者APP的界面的時(shí)候，你就要控制好顏色的比例，這個(gè)需要長(zhǎng)期積累，但是大家只要記住，對(duì)比色適當(dāng)，特殊的一些風(fēng)格可以用到1/2，但是大部分時(shí)候?qū)Ρ壬颊忌贁?shù)，單色鋪大色。

第三階段，色彩記憶感

熟悉web設(shè)計(jì)中的常用配色，甚至可以多記憶，培養(yǎng)一種下意識(shí)的色彩感覺(jué)，記憶常用的色彩的英文名稱和中文名稱。

(下圖是引用了美國(guó)網(wǎng)頁(yè)設(shè)計(jì)規(guī)范中的視覺(jué)某部分，由于Web規(guī)范顏色有上百種，我們不可能一一記住，我們只需要熟悉這幾種常用的色彩，有一個(gè)感覺(jué)，背景色和文字色，那我們?cè)谂渖臅r(shí)候也可以直接引用，我們只要記住了這些常用色在色板中的位置，它的明度和飽和度的差異，那我們很容易直接調(diào)用它們。)

常用背景顏色

常用文字顏色

第四階段，高質(zhì)量色彩資源探索學(xué)習(xí)

學(xué)習(xí)譬如Google design中的Color，Material design等新玩意兒，學(xué)習(xí)新的色彩思維和創(chuàng)意方法。

Google.com/design

(下圖是網(wǎng)站截圖)

好啦，通過(guò)以上4各階段的學(xué)習(xí)，或者一般情況學(xué)習(xí)到第二個(gè)階段，你就可以運(yùn)用軟件安全的創(chuàng)造一套配色方案。不需要太深的色彩基礎(chǔ)。

如果你確實(shí)很懶，沒(méi)關(guān)系，只要掌握了第二階段的軟件配色方法，就OK，當(dāng)然色彩的比例要自己多練習(xí)多把控了，并不是說(shuō)你創(chuàng)造了配色方案就能做出漂亮的作品。這就需要我們掌握以下色彩比例控制!!