UI中的那些配色技巧

身为“好色之徒”的我们每天都要和色彩打交道，如果说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、三角对立色

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

色调一致

我们设想一下有个这样的APP首页、我的页面、支付页面、列表页、详情页，他们的功能都各不相同，如果用不同的颜色加以区分没有一个统一的色调会是什么样的呢？

以豆瓣为例首页是绿色的、小组的页面是金黄色的、我的页面是浅紫色的你们感觉如何啊？是不是觉得很乱现在的app颜色很乱。由此我们可以得出结论在UI中没有统一的色调都会造成风格的混乱变得杂乱无章，而且用户体验不好让用户在视觉体验上会让人感到很不舒服，当然了这也不是绝对的有些特殊的情况下可以让页面的颜色有所不同，但是UI整体还是以主色为主。

我们在进行页面设计之前应先确定界面的主色调，主色将占领很大的比例，通常是品牌色，而辅助色、点缀色、背景色都应以主色调为依据来搭配，三种颜色以60%主色-30%辅色-10%点缀色的比例搭配。这样才能整体色调一致，色调一致能给用户带来统一始终如一的视觉体验。如上图豆瓣主色为绿色（品牌色）辅助色是主色的互补色为红色点缀色为红色的邻近色黄色。

颜色赋予功能&属性

色彩是有性格的，不同的颜色会给予人不同的感受，红色会让人感到喜庆、热情、危机感、危险等、警示，绿色会让人感到安全、生命、健康等，黑色会让人感到高端、品质感、神秘、庄重等，金黄色让人感觉到沉稳、高贵、奢华等。其他的颜色我就不一一列举了，这些颜色人们都赋予了他们一定的功能属性。

上文我说过，页面要保持色调一致。但是这个不是绝对的，也有特殊情况即便是这样用色也要在人们的认知里。豆瓣的产品色绿色的，难道春节活动页、或者平时的活动页、也弄成绿色的，红包的颜色改成绿的？？？。要想生活过得去必须身边多点绿？！

当然玩笑归玩笑，我们回归正题，绿色那是绝对不行的颠覆了人们的认知。人们通过色彩给人的感觉形逐渐形成认知会把他们标签化、属性化。例如红色、橙色会给人带来愉快、热闹、喜庆之感，大促销、红包、等等的一些活动页面都会用到这些颜色。黑色会给人带来高端、品质感、金黄色会给人带来高贵、奢华感，一般情况下VIP页面的颜色搭配是经典的黑金组合。但是别忘了一点红色也会给人带来警示、危险、危机感人们会把红色给功能化。

删除按键一般都是红色的，删除按钮就是一种不经常操作的按钮。红色的按钮也给用户警示，，同时也减小了误删操作的几率。在数据可视化设计师常常会把红色用在严重报警、严重事件中橙色是报警、绿色是正常，这样子做不仅在大屏幕中显得格外醒目，也可以让大屏操作员，可以根据颜色快速识别出报警事态的严重程度，提高应急反应时间。

良好的可读性

在我看来无论是做平面设计、网页设计、UI设计、等等的本质就是有目的的沟通有目的的信息传达，把一些信息传递给我们想让他知道的一些人。良好的可读性是传递信息一个必不可少的点，也是网页和app是否具有良好用户体验的关键。一个有着良好可读性的界面设计为用户提供主次分明、层次清晰的信息浏览。

例如图1在浅色背景的banner下使用深色的文字，图2在深色背景下使用浅色的文字，在图三中主色是蓝紫色、辅助色是黄橙色，这张Banner的背景是深色的所以我们要用浅色文字，如果还想突出重要文字怎么办呢？我们都知道运用互补色和对比色，可以加大画面的对比让画面更突出更醒目。图三就是用此类方法，蓝紫色和黄橙色是互补色，在信息保证了良好可读性的前提下利用互补色加大重要信息的对比，不仅让信息有了层级还让信息有了主次之分具有更好的营销性。

有通过对比强化信息的识别度，那就有使用低对比弱化次要内容。左图的QQ邮箱的收件箱功能区有633封还未看的邮件，这个属于次要信息所以633用了灰色在颜色上来降低对比。QQ邮箱下方的群邮件、收件箱、已发送、已删除和知识星球下方草稿箱、回收站、设置、帮助中心不常使用的功能被摆放在列表的最下面，二者都是使用灰色搭配降低对比反而能凸显上面列表的重要性，让界面减少不必要的色彩。

控制色彩数量

在上一篇文章中我分享了60%主色-30%辅色-10%点缀色原则，色彩影响着用户的情绪和行为，在UI中如果使用过多的色彩。会造成整体颜色不统一没有主次。影响用户体验也会让他们产生焦虑和抵触的心理。在做设计的时候我们要遵从60-30-10配色原则，但是实际设计中迫于功能和需求我们可能会需要更多的色彩比如金刚区等。但是无论如何也不要超过7种色相，每个色相可以运用饱和度、明度变化来丰富色彩。

BliBili使用了单色主色的设计用粉色当作主色，而频道的页面用了7种色彩，但是每种色彩通过明降低饱和度或明度，构成了30多个频道的色彩搭配，在颜色上不仅丰富多元页面整体看起来也和谐统一。

巧用邻近色

在上文中说到在页面中无论如何也不要超过7种色相，但是在app功能越来越多的今天如何保证功能icon颜色丰富的情况下，又不超过7种色相呢？

我们看看美团是怎么解决的，我们看它虽然使用了6种不同的色彩，仔细看其实只用了3种色彩。其他3种色彩其实是前者邻近色中提取出来的，再将他们错落摆放位置，这种搭配技巧既可以丰富色彩的搭配，又保证了整体搭配的统一。

Smallpdf是我觉得比较好用的PDF转换工具这么多的功能的功能模块，用了从红色、青色、紫色的邻近色中提取出来的颜色作成了有着清晰的视觉层次、又有着渐变连贯属性的色块间变，这样的好处是高纯度和丰富的色彩更加凸显文字信息，也省去了不必要的分割线。还有一个最重要的点赋予了整个模块的视觉递减，优先级越高的所用功能频率最高的其视觉表现力就越强，随着所用功能频率低的视觉表现力也应呈现一种视觉递减的状态，Smallpdf的页面设计还是非常巧妙的。

渐变色不超过90度色相

在页面设计中我们经常会用到渐变，渐变是一种色彩从明到暗、由深至浅的变化，它让色彩更加生动、有节奏、优雅、迷人，不仅增加了页面的美观程度、还增加了页面的细节，让页面变得耐看。

但是并不是渐变色都是好看的，例如红绿色渐变、黄蓝色渐变等，因为都是互补色渐变对比太强烈了辣眼睛。

当两种颜色之间超过90度那么渐变色就会看上去很不自然，只有控制在90度之间渐变才会变的自然。

QQ的导航栏是用了青色和蓝色渐变，色相没有超过超过90度，所以渐变看起来非常漂亮。难道超过90度的渐变就一定不好看了么，那也到不一定只要处理好了照样可以很好看。

红蓝渐时由于色相超过了90度显得红蓝渐变很不舒适中间呈现饱和度不高灰灰的感觉。这种情况那就需要加入紫色过度才会呈现出完美的视觉效果。在渐变中两个色相如超过了90度，那就选取其中一个色相的90度范围内的颜色作为中间色做过度或者两种色相的中间色做过度。

最后

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