為什麼了解顏色很重要？
人們在與你的產品進行首次互動的90秒內就會做出決定，其中62%到90%的決策僅基於顏色。[1]
你是否曾有過看著一朵鮮豔的黃色向日葵，不自覺地微笑，進而感受到愉悅的心情？或是凝視著水面的波光粼粼，感受到一種寧靜的氛圍？事實上，顏色在我們生活中的作用遠遠超出我們的想像。
環顧你的四周，你會注意到許多品牌使用他們的品牌顏色來代表他們的價值觀並促進客戶記憶。Facebook、LinkedIn和Walmart使用藍色來喚起信任和敬畏的感覺。麥當勞則使用紅色和橘色來傳達幸福的品牌形象，並刺激飢餓感。顏色是人們對於視覺設計中最先注意到的元素之一。
因此，深入地了解顏色各自帶有的個性至關重要。他可以幫助你選擇合適的顏色來傳達你的品牌價值，幫助用戶完成他們的任務，並提高轉化率。
- 顏色可以喚起用戶的正面或負面影響。
- 顏色可以有效地傳達你的品牌價值，也可能無法在眾多競爭者中突出。
- 顏色可以幫助用戶完成任務，也可能造成不必要的混淆。
- 顏色可以有效地提供轉化率或效率，也可能降低。
每種顏色都有他獨特的個性
顏色各自擁有獨特的個性，並對情緒、感受和行為產生積極或消極的影響。現在，讓我們深入了解每種顏色。
- 熱情紅
紅色可以提高血壓、心率和呼吸速率，還能增強新陳代謝和食慾。這就是為什麼許多餐廳選擇紅色作為其主要視覺顏色，例如麥當勞、摩斯漢堡和可口可樂。此外，在某些文化中，紅色傳達幸福和好運。
- 活力橘
橘色通常被描述為溫暖、熱情和充滿活力的顏色，讓人聯想到芬達、SoundCloud和Timberland等品牌。然而，他也可以象徵力量、侵略性、暴力和危險。
- 快樂黃
黃色常常讓人聯想到太陽和向日葵，使大多數人感到快樂、樂觀和年輕。使用黃色可以有效地吸引用戶的注意力。許多品牌如樂事、立頓和DHL都選擇黃色作為其主要顏色。然而，黃色也可能與煩躁相關。
- 治癒綠
綠色會聯想到樹木和草地，走進大自然，往往促進人體和心靈的治癒，並達到平靜效果，同時，讓人感受到安全感和健康的形象。Spotify、iHerb和青箭等品牌使用綠色來反映他們的品牌個性。然而，綠色也與貪婪和嫉妒有關。
- 信賴藍
當我們看到藍色時，通常會喚起冷靜、可靠和值得信賴的感覺。許多科技和金融公司選擇藍色作為他們的主要顏色，如IBM、Facebook和Visa。然而，藍色也可能引起孤獨和悲傷的感覺。畢卡索畫家在他的繪畫中經常使用藍色調。
顏色又如何影響人們的行為呢？
單一顏色根據與其他顏色的搭配方式，或受色調、飽和度和陰影的影響，呈現正面或負面的形象。眼睛是人類身體中最複雜的感覺器官之一。因此，顏色的心理影響已被廣泛而深入地研究。一旦設計師掌握了顏色的個性，這將大大有助於顏色選擇和設計。
紅色按鈕更吸引用戶互動
研究顯示，紅色按鈕的表現優於綠色按鈕21%。[2] 僅僅改變按鈕顏色就能顯著影響用戶行為。紅色可以與激情、攻擊和警告相關聯。當背景是白色或淺色時，紅色的高對比度容易吸引用戶的注意力。同時，紅色可以促使人們的生存本能，積極地朝著目標採取行動，因為他讓行動更緊迫。然而，這並不意味著我們應該將所有按鈕改成紅色。我們還需要考慮整體平衡和品牌價值。
顏色也影響我們對於時間的感知
研究表明，使用者在觀看藍色背景的頁面時，認為頁面下載速度比黃色背景的快。藍色背景能夠使使用者感到放鬆。當人處於放鬆而非緊張的狀態時，他們會感覺時間過得更快。研究也發現顏色不僅影響使用者對時間的感知，還影響他們推薦網站給他人的意願。[3]
UIUX的角色，在顏色上可以做些什麼呢？
大部分的人加入部門時，品牌價值和顏色已經建立完成。作為UI/UX設計師，了解如何利用現有和新增的顏色來有效地影響用戶觀點，是重要的技能之一。
1. 進行顏色測試以定義最佳選擇
在決定顏色搭配前，「顏色感知測試」（Color Perceptions Test）是常見的測試方法。產品上線後，則可以進行使用者測試和A/B測試。
執行顏色感知測試時，請使用者以形容詞描述顏色，這可以確認是否與品牌形象一致。如果你想測試使用者對品牌的第一印象，可以透過紀錄一段短時間和第一個動作。「五秒可用性測試」（5-Second Test）和「首次點擊測試」（First-Click Test）是兩種測試視覺設計的方法。五秒的時間相當短，使用者無法閱讀細節，因此可以較準確地測試使用者僅憑直覺對於色彩的感受。[4]
顏顏色心理學既複雜又隨時間變化，因此，UI/UX設計師需要不斷透過A/B測試觀察產品上線後的轉換率變化。
推薦工具： Five second test , Optimal Workshop
2. 實施60-30-10規則維持平衡
一旦色彩組合確定完成，便可以開始設計你的介面。很多設計師會遵循60-30-10規則，這個規則意指60%的部分使用主要顏色，30%的部分使用次要顏色，其餘10%則使用強調顏色。遵循此規則，能夠讓整體視覺畫面達到平衡。[5]
3. 顏色使用一致，避免造成困惑
如果你選擇綠色作為行動呼籲（call-to-action）的顏色，避免在其他元素中使用相同的綠色，以免用戶感到困惑。因此，我們需要創建設計系統，確保所有工作夥伴都能依據設計系統，使相關產品達到一致性。
4. 確保設計考慮到多數用戶的可及性（Accessibility）
當設計師選擇吸引人的顏色風格時，也要確保網站的可及性適合所有用戶。在英國，有8%的男性和4.5%的人口患有紅綠色盲。因此，設計師需要考慮到這部分人群，確保所有用戶都能正常使用網站。[6]
「全世界推估有超過3億人患有色盲」 [6]
網頁內容無障礙輔助性準則（Web Content Accessibility Guidelines，WCAG）在*AA等級要求視覺上呈現的文字和圖片上的文字顏色對比度至少要達到4.5:1。然而，大型字體（至少18點或14點粗體）和圖片上的文字顏色對比度至少要達到3:1。[7]
*有三個等級：A等級 (最小)、AA等級 (中間)、AAA等級 (最高)
- 不符合標準案例 (左圖)：高彩色圓圈上的白色圖示對於區分他們代表的社交網站至關重要。然而，在這個版本中，在高彩色圓圈上使用白色線條使得很難清楚地辨別訊息。
- 符合標準案例 (左圖)：使用黑色線條，與高彩色圓圈背景對比鮮明，大大提高了可讀性。
UIUX設計不僅要考慮美觀，還要保證可讀性，以便有效地向受眾傳達訊息。
推薦工具：Colour Contrast Checker, Adobe Color
結論
色彩的世界比我們所認知的還要廣闊和深奧。當你透過顏色心理學的角度去觀看，顏色會變得特別有趣。一篇文章難以介紹所有顏色的特性、色環、色調、飽和度等，因此，強烈建議進一步研讀色彩理論並多加認識各種顏色。此外，透過日常觀察各種品牌的設計，也能提升對顏色的敏感度，有助於挑選和設計介面。
UIUX設計師需要綜觀考量品牌價值、顏色測試，以及尊重在不同地區中各種文化對於顏色的感受。
推薦工具：Palettemaker
參考資料
[1] Impact of color on marketing | Emerald Insight
[2] Red Beats Green: Call to action Button Color A/B Test | LinkedIn
[3] Waiting for the Web: How Screen Color Affects Time Perception | Journal of Marketing Research
[4] How to Test Visual Design | NNGroup
[5] Using Color to Enhance Your Design | NNGroup
[7] WCAG Understanding SC 1.4.3: Contrast (Minimum) (Level AA)
電商讀書會 