顏色是設(shè)計(jì)師手中的強(qiáng)大力量。它吸引你的眼睛，喚起情感，傳達(dá)意義。為了讓你了解顏色的重要性，在一篇被廣泛引用的題為“顏色對(duì)市場(chǎng)營(yíng)銷的影響”的研究中，研究人員發(fā)現(xiàn)，對(duì)于某些產(chǎn)品，人們對(duì)產(chǎn)品的90％的快速?zèng)Q策可能只基于顏色。
所以有效地使用顏色對(duì)設(shè)計(jì)很重要。 但是想出不同的顏色組合也很難。 每種顏色都有自己的意義，有無(wú)限數(shù)量的組合。
本文旨在作為一個(gè)指南，幫助你為自己的設(shè)計(jì)提出調(diào)色板。 它鼓勵(lì)你探索更多的顏色，這將有助于你開(kāi)發(fā)直觀的感覺(jué)良好的顏色組合。
有時(shí)，調(diào)色板是突然的靈感的結(jié)果。但大多數(shù)時(shí)候，它來(lái)自采取系統(tǒng)的方法。
在做任何其他事情之前，首先確定你的設(shè)計(jì)目的。良好的設(shè)計(jì)使其調(diào)色板與其目的一致。
01.澄清你的設(shè)計(jì)目的
在做任何其他事情之前，首先明確你的目的和設(shè)計(jì)的理念。好的配色方案是讓你的調(diào)色版與設(shè)計(jì)目的保持一致。
問(wèn)自己以下問(wèn)題：
● 你想用你的設(shè)計(jì)傳達(dá)什么信息？
● 你的設(shè)計(jì)目的是什么？傳達(dá)的信息？事情誘使用戶？
● 你想讓你的設(shè)計(jì)喚起什么情緒？
“ 你的設(shè)計(jì)的目的應(yīng)該為你選擇你的調(diào)色板時(shí)作為指南。”
02.確定你的受眾群體
顏色是觀察者內(nèi)部出現(xiàn)的心里現(xiàn)象。在不同人的個(gè)性和文化背景的烘托下，不同的經(jīng)歷、顏色會(huì)帶來(lái)不同的效果。因此，為了了解人們?nèi)绾螌?duì)您的設(shè)計(jì)做出反應(yīng)，你需要識(shí)別你的受眾。
顏色有普遍含義和特殊含義。比如：綠色普遍代表自然，因?yàn)樗侵脖坏念伾Ｈ欢窦t色這樣的顏色在不同文化之間有不同的解釋。在西方世界，紅色與火，暴力和戰(zhàn)爭(zhēng)有關(guān)。它也與愛(ài)和激情有關(guān)。然而，像中國(guó)這樣的國(guó)家將紅色與繁榮和幸福聯(lián)系在一起。
因?yàn)轭伾泻芏嗖煌暮x，所以重要的是要將你作為設(shè)計(jì)師的心理顏色模型與你的觀眾相匹配。
要了解更多關(guān)于不同國(guó)家和人口統(tǒng)計(jì)的顏色意味著什么，請(qǐng)查看顏色在市場(chǎng)營(yíng)銷和品牌的新顏色心理學(xué)和顏色的意義。
03.配色方案的基本要素
當(dāng)選擇一個(gè)調(diào)色板，它也可能有助于了解顏色方案的一點(diǎn)點(diǎn)基本知識(shí)。基本的配色方案，在色彩組合的邏輯結(jié)構(gòu)，是一個(gè)實(shí)用指南。從如何使用色輪到各種顏色的意義，總結(jié)全面。
一個(gè)好的底漆是設(shè)計(jì)學(xué)校的顏色理論，和Hubspot的顏色理論101。你可以閱讀一個(gè)有趣的應(yīng)用色彩理論：為什么Facebook是藍(lán)色？顏色后的科學(xué)營(yíng)銷。
04.試著找靈感
有時(shí)很難想象設(shè)計(jì)所需的顏色方案。沒(méi)關(guān)系，可以嘗試從其他藝術(shù)作品尋找靈感。
通常的調(diào)色板靈感是像Dribbble、Behance這樣的網(wǎng)站。如果你想要特定的設(shè)計(jì)風(fēng)格，如為材料設(shè)計(jì)找到顏色靈感，你可以使用像Material UI這樣的平板式的色彩配置網(wǎng)站，我們還利用FlatUIColor。
也可以嘗試看看來(lái)自設(shè)計(jì)的特定媒體之外的設(shè)計(jì)。它會(huì)幫助你創(chuàng)建一個(gè)有趣的調(diào)色板。例如，室內(nèi)設(shè)計(jì)可以說(shuō)是很好的例子之一。
當(dāng)你想有一點(diǎn)不同的配色方案，這是一個(gè)好主意，試圖轉(zhuǎn)向其他文化的設(shè)計(jì)。例如，在韓國(guó)音樂(lè)視頻集設(shè)計(jì)，以其豐富多彩和眼睛捕捉的調(diào)色板而聞名。每一個(gè)場(chǎng)景，一定可以作為靈感來(lái)源。
你不必去韓國(guó)尋找顏色靈感。 它無(wú)處不在，包括你的日常生活。 下一次出去，停下來(lái)欣賞你周圍的顏色。
當(dāng)你找到的色彩，令人興奮的興奮，讓我們創(chuàng)建一個(gè)調(diào)色板。使用最喜歡的設(shè)計(jì)程序中的吸管工具挑出一個(gè)調(diào)色板，如在線工具オンラインツール，讓我們?cè)诒匾恼{(diào)整配色方案。
05.建立設(shè)計(jì)系統(tǒng)
設(shè)計(jì)系統(tǒng)，也叫作樣式指南。所有的設(shè)計(jì)元素，被共同使用的框架。如本按鈕和排版字體，它將包含所有的設(shè)計(jì)元素。什么按鈕讓我們來(lái)考慮是否采用的風(fēng)格和導(dǎo)航菜單的設(shè)計(jì)。
更實(shí)用的使用風(fēng)格指南是介紹一些網(wǎng)站：Salesforce的設(shè)計(jì)系統(tǒng)。對(duì)于更多的例子查看：50個(gè)細(xì)致的風(fēng)格指南列表。
在選擇調(diào)色板之前建立一個(gè)設(shè)計(jì)系統(tǒng)是有幫助的，即使它只是一個(gè)粗略的草圖。 這樣做會(huì)給你一個(gè)想法，你有什么元素，以及你的顏色如何適用于他們。
當(dāng)選擇一個(gè)設(shè)計(jì)調(diào)色板時(shí)，最好堅(jiān)持KISS（保持簡(jiǎn)單，愚蠢）原則。 顏色越少越好。 對(duì)于大多數(shù)設(shè)計(jì)系統(tǒng)，以下結(jié)構(gòu)是一個(gè)好的開(kāi)始：
背景色（英: Background）
原色（英: Primary Color）
間色（英: Secondary Color）
警戒色（英: Error Color）
成功色彩（英: Success Color）
原色是最常用于重要按鈕和重音的顏色。對(duì)于許多公司，這也是他們的標(biāo)志的顏色。
輔助顏色是用于區(qū)分次要操作和主要操作的顏色。 例如，主按鈕和輔助按鈕。 錯(cuò)誤和成功顏色，通常是紅色和綠色，傳達(dá)設(shè)計(jì)狀態(tài)。 例如，成功或錯(cuò)誤通知。
06.選擇調(diào)色板
現(xiàn)在你擁有靈感和設(shè)計(jì)系統(tǒng)的粗略草圖，是選擇一個(gè)調(diào)色板的時(shí)候了。
對(duì)于一個(gè)基本的調(diào)色板，我喜歡把我的顏色并排，就像一個(gè)藝術(shù)家為他們的油漆調(diào)色板。
這是采取所有的顏色靈感和創(chuàng)建調(diào)色板從他們的時(shí)間。越多越好。不要害怕自己嘗試顏色。
在縮小調(diào)色板選項(xiàng)時(shí)，請(qǐng)回想前兩個(gè)部分，在其中確定設(shè)計(jì)的目的和受眾。問(wèn)自己以下問(wèn)題：
它的配色方案很容易被使用。
什么顏色有視覺(jué)沖擊力和吸引你的眼睛？
你需要一個(gè)明亮或深色配色方案嗎？一天的什么時(shí)候人們會(huì)使用你的產(chǎn)品？
你想讓你的設(shè)計(jì)傳達(dá)什么樣的心情？ 有沒(méi)有任何一個(gè)調(diào)色板你做的比別人更好？
正如我在上一節(jié)中提到的，顏色將在你的設(shè)計(jì)系統(tǒng)中有不同的角色。 這也意味著每種顏色在你的系統(tǒng)中都有不同的重量。 例如，你的背景顏色將比重音顏色更頻繁地使用。
因此，有時(shí)創(chuàng)建一個(gè)由不同尺寸的形狀組成的一次性設(shè)計(jì)是有好處的，每個(gè)尺寸大致等于給定頁(yè)面上的顏色的出現(xiàn)頻率和平均表面積。
例如，這里是Invision的調(diào)色板。
考慮到強(qiáng)調(diào)色，它也可以表示為如下，并代表在所述圖形的顏色方案。
07.應(yīng)用調(diào)色板
如何申請(qǐng)顏色的風(fēng)格指南，讓我們來(lái)看看一個(gè)更容易理解的Airbnb的例子。Airbnb，在推出該公司時(shí)，當(dāng)時(shí)以地址命名的紅色為主色顏色。綠松石是次要顏色，兩種灰色為背景色。
對(duì)于大多數(shù)頁(yè)面，Airbnb使用霧灰色作為背景。 您可以看到，他們使用rausch作為他們的主要顏色強(qiáng)調(diào)重要的行動(dòng)，如要求預(yù)訂列表。
喀（ka）山，綠松石色，用于捕捉和吸引你的眼睛。 注意它如何補(bǔ)充原色。
對(duì)于錯(cuò)誤消息，Airbnb使用淺紅色，可以說(shuō)是一種陰影。 紅色，連同感嘆號(hào)，立即吸引你的眼睛，并通知你系統(tǒng)的狀態(tài)。
介紹讓我們的設(shè)計(jì)沒(méi)有使用的顏色。讓我們關(guān)注的布局和設(shè)計(jì)的安排。該說(shuō)服力完成后，我們的調(diào)色板應(yīng)用到設(shè)計(jì)中。
想想設(shè)計(jì)中的視覺(jué)層次。想想你想強(qiáng)調(diào)，考慮什么設(shè)計(jì)組件要突出顯示和分配適當(dāng)?shù)念伾覀冎付ǖ念伾嗥ヅ涞脑O(shè)計(jì)元素是什么。此外，按照點(diǎn)擊行為，比如當(dāng)鼠標(biāo)懸停，你也可以考慮使用深淺不同的。
結(jié)語(yǔ)：
顏色都是關(guān)于實(shí)驗(yàn)和迭代。如果你想變得更好地處理顏色，唯一的答案是做更多的工作。想想顏色作為添加劑。如果你有自己的設(shè)計(jì)布局和功能想法，那么你可以試驗(yàn)盡可能多的調(diào)色板。
學(xué)習(xí)如何用顏色設(shè)計(jì)對(duì)于設(shè)計(jì)師來(lái)說(shuō)是無(wú)價(jià)的。隨著你更好地選擇調(diào)色板，你可以開(kāi)發(fā)在設(shè)計(jì)之前可視化顏色組合的功能，甚至可以觸摸設(shè)計(jì)程序。
最開(kāi)始看到這篇文章是在一個(gè)日文網(wǎng)站：PHOTOSHOP.VIP，當(dāng)我把里面的日文翻譯完成后，發(fā)現(xiàn)原來(lái)出自Free Code Camp，于是又將原文與日語(yǔ)重新整合翻譯，里面的圖片具有來(lái)源，出處都是很不錯(cuò)的網(wǎng)站。
