色彩设计三大法则的运用和实践案例分析,强烈推荐~梁景红分享_【设计夹】

色彩专家、web视觉设计专家、设计教学作家-梁景红，做客设计夹，为大家分享关于设计色彩法则的运用及实战分析，热腾腾的图文版本，干货满满，建议大家认真学习下...

在这里就出现一个问题，在探讨色彩的时候，完全不能抛开自然界，更不可能抛开物理学、光学，但是有些人认为这些对现在的创作没什么帮助，实际上基础知识还是很重要的，我们更应该从应用的角度去思考这些才更有用，下面我们开始第一个话题：色彩是建构画面的基础。▨色彩是建构画面的基础

大家可以看下，上面的三张图，这些都是来自iPad的界面，看下这里面哪有颜色呢？

我们可以看到，界面上的背景、文字、图片、图标都是颜色构成的；再看下第二张图，它这里面涉及到空间上，天花板、灯光、地板、标志灯都是通过颜色组够的。

你比如说，一本书的封面，封面的底图、文字都是颜色，报纸上的文字也是颜色，黑白也是颜色，这样我们就发现，所有的地方，我们视觉所触及到的一切都是通过颜色组成的，因为颜色本身就是光通过光打到物体上然后折射到人眼中所看到的，只要眼睛正常就能看到颜色，生活中处处都是物体。

当这么思维的时候，就会发现文字、色彩、造型等是并列关系的，但是从研究色彩的角度，画面中的一切都是颜色，所有的一切都是由颜色组成的，包括文字、图片、造型等等；如果你是一个设计师，你会意识到一个重要问题：如果色彩存在问题的话，很多方面都不能协调好。因为字体、造型等都脱离不了色彩；反过来，当设计师色彩比较好时，整体的控制力会比较强。

因此，不管你是产品经理、设计师还是其他职业，只要是依靠视觉创作的人，都离不开色彩的学习，色彩建构了整个画面，色彩作为建构的基础是非常重要的。▨色彩设计的过程

很多人都设计过作品，本人认为所有的作品创作过程都是色彩创作的过程，我们看下常规的过程是什么样的：

通常，我们进行色彩设计时都是从确定主色开始的，上图很清晰的说明，我们通过主色定义整个作品创作的风格、基调，把情感关系确定下来，之后会进行搭配色的选择，通常大家说到的配色就是这两步。

总而言之，选出的颜色再和造型、信息结合的过程中，会面临很多的问题，不是有一个好的色彩组合就能得到一个好的色彩设计，它们是不能划等号的。然后和外界交流、信息调整以后，会产生色彩的更新、调整。

那么很难讲好的配色就能得到好的作品。要看整个的色彩设计过程，它有两个关键的地方：确定主色、确定搭配，但是最重要的是在进行造型与信息等结合中会有很多关于传播信息等概念的，如引流等色彩的安排，但是这和配色是没有关系的。

比如说，上右图单纯从色彩角度上看很漂亮，但是从设计结果上看感觉不是很自然，因为模特身上的绿色面积比较小，三角形射向模特时，红色会产生干扰，造成重心不突出，而原设计（左图），绿色指向绿色就要好很多。

很显然，色彩搭配好不等于设计好。在色彩设计过程中，色彩与造型结合、与信息结合也是至关重要；

接下来进入主题，探讨色彩设计的三大法则，首先先看一下平衡法则：

如上图，平衡法则探讨的是我们刚才看到的色彩设计过程的第一步和第二步，也就是说，它探讨的是：如何进行选色的？它会给出一个方便的方案，帮助大家思考：如果有了一个主色，怎么进行配色呢？

可以参考平衡法则：

1、互补色的平衡—侧重协调视觉刺激上的平衡；

2、冷暖色平衡—侧重协调色彩情感上的平衡；

3、深浅色的平衡—侧重协调色彩层次方面的平衡；

4、有彩色与无彩色的平衡—综合考虑画面稳定性的平衡；

5、花色与纯色的平衡—综合考虑色彩群组之间的平衡；

6、色彩面积大小的平衡—综合考虑画面排版方面的平衡；

这是平衡法则的6种情况，其中包含了5对平衡色，那么为什么要平衡色的选择呢？

大家看下上图，这是非常强烈的红色，盯着看一会儿，感受一下会有什么样的心理反应或者是生理反应？

其实色彩本身会影响我们很多，生理上对色彩的反应是非常强烈的，在生活中我们无时不刻都在受到色彩的冲击。

上图盯的时间长了，会紧张、焦虑，甚至眨眼时会出现绿色，这种返绿的现象是视觉残影现象。

也就是说，你的生理上已经出现了不舒服，自然而然的内在会给出反差的色彩去平衡这种视觉刺激。

既然，生理上对这种色彩刺激存在反应，渴望得到平衡的感受，如果只是单一色彩刺激，会出现不适感，商业设计追求舒适，很少有特别刺激的主题色彩设计。

大多数的主题，还是希望给人以和谐的审美观，在这种和谐的审美观里就必须要有色彩的平衡感。

既然知道这种主题，就要主动的去用这种平衡的色彩关系，也就是刚才提到的5对平衡色。

平衡的对色也不是凭空产生的，而是从大量的交流、大量的作品中归纳总结出的规律。比如说冷暖、互补同时出现在画面中，能够达到生理、心理、视觉等多方面的平衡。

上一张是一张摄影作品，上面用到了平衡对色中的有彩色和无彩色的平衡。

基础知识，黑白灰是无彩色。那么，用到平衡之后，花朵的红色反应出女性的高雅气质，女性的气质又通过红色娇嫩的玫瑰花有了某种韵味，这样作品就很有特点，并且信息传播很到位。再看后面小图，只有黑色的图片让人感觉很不满足，信息变得很无聊了，整个作品显得很无趣。

色彩之间通过对比、对抗、纠缠来传递出其优势，正因为两种颜色的相对，才能让色彩的优势保留、劣势隐藏。

同理，如果画面都是红色，就不会感觉红色好看了，正是因为到处都是无彩色，红色的出现才显得更漂亮，更吸引人。

上图用到了互补色平衡，左边绿色海报中，红色用到的多一点，就显得主题特别鲜明，颜色比例和谐很多；右侧红色海报和左侧海报主题是一样的，但是其绿色面积比较少，目标不是很突出，形象上就差很多。

所以从传播信息或者审美的角度上来讲，都需要平衡的抉择。

如上图中，所有的作品都离不开平衡的对色，相互的映衬，才能显现出每个颜色的优势和美感。作品中有时不只一对平衡对色，而是有大量的平衡关系，只是说在抉择颜色时，从相应的角度去选择配色。

在一个作品中有多种平衡对色关系，通常会有一个主平衡关系，如上图主平衡关系是冷暖平衡，细微处会发现丰富的深浅平衡，深蓝浅蓝、深红浅红等深浅平衡，另外天空的这种留白、周边的留白就用到了有彩色和无彩色平衡关系，使得作品的信息脱颖而出。

所以一个作品中，平衡法则应该用非常广泛。大家衣食住行中，色彩的应用包含了大量的平衡对色的应用。

接下来，我们说的就是聚焦法则了，聚焦法则他解决的问题就是我刚才讨论到色彩设计的过程里面的，第二步第三步的状况了，还记得第三步是什么么，当你选择这种颜色搭配后，要结合信息、造型来进行调整，这里面就涉及到一个问题，就是如何进行设计需求的表达。

如何引导阅读? 比如画面上的信息多了，浏览者一怎么样的步调进行，都需要通过色彩来给与引导。我们拿自然界的照片的看下，比如我们看左上角的这张图，这里面有大量的荷花叶，我们先看哪一部分好呢？这就比如我们使用一款APP,或者任何一件作品。假如他的画面信息多的不得了，浏览者也不知道先看哪里比较好，但是人们会有一个习惯就是找到最好看的一个去观看，或者寻找最大的最漂亮的荷花去观看。

说白了，就是视觉这个事情我们自然的进行聚焦，通过自我找寻画面的焦点。我们再看左下角的那张图，对于这张图我们就不会困惑了吧，每个人的视觉都会聚焦到这个荷花上，这种感觉很直接，为什么呢？因为在这个画面中，他就是主角。我们自然聚焦的过程是通过什么来完成的呢？那就是通过颜色。同样的道理，假设你不懂这个聚焦法则的话，你就会变成右侧的摄影作品了。所以聚焦法则很重要，在我们进行创作的时候。

反之呢，说明它是一个非常糟糕的作品，那就说名，它在整体的色彩安排上是有很大问题的。其实啊，如果你们真的就是色彩学的好的话，不管你们是从事什么学科，都有很大的帮助。因为，就像我开始说的，建构视觉画面的全部，视觉上的任何元素的事情，都可以通过色彩来解读它的对或错。

以前就有人问过我，为什么国外的英文网站设计很漂亮，为什么改成中文的网站就不好看了呢？其实，通过色彩来讲，就很容易解释了，以为英文的字母笔画比较少，形成的色块比较小，而中文的笔画比较多，色块比较大，颜色比较厚重，导致整体的色彩比例跟英文完全不同。依次的话，怎么可能复制呢，因为色彩的比例就存在问题，是不可能原模原样的复制过来的，所以通过色彩来解决问题，是解决所有问题时毫不夸张的。

接下来，我们来看下作品：

所有作品都有共性，左边的聚焦就在红唇之上，整体的信息就传达出来了，非常清晰，右边的聚焦在面包上，那么他通过聚焦，使得作品很有个性，并且在信息传达上，可以通过信息聚焦来体现，那么这种聚焦呢，很大程度上是通过色彩来完成。当然，也有人说，别的东西也可以的呀，看下图改的图效果

比如把红唇改变一下，他的造型很夸张，按理说会聚焦在红唇上，但是你会发现，他没有颜色留住我们的视线，视觉会往上移动，会移动到文字部分或者左上角的logo上，所以整体的画面在焦点上就弱化了好多。也就说，根本在红唇上停不住，也就说他的色彩聚焦设计产生了问题。

而我们，刚才讨论到的平衡法则，这个时候就变得非常有用了。我们发现，平衡法则的两个颜色法官在一起非常容易产生聚焦，比如，刚才我们看到，这张图涉及到的单色系花色，和纯黑的这个颜色进行平衡，这张图有张黑猫，非常容易就聚焦在主角里。也就是说，当我们选择平衡对色的时候，我们的聚焦就非常容易制造。因此，平衡法则的另一个应用是针对聚焦法则而言的，非常好的提供了聚焦的帮助。

我们再来看一个案例，这个作品展示了他是个纯黑白的，缺乏平衡色，他现在只有少量的深浅平衡，但是我们发现找不到这个信息的重点是什么，到底要表达什么不知道，看到的文字可能比较突出，但是没有信息支撑这段文字，就让我们感觉非常不好，觉得这个作品无头无尾的是吧？

假设，我们把它填上颜色，给他一个聚焦的色彩关系，用到了有彩色和无彩色的平衡呢，我们绘发现我们的视线回一下聚焦到眼镜上，一下就知道了这是一个卖眼镜的主题海报，是吧，然后呢，我们会发现，看到眼镜的特别美的感受呢，会注意到前面的文字是标志，原来陈述的使我们家的眼镜，这样信息一下就传达出了，这样可以看出，颜色聚焦的价值在于可以更好的帮助信息的传达。

那么，谈到这里呢，我们会涉及到一个问题了，我们的焦点是移动的，比如我们看到的这张图片中，我们先聚焦的眼镜位置，然后移动到标志的位置，然后阅读到画面的全部信息。

没错，聚焦法则研究的是如何引导人们的视线，如何聚焦，如何安排画面的重点等等，那么通过聚焦法则，我总结两种聚焦的规律：逐层聚焦、顺序聚焦，逐层聚焦是从画面的外部逐渐的向内部渗透的过程，它表明信息的层级问题，先从大的信息层，到小的信息层。如果你想表达信息层次的时候，比如界面的信息层，分类设计、导航设计等，在这过程中就用到了逐层聚焦的概念。另外一种聚焦，叫顺序聚焦，通常以信息块的形式展现出来，人们的视线从主聚焦到次聚焦移动的过程。这两种聚焦关系，包含了所有的视觉设计。

我们看下这组作品，如上图，一看就知道左边的作品有很大的问题，问题在于聚焦非常混乱，如何混乱了呢？我们看下，顶部的三个广告，颜色非常混乱，红色明显焦点感较强，导致后面的这两种颜色构不成平级的关系。这就相当于信息层不统一，爱美层信息突出靠前，其他两个的靠后，这一方面错了，下面的图片本身聚焦要强于文字聚焦，对于图片来说就相当于花色，文字去相当于纯色，由于平衡关系造成强聚焦效果，导致视觉混乱，没办法进行有效阅读，不是从上到下的阅读关系。这无疑是色彩使用存在极大问题，我们看下右边的图，也是一层一层的信息展示，但是为什么感觉舒服呢，因为有着从上到下的颜色递进关系，同时，图标跟文字在一块里面，所以不会造型视觉误解和混乱，这样就比较清晰。它是从属在一个素材关系中，我们从上到下自然观看，那说明色彩排布是符合聚焦规律的，也恰当的传达了信息的需求。

那么，我们在说一个例子，如上图，可以看到流量加油的APP界面，左边的作品有很大问题，其实就是一个很简单的事情，但这里就产生一个问题，直接会聚焦在夜间一次性流量包这个条上，但是这个和上面的属于同一层级关系，没道理，一下聚焦在这儿，应该从上往下聚焦，而右边的图就没有这样的问题，它是从上到小的聚焦关系，没有错乱的视觉问题。

我们在拿来一张自然界的图片——荷花（上图）。这里有几种颜色呢？可能有人说这里有两种颜色，一种紫色，一种黄色，但实际上这里有无数种颜色，就是说，任何画面不是一两个颜色组成的，是有很多种颜色共同构成一个画面。真正在软件中打开，每个像素的颜色色值都不一样，但是同频法则研究的是色彩同组关系。

什么是色彩群组关系呢？简单来说一个作品（上如图），比如这个作品，也包含很多颜色，把它调一下，调成6色时候，造型差别很大，调成18色，和原图有点接近了，从色向的倾向性来开，作品包含，蓝色、绿色、深蓝色、灰色主要的，还有皮肤颜色，实际上，原图包含12000+中颜色，所以可见一个画面中包含很多种颜色，这就涉及到色彩同频法则研究的色彩群组问题，色彩层次的复杂和简单，及色彩群组该怎么管理、色彩之间的呼应问题。

我们再来看一个例子，如上图。看到这个作品，我们感觉到有蓝色、红色、绿色，实际上，这里的红色用到了三种，绿色用到两种，蓝色两种以上，这个画面有很多颜色，并不是只有两个颜色，在一个红色的里面的就存在群组关系，绿色同样也有，这样就形成了三色组合的一个完整作品。

这还只是单一色调的同频，那么同频法则研究的呢，如何建立同频，以及用同频做应用以及调整画面中的色彩层级关系。

我们看一张摄影为主的海报，如上图。在这里可以看到，这个图包含了橙色颜色的同频关系，还有绿色的同频关系，那么这两类颜色的组合使的主角产生了平衡感，以互补平衡为主的聚焦关系，可以看得出来这里带有大量的同频色彩。

同理再看一个作品，下图

这个作品，选取了蓝色的火烈鸟作为主角，蓝色的这只动物比较突出，现出来是主角，整个画面采用的冷暖色的平衡关系，聚焦在蓝色上面，对于红色部分呢，存在大量的同频颜色，使得丰富了画面的细节。同频色，不是为了产生聚焦的，是为了产生融合的，是为聚焦服务的，他不能突出，但是不可或缺，比如以上的界面的绿色，以绿色为主的，但是这里出现了很多种绿色，他们之间就构成了同频，使得画面非常的丰富。

光有聚焦，没有同频是不行的，那么在传递信息时也有存在问题，比如下面这个作品