UI基础教程-关于色彩的一些基础认知

配色、排版和字体是设计中最基础的技能，而颜色是对视觉感官影响最直接的因素，所以在本篇文章中将给大家普及一些关于色彩的一些基础认识和配色小技巧，此教程只针对一些零基础或基础比较薄弱的设计师，高手可以忽略（哈哈哈.jpg），感谢@张增顺的校正。部分图片来源于网络

1、认识三原色

相信大家都在各种书籍当中了解过三原色，但是我还是想在这里重新梳理一遍，因为这是色彩的基础，就像房子需要打好地基，有了好的基础才能向下延伸。

我们以蓝色为例

当你的眼睛长时间盯住这个蓝色的球，蓝球周围是否会有黄色的残影出现呢？

为什么会出现这种现象？因为当人的视觉受到一定刺激后，会产生平衡这种颜色的反应，以这种颜色补色的形式出现。

下面我们来理解一下什么是补色：

还是以蓝色为例：从图中可以看到当蓝色与黄色相结合时形成了白色，也就是说明蓝色和黄色可以完全相互吸收，达到平衡，所以我们黄色是蓝色的补色。

同时蓝色还有两个支持色，分别为品红色和青色，假如想让一张蓝天的照片变的更加干净透亮，就可以在ps色彩平衡当中增加青色和品红色减少黄色的干扰就可以了。同理，如果想让绿色更加翠绿，只需要增加青色和黄色减少品红色的干扰就可以了。

在设计中用补色点缀页面的方式随处可以见

2、如何让色彩达到平衡

相信很多设计师都经历过这种阶段，初学设计不懂如何配色，怎么办？

吸！！！

吸管在手天下我有

看别人的颜色用的好，吸过来稍加修改（加特技duang～～～）变成了自己的，但是完成的作品总是在感觉上差那么一丢丢，当别人问你问什么这样设计时，你就不知道怎么回答了。

出现这种状况的原因，是因为你还不懂得如何做到色彩平衡

色温平衡

以图标为例，当我们在进行设计的时候，要时刻注意色温是否平衡

实例：

我们吸取美团外卖中“美食”和“甜点”的色值后发现，红色为暖色调的红色，黄色也是暖色调的黄色，而且两种颜色的明度值相同。所以这是一个好的配色。在设计时应避免冷暖的冲突，做到暖+暖或暖+微冷、不要色温骤降，除非你想刻意强调一方。也要看颜色的搭配是否和项目的体验相匹配。

小结：要养成吸色的习惯，多去看看别人优秀的点，查看配色上的规律（主要看明度和饱和度的变化）。

补色平衡

在色环中180度左右的为补色

补色能够表达出强烈的情感诉求，在我们平时的设计中也通常会在大的基础色调确定后用补色来作为项目的点睛之笔，任何产品都可以用补色平衡的方法，在上图中，将主体确定为蓝色，搭配补色黄色作为点缀，使状态页的层次更加的饱满。

3、配色小技巧

在这里给大家推荐一个配色的小技巧，简单粗暴，

1、“明度配色法”也可以叫做“饱和度配色法”

在确定主色红色后，保持明度和饱和度不变，将色调依次从暖到冷再到暖过渡，这样就可以得到一组和谐的配色，但是注意绿色，为什么要将绿色的明度降到80？因为绿色简直是自带明度buff，如果将绿色的明度也调成100的话画面就会非常刺眼，因此为了整个画面的和谐，适当的要降低明度，所有在进行颜色搭配的时候也要注意不要刻板的去遵循某些规律，

没有不好的颜色，只有不好的搭配。

2、十字配色法

我们可以将色盘分成4个区域，在进行色彩搭配时取色点都放在同一区域，这样也可以做到配色的和谐。

关注公众号查看更多有意思的教程