每天十分钟，系统学习设计，成为设计师。终生学习，受益终生。这里是【知更常青藤】，欢迎你的到来，这是我和你一起学习设计的第八天。如果你不想丢失这个体系，可以关注我，转发本文。

由于篇幅所限，我们将6大配色方法论分为了上中下三册。

献给学习设计的你

长久以来，我们已经走完了色彩体系的大部分课程。这些体系是未来深入学习色彩的基础，让我们回顾这7天的学习成果，并依据这些成果展开对色彩综合学习。

当你还是一个没有任何设计基础的新手的时候，我们从物理的角度分析了色彩的本质，明白了物体并没有色彩，也明白了色彩是电磁波与视觉系统的综合反映。让你对色彩有了最基本的认识。

随后，我们通过案例展示了光影的关系。光与阴影对UI的交互起着至关重要的作用，利用光影提供易用的交互模式，利用光影提供利于阅读的用户体验。也让你明白了仅仅使用灰度就可以表现整个客观世界。

然后是色彩的特性，你明白了什么是固有色、物体色、光源色、环境色。尽管这些特性的理解不会在你设计的时候提供有效的帮助，但是却能够帮助你深刻理解色彩的本质，帮助你构建优秀的调色板。

我们还学习了色彩的属性：色相、饱和度、明度。这三个属性正是我们后来学习色彩的基础概念，它们时刻被提起，并时刻被应用。你应当明白如何利用色彩的三个属性去定义和描述色彩，每当你看见色彩的时候，你都能够利用色相、饱和度、明度这三个属性去思考和观察。

最终，我们利用前面的基础概念过渡到了色轮。从此以后，色轮将是你一直使用的色彩工具，如果没有色轮你将很难进行初级的配色。

这一章将是6种配色方法的学习，我们使用色轮来展现这种配色过程。因此，如果你还不明白色彩的三属性以及基础色彩理论，我想你值得看一看我的往期文章，去学习这些基础理论，这是你看懂本章的基础。

单色配色

尽管我们使用色轮来进行配色，但是你需要理解色轮并非必须是圆形，如果你提前使用了Photoshop（我们不推荐先学习软件），那么你需要明白这些软件的取色器就是一个色轮，尽管它是矩形的。

当你进行设计的时候，配色是摆在你面前的首要问题。如果你是凭感觉在色轮中选择色彩，那么你的作品至少失败了一半。

在所有配色的方法论当中，单色配色是最易上手的。如果一个设计中出现过多的鲜艳色彩，人的视觉系统会感到视觉疲劳，这种状态不应当持续很久，这是不和谐的配色方法。

但是当你盯着蓝色大海或者绿色森林看上一天也不会有这种感觉。你的视觉系统会感到异常放松。这并不意味着你只需要使用色相一致的纯色单色，事实上，森林的绿色是丰富多彩的，尽管这些绿色都是同样的色相，森林的细节里有许多不同的明度和饱和度。自然的“配色”总是让人感到和谐和震撼，如果你实在没有配色灵感，尝试从身边的大自然寻找调色板，你会有意外收获。

单色配色的关键就在于：选择一个合适的色相，在此基础上，进行饱和度和明度的调整，并且这种色调最好不要过多。当超过7到8种单色之后，你就会很难分辨这些色彩之间的差异，因此，3-4个色彩是你最好的选择。

我们以红色和蓝紫色的饱和版本为例，配置了单色的变化例子，请看下图：

仅仅变化饱和度的单色渐变

在这幅图中，我们给出了饱和度版本的单色配色，但是单色仅仅通过饱和度的变化是不够的，你还记得我们说过明度最重要吗？当你使用单色配色的时候，如果丢失了明度的变化，那么你的场景将会失去深度，你要明白，世界的轮廓是通过明度来标识的，因此，当使用单色的配色时，你需要更宽广的明度，否则会使你的设计显得单调乏味，并且缺乏纵深。

我们再次修改这个配色，这次加大他们之间的明度差别：

饱和度与明度变化的单色

我们给出了一个利用单色配色的完美案例，这是一个蓝绿色的魔方，作者利用了单色配色方法。它的明度跨度非常显眼，在这个案例中，为了突出魔方的立体效果，明度的变化是考虑的首要因素。由于采用了单色的配色方案，因此，我相信新手会很容易获得这种配色能力。不过，你最好掌握色彩的本质和阴影的正确使用，这样才能够做到足够优秀。你放心，单色配色已经足够单纯，相信你可以掌握。

单色的魔方

我们利用Photoshop的取色器提取了这个作品的色域，将其展示在作品下方，并且将调色板中的每一个色彩的HSV(Hue=色相；Saturation=饱和度；Value=明度)信息放到表格中。你会发现最左面的蓝色明度非常低，很暗淡，但是饱和度却很高，作品正是以这个低明度高饱和的色彩作为基本色进行调整的。我们发现这个调色板的明度在逐渐提高，饱和度也随着明度的变化逐渐降低，但是调色板的第二个和第三个色彩的饱和度却升高了，这是作品有意为之的。不过我们想表明的一个观点是：单色配色，明度变化尽量保持较宽的范围。

小贴士：你会发现我们利用取色器来归纳某些作品的调色板，我们希望你也这样做，这会让你的色彩原理基础能力提升很快。在这个过程中你会接触大量作品，你要分辨哪些作品好，哪些是糟糕的设计。对于优秀的作品，你要能够找出它们之间的共同点。我们的体系会一直带着你做这种分析。帮助你更快地提升自己的欣赏和设计能力。很快你就会发现，自己会制作调色板了。

下图是一个应用软件的UI界面，这个作品同样使用了单色配色方法。请看下图：

APP UI

在这个案例中，我们提取了3种色彩。这些色彩都是蓝紫色的不同明度版本，它们都具有不高的饱和度，并且明度逐渐增强。值得注意的是，这个界面的字体同样是蓝紫色的高明度版本，有些字体的色彩几乎接近白色，但是依然可以感受到蓝紫色的成分。

小贴士：从视觉上看，由于界面背景使用了大量单色体系，而字体的比例在这个UI种并不高，在这种面积对比情况下，字体容易在视觉上受到蓝紫色的影响，从而感觉有蓝紫色的成分。当然，事实是：作者的确使用了蓝紫色的字体，只不过明度非常高。

单色配色很容易构建和谐。对于新手，我们推荐你先使用单色配色，培养自己的经验，进而掌握更多的配色方法。正如我一直所说，你对色彩的理解建立在色彩原理的基础之上，如果你不具备这些色彩原理的知识，我想你应当填补你的知识盲区，而不是死记硬背这些配色方案或者去网上收集配色板。

接下来我给你几个单色配色的案例，你可以慢慢观察并且学习提取这些色彩，然后组合成自己的调色板，切记：配色方案不可随意复制，你应当根据产品面向的用户以及产品本身的特点来构建基础色彩，或者从自然界寻找配色方案，但绝不是复制别人的调色板。

灰度的网站

这个网站的主图采用了蓝绿色的灰度配色，整个图片保持了较高的明度和很低的饱和度。实际上它的色相十分接近灰色，这种色彩给网站一种轻盈的感觉，使得网站看起来不那么头重脚轻。

网站还有大量的留白。这种极简的设计风格在近几年非常流行，不过受限于扁平化设计的弊端，设计师们正在寻找一种更加饱满同时兼具扁平化简洁优点的设计：渐变色就是其中一种。请看下图：

渐变设计

这个网站的顶部设计采用了渐变风格，尽管如此，作者也只采用了青色和紫色的渐变。过多的渐变色彩会产生许多设计噪点，我们甚至可以采用单色的不同明度或者饱和度的渐变版本来构建丰富的视觉设计。这种设计在今年（2018）正在变得流行。

青色的不同明度和饱和度的渐变版本

对单色配色的讲解到此为止，我们为你总结了单色配色的知识点：

选择一个基础色
在基础色的基础上，进行饱和度和明度的变化，明度的范围可以适当放宽，以获得深度感
可以利用单色的不同饱和度和明度来进行渐变设计，这可以使设计更有视觉魅力

相似色

色轮上3至5个相邻色彩的组合形成相似色。

邻近色

我们还可以利用相邻的4个色彩的组合来创建邻近色。当超过5种相邻的色彩组合，临近色系两边的色彩之间的色相差距过大，这会导致主题的表达产生不和谐的感觉。

邻近色

你可以直接选择一组邻近色，通常这是有效的，如上述两组邻近色的选择。但是在色轮上，为邻近色选择一种基本的色彩，只是该调色板走向精细化的一个开始。

与单色配色一样，你要为你选择的基本色彩进行进一步地变化。你可以对一个色彩进行深、浅、明、暗四个调子的调整，请保证总是能够对一个色彩的明度和饱和进行变化和调整。正如上述的4个邻近色组合，尽管你选择了相邻的蓝色、蓝紫色、紫色、紫红色，但是这只是你的开端，你可以进一步地对每一个色彩进行明度和饱和度的调整，你不必担心这会违反邻近色的定义。

如果你对上述的紫色进行变化，可能会有三个版本的紫色，色彩更深、明度更亮、二者兼备。同理其他三个基本色彩。为此，我给出了一个案例，这个案例不是高清的，但是它却能够说明问题。

邻近色的变化和应用

你看到上面的图形了吗？是的，请先观察右上方的色轮，我们选择了蓝紫色、蓝色、蓝绿色三个相邻的基本色彩，在每个基本色彩的基础上，我们调整了各自的明度和饱和度，尤其是明度的变化非常大，请记住：明度最重要。

通过这种配色方式，我们得到了3组一共9种丰富的色彩，请你放心，在经过明度和饱和度的变化之后，这些色彩的色相并不明显，不会如补色那样对立和冲突，相反，其中有两种基本色彩是复色，通常复色的影响是最小的。

我们利用这9种色彩，绘制了色轮下方的抽象画。在这幅画中，你能够感受到空间感，这是由明度的差异化导致的，同时一些高饱和的色相使得画面的视觉效果变得丰富。

这些所有的色彩并不会有冲突的感觉。它们都是邻近色组成的，邻近色的定义使得各自都包含有两边的成分，因此，容易形成和谐一致的观感。

尽管邻近色的配置通常是安全的，但是你还是要注意，位于邻近色最两端的色彩依然相隔遥远，如上图的蓝紫色和蓝绿色，有些邻近色的两端相隔更加遥远，这种情况下，二者会产生一些如混色和互补色的效果。这是你需要注意的，当你需要这种效果的时候，你可以组合邻近色最两端的色彩。这种合理的差异化设计，使得邻近色不仅可以应对肯定和支持等和谐主题，也可以应对需要产生冲突和强对比的主题场景。

总结

如你所见，我们介绍了单色配色和邻近色配色的原理和方法论。我们希望你能够从根本上理解这种理论，这使得你的设计生涯种有更多的可能。

正如文中所言，你不应当死记硬背这些配色方案，而应当吸取其中的配色思路和原理。

由于篇幅所限，我们将6大配色方法论分为了上中下三册，期待你的下一次光临。

下章内容

「一文掌获配色能力」一劳永逸的配色方案，6大配色系统大放送(中)

如果文章对你有价值，让你得到了提升，请你相信作者，并且关注他，转发文章让更多的人看到有质量的内容。或者用【打赏】喂食作者，让他继续为你奋斗。如果你有疑问或建议，请留言告诉我。

[一文获得配色能力]一劳永逸的配色方案，6大配色系统大放送(上)

献给学习设计的你

单色配色

相似色

总结

下章内容

你可能感兴趣的:([一文获得配色能力]一劳永逸的配色方案，6大配色系统大放送(上))