2.1 色彩基础

色彩作为最普遍的审美形式之一，存在于人们日常生活的各个方面。人们的衣、食、住、行、用都与色彩有着密切的关系。色彩是人们感知事物的一个重要因素，色彩的运用在电商UI设计中起着重要作用。

2.1.1 色彩的产生

在我们的日常生活中充满着各种各样的色彩，有鲜艳的，也有暗淡的。这些颜色都来源于光，没有光就没有色彩，这是人类依据视觉经验得出的一个基本理论，光是人类感知色彩存在的必要条件。

色彩的产生，是物体有选择地吸收、反射或折射色光形成的。在光线照射到物体表面后，一部分光线被物体表面吸收，另一部分光线被反射出去，还有一部分光线穿过物体被透射出来。物体反射什么颜色的光，就会表现什么颜色。色彩就是在可见光的作用下产生的视觉现象。

色彩产生的过程如下所示。

提示

色彩作为视觉信息，无时无刻不在影响着人们的生活。美妙的自然色彩，刺激着人们的视觉神经，感染着人们的心理情感，提供给人们丰富的视觉空间。

2.1.2 色彩三要素

世界上的色彩千差万别，每一种色彩都具有3个基本属性：色相、明度和饱和度。它们在色彩学上称为色彩的三要素或色彩三属性。

1.色相

色相是指色彩的相貌，是一种颜色区别于另一种颜色的最大特征。色相体现了色彩外向的性格，是色彩的灵魂。

色相是由射入人眼的光线的光谱成分决定的。在可见光谱中，每一种色相都有自己的波长与频率，它们从短到长按顺序排列，就像音乐中的音阶，有序而和谐。图2-1所示为基础的12色相环。

提示

12种色相的色调变化，在光谱色感上是均匀的。如果进一步找出其中间色，则可以得到24种色相。色相环中的各色相按色度排列，12色相环中相邻两种色相的间距为30°，24色相环中相邻两种色相的间距为15°。

2.明度

明度是眼睛对光源和物体表面的明暗程度的感觉，是由光线强弱决定的一种视觉体验。

在无彩色中，明度最高的色彩是白色，明度最低的色彩是黑色。在有彩色中，任意一种色相都包含明度特征。不同色相的明度不同，黄色为明度最高的有彩色，紫色为明度最低的有彩色。在任意一种色彩中加入白色，都会提高其明度，白色成分越多，明度越高；在任意一种色彩中加入黑色，都会降低其明度，黑色成分越多，明度越低。

图2-2所示为色彩的明度示意图，越往上的色彩明度越高，越往下的色彩明度越低。

在电商UI设计过程中，可以通过调整色彩的明度，使商品、重要信息与功能按钮在界面中凸显出来，从而有效增强界面的视觉层次感。图2-3所示为电商UI明度差异的对比，通过增大色彩明度差异，有效突出重点内容，并且增强界面的视觉层次感。

提示

明度是所有色彩都有的属性，是色彩搭配的基础，在UI设计中，色彩的明度最适合用于表现物体的立体感和空间感。

3.饱和度

饱和度是指色彩的强度或纯净程度，又称为彩度、纯度、艳度或色度。调整色彩的饱和度，也就是调整色彩的彩度。饱和度表示色相中灰色分量所占的比例，使用0%（灰色）～100%的百分比来度量，当图像的色彩饱和度降低为0%时，它会变成一个灰色图像，增加它的饱和度可以增加其彩度。图2-4所示为饱和度阶段变化示意图。

同一个色相的色彩，如果没有掺杂白色或黑色，则被称为纯色。在纯色中加入不同明度的无色彩，会呈现不同的饱和度。以红色为例，在纯红色中加入一点白色，饱和度下降，而明度提升，变为淡红色。继续增加白色的量，颜色越来越淡，变为淡粉色；如果加入黑色，则相应的饱和度和明度同时下降；加入灰色，则会失去光泽，如图2-5所示。

图2-6所示为某个电商UI设计，界面中的色彩饱和度较高，色彩对比强烈，界面的整体视觉效果更加突出、清晰，高饱和度的色彩搭配非常耀眼，从而为用户带来欢乐、兴奋的情绪。如果降低该界面的色彩饱和度，如图2-7所示，虽然界面中的内容依然十分清晰，但是界面发灰，色彩对比不够强烈，给人一种灰蒙蒙、不清晰的感觉。

提示

不同色相的饱和度是不同的。例如，饱和度最高的颜色是红色，黄色的饱和度也较高，但绿色的饱和度仅能达到红色饱和度的一半。在人们的视觉能够感受到的色彩范围内，大部分色彩是非高饱和度色彩，也就是说，大部分色彩是含有灰色的色彩，有了饱和度的变化，才使色彩变得丰富。同一种色相，即使饱和度发生了细微的变化，也会立即带来色彩性格的变化。

2.1.3 有彩色与无彩色

色彩可以分为无彩色和有彩色两大类。无彩色包括黑色、白色和灰色，有彩色包括除无彩色外的任何色彩。有彩色具备光谱上的某种或某些色相，统称为彩调。无彩色没有任何彩调。

1.无彩色

无彩色是指黑色、白色，以及由黑色和白色混合而成的各种灰色，其中黑色和白色是纯色。无彩色系的色彩只有一种基本属性，那就是明度。

无彩色虽然不如有彩色光彩夺目，但起着有彩色无法代替和比拟的重要作用。在UI设计中，无彩色可以使画面更加丰富多彩。

如果希望电商UI能够给用户带来一种高档感和品质感，那么可以使用无彩色进行配色，如图2-8所示。无彩色的搭配非常适合用于奢侈品、运动品牌和男性用品的电商UI设计。

无彩色在移动端电商App界面中的应用比较广泛，通过无彩色的搭配能够有效凸显界面中商品图片的表现效果。图2-9所示为使用无彩色搭配的移动电商App的UI设计。

2.有彩色

有彩色是指除无彩色外的色彩，包括基本色、基本色之间的混合色、基本色与无彩色之间的混合色。

有彩色系的色彩性质是由光的波长和振幅决定的，它们分别控制色彩的色相和色调（色调由明度和饱和度决定）。有彩色系的色彩具有色相、明度和饱和度三个属性。

在电商UI设计中，有彩色的搭配非常广泛，不同明度和饱和度的有彩色配色，能够表现出不同的风格和情感。图2-10所示为使用有彩色进行配色的电商UI设计。