色彩是一個產品給用戶最為直觀的感受，好的配色可以為產品錦上添花。

今天和大家聊聊色彩，不分享虛的，直接分享大家蘋果谷歌配色方法，幫你搞定一套界面中色彩體系和規(guī)范!

在我收藏夾里，收藏著大量優(yōu)秀的設計，每次去看的時候，不停問自己為什么當初這個設計吸引了我。后來終于找到一個點，就是色彩，在第一眼看到的時候，奪走我視覺焦點的就是色彩。

色彩是設計師的一個魔法棒，它能吸引你的注意力，喚起設計情感。

在電商設計中，人們對產出做出的90%的快速決策來源于色彩。為什么國內電商的“立即購買”會是橙色，紅色，因為這個顏色能刺激用戶，能產生購買沖動。

那么怎么去定義一套色彩呢？

色彩怎么定義

1. 了解產品性格

在定義色板的時候，首先需要去確定設計的目的是什么。

試著去問問自己，我們的這個色彩需要給用戶傳遞什么樣的信息，是希望他有購買欲望，還是希望他感受到尊貴感受，還是希望喚起他某種情緒，色彩可設定品牌基調、情緒。

▲可口可樂旗下Fuze Tea紅茶品牌，采用自然的綠色作為品牌顏色，表示這款茶融合植物、茶淬取物和其他健康成分。

▲Uber （優(yōu)步）越南推出的網路“摩托車”接送服務，在UberMOTO全新品牌形象設計中，因為在越南天氣很炎熱，所以采用了藍色綠色配色，斜45度的色塊拼接，延伸出了會反光的安全外套，還有醒目的安全帽，在一大票的“摩托車”群中，立刻就可以一目了然司機的位置。

2. 了解用戶人群

▲男生和女生最喜歡的顏色

▲男生和女生最討厭的顏色

男性通常更喜歡大膽的顏色，而女性喜歡更柔和的顏色。此外，男性更喜歡深色的顏色（加入黑色的顏色），而女性更容易接受明亮的顏色（添加了白色的色彩）。

人們對于顏色的看法不同，顏色根據個人喜好，文化宗教信仰不同，有不同的寓意。所以，我們在設計的時候一定要去考慮是什么用戶在使用。

▲在西方世界里面，紅色代表恐怖和死亡，火災，暴力戰(zhàn)爭。

▲在中國，紅色和繁榮富強，性格火熱激情等聯系在一起，不同文化差異是我們做設計時候需要去考慮的。

▲在西方國家，黑白代表純潔、優(yōu)雅、尊貴、高端感覺，包括很多大牌的服裝設計、店面裝修都是采用黑白。

▲在日本韓國，黑白代表死亡，喪禮等，文化的差異，和人群差異所以在設計的時候一定要重復考慮到。

3. 了解色彩心理學

了解基礎的色彩心理學，有興趣的同學可以去搜索相關資料看看。

▲紅色：最容易引起人的注意、興奮、激動、緊張。

▲橙色：充滿生機和活力的顏色讓人聯想到大地以及秋色，變化和運動的感覺。

▲黃色：明亮、輝煌、燦爛、愉快、親切、柔和的印象。

▲綠色：是豐饒、充實、平靜與希望綠色繼承了藍色所有具備的平靜的屬性。

▲藍色：藍色是冷色，讓人感到崇高、深遠、純潔、透明、智慧。藍色也是公司最偏愛的顏色，代表著科技和理性。

▲紫色：紫色給人高貴、優(yōu)越、奢華、優(yōu)雅、流動、不安的感覺，灰暗的紫色則是傷痛、疾病，容易造成心理上的憂郁、痛苦和不安的感覺。因此，紫色時而有脅迫性，時而有鼓舞性，在設計中一定要慎重使用。

4. 尋找色彩靈感

早期時候很難去選定一個品牌色，這個時候我們一定要去尋找靈感，下面推薦幾個工具。

▲https:/ /brandcolors.net/是一個特別好的網站，里面有全世界500強的品牌色板，所有知名公司的品牌色板這里都可以找到答案，可以從他們的品牌色板中去尋找我們想要的那種，和我們產品比較匹配的顏色。

▲Dribbble和Behanc上搜索關鍵詞也能找到很多設計師的色板

▲https:/ /www.materialui.co/colors谷歌色板庫上很多值得我們去學習

▲http://www.home-designing.com/也可以從室內設計師經常用的室內網站配色中去獲得一些設計靈感。

▲當你找到喜歡的配色方案時，：你可以用吸管根據來梳理喜歡的這個配色，做成色板，有必要吋候可以迸行凋整。

如何去定義一套UI配色

如何去定義一套APP的配色，如何用HSB去定義套配色。

什么是HSB？

HSB是一種顔色模式，在HSB模式中，H代表色相，S代表飽和度，B代表亮度。

1. 多嘗試不同配色

在制作色板的時候，需要我們盡可能把所有顏色和顏色靈感都創(chuàng)造出來，然后把所有顏色嘗試處理后，再去縮小色板范圍，可以結合我前面說的那些原則。

在UI設計中，可能額外需要注意幾個問題:

• 超鏈接顏色
• 品牌色
• 主要顏色，輔助顏色
• 成功顏色，錯誤顏色
• 文字顏色，背景顏色

2. 利用HSB色彩模型

第一步確定品牌色，品牌色一般是企業(yè)LOGO的顏色，如果沒有可以去定義一個。

以品牌色為基準得出24色帶：

我們拿Spotify這個軟件舉例，品牌色是綠色，來定義它的一套色彩體系。

h值（色相）以15，S和B不変，遞增得到基于品牌色的24個色帶。為什么是24個，24X15=360剛好圍繞色環(huán)盤一圏，因此得到一圈基于品牌色，明度和飽和度一致的顔色。

基于色帶得出16色相環(huán)：

細心的同學可能發(fā)現色帶上其實很多顔色都比較接近，比如綠色、藍色，我們需要再進一步篩選出合適的顏色作為16色相環(huán)，盡量選取一些和主品牌色比較舒服的顏色搭配。最后，根據篩選后得出的16色相環(huán)。

調整B （亮度）和S （飽和度）：

這一步我們需要去定義同頻的輔助色，也就是16色相環(huán)的輔助色，可以在亮度（B） 按-10、-20去加減，也可以在H上面以+-5去増加色相，原則就是需要有對比度，需要明顯。

調整明度，如果對比不明顯，可以-20，-30。

調整B飽和度值：

最后得出一套同頻下的色盤，但是很相近，所以我們需要去排除一些。

制定色板：

和品牌色同頻的輔助色板

制定色板，這里需要使用到一個網站https://coolors.co/這里只需要輸入對應的品牌色，就可以得出根據明度遞減遞增的色板，當然你也可以去調整明度來得出色板。

自此我們得出了整個產品的調色板，很多電商大促，包括Airbnb和谷歌都是通過類似的方法得出他們的色盤。最后，根據我們前面定義的，警告色，超鏈接顏色，成功提示色，我們可以從輔助色盤中得出對應的顏色，警告用紅色，超鏈接用藍色，警告黃色，成功綠色等等。

取品牌輔助色相鄰近色顏色做漸變：

最后

以上就是今天的分享，如何定義一個色彩體系和色盤。知識量比較大，特別是關于HSB的運用，色盤出來了其實只是根據，關于如何色彩搭配其實是需要我們不斷的去嘗試!希望大家都能掌握這個方法。

#專欄作家#

Sky，微信公眾號：我們的設計日記（ID：helloskys），人人都是產品經理專欄作家。支付寶體驗設計專家，阿里巴巴天貓設計專家；10年知名互聯網公司設計經驗，對于產品從0到1、品牌定位、金融產品、設計規(guī)范、運營規(guī)范、大促等有豐富實戰(zhàn)經驗。

本文原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載。

題圖來自Unsplash, 基于CC0協議。