如何做出靠谱的Banner设计?这篇文章可以帮到你!~

2019年1月14日14:56:36 发表评论 796

写在前面

自从把我的鸿篇巨著《这么设计能热卖》出版完成后,我其实就很少写电商方面的设计干货了。

一方面是因为我那1000多页的书里内容就超级详细了,基本是把走电商设计这条路要用到的各个知识点都写进去了。另一方面是因为这3年多来我一直都在输出电商设计方面的文章弄的我有点麻痹了,想换个口味。所以最近几个月很我写的文章其实大部分都是在为大家解答一些职场或求职方面的问题。

但是昨天,我收到了一位面粉的问题求助,感觉他好像对于Banner设计并且没有一个正确的认知,而且这种现象好像还是蛮普遍的,所以思来想去还是觉得,要不就再给大家讲一讲Banner设计相关的正确认知好了。他给我发来2张求职某公司电商设计师一职而做的Banner设计测试题:

这2张Banner,其实单纯从视觉设计上来说,好像并没有什么大的问题的,只是看起来比较常见和中规中矩而已,不算是吸引人的那种。

但电商设计师的职责可不单只是考虑视觉层面的设计就够的,比如只是把一些文案和图片按一定的设计原理堆放在一张画布里而已。

因为我们做的是商业设计,所以需要明白做这个Banner设计的商业目的是什么,然后弄清楚为了达到这个目的,什么样的文案才适合放上去,以及什么样的设计效果+氛围+配色+排版布局更合适。并且你也得明白以上所有这些内容和要素所呈现出来的视觉感受最终都只是为了达成目的而服务的,也就是卖货。

 

一、  当我们设计一张Banner时,到底需要考虑哪些内容?

看完前面的内容,我们就不难发现,其实身为一枚电商设计师,我们是要对在这幅Banner里能看到的所有内容负责的:

从元素的角度来说,比如文案、商品或模特、背景、氛围点缀元素等等;

从视觉设计的角度来说,比如该用什么配色配色、该用什么效果、该采用哪种排版布局等;

从运营的角度来说,比如什么信息是该突出展现的,要不要放大、加粗或者用颜色等其他方式凸显出来,而什么信息是不那么重要的,要不要缩小一点、颜色弱一点等等,是用小细节图还是完整的产品图可以更好的展示卖点等等;

从色彩心理学的角度来说,比如我是用暗色调来渲染一种沉寂神秘的感觉呢?还是用明亮的色调来渲染一种欢快活跃的感觉呢?是用大面积暖色来渲染热闹促销的感觉呢?还是用大面积的冷色调来彰显低调平静的感觉呢?等等;

还有从营销和用户体验的角度来说,文案字数多少合适?多大字号合适?这张Banner是要放在什么环境里展示的?如何让用户多看几眼,如何让它在这个环境里脱颖而出?等等;还有很多其他方面我就不继续细说了,因为以上我提到的所有这些问题其实都在我的书里写的很清楚了,如果你们手里有我的书,可以翻翻看。

 

二、为什么会出现反复改稿和求职做试题被否的情况?

看完前面的这些内容,然后我们再重新回到这位求职者身上,不知道大家发现其中存在的问题没有?

嗯,其实我一开始就指出了文案方面存在的问题。但他并不是很在意,而是觉得文案不应该是自己要管的事情,反而是很纠结于是不是自己的排版太差了,是不是因为自己的设计效果做的不够炫酷,是不是自己的设计做得太low了等等,所以才导致求职的公司没有给他回应。一直到后面我还想继续开导他来着,结果他还是掉进了是不是电商设计就应该做炫酷的效果这个漩涡里出不来。

所以,可以很确信的说,这位求职者现在还只是停留在了很浅显的视觉层面去做设计而已,离公司实际需要的电商设计师该具备的运营思维和我上面提到的其他各方面的设计沉淀差距还很远。这也是很多刚入行或者工作了好几年依旧没有开窍的设计师所处的现状:反复改稿被折磨的不行,但最终还是一直无法到达运营或老板要求。

因为除了技能上的不足以外,很大程度上也是因为缺乏我上面提到的那些思维认知方面的东西,所以很难准确理解别人给出的设计要求,也很难把这些需求信息准确的传达到消费者手里的。这也是很多电商设计师求职者得到的待遇:好不容易获得了面试和做试题的机会,但是做完试题后就不了了之了,别人压根就不想继续回应。

因为人家通过你做出来的测试题就可以判断你这个人到底符不符合要求:如果单纯只是技能上的原因,努努力,可能短时间就可以弥补回来了;但如果是思维方面的原因或者认知态度方面的原因,那企业一般都会直接放弃这类求职者,因为培养成本太高,这不是短时间能改善的。从作品和谈话内容来看,很显然这位求职者2者都占了。

 

三、分析一下目前的Banner设计存在的问题

那回到他做的这个Banner试题本身,我们再详细地说一说这个Banner问题到底出在哪里。

问题一:画面没有重点

因为“擦地打蜡”这几个字号非常大而且是粗体,所以是引人注目的;但“一键喷水/快速清洁”这几个字号虽然小但是用了亮黄色,导致信息也非常突出;还有价格698也突出,同时左边的文案整体的面积和右边商品图的面积大小其实相差不大,所以左右的视觉吸引力其实也是相当的。

那我就问你,从这张Banner看,你的第一视觉注意力是哪里?到底哪里才是重点?

嗯,没有重点,因为你的设计里到处都是重点,所以就相当于没有重点。

 

问题二:文案表述有问题

他这里是将“擦地打蜡”四个字提取出来当作大标题来用了,但其实“擦地打蜡”只是跟他下面的小字“一键喷水/快速清洁”一样的功能性描述文字,所以它们其实是平级的关系,但他在这里强行将其中一个功能描述文案提取出来做了突出强调,这么做也不是不可以,但这个强调的非常莫名其妙。

我站在一个用户的角度去思考的话,如果我要买你这个拖地的机器,本质上我要买的的是这个机器给我带来的地面清洁和保养服务、省时省力服务等等,我在意的是这个,结果你让我看“擦地打蜡”?然后还疯狂促销698元?

不知道的还以为你这是要提供擦地打蜡服务,一次698元呢。

但其实你是要卖这个机器对不对?

所以你这里其实是缺少一个类似于“XXXX拖地机专场”“XXX拖地机降价了!”这样的文案,你要把你卖什么东西说清楚。

 

问题三:设计目的没搞清

关于文案这一块的排版,到底要突出什么文字信息,这就取决于你的目的是什么:

如果你想突出功能卖点,那你就把那3个功能卖点文案用一样的设计样式突出展示就好了,然后在产品图周围配合着做一些氛围效果图,其他的信息都可以处理的比这个信息弱一点;

如果你想突出利益点低价,那你就把价格这块突出强调就好了,其他的信息都可以处理的比这个信息弱一点;

如果你想突出这个产品的型号或活动名称,那你就把“XXX拖地机降价了!”这块突出强调就好了,其他的信息都可以处理的比这个信息弱一点;

如果你想突出这个产品的外观颜值,那你把产品图搞精致一点,搞大一点,甚至可以放一些细节图展示,其他的信息都可以处理的比这个信息弱一点;

如果你想突出这个产品的外观颜值,那你把产品图搞精致一点,搞大一点,甚至可以放一些细节图展示,其他的信息都可以处理的比这个信息弱一点;

如果你想强调的是一种使用的场景代入感,那你可以把这个产品放在某个特定的场景环境里给大家看,用合成或摄影的方式都可以实现,文案排版依旧可以遵循上面的方式;

总之,你要突出展示什么内容并没有标准答案,这是由运营目的决定的。

 

比如我随手截图一张天猫首页的Banner图,看似很简单,但是人家的信息层级关系很明确啊,虽然文字很多,但是你会跟着他给你的视觉指引走。

所以这个Banner我就看了几秒我就知道了:“哦,卖智能马桶的,可以满1000减500,还能免费拆旧换新,点进去看看吧!~”

诀窍在于:

相同等级的文案信息在大小、颜色、字形、字号上尽量保持一致,不做得太复杂;

即便是相同颜色的字体,如果它们里面的信息层级是不一样的,那么可以根据文案信息的重要层级做一些大小方面的区分;

其他着重想突出的文案信息可以通过换个颜色的方式跳出来;

(当然我这里的举例只是和你们探讨视觉层级关系的处理,至于间距方面和美感方面的问题我们这里暂且先不讨论。)

总之,你会发现,一个合格的电商设计师其实应该是一个导演,同时是一名指引者,他在设计的时候思维是很清晰的:这一步他要你看什么,下一步他要你看什么,最终要把你带去哪里,然后达到自己的某种目的。

而且假如自己功力还不够的情况下,你可以保守一点,一幅画面里最好只有一个主角,其他都是配角,把层级关系搞明确一点。

不要一上来就哗啦哗啦的全都搞成主角重点了,如果你是导演的话,你这是家里有矿啊还是喜欢搞潜规则啊,哪来这么多主角啊!~

 

写在最后

很多人都对电商设计有一些误解,比如一提到电商设计就觉得这个没啥技术含量,再比如一提到电商设计就觉得要做出什么非常炫酷的效果才牛逼,其实这些思想都是不对的,那只能说明ta们对于电商设计的认知太浅了。

如果你也比较迷糊,那么看完这篇文章,相信应该是有一点开窍了吧。

而且越到后面你就越会发现这里面的奥秘多着呢,涉及到了运营、营销、新设计、文案、策划、摄影、修图、手工等等各种,非常有意思。

那么,关于Banner设计方面的一些认知普及知识,就先讲到这里吧,因为要说的很多内容,我的书里真的都已经写的很详细了。

另外,如果你有心的话,在我的往期文章里和历史消息推文里也都可以找到一些线索,比如这几篇很久以前的老文:

六个步骤细说电商banner图设计之色彩的奥秘

五大步骤细说Banner图设计之平面构成的奥秘

 

原文地址:做设计的面条(公众号)

作者:婷姐

  • 互动微信
  • 扫一扫 加微信
  • weinxin
  • 微信公众号
  • 扫一扫 加公众号
  • weinxin
精品女装,点我购买 精品男装,点我购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: