顏色會(huì)影響用戶在體驗(yàn)網(wǎng)站設(shè)計(jì)交互時(shí)的感受,以及他們?nèi)绾问褂迷诰W(wǎng)站設(shè)計(jì)中,以及他們是否能夠完全看到和理解網(wǎng)站設(shè)計(jì)。所以說,顏色不僅僅是裝飾工具;顏色更是用戶體驗(yàn)的核心。
讓我們從一個(gè)常見的例子開始:您剛剛為某人完成了一個(gè)網(wǎng)站設(shè)計(jì)。它的外觀和功能都與線框圖一模一樣,設(shè)計(jì)團(tuán)隊(duì)的每個(gè)人都稱贊了這個(gè)項(xiàng)目。但是客戶卻討厭它,還無法解釋討厭它的原因。
罪魁禍?zhǔn)卓赡苁穷伾?,不同的顏色可以喚起?qiáng)烈的情感,人們對(duì)它們有強(qiáng)烈的反應(yīng)。一部分是個(gè)人偏好,一部分是心理,甚至一部分是社會(huì)規(guī)范。了解這些趨勢(shì)和用戶偏好可以極大地影響用戶體驗(yàn),以下是你在做網(wǎng)站設(shè)計(jì)是需要知道的。
用戶期望和偏好
用戶體驗(yàn)從您的網(wǎng)站設(shè)計(jì)或應(yīng)用程序的設(shè)計(jì)用戶類型開始,基本的人口統(tǒng)計(jì)數(shù)據(jù),例如用戶生活的性別或地區(qū),可以影響他們對(duì)基于顏色的設(shè)計(jì)的看法。(你可以在這里閱讀更多關(guān)于顏色和文化方面的考慮。)
顏色對(duì)用戶體驗(yàn)最有趣的影響之一與性別有關(guān),研究表明,男性和女性都傾向于喜歡和不喜歡某些顏色。
男性傾向于與設(shè)計(jì)方案較暗、色彩較飽和的網(wǎng)站進(jìn)行更多的互動(dòng),如上圖為VLNC Studio的設(shè)計(jì)。
女性往往更喜歡與網(wǎng)站互動(dòng),有更輕的網(wǎng)站設(shè)計(jì)方案和更柔和的調(diào)色板,如下面的塔利。
一些男性對(duì)網(wǎng)站使用明顯女性化的顏色有強(qiáng)烈的反應(yīng),比如淡粉色、紫色和黃色。
越來越多的女性傾向于對(duì)色彩搭配苛刻的網(wǎng)站敬而遠(yuǎn)之,比如帶有完全飽和紅色口音的深色背景,中色調(diào)調(diào)色板是最普遍地吸引每個(gè)人。
顏色聯(lián)想及意義
雖然這不是一門精確的科學(xué),但顏色有相當(dāng)明顯的情感聯(lián)系。注意,有些顏色可能屬于極端的類別,這些關(guān)聯(lián)往往與其他設(shè)計(jì)元素一起創(chuàng)建整體氛圍。
當(dāng)用戶看到某種顏色或顏色的組合時(shí),大腦會(huì)立即做出反應(yīng)。
紅色:權(quán)力、危險(xiǎn)、愛/激情、饑餓
黃色:能量、幸福、光明、溫暖
橙子:創(chuàng)造力,決心,刺激,鼓勵(lì)
綠色:自然,生長(zhǎng),和諧,新鮮
藍(lán)色:自信、信任、寧?kù)o、沉著
紫色:魔力、皇室、野心、獨(dú)立
建立品牌認(rèn)知度
你希望可口可樂的設(shè)計(jì)元素是紅色的,這種顏色與該品牌是如此的同義,以至于被稱為“可樂紅”。“改變顏色,品牌就會(huì)讓人困惑,你不能馬上認(rèn)出它。用戶感到不舒服,并沒有按照預(yù)期的方式做出反應(yīng)。這種飲料的味道甚至可能不同。
所有這些感覺都來自于改變顏色,當(dāng)你看到綠色可口可樂品牌的圖片時(shí),你可能會(huì)疑惑,不能第一時(shí)間認(rèn)出它是你熟悉的可口可樂品牌。因?yàn)樗绊懥擞脩趔w驗(yàn),你將有與品牌前進(jìn)。
顏色是品牌的一個(gè)重要元素,因?yàn)樗谟脩艉驮O(shè)計(jì)之間建立了獨(dú)特的聯(lián)系。顏色告訴用戶這個(gè)品牌是關(guān)于什么的,它告訴用戶他們將要參與的事情。
改變顏色,或者使用非品牌的東西,用戶體驗(yàn)就會(huì)受到影響,因?yàn)榫W(wǎng)站訪問者突然對(duì)他們自認(rèn)為熟悉的品牌感到困惑或不確定。
用戶模式連接到顏色
你注意到有多少網(wǎng)站使用紅色或橙色按鈕嗎?
這是有原因的,顏色鮮艷的按鈕與網(wǎng)站的背景形成鮮明的對(duì)比——紅色和橙色的按鈕通常在淺色或深色背景中顯得突出。可以幫助用戶查找、理解并希望使用可單擊或可tappable元素,因?yàn)樗麄兛梢灾庇^地立即知道他們對(duì)該元素的期望是什么。
網(wǎng)站設(shè)計(jì)中的用戶體驗(yàn)的一個(gè)關(guān)鍵部分是為用戶提供他們喜歡和理解的簡(jiǎn)單交互機(jī)會(huì)。
Cruise使用了一個(gè)帶有紅色文本和紅色懸停狀態(tài)的幽靈式按鈕,這與傳統(tǒng)的純色按鈕不同,但如何與之交互幾乎沒有問題。顏色將用戶吸引到按鈕。
Net Bluez為導(dǎo)航菜單中最重要的元素使用亮橙色按鈕,請(qǐng)注意,該元素往往會(huì)跳出屏幕,請(qǐng)求單擊。
提高轉(zhuǎn)化率
挑戰(zhàn)自己在設(shè)計(jì)過程中對(duì)A/B測(cè)試按鈕的顏色,你可能會(huì)發(fā)現(xiàn)一種顏色的轉(zhuǎn)化率明顯高于另一種顏色。(它可能不是你想要的顏色。)
當(dāng)按鈕或鏈接的顏色與設(shè)計(jì)的其他部分形成鮮明對(duì)比時(shí),轉(zhuǎn)化率往往會(huì)增加。因此,當(dāng)您想使用一個(gè)品牌調(diào)色板時(shí),選擇一個(gè)對(duì)比色是生成轉(zhuǎn)換的關(guān)鍵,這有助于提高網(wǎng)站設(shè)計(jì)的整體用戶體驗(yàn)。
看一下下面的網(wǎng)站設(shè)計(jì),哪個(gè)顏色的按鈕最容易讓你點(diǎn)擊?
為所有用戶提供可訪問性
最后,顏色對(duì)用戶體驗(yàn)的影響不是基于情感或心理學(xué),它比那實(shí)際得多。
顏色影響用戶體驗(yàn),因?yàn)樗梢允乖O(shè)計(jì)變得容易或不容易。
為了讓每個(gè)人都充分理解一個(gè)設(shè)計(jì),并參與內(nèi)容,他們必須能夠輕松地看到和閱讀它。使用符合Web內(nèi)容可訪問性指南(WCAG 2.1)的調(diào)色板和對(duì)比度可以確保每個(gè)用戶都能理解您的顏色選擇。
使用色盲過濾器,例如下面的比較,來幫助模擬其他用戶在瀏覽您的網(wǎng)站時(shí)可能會(huì)看到什么。這將如何影響可用性?
福州印秀網(wǎng)絡(luò)結(jié)論
把顏色當(dāng)作一個(gè)工具,幫助用戶更好地互動(dòng)和體驗(yàn)網(wǎng)站設(shè)計(jì)上的內(nèi)容。它在情感和可用性方面影響用戶體驗(yàn)。確定顏色是否以正確的方式影響用戶體驗(yàn)的關(guān)鍵是通過用戶測(cè)試,A/B顏色測(cè)試是一個(gè)很有價(jià)值的工具。