前段時間對 APP 新版本進(jìn)行整體色彩升級探索，通過系統(tǒng)的盤點(diǎn)，有一些輸出和大家分享。 本文將從色彩的基礎(chǔ)原理到實(shí)際應(yīng)用進(jìn)行梳理，試圖和色彩打好交道。

大家會發(fā)現(xiàn)在不同的產(chǎn)品改版或者品牌搭建中，通常都需要對色彩進(jìn)行調(diào)整，因?yàn)樯士梢灾苯佑绊懭藗儗ζ放频母兄獜亩⑶楦羞B接，去主動占據(jù)用戶的注意力。

一、色彩的基本概念

1. 色彩原理

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

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

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

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

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

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

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

2. 色彩三要素

構(gòu)成色彩有三大要素

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

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

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

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

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

3. 色彩模型

梳理幾個大家常用的模型

① RGB（光的模型）

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

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

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

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

（色相 H）完全一致

S（飽和度）不一樣

L 和 B（明度）也不一樣

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

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

CMYK（印刷模型）

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

C：Cyan =青色，常被誤稱為“天藍(lán)色”或“湛藍(lán)”

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

Y：Yellow =黃色

K：blacK=黑色

HEX（色彩空間）：十六進(jìn)制顏色模式，是一種表示顏色的編碼方式，經(jīng)常用于 Web 設(shè)計和開發(fā)。

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

HEX 碼的結(jié)構(gòu)是#RRGGBB; RR 表示紅色的部分，GG 表示綠色的部分，BB 表示藍(lán)色的部分。

了解完色彩的基礎(chǔ)概念，接下來再看看定義色彩有哪些注意要點(diǎn)？

二、定義色彩需要了解哪些關(guān)鍵點(diǎn)

1. 色彩觀

色彩觀的影響因素

文化習(xí)俗：紅色在中國通常象征著好運(yùn)、繁榮和幸福。在春節(jié)和其他慶?；顒又校t色是主要的裝飾顏色。

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

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

由自然而來：綠色與環(huán)保、自然和希望聯(lián)系在一起。

科學(xué)視角：藍(lán)色通常與冷靜、信任和穩(wěn)定性有關(guān)

社會背景（歷史事件或社會運(yùn)動）：彩虹色成為 LGBTQ+社群平權(quán)運(yùn)動的標(biāo)志；工業(yè)革命的興起推進(jìn)了印象派用色表達(dá)

使用顏色時，應(yīng)對不同文化差異，應(yīng)該保持適當(dāng)?shù)拿舾行?，采取尊重和?jǐn)慎態(tài)度的同時，擁抱顏色選擇的多樣性。

2. 色彩偏好

① 年齡偏好

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

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

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

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

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

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

2. 性別偏好

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

女性：在許多文化中，女性通常更喜歡紅色和粉色。這兩種顏色與女性的社會角色、文化傳統(tǒng)和女性化的形象有關(guān)。但當(dāng)代的性別規(guī)范挑戰(zhàn)了這種聯(lián)系。比如一些女性也可能喜歡紫色和藍(lán)色。

3. 地域偏好

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

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

3. 色彩心理語義

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

評價性因子

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

活動性因子

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

潛力性因子

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

4. 色彩情感

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

不同色彩屬性對應(yīng)的色彩情感

色彩心理學(xué)研究顏色對人類情感、行為和認(rèn)知的影響。而不同的顏色可能引起不同的情感和反應(yīng)，因此在設(shè)計中可以利用色彩心理學(xué)來達(dá)到特定的效果。

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

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

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

三、色彩變化帶來提升轉(zhuǎn)化的成功案例

案例 1: Heinz

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

這個例子我們發(fā)現(xiàn)品牌通過使用色彩和用戶進(jìn)行“情感聯(lián)結(jié)”引發(fā)情感共鳴，并結(jié)合第一部怪物史萊克電影熱播這樣的文化背景，促進(jìn)整體的產(chǎn)品轉(zhuǎn)化。

案例 2: HubSpot

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

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

3. 案例 3: VWO

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

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

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

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

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

1. 為什么升級

1. 業(yè)務(wù)&戰(zhàn)略的角度：新的理念、戰(zhàn)略和營銷策略
2. 產(chǎn)品定位變化：市場和目標(biāo)用戶的變化
3. 用戶偏好變化&用戶體驗(yàn)升級

業(yè)務(wù)戰(zhàn)略和品牌故事這里就不贅述了，詳細(xì)說下這里的用戶偏好變化和體驗(yàn)升級。

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

2. 如何升級

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

① 前期分析

色彩趨勢

1. Pantone
2. APP/PC_匯總盤點(diǎn)
3. 設(shè)計平臺 behance/Dribbble/Muzli 匯總盤點(diǎn)

最新潘通色：

競品色彩表達(dá)

1. 直接、間接競品
2. 優(yōu)秀競品

自身產(chǎn)品分析

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

② 色彩理性描述

掌握并熟悉四大色彩體系

（1）建立色彩內(nèi)部的邏輯架構(gòu)，對色彩的描述從模糊的感性描述進(jìn)入精確的理性描述；

（2）由于色彩體系是全球通用的 可參照體系，使色彩產(chǎn)品可能成為全球化統(tǒng)一產(chǎn)業(yè)；

（3）設(shè)計者可以直觀地通過色立體的選擇出調(diào)和的配色，快速確定設(shè)計信息與色彩的對應(yīng)關(guān)系。

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

③ 實(shí)際應(yīng)用注意點(diǎn)

（1）區(qū)分場景

1. 基礎(chǔ)功能場景（品牌色/輔助色/狀態(tài)用色/灰階)
2. 風(fēng)格化用色（大促和日常）

（2）注意顏色占比&數(shù)量

1. 6：3：1 法則
2. 控制顏色數(shù)量

（3）視感平衡&可識別

1. 不同色彩明度的差異
2. 遵循 WCAG 標(biāo)準(zhǔn)

④ 方法論&技術(shù)手段

（1）方法論

1. 感性意象
2. 情感方法
3. 模糊層次分析法
4. 灰色聚類法
5. 神經(jīng)網(wǎng)絡(luò)
6. 灰色理論
7. 感性工學(xué)

（2）內(nèi)隱測量手段

1. 眼動
2. 腦電

四、最后總結(jié)下

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

1. 建立品牌認(rèn)知

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

情感聯(lián)想：選擇與品牌形象和目標(biāo)用戶情感相匹配的顏色。例如，綠色通常與環(huán)保、健康相關(guān)，而藍(lán)色則常與科技、信任相關(guān)。

2. 頁面結(jié)構(gòu)層級和視覺層次

顏色區(qū)分：使用不同的顏色來區(qū)分不同的功能區(qū)塊，如導(dǎo)航欄、按鈕和背景區(qū)域。

強(qiáng)調(diào)重點(diǎn)：使用對比色來突出重要信息或關(guān)鍵功能，使其更容易被用戶注意到。

背景與前景顏色：通過調(diào)整背景和前景顏色的對比度，創(chuàng)造視覺層次，使內(nèi)容更清晰。

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

3. 提升可用性和可讀性

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

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

4. 引導(dǎo)用戶行為

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

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

5. 考慮色盲用戶

色盲友好設(shè)計：避免僅通過顏色來傳達(dá)重要信息，使用圖標(biāo)、標(biāo)簽等輔助元素。

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

6. 營造情感氛圍

情感驅(qū)動：根據(jù)應(yīng)用的性質(zhì)選擇適合的顏色組合。如健身應(yīng)用可以使用活力的橙色和綠色，金融應(yīng)用可以使用穩(wěn)重的藍(lán)色和灰色。

季節(jié)性變化：根據(jù)節(jié)日或季節(jié)變化調(diào)整界面顏色，如圣誕節(jié)使用紅色和綠色，春夏季使用明亮的顏色。

7. 色彩與文化差異

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

本地化顏色：在本地化設(shè)計中，選擇符合當(dāng)?shù)匚幕土?xí)慣的顏色。

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

以上感謝大家的閱讀。

歡迎關(guān)注「JellyDesign