本文系統(tǒng)地介紹了一些尋找色彩方案靈感的想法，并輔以大量案例來(lái)解釋色彩匹配方法，這種方法易于理解，最適合初學(xué)者。

色彩是設(shè)計(jì)師手中的有力武器。

它吸引了用戶的注意力，喚起了情感并傳達(dá)了內(nèi)涵。在對(duì)顏色的調(diào)查中，研究人員發(fā)現(xiàn)，90％的用戶對(duì)產(chǎn)品的快速?zèng)Q策都是基于顏色的。

因此，顏色的使用對(duì)于設(shè)計(jì)至關(guān)重要，每種顏色都有其自身的含義，多種顏色的組合也需要理論指導(dǎo)。

選擇配色方案

有時(shí)色彩匹配是光環(huán)的時(shí)刻，但更常見的是，它有更系統(tǒng)的匹配方式。

確定目的

在開始設(shè)計(jì)之前，確定設(shè)計(jì)目標(biāo)。在開始之前問(wèn)自己這些問(wèn)題：

您希望通過(guò)設(shè)計(jì)傳達(dá)哪些信息？

你的設(shè)計(jì)目的是什么？提供信息？勸導(dǎo)？

你想讓你的設(shè)計(jì)喚起什么樣的情感？

在選擇調(diào)色板時(shí)，您的設(shè)計(jì)目的應(yīng)該是您的指南。

確定您的受眾

人們對(duì)顏色有不同看法。顏色是觀察者內(nèi)部發(fā)生的心理現(xiàn)象。根據(jù)個(gè)人喜好，文化發(fā)展和經(jīng)驗(yàn)，顏色對(duì)人有不同的影響。因此，為了了解人們對(duì)您設(shè)計(jì)的反應(yīng)，您需要確定您的受眾群體。

當(dāng)然，顏色有一般的含義。綠色通常代表自然，因?yàn)樗侵脖坏念伾Ｈ欢?，紅色等顏色在不同的文化中有不同的解釋。在西方世界，紅色與火災(zāi)，暴力和戰(zhàn)爭(zhēng)有關(guān)。它也與愛和激情有關(guān)。然而，像中國(guó)這樣的國(guó)家將紅色與繁榮和幸福聯(lián)系在一

因?yàn)轭伾性S多不同的含義，所以將您的心理顏色模型作為設(shè)計(jì)師與您的受眾進(jìn)行匹配非常重要。

要了解有關(guān)不同國(guó)家/地區(qū)和人口統(tǒng)計(jì)數(shù)據(jù)的顏色和顏色的更多信息，請(qǐng)查看營(yíng)銷和品牌中顏色心理和顏色含義的顏色。

紅篇：《設(shè)計(jì)師的讀書筆記!帶你重新全面認(rèn)識(shí)色彩系列之紅色篇》

橙色：《深入淺出學(xué)配色!帶你重新全面認(rèn)識(shí)色彩系列之橙色篇》

黃色文章：《深入淺出學(xué)配色!帶你重新全面認(rèn)識(shí)色彩系列之黃色篇》

綠色文章：《深入淺出學(xué)配色!帶你重新全面認(rèn)識(shí)色彩系列之綠色篇》

藍(lán)色文章：《深入淺出學(xué)配色!帶你重新全面認(rèn)識(shí)色彩系列之藍(lán)色篇》

紫色：《深入淺出學(xué)配色!帶你重新全面認(rèn)識(shí)色彩系列之紫色篇》

回顧色彩理論

色彩理論是混合色彩的邏輯結(jié)構(gòu)和實(shí)用指南。它包含從色輪到各種顏色含義的所有內(nèi)容。

《色彩搭配速成!3個(gè)實(shí)用方法幫你全面搞定配色》是一個(gè)很好的設(shè)計(jì)方法。你能通過(guò)研究來(lái)理解為什么Facebook是藍(lán)色的嗎？

尋找靈感

很多時(shí)候我們可能沒(méi)有靈感，沒(méi)關(guān)系，即使它是偉大的藝術(shù)家，我們也可以從別人的作品中學(xué)習(xí)并獲得靈感。

一個(gè)尋找靈感的好網(wǎng)站是：

Dribbble

Behance的

如果你想找到配色方案或材料靈感，你可以嘗試一下

MaterialUI

FlatUIColors

這些網(wǎng)站很有用，但嘗試從您正在設(shè)計(jì)的特定媒體外部查看設(shè)計(jì)。這樣做可以幫助您想出一個(gè)意想不到的獨(dú)特和愉快的配色方案。例如，您可以看一下室內(nèi)設(shè)計(jì)。

如果您想要不同的東西，請(qǐng)?jiān)谄渌幕O(shè)計(jì)中尋找色彩靈感。例如，韓國(guó)音樂(lè)視頻集以其色彩鮮艷且引人注目的調(diào)色板而聞名。每個(gè)框架都可以用作靈感來(lái)源。

配色方案無(wú)處不在，包括您的日常生活。下次出門，停下來(lái)欣賞周圍的色彩。

建立設(shè)計(jì)系統(tǒng)

設(shè)計(jì)系統(tǒng)（有時(shí)稱為樣式指南）是將所有元素封裝到設(shè)計(jì)中的框架。這包括從按鈕到排版的所有內(nèi)容。您需要考慮哪種按鈕以及導(dǎo)航欄的外觀。

有關(guān)設(shè)計(jì)系統(tǒng)的示例，請(qǐng)查看網(wǎng)易的設(shè)計(jì)規(guī)范：《內(nèi)部教程!超實(shí)用6步透視網(wǎng)易設(shè)計(jì)規(guī)范(附完整PDF下載)》，每個(gè)初學(xué)者都應(yīng)該在開始設(shè)計(jì)之前仔細(xì)查看。

構(gòu)建設(shè)計(jì)系統(tǒng)對(duì)色彩匹配有很大幫助。即使是草圖也會(huì)為您提供適合整體解決方案的想法，顏色和元素。

保持Kiss原則（盡可能簡(jiǎn)單），顏色越少越好。對(duì)于大多數(shù)設(shè)計(jì)系統(tǒng)，結(jié)構(gòu)是一個(gè)良好的開端：

背景

主要重點(diǎn)

次要重點(diǎn)

顏色錯(cuò)誤

成功的顏色

原色是最常用于重要按鈕和重音的顏色。對(duì)于許多公司來(lái)說(shuō)，這也是他們標(biāo)志的顏色。

輔助顏色是用于區(qū)分二次操作和主要操作的顏色。例如，主按鈕和輔助按鈕。錯(cuò)誤和成功的顏色，通常是紅色和綠色，傳達(dá)了設(shè)計(jì)狀態(tài)。例如，成功或錯(cuò)誤通知。

選擇配色方案

現(xiàn)在您已經(jīng)對(duì)靈感和設(shè)計(jì)系統(tǒng)進(jìn)行了粗略的描繪，現(xiàn)在是時(shí)候選擇一種配色方案了。對(duì)于一個(gè)基本的調(diào)色板，我喜歡將我的顏色并排放置，就像每個(gè)人都整齊地等待會(huì)議一樣。

基色可以更多，不要害怕嘗試大膽的顏色。

當(dāng)您進(jìn)一步確認(rèn)您選擇的顏色時(shí)，請(qǐng)問(wèn)自己：

設(shè)計(jì)目的和觀眾是否清晰？

什么顏色可以很容易理解？

什么顏色有視覺(jué)沖擊力并吸引你的眼睛？

你需要明亮或深色的配色方案嗎？

人們什么時(shí)候會(huì)在一天內(nèi)使用您的產(chǎn)品？

您希望您的設(shè)計(jì)傳達(dá)什么樣的心情？

你的配色方案比同類型的配色方案好嗎？

正如我在上一節(jié)中提到的，顏色在您的設(shè)計(jì)系統(tǒng)中將扮演不同的角色。這也意味著每種顏色在您的系統(tǒng)中具有不同的權(quán)重。例如，您的背景顏色將比主要提示更頻繁地使用。

因此，有時(shí)有利的是創(chuàng)建由不同尺寸的形狀組成的一次性設(shè)計(jì)，每個(gè)尺寸大致等于給定頁(yè)面上的顏色的出現(xiàn)頻率和平均表面積。 （導(dǎo)演：顏色重量越高，面積越大，例如背景顏色尺寸>主要顏色尺寸）

例如，這是Invision的配色方案：

您可以將基色更改為其他大小以預(yù)覽顏色方案。

應(yīng)用配色方案

為了讓您了解如何將顏色應(yīng)用到您的設(shè)計(jì)系統(tǒng)，讓我們來(lái)看看Airbnb。 Airbnb的主要顏色是Rausch（右起第二位），以公司起源的街道命名。喀山（下圖中的第一個(gè)右側(cè)）用作次要顏色，并且使用兩個(gè)灰色作為背景顏色。

對(duì)于大多數(shù)頁(yè)面，Airbnb使用霧灰色作為背景。您可以看到他們使用Rausch作為主要顏色來(lái)突出顯示重要操作，例如請(qǐng)求預(yù)訂清單。

喀山習(xí)慣于捕捉和吸引你的眼睛。注意它是如何補(bǔ)充原色的。

對(duì)于錯(cuò)誤消息，Airbnb使用淺紅色，這是一種陰影。紅色和感嘆號(hào)會(huì)立即引起您的注意，并告知您系統(tǒng)的狀態(tài)。

想想您設(shè)計(jì)中的視覺(jué)層次結(jié)構(gòu)?？紤]要突出顯示哪些設(shè)計(jì)組件并分配適當(dāng)?shù)念伾Ａ硗?，?qǐng)考慮使用不同顏色的陰影進(jìn)行懸停和點(diǎn)擊狀態(tài)。嘗試為您的產(chǎn)品應(yīng)用顏色。

最后

學(xué)習(xí)如何使用顏色設(shè)計(jì)對(duì)于設(shè)計(jì)師來(lái)說(shuō)是非常寶貴的，顏色方案需要不斷的實(shí)驗(yàn)和迭代。如果你想更容易處理顏色，唯一的辦法就是做更多的工作并嘗試。

« U-Mail電子郵件營(yíng)銷：什么樣的電子郵件模板具有高點(diǎn)擊率 | 如何設(shè)計(jì)以捕捉用戶的短暫關(guān)注 »