如何辨别一个Banner的好坏？（附案例）

平时经常会有人问我“什么样才算是好的Banner ？”、“我这个Banner 有什么问题呢？”之类的问题，还有时候大家会分享一些作品但是我觉得并不是特别好，所以就觉得要不写一篇“如何判断一个Banner 的好坏”之类的文章吧，因为我们常说设计师要多看，但是多看的前提是要学会辨别一个东西的好坏，要多看好的而非不好的东西哈，要不然怎么提高审美提高眼界呢？

那么进入正题之前，我们先用非常通俗描述讲几个简单的概念：

一、Banner 是什么呢？

Banner 英文翻译过来其实是指横幅或者旗帜，随着网络的兴起，后来专门用Banner 一词来代指任何投放于线上（PC端、移动端）的各种尺寸和形状的广告图，有静态和动态之分，总之现在你在网页上所看到的各种形状尺寸的图片基本都属于 Banner ，而且基本都是可点击的。

二、Banner 的作用是什么 ？

宣传，展示，广而告之，或者是能给企业、产品或者人带来相应的转化率。

三、Banner 由哪些部分组成呢 ？

主要由文案、商品图或模特、背景四项中的至少一项组成。

最常见的一种Banner 就是四项都包含了，我们来看下图举例：

那么了解完上面的基础知识，我们该如何判断一个banner 的好坏呢？

就像一个设计师，可以分为未入门 – 初级 – 中级 – 高级 – 资深 – 指导，那么banner 我将它分为不合格、合格和优秀，接下来我们分别看下：

一、不合格banner 的几宗罪：

罪状一：抠图不干净！！！（其他罪状且不说）

有的人很懒，不管遇到啥图都直接魔棒一点就完事了，那么钢笔和通道这些工具要留着发霉么？

罪状二：滥用各种特技

喜欢用各种大大的描边脏脏的阴影还有各种光效结合为一体的杀马特效果闪瞎我们的眼，然而我们需要学会正确使用特技，并且懂得克制和矜持，才能体现出自己的身价，要不很容易看起来low。

罪状三：信息阅读障碍

（不恰当的字体变形干扰阅读，“季中”两个字太过缠绵和纠结，大庭广众之这般暧昧真的好嘛？且不说黑色描边，以及脏脏的配色了）

排版杂乱干扰阅读，横就是横，竖就是竖，这样横竖穿插的跳跃感排版真的爽么？反正大脑和眼睛表示：不同意~

用色过多干扰阅读（哎哟我又出镜了，耶~），红橙黄绿蓝靛紫全被用上了，仿佛一个没有颜值的人，五官身材比例也不协调，但是偏偏穿衣服还非常高调~所以你们想象一下这会导致什么结果呢，搞的人家根本就不知道往哪看。

罪状四：信息传达不准确

比如上图这个Banner ，问题在于用色不当导致信息传达不准确，“干净”本该是要比其他文字信息更突出，而这里唯独把“干净”二字用了浅湖蓝色，在浅蓝灰色背景上，这两个字反而 沉下去了，一点都不突出，反倒是其他的普蓝色文字在浅色背景上非常突出（文字过多，圆形三角形色块的出现导致排版很乱也是一方面），相当于有一身力气却用 错了劲。

上图的banner 问题在于，关键字选取有误导致信息传达不准确，这是一个卖女装的banner ，文案是“新夏天高腰显瘦连衣裙”，明显是要突出“高腰显瘦连衣裙”几个字，而这里却突出了“新夏天”，还有这个模特打扮跟连衣裙有半毛钱关系吗？（我读 书少，你不能这样骗我，因为，我眼不瞎啊~）

罪状五：画面及文案与活动定位不符

先认清活动定位，再结合相对应的文案去做设计，像上面这个banner 是非常失败的，为什么？首先怎么可能会写出“LV全场0元包邮”这种文案？其次就算真是“LV全场0元包邮”这种低价引导型的文案，画面怎么可能是这种高 冷模特、大面积留白、文字小小的左右布局设计呢？画面一点也不热闹促销啊，是吧~

罪状六：图文信息不一致，不知所以然

也许你初一看会觉得视觉效果好叼噢，但是但是，你仔细看，你以为它是个电影海报么，可它却是卖欧式家具的，这个画面里提到的活动目的或利益点你们看 了几秒才知道？这个画面与你的家具有半毛钱关系吗？虽然这是个店铺banner ，可是谁能快速告诉我们这些新老用户“你是什么？”“你想干嘛?”好吗？

总结：

在banner 设计当中，信息传达准确比什么都重要，准确传达活动目的优先于设计好看。

也许你做的这是一个创意很好的banner ，你的用色干净，排版舒服，信息层级条理也很清晰，可是，你做的是一个卖高档女装的banner ，而我需要的banner ，只是想告诉别人，我这新进了一批廉价丝袜…… 欢迎抢购！~（这定位和传达给用户的信息完全错了老板估计会崩溃哦）

二、合格banner 必杀技：

以下我简单慨括，因为前面几篇文章我已经很详细地介绍过怎么做出好banner 了。

1、信息传达准确

包括定位准确、图文信息传达准确一致。

比如上图雨滴、水珠、都是跟雨鞋有关联的元素，文案部分也清晰明了的告知了要卖什么东西。

2、合理利用特技或者不用

各种点缀元素、各种效果使用恰当。

比如上图无论从红黄配色还是那条贯穿主线的彩带看，都给人传达出一种很喜庆热闹的感觉，一看就是新年促销活动，飘散的物品也很好的告知了这是卖数码相关产品的。

3、画面干净整洁

画面中的元素都因需要而存在，而非可有可无或者多余。

比如上图人物上半身和下半身的对比，近大和远小的对比，背景深色和浅色的对比，都使得这个banner 看起来干净简洁但不单调，它也不需要一些多余的点缀。

4、信息条理清晰

想一想什么信息该突出，用什么方法突出，颜色还是大小？排版构图是否合理？

5、画面颜色为需要而搭配，有理有据

比如，按活动目的来选取颜色搭配、按商品图或模特图来吸取颜色等，合理运用色彩对比和控制色彩面积，像优设、站酷还有68design等设计网站上已经有那么多无私奉献的大神都写了关于色彩运用相关的文章我这里就不赘述了，大家可以自己搜索啦~

6、最后一点，抠图要抠干净！！！~（要不怎么配得上专业抠图工的称号呢~汪汪~）

涉及到场景合成类的banner ，光影透视至少要大致正确，符合原理（网上有那么多教程，怎么做自己去百度看咯）

三、优秀banner 的特性：

优秀就是，除了做到了合格以外，他还做到了图文一致、创意很赞或者引起共鸣，带给人额外的愉悦感，或是会心一笑。

1、带有趣味

既准确传达信息，又让人会心一笑，给人超出预期的愉悦的感受。

比如上图这些手绘+实物虚实相结合的手法，特别适合可爱或者搞怪类的banner。

2、有创意的

或是有趣味，或是让人惊叹的视觉效果：

you are what u wear，一组鞋子广告：

通过手绘或三维建模营造出一些丰富多彩的场景：

3、拥有让人产生共鸣的文案或画面

比如下面这组关于宣传去“全联购物中心”购物可以省钱的广告文案，就很能引起共鸣，让人感觉会花钱或者会节省钱是一件很酷很有情怀的事情，而不是因为穷才去省钱。

文案：长得漂亮是本钱，把钱花得漂亮是本事

文案：来全联不会让你变时尚，但省下来的钱能让你把自己变时尚（这文案写的太好，我竟无力反驳…）

文案：几块钱很重要，因为这是林北辛苦赚来的。（林北：台湾语，意思是你爸爸。）

我们再聊点别的：

无意间看到某大神把我4年前的banner 拿出来当做优秀案例讲（我当时的心情是，很娇羞的~……)，其实现在看来这个banner 只是做到了信息传达准确，但文字排版挺乱，整体画面也很粗糙，哈哈，（另外我的文章中所用到的各种正面反面案例有部分是我自己为写文章而做的，有些来自于 花瓣，如有冒犯请私下约我，么么哒~）

写在最后：

对于电商Banner 设计来说，最基本要求是要做到信息传达准确，而后才是设计的好看或者有创意，我们可以每个月汇总一下自己的设计作品，然后看有什么问题，看它合格了吗？优 秀吗？也许之前的作品因为时间不够，因为那时的你考虑不周全或是迫于外界的压力你做了不太好的设计，现在我们回过头来发现问题，并动手去重新优化它们，坚 持下来，相信很快就会看到进步的。另一方面，时间过了这么久，要不重新看下以前收集的设计案例，它们合格吗？优秀吗？是不是该清理一下了呢？

今天的内容就分享到这里了，你们get到这些技能了嘛？哈哈，我们下次再见咯~

原文来自：小婷姐的微信公众号「TTTink-D」