旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 行業(yè)資訊 > 非常干貨系列之UI設(shè)計師的配色的優(yōu)缺點(diǎn)
非常干貨系列之UI設(shè)計師的配色的優(yōu)缺點(diǎn)
時間:2018-03-10來源:mwtacok.cn點(diǎn)擊量:作者:馬晨皓
時間:2018-03-10點(diǎn)擊量:作者:馬晨皓

近年來,在不同的數(shù)字產(chǎn)品當(dāng)中,我們會發(fā)現(xiàn)大量鮮艷的色彩和不同的漸變效果,而這些產(chǎn)品的類型橫跨主打趣味性和娛樂性的應(yīng)用和相對嚴(yán)肅的功能性和商業(yè)性的產(chǎn)品。但是,鮮艷的色彩對于用戶體驗(yàn)的影響,討論依然很多。今天的文章,我們就一起來探討一下這個問題。



 

明艷的色彩是如何提升UI設(shè)計效果的?

提升可讀性和易讀性

可讀性和易讀性是設(shè)計師選取配色時候需要考慮的基本因素。可讀性是用戶閱讀文本內(nèi)容的難易沉痼,易讀性則涉及到特定字母文字之間的區(qū)分度。

鮮艷的色彩能夠提供足夠好的對比度,有助于提升可讀性和易讀性,讓布局中的各個元素之間的區(qū)分度變得明顯。但是高對比度并不一定總是奏效的,如果文本和背景之間的對比度過大,可能會產(chǎn)生暈影從而導(dǎo)致難于閱讀。這也是為什么需要設(shè)計師創(chuàng)造出相對溫和、恰當(dāng)?shù)膶Ρ榷龋邔Ρ榷仍谕癸@展示性元素的時候是不錯的選擇。

銳化導(dǎo)航并提升互動

視覺層次幾乎是所有的數(shù)字產(chǎn)品中創(chuàng)造導(dǎo)航和交互的核心元素。UI 組件需要以層次分明的方式組織起來,用戶的大腦才能通過層次所營造的差異區(qū)分對象,明白優(yōu)先級。

色彩是有層次的,但是這種層次是怎么樣被理解,則和用戶的思維有關(guān)系。紅色和橙色是大膽鮮亮的色彩,乳白色和奶黃是柔和的色彩,明亮的色彩更容易被注意到,所以設(shè)計師會使用它們來表現(xiàn)他們覺得需要突出顯示的元素。將同一種色彩運(yùn)用在不同的元素上的時候,相同的色彩會使得它們產(chǎn)生在重要性或者功能上的關(guān)聯(lián)。

可識別性

人類的大腦對于鮮艷大膽的色彩反映強(qiáng)烈,這也是為什么鮮艷的色彩更容易被記住。在數(shù)字產(chǎn)品當(dāng)中,色彩相對更加鮮艷的UI 會更容易脫穎而出。不過,通常而言,即便如此,色彩的選取也是要基于目標(biāo)受眾和市場調(diào)研的。

如果一個企業(yè)的LOGO、產(chǎn)品和它們的網(wǎng)站都使用了高度統(tǒng)一的配色,那么這在一定程度上將品牌的識別度最大化了。通過這種方式,設(shè)計師借助高度一致的可視化解決方案,來提升品牌的知名度。

營造氛圍,傳遞情緒

色彩是會影響人的情緒,并且能夠營造氛圍的。設(shè)計師是需要知道色彩是如何影響我們的情緒和行為的。我們的大腦對于不同的色彩有著不同的反映,但是通常都不會注意到這些反應(yīng)。色彩心理學(xué)的研究表明,我們的眼睛感知到一種色彩的時候,大腦會向內(nèi)分泌系統(tǒng)釋放對應(yīng)的激素,刺激不同的情緒的轉(zhuǎn)變。

選擇正確的色彩有助于讓用戶處于正確的情緒當(dāng)中,傳遞正確的信息。舉個例子,如果想要創(chuàng)建自然或園藝相關(guān)的產(chǎn)品UI 界面,采用綠色或者藍(lán)色的配色能夠很好的匹配這一主題,傳遞相應(yīng)的感覺。

時尚的外觀和風(fēng)格

明亮鮮艷的色彩和漸變色在 UI 設(shè)計領(lǐng)域是最流行的趨勢?,F(xiàn)在越來越多的移動端應(yīng)用和網(wǎng)站開始使用這樣的配色來吸引人,盡管競爭激烈,但是確實(shí)很好的吸引了用戶的注意力。



 

在UI中使用明亮的色彩同樣存在問題

明亮的配色并不容易搭配

首先配色方案并不是依靠純粹的感覺來搭配出來的,這樣做很容易出問題。如果你想穿鑿協(xié)調(diào)的配色,色彩運(yùn)用規(guī)律、配色的知識和技巧是必不可少的。

然而,在UI 界面當(dāng)中,越是鮮艷的色彩,越是難為它搭配出優(yōu)質(zhì)的配色方案。為了讓用戶感到高興和舒適,設(shè)計師需要讓整個UI界面保持協(xié)調(diào)和平衡,協(xié)調(diào)的色彩才能讓用戶感到舒適,給用戶留下良好的第一印象。通常而言,設(shè)計師配色會選用下面常見的幾種方案:

  • 單色配色 :同一色彩色系下不同明暗、飽和度色彩的搭配。
  • 類似色配色:色輪上彼此相鄰的色彩構(gòu)成的配色方案。
  • 互補(bǔ)色配色:色輪上處于相對位置的色彩的配色。
  • 拆分互補(bǔ)色配色:和互補(bǔ)色類似,但是色彩更多。它通常是色輪上一個色彩和相對位置相鄰的兩種色彩搭配起來的配色方案。比如藍(lán)色和橙色是相對互補(bǔ)色,選取藍(lán)色和橙色兩邊的黃色和紅色,這三種色彩就是拆分互補(bǔ)色。
  • 三元色配色:色輪上互相處于120度角的三種色彩構(gòu)成的配色方案。
  • 雙互補(bǔ)色配色:兩組互補(bǔ)色構(gòu)成的四色配色方案。

缺少風(fēng)格和調(diào)性

的確,明亮鮮艷的色彩能夠讓UI 有調(diào)性和風(fēng)格,但是如果太多明亮的色彩在一起,就毫無風(fēng)格調(diào)性可言了。

這也是為什么那么多設(shè)計師會推崇6:3:1的配色比例了。其中占據(jù)60%的是主色調(diào),30%是次要的色調(diào),只有10%是鮮艷的色彩,用來提升整體調(diào)性的。這樣的配色方案能夠創(chuàng)造出協(xié)調(diào)而有層次的配色,也更加容易讓人感知且感到愉悅。

明亮的色彩并不適合所有的用戶群體

用戶調(diào)研是產(chǎn)品設(shè)計的一個重要環(huán)節(jié)。界定和分析目標(biāo)受眾才能了解網(wǎng)站和 APP 的設(shè)計預(yù)期。年齡、性別和文化等因素都影響著潛在用戶的偏好。比如孩子喜歡黃色和紫色,但是絕大多數(shù)的成年人并不會那么偏好這兩種色彩。藍(lán)色和綠色這樣的冷色調(diào)幾乎不分男女都喜歡,但是女性通常不如男性喜歡橙色,同時,男性絕大多數(shù)時候更加偏好黑白灰這樣的中性色,女性則不然。

鮮艷的色彩所面臨的情況也是一樣。即使你所設(shè)計的是娛樂性較強(qiáng)的應(yīng)用或者網(wǎng)站,你同樣需要考慮目標(biāo)受眾的具體情況。中年用戶更喜歡輕量級的色彩和用戶界面,明亮大膽的色彩并不在他們的偏好當(dāng)中。

鮮艷的色彩在移動端屏幕上會顯得過于扎眼

正如同我們在前面所說的,明亮的色彩會產(chǎn)生強(qiáng)烈的對比,有助于突出用戶界面中的元素,并且提供良好的可讀性和易讀性。然而對比度這種東西也應(yīng)該是適度就好,太過于強(qiáng)烈的對比所帶來的效果你并不會喜歡,尤其是在空間有限、使用場景復(fù)雜的移動端界面上。

在小屏幕上,過于明亮的字體會讓眼睛不舒服,這也是為什么要控制對比度。想要讓眼睛感到舒適,設(shè)計師經(jīng)常需要反復(fù)調(diào)整對比度。

色彩對于設(shè)計師而言是偉大的工具,但是和其他的工具一樣,它是有優(yōu)缺點(diǎn)的,明確了它的優(yōu)缺點(diǎn)才能更好地完成設(shè)計工作。


 

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2021/ mwtacok.cn 北京漫動者教育科技有限公司 備案號:京ICP備12034770號 監(jiān)督電話:010-62568622 郵箱:bjaaa@aaaedu.cc