如何辨别一个Banner的好坏?(附案例)

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

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

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

一、Banner 是什么呢?

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

二、Banner 的作用是什么 ?

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

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

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

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

如何辨别一个Banner的好坏?(附案例)

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

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

一、不合格banner 的几宗罪:

罪状一:抠图不干净!!!(其他罪状且不说)

如何辨别一个Banner的好坏?(附案例)

 

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

罪状二:滥用各种特技

如何辨别一个Banner的好坏?(附案例)

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

罪状三:信息阅读障碍

如何辨别一个Banner的好坏?(附案例)

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

如何辨别一个Banner的好坏?(附案例)

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

如何辨别一个Banner的好坏?(附案例)

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

罪状四:信息传达不准确

如何辨别一个Banner的好坏?(附案例)

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

如何辨别一个Banner的好坏?(附案例)

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

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

如何辨别一个Banner的好坏?(附案例)

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

罪状六:图文信息不一致,不知所以然

如何辨别一个Banner的好坏?(附案例)

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

总结:

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

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

二、合格banner 必杀技:

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

1、信息传达准确

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

如何辨别一个Banner的好坏?(附案例)

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

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

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

如何辨别一个Banner的好坏?(附案例)

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

3、画面干净整洁

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

如何辨别一个Banner的好坏?(附案例)

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

4、信息条理清晰

如何辨别一个Banner的好坏?(附案例)

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

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

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

如何辨别一个Banner的好坏?(附案例)

6、最后一点,抠图要抠干净!!!~(要不怎么配得上专业抠图工的称号呢~汪汪~

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

三、优秀banner 的特性:

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

1、带有趣味

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

如何辨别一个Banner的好坏?(附案例)

 

如何辨别一个Banner的好坏?(附案例)

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

2、有创意的

或是有趣味,或是让人惊叹的视觉效果:

如何辨别一个Banner的好坏?(附案例)

you are what u wear,一组鞋子广告:

如何辨别一个Banner的好坏?(附案例)

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

如何辨别一个Banner的好坏?(附案例)

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

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

如何辨别一个Banner的好坏?(附案例)

文案:长得漂亮是本钱,把钱花得漂亮是本事

如何辨别一个Banner的好坏?(附案例)

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

如何辨别一个Banner的好坏?(附案例)

文案:几块钱很重要,因为这是林北辛苦赚来的。(林北:台湾语,意思是你爸爸。)

我们再聊点别的:

如何辨别一个Banner的好坏?(附案例)

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

写在最后:

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

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

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

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/29411/

(0)
CatherineCatherine
上一篇 2017-05-24 03:20
下一篇 2017-05-24 05:23

相关推荐

  • 12家公司2018春招开启,内推进行中!20W高薪岗位面向18/19届!

    春招现已全面开启cherry整理了春招开启以来还可以内推的公司请大家仔细浏览遇到心仪公司把握住机会不要错过拿到offer才是要紧事注:以下所有公司均可通过互联派内推,后台回复【内推】即可获得内推方式!可内推公司公司:今日头条面向人群:2018届&2019届工作地点:北京、上海、深圳、武汉职位分类:研发类产品类运营类市场类职能类网申时间:2月12日起网申地址:https://job.toutiao.com/2018/公司:蚂蚁金服面向人群...

    2018-03-03
  • B2B vs. B2C 网站:关键用户体验差异

    尽管B2B网站和B2C网站有很多相似的地方,但B2B的客户却有着截然不同的需求。

    2017-05-14
  • 【用户体验.春节特辑】客从何处来(总第266期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第266期我的家族,还算是一个比较大的家族。从我记事起,关于我的家族,关于那些已经逝去的,离我远去的那些家人的故事与人生经历,都是经由一个姑姑讲述给我听的。每逢节假日,尤其是寒暑假那些漫长的假期里,尚还年幼的我,都会安静地坐在她的身旁,在她的娓娓道来中,去遥想那些过往,那过往中我的那些平凡也却有些不凡的家人。我的祖辈的...

    2018-02-16
  • 当我们在讨论用户至上的时候,我们在讨论什么?

    用户价值=用户收益-用户成本用户价值=用户收益-用户成本-机会成本机会成本=备选产品用户收益-备选产品用户成本。

    2017-05-31
  • 用户体验与智能产品设计专业课程研修班

    通知:根据国务院学位委员会(2013)36号文件,原用户体验与智能产品设计在职研究生课程统一更名为“用户体验与智能产品设计在职研修课程”!一培养目标:良好的用户体验是产品成功的关键。在科学技术日益突飞猛进的今天,用户体验与创新设计不仅是国际IT界、设计界和商业界最活跃的热点,甚至成为企业成败的决定因素。随着科技进步和社会发展,人们对产品的需求由满足可用的时代提升到更加重视主观感受和体验。用户在使用产品、服务、系统的前期期望、使用过程中,...

    2018-04-06
  • iOS10交互设计启示

    数十万互联网从业者的共同关注!作者:MOGU_Dribbbler。作者授权早读课发表,转载请联系作者。来源:站酷。欢迎投稿到早读课,投稿邮箱:mm@zaodula.com背景前段时间被一篇名为《从iOS10设计指南变化看设计的新趋势…

    2017-08-04
  • 浅谈如何从零学习成优秀的交互设计师

    浅谈如何从零学习成优秀的交互设计师 本文全系列满满干货,是从众多交互设计前辈们分享的宝贵经验里挑选出的最实用的方法,不仅能让你彻底了解交互设计,还能帮有志在这个领域发展,却苦于没有老师的童鞋,从零开始…

    2014-12-23
  • 用户体验地图为什么这么好使?来看蚂蚁金服的实战案例就知道了

    用户体验地图(experience map)作为一种常见工具能够让工作更加顺畅,用户体验地图就起到了一个很好的团队协作作用,产品、设计、开发都能够通熟易懂,便于梳理清楚产品的架构和使用流程。作者|蚂蚁金服UED源自|设计夹但是体验地图到底能解决什么问题,该怎么用呢?很多同学也许并不太了解。这次分享主要是将我们在各类渠道了解到的关于用户体验地图的各类说法做了一个总结,并结合了我们在工作中的实际运用,给有兴趣了解该方法的同学提供一点我们的见...

    2018-03-09
  • 交互设计(一)表单设计

    此文来源于网络

    2018-04-04