在我收藏夾里，收藏著大量?jī)?yōu)秀的設(shè)計(jì)，每次去看的時(shí)候，不停問自己為什么當(dāng)初這個(gè)設(shè)計(jì)吸引了我，后來終于找到一個(gè)點(diǎn)，就是色彩，在第一眼看到的時(shí)候，奪走我視覺焦點(diǎn)的就是色彩。
色彩是設(shè)計(jì)師的一個(gè)魔法棒，它能吸引你的注意力，喚起設(shè)計(jì)情感，在電商設(shè)計(jì)中，人們對(duì)產(chǎn)出做出的90%的快速?zèng)Q策來源于色彩，所以為什么國(guó)內(nèi)電商的“立即購(gòu)買”會(huì)是橙色，紅色，因?yàn)檫@個(gè)顏色能刺激用戶，能產(chǎn)生購(gòu)買沖動(dòng)！
那么怎么去定義一套色彩呢？一起來了解下
色彩怎么定義
1.了解產(chǎn)品性格
在定義色板的時(shí)候，首先需要去確定設(shè)計(jì)的目的是什么，試著去問問自己，我們的這個(gè)色彩需要給用戶傳遞什么樣的信息，是希望他有購(gòu)買欲望，還是希望他感受到尊貴感受，還是希望喚起他某種情緒，色彩可設(shè)定品牌基調(diào)，情緒。
▲ 可口可樂旗下Fuze Tea紅茶品牌，采用自然的綠色作為品牌顏色，來傳遞這款茶，融合植物、茶淬取物和其他健康成分。
▲ Uber (優(yōu)步)越南推出的網(wǎng)路“摩托車”接送服務(wù)，在UberMOTO全新品牌形象設(shè)計(jì)中，因?yàn)樵谠侥咸鞖夂苎谉?，所以采用了藍(lán)色綠色配色，斜45度的色塊拼接，延伸出了會(huì)反光的安全外套，還有醒目的安全帽，在一大票的“摩托車”群中，立刻就可以一目了然司機(jī)的位置。
2.了解用戶人群
▲ 男生和女生最喜歡的顏色
▲ 男生和女生最討厭的顏色
男性通常更喜歡大膽的顏色，而女性喜歡更柔和的顏色。此外，男性更喜歡深色的顏色(加入黑色的顏色)，而女性更容易接受明亮的顏色(添加了白色的色彩)。
人們對(duì)于顏色的看法不同，顏色根據(jù)個(gè)人喜好，文化宗教信仰不同，有不同的寓意，所以我們?cè)谠O(shè)計(jì)時(shí)候一定要去考慮我們的用戶誰在使用!
▲ 在西方世界里面，紅色代表恐怖和死亡，火災(zāi)，暴力戰(zhàn)爭(zhēng)。
▲ 在我們這，紅色卻是和繁榮富強(qiáng)，性格，火熱激情等聯(lián)系在一起，不同文化差異是我們做設(shè)計(jì)時(shí)候需要去考慮。
▲ 在西方國(guó)家，黑白代表純潔，優(yōu)雅，尊貴，高端感覺，包括很多大牌的服裝設(shè)計(jì)，店面裝修都是采用黑白。
▲ 在日本韓國(guó)，黑白代表死亡，喪禮等，文化的差異，和人群差異所以在設(shè)計(jì)的時(shí)候一定要重復(fù)考慮到。
3.了解色彩心理學(xué)
了解基礎(chǔ)的色彩心理學(xué)，有興趣的同學(xué)可以去搜索相關(guān)資料看看。
▲ 紅色：最容易引起人的注意、興奮、激動(dòng)、緊張。
▲ 橙色：充滿生機(jī)和活力的顏色讓人聯(lián)想到大地以及秋色，變化和運(yùn)動(dòng)的感覺。
▲ 黃色：明亮、輝煌、燦爛、愉快、親切、柔和的印象。
▲ 綠色：是豐饒、充實(shí)、平靜與希望綠色繼承了藍(lán)色所有具備的平靜的屬性。
▲ 藍(lán)色：藍(lán)色是冷色，讓人感到崇高、深遠(yuǎn)、純潔、透明、智慧。藍(lán)色也是公司最偏愛的顏色，代表著科技和理性。
▲ 紫色：紫色給人高貴、優(yōu)越、奢華、優(yōu)雅、流動(dòng)、不安的感覺，灰暗的紫色則是傷痛、疾病，容易造成心理上的憂郁、痛苦和不安的感覺。因此，紫色時(shí)而有脅迫性，時(shí)而有鼓舞性，在設(shè)計(jì)中一定要慎重使用。
4.尋找色彩靈感
早期時(shí)候很難去選定一個(gè)品牌色，，這個(gè)時(shí)候我們一定要去尋找靈感，下面推薦幾個(gè)工具
▲ https:/ /brandcolors.net/是一個(gè)特別好的網(wǎng)站，里面有全世界500強(qiáng)的品牌色板，所有知名公司的品牌色板這里都可以找到答案，可以從他們的品牌色板中去尋找我們想要的那種，和我們產(chǎn)品比較匹配的顏色。
▲ Dribbble和Behanc上搜索關(guān)鍵詞也能找到很多設(shè)計(jì)師的色板
▲ https:/ /www.materialui.co/colors谷歌色板庫(kù)上很多值得我們?nèi)W(xué)習(xí)
▲ http://www.home-designing.com/也可以從室內(nèi)設(shè)計(jì)師經(jīng)常用的室內(nèi)網(wǎng)站配色中去獲得一些設(shè)計(jì)靈感。
▲ 當(dāng)你找到喜歡的配色方案時(shí)，你可以用吸管根據(jù)來梳理喜歡的這個(gè)配色，做成色板，有必要吋候可以迸行凋整。
如何去定義一套UI配色
如何去定義一套APP的配色，如何用HSB去定義套配色。
什么的HSB?
HSB是一種顔色模式，在HSB模式中，H代表色相，S代表飽和度，B代表亮度!
1.多嘗試不同配色
在制作色板的時(shí)候，需要我們盡可能的把所有顏色和顏色靈感都創(chuàng)造出來，不要怕嘗試不好，然后把所有顏色嘗試處理后，再去縮小色板范圍，怎么縮小范圍，可以結(jié)合我前面說的那些原則，在UI設(shè)計(jì)中，可能額外需要注意幾個(gè)問題:
- 超鏈接顏色
- 品牌色
- 主要顏色，輔助顏色
- 成功顏色，錯(cuò)誤顏色
- 文字顏色，背景顏色
2.利用HSB色彩模型
第一步確定品牌色，品牌色一般企業(yè)LOGO的顏色，如果沒有可以去定義一個(gè)
以品牌色為基準(zhǔn)得出24色帶
我們拿Spotify這個(gè)軟件舉例，他品牌色是綠色，來定義它的一套色彩體系
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)，盡量選取一些和主品牌色比較舒服的顏色搭配。
最后根據(jù)篩選后得出的16色相環(huán)
調(diào)整B (亮度)和S (飽和度)
這一步我們需要去定義同頻的輔助色，也就是16色相環(huán)的輔助色，可以在亮度(B) 按-10，-20去加減，也可以在H上面以+-5去増加色相，原則就是需要有對(duì)比度，需要明顯。
調(diào)整飽和度值
調(diào)整明度，如果對(duì)比不明顯，可以-20, -30
最后得出一套同頻下的色盤，但是很相近，所以我們需要去排除一些
制定色板
和品牌色同頻的輔助色板
制定色板，這里需要使用到一個(gè)網(wǎng)站https://coolors.co/這里只需要輸入對(duì)應(yīng)的品牌色，就可以得出根據(jù)明度遞減遞增的色板，當(dāng)然你也可以去調(diào)整明度來得出色板。
自此我們得出了整個(gè)產(chǎn)品的調(diào)色板，很多電商大促，包括Airbnb和谷歌都是通過類似的方法得出他們的色盤！最后根據(jù)我們前面定義的，警告色，超鏈接顏色，成功提示色，我們可以從輔助色盤中得出對(duì)應(yīng)的顏色，警告用紅色，超鏈接用藍(lán)色，警告黃色，成功綠色等等。
漸變色板
取品牌輔助色相鄰近色顏色做漸變
最后
以上就是今天的分享，如何定義一個(gè)色彩體系和色盤。知識(shí)量比較大，特別是關(guān)于HSB的運(yùn)用，色盤出來了其實(shí)只是根據(jù)，關(guān)于如何色彩搭配其實(shí)是需要我們不斷的去嘗試!希望大家都能掌握這個(gè)方法。
原文地址：我們的設(shè)計(jì)日記（公眾號(hào)）
作者： sky
