顏色如何影響用戶體驗設(shè)計?

顏色可以影響觀眾對產(chǎn)品的第一印象,是設(shè)計師傳達意義的重要工具,關(guān)注顏色在用戶體驗中的影響可以幫助我們做出更符合產(chǎn)品定位的設(shè)計。

HOW COLOR IMPACTS UX 1.jpeg


顏色影響方方面面,顏色影響用戶接觸設(shè)計時的感受,影響他們?nèi)绾问褂迷O(shè)計,甚至影響他們是否可以看見全部的設(shè)計并理解設(shè)計。很簡單,顏色不僅僅是裝飾工具,顏色是用戶體驗的核心。          

讓我們從一個常見的例子開始:您剛剛為某人完成了一個網(wǎng)站設(shè)計。它的外觀和功能與線框完全相同。設(shè)計團隊中的每個人都贊揚了這個項目。然而客戶討厭它,但是他們無法解釋為什么討厭它。

罪魁禍首可能是顏色。不同的顏色可以使人們產(chǎn)生強烈的情緒,以至于人們對設(shè)計的產(chǎn)品產(chǎn)生尖銳的反應。一部分是個人偏好的原因,一部分是心理的原因,甚至是社會規(guī)范的原因。了解這些趨勢和用戶特征可以極大地影響用戶體驗。

以下是您需要了解的內(nèi)容。



用戶期望和偏好

用戶體驗的研究始于網(wǎng)站或應用程序設(shè)計的用戶類型?;镜娜丝诮y(tǒng)計數(shù)據(jù)如性別、用戶所居住的地區(qū),會影響他們對您設(shè)計所基于的顏色的看法。

顏色對用戶體驗最有趣的影響之一與性別有關(guān)。研究表明,男性和女性傾向于喜歡和不喜歡某些類型的顏色。   

HOW COLOR IMPACTS UX 2.jpeg

男性傾向于與較暗的設(shè)計和較飽和色彩的網(wǎng)站進行更多的交互,例如上面的 VLNC Studio。

女性傾向于與具有較淺設(shè)計和較柔和色調(diào)的網(wǎng)站互動,例如下面的 Tally。

一些男人對使用淡粉色、紫色和黃色等鮮明女性色彩的網(wǎng)站有著敏銳的反應。

更多女性傾向于遠離具有刺眼的配色方案的網(wǎng)站,例如有著完全飽和的紅色調(diào)或深色背景的網(wǎng)站。

中調(diào)色調(diào)對每個人來說都是最有吸引力的。

HOW COLOR IMPACTS UX 3.jpeg



顏色的關(guān)聯(lián)和含義

雖然這不是一門精確的科學,但顏色與情感具有相當明顯的關(guān)聯(lián)。注意,某些顏色可能屬于極端類別。這些關(guān)聯(lián)往往與其他設(shè)計元素一起創(chuàng)造出整體氛圍。

當用戶看到某種顏色或顏色組合時,它會在大腦中產(chǎn)生即時反應。

紅色:力量,危險,愛/激情,饑餓

黃色:能量,快樂,輕盈,溫暖

橙色:創(chuàng)造力,決心,刺激,鼓勵

綠色:自然,成長,和諧,新鮮

藍色:信心,信任,寧靜,冷靜

紫色:魔術(shù),皇室,野心,獨立



建立品牌識別         

HOW COLOR IMPACTS UX 4.jpeg

您覺得可口可樂的設(shè)計元素是紅色的。 這一顏色是品牌的代名詞,被稱為“可樂紅”。改變顏色后,品牌會使人困惑。您不能馬上認出它來。用戶很震驚,并且沒有以預期的方式做出反應。甚至這種飲料看起來味道似乎也不太一樣。

所有這些感受都來自改變顏色。當您看到帶有綠色可口可樂品牌的第一張圖片時,您可能會覺得自己想說“什么?”。

HOW COLOR IMPACTS UX 5.jpeg

        

隨著品牌的發(fā)展,它會影響你的用戶體驗。

色彩是品牌中的一個重要元素,因為它在用戶和設(shè)計之間建立了獨特的聯(lián)系。顏色告訴用戶品牌是關(guān)于什么的,以及用戶將要參與的事情是什么。

改變顏色,或者使用一些非品牌的元素,用戶體驗就會受到影響,因為網(wǎng)站訪問者突然對他們認為熟悉的品牌感到困惑或不確定。



用戶模式與顏色關(guān)聯(lián)

您有沒有注意到有多少網(wǎng)站使用紅色或橙色按鈕?

這是有原因的。

與網(wǎng)站背景形成對比的亮色按鈕——紅色和橙色往往能從淺色或深色背景中脫穎而出,可以幫助用戶找到、了解并參與單擊或輕敲元素,因為用戶可以在視覺上立即了解到他們對該元素的期望。

用戶體驗的一個關(guān)鍵部分是為用戶提供他們喜歡、容易理解且輕松的互動機會。

HOW COLOR IMPACTS UX 6.jpeg      

Cruise 使用一個帶有紅色文本和紅色懸停狀態(tài)的虛擬按鈕。它相較于傳統(tǒng)的純色按鈕有很大不同,但如何與之交互幾乎沒有問題。顏色可以將用戶吸引到該按鈕上。

NET Blueez 給導航菜單中最重要的元素使用亮橙色按鈕。請注意該元素是如何從屏幕上跳出來請求單擊的。

HOW COLOR IMPACTS UX 7.jpeg



提高轉(zhuǎn)化率

在設(shè)計過程中挑戰(zhàn)自己,使用A / B測試來測試按鈕顏色。您可能會發(fā)現(xiàn)一種顏色的轉(zhuǎn)化率明顯高于另一種顏色。(而它可能不是您期望的顏色)

當按鈕或鏈接的顏色與設(shè)計的其余部分形成鮮明對比時,轉(zhuǎn)化率往往會增加。因此,當您想要使用品牌主色調(diào)時,選擇對比色是產(chǎn)生轉(zhuǎn)化的關(guān)鍵,有助于提升整體用戶體驗。

請看下面的網(wǎng)站, 哪個顏色的按鈕最有可能讓您點擊? (原始顏色為藍色。)

HOW COLOR IMPACTS UX 8.gif


   

為所有用戶提供可訪問性

最后一點,顏色不是以情緒或心理學的方式影響用戶體驗的。它比那些更加實際。

顏色會影響用戶體驗,因為它可以使設(shè)計可訪問或不可訪問。

為了讓每個人都能完全理解設(shè)計并參與其內(nèi)容,顏色必須能夠被輕松地查看和閱讀。使用符合可訪問性的調(diào)色板和對比度,可確保每個用戶都能理解您的顏色選擇。

例如下方的這些比較案例,使用色盲過濾器來幫助模擬某些用戶在查看您的網(wǎng)站時可能會看到的內(nèi)容。這對可用性有何影響?

HOW COLOR IMPACTS UX 9.jpeg

HOW COLOR IMPACTS UX 10.jpeg



總結(jié)

將顏色視為一種工具,可以幫助用戶更好地互動和體驗您網(wǎng)站上的內(nèi)容。它會影響用戶在情感和可用性方面的體驗。

確定顏色是否以正確的方式影響用戶體驗的關(guān)鍵是通過用戶測試。A/B顏色測試是一個有用的工具。






原文作者 | Carrie Cousins

原文地址 | https://www.webdesignerdepot.com/2019/07/how-color-impacts-ux/

編譯作者 | 桃花果 | 杭州 | 設(shè)計師


每天更新,
全站高品質(zhì)素材免費下載!