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

大家會(huì)發(fā)現(xiàn)在不同的產(chǎn)品改版或者品牌搭建中，通常都需要對(duì)色彩進(jìn)行調(diào)整，因?yàn)樯士梢灾苯佑绊懭藗儗?duì)品牌的感知從而建立情感連接，去主動(dòng)占據(jù)用戶的注意力。

 

一、色彩的基本概念

1. 色彩原理

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

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

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

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

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

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

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

2. 色彩三要素

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

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

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

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

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

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

3. 色彩模型

梳理幾個(gè)大家常用的模型

① RGB（光的模型）

RGB 顏色模型是一種加色模型，將紅（R）、綠（G）、藍(lán)（B）三原色的色光以不同的比例相加混色，以合成產(chǎn)生各種色彩光。RGB 顏色模型的主要目的是在電子系統(tǒng)中檢測(cè)，表示和顯示圖像，比如電視和電腦、手機(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 是彩色印刷時(shí)采用的一種套色模式，利用色料的三原色混色原理，加上黑色油墨，共計(jì)四種顏色混合疊加，形成所謂“全彩印刷”。四種標(biāo)準(zhǔn)顏色是：

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

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

Y：Yellow =黃色

K：blacK=黑色

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

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

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

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

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

1. 色彩觀

色彩觀的影響因素

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

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

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

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

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

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

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

2. 色彩偏好

① 年齡偏好

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

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

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

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

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

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

2. 性別偏好

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

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

3. 地域偏好

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

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

3. 色彩心理語(yǔ)義

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

評(píng)價(jià)性因子

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

活動(dòng)性因子

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

潛力性因子

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

4. 色彩情感

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

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

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

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

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

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

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

案例 1: Heinz

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

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

案例 2: HubSpot

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

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

3. 案例 3: VWO

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

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

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

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

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

1. 為什么升級(jí)

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

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

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

2. 如何升級(jí)

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

① 前期分析

色彩趨勢(shì)

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

最新潘通色：

競(jìng)品色彩表達(dá)

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

自身產(chǎn)品分析

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

② 色彩理性描述

掌握并熟悉四大色彩體系

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

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

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

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

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

（1）區(qū)分場(chǎng)景

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

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

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

（3）視感平衡&可識(shí)別

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)隱測(cè)量手段

1. 眼動(dòng)
2. 腦電

四、最后總結(jié)下

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

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

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

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

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

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

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

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

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

3. 提升可用性和可讀性

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

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

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

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

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

5. 考慮色盲用戶

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

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

6. 營(yíng)造情感氛圍

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

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

7. 色彩與文化差異

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

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

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

以上感謝大家的閱讀。

歡迎關(guān)注「JellyDesign」的小程序：