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