配色對(duì)于設(shè)計(jì)師來(lái)說(shuō)，不論是用來(lái)集中用戶(hù)的注意力還是表達(dá)感情或者是傳遞信息都是非常有力的工具。為了讓大家知道配色對(duì)于傳遞信息有多重要，經(jīng)研究發(fā)現(xiàn)，百分之九十的用戶(hù)購(gòu)買(mǎi)商品的時(shí)候，都是因?yàn)樗呐渖湃ベ?gòu)買(mǎi)的。

　　想讓配色的使用更加有效果，這在設(shè)計(jì)中是非常重要的，也就是構(gòu)想出一個(gè)全新的配色方案。每一種顏色都有著他獨(dú)特的意思，將他們組合起來(lái)也就能傳遞出無(wú)限的可能。

本圖版權(quán)歸我司所有，如需轉(zhuǎn)載請(qǐng)與我們聯(lián)系，否則視為侵權(quán)。

　　選擇配色方案的調(diào)色板，配色方案、有時(shí)就像雨后春筍般突然從腦子里接二連三的蹦出來(lái)，但更多的情況下，我們可以使用一些計(jì)劃性的方法。

　　01. 將你的目的表現(xiàn)出來(lái)

　　在此之前，讓我們明確目的和設(shè)計(jì)理念。一個(gè)有著含義的調(diào)色板是良好的設(shè)計(jì)要素之一。

　　我們可以問(wèn)自己以下幾個(gè)問(wèn)題。

　　你想通過(guò)設(shè)計(jì)傳遞什么樣的信息？

　　設(shè)計(jì)的目的是什么？想傳遞什么情報(bào)？想引導(dǎo)用戶(hù)什么？

　　他包含了怎樣的感情和意識(shí)？

　　02. 明確你的目標(biāo)用戶(hù)

　　顏色所面對(duì)的每一個(gè)人都是不同的。同一個(gè)顏色，因?yàn)槊總€(gè)人的個(gè)性、文化背景，經(jīng)驗(yàn)的不同會(huì)產(chǎn)生不同的效果。考慮到這一點(diǎn)，我們就需要明白，當(dāng)用戶(hù)面對(duì)這樣的設(shè)計(jì)時(shí)，會(huì)表現(xiàn)出怎樣的反應(yīng)。

　　一些顏色的含義，在世界的任何地方都是通用的，但有些則不是。綠色，一般是植物的顏色，看到他們就會(huì)聯(lián)想到自然。但是紅色就不一樣了，他會(huì)因?yàn)槲幕牟煌煌Ｔ谖餮笪幕屑t色代表的是：火（英: Fire）、暴力（英: Violence）、紛爭(zhēng)（英: Warfare），有時(shí)也會(huì)表示愛(ài)（英: Love）或者熱情（英: Passion）。但是在中國(guó)則表示的是繁榮（英: Prosperity）和幸福（英: Happiness）。

　　由于顏色有著不同的含義，在創(chuàng)建一個(gè)調(diào)色板時(shí)了解你所面對(duì)的用戶(hù)的感情是非常重要的。

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

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

　　選擇配色時(shí)，你需要了解一些關(guān)于配色的基本知識(shí)。配色的基本，就是配色組合的基本理論和構(gòu)造，具有實(shí)踐性的指南。他從如何使用色輪以及每一個(gè)的意義都總結(jié)的十分全面。

　　你所應(yīng)該知道的，關(guān)于配色的基本知識(shí)。這篇文章，他對(duì)于顏色有著一個(gè)詳細(xì)的劃分，你們可以從這篇文章中獲得參考。

　　04. 試著去尋找靈感

　　有的時(shí)候視覺(jué)化的必要的配色方案很難設(shè)計(jì)出來(lái)。那種時(shí)候，可以從別的設(shè)計(jì)師的作品中獲得靈感。

　　列舉兩個(gè)對(duì)于配色來(lái)說(shuō)相當(dāng)方便的網(wǎng)站，Dribbble 和Behance。有時(shí)你想給你的材料設(shè)計(jì)找一些特殊的靈感時(shí)，推薦Material UI 這個(gè)網(wǎng)站。平板式的配色調(diào)色板，你可以利用FlatUIColor 這個(gè)完整。

　　上面所列舉的幾個(gè)網(wǎng)站都非常的方便。接下來(lái)讓我們從不同的設(shè)計(jì)之中所產(chǎn)生的效果里一起來(lái)看一看吧。這樣獨(dú)特而意外的方法，可以讓你創(chuàng)建一些更有意思的調(diào)色版。例如，室內(nèi)設(shè)計(jì)就是非常不錯(cuò)的案例之一。

　　當(dāng)你想創(chuàng)建一些不同的配色方案，不妨試著轉(zhuǎn)變一下思路，利用其他文化的設(shè)計(jì)。舉個(gè)栗子、韓國(guó)的音樂(lè)MV、實(shí)用的多彩的調(diào)色板讓人印象深刻。每一個(gè)場(chǎng)景，都可以給你的靈感提供參考。

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

　　當(dāng)你看到了令人激動(dòng)的配色時(shí)，就可以把他們做成配色版了。你可以利用Photoshop，或者一些在線(xiàn)工具，來(lái)調(diào)整我們所找到的配色方案。

　　05. 制作屬于你的風(fēng)格指南

　　設(shè)計(jì)系統(tǒng)你所需要知道的風(fēng)格指南是，將所有的設(shè)計(jì)要素放在統(tǒng)一的設(shè)計(jì)框架之中。在這之中包含了包括按鈕或字體等全部的設(shè)計(jì)要素。我們?cè)谠O(shè)計(jì)時(shí)應(yīng)該思考什么樣的按鈕或?qū)Ш讲藛尾攀菓?yīng)該被選用的。

　　在實(shí)踐中如何使用風(fēng)格指南，在這里有一些網(wǎng)頁(yè)的案例可以參考。設(shè)計(jì)師一起來(lái)學(xué)習(xí)，精心挑選的50個(gè)知名品牌的風(fēng)格指南這篇文章，詳細(xì)介紹了知名平牌是如何利用風(fēng)格指南，可以用來(lái)參考。

　　因?yàn)樗梢允且粋€(gè)簡(jiǎn)單的草圖，所以在使用配色版之前，可以方便的幫助你做出你自己的風(fēng)格指南。一目了然的知道利用什么樣的設(shè)計(jì)要素，那么也就會(huì)明白該使用怎樣的配色來(lái)進(jìn)行制作了。

　　選擇設(shè)計(jì)制作時(shí)用的調(diào)色板時(shí)，要有「KISS（略: Keep it Simple, stupid）（越簡(jiǎn)單越好）」這樣的思路。首先，盡可能的減少顏色，我們需要考慮下面幾點(diǎn)。

　　背景色（英: Background）

　　主色（英: Primary Color）

　　次要色（英: Secondary Color）

　　警告色（英: Error Color）

　　成功色（英: Success Color）

　　主色，作為一個(gè)重要的。

　　次要色、一般利用他來(lái)區(qū)別動(dòng)作行為的顏色。舉個(gè)例子，在警告和成功所使用的顏色，通常使用綠色和紅色，如同下面的例子，你可以利用他們來(lái)設(shè)計(jì)從而將當(dāng)前狀態(tài)信息傳遞給用戶(hù)。

　　06. 選擇調(diào)色板

　　如果你已經(jīng)想好了設(shè)計(jì)靈感，完成了風(fēng)格指南并做了一些簡(jiǎn)單的草圖，那么接下來(lái)你就可以選擇調(diào)色板了。

　　一些基本的調(diào)色板，藝術(shù)家們通常將他們以相近的顏色排列在一起，這是一個(gè)非常不錯(cuò)的方法。

　　我們可以從這些配色方案中可以獲得一些靈感作為參考。就讓我們一起來(lái)看看如何從嘗試出的許許多多的配色方案中取得最合適的方案吧。

　　正如前面所說(shuō)，當(dāng)你在挑選配色方案的時(shí)候，為了明確目，傳遞出怎樣的信息情感給用戶(hù)，你可以嘗試著問(wèn)自己以下幾個(gè)問(wèn)題。

　　這個(gè)配色用起來(lái)很簡(jiǎn)單嗎？

　　用什么顏色影響力最大，最能引人注目。

　　使用的這個(gè)顏色有必要讓他更亮/更暗一點(diǎn)嗎？用戶(hù)在什么時(shí)候使用商品或者設(shè)計(jì)？

　　你想通過(guò)設(shè)計(jì)傳遞什么樣的信息？

　　可以這么說(shuō)，因?yàn)轱L(fēng)格指南，顏色在設(shè)計(jì)中所擔(dān)任的工作不同，各種各樣的顏色的重量也是不同的（英: Weight）。舉個(gè)例子、強(qiáng)調(diào)色比背景色所使用的次數(shù)就要多一些。

　　對(duì)于這一點(diǎn)你可以做一些練習(xí)，在實(shí)際頁(yè)面中你可以將顏色依重要程度的不同來(lái)放進(jìn)大小不同的形狀中。下面是Invision 的調(diào)色板。

　　考慮到強(qiáng)調(diào)色等顏色、配色以圖形的模式在下面表現(xiàn)出來(lái)了。

　　07. 應(yīng)用調(diào)色板

　　什么樣的顏色適用于風(fēng)格指南呢？讓我們來(lái)看看這個(gè)比較容易理解的Airbnb（一個(gè)旅館預(yù)定網(wǎng)站）的例子。Airbnb的強(qiáng)調(diào)色，是可以顯示公司住所地址的紅色（英: Rausch）。綠松石色（英: Kazan）是輔助色、背景色則使用了兩種灰色（英: Foggy / HOF）。

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

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

　　Airbnb 的錯(cuò)誤信息提示，大概將紅色（Rausch）進(jìn)行了一些調(diào)整，利用了比較亮的紅色。在圖中所使用的感嘆號(hào)（! 英: Exclamation Mark）和紅色相組合，立即躍入了用戶(hù)的眼中，將當(dāng)前系統(tǒng)的狀態(tài)傳遞給了用戶(hù)。

　　讓我們?cè)囍褂米畛醯念伾珌?lái)做設(shè)計(jì)吧。試著將他們放在布局和設(shè)計(jì)的焦點(diǎn)之中。在這些都完成之后，將調(diào)色板應(yīng)用于設(shè)計(jì)吧。

　　考慮一下關(guān)于視覺(jué)的層次感（英: Visual Hierachy）。考慮什么樣的要素，什么樣的顏色與設(shè)計(jì)才是最匹配的。還有，鼠標(biāo)在要素上懸停和點(diǎn)擊時(shí)的動(dòng)作的響應(yīng)，你可以考慮利用不同的顏色。

　　最后

　　美麗的配色，需要不斷的重復(fù)，反復(fù)的去嘗試。至于什么顏色最好，也是沒(méi)有唯一的答案的。決定了布局和設(shè)計(jì)的功能之后，多多的去嘗試各種各樣的配色吧。

　　不斷的學(xué)習(xí)如何使用顏色來(lái)進(jìn)行設(shè)計(jì)，是非常重要的。在設(shè)計(jì)開(kāi)始之前，不管什么樣的顏色組合都能通過(guò)視覺(jué)化的效果表現(xiàn)出來(lái)，就可以選擇更好的顏色眼進(jìn)行設(shè)計(jì)了。

　　靈虎品牌策劃是專(zhuān)業(yè)以品牌戰(zhàn)略為服務(wù)方向，集VI視覺(jué)設(shè)計(jì)、平面設(shè)計(jì)、產(chǎn)品包裝設(shè)計(jì)、品牌規(guī)范、宣傳設(shè)計(jì)、營(yíng)銷(xiāo)策劃、網(wǎng)絡(luò)搭建、線(xiàn)上推廣為一體，向客戶(hù)提供品牌和營(yíng)銷(xiāo)全方位專(zhuān)業(yè)的設(shè)計(jì)機(jī)構(gòu)和網(wǎng)絡(luò)運(yùn)營(yíng)商。

　　文章轉(zhuǎn)自“人人都是產(chǎn)品經(jīng)理”僅代表作者個(gè)人觀(guān)點(diǎn)，與本平臺(tái)無(wú)關(guān)，如有侵權(quán)聯(lián)刪。