顏色在用戶體驗中的作用

已發表: 2022-03-11

了解色彩心理學是創建適用於數字設計的調色板的關鍵方面。 雖然顏色有時被一些設計師認為是純粹的審美選擇,但事實上,它是設計對用戶心理影響的關鍵組成部分,因此也是用戶體驗。

經過深思熟慮的調色板可以將設計從“好”提升到“出色”,而平庸或糟糕的調色板會降低用戶的整體體驗,甚至影響他們使用網站或應用程序的能力。

雖然色彩理論通常是一個複雜的主題,但在 UX 設計中使用色彩不僅僅是創建一個看起來不錯的調色板(例如可訪問性以及同一色調中不同色調的心理影響); 設計師可以逐漸在他們的設計中更好地使用顏色,而無需重新考慮他們的整個過程。 一旦設計師掌握了基礎知識,色彩理論中最有價值的部分之一就是學習將更多意想不到的顏色融入他們的設計中。

巴克萊使用非常具體的網站配色方案
雖然有點過度使用,但灰色/白色/藍色調色闆對金融網站非常有效,因為藍色通常與對色彩心理學的忠誠度和信任度相關聯。

色彩心理學

顏色理論和顏色對用戶的心理影響是一個複雜且通常是主觀的話題。 但有些方面可以在更普遍的層面上解決。

諸如主要顏色(主要、次要和三次)的共同含義、傳統調色板以及顏色含義的文化差異之類的事情都相當簡單。 設計師可以輕鬆學習這些基礎知識並將其應用到他們的工作中。 但是,在UX 設計中使用顏色時,還有一些細節需要學習。

色彩心理學是色彩理論的一個複雜方面
基本的顏色含義很容易學習和記住,但更微妙的含義也可以在數字設計中得到很好的利用。 (范德雷設計)

界面顏色的情感影響不容忽視。 雖然某些顏色在 UX 設計中是“通用的”(例如黑色、白色和灰色,幾乎所有優秀的設計中都至少使用其中一種顏色),但它們組合在一起的顏色會對一個用戶的感知。

當然,使用顏色的方式也會對其感知方式產生巨大影響。 例如,在現代簡約設計中用作原色的藍色與在更複雜的企業設計中用作強調色的相同藍色具有非常不同的感覺。

Zutano 使用灰色和紅色的網站配色方案。

P&N Bank 使用明亮的紅色 UI 調色板
網站配色方案的細微差異對網站喚起的情感有很大的影響。 Zutano 和 P&N Bank 都使用紅色和白色的色調,但他們的網站具有完全不同的情感影響。

顏色的文化差異

設計師容易忽視的一個問題是圍繞不同顏色可能存在的文化差異。 例如,在許多西方文化中,白色與純潔、純真和希望等事物聯繫在一起。 但在亞洲部分地區,白色與死亡、哀悼和厄運聯繫在一起。

無論文化如何,有些顏色通常具有積極的含義(例如橙色),而其他顏色(例如白色)在不同國家/地區之間差異很大。 當試圖創建一個吸引盡可能多的觀眾的設計時,這肯定會使設計師的生活複雜化。

設計師要根據產品或網站的目標受眾來看待他們的調色板的文化含義,這一點很重要。 如果產品要面向全球受眾,請務必平衡用於防止負面文化內涵的顏色和圖像。 如果產品主要只針對特定文化,設計師可以較少關注所選調色板在其他文化中可能產生的影響。

色彩心理學在世界各地有所不同,主要基於文化聯想
在世界各地的各種文化中,顏色可以具有完全不同的含義。 (信息很漂亮)

美國的全職自由UX設計師想要

將 UX 顏色與品牌匹配

品牌價值應該在創建調色板中發揮關鍵作用。 但它們並不是唯一重要的因素。 行業規範也很關鍵,競爭對手已經使用的顏色也是如此。 使用與品牌的主要競爭對手幾乎相同的調色板是製造混亂並確保品牌不會脫穎而出的好方法。

當然,這也有例外。 以麥當勞和溫迪為例。 兩者都是彼此直接競爭的快餐店。 兩者都使用紅色和黃色調色板。 然而,看看他們的標誌,溫迪的標誌主要是紅色的,帶有黃色的口音,而麥當勞則相反。 他們的包裝也以不同的方式使用這些顏色,進一步區分品牌。 因此,即使從包裝中去除了徽標和其他識別標記,兩者也不會輕易與其他混淆。

意想不到的 UI 調色板可以使品牌與競爭對手區分開來
紅色是危險和激情的顏色,也是興奮的顏色,這或許可以解釋為什麼維珍航空將其用於品牌宣傳(以及紫色,這意味著奢華)。

創建支持品牌價值觀的品牌調色板的第一步是了解各種顏色的含義,以及如何使它們更亮/更亮/更暗/更暗/等。 可以影響他們。 以下是不同顏色含義的基本分類:

  • 紅色——紅色是危險和激情的顏色,也是興奮的顏色。 這是一種非常強烈的顏色,可以引起人們的強烈反應。 將其淡化為粉紅色使其更加女性化和浪漫,而將色調變暗為栗色則使其更加柔和和傳統。
  • 橙色——橙色是一種非常有創意的顏色,也與冒險和青春有關。 它也非常有活力。 由於橙色與 70 年代風格的緊密聯繫,它也能喚起一種複古的感覺。
  • 黃色——黃色是快樂、樂觀和開朗的。 它在兒童和成人的設計中很受歡迎。 更柔和的色調通常被用作中性的嬰兒顏色,而明亮的黃色在創意設計中很受歡迎。 較深的黃色變成金色,這與財富和成功有關。
  • 綠色——綠色有多種聯想。 一方面,它激發了財富和傳統的感覺(尤其是較深的色調),而另一方面,它與環保主義和自然密切相關。 青檸通常與更新和生長有關。
  • 藍色——藍色最常與忠誠和信任聯繫在一起。 較亮的藍色可能與交流有關,而較暗和較深的藍色可能與悲傷和抑鬱有關。 藍色是世界上最受歡迎的顏色,這或許可以解釋為什麼這麼多公司選擇藍色作為品牌宣傳。
  • 紫色——紫色是另一種具有多種含義的色調。 長期以來,它一直與皇室和財富聯繫在一起(因為紫色染料在許多古代文明中很少見,所以它是為皇室保留的)。 但它也與神秘和靈性有關。 紫色也可以喚起創造力。
  • 黑色——黑色意味著精緻和奢華。 然而,它也可能與悲傷和消極有關。 根據與黑色一起使用的其他 UX 顏色,它可以給人現代或傳統、正式或休閒的感覺。
  • 白色——白色與純潔、純真和積極有關。 白色在極簡設計中也很受歡迎,因為它的中性和簡單。 像黑色一樣,白色很容易呈現出與它一起使用的其他顏色的特徵。
  • 灰色——灰色有不同的含義,具體取決於上下文。 它可以是保守和復雜的,也可以是骯髒和沈悶的。 它可以是無情的或喜怒無常的。 它也可能與悲傷和悲傷有關。
  • 棕色— 棕色(實際上是深橙色)與腳踏實地和接地氣有關。 它也與自然甚至舒適有關。 而且,當然,它可能與骯髒或骯髒有關。

了解這些基本顏色含義為設計師提供了堅實的基礎,可以在此基礎上為任何品牌或產品構建調色板。

然而,色彩理論既是科學又是藝術。 僅僅因為一種顏色通常與一種特定的感覺或情緒相關聯,並不意味著它不能通過將它與不同的顏色組合、改變確切的色調或改變它在其他設計元素中的使用方式來以其他方式被感知。

利用已建立的色彩心理學是增強用戶體驗的可靠方法
這個植物澆水應用程序概念使用漂亮的綠色作為其原色,並以對用戶有意義的方式使用藍色、黃色和紅色調。 (艾米·霍利·赫斯特)

使用非常規的 UX 顏色

非常規地使用 UX 顏色是讓品牌與眾不同的好方法。 雖然它比簡單地組合設計師想要組合的任何舊顏色需要更多技巧,但學習如何在 UX 設計中使用意想不到的顏色並不難。

在將非常規顏色添加到設計中時,強調色是最容易開始的地方。 例如,一家律師事務所網站可能會使用傳統的海軍藍和灰色調色板。 但是添加一些石灰綠色的口音,突然之間,該設計與其他擁有海軍藍色和灰色網站的律師事務所的海洋區分開來。 或者看看 Hogan Lovells 的這個例子,它使用白色、灰色和石灰綠色調色板來創建一個絕對從其他法律行業網站中脫穎而出的現代網站。 與一般的合法網站相比,它會吸引更年輕、更現代的人群。

一個意想不到的網站配色方案
Hogan Lovells 以非常清新的調色板創造了現代設計。

Berdan Real Estate 是另一個使用意想不到的調色板的網站。 房地產網站使用黃色和桃色,這兩種顏色都比一般的房地產網站(大片的藍色、紅色和綠色占主導地位)更有活力。

這個房地產網站上另一個意想不到的網站配色方案
Berdan Real Estate 避開了典型的企業配色方案,轉而採用新鮮和溫暖的方式。

保險通常不被認為是一個現代的、開創性的行業,但這並不意味著他們的設計不能。 Lemonade 的網站使用帶有紫紅色調的灰色和白色配色方案。 在一個不以冒險著稱的行業中,這是完全出乎意料的。

Lemonade 網站上完全出乎意料的 UX 配色方案
Lemonade 在品牌中選擇紫紅色,這在業內是完全出乎意料的。

在網絡上的實踐中使用了許多其他非常規的 UX 顏色示例,可用於激發靈感。

60-30-10 規則

60-30-10 規則是一個簡單的理論,用於創建平衡良好且視覺上有趣的調色板。 這個想法是一種顏色——通常是相當中性的東西(無論是字面上的還是心理上的)——佔調色板的 60%。 另一種補色佔調色板的 30%。 然後使用第三種顏色作為其餘 10% 設計的重點。

這種方法使設計師更容易開始嘗試非常規的調色板,而不會超出行業或品牌的預期規範。 添加一些意想不到的色調可以提升設計,否則它符合特定公司的預期。 這也可以是創建比競爭對手更具前瞻性的品牌調色板的第一步,從而使品牌與眾不同並使其更令人難忘。

網頁設計色彩理論中 60-30-10 規則的一個很好的例子
Clarity Stress Management 的網站很好地展示了 60-30-10 規則,頁眉和頁腳中有 60% 的紫色、30% 的白色和 10% 的洋紅色。

結論

雖然色彩理論是一門複雜的學科,但學習基礎知識並不是特別複雜。 從那裡,設計師可以利用他們的知識為他們的設計創建更多樣和更複雜的調色板。

精心設計的調色板,尤其是包含一些意想不到的色調的調色板,不僅僅是一種審美選擇。 它會對用戶產生顯著的心理影響,用戶體驗設計師應該利用這些影響來創造更好的體驗。

• • •

進一步閱讀 Toptal 設計博客:

  • 設計心理學和真棒用戶體驗的神經科學
  • 黑暗的用戶界面。 好和壞。 該做什麼和不該做什麼。
  • 可持續產品設計的情感品牌
  • 發揮你的靈感——情緒板指南
  • 有說服力的設計:有效地使用高級心理學