换一个颜色,销量提升60%！大公司大佬分享的色彩运用技巧指南

2. 色彩三要素

色彩的构成主要有三个要素：

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

色相指的是颜色的种类，例如红色和黄色。实际上，色相就是电磁波的频率。不同的波长会产生不同的色相。在光谱中，红、橙、黄、绿、蓝、紫等颜色因其波长不同，给我们带来了各异的色彩体验，它们构成了最基本的色相。

明度表示色彩的明暗程度，也可以称为亮度或深浅度。明度的高低由光波的振幅决定：振幅越大，进光量越多，物体对光的反射率越高，明度就越高；反之，振幅越小，进光量越少，物体的反射率也降低，明度则会下降。简单来说，明度可以理解为某种颜色中添加了多少白色颜料或黑色颜料的结果。

饱和度指的是色彩的鲜艳程度，也可以称为色彩的饱和度、纯净度或彩度。它的高低由不同颜色波长的单纯程度决定。所有具有色相的彩色都有一定的纯度，而无彩色则没有色相，因而纯度也为零。类似于高级灰这样的颜色，整体上降低了色彩的饱和度。

Alfred Stevens 的作品《Portrait of Mrs. Howe》就是一幅在不改变色相的前提下，仅通过调整明度和饱和度来展现浪漫主义风格的作品。

3. 色彩模型

接下来梳理几个常用的色彩模型：

① RGB（光的模型）

RGB 颜色模型是一种加色模型，通过将红（R）、绿（G）和蓝（B）三种原色的光以不同比例相加，从而混合产生各种色彩。这一模型主要用于电子系统中对图像的检测、表示和显示，例如电视、电脑、手机和相机等设备。

② HSB（或称 HSV）

HSB 模型用于描述颜色，包含色相（0-360）、饱和度（0-100）和明度（0-100）。

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

HSL 和 HSB 本质上都用于描述色相、饱和度和明度，但它们之间存在一些区别：

• 色相（H）是完全一致的。
• 饱和度（S）的定义不同。
• 明度（L 和 B）也有区别。

在 HSB 中，S（饱和度）控制的是纯色中混入的白色量，值越大，白色成分越少，颜色越纯；而 B（明度）则控制纯色中混入的黑色量，值越大，黑色成分越少，明度就越高。

在 HSL 中，S（饱和度）与黑白无关，而 L（亮度）则控制纯色中混入的黑白两种颜色。

CMYK 是一种用于彩色印刷的套色模式，基于色料的三原色混色原理，外加黑色油墨，共同形成“全彩印刷”。四种标准颜色包括：

• C：Cyan = 青色，常被误称为“天蓝色”或“湛蓝”。
• M：Magenta = 洋红色，也称为“品红色”。
• Y：Yellow = 黄色。
• K：Black = 黑色。

HEX（色彩空间）：十六进制颜色模式是一种用于表示颜色的编码方式，广泛应用于网页设计和开发。

HEX 码由六个字符组成，每个字符都是 0-9 和 A-F（或 a-f）之间的一个十六进制数字，用以表示 RGB（红、绿、蓝）颜色空间中的颜色。

HEX 码的格式为 #RRGGBB，其中 RR 代表红色成分，GG 代表绿色成分，而 BB 则表示蓝色成分。

二、定义色彩需要了解的关键点

1. 色彩观

色彩观受到多种因素的影响：

• 文化习俗：在中国，红色通常象征好运、繁荣与幸福，因此在春节及其他庆祝活动中，红色常作为主要的装饰色。
• 宗教信仰：在伊斯兰文化中，绿色常常与生命、成长和繁荣相联系；佛教僧侣通常穿着黄色袍子，以象征节制与谦逊；而在印度教中，红色则常被用来象征繁荣、幸福及神圣的庆祝活动。
• 历史原因：在中国，黄色被视为帝王的颜色，代表着皇权和贵族地位；在古埃及的宗教仪式中，白色常用于祭祀和神庙装饰。
• 自然因素：绿色与环保、自然和希望紧密相连。
• 科学视角：蓝色通常与冷静、信任和稳定性相关联。
• 社会背景（历史事件或社会运动）：彩虹色已成为 LGBTQ+ 社群平权运动的象征；而工业革命的兴起则推动了印象派在色彩表达上的创新。

使用颜色时，应对不同文化差异，应该保持适当的敏感性，采取尊重和谨慎态度的同时，拥抱颜色选择的多样性。

2. 色彩偏好

① 年龄偏好

婴儿和幼儿（0-2 岁）：对鲜艳且高度饱和的颜色表现出明显的兴趣，特别是红色、黄色和蓝色。因此，父母通常会选择充满活力和愉悦感的颜色来装饰他们的生活环境。

儿童（3-12 岁）：倾向于喜欢明亮、多彩且饱和度高的颜色，如橙色、绿色和紫色。他们的偏好常常受到卡通、动漫和电子游戏等娱乐内容中所使用的鲜艳颜色的影响。

青少年（13-19 岁）：开始形成更为复杂的色彩偏好，可能更注重时尚和个性化，因而会对流行色和时尚元素产生浓厚的兴趣。

成年人（20-64 岁）：在正式和职业场合中，通常更倾向于选择中性色，如蓝色、白色和灰色。在个人生活和休闲活动中，他们的色彩偏好则更加个性化，受到文化背景、地域和个人经历的影响。

老年人（65 岁及以上）：可能更容易接受柔和和温暖的颜色，如深蓝、棕色和米色等。

在《色彩心理学与色彩疗法》一书中，研究表明，相较于红色，人们在一生中更倾向于喜欢蓝色，而在童年时期则更偏好黄色。随着年龄的增长，我们逐渐更喜欢短波长的颜色（如蓝色、绿色和紫色），而不是长波长的颜色（如红色、橙色和黄色）。

三、总结

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

1. 建立品牌认知
   • 品牌色彩：运用品牌的主色和辅助色，保持一致性，从而增强品牌的识别度。
   • 情感联想：选择与品牌形象和目标用户情感相契合的颜色。例如，绿色通常与环保和健康相关，而蓝色则与科技和信任相联系。
2. 页面结构层级与视觉层次
   • 颜色区分：使用不同颜色来区分功能区域，例如导航栏、按钮和背景区域。
   • 强调重点：通过对比色突出重要信息或功能，使其更易被用户关注。
   • 背景与前景颜色：调整背景和前景颜色的对比度，以创造视觉层次，使内容更加清晰。
   • 阴影和渐变：利用阴影和渐变效果增加界面的深度和层次感。
3. 提升可用性与可读性
   • 对比度：确保文本与背景之间有足够的对比度，从而提高可读性，尤其在光线较差的环境下。
   • 颜色一致性：保持颜色的一致性，以避免用户产生混淆。例如，要在不同页面中使用相同颜色来表示同一功能。
4. 引导用户行为
   • 行动颜色：使用鲜艳的颜色来引导用户执行特定操作，比如“购买”或“提交”按钮。
   • 反馈颜色：运用不同颜色提供操作反馈，比如绿色表示成功，红色表示错误或警告。
5. 考虑色盲用户
   • 色盲友好设计：避免仅使用颜色传达重要信息，配合图标和标签等辅助元素。
   • 色盲模拟工具：使用工具模拟色盲用户看到的效果，以确保设计对所有用户友好。
6. 营造情感氛围
   • 情感驱动：根据应用性质选择合适的颜色组合。例如，健身应用可使用活力的橙色和绿色，金融应用则可使用稳重的蓝色和灰色。
   • 季节性变化：依据节日或季节变化调整界面颜色，比如圣诞节使用红色和绿色，春夏季使用明亮的色调。
7. 色彩与文化差异
   • 文化敏感性：不同文化对颜色有不同的理解和偏好，因此在全球化应用中需考虑这些差异。
   • 本地化颜色：在本地化设计中，选择符合当地文化和习惯的颜色。

总之，色彩在 UI 设计中不仅仅是装饰元素，它是传递信息、引导用户行为和提升用户体验的关键因素。通过合理的色彩选择和搭配，可以打造出既美观又实用的用户界面，从而提高整体产品的吸引力和使用效果。