揭秘双十一！那些上亿人都在看的Banner都是怎么设计出来的？

每到一年一度的大促季，会场、页面、互动游戏，都在紧张设计之中，这些精美的页面和互动游戏，如何与用户产生联系？必然需要一条与用户连接的纽带 —— 它就是BANNER。有些人可能认为资源位的设计相对简单，但其实不然，小小的资源位承载着重大的使命，设计上自然也是下了一番功夫，那这一次的双11我们是怎么做的？请听我细细道来.....

曦村：在设计前期，做大致规划，是很有必要的，在大促中虽然会有很多变化，但，做规划会帮助我们在大方向上不出错，这次，从了解业务背景及节奏 - 前期风格创意设定 - 突出品牌增强识别度 - 制定规范提升效率等几个方面去做，有了这个框架，这一次的设计过程还是相当丝滑滴！那具体是怎么做的呢？

一、了解业务背景及节奏

今年双11以“全球化”为主题，从主题来看，说明整体方向走国际路线，设计必然要高端大气上档次。不但如此，今年还要突出品牌化！品牌核心元素必须贯穿始终，让用户有明显的感知，设计与设计之间保持统一，传递相同的心智。

三个关键词说明了我们这次品牌的大致方向：

品牌核心元素给了我们比较明确的图形参考。

了解整体设计节奏：

二、制定风格及创意

为何要制定风格及创意？

因为Banner是为会场引流的，须配合会场給用户传递相同的心智，前期的风格及创意的思考，为后期的设计助力不少。

根据每个时期主题的变化，我们需要准备多个创意，这样才能紧跟主题的变化，有多种方案可选。

会场设计：

会场根据整体节奏分为三个时间段，造势期间－主要运用了贯穿品牌的线条及猫头元素，各国国旗烘托了全球化的主题 ／ 预热期间－主要突出了货品与猫头 ／ 正式期间－以金色渲染出狂欢的气氛。

根据以上主题变化做了风格方向及创意探讨，以下是脑爆方案：

在前期探讨时，脑爆了多种方案，然后根据每个时段的主题变化，选择合适的创意及风格。

接下来举几个例子，造势期间以全球化为主题，我们思考了全球化，有汇聚各国好货的概念，创意如下：

商品拼接组成图形的创意，正好符合各国好货汇聚的概念，货品与品牌核心元素的完美结合，用国旗彩条作为辅助元素，突出了天猫与全球化概念的融合，并且让商品组成或者溶于猫头，也体现了这一点！

创意参考：

随着时间临近双11，需营造紧张，紧迫，激动期盼的氛围，以狂欢为主题，创意如下：

商品与毛笔字结合，营造出最后关头的疯狂以及紧张，增强了狂欢的氛围。以手势为创意点，一是今年大部分用户都用手机购物，手的元素具有亲和力，二为手势作为倒计时数字的表现形式较为新颖，手势也有其他含义，比如竖起大拇指为点赞等。色彩上也与会场相呼应，看起来较为统一。

创意参考：

当然还有很多创意及风格运用，这里就不一一讲解了，从这个思路，大概也可以看出一二，这次我们是做了充分的准备，一个创意库，让我们整个设计过程井然有序，且能在紧急突发的状况时，及时更换创意，保证较好的活动效果。

三、识别度及差异性

为何要增强识别度，差异性？

原因其实很简单，双11期间，各大电商平台几乎都做活动，用户又怎么能在茫茫图海中认出我们？抄袭，模仿更让用户视觉疲劳，怎么能脱颖而出呢？

案例：

在大促这个时间紧迫又设计资源缺乏的时期，很容易让人感到疲软，设计大同小异，没有太多的特色与区别，所以，打破这种局面，是接下来的重点。

在茫茫图海里，能够让人眼前一亮是我们追求的效果，与其他平台设计形成差异，也是我们的使命。其实在设计之前，我们就希望这次的设计能够区别于以往，有特色，有记忆点。那怎样才能让用户认准我们的双11？你猜得没错，那就是我们品牌的核心元素－猫头！！为了让用户能够强烈感受到品牌，我们就要重复重复再重复的强调！就像脑白金的广告，一日三次，定能给人留下深刻印象，重复的感觉着实也是魔性的！对，是魔性的步伐!

解析魔性关键词：

从这些关键词中，也可以寻找出一些设计元素及方向了！再结合品牌核心元素猫头，一张与众不同的banner就此诞生了。

案例：

这次双11大促的设计，有几个点，是与以往不同的，空间感，刻画猫型元素，轻质感。

字体上我们运用了投影，营造空间感，使其看起来有层次，猫型的元素也显而易见，在商品的处理上，没有运用厚重的投影，而是运用了商品本身的质感，未加太多的特效，质感轻薄，看起来清新脱俗！

重复的连续纹样，让人产生晕眩的效果，抓人眼球，同时也使品牌元素更加突出，并且在色彩上也使用了较为鲜亮的颜色，增强了视觉效果。新的尝试当之无愧成为了点击之王，模版中的战斗机。从数据上看，此套BANNER成为当日焦1中点击最高的，确实提升了活动效果！

从空间感，图形元素，及背景这几方面，做了形式上的创新，并且识别性极高，让人难以模仿，又能很快抓住用户眼球，是一次很不错的尝试！

四、规范

在大促期间，资源位数量多如牛毛，如此大工作量，光凭几个人的力量是完不成，借助外部力量是必然的，那如何让沟通更高效，成本更低，这是我们需要思考的。

还有类目运营需要推广活动会场，日日都有焦点，设计素材的审核工作量也不小！面对这些问题，我们确实思考了一番，日常的规范是必然要做的，标注清楚，减少沟通成本，其次是，产出的模版，如何让外部设计师易于延展？经过思考，我们在字体上没有去做不必要的变形，这并非偷懒，而是正真考虑到模版的实用性及延展。

当然，字体是非常重要的，不做任何设计，也不合适，所以我们使用了轻质感，增加一些空间感，这样既便于延展及修改，又有设计感，一举两得。

五、总结

本次负责资源位的经历，让我对品牌有了更深的了解，如何体系化的设计及如何在品牌的基础上创新。从节奏的把控，适应主题的变化，设计创意探讨风格制定，如何配合双11其他相关设计，保持设计的统一性。以及规范制定的重要性等，什么才是优质模版，如何提升工作效率及提升活动效果，都积累了不少经验。希望能給大家一些启发。

最后一起来回顾一下双11期间的banner：

欢迎关注手淘团队的微信公众号：

【LOGO设计实战教程系列好文】

乱斗西游的LOGO：
《大咖级教程！乱斗西游的游戏LOGO是如何诞生的？（附设计方法）》

百度钱包的LOGO：
《向高手学习！百度钱包品牌LOGO设计过程全揭秘》

腾讯Lightalk的LOGO：
《LOGO实战好文！腾讯新聊天软件Lightalk英文Logo诞生记》

作者：MIX无线设计

【优设网 原创文章 投稿邮箱：2650232288@qq.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量106万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com