網(wǎng)站設(shè)計(jì)中的色彩運(yùn)用如何影響用戶體驗(yàn)

顏色會(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à)值的工具。