前端用户体验提升（六）色彩搭配

一、前言

前端项目开发一段时间后，会思考如何提升用户体验，如何布局前端页面，如何合理搭配页面色彩。本篇博文主要讲解如何通过色彩合理搭配提升用户体验。

二、基础理论

2.1 色彩搭配原则

色彩怎么搭配都可以，看你是想要对比效果还是要统一效果。

如果要对比效果，就取两种色相相差很大，或者明度相差很大，或者饱和度相差很大的颜色。

如果要统一效果，就用相差不远的色彩进行配色。

一般设计的时候背景用稍浅色，需要突出的东西用深色，比如按钮。

2.2 颜色三要素

• 色相，以区别各种颜色，如红绿蓝等；
• 纯度，以示色彩深浅；
• 明度，以示彩色明暗。

2.3 搭配中的对比效果如何实现？

两种或者多种浅颜色配在一起不会产生对比效果：同样多种深颜色合在一起效果也不吸引人、但是，当一种浅颜色和一种深颜色对比在一起时，就会使浅色显的更浅，深色显的更深。明度也同样如此。

2.4 搭配中的统一效果如何实现？

以色相为基础的配色是以色相环为基础进行思考的，用色相环上类似的颜色进行配色，可以得到稳定而统一的感觉。用距离远的颜色进行配色，可以达到一定的对比效果。

类似色相的配色，能表现共同的配色印象。这种配色在色相上既有共性又有变化，是很容易取得配色平衡的手法。例如：黄色、橙黄色、橙色的组合；群青色、青紫色、紫罗兰色的组合都是类似色相配色。与同一色相的配色一样，类似色相的配色容易产生单调的感觉，所以可使用对比色调的配色手法。

中差配色的对比效果既明快又不冲突，是深受人们喜爱的配色。

2.5 间接色是哪三种？

将任何2种原色混合起来，就可以得到间接色：
橙（红加黄）紫（红加蓝）绿（蓝加黄）

三、色彩搭配原理与技巧

色彩搭配一般为绘画中的色彩，三原色为红、黄、蓝。下面是色彩搭配以光的三原色为基础制作的色相环：
　　原色 色盘上延伸最长的几段表示出了三种原色----红黄蓝。它们之所以称为原色。是因为其他的颜色都可以通过这三种颜色的组合而成。
　　第二色（间色） 将任何俩种原色混合起来，就可以得到间色：
　　橙（红加黄）紫（红加蓝）绿（蓝加黄）
　　第三色（混合色）色盘上另外6种颜色称为混合色。它们是原色和一种临近的间接色混合而成的：桔黄（黄加橙） 青（黄加绿）深绿（绿加蓝）绛（红加橙）。
　　
颜色三要素配色：

• 色相，以区别各种颜色，如红绿蓝等；
• 纯度，以示色彩深浅；
• 明度，以示彩色明暗。

3.1色相配色

以色相为基础的配色是以色相环为基础进行思考的，用色相环上类似的颜色进行配色，可以得到稳定而统一的感觉。用距离远的颜色进行配色，可以达到一定的对比效果。
　　
类似色相的配色，能表现共同的配色印象。这种配色在色相上既有共性又有变化，是很容易取得配色平衡的手法。例如：黄色、橙黄色、橙色的组合；群青色、青紫色、紫罗兰色的组合都是类似色相配色。与同一色相的配色一样，类似色相的配色容易产生单调的感觉，所以可使用对比色调的配色手法。中差配色的对比效果既明快又不冲突，是深受人们喜爱的配色。
　　
对比色相配色，是指在色相环中，位于色相环圆心直径两端的色彩或较远位置的色彩组合。它包含了中差色相配色、对照色相配色、补色色相配色。对比色相的色彩性质比较青，所以经常在色调上或面积上用以取得色彩的平衡。

• 色相配色在16色相环中，角度为0°或接近的配色，称为同一色相配色。
• 角度为22.5°的两色间，色相差为1的配色，称为邻近色相配色。
• 角度为45°的两色间，色相差为2的配色，称为类似色相配色。
• 角度为67.5°~112.5°，色相差为6~7的配色，称为对照色相配色。
• 角度为180°左右，色相差为8的配色，称为补色色相配色。

3.2 色调配色

3.2.1 同一色调配色

同一色调配色是将相同色调的不同颜色搭配在一起形成的一种配色关系。同一色调的颜色、色彩的纯度和明度具有共同性、明度按照色相略有所变化。不同色调会产生不同的色彩印象，将纯色调全部放在一起，或产生活泼感；而婴儿服饰和玩具都以淡色调为主。在对比色相和中差色相配色中，一般采用同一色调的配色手法，更容易进行色彩调和。

3.2.2 类似色调配色

类似色调配色即将色调图中相邻或接近的两个或两个以上色调搭配在一起的配色。类似色调配色的特征在于色调与色调之间有微妙的差异，较同一色调有变化，不会产生呆滞感。将深色调和暗色调搭配在一起，能产生一种既深又暗的昏暗之感，鲜艳色调和强烈色调再加明亮色调，便能产生鲜艳活泼的色彩印象。

3.3.3 对照色配色

对照色调配色是相隔较远的两个或两个以上的色调搭配在一起的配色。对比色调因色彩的特征差异，能造成鲜明的视觉对比，有一种“相映”或“相拒”的力量使之平衡，因而能产生对比调和感。对比色调配色在配色选择时，会因横向或纵向而有明度和纯度上的差异。例如：浅色调与深色调配色，即为深与浅的明暗对比；而鲜艳色调与灰浊色调搭配，会形成纯度上的差异配色。
　　
采用同一色调的配色手法，更容易进行色彩调和。

3.3 明度配色

明度是配色的重要因素，明度的变化可以表现事物的立体感和远近感。如希腊的雕刻艺术就是通过光影的作用产生了许多黑白灰的相互关系，形成了成就感；中国的国画也经常使用无彩色的明度搭配。有彩色的物体也会收到光影的影响产生明暗效果。像紫色和黄色就有着明显的明度差。
　　
将明度分为高明度、中明度和低明度三类，这样明度就有了高明度配高明度、高明度配中明度、高明度配低明度、中明度配中明度、中明度配低明度、低明度配低明度六种搭配方式。 其中高明度配高明度、中明度配中明度、低明度配低明度，属于相同明度配色。一般使用明度相同、色相和纯度变化的配色方式。高明度配中明度、中明度配低明度，属于略微不同的明度配色。 高明度配低明度属于对照明度配色。

1. 色调配色：指具有某种相同性质（冷暖调，明度，艳度）的色彩搭配在一起，色相越全越好，最少也要三种色相以上。比如，同等明度的红，黄，蓝搭配在一起。大自然的彩虹就是很好的色调配色。

2. 近似配色：选择相邻或相近的色相进行搭配。这种配色因为含有三原色中某一共同的颜色，所以很协调。因为色相接近，所以也比较稳定，如果是单一色相的浓淡搭配则称为同色系配色。出彩搭配：紫配绿，紫配橙，绿配橙。

3. 渐进配色：按色相、明度、艳度三要素之一的程度高低依次排列颜色。特点是即使色调沉稳，也很醒目，尤其是色相和明度的渐进配色。彩虹既是色调配色，也属于渐进配色。

4. 对比配色：用色相、明度或艳度的反差进行搭配，有鲜明的强弱。其中，明度的对比给人明快清晰的印象，可以说只要有明度上的对比，配色就不会太失败。比如，红配绿，黄配紫，蓝配橙。

5. 单重点配色：让两种颜色形成面积的大反差。“万绿丛中一点红”就是一种单重点配色。其实，单重点配色也是一种对比，相当于一种颜色做底色，另一种颜色做图形。

6. 分隔式配色：如果两种颜色比较接近，看上去不分明，可以靠对比色加在这两种颜色之间，增加强度，整体效果就会很协调了。最简单的加入色是无色系的颜色和米色等中性色。

7. 夜配色：严格来讲这不算是真正的配色技巧，但很有用。高明度或鲜亮的冷色与低明度的暖色配在一起，称为夜配色或影配色。它的特点是神秘、遥远，充满异国情调、民族风情。比如：凫色配勃艮第酒红，翡翠松石绿配黑棕。

“色彩影响人类心情与思考，当眼睛看到某种颜色时，会将此讯息传回大脑的下视丘，经由一系列的神经传达，刺激甲状腺分泌贺尔蒙，进而造成情绪、情感或是实际反应。”——网页设计中的色彩心理学

设计师日常设计中最核心的部分就是配色，这也是每个设计师的基本功。为网页选择一种基础色并不难，但是想要一套可用的色彩组合，却不是那么容易的事情。所以，很多时候，设计师会借助配色工具来寻求配色方案。

配色方法和配色工具有很多，有的工具需要配合特定的方法，而有的工具则只能应对特定的需求。

用户对颜色的认知往往是类似的，无论是哪一类的网页，如果页面太过花哨，不仅不会带给用户视觉的享受，还会干扰视觉。无论选择深色系还是浅色系，都要经过明确的用户体验和合理的决策共同完成。网页在明亮的颜色方面配色最好不要超过三种，以免造成页面视觉体验的混乱。

在深色网页设计中最常见也是最必要的元素就是留白，留白越多，留给字体和设计作品的空间就越多越多，能够保持很好地层次感。留白区域能够很好的指引用户，如果元素过多，那么用户的注意力会分散。留白能够让用户尽快的寻找到所需要的信息，提高用户体验。

在深色系网页设计中我们会发现很多设计师都采用动画效果来增强页面的交互效果，打破深色系的沉闷感。简单的动画效果营造的视觉体验是非常吸引人的，可以引导用户不断探索网页呈现的神秘感。切记不要使用复杂的动效，不但不会给予用户非常惊艳的效果，反而会干扰用户。

以上为UI色彩搭配理论知识，在实际应用中，一般来说，网页的背景色应该柔和一些、素一些、淡一些，再配上深色的文字，使人看起来自然、舒畅。而为了追求醒目的视觉效果，可以为标题使用较深的颜色。下面是在做网页和浏览别人的网页时，对网页背景色和文字色彩搭配积累的经验，这些颜色可以做正文的底色，也可以做标题的底色，再搭配不同的字体，一定会有不错的效果，希望对大家在制作网页时有用。

• Bgcolor:″＃F1FAFA″——做正文的背景色好，淡雅
• Bgcolor:″＃E8FFE8″——做标题的背景色较好，与上面的颜色搭配很协调
• Bgcolor:″＃E8E8FF″——做正文的背景色较好，文字颜色配黑色
• Bgcolor:″＃8080C0″——上配黄色白色文字较好
• Bgcolor:″＃E8D098″——上配浅蓝色或蓝色文字较好
• Bgcolor:″＃EFEFDA″——上配浅蓝色或红色文字较好
• Bgcolor:″＃F2F1D7″——配黑色文字素雅，如果是红色则显得醒目
• Bgcolor:″＃336699″——配白色文字好看些
• Bgcolor:″＃6699CC″——配白色文字好看些，可以做标题
• Bgcolor:″＃66CCCC″——配白色文字好看些，可以做标题
• Bgcolor:″＃B45B3E″——配白色文字好看些，可以做标题
• Bgcolor:″＃479AC7″——配白色文字好看些，可以做标题
• Bgcolor:″＃00B271″——配白色文字好看些，可以做标题
• Bgcolor:″＃FBFBEA″——配黑色文字比较好看，一般作为正文
• Bgcolor:″＃D5F3F4″——配黑色文字比较好看，一般作为正文
• Bgcolor:″＃D7FFF0″——配黑色文字比较好看，一般作为正文
• Bgcolor:″＃F0DAD2″——配黑色文字比较好看，一般作为正文
• Bgcolor:″＃DDF3FF″——配黑色文字比较好看，一般作为正文

浅绿色底配黑色文字，或白色底配蓝色文字都很醒目，但前者突出背景，后者突出文字。红色底配白色文字，比较深的底色配黄色文字显得非常有效果（仅限理论参考）。

四、拓展阅读

• 《Vue进阶（幺柒捌）：延伸阅读Sass、Scss、Less与Stylus编程特性》