总监说我配色丑，没想到真被我改好看了！！-UICN用户体验设计平台

欢迎大家关注我的UI中国，不知不觉七千多个粉丝啦，嘻嘻~~

很多同学，总是苦恼自己配不出高级、干净的颜色，虽然看了很多文章跟方法，但一看都会，一动手全废。

我曾经也碰到过这个问题，在动手之前，或许脑海里会有个大致的色彩感觉。但实际上软件一操作，发现怎么配都很难配出特满意的色彩。

其实这种属于正常现象，更多的是经验层面的缺乏，只要多练习，慢慢的这种眼高手低的感觉就会越来越少。

并且练的多了后，发现配色真的没那么难，只要有一点积累，有一点审美，稍微掌握一点方法，就能让自己在配色的能力上有个很大的改善。

审美跟积累很早之前的文章里头其实就说了，可以多建几个画板，把不同的色彩归类收集起来，分析这些色彩的饱和度及明度，逐渐感受到色彩的张力。

人有着很强的适应环境及学习能力，比如你在一个地方呆长了，其实口音也会越来越接近当地。

审美也是一样，只要你不断地去收集、积累那些真的很美的图片，那么你的审美也会发生改变，自然也会越来越高。

比如以前你认为这样的配色就很美，视觉冲击力强

但后面慢慢发现，原来这种平淡的才是惊艳之作，非常的耐看。

审美提升上来了，其实剩下的就是靠大量的练习以及方法的积累。练习也很简单，无非是多做一些Redesgin，多做一些概念方案。

Dribbble上也有非常多的案例可以参考，比如下面这种

提升审美需要依靠点滴积累。

而方法的积累，其实真的就是三点。只要把这三点掌握好了，配出来的颜色都不会太low，显得较为高级。

第一点：颜色不要花

有些同学总是认为配色嘛，肯定要多配几种颜色，才会美。

但其实错了，颜色配的越多，越显得脏乱，并且对设计师的色彩能力也要求越高，ta必须要把所有的颜色选到一个最大的公约数，搭配起来才能非常时尚。

一般能像上面这样的，能同时hold住三种颜色同时在一个画面上的，大多数也都是王者段位了。

如果自己作为青铜、白银级选手，我建议还是首先要从控制颜色的数量还是入手。

控制的不好，就是下面这个例子：

总结：控制色相数量，增加色彩明度梯制 

先把颜色的明度系数理解到位了，再理解不同色相带来的情绪。同一个画面色彩越多，越难掌控，而且也会让人视线越不知道放哪，产生一种烦躁焦虑感。

比如看看这些作品，高级都是因为色彩被控制的很好

再来几组比较花的，是不是就要掉档次的多？

第二点：不要脏

好看的颜色会让人引起共鸣，不好看的颜色一眼都不想再看。脏脏的颜色会让人觉得这个东西不高级，不够养眼。

那么什么颜色会显得脏？带大家看几个辣眼睛的：

1、饱和度中性的重色 ❌

2、饱和度过高的中性色 ❌

3、饱和度过低的浅性色 ❌

上面这几种辣眼睛的情况，咱们要尽量避免。

重色要么为偏灰色，要么带强颜色属性；中性色饱和度尽量需要往下收，收到直到比较温和为止；浅色的色彩尽量明快饱和度高一点，不要过灰，不然也会显得脏。

比如下面这些改好了的。

1、重色系 ✅

2、中性色 ✅

3、浅色系 ✅

再对比一下上面的几个辣眼睛色块，发现是不是差别还挺大。 

总结：根据颜色明度来控制颜色的饱和度

说到这儿，其实学过美术的同学应该都知道，这个跟画色彩作品差不多，亮部尽量多给一些鲜艳的色彩，中间层尽量灰下去，暗部色彩可以稍微丰富一丢丢。

第三点：颜色要有主次之分，什么是主色，什么是次色，要分清楚

在实际业务场景，非纯工具型应用，很难只用到一种色彩，因为不同的功能需要使用不同的色彩来进行区分。

因此大部分实际的界面设计需求当中，我们还是要用到两种到三种的色彩。

不过在搭配的时候，需要注意的是，颜色的主色跟次色一定要显而易见可以区分得清楚。

其中主色应该占据60%-70%及以上的面积，次色加在一起，不可超过主色的面积区域。

这样做的原因，也是为了防止眼睛失焦，导致审美疲劳。色彩越多，主次越难分清楚，眼睛对于信息的视觉需要越耗精力，所以自然看着不舒服。

总结：让页面的色彩主次显而易见。

这一点在室内的装潢上，也有讲究。

室内设计讲究的主次色搭配，黄金配色比例70% : 25% : 5%；

70%的基础色，包括墙面、地板和天花板。一般情况下，同一空间的这三者颜色尽量控制在2种，最多不能超过3种（毕竟现在很多人喜欢涂一面有色的墙）

比如你发现这些很好看的室内设计图，都差不多是这样。从室内设计的装潢里找取配色灵感，也是不错的一些选择。

上面的这些，就是最重要的三个方法。把这三个方法掌握了，其实配色起来就容易多了，而且不容易犯错误。

好的习惯也很重要

另外方法很重要，但习惯也不可忽视，所以还是得养成一些比较好的配色习惯，这样才能最快的成长，巩固自己对于配色的认知以及理解。

比如多收藏美图，提升审美。这点虽然很不起眼，但对于培养自己的审美，是有着绝大的好处的。在收藏了100个不同色彩的图板之后，相信你就能感受到其中的差距了。

另外在初期阶段，哪怕按照上面的方法去调整了。还是感觉自己配出来的颜色总是缺了点什么。那么不妨去吸一吸别人的颜色，在别人的颜色上借鉴。

颜色无非就那么几种，多吸一吸也不是啥坏事。

比如你现在要让我设计一个绿色界面的UI，我肯定会先去吸一下微信的绿色，跟360的绿色，然后结合这两个绿色，做一下微调，搭配出一个崭新的绿色。

毕竟是在巨人的肩膀上前行，自然也不会太差。

理解色彩的情绪

最后一个，就是配色前的思考与判断也很重要，色彩的情绪需要与实际的场景想吻合。不要做出跟场景预期不符合的颜色，高端场景用大紫大绿不合适。

这块其实也有一些方法，不过就不在本篇文章里讲了。

后面我也会单独写一篇关于情绪板的文章，如何根据业务特色，来搭配出具备情绪的色彩，传递出业务的内在价值。

关注公众号UX小学后，把咱们星标，这样就能接到及时推送了。

打包案例集合

肯定会有同学想问我，咱们这篇文章里这么多好看的设计作品，都是从哪来的？其实是咱们在视频号『设计新视界』上开了一期节目，叫做UI/UX设计趋势，每一期都会在全球各大平台上，精挑细选一些非常nice的作品。

这些作品对于提升自己的审美，增加参考标准很有帮助。

所以我为大家打包了一份，大概里面有两百多张我精挑细选的UI作品集合，用来收藏到自己的本地电脑里，平时没事打开看看，自然是非常合适的。

一共有7期，每一期都有30张图左右，每张都是精挑细选下来的结果，所以效果非常高级。

资源下载方式：

方法1：点击文末收藏旁边的的下载按钮，根据操作即可下载

方法2：微信手动搜索公众号『 UX小学 』，发送关键词『 UI案例打包 』

已超1000+人下载

PS：最近咱们跟阿里、腾讯的同学，一起建了个一线设计师微信交流群，感兴趣的同学，可以添加小哆啦微信号『 Dollam 』，备注『  UXD FANS  』加入！（只面向星标了公众号UX小学的粉丝 ）