1.7　UI配色的基础原则

在黑白显示器年代，设计师并不用考虑设计作品中的色彩搭配。如今，UI色彩搭配可以说是UI设计的关键，恰当地运用色彩搭配，不但能够美化UI，还能够增加用户的兴趣，引导用户顺利完成操作。

1.7.1　色调的一致性

色调的一致性是指在整个产品的UI设计需要采用统一的色调，即有一个主色调。例如，使用绿色表示运行正常，那么该产品的界面配色中就要始终使用绿色表示运行正常，如果界面配色发生了改变，用户就会认为信息的意义也发生了改变。因此，在开始对产品的UI进行设计之前，设计师应该统一UI中的色彩应用方式，并且在系统的整体UI设计过程中始终遵守。

◆　案例分析

图1-101所示是一个儿童早教App界面设计，使用白色作为界面的背景颜色，界面信息内容的表现非常清晰、直观，搭配高饱和度的黄色主题色，突出界面主题内容的表现，并且能够使界面的表现更加活跃。各种卡通图形的加入使界面更加适合儿童的心理特征，多个界面保持了统一的配色，整体协调统一。

图1-102所示是一个短视频App界面设计，使用接近黑色的深灰色作为背景颜色，搭配暗紫色的主题色，使界面整体表现出时尚、个性的印象。界面中的图片选项也进行了偏紫色的调色处理，与深暗的界面背景相搭配，给人一种炫酷的感觉，界面配色保持了很强的一致性。

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

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

◆　案例分析

在与儿童相关的产品UI设计中，通常会用卡通形象及高饱和度鲜艳的色彩来吸引儿童的关注。图1-103所示是一个儿童相关App界面设计，使用白色作为界面背景颜色，界面中的各功能选项则使用了多种高饱和度色彩进行表现，有效区分了不同的选项，并且使界面的表现更加丰富多彩，给人富有活力、充满童趣的印象，容易吸引儿童的关注。

图1-104所示是一个女士香水网站UI设计，其面向的用户群体主要是年轻女性，所以界面使用了柔和的高明度粉红色作为背景颜色，而主题色是高明度的浅蓝色，用于突出产品的表现，整体的色彩搭配柔和、舒适，同时也符合该香水产品清新、淡雅的定位。

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

不同的色彩可以帮助用户加快对各种数据的识别，明亮的色彩可以有效地突出或者吸引用户对重要区域的注意力。设计师在产品UI设计过程中，应该充分利用色彩的这一特征，通过在UI设计中使用色彩的对比，突出显示重要的信息区域或功能。

◆　案例分析

在UI设计中，如果希望某一部分内容能够从界面中凸显出来，最简单的方法就是为该部分内容添加与背景形成对比的色块背景。图1-105所示是一个共享滑板车App界面设计，使用深灰蓝色作为界面背景颜色，给人一种时尚与现代感，在界面中搭配白色的文字，视觉效果非常突出。当前选择的滑板车则使用了高饱和度蓝色背景进行突出表现，并且界面中重要的功能操作图标和按钮同样使用了高饱和度的蓝色，与背景形成强烈的对比，视觉表现效果突出。

图1-106所示是一个金融App界面设计，使用蓝色作为界面的主题色，不同明度和饱和度的蓝色在界面中划分出不同的信息内容区域，使界面中内容的划分非常清晰，并且不同明度和饱和度的蓝色搭配，保持了色调的统一，具有很强的色彩层次感。

图1-107所示是一个足球游戏介绍网站UI设计，采用了当前比较流行的长页面的布局形式，使用同色系不同明度的蓝色调将整个界面从上至下划分为多个不同的内容区域，在每个内容区域中，又综合运用图文结合和色彩对比的手法，使得界面结构层次非常清晰。整个界面给人一种沉稳、大气的印象，局部点缀红色的按钮，突出重点功能的表现。

1.7.4　为用户提供界面可选配色方案

许多产品的界面都会为用户提供多种配色方案，这样可以满足用户个性化的需求和个人色彩的喜好习惯，如Windows操作系统界面、浏览器界面、QQ聊天界面等。设计师在UI设计过程中，可以考虑设计多种配色方案，便于用户在使用过程中自由选择，这样也能更好地满足不同用户的需求。

◆　案例分析

图1-108所示是一个日历App界面设计，为用户提供了两种配色方案，一种是白色背景搭配蓝色文字的传统配色方案，视觉表现效果清晰、直观；另一种是富有现代感并深受年轻人喜爱的深蓝色背景搭配浅色文字的配色方案，用户可以自由选择使用任意一种配色方案，从而满足不同用户的需求。

图1-109所示是一个音乐App界面设计，设计了3种不同配色方案供用户选择，这3种配色方案的共同点就是都采用了同色系搭配，并且背景都是偏灰暗的低饱和度色彩，而播放控制图标则搭配白色和高饱和度色彩，与背景形成对比，突出功能操作图标的表现。

1.7.5　提升界面内容的可读性

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

◆　案例分析

可读性是UI设计的基础原则，默认的白色背景搭配黑色文字是最佳可读性的配色方案。图1-110所示是一个动物知识App界面设计，使用白色作为界面背景颜色，搭配黑色的文字，使界面中的文字内容具有非常好的可读性。为界面标题部分搭配浅黄色背景，为功能操作按钮搭配绿色，使界面富有活力。

深色背景搭配白色的文字同样能为用户提供良好的可读性。图1-111所示是一个社区活动App界面设计，使用蓝色与白色进行配色设计，使界面表现出自然、清爽的视觉印象。在蓝色的背景上搭配白色的文字，在白色的背景上搭配黑色的文字，始终让界面内容具有良好的可读性。界面中的交互操作按钮则使用高饱和度的蓝色和橙色进行突出表现，视觉效果清晰，重点突出。

1.7.6　控制色彩的使用数量

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

◆　案例分析

图1-112所示是一个海岛旅游App界面设计，使用海岛风景图片过渡到深蓝色作为界面的背景，很好地表现出海岛的优美风景。在界面中搭配白色的文字，与背景形成对比，视觉效果简洁、清晰。界面中的功能操作按钮则使用了高明度的蓝色进行搭配，保持界面整体色调的统一，同时又与背景形成明度对比，突出功能操作按钮的表现。

在一些特殊类型的App界面设计中，可以使用多种不同的色彩分别表现不同的选项，从而起到明确区分的目的。图1-113所示是一个工具应用App界面设计，使用白色作为界面背景颜色，而各种不同类型的工具则使用了不同的高饱和度色彩进行表现，从而有效区分不同的工具，多种高饱和度色彩的加入也使得界面表现更加活跃。