2021-9-29 ui設(shè)計(jì)分享達(dá)人
我們需要什么樣的配色方案？
B端的系統(tǒng)的主色代表著一個(gè)系統(tǒng)的氣質(zhì)，與所在行業(yè)、產(chǎn)品的定位、用戶群體都有一定的關(guān)系。前面調(diào)研了眾多竟品及市場(chǎng)前沿配色方案，目的就是期望從它們身上找出共性，引領(lǐng)我們的系統(tǒng)找到最適合的方案，這是知彼。
光有“知彼”是不夠的，我們還要清晰的知道自己是誰？這樣我們才可以說我們的配色方案是最適合我們的，有理有據(jù)的方案。
B端系統(tǒng)的真正使用人群比較復(fù)雜，具有年齡跨度大，文化水平參差不等，從事行業(yè)廣泛等特點(diǎn)。
源于自然之美的色調(diào)，突顯靈活性與再生的創(chuàng)意！
依據(jù)彩通色彩研究所專家的說法，紐約時(shí)裝周2021春夏季的色彩強(qiáng)調(diào)我們渴望能激發(fā)出巧思與創(chuàng)意的色彩，這些色彩的百搭性質(zhì)穿越季節(jié)，容許更多的選擇自由，適于表達(dá)原創(chuàng)的風(fēng)格，也足夠靈活來適應(yīng)現(xiàn)代新的更片斷化的生活方式 。
“2021春夏的色調(diào)呈現(xiàn)出大自然，強(qiáng)調(diào)我們渴望擁有全年皆宜的靈活色彩，這一季的色彩充滿道地真實(shí)的感覺，這種感覺對(duì)色彩而言愈來愈重要，同時(shí)結(jié)合了某種程度的舒適與輕松感，并散發(fā)出活力，激勵(lì)振奮我們的心情”
說到這里“主題色”如何來選擇？
色彩對(duì)于人的大腦的沖擊力大于造型，比如淘寶，我們會(huì)記憶起淘寶的主色是橙色；色彩是影響人類視覺思維的重要因素，色彩能直觀的體現(xiàn)產(chǎn)品的性格和氣質(zhì)，所以選擇一款適合產(chǎn)品的主色很重要。
我們的用戶在更替，如何讓產(chǎn)品年輕化、品牌年輕化是現(xiàn)在幾乎所有企業(yè)都在思考的問題，新的用戶群體從小接受的教育和喜好決定著產(chǎn)品的發(fā)展方向。
比如：我們這次顏色升級(jí)中律動(dòng)、青春活力是核心關(guān)鍵詞，而藍(lán)色則可以讓產(chǎn)品視覺符號(hào)得到延續(xù)。
對(duì)于主題色的選擇指標(biāo)有哪些？
通過關(guān)鍵詞圖片像素化提取顏色，同時(shí)參考B端產(chǎn)品顏色流行趨勢(shì)和當(dāng)年的年度流行色，以及竟品顏色分析結(jié)果，獲取藍(lán)色的色相、純度、明度范圍。
2020潘通年度顏色經(jīng)典藍(lán)（19-4052 Classic Blue），顏色值為#174A7B（H207 S81 B48）
2021潘通年度顏色搭配色鳥舍系列中19-4151Skydiver，顏色值為#02569D（H207 S99 B62）
假設(shè)：竟品的主題色藍(lán)色的色相范圍為205-225；純度的范圍為70-96，平均值為86；明度的范圍為70-98，平均值為88，B端產(chǎn)品流行趨勢(shì)的主色也多是藍(lán)色系，色相范圍為200-232；純度的平均值為70；明度的平均值為68。
色彩的使用范圍及色階有哪些？
色彩的應(yīng)用場(chǎng)景包括：關(guān)鍵行動(dòng)點(diǎn)，操作狀態(tài)、重要信息高亮，圖形化等場(chǎng)景；針對(duì)這些使用場(chǎng)景只有一個(gè)色值是不能滿足所有場(chǎng)景使用的，所以我們要建立主題色的不同色階來滿足不同場(chǎng)景下顏色的使用。以建立色彩層級(jí)，或傳達(dá)信息，或強(qiáng)化界面層級(jí)。
在色彩系統(tǒng)中，常使用 Tints and shades 系統(tǒng)來建立調(diào)色板，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板，在符合無障標(biāo)準(zhǔn)的區(qū)域，選擇不同明度飽和度的色彩，形成有梯度、有層級(jí)的彩色調(diào)色板。
B端產(chǎn)品中光有“主角”是不夠的，還要有“配角” 所以我們還要看一下輔助顏色是如何定義的？
輔助色是為了幫助頁面區(qū)分狀態(tài)和層級(jí)而設(shè)立的顏色，主要包括圖表類儀表盤顏色和功能色，通過合理的顏色傳遞產(chǎn)品正確的信息，讓其信息傳達(dá)更明確清晰。
輔助色的作用是配合襯托產(chǎn)品主色調(diào)，在不同的產(chǎn)品中，輔助色運(yùn)用的策略是不同的，比如我們?cè)诰蛊氛{(diào)研中發(fā)現(xiàn)，輔助色經(jīng)常是取自主色的鄰近色、對(duì)比色和互補(bǔ)色等。
儀表盤配色：通過對(duì)竟品的分析可得知，優(yōu)秀的儀表盤的配色有多系列及低純度的特點(diǎn)，多系列配色是為了滿足用戶個(gè)性化的需求，而低純度是考慮用戶在長(zhǎng)時(shí)間使用產(chǎn)品，色彩對(duì)其心理的影響。
功能色：這類顏色在系統(tǒng)一般不會(huì)隨意更改，而且特定的語義一般都有固定的色相，只需改變其純度和明度，使其視覺上符合主色的氣質(zhì)，使其搭配和諧。
1.通過默認(rèn)主題色選擇輔助色及默認(rèn)儀表盤顏色
我們以默認(rèn)主題色為#467FEA（H 219 S 70 B 92) 為起始點(diǎn)，S（飽和度）、B（明度）保持不變，H（色相）以180°為起點(diǎn)，以15°為增量或減量標(biāo)準(zhǔn)，生成24色色板。這個(gè)色板是我們選取輔助色的重要依據(jù)。
以鄰近色、互補(bǔ)色、對(duì)比色為原則選擇豐富的顏色
鄰近色：在色相環(huán)中，相差15°的顏色為鄰近色，凡在60°范圍內(nèi)的顏色都屬于鄰近色的范圍，主色和鄰近色的色系組成的搭配，可以在同一個(gè)色調(diào)中構(gòu)建出豐富的視覺層次感和質(zhì)感，賦予不同的功能含義，信息表達(dá)明確，和諧統(tǒng)一感很好，視覺上的趣味性，顏色的搭配顯得很柔和。
對(duì)比色： 在色相環(huán)中，角度相差120°-180°之間的色彩，這里使用了120°為角度來選擇對(duì)比色。
互補(bǔ)色： 在色相環(huán)中成180°角的兩種顏色，互為補(bǔ)色；主色可以和其互補(bǔ)色的兩個(gè)色彩的搭配，該色彩可以為鄰近色，例如：藍(lán)色和黃色、橙色的搭配；這種搭配既能保持互補(bǔ)色搭配強(qiáng)烈的對(duì)比度，區(qū)分關(guān)鍵信息，次要信息，又能增加視覺上的趣味性，色彩看上去豐富多彩。
例如：藍(lán)色作為主色，互補(bǔ)色黃色作為輔助色應(yīng)用在圖表、圖標(biāo)和標(biāo)簽上，再選擇黃色的鄰近色橙色作為另外一個(gè)輔助色，應(yīng)用在不同的關(guān)鍵信息上，有助于用戶更好的閱讀產(chǎn)品的功能和內(nèi)容。
獲得輔助色-9色相
通過鄰近色、互補(bǔ)色和對(duì)比色的選擇，我們從24色色相環(huán)中得到了9色相色環(huán)，9色相色盤優(yōu)化后將做為圖表的儀表盤顏色和語義類的功能色出現(xiàn)頁面設(shè)計(jì)中。
校正輔助顏色
雖然我們保持相同的飽和度和明度，使用科學(xué)的方法得到了較為合適的色相，但由于色彩本身自帶感官明度屬性，導(dǎo)致在視覺感受上的感官體驗(yàn)并不同頻。
黃色、綠色的明度即發(fā)光度較高，藍(lán)色就稍微偏暗一些，導(dǎo)致色板看起來不一致，為了讓不同色相看起來更加協(xié)調(diào)，需要調(diào)整色板的明度和飽和度，以保證視覺感官體驗(yàn)同頻且更加和諧舒適。
校正后的顏色主要用于功能色和儀表盤顏色。
從輔助色中提取功能色及儀表盤色系
通過對(duì)竟品的分析總結(jié)同時(shí)結(jié)合默認(rèn)主題色分析得出的9色色環(huán)，歸納分離，最后形成系統(tǒng)的默認(rèn)儀表盤顏色。
功能色的目的是明確信息及狀態(tài)，比如成功、出錯(cuò)、失敗、提醒、鏈接等；功能色的選取需要遵守用戶對(duì)色彩的基本認(rèn)知，結(jié)合分析得出的9色色環(huán)，顏色校正，得出系統(tǒng)功能色。
輔助色的色階
為了度量不同的可視化從高到低的數(shù)值，我們儀表盤顏色遠(yuǎn)遠(yuǎn)不夠，所有為了保證視覺上的統(tǒng)一性，我們需要加入輔助色的明度色階來區(qū)分?jǐn)?shù)據(jù)層級(jí)。
同時(shí)我們產(chǎn)品有深色和淺色兩種模式，由于視覺對(duì)比的原因，在深色的場(chǎng)景看下看的顏色，和淺色場(chǎng)景下看到的顏色是兩種感受，深色場(chǎng)景下顏色會(huì)發(fā)亮，所以為了保持視覺上統(tǒng)一，我們也需要加入輔助色的色階。
輔助色色階建立方法與主色的色階建立方法一致，使用 Tints and shades 系統(tǒng)，通過在顏色上面增加白色，或者增加黑色，來改變它的明度和飽和度，形成同色系的調(diào)色板。
模擬方案一主色、輔助色及消色匯總
通過以上分析我們得出模擬的主題色、儀表盤顏色、功能色及消色。為了方便記憶，我們分別給顏色取了名字和編號(hào)，命名方式采用植物色彩命名，這也是200多年前顏色數(shù)值出來之前的命名方式，最早見于1814 年出版的《維爾納色彩命名法》
本期交流就先到這里，希望這個(gè)配色的思路能夠幫到大家，感謝大家的耐心觀看！
藍(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)問題，請(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