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

产品UI给用户留下的第一印象，既不是界面中丰富的内容，也不是合理的版式布局，而是界面的色彩。色彩的视觉效果非常明显，一个UI设计成功与否，在某种程度上取决于设计师对色彩的运用和搭配，配色决定了UI带给用户的第一印象。

色彩基础理论简述

色彩三要素：色相、明度、饱和度

色相：是指色彩的相貌，是一种颜色区别于另外一种颜色的最大特征。它用于描述色彩的种类，例如红色、黄色、蓝色等。在传统的色轮中，色相被分为12个主要色彩，即红、橙、黄、黄绿、绿、青绿、青、蓝绿、蓝、蓝紫、紫和红紫。这些色相按照顺时针方向排列在色轮上。

通过在红、橙、黄、绿、蓝、紫这几种基本色相间取中间色，就可以得到12色相环，再进一步便可得到24色相环。

明度：明度是眼睛对光源和物体表面的明暗程度的感觉，主要是由光线强弱决定的一种视觉经验。 在无彩色中，明度最高的色彩是白色，明度最低的色彩是黑色。在有彩色中，任何一种色相中都包含明度特征。不同的色相其明度也不同，黄色为明度最高的有彩色，紫色为明度最低的有彩色。任何一种颜色加入白色，都会提高明度，白色成分越多，明度越高；任何一种颜色加入黑色，都会降低明度，黑色成分越多，明度越低。

饱和度：饱和度用于描述色彩的纯度或强度。它指的是色彩中所包含的灰度量，或者说是色彩与灰色的相对比例。 当色彩的饱和度较高时，色彩更加鲜艳、明亮，色彩中包含较少的灰度。相反，当色彩的饱和度较低时，色彩较为淡薄、灰暗，色彩中包含较多的灰度。

UI配色基本步骤

1. 明确产品定位于目标

产品存在的意义在于能够满足用户的特定需求。例如，微信解决了用户在相隔万里却又想亲密沟通的交流需求；微博满足了平凡用户与明星在同一个平台也可以享有明星般关注的社交心理需求；美食类App则解决了用户足不出户享有美食的需求。产品的核心价值就是为用户解决特定的需求，也可以理解为产品的核心竞争力就是满足用户的特定需求。因此在开始进行UI设计前，首先要对产品的核心功能定位有一个足够的认识。

如果所开发的产品是以文字信息为主（如新闻、社交类App或者电子书），这样的产品UI比较适合使用浅色调的背景颜色，因为界面内容的可读性占据用户体验的首要位置。 如果所开发的产品需要在视觉上具有很强的吸引力，那么产品UI选用深色调的背景更加合适。深色调背景虽然显得很厚重，但是由于其吸收了界面中其他元素的光，更有利于表现非文字形式的内容。产品的内容不仅与文字相关，还包括图标、图像、符号和数字等，它们都属于内容的范畴。此外，深色背景会给产品营造出一种特有的神秘感和奢华感，能够从更深的层次来反映内容。

2. 确定目标用户群体

通过分析产品的目标受众群体，往往能够让设计师更清楚需要先做什么，后做什么。了解潜在用户，掌握他们想从所设计的网站或者App中获得什么，这样才能为设计出可用、有用且具有吸引力的UI奠定坚实的基础。 中老年人更加喜欢以浅色为主的配色方案，这样的界面对中老年人而言更加直观，也更易于导航。年轻人更加喜欢深色背景的界面设计，因为其表现更加时尚、现代。青少年和儿童喜欢欢快、明亮的界面，一些有趣的细节设置也可以很好地吸引低年龄段用户的关注。以目标受众群体为中心进行设计，可以让设计决策更加明晰。

3. 分析竞争对手

市场环境下，必须要面对许多同类型产品的竞争，需要对市场上同类型的产品进行调研分析，掌握哪些设计方案已经被竞争者所使用，应该放弃已经被竞争对手使用过的设计方案。否则结果可能是，等到产品已经进入测试阶段，即将上线，才发现市场上已经有了一个极其类似的产品。因此，对市场进行调研，在产品研发早期阶段就可以放弃一些过时无用的设计方案，避免无用功。

4. 产品测试

基于用户群体、可用性、吸引力等不同因素确定配色方案的大概方向后，每个设计方案都应该在不同的分辨率、不同的屏幕及不同条件下进行适当的测试。在将产品投放市场之前，不间断的测试会揭示出配色方案的强弱。

色彩印象

红色的色感温暖，性格刚烈而外向，是一种刺激性很强的颜色。红色容易引起人的注意，也容易使人兴奋、激动、紧张，还容易使人产生视觉疲劳。

橙色又称橘黄色或橘色，具有明亮、华丽、健康、兴奋、温暖、欢乐、动人等色彩情感。橙色通常会给人一种朝气与活泼的感觉，可以使原本抑郁的心情豁然开朗。橙色特别适合表现快餐食品类UI，能够有效增强用户的食欲。

黄色会让人联想到酸酸的柠檬、明亮的向日葵、香甜的香蕉、淡雅的菊花等，同时在心理上产生快乐、明朗、积极、年轻、活力、轻松、辉煌、警示的感受。明亮的黄色可以给人以甜蜜幸福的感觉，在很多艺术家的作品中，黄色都用来表现喜庆的气氛和富饶的景象。同时，黄色还可以起到强调突出的作用。黄色非常适合作为美食产品的配色，能够给人带来香甜、美好的印象。

绿色是人们在自然界中看到最多的色彩，容易让人联想到碧绿的树叶、新鲜的蔬菜、微酸的苹果、鲜嫩的小草、高贵的绿宝石等。同时在心理上产生健康、新鲜、生长、舒适、天然的感觉，象征着青春、和平、安全。人们称绿色为生命之色，并把它作为农业、林业、畜牧业的象征色。由于绿色的生物和其他生物一样，具有诞生、发育、成长、成熟、衰老、死亡的过程，这就使绿色呈现出各个不同阶段的变化，因此黄绿、嫩绿、淡绿象征着春天和稚嫩、生长、青春与旺盛的生命力；艳绿、盛绿、浓绿象征着夏天和茂盛、健壮与成熟；灰绿、褐绿便意味着秋冬和农作物的衰老与死亡。

蓝色会使人很自然地联想到大海和天空，使人产生一种爽朗、开阔、清凉的感觉。作为冷色的代表颜色，蓝色给人以很强的安稳感，同时蓝色还能够表现出和平、淡雅、洁净、可靠等多种感觉。目前，很多科技类网站和App应用都使用蓝色与青色的搭配效果。 高饱和度的蓝色会给人一种整洁轻快的印象，低饱和度的蓝色会给人一种都市化的现代印象。低饱和度的蓝色主要用于营造安稳、可靠的氛围，而高饱和度的蓝色可以营造出高贵、严肃的氛围。 蓝色与绿色、白色相搭配象征着蓝天、绿树、白云，现实生活中蓝色也是非常常见的，带给人以纯天然的感受。选择明亮的蓝色作为主色调，配以白色的背景和灰亮的辅助色，可以使界面表现干净、整洁，给人以庄重、充实的印象。蓝色与青色、白色相搭配，可以使界面看起来非常干净、清澈。

紫色是人们在自然界中较少见到的色彩，能够让人联想到优雅的紫罗兰、芬芳的薰衣草等，因此具有高贵感，可以营造出高尚、雅致、神秘与阴沉等氛围。

黑色具有高贵、稳重、科技的意象，科技产品如电视、跑车、摄影机、音响、仪器等的色彩大多采用黑色。黑色还具有庄严的意象，因此也常用在一些特殊场合的空间设计中，生活用品和服饰大多利用黑色塑造高贵的形象。此外，黑色也是一种永远流行的主要颜色，适合与大多数色彩搭配使用。黑色本身是无光无色的，当作为背景色时，能够很好地衬托出其他颜色，尤其与白色相搭配时，对比非常分明，白底黑字或黑底白色的可视度最高。

白色具有高级、科技的意象，通常需要和其他色彩搭配使用。纯白色给人以寒冷、严峻的感觉，并且白色还具有洁白、明快、纯真、清洁与和平的情感体验。白色很少单独使用，通常与其他颜色混合使用，纯粹的白色背景对于UI内容的干扰最小。

灰色具有柔和、高雅的意象，随着配色的不同，既可以很动人，也可以很平静。灰色较为中性，象征知性、老年、虚无等，容易使人联想到工厂、都市、冬天的荒凉等。在商业设计中，许多高科技产品，尤其是和金属材料有关的产品，几乎都采用灰色来传达高级、科技的形象。由于灰色过于朴素和沉闷，在使用灰色时，大多利用不同的层次变化组合或搭配其他色彩，使其不会产生呆板、僵硬的感觉。

色彩角色

使用不同的配色给人带来的视觉感受也会有很大的差异，可见配色对于UI设计的重要性。通常在选择UI所使用的色彩时，会选择与产品类型相符的色彩，而且尽量只使用2～3种色彩进行搭配，调和各种色彩使其达到稳定、舒适的视觉效果。

主题色——传递界面主题

UI设计中的主题色主要是由UI中整体栏目或中心图像所形成的中等面积的色块，不能是占据很大面积（背景色），也不能占用很小的面积，它在界面空间中具有重要的地位，通常形成UI的视觉中心。 主题色的选择通常有两种方式：如果需要产生鲜明、生动的效果，则选择与背景色或者辅助色呈对比的色彩；如果需要整体协调、稳重，则选择与背景色、辅助色相近的相同色或邻近色。

背景色——支配UI整体情感

背景色是指UI设计中大面积的表面颜色，即使是同一个界面，如果背景色不同，带给人的感觉也截然不同。背景色由于占有绝对的面积优势，支配着整个界面的整体情感，是UI配色首先关注的重点部分。 目前UI设计最常使用的背景颜色主要是白色和深色调颜色，也包括其他纯色背景、渐变颜色背景和图片背景等几种类型。背景色也被称为界面的“支配色”，背景色是决定UI整体配色印象的重要颜色。 背景色对UI整体情感印象的影响比较大，因为背景在UI中占据的面积最大。使用柔和的色调作为界面的背景色，可以形成易于协调的背景。如果使用鲜丽的颜色作为界面的背景色，可以使UI产生活跃、热烈的印象。

在App界面的设计中，通常使用白色作为界面的背景颜色，因为纯白色背景能够凸显界面中内容的表现，也是对界面可读性影响最小的背景颜色。 深色的界面背景颜色能够给人带来时尚与现代感。 使用图片作为界面的背景，主要是为了突出表现该界面的视觉风格，与渐变颜色背景相似，通常只有信息量较少的界面才会使用图片作为界面背景来渲染界面的视觉效果。

辅助色——营造独特的UI风格

通常情况下，一个界面内都不止一种颜色，除了具有视觉中心作用的主题色，还有一类陪衬主题色或与主题色互相呼应的辅助色。 辅助色的视觉重要性和体积次于主题色和背景色，通常用于陪衬主题色，使主题色更加突出。在界面中通常为较小的元素搭配辅助色，如按钮、图标等。辅助色可以是一个颜色或者一个单色系，还可以是由若干颜色组成的颜色组合。

点缀色——强调重点信息与功能

点缀色是指界面中面积较小的颜色，易于变化的物体的颜色，如图片、文字、图标和其他装饰颜色。 通常采用强烈的色彩，常以对比色或高纯度色彩来加以表现。 点缀色通常用来打破单调的界面整体效果，所以如果选择与背景色过于接近的点缀色，就不会产生理想效果。为了营造出生动的界面空间氛围，点缀色应选择比较鲜艳的颜色。在少数情况下，为了营造特殊的低调柔和的整体氛围，可以选用与背景色接近的色彩。

UI配色的基础原则

色调的一致性

使用绿色表示运行正常，那么该产品的界面配色中就要始终使用绿色表示运行正常，如果界面配色发生了改变，用户就会认为信息的意义也发生了改变。

选择符合人们使用习惯的色彩

对于一些具有很强针对性的产品，在对产品UI进行配色设计时，需要充分考虑用户对颜色的喜爱。例如，明亮的红色、绿色和黄色适合用于为儿童设计的应用程序。一般来说，红色表示错误，黄色表示警告，绿色表示运行正常等。

使用色彩划分界面元素和内容

如果希望某一部分内容能够从界面中凸显出来，最简单的方法就是为该部分内容添加与背景形成对比的色块背景。

提升界面内容的可读性

要确保产品界面的可读性，就需要注意界面设计中色彩的搭配，一个有效的方法就是遵循色彩对比法则，如在浅色背景上使用深色文字，在深色背景上使用浅色文字等。通常情况下，在界面中动态对象使用比较鲜明的色彩，而静态对象则使用比较暗淡的色彩，能够做到重点突出，层次突出。

控制色彩的使用数量

在产品UI设计中不宜使用过多的色彩，建议在单个产品UI设计中最多使用不超过4种色彩进行搭配。过多的色彩会使界面的表现比较混乱，所以大多数界面都只使用2～3种色彩进行搭配。