色彩设计中焦点配色的应用

现在跟你们看看设计中焦点配色这个话题。焦点这个词对于设计师来说需要不会感觉陌生，但是这节课我们主要是从色彩的视角，来看看焦点在设计中的作用或者颜色焦点的重要性。首先我们要了解设计的目的就是借助视觉来传达信息，而视觉的体现方式是有一定规律性的，在这种众多的规律性当中，其中有一条就是借助色彩来推动，而焦点配色就是颜色设计中最有效的一个方法。

虽然无论是绘画、摄影还是我们的设计，都存在长期的焦点配色，只是我们经常没有非常去注意而已。比如莫奈的这幅《日出·印象》，我们来尝试预测一下焦点的设定和移动。

我想绝大多数人都必须是这样移动路线，也就是在大面积白色调和暗色调中先被强暖色的太阳所打动，然后是近景全白色的船，接着顺延到另一条船上，当然每个人就会有所不同。

包括也或许是这样从远景到近景的顺序。

也或许有的人是从近到远的观看顺序，但是无论你是哪一种，都不重要，为什么？

由于无论你的视野是如何移动的，都不会妨碍到我们最后焦点的归属。大家可以体验一下，当你看这幅画的之后，无论你先看哪后看哪，最终你的眼球都会被这个橙黄色的太阳所吸引，这就是色彩焦点的美丽。

我们再来看一个摄影作品，这个跟今天那幅画来比，焦点就变得清晰了，而且此处也不应该焦点的移动，很显著焦点就是这个人物。

然而这个焦点是如何借助色彩得到加强的呢？或许有的人会说如此明显的人物恐怕是焦点啊，但是你可以尝试把人物旁边的亮色光去掉看看，虽然人物相同是这个场景的焦点，但是一定没有今天这种十足，因为深色和背景的暖色形成了强烈的对比。

然而无论是绘画、摄影还是我们接下去会发现的设计，其中就会包括一种刻意的或则是有观念的色彩焦点的安排，而这些焦点的产生是如何实现的呢？难道就是通过颜色对比，因为有色调对比必然造成焦点，即使没有焦点我们也会尽力去寻求焦点。我们联想下经常的生活都会看到，无论是我们发现一幅画面，或者是置身于一个真实的环境中，我们就会不自觉地去寻求色彩最突显或者最显眼的东西，这就是成为人的一种本能，也就是自然而然地去寻求焦点。

以下我们来看一些设计作品，我们看这三个界面，不能说没有焦点，有，就是照片，准确地说需要是没有色彩焦点，所以我们接收到的就是照片加上信息排在一起，我们很难在短时间内区分出这些是重要信息哪些是次要信息。我们不清楚视线应该落在那里，因为没有突出的东西，这种不知所措会让看的人倍感不舒服，这就是没有焦点会导致的一种状况。

同样这三个界面，我们哪个都不变，只是在想提出的个别填充一个形状，这样才会让看的人可以借助色彩毫不犹豫地感得到焦点，这种交互才是人性化的交互，而这个简单的过程似乎就是颜色设计。

我们再来看一个非常简洁易懂的，比如目前这个，就是在一个红色背景上编排纯白的文字，可能借助字号和距离的安排我们也明白孰轻孰重，但是即使从色彩的视角来看还不够，因为没有产生让人迅速识别的焦点。

如果在想提出的地方，适当的填充一个形状，那么瞬间就有了焦点，而这个样式和背景色的对比越强，焦点就越显著。

我们看这个海报，当我们看见这个场景的之后首先注意到的是哪个？

首先注意的显然是上面的照片，其次会按照信息的层级大小去看主标题，然后是次要信息。这种没有设定颜色焦点的方式，虽然不太会妨碍信息的阅读，但我们不妨试试有颜色焦点的状况。

当本来就是场景中非常重要的标题信息和突显的英文被填充黑色但是，焦点就形成了而且受到增强。

这之后当我们再看这个作品，就可以在短时间内快速获取信息，如果想再次认识也可以继续阅读，这就是有焦点和没焦点以及焦点不突显的差别。

我们看这个banner，这里我们不说它的版式怎么样，我们就看颜色和焦点，这个场景有哪些问题呢？就是焦点设置错误，什么意思？

也就是你们看这个场景的之后，虽然还会先看月饼的照片，然后是标题到开启专场，但是你们看到没有，你的视野总会被旁边这个白色的花瓣吸引。

就是这种你不想看它，但是又不得不看的似乎，因为这个花瓣的色彩完全没必要发生在此处，因为它不是信息，为什么要充当焦点呢？这就是焦点错误。

我们把花瓣去掉试试，这样焦点就很清晰明确了。

目前我们了解了有焦点和没焦点的差距，那焦点的设定虽然只是有多种状况的。我们就拿这个网页来举例，版式部分保持不变，你想突出哪里就在那里设置焦点。我们来说说通过色彩把焦点安排在不同的地方，这个页面产生哪些样的效果。

包括我们可以把焦点设置在上半部分，也就是上方的品牌和导航区域。

也可以把焦点设置在主标题的文字信息上。

还可以设定在上面区域，形成色块。

其实也可以是自由式的焦点设置，强调你想提出的个别，这种状况下就有了焦点的移动。

通过之前的实例预测我们总结一下有焦点的好处：首先它满足了人的生理需求，其次满足了视觉传达的意愿，最后满足了审美的意愿。也就是说我们所要做的视觉设计是必须传达信息的，你得让受众看到你的信息才行，而要想有效的让人发现信息，焦点的设定就要满足上面三个需求，如果没有满足，一定程度上表明你的作品是失败的。实际人都是富有惰性的，也都不偏爱延迟，当他们发现所有的信息在它必须在的位置，不应该眼睛和头脑再去阅读，这之后就受到了一种观看和阅读的满足感。

说了这样多焦点的好处，下面我们就来说说如何借助配色产生以及加强焦点。首先我们要了解的就是焦点是借助对比实现的，而此处包含了色相对比产生焦点、冷暖对比形成焦点、深浅对比产生焦点、有彩色与无白色对比形成焦点、花色与条纹对比产生焦点、色彩面积对比产生焦点。

首先我们来看色相对比产生焦点，这里的色相对比一般是指互补色或对比色之间的对比，因为色相差异越大越容易造成焦点。比如这个海报就是白色和红色的互补色对比，当然还要注意的是，我们所列列出的这种对比并不是单独存在的，它们通常都是互相结合的，比如这个海报最明显的就是色相上的互补色对比，当然你也可以说是冷暖对比，同时也比如面积对比。

这个网页作品，蓝色与白色形成了色相上的对比，同时他们两者又与背景产生了有黑白与无白色的对比。

这个新年主题的banner，整体是大面积的暗灰色，这就让人物头顶的红色圣诞树作为了焦点，也就是色相对比中借助对比色产生焦点。

之后是冷暖色对比形成焦点，这个版面很简洁，就是文字编排加上背景，但是很显著，通过在提出的地方使用白色与背景的粉蓝色形成一种冷暖对比，让焦点一目了然。

这个同样也有白色与红色的冷暖对比强调焦点，让人一眼能够抓住重点。

这个相同只是借助冷暖对比产生焦点，只不过这个场景并不是单一焦点的方式，是多个焦点从大到小或从近到远的移动。

如果色相对比不够显著，那么通过单一颜色或近似色彩的厚薄对比也可以较好的产生焦点，同样纯度和明度差异越大越容易造成焦点。比如这个场景中的焦点面包与背景产生的就是深浅对比。

这个场景整体是白色的基调，但是杯子中的茶汤是比背景更亮一些的色调，所以它自然而然地就变成了场景的焦点，而且这个焦点只是符合这个版面的设计逻辑的。

这个页面的背景是偏深一些的粉蓝色，当然图片肯定是这个场景的第一焦点，但除此此外，这个场景中也有另外两个焦点，就是比背景偏暗一些的嘴唇，这就是运用深蓝色对比产生焦点。

焦点的作用或者怎么强调焦点都很高理解和操作，但是设定焦点背后的原理是哪个呢？就是我们之前讲过的色彩营销，因为设计的目的是借助视觉传达信息，而释放信息的目的是为了营销，所以答案也就很明了了。也就是怎样设置焦点或者让谁成为焦点，这背后的逻辑要根据营销的目的，换句其实焦点的设定一定要满足以上的意愿，假如更改了错误的焦点，就会适得其反，倒不如不设定焦点了，这个道理大家必定要知道。

我们接着往后看，下一个就是有彩色与无彩色对比形成焦点。比如我们看里面这个海报，图片整体是彩色的，只有雨伞的部分是白色，非常显眼的被塑造起来，当然就是第一焦点，其次就是黑色的标题性文字。因为白色与黑色很好的对比效果，所以类似这样方式的摄影作品大家也必定见过这些，就是整体是彩色，个别地方用白色的方式。

然而这个网站页面上的有彩色并不是单一颜色，但是与背景黄色的配色，整体上仍然是有黑色与无白色配色所造成的对比，从而形成焦点。

这个看似只是有黑白与无白色的对比，但是这个很巧妙，因为设计者并没有直接在主标题上填充有白色，而是在标题下方使用了一个有白色的色块，这只是一种变相突显焦点的形式。

接出来是白色与橘色对比形成焦点，这个算是很常用很通用的一种方式了，尤其是图片上编排文字的方式，如果照片原本的色调就非常丰富，那么文字色必然要使用单一的色彩才能确保很好的识别。

这个杂志封面的背景是由多种颜色所产生的绘画图形，而人物一身白色位于前面形成了第一焦点，其次是位于人物上的蓝色文字，可以说既是有彩色与无彩色的对比，又是有白色与黑色之间的对比。

这个海报上的照片仍然色彩并没有多纯，但是鉴于色彩非常分散，所以可想而知，在它上面编排文字难免会导致识别度很低的状况，所以设计师也很巧妙地使用了添加色块的方法，利用这些照片花色与线条简约的对比来突显焦点。

最终就是借助色彩面积大小造成焦点，这种面积的对比可以说是相当常用的，可以说大个别有颜色焦点的场景都是之前的那几种方式与面积对比的一个结合，但是并没有谁重要谁不重要一说，就包括这个海报上的蓝色花纹，无论你是把它的面积放大，还是把它换成和白色相同的色调，焦点的效果都没有今天的好。所以我们在准确设计搭配的之后千万不要有逼迫症，因为很多方式通常都是结合使用的。

这个只是面积对比形成的焦点，同时又有白色与黑色的冷暖对比。

这个页面也是，通过在大面积白色调中使用一个黑色块，快速产生对比，从而确认焦点。

以上我们主要讲解了借助配色产生焦点的一些方式，但似乎细心的朋友都会看到，这里面抑或有一些潜规则的，有的是和色彩有关，有的或许和色彩无关。比如说相同的颜色或同样大小的对象，具象的东西比抽象的东西容易产生焦点、人物比画面或风景容易产生焦点、图像比文字易于产生焦点、标题文字比内文容易产生焦点、暖色比深色容易产生焦点、强对比比弱对比容易产生焦点，最后我们就分别来看一下。

具象的事物比抽象的事物容易产生焦点，这个感觉没什么可说的，大家必须都能明显的觉得到，就包括这个海报，即使人脸的旁边有着密密麻麻的具象图像，我们的注意力仍然在人脸的个别。

人物要比画面更容易造成焦点，比如这个海报，同时存在两张照片，虽然上面的截图是一匹马不是人，但是道理是一样的，我们的视线总是想关注这个马的眼睛，而下方的海水我们也许也是一扫而过。

图片比文字更容易产生焦点，这个只是无需多说的一点，因为如果都是黑白的照片和文字，我们也会首先注意到照片，这是图片所具备的天然美丽。比如这个海报，假如我们把照片遮掉，那么红色的「魂」字毋庸置疑就是第一焦点，因为在一堆黄色文字中它简直太显眼了，但是加上人物图片的话，就没有多少人会去关注「魂」字了。

标题比内文更容易造成焦点，这是由于标题所具备的天然优势，也就是面积优势，比如我们看这个海报，其实它这里的标题使用与照片一样的红色并不是很突出，虽然日期和副标题使用了色相对比，也确实成为了焦点，但是针对主标题的妨碍并不是巨大，我们仍然不会忽视掉主标题，这就是面积原因所产生的，因为它足够大。

暖色比暗色更容易产生焦点，这个海报就是一个很高的表明，因为海报中两个照片大小比较，唯一的差别就是一个是深色一个是橘色，那么那个更吸引你呢？一定是暖色，如果你说你就是被冷色所打动那也没关系，但是你自己保留看法，我不接受指责。

最终就是强对比大于弱对比，比如我们看这个海报，其实本来背景色上有色相的对比，但是由于对比不够强，所以就让上方的蓝色作为了焦点，因为黑色与整体背景产生了强烈的深浅对比。

本期教程到此处就结束了，简单总结一下，首先我们借助一些实例表明了色彩焦点的重要性，也就是满足了人的三种需求：生理需求、视觉传达的意愿或者审美的需求。其次我们讲解了怎样产生或提出焦点，也就是借助一些颜色对比来推动。最后补充了一些焦点配色中存在的潜规则，也就是什么内容或方式具备产生焦点的天然优势。当然这一切的落脚点还要归到触觉传达以及色彩营销上。