在UI設(shè)計(jì)中顏色選擇的6點(diǎn)建議

原文網(wǎng)址:Color Matters. 6 Tips on Choosing UI Colors.

原作者:Medium? ? @tubikstudio

譯者:Lidy

此文由非專業(yè)人士翻譯自Medium。如若有誤敬請(qǐng)糾正。


用戶體驗(yàn)設(shè)計(jì)包括很多方面都需要仔細(xì)思考后再執(zhí)行,來(lái)為了達(dá)到一個(gè)界面能滿足不用目標(biāo)用戶的需要的目的。每一步都需要注意細(xì)節(jié),即使它看上去不復(fù)雜。

在用戶界面設(shè)計(jì)中,一個(gè)耗時(shí)又重要的環(huán)節(jié)是顏色的選擇。設(shè)計(jì)師有時(shí)會(huì)花費(fèi)數(shù)個(gè)小時(shí)來(lái)選擇合適的顏色。在這篇文章中,我們提出6個(gè)有用的建議來(lái)幫助設(shè)計(jì)們?yōu)橛脩艚缑孢x擇合適的顏色,并且使得這個(gè)過(guò)程更加簡(jiǎn)單和高效。

建議1:學(xué)會(huì)60%-30%-10%法則

這個(gè)法則或者說(shuō)技巧,來(lái)自室內(nèi)設(shè)計(jì),所有它也常用在裝修房子上。這個(gè)理論很簡(jiǎn)單。為了在構(gòu)圖中取得平衡,顏色應(yīng)該要按照60%-30%-10%這樣的比例分配。最大的地方使用主色調(diào),三分之一的構(gòu)圖部分采用輔助色,10%用于其它地方幫助突出。

這樣的配色被認(rèn)為對(duì)人眼來(lái)說(shuō)是舒適的,因?yàn)樗试S逐步感知所有視覺元素。知道合適比例的設(shè)計(jì)師們能成功地把顏色組合在一起而不會(huì)使得用戶界面的配色很雜亂。

建議2:對(duì)比是朋友

色彩對(duì)比是所有視覺構(gòu)成的關(guān)鍵部分。它使得每個(gè)用戶界面元素有各自的特征,又使得他們是明顯的。僅包含來(lái)自同一色系顏色的用戶界面能吸引用戶的機(jī)會(huì)較少。此外,在用戶界面上相同的內(nèi)容將會(huì)變得難以辨認(rèn),這使得與產(chǎn)品的交互幾乎不可能。

設(shè)計(jì)師控制對(duì)比度取決于它應(yīng)該完成的目標(biāo)。例如,如果你需要用戶對(duì)某個(gè)特殊的按鍵特別關(guān)注,那使用兩個(gè)對(duì)比強(qiáng)烈的顏色例如藍(lán)色和紅色就很合適。高對(duì)比度通常用于CTA按鈕的設(shè)計(jì)。

但是,把用戶界面當(dāng)作一個(gè)整體,高對(duì)比度可能不是總會(huì)奏效。如果要編輯的內(nèi)容和背景色對(duì)比太強(qiáng)烈,就會(huì)很難以閱讀。這就是為什么設(shè)計(jì)師被建議說(shuō)要建立一個(gè)溫和的對(duì)比度,只在想要突出顯示的元素上應(yīng)用高對(duì)比度的顏色。在不同設(shè)備上的用戶測(cè)試能幫助設(shè)計(jì)師確保他們解決方案的有效性。

建議3:考慮顏色背后代表的心理

正如我們?cè)?a target="_blank" rel="nofollow">之前的文章中提到的那樣,心理學(xué)是幫助設(shè)計(jì)流程的基礎(chǔ)研究之一。有大量的心理學(xué)研究展示里顏色對(duì)于人情緒和行為的影響,他們被稱為色彩心理學(xué)。它表明盡管我們沒有注意到,我們的大腦就對(duì)顏色做出了反應(yīng)。當(dāng)人的眼睛感知到了顏色,我們的大腦就給內(nèi)分泌系統(tǒng)發(fā)送信號(hào),釋放負(fù)責(zé)情緒的荷爾蒙。

每種顏色對(duì)我們的大腦都有不同的影響,對(duì)于每種可能反應(yīng)的知識(shí)能幫助設(shè)計(jì)師傳達(dá)正確的信息來(lái)讓用戶做出預(yù)期的行為。以下是幾種顏色代表的含義。

紅色:它同時(shí)代表了好和壞的感覺,包括愛,自信,激情和憤怒。

橘色:一種富有活力和溫暖的顏色,給人一種激動(dòng)的感覺。

黃色:它代表了快樂(lè),陽(yáng)光,歡樂(lè)以及溫暖。

綠色:大自然的顏色,給人以冷靜和再生的感覺。

藍(lán)色:它常代表一些企業(yè)形象??赡軙?huì)與距離和悲傷聯(lián)系。

紫色:與皇族和財(cái)富有著長(zhǎng)期的聯(lián)系。它也代表神秘和魔法。

黑色:他和悲劇、死亡聯(lián)系,表示神秘的事。同時(shí),他又兼具傳統(tǒng)和現(xiàn)代。

白色:它代表純潔,以及整體性和明晰性。

除此之外,設(shè)計(jì)師還需要記住視覺感受每個(gè)人都是不一樣的。像年齡、性別這樣的因素會(huì)影響顏色偏好,所有知道目標(biāo)用戶的特性很重要。你可以在我們之前的文章中找到有關(guān)顏色的意義和喜好的更多細(xì)節(jié)描述。

建議4:不要忘記文化差異

每個(gè)文化都有自己的傳統(tǒng)和信念,所以在你選擇顏色之前,你需要確保他們能正確解讀你所要傳達(dá)的意思。有時(shí)一種顏色在不同國(guó)家會(huì)有完全相反的含義。例如,在歐洲地區(qū),白色代表純潔,它通常在婚禮上使用。但是在亞洲國(guó)家,白色代表死亡和悲傷。不正確的使用可能會(huì)導(dǎo)致誤解,這對(duì)一個(gè)產(chǎn)品來(lái)說(shuō)可能是致命的。通過(guò)認(rèn)識(shí)到文化中顏色特征的差異,設(shè)計(jì)師會(huì)降低被誤解的風(fēng)險(xiǎn)。

建議5:力求和諧

和諧是每個(gè)UI設(shè)計(jì)師力求做到的。為了使得用戶感覺舒適,設(shè)計(jì)師試著在用戶界面的設(shè)計(jì)上達(dá)到平衡。色彩和諧涉及到設(shè)計(jì)中顏色的排列,以最有吸引力、最有效的方式讓用戶感知到。和諧的色彩有助于用戶對(duì)網(wǎng)站或者應(yīng)用程序有良好的第一印象。

尋找多年之后,設(shè)計(jì)師們區(qū)分了有效運(yùn)作的基本配色方案。讓我們看看他們是什么。

單色:色彩和諧是基于一種顏色,有各種色調(diào)。

類似色:這個(gè)方案的配色使用的是色輪中相鄰的顏色。

補(bǔ)色:它用的是色輪中每個(gè)顏色以及其對(duì)面的顏色,它旨在制造強(qiáng)烈的對(duì)比。

分散的互補(bǔ)色:這個(gè)方案的配色和前一個(gè)很像,但是它用到了更多的顏色。例如,如果你選擇了藍(lán)色,你需要再選擇它對(duì)面的兩個(gè)相鄰的顏色,黃色和紅色。

三元色:它是基于在色輪上等距的3個(gè)不同的顏色。專家建議用一種作為主色調(diào),其他作為輔色調(diào)。

四元/雙互補(bǔ)色:這個(gè)方案包含4個(gè)在色輪上是互補(bǔ)的顏色。如果你把選擇的四個(gè)顏色作為點(diǎn)連接起來(lái),它們會(huì)形成一個(gè)矩形。


有關(guān)和諧色彩的詳細(xì)的信息和例子能夠在我們這篇《Color Theory:Brief Guide for Designers》中找到。

建議6:從大自然中竊取靈感

大自然是世界上最好的藝術(shù)家和設(shè)計(jì)師。我們能在自然界中看到的顏色組合是非常完美的。人們享受看日出日落,秋天的森林,冬天的群山,因?yàn)樗麄兌际翘烊坏念伾M合。

所以,你為什么不從中找點(diǎn)靈感呢?去散散步或者找一下大自然的美麗照片,你一定會(huì)找到靈感的。

一款成功的數(shù)碼產(chǎn)品很大程度上取決于用戶界面顏色的選擇。合適的顏色使得用戶在使用產(chǎn)品時(shí)感到舒適。設(shè)計(jì)師可以向用戶傳達(dá)信息,并且迫使他們采取行動(dòng),僅僅是通過(guò)采用合適的顏色。明智地做出選擇。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容