身为“好色之徒”的我们每天都要和色彩打交道，如果说icon是我们的好朋友。那么色彩就如同恋人般，无论是UI设计、平面设计、网页设计等最先考虑到的就是色彩。色彩虐我千百遍，我带色彩如初恋，接下来我带领大家一起探讨如何在设计中配色。

色彩的性格

人们的生活中离不开色彩，在掺入了人们的生活经验、思想感情、喜怒哀乐的情绪之后，变得富有人性和人情味、有性格。不同的颜色会给带给人不同的情绪感受于是人们将不同的色彩赋予了不同的属性和功能。

例如红色和橙色会让人联想到刺激、热情、积极、自信、力量、权威、危险、促销、新年、喜事等。绿色会让人联想到生命、青春、健康、新鲜、自然、安全、舒适等。蓝色会让人联想到清爽、凉爽、宁静、悠远、可靠、广阔、科技、未来。粉色和紫色会让人联想到神秘、女性、尊贵、魔法、温馨、浪漫。

了解色彩的性格可以有助于我们在进行页面设计的时候提供相应依据。例如上图一个网贷的网站，以蓝色作为主色，这种颜色传递出一种安全、可靠、亲切的性质。让用户觉得这家信贷值得信赖。

Twitter也是用了蓝色为主色，这种高纯度的颜色传递出一种年轻、亲切和感性的气质。这也直接映射了Twitter主要用定位是年轻人。

60%主色-30%辅色-10%点缀色

色不过三，无论是平面设计、网页设计、APP设计，都需要遵循这个原则。主色通常是产品的品牌色给予用户第一印象。即60%为主色可以运用网页和UI中的导航栏、按钮、图标等关键元素中，成为一个视觉焦点和品牌产生联系。

如果一个页面中只有一个颜色，那如何打破颜色同质化呢？那么辅助色就派上用场了，辅助色可以衬托主色平衡视觉避免颜色过于单一即30%甚至是更低为辅助色。同时当页面中的关键信息需要做区分时也可以用上辅助色。主色的邻近色、互补色、分散互补色、三角对立色都可以成为辅助色。

以这个网站为例主色调是蓝色为了打破颜色单一的局面，采用了蓝色的对比色橙色为辅助色也在banner上的按钮也采用了橙色。这样既打破了页面颜色过于同质化的局面，也可以让一些重要信息有了视觉焦点，给予用户视觉引导。

以脉脉和知识星球为例脉脉的主色为蓝色，而知识星球的主色为绿色。二者的辅助色一个是黄色和橙色，前者是用了主色的互补色为辅色，后者是以主色的邻近色为辅助色。和上文的网页一样打破了页面颜色过于单一颜色同质化的局面，同时脉脉页面上的薪资信息和知识星球页面上钱包、星球币等前四个icon都是较为重要的板块，用辅助色加以区分也体现了信息的层级关系，给予用户视觉引导。顺便说一个题外话，为什么知识星球我的页面后面的四个icon为什么是灰色的呢？在通常情况下那些不常使用的功能被摆放在列表的最下面，使用灰色搭配反而能凸显上面列表的重要性，让界面减少不必要的色彩。

点缀色也称点精色在页面中的面积最小即10%甚至更小。通常在有些情况下点缀色是和主色形成鲜明对比它通常是主色的互补色，和辅色都有了总觉得画面有点单调这时候就需要用到点缀色了。如第左图主色为红色辅色为黄色看起来也没有太大问题，就是感觉颜色还是不够丰富缺了点什么。这时候我们在海报中加了一枝花用绿色来做点缀，你会发现海报的颜色瞬间丰富了起来。

当界面中出现冷暖色调时，而点缀色来平衡画面的冷暖色调。

在网页和UI中当辅助色不能满足关键信息的提示时，就需要点缀色来抓人眼球。还是以脉脉为例，我们都知道脉脉的主色是蓝色、辅助色为黄色。那点缀色呢？对了是红色。辅助色黄色用在了一个比较重要的板块薪资信息上，那消息提示我也总不能用黄色啊。这样子会给用户带来混淆，然而消息提示也是一个重要的信息这时候辅助色已经不能满足关键信息的提示了，那就用上了红色为点缀色。

色彩搭配方式

1、单色配色单色搭配没有辅助色或点缀色让整体感觉非常干净视觉也非常统一，呈现出给用户始终如一的视觉感受。而这种单一的页面一般用于，较为个性比较有自我主张的页面而这一类页面无论是在内容上和体量上都比较小还有的就是用在工具类的网页和app。

2、渐变色主色配色

近几年渐变色主色搭配是一种非常流行的设计，它打破了单色搭配视觉过于单一的枯燥感。同时也由一种色彩渐变成另一种色彩不仅让打破了画面的枯燥感，还给予了画面一些细节带给人意想不到的视觉体验，最后渐变也可以给予用户视觉引导。

例如淘宝和HBOmax都是用渐变色主色配色同时也都是以邻近色形成渐变过渡。淘宝黄色到橙色的渐变主色搭配，给人一种年轻、热情的感觉，HBOmax紫色和紫红色的渐变搭配，给人一种尊贵、神秘的感觉。当然了渐变虽好但是两个色相不能相差太大，否则就会呈现不可控或不自然的的视觉效果。

3、邻近色配色

邻近色搭配是由主色和邻近色的色系组成的搭配，它可以在同一色调中构建出丰富视觉层次。当你不想让页面产生较为强烈的对比时，又不想让颜色过与单调那就可以使用邻近色来增加色彩上的变化。美颜相机就是用了邻近色配色的方式，粉色的邻近色浅粉、浅紫色做为辅助色。完美了契合了该app的用户定位和产品调性。

4、互补色搭配

互补色搭配是指在环中每一个颜色对面(180度对角)的颜色搭配。 例如黄色和蓝色、绿色和紫色、红色和青色。互补色有着非常强烈的对比，从而产生出非常强烈的视觉冲击让人过目不忘，但是也非常让人难以驾驭如果使用不当就成为了红配绿赛狗屁的窘境。以蓝色做主要颜色的66信用日的宣传海报上用互补色作为减免押金信息的容器可谓是非常明智之举，这条信息显得格外突出、醒木让用户只看一眼就会记住难以忘怀。而滨客的app最主要的功能就是酒店预订，用黄色的边框和蓝色的搜索按钮。将这个重要的板块凸显得格外醒目，也有助于用户进行操作。

5、分散互补色

分散互补色搭配是指主色和互补色相邻的两个邻近色。例如蓝色的、黄色、红色、蓝色为主色而黄色是蓝色的补色、而红色为黄色的邻近色。这种配色的好处是通过互补色来增强信息的层级关系区分出重要信息和非重要信息，又让页面的色彩更具有张力更具有活力让页面变更有趣味性。

以左边的脉脉为例主色为蓝色一些重要薪资的信息用蓝色的互补色黄色作为辅助色， 而黄色的林邻近色是红色作为另一种信息提示颜色，有助于用户区分产品信息。而右边的H5用了蓝色、黄橙色渐变、红色为配色，不仅让H5的页面颜色丰富，细节也变得丰富起来让画面变得更耐看，让用户觉得这个H5很有热情具有活力。

6、三角对立色

三角对立色搭配就三种颜色是在色环上的位置构成一个等边三角形。这样的配色好处是可以在维持色彩协调的同时，制造强烈的对比效果。

最后

色彩是一门很深奥的学问，其实我说的这些都只是冰山一角，如何用好色彩也不仅仅看了这篇文章就可以掌握的，需要大量的练习和实践。对于我来说也需要很长的一段路需要走，我也希望你在看完以上文章会对色彩有新的启发，我们都是设计师我们都是“好色之徒”希望这些上天赐予我们的礼物，能让我们创造出更有价值的设计。

Powered by Froala Editor