前段時間對 APP 新版本進行整體色彩升級探索，通過系統的盤點，有一些輸出和大家分享。 本文將從色彩的基礎原理到實際應用進行梳理，試圖和色彩打好交道。

大家會發現在不同的產品改版或者品牌搭建中，通常都需要對色彩進行調整，因為色彩可以直接影響人們對品牌的感知從而建立情感連接，去主動占據用戶的注意力。

 

一、色彩的基本概念

1. 色彩原理

色彩原理分為色彩的 物理原理 和 生理原理 兩部分。

物理原理是指光照射到物體上對人產生刺激從而引起的一種色彩感覺。

生理原理是指人的視覺、知覺對色彩的波長及三屬性(色相、明度、純度)表現出來的各種變化所產生的各種反應。

通過色彩原理可知，人眼要看到色彩必須具備三個因素，即 光、物體、眼睛。

只有具備這三個要素，我們才能觀察到色彩。

而人眼看到的顏色與可見光譜上的頻率是相互對應的。

光譜的簡單定義： 光是一種電磁波，而可見光是電磁波的一個小范圍。光的波長決定了我們所看到的顏色。可見光的波長范圍約為 380 納米（紫色）到 750 納米（紅色）。

2. 色彩三要素

構成色彩有三大要素

1. 色相
2. 明度
3. 飽和度

色相即顏色類別，比如紅色和黃色。色相實質上就是電磁波的頻率。不同的波長決定不同的色相，在光譜中，紅、橙、黃、綠、藍、紫等由于有著不同的波長，帶給我們不同的色彩感受，它們是最基本的色相 。

明度指色彩的明暗程度，亦可被稱為亮度、深淺度等。明度由振幅決定，振幅越寬，進光量越大，物體對光的反射率越高，則明度越高；振幅越窄，進光量越小，物體對光的反射率越低，則明度越低。通俗可以理解為，某個顏色加了多少白顏料，加了多少黑顏料。

飽和度指色彩的鮮艷程度，就是色彩的飽和度、純凈度、彩度。它是由于各色彩的波長的單純程度不同造成的，凡具有色相感的所有有彩色都有一定的純度。無彩色沒有色相，亦就沒有純度，也可以認為它們的純度值為零。而類似高級灰這類色彩則整體降低了色彩的飽和度。

Alfred Stevens 的作品“Portrait of Mrs. Howe” 便是一幅在不改變色相的情況下，僅通過調整明度和飽和度的浪漫主義作品。

3. 色彩模型

梳理幾個大家常用的模型

① RGB（光的模型）

RGB 顏色模型是一種加色模型，將紅（R）、綠（G）、藍（B）三原色的色光以不同的比例相加混色，以合成產生各種色彩光。RGB 顏色模型的主要目的是在電子系統中檢測，表示和顯示圖像，比如電視和電腦、手機、相機等

② HSB（也叫 HSV）（色相 0-360、飽和度 0-100、明度 0-100）

③ HSL（色相、飽和度、亮度）

上述 HSL 和 HSB 本質上都是描述色相、飽和和明度，那他們的區別又是？

（色相 H）完全一致

S（飽和度）不一樣

L 和 B（明度）也不一樣

HSB 中的 S（飽和度）控制純色中混入白色的量，值越大，白色越少，顏色越純；HSB 中的 B（明度）控制純色中混入黑色的量，值越大，黑色越少，明度越高

HSL 中的 S（飽和度）和黑白沒有關系 ；HSL 中的 L（明度）控制純色中混入的黑白兩種顏色。

CMYK（印刷模型）

CMYK 是彩色印刷時采用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計四種顏色混合疊加，形成所謂“全彩印刷”。四種標準顏色是：

C：Cyan =青色，常被誤稱為“天藍色”或“湛藍”

M：Magenta =洋紅色，又稱為“品紅色”

Y：Yellow =黃色

K：blacK=黑色

HEX（色彩空間）：十六進制顏色模式，是一種表示顏色的編碼方式，經常用于 Web 設計和開發。

HEX 碼由 6 個字符組成，每個字符是 0-9 和 A-F(a-f)之間的一個十六進制數字，表示 RGB（紅綠藍）顏色空間中的顏色；

HEX 碼的結構是#RRGGBB; RR 表示紅色的部分，GG 表示綠色的部分，BB 表示藍色的部分。

了解完色彩的基礎概念，接下來再看看定義色彩有哪些注意要點？

二、定義色彩需要了解哪些關鍵點

1. 色彩觀

色彩觀的影響因素

文化習俗：紅色在中國通常象征著好運、繁榮和幸福。在春節和其他慶祝活動中，紅色是主要的裝飾顏色。

宗教信仰：綠色在伊斯蘭文化中通常與生命、成長和繁榮有關；佛教僧侶通常穿著黃色的袍子，代表著節制和謙虛； 印度教中常用紅色，象征繁榮、幸福和神圣的慶典

歷史原因：在中國黃色是帝王的顏色，代表著皇權和貴族地位；在古埃及的宗教儀式中，白色常被用于祭祀和神廟的裝飾。

由自然而來：綠色與環保、自然和希望聯系在一起。

科學視角：藍色通常與冷靜、信任和穩定性有關

社會背景（歷史事件或社會運動）：彩虹色成為 LGBTQ+社群平權運動的標志；工業革命的興起推進了印象派用色表達

使用顏色時，應對不同文化差異，應該保持適當的敏感性，采取尊重和謹慎態度的同時，擁抱顏色選擇的多樣性。

2. 色彩偏好

① 年齡偏好

嬰兒和幼兒（0-2 歲）：對鮮艷、高度飽和的顏色有較強的興趣，例如紅色、黃色和藍色。 父母通常選擇富有活力和愉悅感的顏色來裝飾他們的環境。

兒童（3-12 歲）：喜歡明亮、多彩、飽和度高的顏色，如橙色、綠色、紫色。 常常受到卡通、動漫和游戲等娛樂內容中使用的亮眼顏色的影響。

青少年（13-19 歲）：開始有更復雜的色彩偏好，可能更加注重時尚和個性化，會對潮流顏色、流行元素產生較大興趣。

成年人（20-64 歲）：在職業和正式場合可能更喜歡中性色，如藍色、白色、灰色。 在個人生活和休閑時，色彩偏好更為個體化，可能受到文化、地域和個人經歷的影響。

老年人（65 歲及以上）：可能對柔和、溫暖的顏色有更高的接受度，如深藍、棕色、米色

《色彩心理學與色彩療法》一書清楚地發現，與紅色相比，人在一生中更喜歡藍色，而在童年時期更喜歡黃色。隨著我們的成熟，我們更喜歡較短波長的顏色（藍色、綠色、紫色）而不是較長波長的顏色（紅色、橙色、黃色）

2. 性別偏好

男性：傾向于中性安靜、穩重明亮的色彩，藍色和綠色等顏色通常被認為是男性化的，但這些看法也在不斷演變。

女性：在許多文化中，女性通常更喜歡紅色和粉色。這兩種顏色與女性的社會角色、文化傳統和女性化的形象有關。但當代的性別規范挑戰了這種聯系。比如一些女性也可能喜歡紫色和藍色。

3. 地域偏好

1. 中國： 中國文化中通常喜好紅色，因為紅色在中國傳統文化中象征幸福、繁榮和好運。另外，黃色也被視為吉祥的顏色。
2. 日本： 日本傳統文化中偏好淡雅、柔和的顏色，如櫻花粉、淡藍和綠色。傳統的和服和建筑也強調和諧的色調。
3. 地中海地區： 地中海沿岸國家通常偏好明亮、飽和的顏色，反映了陽光明媚的氣候。藍色和白色常見于地中海風格的建筑和裝飾。
4. 北歐國家： 北歐文化中通常偏好冷色調，如淡藍、灰色和綠色。這與北歐的寒冷氣候和大自然環境有關。
5. 中東地區： 伊斯蘭文化中的顏色偏好取決于宗教信仰。綠色在伊斯蘭教中被視為一種吉祥顏色，而黃色和白色也常見于宗教儀式中。
6. 非洲地區： 撒哈拉以南非洲這一地區的色彩偏好通常更加豐富多彩，反映了當地文化的多樣性。明亮的紅色、橙色和藍色是常見的顏色。
7. 美洲地區： 拉丁美洲文化通常偏好明快、熱烈的顏色，如紅色、黃色和橙色。這與拉丁文化的熱情和歡慶有關。
8. 北美： 北美地區的顏色偏好可能因文化背景和個體差異而異，但一般來說，中性色如灰色、棕色在現代設計和時尚中較為流行。

不管是從年齡、地域、性別，以上只是一些基本趨勢，我們需要尊重個體差異。保持開放的心態去進行多樣的色彩表達。

3. 色彩心理語義

色彩有眾多的語義形容詞，為了掌握這些豐富的語義詞匯和更為客觀地評價色彩引起人們的情感反應，采用語義分類法對其進行歸納研究。設計色彩學一文中將色彩心理語義歸納為三維性。拆解為評價性、活力性、潛力性因子。

評價性因子

1. 自然的-不自然的
2. 愉快的——不快的
3. 優雅的——粗俗的
4. 甜美的——苦澀的
5. 漂亮的——污穢的
6. 喜歡的——討嫌的
7. 美的——丑的

活動性因子

1. 溫暖的——寒冷的
2. 前進的——后退的
3. 膨脹的——收縮的
4. 熱烈的——冷漠的
5. 花哨的——樸素的
6. 明亮的——昏暗的
7. 動態的——靜態的
8. 浮躁的——沉浸的
9. 積極的——消極的

潛力性因子

1. 男性化的——女性化的
2. 堅硬的——柔軟的
3. 緊張的——松弛的
4. 濃膩的——輕淡的
5. 深沉的——浮淺的
6. 重的——輕的
7. 強的——弱的

4. 色彩情感

關于色彩情感可以在電影中有比較直觀的感受，比如蜘蛛俠縱橫宇宙格溫和父親之間的鏡頭，同樣的場景通過顏色的變化，傳遞說角色內心情緒變化和故事的情節走向。飛屋環游記也有一樣的表達。

不同色彩屬性對應的色彩情感

色彩心理學研究顏色對人類情感、行為和認知的影響。而不同的顏色可能引起不同的情感和反應，因此在設計中可以利用色彩心理學來達到特定的效果。

下面從冷暖、明度、純度、色相這四種維度的色彩屬性看看它們分別對應的色彩情感。

色彩作為一種外顯屬性，影響用戶對產品的情感認知，也在一定程度上影響用戶在購買和使用階段的行為決策。

那么色彩的使用和變化真的能提升轉化么？我們一起來看幾個實際案例。

三、色彩變化帶來提升轉化的成功案例

案例 1: Heinz

通過將番茄醬包裝顏色從紅色改為綠色，作為支持第一部怪物史萊克電影的促銷番茄醬，則為他們帶來了 60%的銷售增幅。

這個例子我們發現品牌通過使用色彩和用戶進行“情感聯結”引發情感共鳴，并結合第一部怪物史萊克電影熱播這樣的文化背景，促進整體的產品轉化。

案例 2: HubSpot

HubSpot 在客戶端網站上使用綠色和紅色按鈕進行了類似的測試。他們進行了幾天的測試，總共有超過 2,000 次訪問。

他們的結果？紅色按鈕比綠色按鈕高 21%。

3. 案例 3: VWO

第三個案例由 VWO 提供。他們的客戶是一家銷售手機和配件的電子商務網站。他們在網站上測試了“立即購買”按鈕的顏色。測試包括帶有綠色文本的白色按鈕、帶有白色文本的綠色按鈕和帶有白色文本的橙紅色按鈕。橙紅色按鈕，轉化率提升了 5%。

上面兩個例子，都是通過顏色來進行“強化視覺的吸引力”，使用明亮熱情、引入注目的色彩來突出動作，從而吸引用戶的注意力并促進轉化。

其次色彩對人類行為的心理影響的研究表明，顧客需要 90 秒才能形成對產品的看法，并且 90%的時間，這種看法受到顏色的影響。

上面提到色彩對轉化帶來的案例，接下來系統的看看色彩為什么需要升級。價值在哪？

四、品牌色為什么需要升級&如何升級？

1. 為什么升級

1. 業務&戰略的角度：新的理念、戰略和營銷策略
2. 產品定位變化：市場和目標用戶的變化
3. 用戶偏好變化&用戶體驗升級

業務戰略和品牌故事這里就不贅述了，詳細說下這里的用戶偏好變化和體驗升級。

首先需要明確用戶偏好是一直在變化的，隨著個人經歷、環境和社會文化的變化、以及個性化和定制化的需求越來越高，用戶的在使用產品時帶來的行為體驗、感知體驗、價值體驗都在逐漸的提高。而好的色彩組合能夠減少用戶的混亂感和焦慮感，使用戶能夠盡快找到他們需要的信息

2. 如何升級

說完為什么需要升級，簡單聊聊如何著手進行色彩升級

① 前期分析

色彩趨勢

1. Pantone
2. APP/PC_匯總盤點
3. 設計平臺 behance/Dribbble/Muzli 匯總盤點

最新潘通色：

競品色彩表達

1. 直接、間接競品
2. 優秀競品

自身產品分析

1. 存在的問題
2. 需要繼續保持的品牌特性

② 色彩理性描述

掌握并熟悉四大色彩體系

（1）建立色彩內部的邏輯架構，對色彩的描述從模糊的感性描述進入精確的理性描述；

（2）由于色彩體系是全球通用的 可參照體系，使色彩產品可能成為全球化統一產業；

（3）設計者可以直觀地通過色立體的選擇出調和的配色，快速確定設計信息與色彩的對應關系。

1. 奧斯特瓦德色彩體系
2. 孟賽爾色彩體系
3. NCS 色彩體系
4. PCCS 色彩體系

③ 實際應用注意點

（1）區分場景

1. 基礎功能場景（品牌色/輔助色/狀態用色/灰階)
2. 風格化用色（大促和日常）

（2）注意顏色占比&數量

1. 6：3：1 法則
2. 控制顏色數量

（3）視感平衡&可識別

1. 不同色彩明度的差異
2. 遵循 WCAG 標準

④ 方法論&技術手段

（1）方法論

1. 感性意象
2. 情感方法
3. 模糊層次分析法
4. 灰色聚類法
5. 神經網絡
6. 灰色理論
7. 感性工學

（2）內隱測量手段

1. 眼動
2. 腦電

四、最后總結下

色彩在用戶界面設計中起著至關重要的作用。它不僅影響視覺體驗，還可以影響用戶的情感反應和行為。以下是色彩在 UI 設計中的一些具體應用和注意事項：

1. 建立品牌認知

品牌色彩：使用品牌主色和輔助色來保持一致性，增強品牌識別度。

情感聯想：選擇與品牌形象和目標用戶情感相匹配的顏色。例如，綠色通常與環保、健康相關，而藍色則常與科技、信任相關。

2. 頁面結構層級和視覺層次

顏色區分：使用不同的顏色來區分不同的功能區塊，如導航欄、按鈕和背景區域。

強調重點：使用對比色來突出重要信息或關鍵功能，使其更容易被用戶注意到。

背景與前景顏色：通過調整背景和前景顏色的對比度，創造視覺層次，使內容更清晰。

陰影和漸變：使用陰影和漸變效果增加深度和層次感，使界面更具立體感。

3. 提升可用性和可讀性

對比度：確保文本與背景之間有足夠的對比度，以提高可讀性，尤其是在光線較差的環境下。

顏色一致性：保持顏色的一致性，以避免用戶混淆。例如，同一功能在不同頁面中使用相同的顏色。

4. 引導用戶行為

行動顏色：使用鮮艷的顏色來引導用戶執行某些操作，如“購買”、“提交”按鈕等。

反饋顏色：使用不同的顏色來提供操作反饋，如綠色表示成功，紅色表示錯誤或警告。

5. 考慮色盲用戶

色盲友好設計：避免僅通過顏色來傳達重要信息，使用圖標、標簽等輔助元素。

色盲模擬工具：使用工具模擬色盲用戶的視覺效果，確保設計對所有用戶友好。

6. 營造情感氛圍

情感驅動：根據應用的性質選擇適合的顏色組合。如健身應用可以使用活力的橙色和綠色，金融應用可以使用穩重的藍色和灰色。

季節性變化：根據節日或季節變化調整界面顏色，如圣誕節使用紅色和綠色，春夏季使用明亮的顏色。

7. 色彩與文化差異

文化敏感性：不同文化對顏色有不同的理解和偏好，在全球化應用中要考慮這些差異。

本地化顏色：在本地化設計中，選擇符合當地文化和習慣的顏色。

總而言之色彩在 UI 設計中不僅是裝飾元素，更是傳達信息、引導用戶行為和提升用戶體驗的重要元素。通過合理的色彩選擇和搭配，可以創造出既美觀又實用的用戶界面，提升整體產品的吸引力和使用效果。

以上感謝大家的閱讀。

歡迎關注「JellyDesign」的小程序：