双 11 刚过，双 12又来了

每年这个时候

作为一名设计师，真的很难...

老板压着做电商 banner

还有很多人指指戳戳让你改稿

好不容易按照别人的想法过稿

结果banner 的点击率还不高

其实，只需要稍微调整视觉重点

你的电商banner 就会变得变得更吸引人！

这次让平面设计实战营讲师@HE毛蛋

帮你解决banner 设计中的常见问题之：

「如何解决Banner画面空洞，提升视觉效果？」

本文主要包括以下 3 点

1. 画面不吸引人的 4 个常见问题

2. 必须突出重点的 3 个理由

3. 解决画面空洞的 4 大常见手法

下面为正文

相信不少刚接触banner设计的同学，你会经常遇见这样的问题：

做出来的 banner，整体的视觉重点不明显，画面空洞，看起来平平无奇，无法吸引人。

面对这些情况，要怎么才能做出点击率高的 banner 呢？你可以这样做：拆解banner的视觉层次，分析导致banner“平淡无奇”的原因或问题，再思考解决办法调整 banner 。流程如下：

下面，我会用案例来详细说明如何做：

01

为什么你的banner不够吸引人？

首先，我们来说说「画面不够吸引人点击」的问题，因为知道问题出在哪里，你才会有针对性的改改改。一般会有4个问题：1. 画面失去焦点；2. 画面留白过多，单调空洞又枯燥；3. 画面太挤，导致“脏乱差”；4. 细节无修饰，画面真会“平平无奇” 接下来，我用一些不同错误类型的banner举例，解析画面出现缺陷的真正原因。1. 画面失去焦点该banner的情况：目标主体与背景的对比不足，从而导致画面的焦点缺失，对于banner这种通常需要引导用户点击，吸引用户关注的内容，画面的焦点缺失则为致命伤。

该初稿中，售卖的产品主体模糊不清,识别度低。对于信息展示层级较为紊乱,较难将重点信息更快更方便的传递至用户视线中。并且画面整体重心不平衡，文本信息的编排中，行距，字重等细节对比太大，容易造成信息阅读的断层，导致阅读体验较差。

修改后的主体呈现简洁清晰,通过渐变色块调整画面重心与聚焦中心，这样便可使得主体在画面中的层级更高。文字信息的重新编排合理调整了不同层级之间的文字对比，让阅读体验更加良好。

2. 画面留白过多，单调空洞又枯燥 这种画面就属于大家都很常见的问题，除了主体素材和文字，其他一脸懵。导致画面留白过多，变得单调空洞且枯燥。

在这份初稿中，我们可以看到画面中的视觉元素过于单一。除了需要传递的文本信息与素材以外，画面其实就只有几块拼接的色块。对于整体画面而言，画面留白过多，视觉效果单一，非常容易导致观感枯燥。其中主标题字效与主题关联性弱，且整体的文本编排比较凌乱。这些都是导致这个banner单调枯燥的原因。

修改后,通过添加场景并借助场景细节弥补画面留白的单调。通过主题相关的元素修饰主体增强其在画面的对比,利用细节丰富的字效以及明显的色彩对比,以此突出画面的重点。

3. 画面太挤，导致“脏乱差”如果说刚刚的常见问题是画面太空，那么这个则刚好相反，用力过猛，整体画面太挤。最后容易导致画面“脏乱差”。

画面使用了大量的强对比高饱和色彩元素,并且充斥在画面的各个角落。在太过纷杂的画面中我们在阅读信息的过程中,视线很容易受到其他元素的干扰,导致阅读中断。而且纷杂的画面还会影响banner主体的展示，降低其视觉层级。

修改后的 banner 将信息布局合理地放置在各个划分好的区域中。色块与色块之间，还有低彩度的色彩作为降低强烈对比的手段。画面使用的元素简繁的比例进行了调整，有效的避免原有的“凌乱”视觉观感，为主体的突出扫清障碍。

4. 细节无修饰，画面“平平无奇”还有一种情况是大家做完后，发现明明排版没问题，但仍然很“普通”。这种情况通常是因为没有对画面细节进行修饰，最后只能得到一个“平平无奇”的结果。

上图文案信息与重点素材的布局中规中矩，整体画面的视觉层次单一视觉上的整体效果并不突出。整体的画面氛围太大众化，难以使用户视线停留。

通过替换拥有更为丰富且带有重点素材的背景，将所有文案信息增大对比且进行居中对齐后的画面，聚焦的作用更为明显。

为增强主题特点的关联性，对主标题字体进行重设计并增加对比与字效。在整体视觉上达到了画面和谐且细节丰富的同时，还具有一定的聚焦能力，能够让用户快速获取核心信息。

为什么要强调画面重点？

对于以上几种情况，我们可以从画面的视觉层次上入手，在背景与画面视觉元素和谐的情况下，强调画面重点。为什么我们需要强调画面重点？这里有 3 个原因：原因一：banner 用于引流宣传,必须突出重点第一个是banner的一般属性所决定的，banner设计输出的产物，大多情况下的需求就是为了引流或宣传，当凸显画面的重点后，才能更容易引起用户的兴趣，使其产生点击欲望。

原因二：帮用户快速抓取有效信息，让用户停留视线因为在网页的浏览中若要让用户的视线快速抓取到有效信息，最为直接有效的做法就是通过突出banner中的画面重点，与页面中的其他元素产生区分与对比，让用户的视线停留。通过画面中鲜明的色彩对比，增强视觉吸引力。在浏览网页时，仍然能够从众多的信息中心找到这个banner。

‍‍

作者：安全蛋原因三：拉开画面层级，避免用户阅读信息没有引导防止画面过于单调，突出画面重点，另一个含义就是拉开了画面的层级。这样可以有效避免画面无焦点，导致信息阅读缺乏引导，画面缺乏吸引力。

如何解决画面空的问题？

在banner设计的过程中，为了避免摸不着头脑，或者丢了重点。做图前，首先我们应该考虑当前banner的宣传核心(中心要义/产品)，再从相应的活动中找到合适的画面重点形式。紧随其后的就是“突出”画面的重点，通常我们从两个方向增强画面重点：方向一：修饰画面重点主体物；方向二：增加背景与重点的对比，凸显主体物方向一：修饰画面重点主体物1. 首先，对于主体的修饰，有一些常见的手法类型：(1)重复排列(2)打光聚焦(3)细节展示(4)呼应元素接下来我们通过几个例子逐个来看一下，这些手法实现的方式与思路：(1)重复排列重复排列「重点信息/元素」，这样的布局可以增强信息/元素的辨识度，让画面产生相应的秩序感。就如下图，重复排列「衬衣」，不仅能够产生秩序感，斜项排列法，还能帮助凸显产品的文字信息。

在画面背景不断重复的产品样式,加强辨识度的同时，也为了不同视觉属性的信息更好的做出对比,在丰富而规律的背景下，形成聚焦。

而且不同类型的重复排列，只要在画面中的面积，重复的基本单位足够小，我们就能将其视为画面中的一个“点”，再扩展到“线”“面”等的作用。这样重复的单位，甚至能够为画面带来不一样的展示形式。比如下图，排列作为「点」的茶具，再扩展成线，可以引导读者去阅读上面的文字。

按照一定规律排列的重复元素，可以具有方向性，或者在画面塑造造型，形成视觉重心。还能引导浏览方向与阅读顺序。(2)打光聚焦打光聚焦就如同舞台上的主角身上的聚光灯一样，为主体元素进行打光，能够有效拉开其余画面周围元素的对比，形成聚焦。

除此之外，你还可以通过不同色彩的“光”，形成新的对比，以及不一样的画面气质。下图就是用光聚焦人物主体人物，分开背景，又可以让人物与左边暗部的文字产生对比。

by Insigniada

通过打光的效果可以使得画面重点具备有区别于背景的亮度,然后通过亮度对比形成的聚焦,可以以此提升重点所受到的关注度。

(3)展示细节展示细节是最为简单，也是最麻烦的一种情况，最为简单的是：只要足够多的素材，或者元素细节，那么我们就可以通过放大的形式，来直接呈现最为细腻的细节，以此凸显品质。

而麻烦的点则是：如果元素细节不足、素材质量差的话，那么在banner的画面中，将重点的“缺点”无限放大，形成的只是简陋而单调的画面。下面的 banner 就采用了优质的素材图，再用体现高级的黑白橙颜色组，展现出产品的质感和品质。

by MD Rashed Mamun

将精致的素材细节以较大的面积占比在画面中呈现，能够起到支撑版面的作用，同时，也提升了画面的丰富度。这种细节展示的手法，在素材质量优秀的情况下，对于用户浏览时的观感有不少的提升。

(4)呼应元素在符合banner主题的情况下，我们能够为画面主体物添加各种装饰性的相关元素。这种方式能够增加主体与banner主题的相关性，以及可以让主体获得“聚焦”的效果。

通过主题相关性的元素与画面重点的组合,能够形成一个新的画面重点。并且可以加强其在画面中的话语权。在这之下，细节更多的画面重点与背景的视觉层级差距将会更加明显，从而达到聚焦的目的。方向二：增加背景与重点的对比，凸显主体物通过增加「背景」与「画面重点主体」的对比，我们可以拉开两者之前的层级，从而达到“凸显”的目的。而对于背景的塑造，有以下的几种常见形式：(1)色块(2)渐变(3)叠印(4)场景接下来,同样通过几个例子，我们来看下如何凸显不同背景的画面重点：1. 色块我们所说的色块并非单一色块作为背景的形式。当然，如果留白较多的画面，单一纯色块适合用于呈现主体物的背景。而多个色块，我们可以通过拼接的形式，凸显画面重点。如下图所示：

通过局部的色块面与周围的色彩形成的明显对比，从而将视线引导至色块面上的画面重点。

通过不同色块面相接处所形成的切割线，对视线形成线性的方向引导。2. 渐变当画面的背景使用渐变时，除了可以通过渐变的不同形式，为背景带来不同的变化；还可以制作“炫彩”的背景，进行不一样的画面聚焦。

少量色彩的线性渐变能够模拟平行光照射的效果，从而产生类似光线照射引导视线的作用。

径向渐变背景的聚焦，类似色块面的聚焦与打光聚焦的结合，通过与周围色彩的对比而聚焦对象。

多种色彩的混合渐变，能够对色彩较为单一画面重点形成强烈的色彩群组与纯色之间的对比。

3. 叠印

叠印的形式可以分为：「元素叠印」和「材质叠印」，不同的叠印形式为整体带来的观感视觉是不一样的。

利用大量元素的叠印，成为画面中规律或不规律的背景，大多通过与画面重点的“多少”、“大小”所形成的差距而制造对比。

使用细腻的自然材质肌理叠印于画面背景之中，与画面重点形成“简繁”的明显对比。

4. 场景场景背景的塑造，你可以用较为现实的空间，让人一下子就识别出画面重点。不过，制作这种形式较复杂，因为它可能会影响到主体的光影，而且需要一定量的素材+合成手段，才能达到舒适的视觉效果。

通过合适的素材以及适当的合成手段，将背景与画面重点合理地融入一个空间中，这能够让用户在熟悉的场景中快速获取信息。

当你合理编排好 Banner 之后，再同步进行这两种方式，画面重点的突出效果会有一定提升。

但是对于整体画面而言，画面重点并非全部，你还需要检查和完善画面存在的其他问题，这样才能最大程度发挥出 banner 的价值。Banner虽然看着简单，但是你想要把信息最大化展示，达到最佳的带货效果，也是很讲究的！哪怕相同的产品，不同的设计，如果颜色、产品摆放数量不同，都会使点击率相差好多倍！如果你想要做出高转货率的banner，你还需要系统学习色彩搭配、消费者心理学、版式布局、字体的使用等等。

优设平面设计实战营

即将开课！