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

前段时间对 APP 整体色彩升级探索新版本，通过系统盘点，有一些输出与大家分享。 本文将从色彩的基本原理到实际应用进行梳理，试图与色彩打好交道。

你会发现，在不同的产品修订或品牌建设中，通常需要调整颜色，因为颜色可以直接影响人们对品牌的感知，从而建立情感联系，积极占据用户的注意力。

 

一、色彩的基本概念

1. 色彩原理

颜色原理分为颜色 物理原理 和 生理原理 两部分。

物理原理是指光照射在物体上刺激人的颜色感觉。

生理原理是指人类视觉和知觉对颜色波长和三种属性（色相、亮度和纯度）的各种变化所产生的各种反应。

从色彩原理可以看出，人眼要看到色彩必须有三个因素，即 光线，物体，眼睛。

只有有了这三个元素，我们才能观察到颜色。

人眼看到的颜色与可见光谱上的频率相对应。

光谱的简单定义： 光是一种电磁波，而可见光是一个小范围的电磁波。光的波长决定了我们看到的颜色。可见光的波长范围约为 380 纳米(紫色)到 750 纳米(红色)。

2. 色彩三要素

构成颜色有三个要素

色相明度饱和度

色相是颜色类别，如红色和黄色。色相本质上是电磁波的频率。不同的波长决定不同的色相。在光谱中，红色、橙色、黄色、绿色、蓝色和紫色给我们带来不同的颜色感觉，因为它们有不同的波长。它们是最基本的色相 。

亮度是指颜色的亮度和暗度，也可称为亮度、深度等。亮度由振幅决定，振幅越宽，进入光越大，物体对光的反射率越高，亮度越高；振幅越窄，进入光越小，物体对光的反射率越低，亮度越低。可以理解，一种颜色添加了多少白色颜料，添加了多少黑色颜料。

饱和度是指颜色的亮度，即颜色的饱和度、纯度和颜色。它是由不同颜色波长的简单程度引起的。所有具有色相感的颜色都有一定的纯度。没有颜色，没有色调，也没有纯度。也可以认为它们的纯度值为零。高级灰色等颜色整体降低了颜色的饱和度。

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. 地域偏好

中国： 由于红色象征着中国传统文化中的幸福、繁荣和好运，中国文化通常喜欢红色。此外，黄色也被认为是吉祥的颜色。日本： 日本传统文化更喜欢优雅柔和的颜色，如樱花粉、浅蓝色和绿色。传统的和服和建筑也强调和谐。地中海地区： 地中海沿岸国家通常更喜欢明亮饱和的颜色，这反映了阳光明媚的气候。蓝色和白色在地中海风格的建筑和装饰中很常见。北欧国家： 在北欧文化中，通常偏爱淡蓝色、灰色和绿色等冷色。这与北欧寒冷的气候和自然环境有关。中东地区： 伊斯兰文化的色彩偏好取决于宗教信仰。在伊斯兰教中，绿色被认为是一种吉祥的颜色，黄色和白色在宗教仪式中也很常见。非洲地区： 撒哈拉以南非洲的色彩偏好通常更加丰富多彩，反映了当地文化的多样性。鲜红色、橙色和蓝色是常见的颜色。美洲地区： 拉丁美洲文化通常更喜欢鲜艳温暖的颜色，如红色、黄色和橙色。这与拉丁文化的热情和欢庆有关。北美： 由于文化背景和个体差异，北美地区的色彩偏好可能会有所不同，但一般来说，灰色、棕色等中性色在现代设计和时尚中更为流行。

无论是年龄、地区还是性别，以上都只是一些基本趋势，我们需要尊重个体差异。保持开放的态度来表达各种颜色。

3. 色彩心理语义

色彩有许多语义形容词。为了掌握这些丰富的语义词汇，更客观地评价色彩引起的情感反应，采用语义分类法进行了总结和研究。色彩心理语义在设计色彩科学中被归纳为三维。分解为评价、活力和潜在因素。

评价性因子

自然-不自然的快乐-不快的优雅-粗俗的甜蜜-苦涩的美丽-肮脏的爱-可疑的美-丑陋的

活动性因子

温暖、寒冷、前进、后退、膨胀、收缩、温暖、冷漠、花哨、朴素、明亮、昏暗、动态、静态、浮躁、沉浸、积极、消极

潜力性因子

男性化-女性化，坚硬，柔软，紧张，放松，浓郁，轻，深，浅，重，轻，强，弱

4. 色彩情感

电影中可以直观地感受到色彩情感，比如蜘蛛侠纵横宇宙格温和父亲之间的镜头，同一个场景通过色彩的变化传达人物内心情感的变化和故事的情节走向。飞屋环游记也有同样的表达。

对应不同颜色属性的色彩情感

色彩心理学研究色彩对人类情感、行为和认知的影响。不同的颜色可能会引起不同的情绪和反应，因此色彩心理学可以用于设计。

下面从冷暖、明度、纯度、色相四个维度的色彩属性来看它们对应的色彩情感。

色彩作为一种外显性属性，在一定程度上影响了用户对产品的情感认知，也影响了用户在购买和使用阶段的行为决策。

那么颜色的使用和变化真的能改善转化吗？我们来看看几个实际案例。

三、色彩变化带来改善转化的成功案例

案例 1: Heinz

番茄酱作为第一部怪物史莱克电影的推广，将番茄酱的包装颜色从红色改为绿色，带给他们 60%的销售增长。

在这个例子中，我们发现该品牌通过使用颜色和用户之间的“情感联系”来引起情感共鸣，并结合第一部怪物史莱克电影的文化背景，促进整体产品转型。

案例 2: HubSpot

HubSpot 使用绿色和红色按钮在客户端网站上进行类似的测试。他们进行了几天的测试，总共超过了 2,000 次访问。

他们的结果？红色按钮比绿色按钮高 21%。

3. 案例 3: VWO

第三个案例是由 VWO 提供。他们的客户是一个销售手机和配件的电子商务网站。他们在网站上测试了“立即购买”按钮的颜色。测试包括带有绿色文本的白色按钮、带有白色文本的绿色按钮和带有白色文本的橙红色按钮。橙红色按钮提高了转化率 5%。

以上两个例子都是通过色彩来“增强视觉吸引力”，用明亮的热情和引入注意力的色彩来突出动作，从而吸引用户的注意力，促进转化。

其次，色彩对人类行为的心理影响表明，客户需要 90 秒可以形成对产品的看法， 在90%的时间里，这种观点受到颜色的影响。

上面提到了颜色转换的案例，然后系统地看看为什么颜色需要升级。价值在哪里？

为什么品牌颜色需要升级？&如何升级？

1. 为什么升级

业务&战略角度：新概念、战略和营销策略产品定位的变化：市场和目标用户的变化&升级用户体验

商业战略和品牌故事在这里就不赘述了这里详细介绍了用户偏好的变化和体验升级。

首先，需要明确的是，用户偏好一直在发生变化。随着个人经验、环境和社会文化的变化，以及对个性化和定制的需求越来越高，用户在使用产品时带来的行为体验、感知体验和价值体验也在逐渐提高。良好的色彩组合可以减少用户的混乱和焦虑，使用户能够尽快找到他们需要的信息

2. 如何升级

之后为什么要升级，简单谈谈如何开始色彩升级？

① 前期分析

色彩趋势

PantoneAPP/PC_总结盘点设计平台 behance/Dribbble/Muzli 汇总盘点

最新的潘通色：

 

 

竞争产品的色彩表达

直接间接竞争优秀竞争产品

分析自己的产品

存在的问题需要继续保持品牌特征

② 理性的色彩描述

掌握和熟悉四大色彩体系

(1)建立色彩内部的逻辑结构，将色彩描述从模糊的感性描述进入准确的理性描述；

(2)因为颜色系统是全球通用的 色彩产品可参照系统成为全球统一产业；

(3)设计师可以通过色彩的三维选择，直观地快速确定设计信息与色彩的对应关系。

奥斯特瓦德色彩系统孟赛尔色彩系统NCS PCCS颜色系统 色彩体系

③ 实际应用注意事项

(1)区分场景

基本功能场景(品牌颜色/辅助颜色/状态颜色/灰阶)风格颜色(促销和日常生活)

(2)注意颜色比例&数量

6：3：1 控制颜色数量的规则

(3)视觉平衡&可识别

不同颜色亮度的差异遵循不同颜色亮度的差异 WCAG 标准

④ 方法论&技术手段

（1）方法论

感性意象情感方法模糊层次分析方法灰色聚类法神经网络灰色理论感性工学

(2)内隐测量手段

眼动脑电

四、最后总结一下

色彩在用户界面设计中起着至关重要的作用。它不仅影响视觉体验，还影响用户的情感反应和行为。以下是颜色 UI 设计中的一些具体应用和注意事项：

1. 建立品牌认知

品牌色彩：利用品牌主色和辅色来保持一致性，增强品牌认知度。

情感联想：选择与品牌形象和目标用户情感相匹配的颜色。例如，绿色通常与环境保护和健康有关，而蓝色通常与技术和信任有关。

2. 页面结构层次和视觉层次

颜色区别：使用不同的颜色来区分不同的功能块，如导航栏、按钮和背景区。

强调重点：使用对比色来突出重要信息或关键功能，使用户更容易注意到。

背景与前景色：通过调整背景与前景色的对比度，创造视觉层次，使内容更加清晰。

阴影和渐变：利用阴影和渐变效果增加深度和层次感，使界面更加立体。

3. 提高可用性和可读性

对比度：确保文本和背景之间有足够的对比度，以提高可读性，特别是在光线较差的环境中。

颜色一致性：保持颜色一致性，避免用户混淆。例如，在不同的页面上使用相同的颜色。

4. 引导用户行为

动作颜色：用鲜艳的颜色引导用户执行某些操作，如“购买”、提交按钮等。

反馈颜色：使用不同的颜色提供操作反馈，如绿色表示成功，红色表示错误或警告。

5. 考虑色盲用户

色盲友好设计：避免使用图标、标签等辅助元素，只通过颜色传达重要信息。

色盲模拟工具：利用工具模拟色盲用户的视觉效果，确保设计对所有用户友好。

6. 营造情感氛围

情感驱动：根据应用的性质选择合适的颜色组合。例如，健身应用程序可以使用充满活力的橙色和绿色，金融应用程序可以使用稳定的蓝色和灰色。

季节性变化：根据节日或季节变化调整界面颜色，如圣诞红绿，春夏明亮。

7. 色彩与文化的差异

文化敏感性：不同的文化对颜色有不同的理解和偏好，在全球应用中应考虑这些差异。

本地化颜色：在本地化设计中，选择符合当地文化和习惯的颜色。

总而言之，颜色在 UI 设计不仅是装饰元素，也是传达信息、引导用户行为、提升用户体验的重要元素。通过合理的色彩选择和搭配，可以创造出美观实用的用户界面，提高整体产品的吸引力和使用效果。

感谢您的阅读。

欢迎关注「JellyDesign」的小程序：