2021-12-8 ui設(shè)計(jì)分享達(dá)人
念起
作為一名UI設(shè)計(jì)師，不免每天都會(huì)和色彩打交道，但有時(shí)總會(huì)苦惱于色感把握不準(zhǔn)，讓我們配的色彩，總是“不對(duì)味兒”。我結(jié)合在近期的一些項(xiàng)目中對(duì)于HSB色彩模式的應(yīng)用，與大家分享一些結(jié)合HSB（HSV）色彩模式幫助我們進(jìn)行配色的理論和技巧。也歡迎大家一起討論，共同進(jìn)步。
色彩模式有哪些？
我們生活中借助觀看而感覺(jué)到的“色彩”，可分為光加上顏色之后所透出的“透出色”，以及光照射到物體上反射出的“反射色”。
透過(guò)色是以“加色混合”的方式，由紅、綠、藍(lán)，共三色混合，表現(xiàn)出各種的顏色，我們的計(jì)算機(jī)屏幕就使用這種方式表現(xiàn)顏色。這種色彩表現(xiàn)方式，稱為RGB色彩。
▲圖1 《設(shè)計(jì)入門教室-色彩設(shè)計(jì)的原理》
物體色彩的反射色，是用畫具或染料、油墨等“色材”來(lái)表現(xiàn)顏色，印刷品基本是由青、洋紅、黃、黑四種油墨相互組合而成，所有的顏色皆以“減色混合”的方式表現(xiàn)，這種方式稱為CMYK色彩。
RGB和CMYK兩大色彩模式是最重要和最基礎(chǔ)的。RGB更是與我們的工作密不可分?？墒?，在實(shí)際工作中我們往往很少直接通過(guò)RGB模式進(jìn)行調(diào)色。
簡(jiǎn)單聊聊HSB色彩模式
1.HSB是什么？
「這是什么顏色？鮮不鮮艷？很亮還是很暗？」當(dāng)我們看到一個(gè)顏色時(shí)，往往心中都會(huì)閃現(xiàn)這三個(gè)問(wèn)題。
事實(shí)上，人類對(duì)于色彩的第一個(gè)感知往往是從色相（Hue）開始，即紅色橙黃色綠色青色藍(lán)色紫中的一個(gè)，然后是它的深淺度。
HSB模式對(duì)應(yīng)的媒介是人眼，在選擇色彩這件事上，HSB使用了更貼近人類感官直覺(jué)的方式來(lái)描述色彩，它把顏色分為色相、飽和度、明度三個(gè)因素（將我們?nèi)四X的“深淺”概念擴(kuò)展為飽和度和明度）。
H—色相/色調(diào)：顏色的相貌，顏色的調(diào)性，在標(biāo)準(zhǔn)色輪上，色相是按位置度量的，取值在0—360度之間（黑色與白色無(wú)色相）。
▲圖2 網(wǎng)絡(luò)圖片-圓形色相環(huán)
S—表示飽和度/純度：顏色的純度，取值在0—100之間，飽和度高色彩較艷麗。飽和度低色彩就接近灰色。
B—表示明度/亮度：顏色的明暗程度。取值也是在0—100之間。亮度高色彩明亮，亮度低色彩暗淡，亮度最高得到純白，最低得到純黑。
工作中，我們常用的設(shè)計(jì)軟件ps、 Sketch都是通過(guò)拾色器幫助我們選擇需要的顏色。
▲圖3 軟件拾色器截圖
HSB模式，可以完美固定HSB中的某一個(gè)參數(shù)，只對(duì)其他兩個(gè)參數(shù)做改變或者只改動(dòng)其中的一個(gè)參數(shù)，這一點(diǎn)，完全符合人的色彩直覺(jué)，也只有HSB能做到，而RGB、CMYK都是牽一發(fā)動(dòng)全身的節(jié)奏。
通過(guò)HSB模式，我們可以在已有顏色的基礎(chǔ)上，進(jìn)行飽和度、明度的微調(diào)。以及選定主體色之后，根據(jù)需要，通過(guò)數(shù)值的加減改變色相，選取合適的顏色（互補(bǔ)色為180°、對(duì)比色為120°到150°、類似色為90°、鄰近色為60°、同位色為15°。）
2.在設(shè)計(jì)中如何運(yùn)用HSB色彩模式
通過(guò)上述對(duì)HSB的原理、特點(diǎn)簡(jiǎn)單介紹后，相信大家對(duì)其都有了基本的了解。以下我結(jié)合在工作中的幾個(gè)案例來(lái)說(shuō)明HSB在設(shè)計(jì)中是如何實(shí)際應(yīng)用。
舉個(gè)例子：如果我們?cè)谠O(shè)計(jì)一個(gè)頁(yè)面時(shí)，除主色之外我們需要一個(gè)近似色，就可以運(yùn)用HSB色彩模式。
通過(guò)圖片我們可以看出右側(cè)的顏色整體視覺(jué)效果感覺(jué)更加和諧、舒適。在界面設(shè)計(jì)中我們常會(huì)遇到以顏色對(duì)同一種類型的不同狀態(tài)進(jìn)行區(qū)分，比如背景，按鈕等。
結(jié)合上述的例子，以及飽和度與明度的變化規(guī)律：
（在不改變色相的情況下）
HSB色彩模式在項(xiàng)目中的實(shí)際應(yīng)用
1.爆款、預(yù)約詳情頁(yè)色卡庫(kù)
在去年的vivo游戲中心爆款、預(yù)約詳情頁(yè)的改版優(yōu)化中，都運(yùn)用了HSB色彩模式。使不同游戲可以根據(jù)頭部氛圍圖配置出3個(gè)相同色相值的近似色并運(yùn)用到頁(yè)面中。保證色彩搭配有規(guī)律可行，并且展示效果在基準(zhǔn)線之上。
系統(tǒng)統(tǒng)一從頭部氛圍圖吸取、確定顏色后，通過(guò)調(diào)整飽和度和明度值（色值不變），即可得到一套色卡。
▲圖4 vivo游戲中心預(yù)約詳情頁(yè)設(shè)計(jì)規(guī)范
2.聯(lián)運(yùn)深色模式中的應(yīng)用
在雙系統(tǒng)的深色模式適配要點(diǎn)中有提到“高飽和的顏色在深色的背景下容易產(chǎn)生視覺(jué)抖動(dòng)，從而導(dǎo)致人眼疲勞”，在深色模式下我們應(yīng)當(dāng)選擇更淺的顏色以達(dá)到更好的可讀性。
我通過(guò)結(jié)合Material Design以及Developer深色模式適配規(guī)范中的色彩示例來(lái)簡(jiǎn)單說(shuō)明，怎樣借助HSB，來(lái)達(dá)到深色模式色彩科學(xué)合理的適配。
▲圖5 Material Design深色模式適配規(guī)范
▲圖6 Developer深色模式適配規(guī)范
通過(guò)對(duì)兩種規(guī)范的學(xué)習(xí)以及對(duì)比，可以看出Material Design的規(guī)范相對(duì)而言更加直觀和系統(tǒng)（手把手教你），Developer的適配則比較微妙（只可意會(huì)），沒(méi)有明確的說(shuō)明方法或者規(guī)律。但Developer示例中的適配則更加注重視覺(jué)表達(dá)以及色彩的一致性，帶給人的視覺(jué)感受更加的舒適和諧。
重點(diǎn)分析Developer深色適配中的配色示例中，通過(guò)將Developer給出的深色模式適配示例的色值轉(zhuǎn)換為HSB之后，發(fā)現(xiàn)其HSB的數(shù)值變化是有一定規(guī)律的，規(guī)律基本符合：
BUT：
在根據(jù)Developer的深色模式顏色適配的示例總結(jié)其規(guī)律的過(guò)程中，對(duì)于數(shù)值的變化，產(chǎn)生了一些疑惑：
直到了解到：「每個(gè)顏色都有其專屬的“感知明度”，也就是亮度」
將色相環(huán)“去色”后，可以明顯看出：
每一種顏色（色相），都有著獨(dú)特的“感知明度”，在S、B相同的情況下，黃，青，洋紅的顏色會(huì)讓人感覺(jué)比較亮，結(jié)合這點(diǎn)再結(jié)合Developer深色模式的適配示例以及得到的基礎(chǔ)規(guī)律后。可以得出：
將上述我們所得的“HSB配色一般規(guī)律”運(yùn)用在vivo游戲中心聯(lián)運(yùn)深色模式主色的推導(dǎo)，以及vivo游戲中心爆款詳情頁(yè)自動(dòng)吸色系統(tǒng)優(yōu)化中，使得頁(yè)面的閱讀體驗(yàn)更加良好，整體配色和諧舒適。
▲圖7 vivo游戲中心、聯(lián)運(yùn)游戲爆款詳情頁(yè)
寫在最后的話
HSB在設(shè)計(jì)工作中的應(yīng)用當(dāng)然不止上面講的這些，比如我們經(jīng)常碰到的頁(yè)面中為了區(qū)分不同層級(jí)的文字，會(huì)給予文字不同灰度的顏色（最常見的#000000、#333333、#666666、#999999）也是應(yīng)用了HSB模式，當(dāng)我們所要區(qū)分的層級(jí)多于四種時(shí)，就不需要在色板里糾結(jié)了，只要按照上述的規(guī)律，以不同明度的變化就可以了。
在我尋找資料的過(guò)程中，也看到很多通過(guò)色相，飽和度，明度的一致或者對(duì)比等方式得到協(xié)調(diào)優(yōu)秀配色的方法。這些都可以通過(guò)方法和HSB模式的結(jié)合，快速方便準(zhǔn)確幫我們找到合適的顏色。
▲圖8 網(wǎng)絡(luò)圖片-色相環(huán)配色圖
在日常設(shè)計(jì)中，可以通過(guò)個(gè)人對(duì)色彩的感知與把握選取一個(gè)顏色，再通過(guò)HSB快速的選擇相應(yīng)的色板，運(yùn)用在頁(yè)面配色中。到這里關(guān)于HSB色彩模式在設(shè)計(jì)中的應(yīng)用就全部介紹完成了，如果你閱讀完也有所收獲，不要忘了點(diǎn)贊喲~
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com