配pei色se對dui於yu設she計ji師shi來lai說shuo，不bu論lun是shi用yong來lai集ji中zhong用yong戶hu的de注zhu意yi力li還hai是shi表biao達da感gan情qing或huo者zhe是shi傳chuan遞di信xin息xi都dou是shi非fei常chang有you力li的de工gong具ju。為wei了le讓rang大da家jia知zhi道dao配pei色se對dui於yu傳chuan遞di信xin息xi有you多duo重zhong要yao，我wo引yin用yong《The Impact of Color on Marketing 》這篇文章中的一句話
，經研究發現，百分之九十的用戶購買商品的時候，都是因為他的配色才去購買的。

想xiang讓rang配pei色se的de使shi用yong更geng加jia有you效xiao果guo
，這zhe在zai設she計ji中zhong是shi非fei常chang重zhong要yao的de，也ye就jiu是shi構gou想xiang出chu一yi個ge全quan新xin的de配pei色se方fang案an。每mei一yi種zhong顏yan色se都dou有you著zhe他ta獨du特te的de意yi思si，將jiang他ta們men組zu合he起qi來lai也ye就jiu能neng傳chuan遞di出chu無wu限xian的de可ke能neng。

這篇文章介紹的是如何讓你的配色與你的設計更加搭配的方法。

選擇配色方案的調色板

配色方案、有時就像雨後春筍般突然從腦子裏接二連三的蹦出來，但更多的情況下，我們可以使用一些計劃性的方法。

01. 將你的目的表現出來

在此之前，讓我們明確目的和設計理念。一個有著含義的調色板是良好的設計要素之一。

我們可以問自己以下幾個問題。

1. 你想通過設計傳遞什麼樣的信息？
2. 設計的目的是什麼
   ？想傳遞什麼情報？想引導用戶什麼？
3. 他包含了怎樣的感情和意識？

02. 明確你的目標用戶

顏色所麵對的每一個人都是不同的。同一個顏色
，因為每個人的個性、文化背景，經驗的不同會產生不同的效果。考慮到這一點，我們就需要明白，當用戶麵對這樣的設計時，會表現出怎樣的反應。

yixieyansedehanyi
，zaishijiederenhedifangdoushitongyongde
，danyouxiezebushi。lvse，yibanshizhiwudeyanse，kandaotamenjiuhuilianxiangdaoziran。danshihongsejiubuyiyangle
，tahuiyinweiwenhuadebutongerbutong。zaixiyangwenhuazhonghongsedaibiaodeshi：火（英: Fire）、暴力（英: Violence）
、紛爭（英: Warfare），有時也會表示愛（英: Love）或者熱情（英: Passion）。但是在中國則表示的是繁榮（英: Prosperity）和幸福（英: Happiness）。

由於顏色有著不同的含義
，在創建一個調色板時了解你所麵對的用戶的感情是非常重要的。

如果你想了解更多關於顏色和國家的意義，你可以去看The Psychology of Color in Marketing and Branding 和 The Meaning of Color 這兩篇文章。

03. 了解配色方案的基本要素

選xuan擇ze配pei色se時shi，你ni需xu要yao了le解jie一yi些xie關guan於yu配pei色se的de基ji本ben知zhi識shi。配pei色se的de基ji本ben
，就jiu是shi配pei色se組zu合he的de基ji本ben理li論lun和he構gou造zao，具ju有you實shi踐jian性xing的de指zhi南nan。他ta從cong如ru何he使shi用yong色se輪lun以yi及ji每mei一yi個ge的de意yi義yi都dou總zong結jie的de十shi分fen全quan麵mian。

你所應該知道的，關於配色的基本知識。這篇文章，他對於顏色有著一個詳細的劃分
，你們可以從這篇文章中獲得參考。

04. 試著去尋找靈感

有的時候視覺化的必要的配色方案很難設計出來。那種時候
，可以從別的設計師的作品中獲得靈感。

列舉兩個對於配色來說相當方便的網站，Dribbble 和 Behance。有時你想給你的材料設計找一些特殊的靈感時，推薦 Material UI 這個網站。平板式的配色調色板，你可以利用FlatUIColor 這個完整。

上(shang)麵(mian)所(suo)列(lie)舉(ju)的(de)幾(ji)個(ge)網(wang)站(zhan)都(dou)非(fei)常(chang)的(de)方(fang)便(bian)。接(jie)下(xia)來(lai)讓(rang)我(wo)們(men)從(cong)不(bu)同(tong)的(de)設(she)計(ji)之(zhi)中(zhong)所(suo)產(chan)生(sheng)的(de)效(xiao)果(guo)裏(li)一(yi)起(qi)來(lai)看(kan)一(yi)看(kan)吧(ba)。這(zhe)樣(yang)獨(du)特(te)而(er)意(yi)外(wai)的(de)方(fang)法(fa)，可(ke)以(yi)讓(rang)你(ni)創(chuang)建(jian)一(yi)些(xie)更(geng)有(you)意(yi)思(si)的(de)調(tiao)色(se)版(ban)。例(li)如(ru)，室(shi)內(nei)設(she)計(ji)就(jiu)是(shi)非(fei)常(chang)不(bu)錯(cuo)的(de)案(an)例(li)之(zhi)一(yi)。

當你想創建一些不同的配色方案，不妨試著轉變一下思路，利用其他文化的設計。舉個栗子
、韓國的音樂MV、實用的多彩的調色板讓人印象深刻。每一個場景，都可以給你的靈感提供參考。

我們也可以從日常生活中獲得靈感的啟發。當你走出去
，室外的任何一個景色都可以作為參考。

當你看到了令人激動的配色時

，就可以把他們做成配色版了。你可以利用Photoshop，或者一些在線工具
，來調整我們所找到的配色方案。

05. 製作屬於你的風格指南

shejixitongnisuoxuyaozhidaodefenggezhinanshi，jiangsuoyoudeshejiyaosufangzaitongyideshejikuangjiazhizhong。zaizhezhizhongbaohanlebaokuoanniuhuozitidengquanbudeshejiyaosu。womenzaishejishiyinggaisikaoshenmeyangdeanniuhuodaohangcaidancaishiyinggaibeixuanyongde。

在實踐中如何使用風格指南，在這裏有一些網頁的案例可以參考。設計師一起來學習
，精心挑選的50個知名品牌的風格指南這篇文章，詳細介紹了知名平牌是如何利用風格指南
，可以用來參考。

yinweitakeyishiyigejiandandecaotu，suoyizaishiyongpeisebanzhiqian
，keyifangbiandebangzhunizuochunizijidefenggezhinan。yimulerandezhidaoliyongshenmeyangdeshejiyaosu，nameyejiuhuimingbaigaishiyongzenyangdepeiselaijinxingzhizuole。

選擇設計製作時用的調色板時，要有「KISS（略: Keep it Simple, stupid）（越簡單越好）」這樣的思路。首先，盡可能的減少顏色，我們需要考慮下麵幾點。

1. 背景色（英: Background）
2. 主色（英: Primary Color）
3. 次要色（英: Secondary Color）
4. 警告色（英: Error Color）
5. 成功色（英: Success Color）

主色
，作為一個重要的CTA（Call to Action，詳細可以看這篇文章：http://www.webpowerchina.com/knowledge/page.php?id=438 譯者注）按鈕或強調色被使用著，很多公司將他利用在LOGO設計上。

次要色、yibanliyongtalaiqubiedongzuoxingweideyanse。jugelizi，zaijinggaohechenggongsuoshiyongdeyanse，tongchangshiyonglvsehehongse，rutongxiamiandelizi，nikeyiliyongtamenlaishejicongerjiangdangqianzhuangtaixinxichuandigeiyonghu。

06. 選擇調色板

如果你已經想好了設計靈感
，完成了風格指南並做了一些簡單的草圖，那麼接下來你就可以選擇調色板了。

一些基本的調色板，藝術家們通常將他們以相近的顏色排列在一起，這是一個非常不錯的方法。

我(wo)們(men)可(ke)以(yi)從(cong)這(zhe)些(xie)配(pei)色(se)方(fang)案(an)中(zhong)可(ke)以(yi)獲(huo)得(de)一(yi)些(xie)靈(ling)感(gan)作(zuo)為(wei)參(can)考(kao)。就(jiu)讓(rang)我(wo)們(men)一(yi)起(qi)來(lai)看(kan)看(kan)如(ru)何(he)從(cong)嚐(chang)試(shi)出(chu)的(de)許(xu)許(xu)多(duo)多(duo)的(de)配(pei)色(se)方(fang)案(an)中(zhong)取(qu)得(de)最(zui)合(he)適(shi)的(de)方(fang)案(an)吧(ba)。

正如前麵所說，當你在挑選配色方案的時候，為了明確目，傳遞出怎樣的信息情感給用戶，你可以嚐試著問自己以下幾個問題。

1. 這個配色用起來很簡單嗎？
2. 用什麼顏色影響力最大，最能引人注目。
3. 使用的這個顏色有必要讓他更亮/更暗一點嗎
   ？用戶在什麼時候使用商品或者設計？
4. 你想通過設計傳遞什麼樣的信息？

可以這麼說
，因為風格指南
，顏色在設計中所擔任的工作不同
，各種各樣的顏色的重量也是不同的（英: Weight）。舉個例子、強調色比背景色所使用的次數就要多一些。

對於這一點你可以做一些練習
，在實際頁麵中你可以將顏色依重要程度的不同來放進大小不同的形狀中。下麵是 Invision 的調色板。

考慮到強調色等顏色

、配色以圖形的模式在下麵表現出來了。

07. 應用調色板

什麼樣的顏色適用於風格指南呢？讓我們來看看這個比較容易理解的 Airbnb（一個旅館預定網站） 的例子。Airbnb的強調色，是可以顯示公司住所地址的紅色（英: Rausch）。綠鬆石色（英: Kazan）是輔助色、背景色則使用了兩種灰色（英: Foggy / HOF）。

Airbnb的很多頁麵，背景色使用的是比較明亮的灰色（英: Foggy）。比如下麵的例子
、預約房間是非常重要的動作，就使用了作為主色的紅色（英: Rausch）。

綠鬆石色（英: Kazan），使用它能更好的引人注意。在下麵的這個例子中
，你可以看到他作為輔助色很好的幫助了原色。

Airbnb 的錯誤信息提示，大概將紅色（Rausch）進行了一些調整，利用了比較亮的紅色。在圖中所使用的感歎號（! 英: Exclamation Mark）和紅色相組合，立即躍入了用戶的眼中，將當前係統的狀態傳遞給了用戶。

讓我們試著使用最初的顏色來做設計吧。試著將他們放在布局和設計的焦點之中。在這些都完成之後，將調色板應用於設計吧。

考慮一下關於視覺的層次感（英: Visual Hierachy）。考kao慮lv什shen麼me樣yang的de要yao素su，什shen麼me樣yang的de顏yan色se與yu設she計ji才cai是shi最zui匹pi配pei的de。還hai有you
，鼠shu標biao在zai要yao素su上shang懸xuan停ting和he點dian擊ji時shi的de動dong作zuo的de響xiang應ying，你ni可ke以yi考kao慮lv利li用yong不bu同tong的de顏yan色se。

最後

美mei麗li的de配pei色se
，需xu要yao不bu斷duan的de重zhong複fu，反fan複fu的de去qu嚐chang試shi。至zhi於yu什shen麼me顏yan色se最zui好hao，也ye是shi沒mei有you唯wei一yi的de答da案an的de。決jue定ding了le布bu局ju和he設she計ji的de功gong能neng之zhi後hou，多duo多duo的de去qu嚐chang試shi各ge種zhong各ge樣yang的de配pei色se吧ba。

不(bu)斷(duan)的(de)學(xue)習(xi)如(ru)何(he)使(shi)用(yong)顏(yan)色(se)來(lai)進(jin)行(xing)設(she)計(ji)
，是(shi)非(fei)常(chang)重(zhong)要(yao)的(de)。在(zai)設(she)計(ji)開(kai)始(shi)之(zhi)前(qian)，不(bu)管(guan)什(shen)麼(me)樣(yang)的(de)顏(yan)色(se)組(zu)合(he)都(dou)能(neng)通(tong)過(guo)視(shi)覺(jiao)化(hua)的(de)效(xiao)果(guo)表(biao)現(xian)出(chu)來(lai)
，就(jiu)可(ke)以(yi)選(xuan)擇(ze)更(geng)好(hao)的(de)顏(yan)色(se)眼(yan)進(jin)行(xing)設(she)計(ji)了(le)。