第13章　解读设计中的层次

因为经常拍照的缘故，我经常会无意中发现摄影上的一些观察和技巧其实也可以运用在设计当中，并让你的设计作品更加饱满和有层次感，那么如何让自己的作品富有层次？今天给大家分享几个技能。

需要说明的是，增加层次的技巧其实说白了主要就是运用对比或呼应的手法，这一章我就先给大家讲一讲对比在设计当中的运用，并现场手把手演示到底该如何解锁这些技能！

不过需要说明的是，对比其实有很多种，比如动静对比、明暗对比、大小对比、色彩对比、虚实对比、远近对比、繁简对比等。

13.1　动静对比

先来以一张照片举例，比如左下这张照橱窗的照片，这样看原本是安安静静的对不对？这样其实也不是不好看，但总感觉缺少点什么。

后来，我给它加了一个人影并动感模糊了一下，如下图所示，感觉是不是立马变了？画面里面灵动起来了，因为这个人物的动与背景橱窗的静形成了对比，反而使得橱窗里的商品视觉上更加突出了，画面层次感也就出来了。

大家可以再对比看看：

而像我这种处理方法其实就运用到了动静对比和远近对比，比如人物既充当了动态的元素，也充当了近景，而橱窗既充当了静态的元素，也充当了远景（当然了，如果是更加广阔的空间，比如是在展览馆里，也许这种对比效果会更加明显一些）。

这种手法在Banner设计、陈列设计、摄影、影视等中都经常会用到。

比如下图，就运用到了很多种对比的手法：

13.2　明暗对比

有时候总感觉画面太过于平了太空了怎么办？其实只需要利用明暗对比，就可以解决这个问题，如下图所示。

没有明暗对比的时候，画面是比较平的，如下图所示。

而通过将画面中间加亮，四周压暗之后，画面立马聚焦了，层次感也出来了，如下图所示。

将四周压暗，画面就聚焦在中心了，是不是立马感觉空间层次感出来了？上图就运用到了动静对比、明暗对比、远近对比等手法。

13.3　大小对比

同样是拿这个粉色的Banner图做示例，假设画面中所有的元素都是一样大小比例的话，整个画面就会没有重点，也就没有层次，如下图所示。

上图简直乱糟糟对不对？但是有了大小对比之后呢？画面立马层次清晰了，如下图所示。

在电商设计中这种大小对比的玩法是非常普遍的，因为我们既要氛围渲染，也要重点突出，那么主角就该只有一个，让主角最大最清晰最亮眼就是最常用的突出它的方式，其他配角都要比它弱才好，我们接着往下看其他对比方式。

13.4　色彩对比

说到色彩对比，大家应该都会想到对比色吧（假设选定一个颜色为基准色，那么在24色相环上与这个基准色相距120度到150度之间的颜色就与这个基准色互为对比色），如下图所示。

那么再次以我们前面做的这个玫粉色Banner为例，玫粉色就是在玫红色里面添加了白色的颜色，它们都属于红色系的颜色，所以，我们可以在蓝色系和绿色系里选择一种对比色，看在这个画面中加入色彩对比后会有什么不同的感受吧。

因为一个Banner画面是由背景、文案、产品（模特）、点缀元素组成的，所以我在这里分别改变它们的颜色为对比色给大家看看会有什么不同的感受。

假设将某一个点缀元素变为粉蓝色，这样一看是不是不太合适？视觉焦点全都跑到点缀元素身上去了。

假设将背景变为粉蓝色，这样看也不是不可以但总感觉有点生硬对不对？因为背景的颜色跟产品以及点缀元素毫无关联，但是偏偏它又是画面里占比比较大的主色，所以也不太合适。

那么我们协调一下看看呢？比如说背景色换为了粉蓝色，同时把前景的点缀元素做一些颜色修改，这样一来，整个画面就变得协调多了是不是？

但是跟原图对比的话，其实还是要看需求方想要重点体现什么，这两种配色其实都可以，但是明显会感觉画面里出现对比色之后整体画面就活跃了许多，看起来可能就是整体氛围感强过产品信息了，而且如果设计师把握不好的话会让整体显得凌乱，而下图的同色系颜色整体画面就会更安静一些，产品信息也更突出一些，并且也更不容易出错，是比较保险和耐看的选择方向。

所以色彩对比的运用确实可以让画面更有层次和热闹氛围，但是对于基础不太好的设计师来说可能难度就会大一些，同时也要明白你用色彩对比手法的目的是什么，是突出产品呢？还是突出氛围呢？想清楚这个问题才好做出合适的配色和设计。

13.5　虚实对比

依旧是以我们这个玫粉色Banner为例，其实我这里就运用到了虚实对比的手法，目的就是让画面有层次，让主体突出，而如果没有这些虚实对比会怎么样呢？

我们对比来看看，下图是所有元素都是实的情况，整体的重点就有点不明显了对不对，甚至那颗大棒棒糖还抢了香水的风头。

而有虚实对比之后的效果呢？明显画面层次就出来了，如下图所示。

所以这里也有一个技巧可以传授给大家，假设我们不小心让点缀元素过大了，那么我们其实可以通过虚化它来达到弱化它的目的，那些不重要的元素我们都可以通过虚化的方式让它弱化掉。

13.6　远近对比

所谓远近对比，其实就是通过虚实对比和大小对比来体现的，因为根据透视原理，近则大，远则小，近到一定距离物体会变虚，远到一定距离物体也会变虚，所以我们会看到这个粉色Banner里分别有近景、中景、远景几个层，香水作为中景是完全清晰的，而远景的小点缀物和近景的大点缀物分别都被我虚化了，从而也就营造出了画面层次感。

这里还要说明的是，其实所谓近和远其实都是相对的，比如中间的香水相对于我上面标出的近景远景来说是中景，但是相对于FASHION来说则是前景，而FASHION是中景，背景图层是远景，大家只要记住任何对比其实都是相对的就好了。

13.7　繁简对比

所谓繁简对比，其实分为两个方面，一方面是主体周围所在环境和外面环境比有繁简之分，另一方面是主体自己跟外界比有繁简之分。

我依旧拿这个玫粉色Banner举例，说到主体周围所在环境和外面环境比有繁简之分，那么可以看我不断地去掉点缀元素后会有什么感觉变化。

原图：

去掉部分元素后：

继续去掉部分元素后：

将所有点缀元素去掉后：

所以你可以理解为，简就是多留白，画面会更加透气，但是也会让人感觉到高冷或疏远，不敢靠近，常用于大牌产品或性冷淡文艺风里面，而繁就是复杂热闹，越繁越热闹画面氛围越浓烈，越让人感觉可以靠近，很多低价促销风格的设计都是比较繁杂的，但是繁也不意味着都低端，主要在于一个度的问题，主要看你如何去控制这个度了，高手也可以把繁杂的东西做得很高级。

而当我将这个香水放置在背景比较复杂的画面上的时候，你会发现，这张图其实差不多没法看了，也找不到重点，原因就是背景相对于香水来说太过于繁杂了，如下图所示。

可是，当我们将背景虚化后，通过虚实对比，我们将原本繁杂的画面变为了简洁的画面，主体终于又突显出来了。

所以其实很多手法和原理都是相通的，基础牢固了，思维开阔了自然就有方法去补救，并且任意切换这些手法和原理从而达到让你的画面有层次的目的。