設(shè)計(jì)規(guī)范
在界面設(shè)計(jì)中尘分，我們會(huì)遇到不知如何選取顏色，或配出來(lái)的色彩不和諧的情況，其實(shí)遇到這些困擾是因?yàn)槲覀儧](méi)有搭建好我們的UI色彩體系恒水。
色彩體系就是我們制定好的配色色板，它是我們?cè)赨I設(shè)計(jì)中的配色指南饲齐。像Ant design钉凌、Material design等設(shè)計(jì)規(guī)范中都有明確的給出自身產(chǎn)品的色彩體系。搭建產(chǎn)品的色彩系統(tǒng)對(duì)設(shè)計(jì)師是非常有必要的的捂人。
△Material Design 色板
△Ant Design 色板
那么如何科學(xué)的搭建UI色彩系統(tǒng)呢御雕？跟大家分享一套自己學(xué)習(xí)與總結(jié)的方法，希望對(duì)你有所啟發(fā)滥搭，也歡迎大家一起交流呀～
01
定義品牌色
品牌色是?體現(xiàn)產(chǎn)品特性和傳播理念?最直觀的視覺(jué)元素之一酸纲。在色彩選取時(shí)，需要先明確產(chǎn)品的品牌色瑟匆。
了解業(yè)務(wù)屬性與產(chǎn)品性格
品牌色的選取一般根據(jù)?業(yè)務(wù)屬性與產(chǎn)品性格?進(jìn)行選取闽坡。需要設(shè)計(jì)師了解產(chǎn)品所屬領(lǐng)域、產(chǎn)品定位脓诡、目標(biāo)受眾群體等无午，以及我們的品牌色想?傳遞給用戶怎樣的情感，?喚起用戶某種情緒呢祝谚？
不同的顏色會(huì)帶給用戶不同的情感認(rèn)知：
? 紅色：?代表興奮宪迟、激動(dòng)、力量...
? 橙色：?代表愉悅交惯、歡快次泽、親切...
? 黃色：?代表溫暖、明亮席爽、高貴...
? 藍(lán)色：?代表安全意荤、可靠、智慧...
? 綠色：?代表生機(jī)只锻、健康玖像、環(huán)保...
比如支付寶的藍(lán)色給人安全可靠的感覺(jué)，橙色的淘寶能激起人們的購(gòu)物欲齐饮，星巴克的綠色給人自然環(huán)保的印象等等捐寥。
當(dāng)我們不知如何選取品牌色時(shí)可以先看看我們同業(yè)務(wù)屬性的產(chǎn)品有哪些顏色，這里給大家分享一個(gè)非常棒的網(wǎng)站：
這個(gè)網(wǎng)站包含全世界500強(qiáng)產(chǎn)品的品牌色祖驱，我們可以從這個(gè)網(wǎng)站找尋與我們產(chǎn)品業(yè)務(wù)相似的品牌色握恳，獲取靈感。
02
制定同頻色板
定好品牌色之后捺僻，我們需要以品牌色的為基礎(chǔ)乡洼，制定出我們產(chǎn)品的配色色板崇裁。后續(xù)在配色的時(shí)候，我們就從配好的色板去選取顏色束昵。
制定24色板
我們以品牌色的色相（H）為基礎(chǔ)拔稳，將?360°的色環(huán)分割成24份，得到24種不同的顏色妻怎。?也就是色相需要分別遞增或者遞減?15°?（15°x24=360°）
為什么是24色板（24個(gè)色相組成的色環(huán)）
因?yàn)樵?60°色環(huán)上提取24個(gè)色相壳炎，需要我們以15°為增量進(jìn)行計(jì)算。（15°x24=360°）
另外大家都知道相差15°的顏色為鄰近色逼侦，那我們提取出來(lái)的任何兩個(gè)相鄰的顏色都是鄰近色匿辩，我們拆分出來(lái)的色彩是比較和諧的。
我以支付寶的品牌色（#205 93 91）為例榛丢，來(lái)制定它的24色板铲球。
保持S（純度）、B（明度）不變晰赞，將其H（色相）分別遞增或遞減15°稼病，得到24種不同的顏色。
24色板是幫助我們提取輔助色的便捷工具掖鱼，后續(xù)我們想選取任何顏色直接從我們制定好的色板中選取就行了然走。但是，在UI設(shè)計(jì)中戏挡，我們是用不了這么多顏色的芍瑞，24色板中有很多顏色是非常接近的。
我們可以根據(jù)自身產(chǎn)品系統(tǒng)的復(fù)雜度褐墅，?在24色板上去掉接近的顏色拆檬，進(jìn)一步篩選出我們所需要的顏色數(shù)量。?通常會(huì)制定16色板妥凳、12色板或8色板竟贯。比如ant design的系統(tǒng)級(jí)色彩體系是制定了12個(gè)色板，Spotify是制定的16個(gè)色板逝钥。
色彩校正
雖然在制定24色板時(shí)屑那，我們保持了純度（S）、明度(B)不變艘款，但是這些顏色看起來(lái)依舊是不同頻的持际。比如剛剛制定的色板中，色相為175的青色看起來(lái)較亮磷箕，而色相為10的紅色看起來(lái)就暗一些。
這是因?yàn)?顏色本身自帶感官明度屬性阵难，?也就是發(fā)光度有所區(qū)別岳枷，所以導(dǎo)致我們制定出來(lái)的24色板依然不是同頻的，會(huì)讓整個(gè)色板看起來(lái)是凹凸不平的。為了讓不同顏色看上去更和諧空繁、畫(huà)面不跳躍殿衰，我們需要進(jìn)行色彩校正。
方法：?在色彩上疊加一層?純黑?圖層盛泡，將純黑圖層顏色?模式調(diào)整為色相闷祥，?通過(guò)無(wú)彩色系下的明度色值進(jìn)行對(duì)比校正，?以主色明度為標(biāo)準(zhǔn)傲诵，?讓不同顏色與主色?達(dá)到同頻?（優(yōu)先調(diào)整B值凯砍，當(dāng)B值無(wú)法滿足時(shí)調(diào)整H值）。
03
制定同色系色階
通過(guò)色彩校正后我們就得到我們所需要的同頻色板拴竹，我們還需要進(jìn)一步?制定同色系色階悟衩，衍生出更多的顏色。
制定同色階方法
方法：?在sketch栓拜、或ps配色面板中座泳，我們知道，越往左S越小幕与，往右S越大挑势；往下B越小，往上B越大啦鸣。
有了這個(gè)概念后潮饱，下面的內(nèi)容就很好理解了。
設(shè)定品牌色為色值為（S?赏陵，B?）饼齿，?連接品牌色色值點(diǎn)與左上純白點(diǎn)右下純黑點(diǎn)，?得到兩條線段蝙搔。將這兩條線段分別?均分為5份缕溉，?我們會(huì)得到?11個(gè)點(diǎn)，計(jì)算出S吃型、b值证鸥，?這11個(gè)點(diǎn)組成的色板就是我們的同色系色階。
我還是以支付寶的品牌色（#205 93 91）為例勤晚，來(lái)計(jì)算其同色系色階枉层。
第一步：連接品牌色與白色、黑色赐写，得到?兩條線段鸟蜡。
第二步：將?線段1?（S0到左上白色點(diǎn)的這一條線段）?均分為5份，?分別?計(jì)算出S挺邀、B值揉忘。
我們知道點(diǎn)越往左上移動(dòng)跳座，S越來(lái)越小，B越來(lái)越大泣矛。
品牌色坐標(biāo)點(diǎn)?左側(cè)?的點(diǎn):
橫坐標(biāo) (飽和度)以(So/5)遞減疲眷；
縱坐標(biāo)(明度)以[(100-Bo)/5]遞增；
分別計(jì)算出這從左往右五個(gè)點(diǎn)的值為：
第三步：將?線段2?（S0到右下黑色點(diǎn)的這一條線段）?均分為5份您朽，?分別計(jì)算出S狂丝、B值。
我們知道點(diǎn)越往右下移哗总，S越來(lái)越大几颜，B越來(lái)越小。
所以品牌色坐標(biāo)點(diǎn)?右側(cè)?的點(diǎn):
橫坐標(biāo) (飽和度)以[(100-So)/5]遞增
縱坐標(biāo)(明度)以(Bo/5) 遞減
分別計(jì)算出這五個(gè)點(diǎn)的值為：
最后我們就整合我們的同色階色板魂奥，得到了一條由主色衍生出來(lái)的同色系色階
以同樣的方法我們可以得出所有顏色的同色系色階菠剩。
值得注意的是，雖然我們按照方法制定出了11個(gè)色階耻煤，但是有的衍生色非常黑或者非常白具壮，我們需要將其刪除掉。ant design是刪掉了最后一個(gè)色彩哈蝇，只留下了10階棺妓。
△Ant Design 同色系色階
04
色彩系統(tǒng)輸出
通過(guò)前面的步驟我們得出了主色、24同頻色板炮赦、同色色階怜跑。將我們所有的色板進(jìn)行整理輸出，就可以得到我們產(chǎn)品的整個(gè)色彩系統(tǒng)吠勘。有了色彩系統(tǒng)這個(gè)配色指南性芬，我們的配色過(guò)程就會(huì)輕松很多了。
在UI設(shè)計(jì)中剧防，色彩規(guī)范主要包括主色植锉、輔助色、文字顏色峭拘。所以光有色板還是不夠的俊庇，我們還需做進(jìn)一步的補(bǔ)充說(shuō)明。
選取輔助色
在UI設(shè)計(jì)中鸡挠，選取的輔助色通常滿足：
1. 平衡主色辉饱。?減少用戶在使用產(chǎn)品的過(guò)程中對(duì)品牌色產(chǎn)生的視覺(jué)疲勞。
2. 與主色有明顯區(qū)分拣展。?避免所選輔助與品牌色差距不大彭沼，傳遞的調(diào)性太過(guò)一致。
根據(jù)色彩原理：
? 鄰近色：?色相差值15°以內(nèi)的顏色為鄰近色
? 類似色：?色相差值30°以內(nèi)的顏色為類似色
? 互補(bǔ)色：?色相差值180°的顏色為互補(bǔ)色
? 分裂互補(bǔ)三色組：?一種顏色與其互補(bǔ)色的鄰近兩種色
類似色是最合適的選擇之一备埃，與主色有區(qū)分且平衡主色姓惑，讓畫(huà)面更和諧译株，另外需要與主色有明顯區(qū)分，但又不能太突兀挺益，我們通常會(huì)選補(bǔ)色的鄰近色，而不是直接選取補(bǔ)色乘寒。當(dāng)然如果補(bǔ)色與主色不是很突兀的話望众，也可以之間用補(bǔ)色作為輔助色。
那么我們基于品牌色就衍生出了 3 個(gè)輔助色：?1個(gè)類似色+2個(gè)分裂互補(bǔ)色伞辛。?直接從我們之前做好的色板中提取出這三個(gè)顏色烂翰，與它的同色系色階就行啦～
在UI設(shè)計(jì)中輔助色被作為功能色使用，功能色代表了明確的信息以及狀態(tài)蚤氏，比如成功甘耿、出錯(cuò)、失敗竿滨、提醒佳恬、鏈接等。功能色的選取需要遵守用戶對(duì)色彩的基本認(rèn)知于游。比如出錯(cuò)會(huì)選用紅色毁葱、成功會(huì)選用綠色。
中性色
中性色包含了黑贰剥、白倾剿、灰，是頁(yè)面中文字蚌成、背景常用的顏色前痘，合理地選擇中性色能夠令頁(yè)面信息具備良好的主次關(guān)系，助力閱讀體驗(yàn)担忧。
大家常最熟悉的文字顏色就是#333芹缔，#666，#999涵妥，我們需要注意在UI設(shè)計(jì)中乖菱，應(yīng)避免純黑色的使用。
文字顏色還有一種做法是通過(guò)?調(diào)純黑色（或者帶一點(diǎn)色彩傾向的黑色）的不透明度來(lái)實(shí)現(xiàn)蓬网。
總結(jié)
科學(xué)搭建UI色彩體系分為以下六個(gè)步驟：
1. 定義主色
2. 制定同頻24色板
3. 色彩校正
4. 選取輔助色
5. 補(bǔ)充中性色
6. 輸出整個(gè)色彩系統(tǒng)
希望通過(guò)搭建色彩體統(tǒng)窒所，為我們的配色帶來(lái)便利，以及方便組內(nèi)的所有設(shè)計(jì)師遵循同一套配色體系帆锋，讓界面設(shè)計(jì)更加規(guī)范吵取。
求關(guān)注呀~
