1.5　UI设计中的色彩角色

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

1.5.1　主题色——传递界面主题

色彩是UI设计表现的要素之一。UI设计中，按照和谐、均衡和重点突出的原则，将不同的色彩进行组合，构成视觉效果均衡的界面，同时根据色彩对人们心理的影响，合理地加以运用。

主题色是指在UI设计中最主要的颜色，包括大面积的背景色、装饰图形颜色等构成视觉中心的颜色。主题色是UI设计配色的中心色，搭配其他颜色时通常以此为基础。

◆　案例分析

图1-61所示是一个餐饮美食App界面设计，使用白色作为界面背景颜色，突出界面中美食图片和文字内容的表现，在部分界面的顶部和底部搭配高饱和度的绿色。绿色作为界面的主题色，表现出美食产品的新鲜和健康品质。

图1-62所示是一个旅游网站UI设计，使用精美的风景摄影图片作为界面的背景，并且在背景图片上覆盖半透明的深蓝色。深蓝色作为界面的主题色，与背景中的海边摄影图片相结合，给人一种宁静、舒适的印象，局部点缀高饱和度橙色突出重点内容，整个界面的表现非常简洁、清晰。

UI设计中的主题色主要是由UI中整体栏目或中心图像所形成的中等面积的色块，它在界面空间中具有重要的地位，通常形成UI的视觉中心，如图1-63所示。

主题色的选择通常有两种方式：如果需要产生鲜明、生动的效果，则选择与背景色或者辅助色呈对比的色彩；如果需要整体协调、稳重，则选择与背景色、辅助色相近的相同色或邻近色。

◆　案例分析

图1-64所示是一个汽车App界面设计，使用高饱和度的蓝色作为界面的主题色，与白色相搭配，使界面内容表现清爽、简洁。蓝色具有理想、坚定、科技感等印象，能够表现出汽车产品的科技与时尚感。

图1-65所示是一个企业宣传网站UI设计，红色作为该网站UI的主题色，与该企业Logo色彩相呼应，并且高饱和度的红色在白色的界面背景中表现非常突出。将主题色应用于界面中的多个重点区域，包括导航和栏目标题等，能够起到突出和强调的作用，界面整体表现出热情、大方、富有激情的企业精神。

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

背景色是指UI设计中大面积的表面颜色，即使是同一个界面，如果背景色不同，带给人的感觉也截然不同。背景色由于占有绝对的面积优势，支配着整个界面的整体情感，是UI配色首先关注的重点部分。

目前UI设计最常使用的背景颜色主要是白色和深色调颜色，也包括其他纯色背景、渐变颜色背景和图片背景等几种类型。背景色也被称为界面的“支配色”，背景色是决定UI整体配色印象的重要颜色。

背景色对UI整体情感印象的影响比较大，因为背景在UI中占据的面积最大。使用柔和的色调作为界面的背景色，可以形成易于协调的背景。如果使用鲜丽的颜色作为界面的背景色，可以使UI产生活跃、热烈的印象。

◆　案例分析

在App界面的设计中，通常使用白色作为界面的背景颜色，因为纯白色背景能够凸显界面中内容的表现，也是对界面可读性影响最小的背景颜色。图1-66所示是一个音乐App界面设计，使用纯白色作为界面背景颜色，使界面中的信息内容和功能操作图标表现非常清晰，整个界面给人以简洁、干净的印象。

深色的界面背景颜色能够给人带来时尚与现代感。图1-67所示是一个餐饮美食App界面设计，使用明度和饱和度都很低的深灰蓝色作为界面的背景颜色，搭配高明度的黄色主题色，与背景形成强烈对比，使界面中的美食产品图片和功能操作按钮表现非常醒目，界面整体视觉效果具有很强的现代感。

使用图片作为界面的背景，主要是为了突出表现该界面的视觉风格，与渐变颜色背景相似，通常只有信息量较少的界面才会使用图片作为界面背景来渲染界面的视觉效果。图1-68所示是一个房屋中介App界面设计，使用房屋图片过渡到深棕色背景颜色作为界面的背景，深棕色背景颜色部分放置少量的信息文字内容，表现效果简洁、直观。房屋详情界面直接使用房屋的内部图片作为背景，表现效果非常直观。

图1-69所示是一个汽车宣传网站UI设计，使用饱和度较高的黄色作为界面的背景颜色，搭配红色的汽车产品，给人一种年轻、时尚、富有活力的感觉。

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

通常情况下，一个界面内都不止一种颜色，除了具有视觉中心作用的主题色，还有一类陪衬主题色或与主题色互相呼应的辅助色。

辅助色的视觉重要性和体积次于主题色和背景色，通常用于陪衬主题色，使主题色更加突出。在界面中通常为较小的元素搭配辅助色，如按钮、图标等。辅助色可以是一个颜色或者一个单色系，还可以是由若干颜色组成的颜色组合。

◆　案例分析

图1-70所示是一个机票预订App界面设计，蓝色作为该界面的主题色，白色作为该界面的背景色，使整个界面表现出蓝天、白云的自然印象，非常适合作为机票预订App界面的配色。加入深蓝色作为辅助色，使得界面的层次更加丰富，有利于在界面中划分不同的功能区域，使界面结构更加清晰。

图1-71所示是一个儿童服饰网站UI设计，白色作为界面的背景颜色，使界面内容表现更加清晰、直观。黄色作为界面的主题色，突出表现儿童的天真与活泼个性，使用蓝色作为辅助色，与黄色的主题色形成对比，使界面表现充满活力。

辅助色作为主题色的衬托，可以使界面充满活力，给人以鲜活的感觉。辅助色与主题色的色相相反，能够起到突出主题的作用。辅助色如果面积太大或是纯度过强，都会弱化关键的主题色，所以相对的暗淡、适当的面积才会达到理想的效果。

在界面中为主题色搭配辅助色，可以使界面产生动感，活力倍增。辅助色通常与主题色保持一定的色彩差异，既能够凸显出主题色，又能够丰富界面的整体视觉效果。

◆　案例分析

图1-72所示是一个咖啡预订App界面设计，使用白色作为界面的背景颜色，绿色作为界面的主题色，表现出自然、健康的印象。使用与主题色相反色相的红色作为辅助色，与主题色形成对比，使界面的表现更加富有活力。

图1-73所示是一个医疗健康App界面设计，使用白色作为界面的背景颜色，蓝色作为界面的主题颜色，蓝色与白色相搭配给人以清爽、洁净的印象，加入青色的按钮，界面整体色调统一，界面整体表现清爽、和谐、统一。

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

点缀色是指界面中面积较小的颜色，易于变化的物体的颜色，如图片、文字、图标和其他装饰颜色。点缀色通常采用强烈的色彩，常以对比色或高纯度色彩来加以表现。

点缀色通常用来打破单调的界面整体效果，所以如果选择与背景色过于接近的点缀色，就不会产生理想效果。为了营造出生动的界面空间氛围，点缀色应选择比较鲜艳的颜色。在少数情况下，为了营造特殊的低调柔和的整体氛围，可以选用与背景色接近的色彩。

在不同的界面位置上，对于点缀色而言，主题色、背景色和辅助色都可能是界面点缀色的背景。在界面中点缀色的应用不在于面积大小，面积越小，色彩越强，点缀色的效果才会越突出，如图1-74所示。

◆　案例分析

图1-75所示是一个电商App界面设计，使用纯白色作为界面的背景颜色，突出界面中产品图片和文字信息的表现，非常清晰、直观。为产品折扣信息和底部的“购物袋”图标点缀高饱和度的红色，表现效果非常突出，并且红色的加入也使得界面表现更加热情、大方。

图1-76所示是一个运动服饰网站UI设计，使用灰色作为界面的背景颜色，与黑色相搭配，界面表现稳重、大气，在界面局部加入橙色的点缀色，改变界面的沉闷感，使网站UI更加生动，富有活力。