原著：@jonathanzwhite on medium

翻譯：傑克 jacklidesign2u@gmail.com

在色彩中設計

色彩是設計師手中強大的工具。他吸引眼球，激發情感，而且傳遞著深意。在一篇廣泛引用的研究-色彩在市場中的影響，研究人員發現對於一些產品，人們對產品的90%拍腦袋僅僅基於顏色，色彩的重要性可想而知。

在設計中有效的使用色彩至關重要。但是使用不同色彩的組合卻很難。每一種顏色有它獨特的含義，而且它們的組合形式是無限的。

你對色彩探索的越多，你就會培養一種對於好的色彩組合的直覺和鑒賞力。

選擇一個色板

優秀色板一瞥

有時候一個色板是瞬間靈感的產物，但是大多時候它來自於一個系統的過程。

確定目標

在做任何事之前，首先確定你的目標。好的設計是將色板和你的目標統一的。

• 你想通過你的設計傳遞什麼訊息
• 你設計的目的是什麼？是用於告知還是重在說服？
• 你想要你的設計激發什麼情感？

你的設計目標將會成為你挑選色板的指導準則。

確定用戶

誰是你的受眾，你如何通過設計影響他們？

人們看待色彩是不同的。正如 Fairchild 所說，色彩是由觀察者由內而外引發的一種心理學現象. 人有不同的個人偏好，文化熏陶和人生經歷，所以色彩對我們有不同的影響。因此，為了理解人們如何對你的設計做出反應，你需要定義你的用戶。

有些色彩的含義不分地域的，有些則迥然不同。綠毫無疑問代表了自然因為它是植物的顏色。然而紅是因文化而異的色彩，在西方，紅和火，暴力還有戰爭緊密相連。它還和愛與激情有著不解之緣。然而，在中國紅卻與富饒，幸福聯繫在一起。

中國的紅色信封

正因為色彩有如此多的含義，將你的心理色彩模型與用戶的相匹配是至關重要的。

想了解更多的關於不同國家和地區的色彩含義，請參考：品牌與市場中的色彩心理學 和 色彩的含義。

研習色彩理論

當選擇色板時，懂一些色彩理論往往很有幫助。色彩理論是對色彩混合的邏輯結構和實踐指導。 從色輪到色彩的單獨含義，它無所不包。

設計學院的 色彩原理 和Hubspot的 101個色彩理論 都是好的入門書。有關色彩理論的有趣應用，請參考 為什麼Facebook是藍的？市場色彩運用背後的科學。

尋找靈感

有時很難將符合你設計的色板可視化。沒有問題，偉大的藝術家竊取。換句話說，他們從其他的藝術家找尋靈感。

通常我們是通過Dribbble和Behance來尋找色板的靈感。如果你想要找到像Material Design這樣的設計風格的色彩靈感，可以使用一個叫 MaterialUI 的網站。對於扁平化設計，可以參考 FlatUIColors。

那些網站很有用，不過可以嘗試從你要設計的媒介之外的東西中學習。這樣做能夠讓你得到意想不到且獨一無二的色板。例如，你可以看看室內設計。

室內空間重獲新生

如果你想要一點不同，找一找其他文化中的色彩靈感。例如，韓國的MV聞名於他們對色板的運用。每一幀甚至都能成為一種靈感來源。

裝置設計也是一個好的靈感源

你沒有必要去韓國找色彩靈感。只要你想，你的生活中哪裡都是。下次你出門，留意一下你身邊的色彩吧。

色彩靈感無處不在

當你找到一些能夠激發你靈感的東西，就為他創建一個色板吧。你可以用相應的色彩工具將相片中的色板提取出來並可以適當加以修改。

建立一個設計系統

一個設計系統，或者叫做（style guide）樣式準則，就是一個包含你所有設計要素的框架。想想你將會使用什麼按鈕和導航欄，從按鈕到字體，設計系統都能囊括。

例如，Salesforce的設計系統，還有 創業公司必看的50條優美的設計樣式準則。

MashCreative的設計系統

在選擇色板之前建立一個設計系統往往很有幫助，哪怕是一個草圖。這樣做會讓你知道你有哪些元素，還有你需要對他們應用哪些色彩。

當為你的設計選擇色板的時候，最好遵循KISS（Keep it simple，stupid）準則。顏色越少越好。對於大多數設計系統來說，一下的結構是一個好的開始：

• 背景
• 首要色
• 次要色
• 錯誤色
• 完成色

首要色就是你通常給重要的按鈕和強調用的顏色。對於多數公司來說，首要色往往就是他們logo的顏色。

次要色是用來區分次要行為和首要行為的顏色。例如，首要按鈕和次要按鈕。錯誤色和完成色，典型的說紅色和綠色，傳遞了色彩的狀態。例如，成功或者錯誤的通知。

設計狀態

選擇色板

現在你已經有了設計靈感和設計系統（哪怕是粗略的草圖），也是時候該選擇色板了。

對於一個基本的色板，我喜歡將我的顏色一一放好，就像是藝術家對待他們的調色板一樣。

是時候拿出你所有的色彩靈感然後創建你的色板了。多多益善。不要害怕對你的色彩做實驗。

當你要縮小你的色板選擇時，再回頭想想你一開始的兩個部分：確定目標和確定用戶。問你自己下面的問題：

• 什麼顏色是更易得到的？
• 什麼顏色具有視覺影像，而且能抓住你的眼球？
• 你需要一個淺色還是暗色的色板？一天的什麼時候人們會用你的產品？
• 什麼情感狀態是你的設計想傳達的？有沒有那個色板比其他的更符合這個情感狀態？

正如我在上一個部分提到的，色彩在設計系統中有不同的角色。這些意味著每一種顏色在系統中有不同的權重。例如，你的背景色將會比強調色用的更多。

正因為如此，創建一個簡易的包含在設計中出現概率和覆蓋面積相匹配的不同尺寸的色板是一個不錯的選擇。

例如，這是Invision 的色板：

一個集合的表達可能會像這樣：

應用色板

讓我們看看Airbnb是怎麼將色彩運用到設計系統的。Airbnb的首要色是Rausch, 該顏色是以公司誕生的街命名。Kazan所謂次要色，而另外兩個灰色則作為背景色使用。

Airbnb的品牌色

對於大多數頁面來說，Airbnb用了Foggy灰作為背景。你能看到他們用了rausch 作為他們的主色來強調重要的行為比如發出預約訂單的請求。

Kazan，類似於綠松石的顏色，被用於吸引眼球。注意他是如何襯托主要色的。

對於錯誤信息，Airbnb使用了亮紅，可以說是一種rausch的陰影吧。這種紅，配上驚嘆號，立馬吸引住了眼球而且將系統的狀態提醒你了。

一開始你的設計不需要任何顏色。關注布局和原色的排列。當你滿意了你有的之後，你就可以開始將色板應用到設計中去。

色彩的從無到有

想一想你的設計中的視覺層級。考慮那些組件你想要高亮並且給他分配合適的顏色。而且還得考慮對於滑鼠懸浮和點擊狀態使用不同顏色的灰度。

小結

色彩的運用來自於實驗和迭代。如果你想要更好地運用它，唯一的答案就是多加練習。將色彩看做一個添加劑。如果你已經將布局和功能設計好了，那麼你就可以盡你所能試驗你的色板了。

學習如何設計色彩對於一個設計師而言是無比珍貴的。隨著你能更好的選擇色板，你將會培養出一種一拿到項目就能夠可視化色彩組合的能力。

更多乾貨和養料，請關注微信公眾號: UX未來

還可以加入QQ群：261193629

推薦閱讀：