2.1　初识色彩

在UI设计中，很多人热衷于追求新的技术、眩目的特效，而忽视了UI设计最本质的色彩构成。本节将向大家介绍有关色彩属性以及色彩搭配的基本原理等相关知识，帮助大家进一步认识色彩，从而提高在UI设计中的色彩表现力。

2.1.1　色彩属性

自然界中的色彩都是通过光谱七色光产生的，因此，可以通过色相来表现红、蓝、绿等色彩；通过明度来表现色彩的明亮度；通过纯度来表现色彩的鲜艳程度。

◎ 色相

色相是色彩的一种属性，指色彩的相貌，准确来说是按照波长来划分色彩的相貌。在可见光谱中，人的视觉能够感受到红、橙、黄、绿、青、蓝、紫等这些不同特征的色彩，色相环中存在数万种色彩。

原色是最原始的色彩，原色按照一定的颜色比例进行配色，就能够产生多种颜色。色彩的混合模式不同，原色也有所区别。屏幕显示使用光学中的红、绿、蓝作为原色；而印刷使用红、黄、蓝作为原色。

对任意一种邻近的原色进行混合，得到一种新的颜色，即为“次生色”。而三次色是由原色和次生色混合而成的颜色，在色环中处于原色和次生色之间，如图2-1所示。

◎ 明度

所谓明度指的是色彩光亮的程度，所有颜色都有不同的光亮。亮色就称其为“明度高”；反之，则称其为“明度低”。在无彩色中，明度最高的是白色，中间的是灰色，最后随着灰度不断降低，得到黑色。

◎ 纯度

纯度是指色彩的饱和度，或称为“色彩的纯净程度”，也可以称为“色彩的鲜艳度”。原色的纯度最高，与其他色彩混合，纯度降低。尤其是与白色、灰色、黑色、补色混合，纯度明显降低，如图2-2所示。越是纯度高的色彩，越容易残留影像，也越容易被记住。

◎ 对比度

对比度是指不同颜色之间的差异程度。两种颜色之间的差异越大，对比度越大。当冷色和暖色放在一起，对比度大，如红色和绿色、黄色和紫色、蓝色和橙色。

◎ 可视性

色彩的可视性是指色彩在多长距离范围内能够看清楚，以及在多长时间内能够被辨识的程度。纯度高的色彩可视性也强，对比度越大，可视性越强。

2.1.2　基础配色

在UI设计中经常能够看到有着华丽、强烈色彩感的设计。大多数设计师都希望能够摆脱各种限制，表现出华丽的色彩搭配效果。但是，想要把几种色彩搭配得非常华丽绝对没有想象中那么简单。想要在数万种色彩中挑选合适的色彩，这就需要设计师具备出色的色彩感。

配色就是搭配几种色彩，配色方法不同，色彩感觉也不同。色彩搭配可以分为单色、类似色、补色、邻近补色、无彩色等。下面向读者介绍一些基本的配色方法。

◎ 单色

单色配色是指选取单一的色彩，通过在单一色彩中加入白色或黑色，从而改变该色彩明度进行配色的方法。如图2-3所示为使用单色配色的效果。

◎ 类似色

类似色又称为“邻近色”，是指色相环中邻近的色彩，色相差别较小。在12色相环中，凡夹角在60°范围之内的颜色为类似色关系。类似色配色是比较容易的一种色彩搭配方法，如图2-4所示为使用类似色配色的效果。

◎ 补色

补色与相似色正好相反，色相环中相对的色彩，另一面所对立的色彩就是补色。补色配色可以表现出强烈、醒目、鲜明的效果。例如，黄色是蓝紫色的补色，它可以使蓝紫色更蓝，而蓝紫色也增加了黄色的红色氛围。如图2-5所示为使用补色配色的效果。

◎ 邻近补色

邻近补色可有两种或三种颜色构成，选择一种颜色，在色相环的另一边找到它的补色，然后使用与该补色相邻的一种或两种颜色，便构成了邻近补色。如图2-6所示为使用邻近补色配色的效果。

◎ 无彩色

无彩色系是指黑色和白色，以及由黑白两色混合而成的各种深浅不同的灰色系列，其中黑色和白色是单纯的色彩，而由黑色、白色混合形成的灰色，却有着各种深浅的不同。无彩色系的颜色只有一种基本属性，那就是“明度”。如图2-7所示为使用无彩色进行配色的效果。