2020-7-24 資深UI設(shè)計(jì)者
色彩在UI設(shè)計(jì)中的作用:加深品牌印象與品牌感、引導(dǎo)用戶(hù)視覺(jué)凹增加易讀性、區(qū)分信息交互的狀態(tài)、營(yíng)造氛圍傳遞熱度……
不管是做 UI 設(shè)計(jì)還是畫(huà)插畫(huà),有很多同學(xué)覺(jué)得自己是因?yàn)樘熨x不夠所以對(duì)色彩的敏感度不夠,其實(shí)不然。一個(gè)可能是大家總結(jié)的太少,從來(lái)都是憑感覺(jué)和運(yùn)氣去配色,但配色都是有講究的。
一個(gè)設(shè)計(jì)作品呈現(xiàn)到用戶(hù)面前,第一眼進(jìn)入眼簾的就是產(chǎn)品的視覺(jué)表現(xiàn),而產(chǎn)品的色彩在其中起到了舉足輕重的作用,毫無(wú)疑問(wèn)色彩搭配對(duì)于設(shè)計(jì)師來(lái)說(shuō)是非常重要的。那么具體到實(shí)際項(xiàng)目中該使用什么怎樣的色彩,需要怎么做呢?
用戶(hù)界面是一個(gè)設(shè)計(jì)師用理性思維解決用戶(hù)感性需求的窗口。如果對(duì)色彩的運(yùn)用不加以克制,界面可能會(huì)顯得花哨而沒(méi)有主次;但過(guò)于拘謹(jǐn)又容易使界面保守,難以激發(fā)用戶(hù)情緒,下面以Bee express項(xiàng)目的實(shí)例來(lái)理性推導(dǎo)制定一套色彩系統(tǒng)。
做過(guò)設(shè)計(jì)的同學(xué)應(yīng)該都知道顏色模式:RGB、CMYK、Lab 等等,這里不做過(guò)多的解釋了。另外每個(gè)顏色具有一定的性格特征和表達(dá)方式,而且都會(huì)有正反兩面。雖然每種色彩都有正向性格特征,但是我們?cè)诙ㄎ恢黧w色之前一定要知道所選擇色彩的負(fù)面特征對(duì)企業(yè)是否會(huì)帶來(lái)負(fù)面的影響,
開(kāi)始之前我們需要了解在配色過(guò)程中需要避免出現(xiàn)的問(wèn)題,如果你經(jīng)常出現(xiàn)下列的問(wèn)題,保證你在試用期內(nèi)一次性就能拿到全部薪資,emmm……
雖然設(shè)計(jì)是相通的,但是在不同的設(shè)計(jì)領(lǐng)域進(jìn)行配色時(shí),依然會(huì)存在巨大的區(qū)別。更換品牌的主體色,都不會(huì)是因?yàn)樵O(shè)計(jì)師自己的決定,而是公司在商業(yè)策略上優(yōu)先做出了調(diào)整,然后通過(guò)品牌視覺(jué)上的變更將這個(gè)信息傳遞給消費(fèi)者。
Bee Express快遞、速遞柜業(yè)務(wù)為主,前期的主色及視覺(jué)形象以橙黃色為主,為了避免視覺(jué)跳躍性太大,以及后期IP形象(蜜蜂吉祥物)打造,本次品牌色彩升級(jí)在原有基礎(chǔ)上優(yōu)化了色調(diào),以保證后期產(chǎn)品的易用性和延展性,并利用最科學(xué)、最適用的方式推導(dǎo)出輔助色,以提升應(yīng)用視覺(jué)的豐富性和感官體驗(yàn)。
express原主色:
為了不影響原有色調(diào)前期的視覺(jué)傳播,即在原有主體色的基礎(chǔ)上調(diào)整SHB的數(shù)值,讓色彩更具視覺(jué)沖擊力,在色彩襯托(字體、圖標(biāo))更清晰。
通過(guò)調(diào)整后的主體色也能看出,明亮清晰的主體色(品牌色)也更適合在界面中的運(yùn)用,為信息傳遞、引導(dǎo)操作、品牌價(jià)值帶來(lái)更大的提升。
同色系為統(tǒng)一的色相,使用中可以加深品牌色的感知,可以讓界面更有層次,同時(shí)可以讓界面保持色彩上的一致性,整體感較強(qiáng),產(chǎn)生低對(duì)比度的和諧美感,給人協(xié)調(diào)統(tǒng)一的感覺(jué)。
具體是指與品牌色 H(色相)一致,通過(guò)改變 S(飽和度)與 B(明度)變化產(chǎn)生的色組。分別往淺色/深色方向按均勻數(shù)據(jù)增減,各產(chǎn)生5個(gè)坐標(biāo)值。
綜上能看出,使用同一色系即可完成一個(gè)項(xiàng)目,但是對(duì)于中大型項(xiàng)目來(lái)說(shuō)實(shí)在是過(guò)于單調(diào),沒(méi)有太多的層次感,因此我們需要多色搭配為輔。多色的輔助顏色可設(shè)定不同的任務(wù)屬性和情感表達(dá),再搭配中性色黑白灰,能賦予更多的變化和層次。
根據(jù)主體色 H(色相)為基礎(chǔ),不斷地遞增、遞減 15,在 0-360 之間可以得出 24 個(gè)顏色,也就是將 360° 色環(huán)分割為 24 份,(24份在360°色環(huán)上,每一個(gè)色相的角度為15°),最終得到下圖24色。
輔助色需要滿(mǎn)足的兩個(gè)條件:
和品牌色有明顯區(qū)分:避免所選輔助色感官上給用戶(hù)視覺(jué)區(qū)別與品牌色差距不大,傳遞的調(diào)性太過(guò)一致;
不能過(guò)于突兀:根據(jù)色彩原理,互補(bǔ)色是最能與品牌色本色產(chǎn)生視覺(jué)感官對(duì)比的顏色,但可能會(huì)有些突兀。為了讓顏色的輔助起到豐富畫(huà)面的作用,而不是反而讓整個(gè)版面顯得不和諧,所以選擇互補(bǔ)色的鄰近色作為輔助色,避免直接使用互補(bǔ)色。
基于品牌色可衍生出 3 個(gè)輔助色:一個(gè)與品牌色傳遞調(diào)性有明顯區(qū)分的類(lèi)似色;兩個(gè)互補(bǔ)色的鄰近色。
類(lèi)似色搭配:使用色相相近的顏色,頁(yè)面元素不會(huì)相互沖突,更加協(xié)調(diào)有質(zhì)感。
互補(bǔ)色搭配:選擇使用互補(bǔ)色,最佳搭配是一種作為主色,另一種用于強(qiáng)調(diào)。它們有著非常強(qiáng)烈的對(duì)比度,用在需要特別強(qiáng)調(diào)某個(gè)元素時(shí)會(huì)非常有效。
每一種顏色都有自己的「感官明度」,也就是發(fā)光度。根據(jù)現(xiàn)有的使用場(chǎng)景,類(lèi)似色和互補(bǔ)色大都用在同層級(jí)的信息展示上,而當(dāng)我們將最終得到的輔助色擺放在一起之后發(fā)現(xiàn),雖然我們提取出的輔助色明度色值都一致,因?yàn)轭伾旧碜詭У母泄倜鞫葘傩杂兴鶇^(qū)別,導(dǎo)致視覺(jué)上會(huì)有明顯的明暗差別。需要通過(guò)發(fā)光度來(lái)進(jìn)行最終的顏色校正。
校準(zhǔn)方式:依次在輔助色上疊加一層純黑圖層,將該純黑圖層顏色模式調(diào)整為 Hue(色相),就可以通過(guò)無(wú)彩色系下的明度色值,進(jìn)行對(duì)比,使色彩視覺(jué)感官保持一致(青色和藍(lán)色屬冷色調(diào),固需加深)。
根據(jù)上面同色系的明度、純度對(duì)比規(guī)則,對(duì)所有定義的輔助色進(jìn)行明度和純度的輔助色彩輸出,最終得到輔助色色板。H(色相)一致,通過(guò)改變 S(飽和度)與 B(明度)變化產(chǎn)生色組。分別往淺色/深色方向按均勻數(shù)據(jù)增減,各產(chǎn)生5個(gè)坐標(biāo)值
刪除最左側(cè)的3種同色系,因明度過(guò)低時(shí),顏色已經(jīng)非常接近于黑色,色相在肉眼上幾乎已經(jīng)趨于一致。最后得到基于品牌色推導(dǎo)出的全色系色階色板。
配色常常從確定主色開(kāi)始,根據(jù)行業(yè)類(lèi)型和視覺(jué)訴求的需要,選擇一種居于支配的色彩作為主調(diào)色彩,構(gòu)成畫(huà)面的整體色彩傾向。然后選擇輔色,添加點(diǎn)綴色,最后按照色彩組合的原則完成設(shè)計(jì)中的需求。
雖然有了以上的配色方式,但一套標(biāo)準(zhǔn)的色彩系統(tǒng)還會(huì)包含中性色規(guī)范、顏色的使用規(guī)范等等。相信解決了大部分的需求,剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個(gè)理性科學(xué)的方法,如果想更加優(yōu)秀,還需要進(jìn)一步深入地去學(xué)習(xí)色彩理論知識(shí),多看優(yōu)秀的配色作品提升審美,總之要多看、多實(shí)踐和多思考。
文章來(lái)源:優(yōu)設(shè) 作者:能量眼球
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com