Banner设计技巧分享Recommand
3年前Publish
本文将从Banner的 “设计流程、常见风格、选用字体、配色方案、一些小技巧”这5个方面逐一进行介绍,分享一些个人经验。


写在前面


横幅广告(Banner Ad.)是网络广告最早采用的形式,也是目前最常见的形式。横幅广告又称旗帜广告,它是横跨于网页上的矩形公告牌,当用户点击这些横幅的时候,通常可以跳到广告详情页。随着移动端的普及和使用,banner的形式越来越复杂,需要设计师进行支持的设计情景也越来越多。

 

网上很多banner教程都太过于厚重,常常上升到平面设计、色彩构成等大项上开讲,一篇教程读下来理论看了很多,留在脑子里的却并没有多少有用的东西。所以我想着试试看做一篇化繁为简的教程,拆分做banner的步骤和方法。与其说这是一篇教程,不如说是总结了自己的一些经验和心得体会,不一定完全对,纯属分享,供大家参考。

 

本文将从 “设计流程、常见风格、选用字体、配色方案、一些小技巧”这5个方面逐一进行介绍。每一部分都不会只是分析,会有比较具体的内容推荐出来。



设计流程


在动手设计一个banner之前,我会先像下面这个思维导图一样进行一个梳理。



需求方(产品经理、运营等人)在找设计师作图之前会先定下banner上出现的文案,设计师第一时间要做到的就是根据文案确定 “氛围”。

 

“氛围”可以理解为一种想要表达的情感或状态。比如文案要是“限时促销,惊爆降价”,那么这个氛围便是热烈的,文案要是“2.5版本迭代新功能”,氛围就更偏向于严谨、严肃。

 

“氛围”的渲染由背景风格、字体性格、配色情感共同完成,它们彼此融合、相互影响的构建出一个banner。

 

除此之外,流行趋势也是需要考虑进去的一个因素,需求方也可能会对当下流行的一些热点有所偏爱。

 

以上提到的这些设计流程中的每一个环节,都需要尽量与多方沟通、确认,不要直接输出一个结果再让别人来挑错。 设计师与提需求的产品经理、运营等角色之间有数不清的恩怨,沟通效率不高是很重要的一个原因。双方的信息不对等,需求方往往并不能准确地描述出自己的想要的感觉是什么,设计师的试探又需要时间成本。 所以建议大家先梳理好自己的思路,根据自己定下的方向多选一些现有的图例(或让对方提供图例),帮助需求方具象化自己的感觉,充分的达成共识再着手设计。

 

下面我们就将影响“氛围”的每个元素展开讲一讲。



常见背景风格


背景元素构成比例的不同形成不同的风格,从而衬托不同的氛围。



这是我自己总结的一个概括图,不一定对,仅代表个人看法,下面就讲讲这个图是什么意思~

当一个banner除去文字的背景部分,完全由照片作为主体时,那么这个氛围就偏向官方、正式;只有色块拼接时就只能通过颜色情感体现氛围;如果背景只有插画,那么就会偏向情怀文艺。“照片”、“色块”、“插画”这三种元素往往不会单独出现,它们搭配比重的不同便会带来不同的感觉。


照片+插画:带来漫画和综艺的既视感

照片+色块:带来时装和现代感

色块+插画:带来艺术感和设计感

照片+色块+插画:带来电商和销售气息



首先说一说以“照片”为主体素材的情况:

   这样的banner干净耐看,直接通过照片自身的效果传达氛围,在做这类型大图打底的banner时,我们需要注意的就是怎么把前面的文字看清楚,千万不要影响阅读。因此需要找到耐看的高清大图,配合上后期处理(加颜色蒙版、高斯模糊等方式),保留图片优势的同时减少图片细节,凸显文字内容。


使用这类banner的APP有链家系、大众点评、美团等等,它的好处是带来的氛围商务、官方、可信服,麻烦之处则在于需要高质量图片作为支持。在此推荐几个不错的图库:

视觉中国https://www.vcg.com

全景网http://www.quanjing.com

图虫创意https://stock.dfic.cn



接下来是以“插画”为主体素材的banner:

   这种banner需要搭配文案来绘制小插画,是最能体现设计师不是美工(?)的方式,绘画的时间成本意味着更高的逼格、艺术性和文艺感。它的好处在于能让设计师自由的发挥、最大程度的跟着自己的感觉去贴近氛围,而不必受到固有素材的限制。但是它的缺陷也很明显———人们对绘画风格的偏好各不相同,各层领导对这个banner的品评可能分化极重,反倒不如照片令大众觉得直观、容易接受。



第三种则是近年流行的无规则“色块”背景:

   这种设计方式偏重于颜色的情感体验,最考验设计师的配色能力,如何巧用配色体现氛围、同时不显脏乱是难点所在。使用色块做背景的好处是复用性极强,一旦设计出一个样式,类似的文案皆可套用,比如把上图的“积分疯狂送”改为“会员日领福利”也没什么违和感,背景元素的模棱两可使得它的应用场景十分广泛。


最后再来看看混搭款的:

我们不难发现,以上这三种元素(商业照片、风格插画、无规则色块),混搭的成分越多,促销和廉价感越强。每当逢年过节打开淘宝京东,我们的眼睛都要忍受如此强烈纷杂的视觉冲击。其实各家的横幅都像炸了一样(甚至APP的UI也会在节庆时期鲜艳的要炸),人们不一定能耐心看清每一个banner要表达的意思,但却首先就能感受到 “便宜”“降价”“打折”。我有的时候在想,很多设计师都明白留白多重要,为什么这种时候就细节密的让人透不过气呢?真的可能就是图一个促销的氛围了,看看中国大街小巷的招牌也是差不多的情况。

 

不可否认的一点是,需求方向决定设计内容。好的设计师应该能做到由简到繁都会做、元素多少都能做。甲方爸爸想放十个商品图上去,设计师依然维持画面不乱,也是一种能力。



好用的字体


每个设计师的字体库里都有数不清的字体,用到后来爱用的还是翻来覆去就那么几个。


字体是自带性格的,“有衬线字体”如中文的宋体、楷体,英文的Times New Roman,自带人文气质与浪漫气息,而“无衬线字体”如各种黑体、苹方则会给人更强的稳重感和现代感。做banner时自行体会标语是偏重感性还是理性,从而选择使用“有衬线字体”还是“无衬线字体”。


目前的各大字库都越来越全面、完备,方正出的某一款字体风格,也许在汉仪也能找到差不多的。而字体的氛围偏向,从每种字体的命名方式就能够看出来。


下面针对字体的不同性格配上相搭配的文案,介绍几款我觉得很好用的banner字体。


第一种是自带官方严肃气质的黑体,这类型黑体比的就是谁的最粗字号够粗,能压得住场。比如思源黑体各种粗细一应俱全(还免费),是做banner和PPT的一把好手。方正正黑就更不用说了,自带一点圆角稍显柔和又不影响正经,非常好用。


第二种依然以黑体为基础,多了一些时尚感,比常规黑体更加灵气却又没有特别强的性格偏向,因此适合非常多场景。


接下来的第三种是活动促销最偏爱的阳刚字体,自带力量感,具有更强的视觉冲击和气势,与速度线、碎片、倾斜、爆炸、金属光泽、刮痕等处理手法十分搭配。


第四种是自带假日气息的字体,有着轻松的氛围,可爱又活跃。除下面这两种之外,各大字库中带有少儿、童、趣这些关键字命名方式的也有差不多的气质。


第五种终于说到有衬线字体了,它自带文艺气息、具有人情味,配合具有诗意和人文关怀调性的文案事半功倍。


最后要介绍的一种是中国传统书法字体,这类型字体自带江湖气,有很强的国风特色。


我常用的推荐字体就介绍完了,需要提醒大家注意的是要重视字体版权,买了版权才能商用,不然传播广了人家追究起来一告一个准。 



配色方案


配色真要展开讲,很容易收不住。这里简单总结了一些我常用的主配色与常见氛围的关系,供大家参考。


一些小技巧


1、视觉重心


构图上可分为居中对齐和左右对齐。


居中对齐具备更强的视觉冲击力,而如何制造景深透视和如何视觉居中就是重中之重,在这一方面,圆形真是个好东西,无论是环形灯、靶子还是水波纹,都是以圆形为基础放在图片正中,视觉一下就集中过去了。除此之外,放射线、层叠的透视、对角线、拱形的中心等等,也有集中视觉的效果。画了几个示意图简单体现一下:

左右对齐比居中对齐要沉稳一些,人们会按照阅读顺序依次读文字、看图片,因此文字与图片的比重均衡便是重点,要做到两侧的明度、重量感相互持平。瞎画了几个文案+配图,大家随意感受一下意思就好:

2、增加完成度的细节元素


如果在已经放好素材和文字之后依然觉得画面太空,可以试着在底色上铺一层底纹,或是加一些圈圈点点、波浪线、飘带、等元素丰富画面细节。

3、巧用线框


人们会下意识的去看被框起来的东西,视觉自然而然的就集中了。想要严肃一点就用封闭线框,想要轻松时尚一些就打破部分线框,做一些跨越线框的装饰,增加透气感。

4、增强文字设计感


当文字中包含重点信息时,可适当增加重点信息的视觉比重,通过改变字号颜色让阅读带有侧重点和起伏感;金属质感光泽带来科技感和速度感;将文字跳跃分布并对每一个字进行透底色的渐变处理,会让文字更加活泼轻快,带有气泡的质感。


好了,讲完了

 

第一次做教程,有很多不周全的地方并且很话痨,请各位设计同好多多包涵,希望能和大家共同进步!

 

喜欢这篇就点个赞吧~


200
Statement: all the content and comments made by netizens in ZCOOL only represent themselves, and do not reflect any opinions and opinions of ZCOOL.
Report
Share
Collect
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
All Comments0
北京 | UI设计师
Article information
文章标签
收录收藏夹
更多收录此文章的收藏夹