淘宝banner怎么设计

一、接收到运营的banner图设计需求的时候，我们应该怎么了解需求，获取有用的信息?

1、淘宝banner图是针对什么活动、为了什么目的而设计的

我们在设计之前需要知道为谁而做?比如说为了某某大型的节日专题活动还是单纯的针对即将上新的单品预售?风格上是走高端大气上档次的，还是单纯促销铺货等等，所有的信息来源都关系到比较后的banner图设计风格的走向，不然跑偏了又要重来了~

2、主副标题、促销利益点等文案信息的确认

一般而言，我们回顾下一个完整的banner图需要些什么?想到了吧~没错，就是文案+产品(或模特)+背景，所以说文案(主副标题、利益点)可以为我们提供灵感、确定设计的方向。所以在动手之前我们一定要再次确认好主副标题、促销利益点等文案信息。

3、了解banner图所投放的位置(包括尺寸/要求)

以淘宝首焦为例吧，首焦图(尺寸520x280,72k)目前分两种形式，一种规定要求的，一种是自由设计的，那么这时候我们就要看运营的需求，按规定的设计，背景色白色，那么就在文案排版、字体颜色以及产品身上做文章就好;如果自由设计，那么考虑更多的就是banner图与周围的关系，比如首页banner图背景色避免和左侧导航背景同色，如何更加突出自身，抢先抓住消费者的眼球，从而，促进转化!

4、与运营或投放推广人员沟通其看法或建议

很多新手常常拿到需求马上按照套路去开始设计，完全忽略听取对产品熟悉的运营人员和对投放平台了如指掌的推广人员的看法和建议，导致返工。我们要知道，他们掌握着数据、比我们更加了解消费者喜欢什么、需要什么，比较后还是因为他们是拍板说ok的人。所以，我们要做的就是，听取意见、结合自己的判断，对于他们的意见或看法作做出适当的引导和取舍，开展设计，这样做出来的banner图才是双方满意的结果。

二、了解以上几点信息并整合之后，我们应该可以对banner图的风格定位好关键词了

促销、喜庆、高端、简约、俏皮、活力、时尚、复古、特定点缀元素(以表达某些节日或季节)等等，但是，这些关键词往往是一个或组合多个同时出现在一个banner图里，吸引。以下我们看一些案例：

关键词：高端、沉稳(见图一)

说到高端大牌这类的风格，我们一般可以总结出以下几点：

1、主背景大多留白十分合理;

2、色彩相对单一化，一般常见黑色、白色、灰色作为主背景色(色彩单一、浅调，就是为了能够更好的凸显主体产品，把吸引点聚焦到产品本身上去);

3、产品或模特占比相对大，往往多颜色多角度、内部构造或截取部分细节展示(因为就是凸显做工);

4、不需要太多文案的修饰，化繁为简，有时只需一个logo摆在那就足够彰显品牌;

5、往往这种高冷风的banner图比较适用于数码电子产品，牌等，彰显其品牌或产品品质。

关键词：时尚、品质感、促销(时尚感大于促销感)(见图二)

我们来总结分析一下会发现有以下几点：

1、注重文案的排版，文字排版规整有序，比如左对齐、右对齐或居中对齐，不会采取字体变形达到突出的目的，而是有一个着重突出的文字信息放大形成一个聚焦的视觉焦点;

2、色彩较为丰富，当然不建议用色过多，一般3种左右(当然如果产品本身就是颜色较多的情况下就适当调整了)，而配色参照产品本身或邻近色来提取，只有某一个需要突出的文字信息才会用对比反差比较大的颜色，比如折扣促销信息或重要的功能信息;

3、产品的角度展示好看，会给整个banner增色不少，当然产品的品质也要尽可能地高(常见产品角度：45°角，俯拾，平视，多颜色多角度的组合);

4、文案这一块一般都会有主标题、副标题、利益点这几个文案信息，利益点要注重比例;

5、这种banner一般比较适用于与时尚相关的美妆护肤、男女鞋箱包、配饰、食品等，偶尔母婴类目也会有。

关键词：可爱、热闹/喜庆、亲合力(见图三)

这种banner比较适合食品/零食类、偏可爱的服饰类，母婴类,因为这些关键词的属性跟这些品类的特点是一致的，要给消费者可爱、可口、甜美、极具亲和力的感觉。

这种banner分析一下会发现有以下几点：

1、产品很多，画面比例较满，会有很多小色块，手绘图形，卡通等的点缀，使画面不会过于单调;

2、色彩较为丰富，配色柔和，偏暖，给人热情的感觉;

3、会有某一个着重要突出的信息，但是整体画面又注重比例的协调。总之，整体画面感觉是不会有攻击性的，是友好热情的、具有亲和力的。

关键词：促销，形式感佳(促销铺货的目的性更强)(见图四)

这种banner比较是适合店铺内清仓掉一些断色断码的产品之类的尾货、节日或大型活动的促销活动，对于品类的要求没有过多的限制。

这种分析一下会发现有以下几点：

1、要么文案超级多，要么产品种类超级多，要么文案和品类都超级多;

2、色彩丰富、留白较少，注重文案排版，产品的选择上需要注意颜色和形状的选择，有利于组合排版;

3、极其醒目的sale 或价格信息，就是以吸引消费者购买为目的，营造促销感极强且便宜的氛围。

总之，它就像线下商店里面热情的促销员，同时打扮的很亲和，拿着喇叭喊：本店全场清仓大甩卖啦，快来看快来瞧啊，你买了不吃亏，你买了不上当啊!

重点来了，上面说了这么多例子，我们会发现，一个banner图就是由以下几个元素组成：

在一个的banner图里面，产品或模特、文案信息使很重要的!上面说了那么多，小编我是不是跑题了?才不是呢，上面说的案例相当于先把比赛规则说清楚，接下来小编我才具体讲这场比赛该怎么玩。

三、那么淘宝banner图的设计我们应该怎么玩?

1、产品摆放有几种姿势

(1)叠加的;

(2)模拟货架摆放的;

(3)平面构成图形化的;

(4)产品部分细节展示;

(5)产品悬浮，由远及近/由近及远;

(6)产品组合堆放的;

(7)手绘产品(全手绘/部分手绘);

(8)拿在模特手上或穿在身上脚上。

而往往以上姿势会一个或多个同时出现在banner里，下面我们看些实际案例吧：

叠加产品+切边构图+截取部分产品展示+产品数量要多：

总结：

将产品按照惯有的平面构图思维去思考整个版面，banner里的产品围绕文案的四周铺陈，既能做到了整体的美观度又能将消费者的眼球聚焦到产品围绕下的中心区域的文案。

观察分析如下：

1、这种构图往往要求所选产品形状要尽量规整，比如矩形，方形、圆形，摆放位置和大小要形成一定规律，有大有小，有高有低，切勿乱摆;

2、因为选择的是叠加模式，将产品融进背景里的处理手法，所以对产品的颜色并无太多要求;

3、这种常运用于服饰鞋包、美妆护肤等活动banner里，下次遇到适合这样处理产品的图不妨一试，时尚感立马提升。

模拟产品真实摆放场景+三件以上产品：

总结：

这种作图构思主要就是尝试营造一种一种现实的购物场景vr感，在一定的程度上增加消费者在网购中的信任感和亲和力。

观察分析如下：

1、这种手法对于产品的拍摄角度有较高要求，因为看上去要真实，如果透视阴影光线都不对，就穿帮了;

2、如果有条件在拍摄时就把场景搭建好，那么作图的时候直接拿来用就好了。

产品堆放+三件以上产品：

这四个都是横向或纵向往一个轴线堆放，也是稳定构图，类似玩乐高，做汉堡包，唯*要注意的是，产品角度上有点变化可以让画面更灵活，如上图所示。

总结：

虽然都是堆放的形式去构图的，但是我们在实际做图的时候使可以多样化地去应用，前面几种三角堆放的形式在食品类、服饰鞋包或综合类目的活动的应用中较多，后面几种比较适合的同类产品的堆放，要求产品摆放形状都是比较有规律的立方体或扁平的产品。

远景近景的对比+2件以上物品：

总结：

这种形式在展示中不需要过多的产品，比较适合摆放同类产品或单单一产品的活动，但是要求产品的拍摄角度要求相对高，45°角较佳，因为这样的透视感比较好出来效果、整个画面在产品摆放中近大远小。

同理可应用在穿在模特身上展示+大小对比+1件以上物品的形式上。这种形式需要一个姿势好看或动感的模特试穿效果，若是左右的布局，则适合近大远小的形式，若为左中右布局，则适合大小相当的对称式构图，颜色的选取和形塑造都应该遵循产品本身的特点来，这是比较有依据的做法。

飘着的产品+大小对比+虚实对比+3件以上产品：

总结：

这种形式比较注重画面聚焦视觉，要求画面有一个中心主体，这个中心主体比如是文案信息之类的需要突出的内容，然后产品作为配角，或者围绕着他转或左右对称漂浮着，或像生长在主体周围一样(就像大树上的叶子树枝的生长)，所以说，设计真的是有很多可以向大自然学习的规律。

按某种规律平铺产品+4件以上产品：