2019-1-25 資深UI設(shè)計者
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里
其實根據(jù)我的從業(yè)經(jīng)驗來看，如果想真正的了解色彩，就需要一套非常完整、系統(tǒng)的訓(xùn)練方法?？赡芎芏嗳税ㄎ易约海婚_始都對這些訓(xùn)練不以為意，認(rèn)為直接學(xué)習(xí)配色理論或方法不是更好么？為什么還要做這些色彩訓(xùn)練呢？認(rèn)為這些訓(xùn)練沒有意義，甚至有的人會覺得是小孩玩的游戲。
但殊不知其實我們每個人的色感，正是在兒童時期形成的，因為兒童時期的認(rèn)知更加純粹，對于色彩的想象力以及受到的限制要比成人少得多，所以賦予色彩的深度和廣度也就比成年人更加豐富。
這也是為什么很多人看到小朋友的繪畫，會覺得他們很有配色天賦了。
所以我們要做的就是打破對色彩的固有認(rèn)知，讓自己回歸到一種單純的狀態(tài)，來重新認(rèn)識色彩。
比如現(xiàn)在給你一個蘋果，可能我們的第一反應(yīng)就是直接把它吃了，事后要你回憶對蘋果這個物體的印象，也許你體會的并不深刻。
而如果我們改變條件，假設(shè)你從未見過蘋果，這一次你不僅要吃掉蘋果，還要說出你的感受。
根據(jù)你的五官對其進行認(rèn)知，這時你對蘋果的體會將和前一次大不相同。
比如通過視覺我們可以看到綠色，通過嗅覺可以聞到果香，通過觸覺可以感受到堅硬，通過味覺可以品嘗到酸甜，通過聽覺可以聽到清脆聲。
而重新認(rèn)識色彩也是同樣的道理，就像我們從未見過蘋果一樣去體驗一個假設(shè)我們從未見過的色彩，然后通過不同的角度去對色彩進行拆解，最后組合在一起形成屬于我們自己的配色體系。
創(chuàng)建個人色彩體系的第一步，就是為色彩命名。
比如我們隨便找一個顏色，就拿這個黃色來舉例。
根據(jù)自己對這個色彩的感覺來命名，可以隨意發(fā)揮，你想到什么就可以說什么，沒有限制。
比如從最基本的色相角度出發(fā)，我們可以叫它鮮黃色。
根據(jù)這個顏色我們可以聯(lián)想到向日葵，所以也可以命名為向日葵。
我們還可以聯(lián)想到月亮，所以也可以起名叫月亮黃。
那我們還可以聯(lián)想到《變形金剛》里的大黃蜂，所以也可以給這個顏色起名叫做大黃蜂。
還能聯(lián)想到麥當(dāng)勞的陽光橙，所以也可以命名為陽光橙?？傊?dāng)你看到這個顏色時，腦海中能夠聯(lián)想到的詞匯都可以使用，哪怕是跟這個顏色相差很多也沒關(guān)系，最重要的是你自己的感受。
對色彩進行命名之后，第二步要做的就是對色彩進行理性分析。
我們還是拿這個顏色來進行練習(xí)，先來找出它的色相、明度和飽和度。
首先根據(jù)色相環(huán)的大致位置，確定這個色彩的色相。
然后通過純度和明度的調(diào)整來找到與右側(cè)顏色相符的色值，這里我們得到了一個數(shù)值。
然后用吸管工具吸取右側(cè)的黃色，得到的結(jié)果和我們猜測的做比較，只要結(jié)果不是相差很大都是可以的，如果相差很多那就說明你對色彩的敏感度還有欠缺。
HSB色值猜想完之后我們再來看看它的RGB色值。
根據(jù)RGB原理很明顯黃色是由紅色和綠色混合得到的。
但是我們對比來看很明顯這兩個黃色還是有差別的，所以還需要進一步分析。
我們調(diào)出RGB色相環(huán)，我們看采樣的這個黃色是偏向紅色多一些還是偏向綠色多一些，很明顯是偏紅一些，因為它比較偏橙色。
所以我們就可以適當(dāng)?shù)臏p少綠色的成分。
我們來看一下對比，已經(jīng)接近了。
最后我們通過RGB色值來對照一下，雖然紅色和綠色的色值相差不多，但是我們采樣的顏色中還有少部分藍色，肉眼其實很難看出來，但是我們可以自己去模擬一下。
這三個成分的三原色混合之后，得到的就是我們采樣的顏色了。
△ http://www.rgbchallenge.com/
如果想提升對RGB的敏感度，可以通過這個小游戲來練習(xí)一下。
玩法很簡單，根據(jù)畫面中給出的RGB色值來選擇你認(rèn)為相對應(yīng)的顏色，選對了繼續(xù)下一關(guān)，選錯了GAME OVER重來。
接下來我們來看CMYK色值。
黃色是CMY其中的一個原色，所以首先黃色肯定是最多的。
對比來看一下，很明顯采樣的黃色中還有其他顏色成分。
我們調(diào)出CMYK色相環(huán)，同樣也是看采樣的黃色偏向哪個方向，也是偏紅色多一些。
所以我們得到這個顏色中需要加入紅色，但是應(yīng)該加多少呢？
這里我們加入了20%的紅，同時將黃色的含量降到80%，這個是根據(jù)經(jīng)驗和感覺來的。
這時將兩個顏色對比來看一下，已經(jīng)相差不多了。
最后通過數(shù)值來比對，可以說幾乎已經(jīng)很接近了。
只不過采樣的顏色中還帶有少量的青色，但是影響不大。
然后我們再來看看色調(diào)。關(guān)于色調(diào)這種老生常談的問題這里就不多講了，因為之前我專門寫過一篇關(guān)于色調(diào)的文章《高手的平面課堂！最容易上手的配色方法》，里面已經(jīng)講的很詳細(xì)了。如果你看過這篇文章，那么當(dāng)你得到了一個顏色的CMYK色值時，就已經(jīng)可以判斷出是什么色調(diào)了。
如果沒看過也沒關(guān)系，我?guī)Т蠹襾韰^(qū)分一下，白色和純色之間是明色和淡色，純色和灰色之間是濁色和淡濁色，純色和黑色之間是暗色。
將這些代表性色調(diào)提取出來一比對，就可以知道這個色彩的大致色調(diào)是什么了。
很明顯我們采樣的這個顏色是介于純色調(diào)和明色調(diào)之間，你可以叫它純色也可以叫它明色。
色調(diào)看完之后我們再來看看它的色彩家族，也就是這五大色相關(guān)系。
首先我們來看看它的同類色是什么，如果大家剛開始比較困難可以偷個懶，調(diào)出色相環(huán)。
這樣找到相應(yīng)的色相就非常簡單了，但是不建議大家這樣做，除非是新手或剛?cè)腴T的同學(xué)。
然后是近似色，相距45度的顏色。
然后是中差色，距離在90度左右。
接著是對比色，120度左右。
最后是互補色，對比最強烈，也就是相距180度左右的顏色。
這五大色相關(guān)系是最基本也是搭配起來最常見的，一般不太容易出問題。這里需要說明一點就是我們在對色值進行猜測的時候，不需要要求太高必須要完全一致，只要差不多就可以。并且大家在看教程的時候可能會覺得有些復(fù)雜佷麻煩，我做這些為了給大家演示看上去是花了些時間，但是當(dāng)你自己在猜想的時候可能只是一瞬間的事情。
下面我們再來看看第三步，對色彩的感性分析，所謂感性分析也就是說這個色彩給你什么感覺。
比如這個黃色給我們的正面意象有：陽光、輕松、幽默、開朗、熱鬧、歡樂、幼兒、開放、快樂；負(fù)面意象有吵鬧、廉價、不雅、軟弱、浮躁、輕浮、稚嫩、散漫、不安。注意在提煉感覺的時候不要約束自己，能夠聯(lián)想到的都可以記下來。
然后是第四步對色彩進行行業(yè)分析，也就是說你認(rèn)為這個色彩適合哪些行業(yè)或者你見過哪些行業(yè)使用過這個色彩。
比如最明顯的就是兒童、寵物、游戲、時尚、運動、促銷、餐飲、農(nóng)業(yè)、傳統(tǒng)、汽車等等。
以上這些訓(xùn)練做完之后就進入到了最后一步，也就是用這個色彩進行任意內(nèi)容的設(shè)計。
這是我們的文案，這里我們要設(shè)計的是關(guān)于詹姆斯十六代戰(zhàn)靴的三個Banner。
1. 案例一
首先根據(jù)尺寸創(chuàng)建版面，找到一張詹姆斯的圖片去底之后放到版面中，然后將主題信息放大并選擇一款具有力量感的字體編排到版面的中上位置，將中文標(biāo)題和LOGO做重復(fù)編排。
將文字信息放置到人物下方，底部信息做描邊和變形處理為畫面增加形式感，最后將其他信息編排到空余的左側(cè)。
最后在主標(biāo)題下方添加色塊來豐富一下版面，版式部分就完成了，接下來開始配色。
因為我們要用到采樣的這個黃色所以主色已經(jīng)確定了，但是這個畫面只用一個顏色顯然是不夠的，所以我們還需要其他顏色。
因為考慮到設(shè)計的內(nèi)容和風(fēng)格所以我覺得配色上應(yīng)該有一些對比，但是又不想使用對比很強的互補色，所以這里我選擇對比色，但是黃色的對比色有兩個應(yīng)該選擇哪個呢，這里我選擇了紫色。
因為如果了解NBA的話應(yīng)該知道，湖人隊的球衣本身就是黃色和紫色，也就是人們所謂的紫金戰(zhàn)袍。
但是這個紫色有些偏紅，所以我們可以調(diào)整成偏藍一些。這也是我想告訴大家的一點就是配色是靈活的，千萬不要死腦筋。
輔色確定了之后就可以為畫面填充顏色了，但是我們看填充完顏色之后人物圖片的顏色有些不協(xié)調(diào)，所以人物的顏色也需要調(diào)整。
這樣看上去就會好很多，那么第一個案例就完成了。
2. 案例二
第二個案例我們選擇鞋子來當(dāng)主體，然后編排主標(biāo)題。
將其余信息圍繞主體鞋子來編排，通過適當(dāng)?shù)淖冃谓嵌葋頌楫嬅嬖黾屿`動。
但是兩側(cè)很明顯太空了所以可以添加色塊和文字，版式部分就完成了。
因為我們設(shè)計的這三個Banner是一個系列的，所以配色也應(yīng)該是統(tǒng)一的不需要改動。
3. 案例三
我們再來看看最后一個案例，前兩個案例分別是以人物為主體和以產(chǎn)品為主體，所以第三個案例我就直接用文字編排，將文字信息進行分組給圖片留好位置。
為了增加一些形式感，下方的標(biāo)題同樣進行描邊處理并進行裁剪。
那么同樣使用這組配色，將圖片放置到預(yù)先留好的位置上，這個案例也就完成了。
最后我們來看一下整體效果和效果圖。
本期教程到這里就結(jié)束了，我們從幾個不同的角度去對色彩進行拆解，大家回去之后可以自己多加練習(xí)，每天解構(gòu)一個色彩，這樣長期積累下來，你就會在不知不覺中創(chuàng)建了一套屬于你自己的配色體系。
但是我相信肯定會有人有疑問，如果照這樣做那糾錯機制在哪？因為這些都是大家自己去創(chuàng)建的很多內(nèi)容不一定對，如果你有這樣的疑問那說明你是認(rèn)真學(xué)習(xí)的人，但是我這套方法并不是沒有糾錯機制，這個糾錯機制就是你自己，在漫長的時間里你的成長、歷練、感受、學(xué)習(xí)都會影響你對一個色彩的認(rèn)知，可能幾個月甚至幾天之后你看待同一個色彩的感覺都是不同的。所以放心大膽的去做吧，只要你肯堅持，火候到的時候自然就會有所收獲。
藍藍設(shè)計( www.wnxcall.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。
藍藍設(shè)計的小編 http://www.wnxcall.com