1.4 UI设计的色彩基础

色彩是UI设计中不可或缺的元素，具有信息传达、情感传递、氛围烘托、增强视觉表现力等重要作用。本节对色彩的相关知识进行说明。

1.4.1 色彩的基础知识

色彩是极具表现力的视觉元素，了解色彩特性、色相环等基础知识，可以帮助设计师加强对色彩的理解与应用，可以更好地开展设计工作。

1.色彩特性

色相、明度和纯度是有彩色系色彩的三大要素。

（1）色相

即色彩的相貌称谓，是色彩的首要特征，主要用于区别不同的色彩，如红、黄、蓝等，如图1-17所示。

（2）明度

指颜色的明暗程度，一般包括两方面：一是指同一色相的明暗变化，如图1-18所示；二是指不同色相间的明暗变化，如六标准色中黄最浅，紫最深，橙和绿、红和蓝处于相近的明度。要提高色彩的明度，可加入白色，反之则加入黑色。

（3）纯度

指色彩的鲜艳度，纯度越高，色彩越鲜艳，反之则越浑浊，如图1-19所示。纯度取决于各色彩中包含的单种标准色成分的多少，不同色相所能达到的纯度是不同的，有彩色系中红色纯度最高，绿色纯度相对低一些，其余色相居中。

2.色相环

色相环是指以指定顺序呈圆形排列的色相光谱，美术系统中的色相环以红、黄、蓝为基础，在这三种颜色的基础上，混合产生间色、复色，呈等边三角形的状态分布。色相环根据色相数量，可以分为六色色相环、十二色色相环、二十四色色相环、七十二色色相环等，图1-20所示为十二色色相环的效果。

3.色彩心理

色彩是视觉传达中极为重要的元素，在信息传播过程中对人有着极为复杂的作用，影响着人的心理及情感，不同色彩可以带给用户不同的感受，如图1-21、图1-22所示。

下面对一些基本颜色进行介绍。

· 黑色： 象征神秘、奢华、时尚、威信，可以营造沉稳、有力的高级感，多用于时尚类、视频处理类产品的界面。

· 白色： 象征新鲜、纯净、现代、圣洁，适配多种颜色，大部分产品的界面都以白色为背景。

· 红色： 象征力量、激情、爱心，是一种充满活力和热情的颜色，多用于活动宣传等需要烘托热烈氛围的界面。

· 橙色： 象征活力、欢快、温暖、成熟，是一种富足、快乐而幸福的颜色，多用于美食类、社会服务类产品的界面。

· 黄色： 象征温暖、辉煌、灿烂、希望，是一种可见性极佳、易引人注目的颜色，多用于旅游类等产品的界面。

· 绿色： 象征希望、生机、宁静、环保、安全，绿色属于居中的颜色，可以带给用户安全、平静、舒适之感，多用于聊天类、环保类产品的界面。

· 蓝色： 象征平静、沉着、理智，蓝色属于冷色调，可以使用户联想到天空、大海等元素，具有自由平静的气质，多用于科技类、资讯类产品的界面。

· 紫色： 象征神秘、高贵、优雅、梦幻，带给用户一种优雅神秘的感受。

1.4.2 色彩搭配

根据色彩知识合理地搭配色彩，可以为设计增光添彩，使其呈现更精良的设计效果。

1.主色、辅助色、背景色和强调色

主色、辅助色、背景色和强调色是UI色彩设计中非常重要的4个概念。

· 主色： 即最主要的颜色，是设计中使用最多的色彩，一般占总色调的60%，决定界面的主题。

· 辅助色： 即辅助主色进行搭配的颜色，目的是辅助和衬托主色。一般情况下是主色的对比色或补色，占总色调的30%。

· 背景色： 一般是黑、白、灰或者饱和度较低的色彩。

· 强调色： UI设计中的视觉焦点，与其他色彩形成强烈对比，以突出重点，约占总色调的10%。

2.配色方案

不同的色彩组合可以呈现不同的视觉效果，在一个设计作品中色彩一般不超过3种。下面对部分配色方案进行介绍。

（1）单色配色

单色配色并不是只使用一种颜色，而是使用同一色调的颜色进行搭配。该类型的配色方案可以呈现一种和谐、简洁、有序的感觉，如图1-23所示。

（2）相似色配色

相似色配色比单色配色更具吸引力，各颜色之间不会相互冲突，色相对比不强，可以给人一种舒适、优雅的感觉，如图1-24所示。

（3）互补色配色

互补色具有强烈的对比效果，通过该类型配色方案制作的界面会呈现出一种对比反差明显的效果，如图1-25所示。

（4）三元配色

三元配色又称三角形配色，是选取色相环中均匀分布的三种色调进行搭配，具有强烈的动感和平衡感效果，以及较强的吸引力，如图1-26所示。

（5）矩形配色

矩形配色效果更加丰富，在选取颜色时要注意明度和饱和度的调整，以使画面合理自然，呈现一种稳定、成熟的质感。