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