夯实色彩基础，巧做甲方爸爸解语花(上篇)

Mia1013

广州/UI设计师/4年前/468浏览

版权

Mia1013

熟悉规则，然后巧妙适当地打破规则。

颜色之于设计犹如建材之于建筑。

色彩作为十分重要的视觉元素，它不仅要取得美感，让人心情愉悦；它还要支撑品牌的核心理念，有意识地表达品牌的核心价值，让人有记忆信息。

作为设计师，色彩是必修课。夯实色彩基础，开拓设计思维能力和色彩表现应用能力是非常必要的。

光与色彩

色彩是可见光反映到人的视网膜上形成的感觉。人的眼睛可以识别色彩的数量在100万种颜色左右，但是，可以被判别的颜色只有10种左右。

色彩感觉的产生源于脑中的三大因素，分别是色彩的生理反应、色彩体验的记忆、学习获得的智慧。每个人对颜色的感知程度不同(与生俱来)，对色彩经验和记忆不同(受宗教、文化、政治、社会、个人经历等因素的影响)，所以，色彩的体验是因人而异的。

色彩类型

固有色：物体本身在白色光源下呈现的固有的色彩，对固有色的把握，主要是准确的把握物体的色相。

环境色：在各类光源(日光、月光、灯光等)的照射下，环境所呈现的颜色。

光源色：各类光源(日光、月光、灯光等)所发出的光。受光波的长短、强弱、比例性质不同的影响，形成不同的色光。

物体表现的色彩由光源色、环境色、固有色三种颜色混合而成，任何物体的颜色是相对的。

在进行拟物化设计时，光源色、环境色和固有色是不得不仔细考虑的因素。只有掌握好三者的关系，才能设计出相对细腻逼真的画面。

数字色彩

01 色彩体系

色彩体系, 是以人的视觉特性为出发点, 把物体表面色的基本特性按一定的规律排列, 并做定量描述的颜色序列的立体模型。

目前，色彩领域国际通用且提及最多的色彩体系分别是孟塞尔色彩体系、奥斯特瓦德色彩体系、NCS色彩体系、PCCS色彩体系，它们在不同的领域发挥着重要作用。

虽然色空间可以用来表色，但它并不适合用于配色。

02 色彩模型

色彩模型，在计算机技术方面运用最为广泛，是某个三维颜色空间中的一个可见光子集，它包含某个色彩域的所有色彩。

一般而言，任何一个色彩域都只是可见光的子集，任何一个颜色模型都无法包含所有的可见光。

在图像和图形处理软件中，通常使用HSB、RGB、Lab及CMYK几种色彩模型，并且具有多种色彩模式，用来反映不同的色彩范围。

在色彩软件中，当一种模型的参数改变时，其他模型的参数也随之改变。

03 色彩模式

色彩模式，指图像在显示和打印时定义颜色的不同方式。

Sketch使用sRGB色彩配置，Photoshop中有位图、灰度、双色调、索引、RGB、Lab、CMYK、多通道等8种色彩模式。模式之间具有某种特定的联系，有时需要从一个模式转换到另一个模式。在表达色彩范围上，处于第一位的是Lab模式，第二位是RGB模式，第三位是CMYK模式。

在做数字设计(非平面印刷)时，设计师需要关注的是RGB颜色而非色彩空间。因为在HTML代码中设置颜色的时候，只能用到RGB色，即浏览器将接管色彩空间的管理。

Safari浏览器遵循W3C的标准，使用sRGB色彩空间。Chrome浏览器使用的是显示器指定的色彩空间，因此需要对显示器进行色彩校准，否则同样的RGB颜色值，在不同的浏览器中看起来可能会完全不一样。

但不必太纠结不同数字设备上显示的图形颜色的细微差异，进行数字设计时，优先选用RGB模式就好。

色彩三属性

在UI设计中，会运用 Tints and Shades 系统来表现不同交互的状态。

色相环

将色相按照一定顺序排列组合而成的环，它是色彩学的一个工具，帮助人们理解色彩之间的关系。

三原色(Primary Colors)：最基本的颜色，是其他颜色调配不出来的颜色。在绘画和印刷领域，人们对三原色有着不同的定义。颜料的三原色为红、黄、蓝，印刷的三原色为洋红、黄、青。光的三原色为红、绿、蓝。

二次色(Secondary Colors)：也叫间色，三原色互相混合调和出来的颜色。

三次色(Tertiary Colors)：也叫复色，原色和二次色互相混合调和出来的颜色。

十二色色相环(12-Color Wheel)：三原色+二次色+三次色。可以依次延伸出二十四色、四十八色色相环。

类似色(Analogous Colors)：色相环中90°角以内的颜色互为类似色。

互补色(Complementary Colors)：也叫补色，色相环中180°相对的两个颜色。

分裂互补色(Split-Complementary Colors)：色相环中一种颜色与其互补色两侧相邻的颜色组成的三个颜色。

三色系(Triadic Colors)：色相环中构成正三角形的三个颜色。

四色系(Double Complementary Colors)：色相环中两对互补色组成的四个颜色。

冷暖色(Warn and Cool Colors)：给人以温暖印象的颜色为暖色，给人以凉爽印象的颜色为冷色。色彩的冷暖除了给人温度上的不同感觉外，还会给人带来距离感。

色彩的力量

01 色彩的生理现象

色彩视觉是建立在人的视觉器官的生理基础上的，所以研究色彩必须了解视觉器官的生理特征及其功能。

明视觉：在照明很亮或明适应的状态下的视觉。白天明亮的地方一般都是明视觉的状态。在这个状态下，视网膜的锥状细胞产生反应，红色等颜色看起来会很鲜艳。

暗视觉：照明较低，暗适应发挥作用的状态下的视觉。暗适应的状态下，锥状细胞不工作，而分布在视网膜周边部位的杆状细胞在发挥作用。

与明视觉相比，暗视觉对白色光的敏感度更高。

在暗视觉的状态下，电磁波波长在510nm周围的蓝色看起来非常鲜明。所以在傍晚黄昏的状态下，蓝色比红色看起来更明亮。

明适应：从暗的环境到明亮的环境，逐渐恢复正常视觉的过程。

暗适应：从明亮的环境进入暗的环境，5～8分钟后才慢慢看见暗室内的物体的过程。

色适应：在色彩不同的环境中变换，并逐渐习惯两种色彩环境的不同，这个对色彩的适应的过程叫做色适应。

色错觉：相同的颜色，放在不同的背景色中，看起来像是不同的颜色。

02 色彩的物理属性

色彩不仅传达信息，吸引用户注意力、产生情绪、制造氛围、表达感情，还影响人们对物体物理属性(温度、体积、远近、轻重)的认知和判断。

前进性：明亮的颜色看起来比实际空间距离更近，一般波长较长且明度较高的暖色具有前进性。

后退性：波长较短且明度较低的暖色具有后退性。

前进性和后退性还受饱和度的影响，一般来说，饱和度高的颜色比饱和度低的颜色距离上显得更接近。

膨胀性：看起来比实际面积更大，收缩性反之。

色彩的膨胀和收缩与色彩的色相和明度两个因素有关，一般同样面积的暖色看起来比冷色面积更大。如果要取得同等大小的视觉效果，需要缩小高明度色彩的面积。

轻重感：视觉上对物体重量的判断，一般来说，色彩的重量感主要取决于色彩的明度，明度高的色彩显得比实际物体的重量轻。另外，色彩的饱和度对轻重也会有些许影响。

动静：与动、静相关的是明暗、冷暖。明亮的颜色使人感受到跃动、活泼。

冷暖：通过改变明度，可以表现温暖或清凉的印象。一般来说，家庭使用暖色系，办公场所使用冷色系。

硬软：与明度的关系密切，暗沉的颜色让人觉得较硬，明亮的颜色较软。

03 色彩的心理

暗淡的色调可以给人冷静、安全和信任感，明亮的颜色可以让人感觉青春与活力。色彩在客观上是对人们的一种刺激和象征，在主观上又是一种反应与行为。

色彩心理从视觉开始，到知觉、感情、记忆、思想、意志、象征等，其反应与变化是极为复杂的。色彩的应用，应重视这种因果关系，即由对色彩的经验积累变成对色彩的心理规范，当受到什么刺激后能产生什么反应，都是色彩心理所要探讨的内容。

因此许多行业会考虑色彩对心理的作用，一定程度上形成了行业色彩倾向趋势。

对设计师而言，“行业倾向色”是一个有用的参考。但当一个颜色被经常使用，甚至过度使用后，其色彩的作用就会被削弱，使人感觉效果平平。

通常设计师会在甲方爸爸同意的前提下，尝试做一些大胆的出乎意料的尝试，试图颠覆“行业倾向色”，因为与众不同的颜色会令人眼前一亮。

颠覆要意味着比现在的更好。这要求设计师设计时留意色彩的含义，一定程度地了解色彩对心理的影响，要有人们在接受新事物上不够大胆的预期，在审视目标群体对行业颜色的心理预期后(颜色趋势并非是一成不变，人们对颜色意义的理解和认知随着时间的推移而发生改变)，有策略性地选择和运用色彩，确保每一个颜色的使用是有意义的，保证传达的情绪和信息是正确的。

而设计师只有通过反复试验衡量多种颜色传达信息的效果，才能塑造一个独特的、真实、友好的品牌形象。

并非所有的甲方爸爸都勇于尝试，同样，并非所有的设计师都有足够的能力颠覆行业倾向。当必须使用“行业倾向色”时，如何输出令人眼前一亮的方案呢？

可以把注意力集中在形式的表现上，突破现有框架。也可以在行业倾向色的基础上，加入一两个对比色，不断地试验找出既有特色，又能和倾向色搭配的颜色，这是一个不断试错的过程，需要设计师有一个强大的内心。

为尽量少走弯路，设计师需要对基础颜色有充分认知和实践：