换个颜色销量飙升60%！大厂高手总结的色彩应用指南

前段时间对 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」的小程序：