顏色是設(shè)計師手中的強大力量碳却。它吸引你的眼睛队秩，喚起情感，傳達意義昼浦。為了讓你了解顏色的重要性馍资，在一篇被廣泛引用的題為“顏色對市場營銷的影響”的研究中，研究人員發(fā)現(xiàn)关噪，對于某些產(chǎn)品鸟蟹，人們對產(chǎn)品的90％的快速決策可能只基于顏色。
所以有效地使用顏色對設(shè)計很重要使兔。 但是想出不同的顏色組合也很難建钥。 每種顏色都有自己的意義，有無限數(shù)量的組合火诸。
本文旨在作為一個指南锦针，幫助你為自己的設(shè)計提出調(diào)色板。 它鼓勵你探索更多的顏色，這將有助于你開發(fā)直觀的感覺良好的顏色組合奈搜。
有時悉盆，調(diào)色板是突然的靈感的結(jié)果。但大多數(shù)時候馋吗，它來自采取系統(tǒng)的方法焕盟。
在做任何其他事情之前，首先確定你的設(shè)計目的宏粤。良好的設(shè)計使其調(diào)色板與其目的一致脚翘。
01.澄清你的設(shè)計目的
在做任何其他事情之前，首先明確你的目的和設(shè)計的理念绍哎。好的配色方案是讓你的調(diào)色版與設(shè)計目的保持一致来农。
問自己以下問題：
● 你想用你的設(shè)計傳達什么信息？
● 你的設(shè)計目的是什么崇堰？傳達的信息沃于？事情誘使用戶？
● 你想讓你的設(shè)計喚起什么情緒海诲？
“ 你的設(shè)計的目的應(yīng)該為你選擇你的調(diào)色板時作為指南繁莹。”
02.確定你的受眾群體
顏色是觀察者內(nèi)部出現(xiàn)的心里現(xiàn)象特幔。在不同人的個性和文化背景的烘托下咨演，不同的經(jīng)歷、顏色會帶來不同的效果蚯斯。因此薄风，為了了解人們?nèi)绾螌δ脑O(shè)計做出反應(yīng)，你需要識別你的受眾拍嵌。
顏色有普遍含義和特殊含義村刨。比如：綠色普遍代表自然，因為它是植被的顏色撰茎。然而嵌牺，像紅色這樣的顏色在不同文化之間有不同的解釋。在西方世界龄糊，紅色與火逆粹，暴力和戰(zhàn)爭有關(guān)。它也與愛和激情有關(guān)炫惩。然而僻弹，像中國這樣的國家將紅色與繁榮和幸福聯(lián)系在一起。
因為顏色有很多不同的含義他嚷，所以重要的是要將你作為設(shè)計師的心理顏色模型與你的觀眾相匹配蹋绽。
要了解更多關(guān)于不同國家和人口統(tǒng)計的顏色意味著什么芭毙，請查看顏色在市場營銷和品牌的新顏色心理學(xué)和顏色的意義。
03.配色方案的基本要素
當(dāng)選擇一個調(diào)色板卸耘，它也可能有助于了解顏色方案的一點點基本知識退敦。基本的配色方案蚣抗，在色彩組合的邏輯結(jié)構(gòu)侈百，是一個實用指南。從如何使用色輪到各種顏色的意義翰铡，總結(jié)全面钝域。
一個好的底漆是設(shè)計學(xué)校的顏色理論，和Hubspot的顏色理論101锭魔。你可以閱讀一個有趣的應(yīng)用色彩理論：為什么Facebook是藍色例证？顏色后的科學(xué)營銷。
04.試著找靈感
有時很難想象設(shè)計所需的顏色方案迷捧。沒關(guān)系战虏，可以嘗試從其他藝術(shù)作品尋找靈感。
通常的調(diào)色板靈感是像Dribbble党涕、Behance這樣的網(wǎng)站。如果你想要特定的設(shè)計風(fēng)格巡社，如為材料設(shè)計找到顏色靈感膛堤，你可以使用像Material UI這樣的平板式的色彩配置網(wǎng)站，我們還利用FlatUIColor晌该。
也可以嘗試看看來自設(shè)計的特定媒體之外的設(shè)計肥荔。它會幫助你創(chuàng)建一個有趣的調(diào)色板。例如朝群，室內(nèi)設(shè)計可以說是很好的例子之一燕耿。
當(dāng)你想有一點不同的配色方案，這是一個好主意姜胖，試圖轉(zhuǎn)向其他文化的設(shè)計誉帅。例如，在韓國音樂視頻集設(shè)計右莱，以其豐富多彩和眼睛捕捉的調(diào)色板而聞名蚜锨。每一個場景，一定可以作為靈感來源慢蜓。
你不必去韓國尋找顏色靈感亚再。 它無處不在，包括你的日常生活晨抡。 下一次出去氛悬，停下來欣賞你周圍的顏色则剃。
當(dāng)你找到的色彩，令人興奮的興奮如捅，讓我們創(chuàng)建一個調(diào)色板棍现。使用最喜歡的設(shè)計程序中的吸管工具挑出一個調(diào)色板，如在線工具オンラインツール伪朽，讓我們在必要的調(diào)整配色方案轴咱。
05.建立設(shè)計系統(tǒng)
設(shè)計系統(tǒng)，也叫作樣式指南烈涮。所有的設(shè)計元素朴肺，被共同使用的框架。如本按鈕和排版字體坚洽，它將包含所有的設(shè)計元素戈稿。什么按鈕讓我們來考慮是否采用的風(fēng)格和導(dǎo)航菜單的設(shè)計。
更實用的使用風(fēng)格指南是介紹一些網(wǎng)站：Salesforce的設(shè)計系統(tǒng)讶舰。對于更多的例子查看：50個細致的風(fēng)格指南列表鞍盗。
在選擇調(diào)色板之前建立一個設(shè)計系統(tǒng)是有幫助的，即使它只是一個粗略的草圖跳昼。 這樣做會給你一個想法般甲，你有什么元素，以及你的顏色如何適用于他們鹅颊。
當(dāng)選擇一個設(shè)計調(diào)色板時敷存，最好堅持KISS（保持簡單，愚蠢）原則堪伍。 顏色越少越好锚烦。 對于大多數(shù)設(shè)計系統(tǒng)，以下結(jié)構(gòu)是一個好的開始：
背景色（英: Background）
原色（英: Primary Color）
間色（英: Secondary Color）
警戒色（英: Error Color）
成功色彩（英: Success Color）
原色是最常用于重要按鈕和重音的顏色帝雇。對于許多公司涮俄，這也是他們的標志的顏色。
輔助顏色是用于區(qū)分次要操作和主要操作的顏色尸闸。 例如彻亲，主按鈕和輔助按鈕。 錯誤和成功顏色吮廉，通常是紅色和綠色睹栖，傳達設(shè)計狀態(tài)。 例如茧痕，成功或錯誤通知野来。
06.選擇調(diào)色板
現(xiàn)在你擁有靈感和設(shè)計系統(tǒng)的粗略草圖，是選擇一個調(diào)色板的時候了踪旷。
對于一個基本的調(diào)色板曼氛，我喜歡把我的顏色并排豁辉，就像一個藝術(shù)家為他們的油漆調(diào)色板。
這是采取所有的顏色靈感和創(chuàng)建調(diào)色板從他們的時間舀患。越多越好徽级。不要害怕自己嘗試顏色。
在縮小調(diào)色板選項時聊浅，請回想前兩個部分餐抢，在其中確定設(shè)計的目的和受眾。問自己以下問題：
它的配色方案很容易被使用低匙。
什么顏色有視覺沖擊力和吸引你的眼睛旷痕？
你需要一個明亮或深色配色方案嗎？一天的什么時候人們會使用你的產(chǎn)品顽冶？
你想讓你的設(shè)計傳達什么樣的心情欺抗？ 有沒有任何一個調(diào)色板你做的比別人更好？
正如我在上一節(jié)中提到的强重，顏色將在你的設(shè)計系統(tǒng)中有不同的角色绞呈。 這也意味著每種顏色在你的系統(tǒng)中都有不同的重量。 例如间景，你的背景顏色將比重音顏色更頻繁地使用佃声。
因此，有時創(chuàng)建一個由不同尺寸的形狀組成的一次性設(shè)計是有好處的倘要，每個尺寸大致等于給定頁面上的顏色的出現(xiàn)頻率和平均表面積圾亏。
例如，這里是Invision的調(diào)色板碗誉。
考慮到強調(diào)色，它也可以表示為如下父晶，并代表在所述圖形的顏色方案哮缺。
07.應(yīng)用調(diào)色板
如何申請顏色的風(fēng)格指南，讓我們來看看一個更容易理解的Airbnb的例子甲喝。Airbnb尝苇，在推出該公司時，當(dāng)時以地址命名的紅色為主色顏色埠胖。綠松石是次要顏色糠溜，兩種灰色為背景色。
對于大多數(shù)頁面直撤，Airbnb使用霧灰色作為背景非竿。 您可以看到，他們使用rausch作為他們的主要顏色強調(diào)重要的行動谋竖，如要求預(yù)訂列表红柱。
喀（ka）山承匣，綠松石色，用于捕捉和吸引你的眼睛锤悄。 注意它如何補充原色韧骗。
對于錯誤消息，Airbnb使用淺紅色零聚，可以說是一種陰影袍暴。 紅色，連同感嘆號隶症，立即吸引你的眼睛政模，并通知你系統(tǒng)的狀態(tài)。
介紹讓我們的設(shè)計沒有使用的顏色沿腰。讓我們關(guān)注的布局和設(shè)計的安排览徒。該說服力完成后，我們的調(diào)色板應(yīng)用到設(shè)計中颂龙。
想想設(shè)計中的視覺層次习蓬。想想你想強調(diào)，考慮什么設(shè)計組件要突出顯示和分配適當(dāng)?shù)念伾肭叮覀冎付ǖ念伾嗥ヅ涞脑O(shè)計元素是什么躲叼。此外，按照點擊行為企巢，比如當(dāng)鼠標懸停枫慷，你也可以考慮使用深淺不同的。
結(jié)語：
顏色都是關(guān)于實驗和迭代浪规。如果你想變得更好地處理顏色或听，唯一的答案是做更多的工作。想想顏色作為添加劑笋婿。如果你有自己的設(shè)計布局和功能想法誉裆，那么你可以試驗盡可能多的調(diào)色板。
學(xué)習(xí)如何用顏色設(shè)計對于設(shè)計師來說是無價的缸濒。隨著你更好地選擇調(diào)色板足丢，你可以開發(fā)在設(shè)計之前可視化顏色組合的功能，甚至可以觸摸設(shè)計程序庇配。
最開始看到這篇文章是在一個日文網(wǎng)站：PHOTOSHOP.VIP斩跌，當(dāng)我把里面的日文翻譯完成后，發(fā)現(xiàn)原來出自Free Code Camp捞慌，于是又將原文與日語重新整合翻譯耀鸦，里面的圖片具有來源，出處都是很不錯的網(wǎng)站啸澡。
