案例50发！值得学习的Banner广告图完全设计指南（上）

Banner广告无处不在。从网站首页页头的内容推荐到侧边栏，从文章内到图库列表中，你会在几乎所有内容存在的地方找到他们的影子。通常情况下，它们看起来漂亮，略显浮夸，还会蚕食你的网络浏览体验，尽管我们在想尽一切办法降低它们给用户的负面影响，但是坏名声总是不可避免地同它们绑定到了一起。

实际上，Banner广告对于用户的影响是巨大的，合理的运用，肯定是事半功倍的。那么到底要如何打造不让人生厌、转化率可观的优秀的的Banner广告呢？

空泛的理论或许不够接地气，不妨从下面50个案例中，来学习Banner 广告的设计技巧。

1、风格化的图文排版

这是Dear Miss Modern 所制作的一组Banner广告，每张图片在文本和图片素材上都保持了气质和风格上的一致性。字体的形式感和图片素材中图像和图形的搭配让整个广告Banner 给人的感觉更加强烈。如果图片并非是这种强风格化的，而是更加微妙的话，应当采用更加经典、耐看的字体来进行搭配，道理是一样的。

2、营造层次

Visa 的节日广告Banner就充分运用了层次结构的优势。照片的挑选就是有景深有层次的美食，让人第一时刻会被它吸引，而文字排版则覆盖在虚化的远景上，确保了可读性，也增加了一个层次，传递出信息，确保不会混乱。按钮的位置正好置于美食之上，文字之下，恰到好处地吸引人来点击。

3、使用相关图标

这个来自Google的广告Banner 通过手绘的图标给人带来一种个人化的体验。

图中每一个手绘的图标都非常易于识别，虽不复杂，但是给人营造出一种仿若在世界中穿行的感觉。这种难以描述但是令人触动的感觉让这个广告不再只是一个广告。

4、增加出人意料的元素

一个招聘广告应该怎么做？谷歌的这个招聘广告也算的上是出人意表了，没有高大上的说明和漂亮的妹子，而是用形同小区布告栏的手写小广告一样的涂鸦手写广告。这种广告不复杂，但是却出人意料，这种熟悉的感觉也足够令人触动。

5、加入插画

这个案例同样是谷歌的广告图，插画的加入让整个广告图充满了童真和趣味，加上扁平化的元素，整体看起来也比较统一。这种插画实现起来不难，看起来可能有点粗糙，但是确实很友好。插画和摄影图片不同，它能赋予设计以后者无法企及的气质，当然，你得用好才行。

6、布局适配

FatCow 的这个广告图是由 Envato Studio 所设计的，为了适配不同的广告位，整个广告制作了多个不同尺寸的版本。将最常用的广告图设计出来之后，将其中的元素进行二次编辑，制作成能够适配其他广告位的尺寸，其中某些元素需要调整，移除或者新增，这样就可以实现了。

7、使用绚丽的色彩

这个Google Music 的广告采用了活力十足的粉色，搭配的是同样高饱和度的蓝色，两者形成鲜明的对比，也给人留下深刻的影响。和普通单色调为主的Banner相比，这种色彩绚丽的多色搭配更加抓人眼球，不过使用的时候需要多加注意，确保可读性和协调性。

8、保持简约

如果说有可口可乐有什么做的非常突出，那么保持简约的设计绝对是诸多优点之中最值得学习的一个。这个可口可乐的广告Banner 设计很好的延续了这一传统：产品图+LOGO+宣传语+标志性配色。虽然内容不多，但是效果很赞。

一个塞满全部信息的Banner广告图对你而言不会有啥好处，因为用户压根不会去看。将最重要的信息呈现出来，这就够了。

9、关注潮流

关注流行文化和正在风靡的趋势，对你设计banner广告而言，非常有用。Campbell 就是这样，它很好的利用了星球大战电影这个IP，推出相关主体的产品，吸引星球大战的粉丝前来购买产品。合理的借助正在流行的趋势和话题来宣传对应的产品，绝对事半功倍。

10、使用纹理

Campbell 的这个广告是运用纹理提升质感的典范。笔刷式参差的边缘让整个广告的视觉效果更加微妙，广告图中其他的元素谈不上有多突出，但是纹理的加入如同点睛之笔，使得整体的效果都提升上去了。

11、借助利基

利基是指针对企业的优势细分出来的市场。广告通常需要针对目标人群来投放，这样才能达到最好的效果。

Target 的婴幼儿系列产品的广告主要是针对母亲们投放的，那么还有什么比一个粉色的、可爱的场景更容易吸引到她们呢？

12、用图展示，而非语言

Zarbee 的维生素广告banner 在图片的使用技巧上就相当突出，水果来置换维生素，强化概念，而非用语言来描述，巧妙而直观。

13、清晰的聚焦点

当广告有明确清晰的聚焦点之后，品牌和用户之间的沟通就更加直接了。这个Banner 广告图也是为Target 设计的，品牌LOGO从位置到颜色都足够显眼，加上美女的姿势在结构上的引导，Target 的品牌LOGO无疑是整个广告图的焦点。

14、使用意象做引导

麦当劳的这个广告就是很典型的使用意象替代文字来传递信息，咖啡这一单词被相应的图片所替代，传递信息的同时，还让整个广告图不再单调，变成图文混排。单纯的文字和图片都能够传递出信息，但是混合使用则显得更加有趣，走心。

15、让产品发声

在这个广告图当中，麦当劳的McFlurry 无疑是核心，不论是意义上的，还是视觉上的。灰色的背景让色彩鲜艳的MacFlurry 主体显得足够醒目。让产品本身在广告中突出展现，可以让整个Banner 表现力和针对性都更强。

16、创造角度

奥迪的这个广告图通过分割空间来呈现不同的信息，但是最引人瞩目的是小幅扭转的角度给人带来的独特视觉体验。这种调整让特定的信息更加瞩目，配合图片中车体本身的角度，使得整个广告图更加富有活力。

17、使用遮盖

使用特定色彩的半透明层来遮盖背景图，可以让前景的文字内容信息脱颖而出。这种设计手法现在并不鲜见，它让背景信息从遮盖中透出，同时让文本内容可读性更强，整体层次感增强。

18、设置场景

Tiffany & Co 珠宝的广告图的设计，称得上是有趣好玩，旋转的鸡尾酒杯和漂亮的珠宝组合暗示出它们经常同时出现在同一场景，营造出高雅、精致的感觉。通过相关的物品组合从而暗示用户，让他们自行脑补出场景。

19、创意字体

好的排版能够吸引用户的注意力，而Nike 的这个广告尤其突出，它在字体上的设计富有创意，这些被肢解的字体同样具备强大的识别度，但是这样的设计让它们看起来更加轻盈，也更富有科技感。这种视觉上的强化，让广告和产品更加吸引人了。

20 、使用风格化的插画

插画可以简约，同样也可以细节满满。风格化的插画可以通过细节和风格来增加信息的厚度，讲述故事，传递感受。这种插画力量感十足，充满能量，和Nike的品牌气质相当符合。

21、使用多种元素

虽然有风险，但是合理的将多种不同的元素搭配在一个广告图中，可以产生不错的形式感，就像这个ebay 的广告图这样。漂亮的产品图，标准字体，手写字体和插画元素，协调地组合成一个广告图。当然，每个元素的存在都是有理由的，各司其职，并非随机搭配，请务必记住这一点。

22、成为流行风向标

将潮流和趋势融入到Banner的设计当中来，让它成为广告和用户之间的纽带。这个来自ebay 的广告就是这么做的。将“Hotline Bling” 替换成“Haute Line Bling”之后更好地解读了时下流行的这种文化，从而吸引更多关注这一时尚的用户。

23、自由舒展

并不是每一个广告Banner 都必须借助栅格，让每个元素都精准地对齐排列，自由舒展的设计同样有效。Yoplait 的广告就是这样设计的，这样显得更加有趣、富有童真。当然，这样的设计是否合适要看它的产品的气质和特色。

24、创建联系

在设计的过程中，让你的广告图中的图片和文字之间保持足够的关联是非常重要的。Talbots 的广告图中图片和文字的气质就非常接近。

25、制造对比

对比是吸引用户注意力的有效手段，而ESPN的这个广告Banner 的设计就是深谙这一技巧。深红色的背景下，白色的文字就显得相当突出了。字体挑选的也是锐利而轻盈的类型，这样一来，信息的传递有效度就更高了。

【技多不压身的设计师才有高薪资！】

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

原文地址：designschool
原文作者：Caitlin Jordan
优设译文：@陈子木