? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 讓配色更加順暢既峡，你需要記住的7條定律

配色對于設計師來說羡榴，不論是用來集中用戶的注意力還是表達感情或者是傳遞信息都是非常有力的工具。為了讓大家知道配色對于傳遞信息有多重要运敢，我引用《The Impact of Color on Marketing》這篇文章中的一句話校仑，經(jīng)研究發(fā)現(xiàn)，百分之九十的用戶購買商品的時候传惠，都是因為他的配色才去購買的迄沫。

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

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

選擇配色方案的調(diào)色板

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

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

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

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

1.你想通過設計傳遞什么樣的信息酗宋？

2.設計的目的是什么？想傳遞什么情報疆拘？想引導用戶什么蜕猫？

3.他包含了怎樣的感情和意識？

02.明確你的目標用戶

顏色所面對的每一個人都是不同的哎迄。同一個顏色回右，因為每個人的個性、文化背景漱挚，經(jīng)驗的不同會產(chǎn)生不同的效果翔烁。考慮到這一點旨涝，我們就需要明白蹬屹，當用戶面對這樣的設計時，會表現(xiàn)出怎樣的反應白华。

一些顏色的含義慨默，在世界的任何地方都是通用的，但有些則不是弧腥。綠色厦取，一般是植物的顏色，看到他們就會聯(lián)想到自然管搪。但是紅色就不一樣了虾攻，他會因為文化的不同而不同。在西洋文化中紅色代表的是：火（英: Fire）抛蚤、暴力（英: Violence）台谢、紛爭（英: Warfare），有時也會表示愛（英: Love）或者熱情（英: Passion）岁经。但是在中國則表示的是繁榮（英: Prosperity）和幸福（英: Happiness）朋沮。

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

如果你想了解更多關于顏色和國家的意義樊拓，你可以去看The Psychology of Color in Marketing and

Branding和The Meaning of Color這兩篇文章。

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

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

《給零基礎新手的超快速色彩知識小科普》這篇文章赴叹，他對于顏色有著一個詳細的劃分鸿染，你們可以從這篇文章中獲得參考。

04.試著去尋找靈感

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

列舉兩個對于配色來說相當方便的網(wǎng)站绽媒，Dribbble和Behance蚕冬。有時你想給你的材料設計找一些特殊的靈感時，推薦Material UI這個網(wǎng)站是辕。平板式的配色調(diào)色板囤热，你可以利用FlatUIColor這個完整。

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

當你想創(chuàng)建一些不同的配色方案松逊，不妨試著轉(zhuǎn)變一下思路躺屁，利用其他文化的設計。舉個栗子经宏、韓國的音樂MV犀暑、實用的多彩的調(diào)色板讓人印象深刻。每一個場景烁兰，都可以給你的靈感提供參考耐亏。

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

當你看到了令人激動的配色時，就可以把他們做成配色版了主之。你可以利用Photoshop择吊，或者一些在線工具，來調(diào)整我們所找到的配色方案槽奕。

05.制作屬于你的風格指南

設計系統(tǒng)你所需要知道的風格指南是几睛，將所有的設計要素放在統(tǒng)一的設計框架之中。在這之中包含了包括按鈕或字體等全部的設計要素粤攒。我們在設計時應該思考什么樣的按鈕或?qū)Ш讲藛尾攀菓摫贿x用的所森。

在實踐中如何使用風格指南囱持，在這里有一些網(wǎng)頁的案例可以參考。設計師一起來學習必峰，精心挑選的50個知名品牌的風格指南這篇文章洪唐，詳細介紹了知名平牌是如何利用風格指南，可以用來參考吼蚁。

因為它可以是一個簡單的草圖，所以在使用配色版之前问欠，可以方便的幫助你做出你自己的風格指南肝匆。一目了然的知道利用什么樣的設計要素，那么也就會明白該使用怎樣的配色來進行制作了顺献。

選擇設計制作時用的調(diào)色板時旗国，要有「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譯者注）按鈕或強調(diào)色被使用著，很多公司將他利用在LOGO設計上椒袍。

次要色驼唱、一般利用他來區(qū)別動作行為的顏色。舉個例子驹暑，在警告和成功所使用的顏色玫恳，通常使用綠色和紅色，如同下面的例子优俘，你可以利用他們來設計從而將當前狀態(tài)信息傳遞給用戶京办。

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

如果你已經(jīng)想好了設計靈感，完成了風格指南并做了一些簡單的草圖帆焕，那么接下來你就可以選擇調(diào)色板了惭婿。

一些基本的調(diào)色板，藝術家們通常將他們以相近的顏色排列在一起视搏，這是一個非常不錯的方法审孽。

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

正如前面所說佑力，當你在挑選配色方案的時候，為了明確目筋遭，傳遞出怎樣的信息情感給用戶打颤，你可以嘗試著問自己以下幾個問題暴拄。

1.這個配色用起來很簡單嗎？

2.用什么顏色影響力最大编饺，最能引人注目乖篷。

3.使用的這個顏色有必要讓他更亮/更暗一點嗎？用戶在什么時候使用商品或者設計透且？

4.你想通過設計傳遞什么樣的信息撕蔼？

可以這么說，因為風格指南秽誊，顏色在設計中所擔任的工作不同鲸沮，各種各樣的顏色的重量也是不同的（英: Weight）。舉個例子锅论、強調(diào)色比背景色所使用的次數(shù)就要多一些讼溺。

對于這一點你可以做一些練習，在實際頁面中你可以將顏色依重要程度的不同來放進大小不同的形狀中最易。下面是Invision的調(diào)色板怒坯。

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

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

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

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

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

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

讓我們試著使用最初的顏色來做設計吧布讹。試著將他們放在布局和設計的焦點之中琳拭。在這些都完成之后，將調(diào)色板應用于設計吧描验。

考慮一下關于視覺的層次感（英: Visual Hierachy）白嘁。考慮什么樣的要素膘流，什么樣的顏色與設計才是最匹配的絮缅。還有，鼠標在要素上懸停和點擊時的動作的響應呼股，你可以考慮利用不同的顏色盟蚣。

最后

美麗的配色，需要不斷的重復卖怜，反復的去嘗試。至于什么顏色最好阐枣，也是沒有唯一的答案的马靠。決定了布局和設計的功能之后，多多的去嘗試各種各樣的配色吧蔼两。

不斷的學習如何使用顏色來進行設計甩鳄，是非常重要的。在設計開始之前，不管什么樣的顏色組合都能通過視覺化的效果表現(xiàn)出來，就可以選擇更好的顏色眼進行設計了祥楣。

創(chuàng)想者學院：

創(chuàng)想者學院澳腹，專注于培養(yǎng)創(chuàng)新設計人才，團隊創(chuàng)立于2009年雷厂，中國首家UI培訓教育機構(gòu)，華南地區(qū)首家UID教育機構(gòu)深圳信息學院、深圳大學校企合作單位燥滑，良心教育，誠摯如一阿逃！