提高审美的前提!如何辨别一个Banner的好坏?(附案例)

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

小婷姐的电商设计系列好文:

  1. 《新人手册!聊聊关于电商设计的那些事儿》
  2. 《前辈经验!聊聊新人设计师最容易遇到的12个问题》
  3. 《不怕没灵感了!SALE 招牌的9种排版设计方法归纳(附案例)》

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

一、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等设计网站上已经有那么多无私奉献的大神都写了关于色彩运用相关的文章我这里就不赘述了,大家可以自己搜索啦~

相关推荐:有阿里这篇就够了:《色彩搭配速成!3个实用方法帮你全面搞定配色》

提高审美的前提!如何辨别一个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」,一个干货与文笔俱佳的美女设计师:

微信公众号简介:专注开拓电商设计思维,不定期分享一些个人见解干货,当然也会分享一些顶级创意、摄影、人生感悟方面的好文啦。

提高审美的前提!如何辨别一个Banner的好坏?(附案例)

「技多不压身的设计师才有高薪资」

  1. 平面设计:《超赞!设计师完全自学指南》
  2. 交互设计:《交互设计师修炼指南!教你从零开始成为优秀交互设计师》
  3. UI设计:《超实用新手指南!零基础如何自学UI设计?》
  4. 前端开发:《天猫高手来教你!零基础如何系统地学习前端开发?》
  5. 抠图技巧:《从菜鸟到高手!PHOTOSHOP抠图全方位攻略》
  6. 配色方案:《色彩搭配速成!3个实用方法帮你全面搞定配色》
  7. DPI指南:《基础知识学起来!为设计师量身打造的DPI指南》
  8. 交互设计自学路径图:《零基础入门!给非科班生的自学路径图之交互设计篇》

提高审美的前提!如何辨别一个Banner的好坏?(附案例)

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量104万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

收藏 154
点赞 12

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。