1.5 UI界面设计的色彩搭配
UI界面设计的色彩搭配也是页面设计中的关键，恰当地运用色彩搭配，不但能够美化UI界面，还能够提高用户对页面的兴趣，同时引导用户顺利完成页面操作。
1.5.1 色彩基础
在设计制作UI界面前，先来了解一下色彩的基础知识，方便之后在设计制作过程中进行合理配色。
●三原色
原色，是指不能通过其他颜色的混合调配而得到的“基本色”。将原色进行不同比例混合，可以产生出其他的新颜色。肉眼所见的色彩空间通常由三种基本色所组成，称为“三原色”。一般来说，叠加型的三原色是红色（R）、绿色（G）和蓝色（B），如图1-26所示。
图1-26
用户看到印刷的颜色，实际上都是看到的纸张反射的光线，因此印刷的三原色就是能够吸收R、G、B的颜色，为青色、品红、黄色，它们是R、G、B的补色，如图1-27所示。
图1-27
提示
三原色可以混合出多种多样的颜色，不过不能调配出黑色，只能混合出深灰色。因此在彩色印刷中，除了使用的三原色还要增加一版黑色.这样才能得到深重的颜色。
●色彩视觉
色彩视觉是人对色彩的视觉反应，既受到生理、大脑视觉神经的限制，又受色彩的属性、特点、情感，以及不同的色与色、色与光对视觉的影响。
光与色
光是以波动的形式进行直线传播的，具有波长和振幅两个因素。不同的波长长短产生色相的差别，不同的振幅强弱产生同一色相的明暗差别。光在传播时有直射、反射、透射、漫射和折射等多种形式。
光直射时直接传入人眼，视觉感受到的是光源色。当光源照射物体时，光从物体表面反射出来，人眼感受到的是物体表面色。
当光照射过程中遇到玻璃之类的透明物体时，人眼看到的是透过物体的穿透色。光在传播过程中，受到物体的干涉时则产生漫射，对物体的表面色有一定影响。例如：通过不同物体时光产生方向变化，称为“折射”，反映至人眼的色光与物体色相同，如图1-28所示。
图1-28
物体色
自然界中的物体五花八门、变化万千，它们本身虽然大都不会发光，但都会选择性地吸收、反射、透射光。当然，任何物体对色光不可能全部吸收或反射，因此，不存在绝对的黑色或白色。
所谓的物体“固有色”，实际上不过是常光下人们对其的习惯而已。例如：在闪烁、强烈的各色霓虹灯光下，所有建筑及人物的肤色几乎都失去了原有本色而显得变幻莫测。另外，光照的强度及角度对物体色也有影响，如图1-29所示。
图1-29
提示
物体对色光的吸收与反射能力虽是固定不变的，但物体的表面色却会随着光源色的不同而改变，有时甚至失去其原有的色相感觉。
计算机色彩显示
显示器产生色彩的方式类似于大自然中的发光体。在显示器内部有一个与电视机一样的显像管，当显像管内的电子枪发射出的电子流打在荧光屏内侧的磷光片上时，磷光片就产生“发光效应”。
三种不同性质的磷光片分别发出红、绿、蓝三种光波，计算机程序量化地控制电子束强度，由此精确控制各个磷光片的光波的波长，再经过合成叠加，就模拟出自然界中的各种色光，如图1-30所示。
图1-30
●色彩三要素
色彩三要素是指色相、饱和度和明度。其中色相与光波的波长有直接关系，亮度、饱和度与光波的幅度有关。明度高的颜色有“向前”的感觉，明度低的颜色有“后退”的感觉。
色相
色彩是由于物体上的物理性的光反射到人眼视神经上所产生的感觉。色的不同是由光的波长长短差别所决定的。色相，指的是这些不同波长的色的情况。波长最长的是红色，最短的是紫色。
把红、橙、黄、绿、蓝、紫、红橙、黄橙、黄绿、蓝绿、蓝紫和红紫这十二种颜色作为色相环。在色相环上排列的色是纯度高的色，被称为“纯色”。这些色在环上的位置是根据视觉和感觉的相等间隔来进行安排的。用类似的方法还可以再分出差别细微的多种颜色。在色相环上，与环中心对称，并在180°的位置两端的色被称为“互补色”，如图1-31所示。
图1-31
提示
色相环是以黄、红和蓝三色为基础，由此三原色配置组合而成。一般色相环有十二色相环、二十四色相环、四十八色相环和九十六色相环等。
饱和度
饱和度是指色彩的鲜艳程度，也称“色彩的纯度”。饱和度取决于该色彩中含颜色成分和消色成分的比例。含颜色成分越大，饱和度越大；消色成分越大，饱和度越小。
饱和度可定义为“彩度除以明度”，与彩度同样表示彩色偏离同亮度灰色的程度，其实与彩度是不同的概念。但由于其代表的意义与彩度相同，所以才会出现混淆的情况，如图1-32所示。
图1-32
明度
表示色彩所具有的亮度和暗度被称为“明度”。计算明度的基准是灰度测试卡，如图1-33所示。黑色为0，白色为10，在0～10之间等间隔地排列为9个阶段。色彩分为有彩色和无彩色，但后者仍然存在着明度。
作为有彩色，每种色各自的亮度、暗度在灰度测试卡上都具有相应的位置值。彩度高的色彩对明度有很大的影响，不太容易辨别。在明亮的地方鉴别色的明度比较容易，在暗的地方就难以鉴别，如图1-34所示。
图1-33
图1-34
●色系
配色的一般规律是，任何颜色都可以以主色的身份存在，并与其他色相搭配，组合成对比色、互补色、邻近色或其他同类色关系的色彩组合。
原色
原色是最基本的色彩，主要包括光的三原色——红、绿、蓝，以及色的三原色——青、洋红、黄。这几种颜色以不同的比例混合可以生成其他颜色，但本身无法由其他颜色合成。
次生色
将任意两种相邻的原色进行混合得到的颜色就叫作“次生色”。由此可知，光学混合模式中的次生色就是色彩混合中的原色，因此加法混合与减法混合之间存在相互关系。
三次色
三次色是指由原色和次生色混合生成的颜色，在色环中处于原色与次生色之间。由于红、绿、蓝和青、洋红、黄互为次生色，因此在十二色环中，除原色之外的其余颜色都是三次色。
邻近色
邻近色中往往都包含一中共有的颜色，例如：红色、玫红色和洋红色，它们都含有大量的红色。在色相环上任选一色，与此色相距90°，或者彼此相隔五六个数位的两色，即为“邻近色”。邻近色一般有两个范围，绿、蓝、紫的邻近色大部分在冷色范围内，红、橙、黄的邻近色大部分在暖色范围内。
互补色
互补色与邻近色正相反，两种颜色相互混合产生白色或灰色，则称其中一种颜色为另一种颜色的“互补色”。互补色在色环上总是处在一条直线的两端。如果将互补色并列在一起，这两种颜色对比最强烈、醒目、鲜明。
对比色
在色相环中相距120°或者120°以上的颜色被称为“对比色”。顾名思义，互为对比色的颜色从视觉上给人一种对立的感觉。事实上，对比色的视觉对立感仅次于互补色。
1.5.2 色彩搭配原则
在电子地图上可以使用不同的颜色区分不同的省、不同的国家；也可以使用同一种颜色的不同明度来区分海洋的深度或地形的高度；在游戏中还可以使用颜色来表示游戏的进程等。
如果在UI界面中错误地使用颜色，有可能会误导用户放弃操作。例如：有的打印程序使用红色表示激光打印机预热就绪，可以打印，但有的用户却误解为机器出现故障而放弃操作。因此，UI界面的色彩搭配直接关系到用户对界面操作的认知。
●色调的一致性
色调的一致性是指在整个UI界面系统中要采用统一的色调，要有主色调。例如：使用绿色表示运行正常，那么UI界面的色彩编码就要始终使用绿色表示运行正常，如果色彩编码改变了，用户就会认为信息的意义变了。
在开始进行UI界面设计之前，设计师应该统一软件界面中的色彩应用方式，并且在软件系统的整体界面设计过程中遵循这种方式。如图1-35所示，每个UI界面的配色都是统一的，整体使用了蓝色、黄色和红色三种色调。
图1-35
●保守地使用色彩
所谓保守地使用色彩，主要是从大多数用户的接受程度出发，根据UI界面所针对的不同用户，在UI界面的设计过程中使用不同的色彩搭配。
有些软件界面使用较大的字体，并且每个文字还使用了不同的颜色显示，远距离看来屏幕耀眼夺目，可是这样的软件界面并不利于用户使用和操作。如图1-36所示为使用柔和的中性色彩搭配的软件界面。
图1-36
提示
在UI 界面设计中提倡使用一些柔和的、中性的颜色，以便大多数用户能够接受。
●色彩的选择尽可能符合人们的视觉习惯
对于一些针对性很强的UI界面，在进行配色设计时，需要充分地考虑用户对颜色的喜好。例如：明亮的红色、绿色和黄色适用于为儿童设计的UI界面。一般来说，红色表示错误，黄色表示警告，绿色表示运行正常等。如图1-37所示为使用鲜艳色彩设计的儿童UI界面。
图1-37
●使用色彩作为功能分界的识别元素
不同的色彩可以加快用户对各种数据的识别，明亮的色彩可以有效地突出或者吸引用户对重要区域的注意力。
在UI界面设计中，应该充分利用色彩的这一特征，通过在UI界面中使用色彩的对比突出显示重要的信息区域或功能。如图1-38所示为使用色彩区分软件界面中不同的功能区域。
图1-38
●能够让用户调整界面的配色方案
许多软件图形界面都可以让用户自行选择配色方案，这样可以满足用户个性化的需求和个人对色彩的喜好习惯，如Windows操作系统界面、浏览器界面、QQ聊天界面等。
设计师在设计UI界面的过程中，可以考虑为软件界面设计多种配色方案，以便用户在使用过程中自由选择，这样能够更好地满足不同用户的需求。UI界面的不同配色方案效果如图1-39所示。
图1-39
●色彩搭配要便于阅读
要确保软件界面的可读性，就需要注意软件界面设计中色彩的搭配，最好就是遵循色彩对比的法则。
在浅色背景上使用深色文字，在深色背景上使用浅色文字等。通常情况下，在软件界面设计中动态对象应该使用比较鲜艳的色彩，而静态对象则应该使用较暗淡的色彩，这样能够重点突出、层次清晰，如图1-40所示。
图1-40
●控制色彩的使用数量
在软件界面设计中不宜使用过多的色彩，建议在单个软件界面中最多使用不超过四种色彩，而在整个软件系统中色彩的使用数量也应该控制在七种左右，如图1-41所示。
图1-41
1.5.3 色彩搭配方案
在UI界面设计中经常能够看到华丽、有着强烈色彩感的设计。大多数设计师都希望能够摆脱各种限制，展示出好的色彩搭配效果。但是，想要把色彩搭配得非常合适并没有那么简单。
配色就是挑选几种色彩进行合理搭配，配色方法不同，搭配出来的色彩感觉也会不同。色彩搭配可以分为单色、类似色、补色、邻近补色和无彩色等配色方案。下面向大家介绍一些配色的基本方法。
●单色配色
单色配色是指选取单一的色彩，通过在单一色彩中加入白色或黑色，从而改变该色彩明度进行配色的方法，如图1-42所示。
图1-42
●类似色配色
类似色又称为“临近色”，是指色相环中邻近的色彩，色相差别较小，在十二色相环中，凡夹角在60°之内的颜色为类似色，类似色配色是比较容易掌握的一种色彩搭配方法，如图1-43所示。
图1-43
●补色配色
补色与相似色正好相反，色相环中相对的色彩就是“补色”。补色配色可以表现出强烈、醒目、鲜明的效果。例如：黄色是蓝紫色的补色，它可以使蓝紫色更蓝，而蓝紫色也能增加黄色的红色氛围，如图1-44所示。
图1-44
●邻近色配色
邻近补色可有两种或三种颜色构成，选择一种颜色，在色相环的另一边找到它的补色，然后使用与该补色相邻的一种或两种颜色，便构成了邻近补色，如图1-45所示。
图1-45
●无彩色配色
无彩色系是指黑色和白色，以及由黑白两色混合而成的各种深浅不同的灰色系列。其中，黑色和白色是单纯的色彩，而由黑色、白色混合形成的灰色，却深浅不同。无彩色系的颜色只有一种基本属性，那就是“明度”。
无彩色系虽然没有彩色那样鲜艳夺目，却有着彩色无法替代和比拟的重要作用。在生活中，肉眼看到的颜色或多或少地包含了黑、白、灰的成分，也因此，色彩的设计变得丰富多彩，如图1-46所示。
图1-46