在我的花瓣里收藏著大量我覺得優(yōu)秀的設(shè)計(jì)，當(dāng)我一次又一次去看它們的時(shí)候，不停問自己為什么當(dāng)初這個(gè)設(shè)計(jì)吸引了我，后來終于找到一個(gè)點(diǎn)，就是色彩。

在看到第一眼時(shí)候，奪走我視覺焦點(diǎn)的就是色彩，所以色彩在設(shè)計(jì)里面的重要性不言而喻。

色彩是設(shè)計(jì)師的一個(gè)魔法棒，它能吸引你的注意力，喚起設(shè)計(jì)情感，傳遞很重要的信息，在色彩對(duì)于營(yíng)銷設(shè)計(jì)中，研究發(fā)現(xiàn)，對(duì)于很多產(chǎn)品，人們對(duì)產(chǎn)品做出的90%的快速?zèng)Q策來源于色彩，所以為什么國(guó)內(nèi)電商APP中的“立即購(gòu)買”會(huì)使用橙色、紅色，因?yàn)檫@個(gè)顏色能刺激用戶，能產(chǎn)生戲份感受。

所以有效的使用顏色對(duì)設(shè)計(jì)很重要，今天我們重點(diǎn)來講講在UI設(shè)計(jì)中，如何來定義一套調(diào)色板，一套色彩指南。

在定義色板的時(shí)候，首先需要去確定好設(shè)計(jì)目的是什么，試著去問問自己，我們的這個(gè)色彩需要給用戶傳遞什么樣的信息，是希望他有購(gòu)買欲望，還是希望他感受到尊貴感受，還是希望喚起他某種情緒？色彩可以設(shè)定品牌的的基調(diào)，情緒。

可口可樂旗下Fuze Tea紅茶 品牌，采用自然的綠色作為品牌顏色，來傳遞表達(dá)出茶融合植物、茶淬取物和其他健康成分。

Uber（優(yōu)步）越南推出的網(wǎng)路“摩托車”接送服務(wù)，在UberMOTO全新品牌形象設(shè)計(jì)中，因?yàn)樵侥咸鞖夂苎谉幔圆捎昧怂{(lán)色綠色配色，斜45度的色塊拼接，延伸出了會(huì)反光的安全外套，還有醒目的安全帽，在一大票的“摩托車”群中，可以一目了然的看到司機(jī)所在位置。

男生和女生最喜歡的顏色

男生和女生最討厭的顏色

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

人們對(duì)于顏色的看法不同，顏色根據(jù)個(gè)人喜好，文化宗教信仰不同，有不同的影響，所以在設(shè)計(jì)時(shí)候一定要去考慮我們的用戶是誰在使用。

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

但是在中國(guó)，紅色卻是和繁榮富強(qiáng)、火熱激情等詞聯(lián)系在一起，不同國(guó)家的文化差異是我們做設(shè)計(jì)時(shí)候需要去考慮。

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

在東方國(guó)家，黑白代表死亡，喪禮等，文化的差異和人群差異所以在設(shè)計(jì)的時(shí)候一定要考慮到。

了解基礎(chǔ)的色彩心理學(xué)，關(guān)于色彩心理學(xué)這里不做詳細(xì)分享，有興趣的同學(xué)可以去搜索相關(guān)資料看看。

紅色：最容易引起人的注意、興奮、激動(dòng)、緊張。

橙色：是一種充滿生氣和活力的顏色讓人聯(lián)想到大地以及秋色，變化和運(yùn)動(dòng)的感覺。

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

綠色：它的表現(xiàn)價(jià)值是豐饒、充實(shí)、平靜與希望，綠色繼承了藍(lán)色所有具備的平靜的屬性。

藍(lán)色：讓人感到崇高、深遠(yuǎn)、純潔、透明、智慧。藍(lán)色也是很多公司偏愛的顏色，代表著科技和理性。

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

早期時(shí)候很難去選定一個(gè)品牌色，或者一個(gè)色板，這個(gè)時(shí)候我們一定要去尋找靈感，沒關(guān)系，偉大的藝術(shù)家都是頭，我們可以從很多地方獲取靈感。

https:/// 里面有全世界500強(qiáng)的品牌色板，所有知名公司的品牌色板這里都可以找到答案，可以從他們的品牌色板中去尋找想要的。

Dribbble和Behanc上搜索關(guān)鍵詞也能找到很多設(shè)計(jì)師的色板

https://www./colors谷歌色板庫(kù)

http://www./也可以從室內(nèi)設(shè)計(jì)師經(jīng)常用的室內(nèi)網(wǎng)站配色中去獲得一些設(shè)計(jì)靈感

當(dāng)找到喜歡的配色方案時(shí)，你可以用吸管，來梳理你喜歡的這個(gè)配色，做成色板，有必要時(shí)候可以進(jìn)行調(diào)整。

重點(diǎn)來了，如何去定義一套APP的配色，今天告訴大家的這個(gè)小方法是如何運(yùn)用HSB去定義一套配色。

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

在制作色板的時(shí)候，需要我們盡可能的把所有顏色和顏色靈感都創(chuàng)造出來，不要怕嘗試不好，然后把所有顏色嘗試處理后，再去縮小色板范圍，怎么縮小范圍，可以結(jié)合我前面說的那些原則。在UI設(shè)計(jì)中，可能額外需要注意幾個(gè)問題：

1.超鏈接顏色

2.品牌色

3.主要顏色，輔助顏色

4.成功顏色，錯(cuò)誤顏色

5.文字顏色，背景顏色

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

以品牌色為基準(zhǔn)得出24色帶

拿Spotify舉例，我們來定義它的一套色彩體系。

h值(色相)以15，S和B不變，遞增得到基于品牌色的24個(gè)色帶，為什么是24個(gè)，24X15=360剛好圍繞色環(huán)盤一圈所以因此我們得到一圈基于品牌色，明度和飽和度一致性的顏色。

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

細(xì)心的同學(xué)可能發(fā)現(xiàn)色帶上其實(shí)很多顏色都比較接近，比如綠色，藍(lán)色，我們需要再進(jìn)一步篩選出合適的顏色作為16色相環(huán)，盡量選取一些和主品牌色比較舒服的顏色搭配。

調(diào)整S（飽和度）和B（亮度）

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

最后得出一套在同頻下的色盤，但是實(shí)際使用中用不到那么多，這些顏色很多也很接近，所以需求去除一些比較接近的顏色

制定色板

和品牌色同頻的輔助色板

制定色板，這里需要使用到一個(gè)網(wǎng)站 https:/// 這里只需要輸入對(duì)應(yīng)的品牌色，就可以得出根據(jù)明度遞減遞增的色板，當(dāng)然你也可以去調(diào)整明度來得出色板。

最終我們得出了整個(gè)產(chǎn)品的調(diào)色板，很多電商大促，包括Airbnb和谷歌都是通過類似的方法得出它們的色盤。最后根據(jù)我們前面定義的，警告色，超鏈接顏色，成功提示色?？梢詮妮o助色盤中得出對(duì)應(yīng)的顏色，警告用紅色，超鏈接用藍(lán)色，警告用黃色，成功用綠色。

漸變色板

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

如何定義一個(gè)色彩體系和色盤，特別是關(guān)于HSB的運(yùn)用，色盤出來了其實(shí)只是根據(jù)，關(guān)于如何色彩搭配其實(shí)是需要我們不斷的去嘗試,希望大家都能掌握這個(gè)方法。