2.1　色调对UI配色的影响

在大自然中，经常见到不同颜色的物体被笼罩在一片金色的夕阳余晖之中，或者被洁白的雪花所覆盖。这种在不同颜色的物体上笼罩着某一种色彩，使不同颜色的物体都带有同一色彩倾向的现象就是色调。色调对UI的整体配色具有很大的影响，通常可以从色相、色调、明暗、冷暖、纯度等方面来定义设计作品的色调。

2.1.1　认识色调

色调是指界面设计中色彩的总体倾向，即各种色彩的搭配所形成的一种协调关系。图2-1所示为色调关系示意图。

在纯色中加入白色所形成的色调效果被称为“亮纯色调”，而在纯色中加入黑色所形成的色调被称为“暗纯色调”。此外，在纯色中加入灰色所形成的色调被称为“中间色调”，如图2-2所示。

◆　案例分析

白色是所有色彩中明度最高的色彩，而黄色是有彩色中明度最高的色彩。图2-3所示是一个电子产品App界面设计，使用高纯度鲜艳的黄色作为界面主题色，搭配白色的文字和矩形色块，与黑色的产品图形形成对比，整体明亮的色调给人一种欢乐、时尚且富有现代感的印象。

图2-4所示是一个鲜花绿植App界面设计，使用深墨绿色作为界面的背景颜色，表现出一种沉着、宁静、优雅的印象，与界面中白色的文字和界面底部白色的按钮形成强烈对比，有效突出了重点功能信息的表现。

2.1.2　基于色调的配色

基于色调的UI设计配色可以给人一种统一、协调的感觉，避免色彩的过多应用而使界面显得繁杂、喧闹，这种配色方法可以通过控制一种颜色的明暗程度，制造出具有鲜明对比感的效果，或者制造出冷静、理性、温和的效果。

同一色调配色是指选择不同色相、同一色调颜色的配色方法，例如，使用鲜艳的红色和鲜艳的黄色进行搭配。

类似色调配色是指使用如清澈、灰亮等类似基准色调的配色方法，这些色调在色调表中比较靠近基准色调。

相反色调配色是指使用如深暗、黑暗等与基准色调相反色调的配色方法，这些色调在色调表中远离基准色调。

◆　案例分析

图2-5所示是一个鲜花App界面设计，使用同一色调进行配色，分别使用高明度的浅蓝色和浅粉色作为不同界面的背景颜色，与白色进行搭配，使整个界面表现出柔和、淡雅的印象。这种高明度的浅淡色调使界面整体表现轻柔而美好。

图2-6所示是一个耳机产品网站UI设计，使用了多种高饱和度鲜艳色彩进行搭配，而这些高饱和度的鲜艳色彩都保持了统一的明亮色调，使整个网站UI表现出年轻且富有激情与活力的印象。

图2-7所示是一个录音App界面设计，使用类似色调进行配色，界面背景为低明度的暗灰色调，界面中各功能选项图标虽然都使用了不同的颜色，但是这些颜色都属于低明度的暗浊色调，与背景的对比并不是特别强烈。

图2-8所示是一个金融App界面设计，使用相反色调进行配色，界面背景为低明度的深蓝色，而界面绑定的银行卡则分别使用鲜艳的橙色和蓝色进行搭配，与暗色调的背景形成强烈的对比，视觉表现效果强烈，有效突出了界面中重点信息内容的表现。