2017-4-25 用心設(shè)計
如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點(diǎn)這里
摘要
色彩是十分重要的。色彩是設(shè)計的表現(xiàn)手法之一，色彩的不同搭配可以改變商品給人的印象。我們生活在這個五彩繽紛的世界里，雖然每天都在享受大自然給予我們的視覺盛宴，但輪到我們自身來運(yùn)用色彩時，是不是又覺得束手無策，不知所措呢？
真正擁有豐富色彩感的人只占極小的一部分，利用有限的色彩營造視覺沖擊效果的專家更是寥寥無幾。作為對配色苦手的大多數(shù)人，有什么方法可以提高配色能力，避免嚴(yán)重的配色錯誤呢？
大家好，這篇文章相對基礎(chǔ)和簡單，將會介紹基礎(chǔ)的配色理論和一些實(shí)用的配色工具，可能對于配色苦手的新人會有一些幫助。當(dāng)然也包含了自己的配色喜好，顏色是沒有責(zé)任的，岡本一宣這么說，不同的人對于顏色的喜好各不相同，如果這篇文章能在閱讀完之后給于你在配色方面提供一些經(jīng)驗(yàn)和幫助于我來說便是非常榮幸的事情了。這次的文章是結(jié)合了《配色設(shè)計原理》以及《設(shè)計的細(xì)節(jié)：日本經(jīng)典設(shè)計透析》兩本書的部分內(nèi)容，在這里推薦大家在工作之余閱讀。以下是正文內(nèi)容。
一、需求做完了總感覺哪里不對
不管是設(shè)計師做需求還是運(yùn)營為公眾號新寫了一篇推送文章，又或者是是自己需要做一份ppt來向合作商展示產(chǎn)品。花了大半天時間終于折騰完了。大呼一口氣，正打算交付的時候，仔細(xì)一看，總感覺哪里不對。
配色一般發(fā)生在需求制作之前的思考，或者是作品完成之后的檢查，也就是“頁面做完之后總覺得哪里不對”。當(dāng)然出現(xiàn)這樣的事情自然是在顏色方案上出現(xiàn)了一些問題，那么我們可以從哪些方面著手來進(jìn)行修正呢？
從這張圖中我們可以感覺到確實(shí)有很多的違和感，那么我們分開來討論，到底是哪些部分出現(xiàn)了問題，如何改善才會合適些。我們把頁面的內(nèi)容分為背景（底色）、圖片（形狀）、文字，來分別描述在顏色上的問題。
1.背景，背景顏色過于重了，在體現(xiàn)寧靜、穩(wěn)重風(fēng)格的版面時，利用白色去表現(xiàn)寫真是表達(dá)主題的一條基本原則。在背景選擇時往往需要同時考慮角版圖片的背景，不至于在完成時出現(xiàn)較大的顏色反差。
2.圖片（圖形），其實(shí)是較為統(tǒng)一的木色，但是上下兩部分的“圓形”卻使用了比較亮眼的橙色，抹殺了寫真本身的顏色，雖然達(dá)到了吸引人的亮眼氛圍，卻給人一種輕率不穩(wěn)重的印象。
3.文字，如果仔細(xì)看的話，文字的顏色似乎過于多了，在寫真介紹中分別使用了三種顏色。同時，在深色背景上使用的黑色標(biāo)題產(chǎn)生了讓文字不容易閱讀的感覺。
下面就針對這個簡單的例子，我們進(jìn)行一些修改：
修改后：
1.簡單地利用白底，在簡約風(fēng)格的作品中，一般會運(yùn)用白底表現(xiàn)效果。白色底色是版面設(shè)計的基本色，是可以襯托出任何寫真的萬能色。
2.修正了圖形的顏色和文字的顏色，讓畫面更為統(tǒng)一和諧的同時增加了可讀性。
二、基礎(chǔ)配色理論
說到這里，其實(shí)關(guān)于怎么選擇顏色真的有很多很多的方法和理論，同時也會因?yàn)樵O(shè)計師的性格和喜好，對同一個作品又不同的見解，真正擁有豐富色彩感的人只占極小的一部分。我們能做的只是在可以使用理論方法等情況下，減少不必要的錯誤和正確的使用顏色，僅此而已。接下來的部分是基礎(chǔ)的配色理論，可能會相對枯燥和乏味，但對于每一位需要和顏色打交道的設(shè)計師，這也是必須要交手的對象。
色彩是什么？
其實(shí)硬要說色彩是什么，它是人腦對于光的強(qiáng)弱和不同波長所產(chǎn)出生的差異的感覺，與形狀同為最基本的視覺反應(yīng)之一。物體被光線照射并反射光線被人腦接受，形成了對“色彩”的認(rèn)識。當(dāng)然還有些物體是直接發(fā)光的，比如說我們的屏幕。光波是電磁波的一種，其中人類可以看到的稱之為“可見光”根據(jù)可見光波長的由短到長，我們可以識別紫色，藍(lán)色，青綠色，綠色，黃綠色，黃色，橙色，紅色等色彩。
色彩的三屬性
我們把顏色分為“色相”、“明度（亮度）”、“純度（飽和度）”三個屬性,色彩可以根據(jù)三屬性進(jìn)行體系化的歸類。為了能夠掌握無數(shù)的色彩并運(yùn)用自如，必須充分理解這三個屬性。
色相：色相是指物理學(xué)或心理學(xué)上區(qū)別紅、藍(lán)、黃等色感的要素之一，同時也指顏色本身，將色相按照波譜上順序進(jìn)行排列，首位相連，形成的環(huán)狀圖形，稱之為“色相環(huán)”。在色相環(huán)上確定了色相之間的關(guān)系后，配色實(shí)踐就變的簡單點(diǎn)多了。
明度（亮度）：明度是指色彩的明亮程度，在任何顏色中添加白色，明度上升，添加黑色，明度下降。因此，色彩中明度最高的是白色，明度的黑色。白色-黑色的灰度色標(biāo)示明度差異的表現(xiàn)。同時明度也是決定文字可讀性和物體外觀的重要元素。兩種色彩之間的差別，明度方面的對比越強(qiáng)烈，色彩之間的交界部分越明顯。
純度（飽和度）：純度是指色彩的鮮艷程度。新鮮水果的那種鮮艷、顏色的色彩代表的是“高純度”，樹汁和泥土等天然染料那種樸素、淡雅的色彩代表“低純度”。純度越低，顏色渾濁，純度的是灰色（無彩色）。純度的高低容易形成不同的氣質(zhì)，一般來講，純度越高，越有活力，充滿朝氣，純度越低，則容易給人成熟穩(wěn)重的印象。
色彩三屬性的模式圖（色立體）
其實(shí)可以簡單的理解為一個以色相環(huán)為基礎(chǔ)變化成的一個圓柱體，圓柱體的側(cè)面分布了整個色相環(huán)；圓柱體的底面到頂面，色相環(huán)的亮度發(fā)生變化；圓柱體的軸心到側(cè)扁表層，純度發(fā)生變化。
當(dāng)然，現(xiàn)實(shí)中的純度變化會根據(jù)色相的不同而不同，并不是規(guī)律的幾何變化，因此，實(shí)際上的這個“圓柱體模型”應(yīng)該要復(fù)雜的多。
關(guān)于色調(diào)
大家應(yīng)該經(jīng)常聽人提起過色調(diào)這個詞語，在顏色三屬性中并沒有給出“色調(diào)”的定義，那么色調(diào)到底是什么呢？色調(diào)是指色彩的濃淡和強(qiáng)弱程度，是通過色彩的明度和純度綜合表現(xiàn)色彩狀態(tài)的概念。也就是大家平時感覺的“這幾個顏色放在一起好像是一個色調(diào)的”這樣的感覺，雖然色相，不統(tǒng)一，但是如果調(diào)整好“純度”和“明度”也能讓畫面展現(xiàn)統(tǒng)一的配色效果。
其實(shí)色調(diào)是日常生活中人們對于色彩認(rèn)識非常重要的一環(huán)，很多時候我們覺得某個畫面非常協(xié)調(diào)統(tǒng)一時，往往是色調(diào)一致給人的效果。在實(shí)際配色過程中，如果需要選擇使用多種顏色或者使用到彩色的寫真的時候，使用色相調(diào)和的方法就比較容易達(dá)到效果。
色相差與色調(diào)調(diào)和
在使用色調(diào)調(diào)和的配色方案時，可以使用各種各樣的色調(diào)，但顏色的深淺（純度／明度）需要控制在一個幅度之內(nèi)。
三、利用例子來描述基礎(chǔ)的配色方法
下面會以一個范例來作為模板，展示基本的配色類型。分為“由色相差而形成的配色”和“由色調(diào)調(diào)和而形成的配色”。
A：由色相差而形成的配色
1.有主導(dǎo)色彩的配色：
這是由一種色相構(gòu)成的統(tǒng)一性配色，體現(xiàn)整體統(tǒng)一性，強(qiáng)烈的色相的印象。如果不是同一種色相，色相環(huán)上相鄰的類似色也可以形成相近的配色效果，這就是“同色系”配色和“類似色”配色的效果。這種配色展現(xiàn)自然與和諧的印象，但同時也容易形成單調(diào)、乏味的印象。
上圖更多的想表現(xiàn)的是同色系的方式
類似色搭配比同色系稍微豐富
2.對比色構(gòu)成的配色：
由對比色相互相對比構(gòu)成的配色。可以分為：由“互補(bǔ)色”或“對比色”搭配構(gòu)成的色相對比效果；由白色、黑色等明度差構(gòu)成的明度對比效果；以及由純度差異構(gòu)成的純度對比效果。由于色彩之間的互相襯托，運(yùn)用高明度、高純度的色彩，可以營造強(qiáng)烈的視覺沖擊效果。
上圖是色相對比的方式
B：由色調(diào)調(diào)和而形成的配色
這是有統(tǒng)一色調(diào)構(gòu)成的統(tǒng)一性配色。深色調(diào)和暗色調(diào)等類似色調(diào)搭配也可以形成同樣的效果，即使出現(xiàn)多種色相，只要保證色調(diào)i 址，畫面就能夠體現(xiàn)出整體的統(tǒng)一性。
在營造氣氛或情感時，可以通過色調(diào)調(diào)和的靈活運(yùn)用來達(dá)到目的，不同的色調(diào)可以表達(dá)出“柔軟”，“明亮”，“樸素”，“穩(wěn)重”，“華麗”等印象。在確定使用色相前，構(gòu)思好使用的色調(diào)也是配色的基礎(chǔ)理論之一。
1.淺色調(diào)調(diào)和
這張圖想表達(dá)的是冬日的風(fēng)景，冬天清澈，干凈的印象使我選擇了淺色調(diào)調(diào)和，同時利用了明度的變化來表現(xiàn)層次感。
2.深色調(diào)調(diào)和
利用低明度，中高純度的顏色調(diào)和而成的夜晚景象。畫面表現(xiàn)出安靜，祥和的氣氛。
3.柔和（明亮）調(diào)和
雖然使用了多種色彩，但是由于控制好了色調(diào)的波動，使畫面的色彩依舊在一個相對和諧的區(qū)域內(nèi)。
四、“知道了理論方法，關(guān)于實(shí)踐這件事”
這一個章節(jié)，我講講述一些我自己平時使用的配色方法和工具。希望能對讀者您的日常工作提供一些簡單的幫助。
1.Adobe color CC
它的原名更為著名，也就是Kuler ，不知道什么時候開始改了名字，不過功能沒有發(fā)生太大的變化。這是一個由設(shè)計師分享配色方案的一個平臺，已經(jīng)保存了成千上萬的預(yù)制配色方案。在photoshop上自帶了一個插件，你可以直接調(diào)用上面的色彩方案，并且非常方便的應(yīng)用到你的設(shè)計稿中去。
2.ColorHexa
我經(jīng)常使用這個網(wǎng)站用于，我只確定了一個主色的情況下，它能幫助我擴(kuò)展這個色彩，搭配出數(shù)種方案，甚至還有色盲修正方案。如果你只能確定一個必須使用的顏色，選擇這個工具或許能獲得一些靈感。
3.Color Scheme Designer
這是一個在線的配色工具，相比于Adobe color ，它擁有詳細(xì)的色彩修改方法，和簡單的顏色演示工具。國內(nèi)有個舊版本的漢化版，不過還是建議去官網(wǎng)使用的。
4.有趣的日本傳統(tǒng)色
這個網(wǎng)站專門列舉了250種日本傳統(tǒng)色，且擁有了不錯的動畫過度效果。如果你對日式的色彩感興趣，這里或許能得道一些靈感。
五、城里面的配色套路
懂得那么多道理，依然配不好顏色（捂臉）。如果你實(shí)在是對配色苦手，沒辦法得心應(yīng)手的獲取想到的色彩，那么或許，是時候借助一下巧妙的辦法了。
1.從寫真中獲取色彩
你總能看到一些非常美麗的圖片，當(dāng)然你的手機(jī)里或許也有一些，那么何不從中吸取一些顏色用到你的設(shè)計中去呢？色彩收集是一個偉大的靈感源泉，你可以快速在通過自己的素材庫或者互聯(lián)網(wǎng)渠道，去尋找你想要的色彩，提高你的設(shè)計效率。
2.手動保存的顏色（漸變色）
如果你實(shí)在沒辦法從色環(huán)中提取出你想要的顏色，那么在日常的閱圖過程中，收集優(yōu)秀的配色方案，吸取并保存這也是一個很討巧的方法。如果你每天都能保存2份色彩方案，或者僅僅是兩個漸變色，一個月后，你就能導(dǎo)出一份《我最喜歡的漸變色選集》
3.正確的顏色設(shè)計步驟
一個正確的設(shè)計步驟必須從開始的時候就選擇正確的道路，為了避免“頁面做完之后總覺得哪里不對”的情況出現(xiàn)，我們需要在每一個步驟都提前為設(shè)計做好準(zhǔn)備。
設(shè)計開始時的問題：
你要制作的是一個什么樣的內(nèi)容？
你想要傳達(dá)什么樣的情感？
顏色在這個內(nèi)容中的作用和定位。
你設(shè)計的對象是誰，或者說，你為誰設(shè)計？
這將很大程度的幫助你去選擇一個合適的設(shè)計，顏色設(shè)計有時很難確定這個就是正確的顏色，或者你調(diào)出來的這個顏色就是最合適的，所以這時候你就的在產(chǎn)品目標(biāo)，用戶群圖，使用場景等等做出篩選分析。從而確定顏色選擇。
設(shè)計進(jìn)行時的方法
我們通常把一個作品（這里指移動端或者web端頁面設(shè)計，當(dāng)然插畫其實(shí)也是適用的）的顏色拆分為幾個部分分別進(jìn)行色彩的選擇。
背景色、主色調(diào)、輔助色、高亮色（提醒色）
在正確的地方使用正確的顏色
想必在這個時候，你應(yīng)該有了一個大致的顏色方案，那么注意不要犯一些常見的錯誤。比如在正確與錯誤的選項上使用了錯誤的色彩，就像是在通行過道上使用了紅色背景的指示牌。
結(jié)語：
其實(shí)我本身也對于配色也相當(dāng)?shù)目嗍郑翊蠖鄶?shù)人一樣，在色彩上根本沒有什么稱得上的特長，寫完這篇文章，反而對自己的配色能力更加擔(dān)心了。希望大家能在文章中得到一些收獲。共同進(jìn)步，順頌 商祺。
藍(lán)藍(lán)設(shè)計( paul-jarrel.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://paul-jarrel.com