1.2 色彩让界面更具魅力

对于打开界面的用户来说，他们首先会被界面中的色彩所吸引，然后根据色彩的差异对画面的主次逐一进行了解。本节主要对新媒体的色彩设计知识进行讲解，这些基础知识也是后期新媒体设计配色中的关键所在。

1.2.1 色调奠定主旋律

在大自然中，我们经常见到这样一种现象：不同颜色的物体或被笼罩在一片金色的阳光之中，或被笼罩在一片轻纱薄雾似的、淡蓝色的月色之中；或被秋天迷人的金黄色所渲染；或被冬季银白色的世界所统一。这种在不同颜色的物体上，笼罩着某一种色彩，使不同颜色的物体都带有同一色彩倾向，这样的色彩现象就是色调。

色调指的是新媒体界面中画面色彩的总体倾向，是大方向的色彩效果。在界面设计的过程中，往往会使用多种颜色来表现形式多样的画面效果，但总体都会保持同一种倾向，偏黄或偏绿，偏冷或偏暖等。这种颜色上的倾向就是画面给人的总体印象，被称为色调，如图1-2所示。

色调是色彩运用中的主旋律，是构成新媒体界面的整体色彩倾向，也可以称之为“色彩的基调”，画面中的色调不仅仅是指单一的色彩效果，还是色彩与色彩直接相互关系中所体现的总体特征，是色彩组合恰到好处的多样性与统一性呈现出的色彩倾向。

1. 色调色相的倾向

色相是决定色调最基本的因素，对色调起着重要的作用。色调的变化主要取决于画面中设计元素本身色相的变化，如某个页面呈现为红色调、绿色调或黄色调等，指的就是画面设计元素的固有色相，就是这些占据画面主导地位的颜色决定了画面的色调倾向，如图1-3所示，该H5画面中以粉色为主色调，粉色代表着可爱、青春、恋爱等心理暗示，十分符合界面七夕活动的主题特征。

专家指点

2. 色调明度的倾向

当构成画面的基本色调确定之后，接下来的色彩明度变化也会对画面造成极大的影响。画面明亮或者暗淡，其实就是明度的变化赋予画面的不同明暗倾向。在设计界面进行构思设计时，采用不同的明度的色彩能够创造出丰富的色调变化，如图1-4所示。

该H5界面中使用明度值较高的色彩进行配色时，高明度色彩之间的明暗反差会变小，使得画面呈现出清淡、明快之感。同时，运用相近色调作为文字的颜色，便可以让画面显得更欢快，更加符合界面的主题表现。

3. 色调纯度的倾向

在色彩的三大基本属性中，纯度同样是决定色调的不可或缺的因素。不同纯度的色彩所赋予的画面感觉也不同，我们通常所说的画面鲜艳度或昏暗均为色彩的纯度所决定的。

在新媒体设计中，色调纯度的倾向，一般会根据具体主题的色彩来确认。不过，就色彩的纯度倾向而言，高纯度色调和低纯度色调都能赋予画面极大的反差，给观者带来不同的视觉印象，如图1-5所示。

在低纯度的灰色画面中，一支粉色的化妆品摆放在画面中心，为原本平淡的画面增添了一种协调、高端与高品质的感觉，迎合了活动推广的主题。

当画面以高纯度的色彩组合表现主题时，鲜艳的色调可以表达出积极、强烈而冲动的印象。如上右图所示的界面使用了高纯度的色彩，使主体更加突出，增强了视觉冲击力。

1.2.2 调和配色使画面更和谐

“调”是调整、调配、安排、搭配、组合等意思，“和”可理解为和谐、融洽、恰当、适宜、有秩序、有条理，没有尖锐的冲突，相得益彰等解释。配色的目的就是为了制造美的色彩组合，而和谐是色彩美的首要前提，它使色调让人感觉到愉悦，同时调配后的颜色还能满足人们视觉上的需求以及心理上的平衡。

我们知道，和谐来自对比。没有对比就没有刺激视觉神经兴奋的因素，但只有兴奋而没有舒适的休息会造成过分的疲劳，以及精神的紧张，这样调和也就成了一句空话。所以，在设计时既要有对比来产生和谐的刺激美，又要有适当的调和来抑制过分的对比刺激，从而产生一种恰到好处的对比。总的来说，色彩的对比是绝对的，而调和是相对的，调和是实现色彩美的重要手段。

1. 以色相为基础的调和配色

在保证色相大致不变的前提下，通过改变色彩的明度和纯度来达到配色的效果，这类配色方式保持了色相上的一致性，所以色彩在整体效果上很容易达到调和。

以色相为基础的配色方案主要有以下几种。

同一色相配色：指相同的颜色在一起的搭配，比如蓝色的上衣配上蓝色的裤子或者裙子，这样的配色方法就是同一色相配色法。如图1-6所示，画面中微店海报的文字、背景等都使用粉色进行搭配，通过明度的变化使其产生强烈的差异，也使得画面配色丰富起来，表现出柔和的特性。

类似色相配色：指色相环中类似或相邻的两个或两个以上的色彩搭配。例如：黄色、橙黄色、橙色的组合；紫色、紫红色、紫蓝色的组合等都是类似色相配色。类似色相配色的配色在大自然中出现的特别多，比如嫩绿、鲜绿、黄绿、墨绿等。

对比色相配色：指在色环中，位于色环圆心直径两端的色彩或较远位置的色彩搭配。它包含了中差色相配色、对照色相配色、辅助色相配色。在24色相环中，两色相相差4～7个色，称为基色的中差色；在色相环上有90度左右的角度差的配色就是中差配色；它的色彩对比效果明快，是深受人们喜爱的颜色；在色相环上，色相差为8～10的色相组合，被称为对照色。从角度上说，相差135度左右的色彩配色就是对照色。色相差11～12，角度为165~180度的色相组合，称为辅助色配色。

色相调和中的多色配色：在色相对比中，除了两色对比，还有三色、四色、五色、六色、八色甚至多色的对比。在色环中成等边三角形或等腰三角形的三个色相搭配在一起时，称为三角配色。四角配色常见的有红、黄、蓝、绿及红、橙、黄、绿等色。

2. 以明度为基础的调和配色

明度是人类分辨物体色最敏锐的色彩反应，它的变化可以表现事物的立体感和远近感。如希腊的雕刻艺术就是通过光影的作用产生了许多黑白灰的相互关系，形成了成就感；中国的国画也经常使用无彩色的明度搭配。有彩色的物体也会受到光影的影响产生明暗效果，如紫色和黄色就有着明显的明度差。

明度可以分为高明度、中明度和低明度三类，这样明度就有了高明度配高明度、高明度配中明度、高明度配低明度、中明度配中明度、中明度配低明度、低明度配低明度6种搭配方式。其中，高明度配高明度、中明度配中明度、低明度配低明度，属于相同明度配色。在新媒体设计中，一般使用明度相同、色相和纯度变化的配色方式。如图1-7所示，画面中背景图片的配色均为高明度调和配色，带给人清爽、亮丽、阳光感强的印象，表现出优雅、含蓄的氛围，是一组柔和、明朗的色彩组合方式，非常符合画面中女性饰品的特点。且通过同样大小的圆形字母来组成主题文字，利用相同色相的不同明度完成配色，构成一种安静的视觉效果。

3. 以纯度为基础的调和配色

纯度的强弱代表着色彩的鲜灰程度，在一组色彩中当纯度的水平相对一致时，色彩的搭配也就很容易达到调和的效果。随着纯度高低变化，色彩的搭配也会有不一样的视觉感受。如图1-8所示，这是以纯度为基础的微店海报调和配色方案，画面处于一种鲜艳的高纯度色调中，让人产生一种非常有活泼且亮丽的感觉。

4. 无彩色的调和配色

无彩色的色彩个性并不明显，将无彩色与任何色彩搭配都可以取得调和的色彩效果，通过无彩色与无彩色搭配，可以传达出一种经典的永恒美感；而将无彩色与有彩色搭配，可以用其作为主要的色彩来调和色彩间的关系。

因此，在新媒体设计中，有时为了达到某种特殊的效果，或者突显出某个特殊的对象，可以通过无彩色调和配色来对设计的画面进行创作。如图1-9所示，该页面使用无彩色作为朋友圈背景和辅助文字的颜色，而又加入了少量的红色矩形，这样的配色可以让主题文字更加突出。

1.2.3 色彩的使用要点

对于新媒体设计来说，色彩是最重要的视觉因素，不同颜色代表不同的情绪，因此对色彩的使用应该和设计的主题相契合。如图1-10所示，“木友-Market”小程序的底部导航栏通过运用不同颜色的按钮来代表其激活状态，使用户快速知道自己所处的位置。

在新媒体界面的制作过程中，根据色彩的特性，通过调整其色相、明度以及纯度之间的对比关系，或通过各色彩间面积调和，可以搭配出变化无穷的新媒体界面效果。