冠亚BR88_首页

摄影专区

当前位置:冠亚BR88 > 摄影专区 > 【Day 13】K1 章振兴 banner图分析

【Day 13】K1 章振兴 banner图分析

来源:http://www.zoyal.cn 作者:冠亚BR88 时间:2019-09-21 23:42

我之前写过很多关于Banner的文章,我也给大家做过图例示范,如下图所示,一个最完整最常规的Banner主要由下面这些部分组成:文案/模特或商品/背景/点缀元素/logo。

题目:

筒子们好,今天我们一起来探讨一下Banner的设计,在这一次的教程中我会介绍一些平时总结下来的可以让banner迅速达成效果的简单小窍门,如果你在平时有大量的banner设计工作,并且总觉得时间不够用,那么希望本次的教程可以帮助到你。

图片 1

Banner分析训练

好了,那么我们进入正题。

我也写过上百篇关于电商的文章,内容涵盖文案/运营/设计/摄影/用户体验/用户心理/市场营销等各个方面,算是比较全面的了,但是大家可能也发现了,我对于电商设计里面的其中一个部分其实写的非常少,也就是标题设计。

选出一个你觉得不错的活动Banner,从中分析有哪些你可以学到的内容。

首先让我们认识一下banner,平时大家在各种网站或者移动端的app里经常可以见到,印象里他们大都长这个样子:

以前我觉得标题部分的设计比较复杂,涉及到图形设计/质感风格/文字排版/字体的气质/色彩搭配/文化背景等很多方面的内容,它其实相当于又是一个独立的设计范畴了,我即使是写的话也只能是写的比较皮毛,远不及那些专门的字体设计师来的专业,所以就暂时搁浅了,总想等到某个时机成熟的时候再来写。

注:banner可以是手机上的,也可以是PC端的

图片 2

不过经过这段时间的沉淀,我也对标题部分的设计有了一些自己的理解,所以今天可以在这里给大家分享一下关于标题设计在电商设计里的运用的知识。


当然了,这就是我们常说的banner,但其实banner还有几个远房表兄、同父异母什么的兄弟姐妹们,它们可能长这个样子:

欢迎关注@TTTing1 的微信公众号「做设计的面条」,一个干货与文笔俱佳的美女设计师。

      banner图的设计要做的是准确地把信息传达给用户,直白一点讲就是通过对文字图形的处理去传递某种情绪给到消费者,让消费者产生点击购买的欲望,banner图的受欢迎程度直接关系到图片的点击率和转化率。

图片 3

那么为了方便大家的理解,我这里把标题部分的设计总结归纳为这几个方面:图形设计/质感风格/文字排版/字体的气质/色彩搭配/文化背景。

图片 4

恩……其实以上这些在广义上来说都可以归纳为Banner,就形状来说现在的banner也已经不再局限于从前大家所理解和看到的那些出现在固定广告位的长条形广告了,他可以是长的、方的、必要的时候也可以是其他什么乱七八糟的形状,总之,不管是侧边栏广告、焦点图、专题页的头图、我们都可以理解为是banner,在设计方法上,其实都是共通的。如果要是分类的话其实可以大概分为两类:

接下来我们一个个地来看下:

淘宝电商banner图

促使点击

  1. 从图形设计的角度去理解

这个是一张比较经典的淘宝电商爆款设计风格,我从下面几个方面分析这个banner图的设计

渲染气氛

因为字体其实也可以理解为是一种图形符号,对于不同品类的电商活动设计,我们可以在标题部分融入一些图形或实物搭配,这种形式不仅可以帮助用户更好的地理解活动主题,也能给人耳目一新的感觉,非常适用于一些要体现产品功能卖点的文案,我给大家举例下:

主题:采用不同的颜色标识来文案文字的中心来凸显banner的主题内容,简洁明了

第一种就是大家经常在各种大大小小的网站都能看到的广告banner或者焦点图,她们有大有小可长可短,但是他们共同的作用就是通过各种方式引导你去点击。

比如下面的晚安2个字是由床上用品拼成的,非常一目了然:

图形设计:整个画面的底色根据产品的色调和风格来决定,爆款多为平易近人、干净利落的,取模特的两个画面放在banner的两侧,使得整个画面平衡,最好为一静一动两种风格,给人的视觉冲击也比较大。

图片 5

图片 6

字体:在字体上采用方正兰亭超细黑、汉仪秀英体,表明女性的特点是细致优雅、苗条细长,字如其人的感觉

通常你在做这种类型的banner时,一般会是上图这个场面。

今年的三八女王节也是用产品堆成了一只猫头的形式:

文案:文案位于中间部分,用一个多边形形状来隔离出来,文案的话参考了设计的四大基本原则(来源于《写给大家看的设计书》这本书)进行排版,最重要的是突出产品的名称和价格部分,其他文字根据设计的亲密性来排版,为装饰作用。

第二种大家通常可以在各种游戏网站,房地产网站,各种活动专题页中见到,也就是大家常说的头图,这种类型的banner通常并不是引导用户去触发点击,而是服务于内容,为整个页面做好气氛的渲染。

图片 7

人性:结合人性的弱点-贪婪,在设计一个banner图的时候,都是对人性的把握和理解,揣度人性设计banner图,人性贪婪,贪小便宜等打折促销的眼球让利的角度去吸引消费者注意力。

图片 8

还有这个很赞的图形拼接字体设计作品,大家应该也都不陌生吧~

用户浏览习惯:大多数的用户在浏览网页的时候都是从上到下,从左到右的浏览。为使banner更容易被用户浏览,顺应用户的浏览习惯,焦点聚集到中间,不让产生找不到重点和焦点内容

通常你在做这种类型的banner时,一般会是上图这个场面

图片 9

总结:我们在设计一个banner图的时候要考虑到用户的需求点,结合人性的把握度和理解,banner图片的设计重点在吸引受众用户眼球点击欲望

说这么多,其实我是希望通过这种介绍和分类方式,让大家在拿到设计需求时可以确定一个正确的设计方向,降低设计成本,从而提高工作效率。

我们也可以只是将部分实物融入到字体里面,搭配组合成一个完整的标题:

1.字体上根据不同的用户受众采用不同字体,banner图的设计字体采用统一的字体,尽量一张banner图字体不要超过三个字体格式,不同字体对应视觉感受有不同的效果

下面我们介绍几个设计小窍门,也许通过这些方法可以让你在最短的时间内有效的达成效果。

图片 10

2.文案要配合设计的四大基本原则进行排版,最重要的是突出产品的名称和价格

首先我们来说一下字体和字形,大家都知道我们从图形上解读信息的能力是要大于单纯的阅读文字,但是在banner的设计中,大多数情况下我们都是通过文字来了解信息,图片只是起到一个衬托的作用,在我自己平时做banner的时间分配里对字形的处理可能要占到百分之五十甚至更多的时间,所以今天我们重点来说一下这方面的处理技巧。

也可以完全抛弃实物,而是运用字体 相关图形绘制的配合:

3.图形设计方面画面的底色要根据不同的场景和产品勾画来决定。

一、钢笔造字

图片 11

PS:

钢笔造字是在做字形设计上一个比较讨巧的方法,但却又十分有效。对平时没有太多字形设计经验的同学来说非常适合的,只要你了解基本的字形设计规律(笔画的粗细,字体的重心等),那么此方法可以让你快速的让banner高大上起来,具体的设计方法大家可以移步字形设计大师刘兵克老湿的设计教程:

或者是完全由绘制的图形来拼接成你的标题文字:

设计的四大基本原则  ——《写给大家看的设计书》

图片 12

图片 13

1. 对比(Contrast)

二、笔画链接

当然,最简单的高效的偷懒的标题部分的设计,就是直接打字,用字库里的现成字体就好。。不过这种往往也缺乏新意。

对比的基本思想就是要避免页面上的元素太过相似。如果元素(字体、颜色、大小、线宽、形状、空间等)不相同,那就干脆让它们截然不同。对比能够让讯息更准确的传达,内容更容易的被找到、被记住。如果你想让对比效果更明显,就一定要大胆,不要让两种颜色看起来好像差不错又不一样。当然也不要在同一个页面使用太多种字体。

当你没有时间完整的设计banner上字体的字形时,笔画链接未尝不是一种好的方法,在做笔画链接时只有合理的安排需要链接的笔画,做到不突兀,不影响易读性,那么都会出来一个比较好的视觉效果,在做笔画连接的时候我推荐大家使用一些笔画粗细比较统一的非衬线字体比方说雅黑、悦黑、幼圆等等。

图片 14

2. 重复(Repetition)

图片 15

  1. 从质感风格的角度去理解

重复的目的就是“一致性”,让设计中的视觉要素在整个作品中重复出现。可以重复颜色、形状、材质、空间关系、线宽、材质、空间等。这样一来既能增加条理性,又能增加统一性。

三、随意变形

为了保持页面的统一性,标题部分的质感最好是与页面保持一致,要不然会感觉突兀,比如页面是比叫科技质感带高光的,那么标题部分也可以带一些质感或高光,这样才协调。

3. 对齐(Alignment)

顾名思义就是根据文字的具体含义来设计字形的一种方法,当上面介绍的两种技巧都让你感觉头大的时候不妨试试这种处理技巧,你只需要脑洞大开,了解文字的具体含义并用相应的图形在文字上加以体现就可以了,就酱简单!

而页面形式多种多样,标题部分的质感当然也就多种多样了,举例:

任何东西都不能在页面上随意安放。每个元素都应当与页面上的另一个元素有某种视觉联系。这样能够建立一种清晰、精巧而清爽的外观,提升可读性。避免一个页面上混用多种对其模式,也就是不要有一些置左,有一些置右。尽量避免使用居中对齐,除非是比较正式、稳重的设计(别动不动就让什么都居中,有些时候居中是一种很土的对齐方式)。

图片 16

科技/数码/家电/游戏类的banner或专题页设计经常会用到这种高光金属质感的字体效果:

4. 亲密性(Proximity)

四、3D

教程直达:《PS教程!教你创建炫酷的3D金属字体(素材已打包)》

彼此相关的项应当靠近,归组在一起。如果多个项相互之间存在很近的亲密性,它们就会成为一个视觉单元,而不是多个孤立的元素。这有助于组织信息,减少混乱,为读者提供清晰的结构。

如果要在banner中想突出文字,把文字做成3D效果可谓是最粗暴的一种解决方法,只要处理方法得当也可以达到很好的效果,如何处理3D这种细节问题这里就不提及了,网上有大堆大堆的教程可供参考。切记,处理3D文字的时配色是关键,稍不注意就会显得山寨和俗气。

图片 17

写给大家看的设计书 https://book.douban.com/subject/3323633/ 

图片 18

图片 19

好了,以上是一些在设计banner时可以用到的字形设计技巧,可能有童鞋要说我平时banner的设计工作很繁重,时间也很紧张,没有精力去做字形,或者由于版权的问题,在大多数情况下不得不使用那么几种字体,像这样的情况有没有好的办法让banner中的文字出效果呢。答案当然是有啦,下面就给大家介绍几个方法。看看如何在使用简单的默认字体的同时打破字体的沉默。

页面需要体现个性/张扬/放纵/爆发力的时候,经常会用到这种毛笔字和字体飞溅的效果:

字体如何打破沉默——不破不立

教程直达:《教你五分钟快速绘制大气磅礴的水墨字效果》

看到没有,同样是简单的字体,只是打破了整段的文字,做单个字体的倾斜,整体看起来就活泼跳动了很多,或者可以做单个字体的叠加,凹凸效果同样可以让简单的默认字体变得跳跃起来。

图片 20

图片 21

要体现年代感或一些带情绪的氛围主题的时候,字体可以有一些做旧的效果:

如何打破字体的沉默——空间独立

图片 22

说起这种方法我们就不得不提到banner中的空间关系,在设计banner时通常我们如果我们想突出文字,那么就要使文字和背景拉开空间,而为文字做一个简单的纯色底色不可谓不是一个省事的办法。

通过对字体阴影的运用,我们也可以做出很多不同的质感风格的字体,比如可以做成丝带或折叠纸的效果:

图片 23

教程直达:《PHOTOSHOP创建真实的折叠纸字体》

如何打破字体的沉默——斜能压正

图片 24

文字必须横平竖直才是最好看的嘛?当然不是,在一些设计中一个倾斜的文字排版不仅可以打破默认字体的沉默还可以帮助整个画面的构图,真是百试不爽。

比如卡片的效果:

图片 25

图片 26

如何打破字体的沉默——长短粗细变换自如

当然你也可以直接通过剪纸来得到你要的质感样式:

通常我们在做一段文字的排版时,经常会根据段落中的关键字做相印的加粗或者高亮,这种方法看似简单,但是在实际操作的过程中稍有不当就会导致整段字体看起来凌乱不堪,其实只要设计的时候把文字看作图形,注意整个字体排版的走向是否有规律可循就容易很多。

图片 27

图片 28

还有一些走卡哇伊路线的页面标题,常用一些卡通手绘风格:

OK,以上就是今天为大家总结的一些字形与字体的处理方法,希望对大家有所启发,在banenr的设计中还有很多种有效的技巧可以用到,如果你有什么特别的技巧也可以告诉我们。

教程直达丨《用PS快速打造漫画风格字体》

进入论坛交作业:

本文由冠亚BR88发布于摄影专区,转载请注明出处:【Day 13】K1 章振兴 banner图分析

关键词: 冠亚BR88