我們需要什么樣的配色方案？

B端的系統(tǒng)的主色代表著一個系統(tǒng)的氣質(zhì)，與所在行業(yè)、產(chǎn)品的定位、用戶群體都有一定的關(guān)系。前面調(diào)研了眾多竟品及市場前沿配色方案，目的就是期望從它們身上找出共性，引領(lǐng)我們的系統(tǒng)找到最適合的方案，這是知彼。

光有“知彼”是不夠的，我們還要清晰的知道自己是誰？這樣我們才可以說我們的配色方案是最適合我們的，有理有據(jù)的方案。

B端系統(tǒng)的真正使用人群比較復(fù)雜，具有年齡跨度大，文化水平參差不等，從事行業(yè)廣泛等特點。

源于自然之美的色調(diào)，突顯靈活性與再生的創(chuàng)意！

依據(jù)彩通色彩研究所專家的說法，紐約時裝周2021春夏季的色彩強調(diào)我們渴望能激發(fā)出巧思與創(chuàng)意的色彩，這些色彩的百搭性質(zhì)穿越季節(jié)，容許更多的選擇自由，適于表達原創(chuàng)的風格，也足夠靈活來適應(yīng)現(xiàn)代新的更片斷化的生活方式 。

“2021春夏的色調(diào)呈現(xiàn)出大自然，強調(diào)我們渴望擁有全年皆宜的靈活色彩，這一季的色彩充滿道地真實的感覺，這種感覺對色彩而言愈來愈重要，同時結(jié)合了某種程度的舒適與輕松感，并散發(fā)出活力，激勵振奮我們的心情”

說到這里“主題色”如何來選擇？

色彩對于人的大腦的沖擊力大于造型，比如淘寶，我們會記憶起淘寶的主色是橙色；色彩是影響人類視覺思維的重要因素，色彩能直觀的體現(xiàn)產(chǎn)品的性格和氣質(zhì)，所以選擇一款適合產(chǎn)品的主色很重要。

我們的用戶在更替，如何讓產(chǎn)品年輕化、品牌年輕化是現(xiàn)在幾乎所有企業(yè)都在思考的問題，新的用戶群體從小接受的教育和喜好決定著產(chǎn)品的發(fā)展方向。

比如：我們這次顏色升級中律動、青春活力是核心關(guān)鍵詞，而藍色則可以讓產(chǎn)品視覺符號得到延續(xù)。

對于主題色的選擇指標有哪些？

通過關(guān)鍵詞圖片像素化提取顏色，同時參考B端產(chǎn)品顏色流行趨勢和當年的年度流行色，以及竟品顏色分析結(jié)果，獲取藍色的色相、純度、明度范圍。

2020潘通年度顏色經(jīng)典藍（19-4052 Classic Blue），顏色值為#174A7B（H207 S81 B48）

2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver，顏色值為#02569D（H207 S99 B62）

假設(shè)：竟品的主題色藍色的色相范圍為205-225；純度的范圍為70-96，平均值為86；明度的范圍為70-98，平均值為88，B端產(chǎn)品流行趨勢的主色也多是藍色系，色相范圍為200-232；純度的平均值為70；明度的平均值為68。

色彩的使用范圍及色階有哪些？

色彩的應(yīng)用場景包括：關(guān)鍵行動點，操作狀態(tài)、重要信息高亮，圖形化等場景；針對這些使用場景只有一個色值是不能滿足所有場景使用的，所以我們要建立主題色的不同色階來滿足不同場景下顏色的使用。以建立色彩層級，或傳達信息，或強化界面層級。

在色彩系統(tǒng)中，常使用 Tints and shades 系統(tǒng)來建立調(diào)色板，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板，在符合無障標準的區(qū)域，選擇不同明度飽和度的色彩，形成有梯度、有層級的彩色調(diào)色板。

B端產(chǎn)品中光有“主角”是不夠的，還要有“配角” 所以我們還要看一下輔助顏色是如何定義的？

輔助色是為了幫助頁面區(qū)分狀態(tài)和層級而設(shè)立的顏色，主要包括圖表類儀表盤顏色和功能色，通過合理的顏色傳遞產(chǎn)品正確的信息，讓其信息傳達更明確清晰。

輔助色的作用是配合襯托產(chǎn)品主色調(diào)，在不同的產(chǎn)品中，輔助色運用的策略是不同的，比如我們在竟品調(diào)研中發(fā)現(xiàn)，輔助色經(jīng)常是取自主色的鄰近色、對比色和互補色等。

儀表盤配色：通過對竟品的分析可得知，優(yōu)秀的儀表盤的配色有多系列及低純度的特點，多系列配色是為了滿足用戶個性化的需求，而低純度是考慮用戶在長時間使用產(chǎn)品，色彩對其心理的影響。

功能色：這類顏色在系統(tǒng)一般不會隨意更改，而且特定的語義一般都有固定的色相，只需改變其純度和明度，使其視覺上符合主色的氣質(zhì)，使其搭配和諧。

1.通過默認主題色選擇輔助色及默認儀表盤顏色

我們以默認主題色為#467FEA（H 219 S 70 B 92) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以180°為起點，以15°為增量或減量標準，生成24色色板。這個色板是我們選取輔助色的重要依據(jù)。

以鄰近色、互補色、對比色為原則選擇豐富的顏色

鄰近色：在色相環(huán)中，相差15°的顏色為鄰近色，凡在60°范圍內(nèi)的顏色都屬于鄰近色的范圍，主色和鄰近色的色系組成的搭配，可以在同一個色調(diào)中構(gòu)建出豐富的視覺層次感和質(zhì)感，賦予不同的功能含義，信息表達明確，和諧統(tǒng)一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。

對比色： 在色相環(huán)中，角度相差120°-180°之間的色彩，這里使用了120°為角度來選擇對比色。

互補色： 在色相環(huán)中成180°角的兩種顏色，互為補色；主色可以和其互補色的兩個色彩的搭配，該色彩可以為鄰近色，例如：藍色和黃色、橙色的搭配；這種搭配既能保持互補色搭配強烈的對比度，區(qū)分關(guān)鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。

例如：藍色作為主色，互補色黃色作為輔助色應(yīng)用在圖表、圖標和標簽上，再選擇黃色的鄰近色橙色作為另外一個輔助色，應(yīng)用在不同的關(guān)鍵信息上，有助于用戶更好的閱讀產(chǎn)品的功能和內(nèi)容。

獲得輔助色-9色相

通過鄰近色、互補色和對比色的選擇，我們從24色色相環(huán)中得到了9色相色環(huán)，9色相色盤優(yōu)化后將做為圖表的儀表盤顏色和語義類的功能色出現(xiàn)頁面設(shè)計中。

校正輔助顏色

雖然我們保持相同的飽和度和明度，使用科學的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導(dǎo)致在視覺感受上的感官體驗并不同頻。

黃色、綠色的明度即發(fā)光度較高，藍色就稍微偏暗一些，導(dǎo)致色板看起來不一致，為了讓不同色相看起來更加協(xié)調(diào)，需要調(diào)整色板的明度和飽和度，以保證視覺感官體驗同頻且更加和諧舒適。

校正后的顏色主要用于功能色和儀表盤顏色。

從輔助色中提取功能色及儀表盤色系

通過對竟品的分析總結(jié)同時結(jié)合默認主題色分析得出的9色色環(huán)，歸納分離，最后形成系統(tǒng)的默認儀表盤顏色。

功能色的目的是明確信息及狀態(tài)，比如成功、出錯、失敗、提醒、鏈接等；功能色的選取需要遵守用戶對色彩的基本認知，結(jié)合分析得出的9色色環(huán)，顏色校正，得出系統(tǒng)功能色。

輔助色的色階

為了度量不同的可視化從高到低的數(shù)值，我們儀表盤顏色遠遠不夠，所有為了保證視覺上的統(tǒng)一性，我們需要加入輔助色的明度色階來區(qū)分數(shù)據(jù)層級。

同時我們產(chǎn)品有深色和淺色兩種模式，由于視覺對比的原因，在深色的場景看下看的顏色，和淺色場景下看到的顏色是兩種感受，深色場景下顏色會發(fā)亮，所以為了保持視覺上統(tǒng)一，我們也需要加入輔助色的色階。

輔助色色階建立方法與主色的色階建立方法一致，使用 Tints and shades 系統(tǒng)，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板。

模擬方案一主色、輔助色及消色匯總

通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶，我們分別給顏色取了名字和編號，命名方式采用植物色彩命名，這也是200多年前顏色數(shù)值出來之前的命名方式，最早見于1814 年出版的《維爾納色彩命名法》

本期交流就先到這里，希望這個配色的思路能夠幫到大家，感謝大家的耐心觀看！

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( m.izc.net.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)