3步带你提升Banner视觉效果！让人看了就想点！

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

本文主要从 3 点来帮你突出设计焦点：

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

2. 想提高视觉效果，必须突出重点的 3 个理由

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

下面为正文 

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

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

 

面对这些情况，要怎么才能做出点击率高的 banner 呢？

 

你可以这样做：

拆解banner的视觉层次，分析导致banner“平淡无奇”的原因或问题，再思考解决办法调整 banner 。

流程如下：

 

 

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

这4 个常见问题

导致画面不吸引人

 

首先，我们来说说「画面不够吸引人点击」的问题，因为知道问题出在哪里，你才会有针对性的改改改。

一般会有4 个问题：

1. 画面失去焦点；

2. 画面留白过多，单调空洞又枯燥；

3. 画面太挤，导致“脏乱差”；

4. 细节无修饰，画面真会“平平无奇” 

接下来，我用一些不同错误类型的banner举例，解析画面出现缺陷的真正原因。

 

1. 画面失去焦点

该banner的情况：目标主体与背景的对比不足，从而导致画面的焦点缺失，对于banner这种通常需要引导用户点击，吸引用户关注的内容，画面的焦点缺失则为致命伤。

2. 画面留白过多，单调空洞又枯燥 

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

3. 画面太挤，导致“脏乱差”

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

4. 细节无修饰，画面“平平无奇”

还有一种情况是大家做完后，发现明明排版没问题，但仍然很“普通”。

这种情况通常是因为没有对画面细节进行修饰，最后只能得到一个“平平无奇”的结果。

想提高视觉效果

必须突出重点的 3 个理由

对于以上几种情况，我们可以从画面的视觉层次上入手，在背景与画面视觉元素和谐的情况下，强调画面重点。

为什么我们需要强调画面重点？

这里有 3 个原因：

原因一：

banner 用于引流宣传,必须突出重点

第一个是banner的一般属性所决定的，banner设计输出的产物，大多情况下的需求就是为了引流或宣传，当凸显画面的重点后，才能更容易引起用户的兴趣，使其产生点击欲望。

  

原因二：

帮用户快速抓取有效信息，让用户停留视线

因为在网页的浏览中若要让用户的视线快速抓取到有效信息，最为直接有效的做法就是通过突出banner中的画面重点，与页面中的其他元素产生区分与对比，让用户的视线停留。

作者：安全蛋

原因三：

拉开画面层级，避免用户阅读信息没有引导

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

 

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

 

在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虽然看着简单，但是你想要把信息最大化展示，达到最佳的带货效果，也是很讲究的！

哪怕相同的产品，不同的设计，如果颜色、产品摆放数量不同，都会使点击率相差好多倍！