在上一篇文章中我介绍了，想必大家对配色也有一定的了解和认识，其实在我们的日常设计中配色还是需要一些技巧。这一篇文章可以说上一篇文章的一个延伸。如果没有看过上一篇的小伙伴建议先看上一篇文章再去看这一篇文章！接下来我给大家分享一些色彩运用的配色技巧！

色调一致

我们设想一下有个这样的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度范围内的颜色作为中间色做过度或者两种色相的中间色做过度。

最后

色彩真的是有人欢喜有人忧，如果用好了不仅让画面大放异彩还让你事半功倍。如果用了不好大红大绿画面会很不协调，会让人非常不适应。知彼知己，百战不殆，你只有了解色彩才能用好色彩，色彩需要我们长时间探索和发现。

Powered by Froala Editor