那些上亿人都在看的Banner都是怎么设计出来的?

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

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

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

一、了解业务背景及节奏

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

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

那些上亿人都在看的Banner都是怎么设计出来的?

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

那些上亿人都在看的Banner都是怎么设计出来的?

了解整体设计节奏:

那些上亿人都在看的Banner都是怎么设计出来的?

二、制定风格及创意

为何要制定风格及创意?

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

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

会场设计:

那些上亿人都在看的Banner都是怎么设计出来的?

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

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

那些上亿人都在看的Banner都是怎么设计出来的? 那些上亿人都在看的Banner都是怎么设计出来的?

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

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

那些上亿人都在看的Banner都是怎么设计出来的?

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

创意参考:

那些上亿人都在看的Banner都是怎么设计出来的?

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

那些上亿人都在看的Banner都是怎么设计出来的?

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

创意参考:

那些上亿人都在看的Banner都是怎么设计出来的?

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

三、识别度及差异性

为何要增强识别度,差异性?

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

案例:

那些上亿人都在看的Banner都是怎么设计出来的?

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

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

解析魔性关键词:

那些上亿人都在看的Banner都是怎么设计出来的?

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

案例:

那些上亿人都在看的Banner都是怎么设计出来的?

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

那些上亿人都在看的Banner都是怎么设计出来的?

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

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

那些上亿人都在看的Banner都是怎么设计出来的?

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

四、规范

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

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

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

那些上亿人都在看的Banner都是怎么设计出来的?

五、总结

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

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

那些上亿人都在看的Banner都是怎么设计出来的? 那些上亿人都在看的Banner都是怎么设计出来的? 那些上亿人都在看的Banner都是怎么设计出来的? 那些上亿人都在看的Banner都是怎么设计出来的?

原文来自:优设

作者:MIX无线设计

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30978/

(0)
CatherineCatherine
上一篇 2017-05-30 21:34
下一篇 2017-05-30 23:37

相关推荐

  • 交互设计用户心理学

      交互设计是个跨学科专业,其中,心理学便是其中很重要的一个部分。所以,如果你不想继续仅凭直觉和死记硬背高大上的理论原则来从事交互设计,如果你想成为优秀的交互设计师,学习一定的心理学将是很有帮助也是…

    2015-06-13
  • Axure学习笔记:手机APP微信读书原型设计

    最近在学Axure,周末做了个案例练练手,选了腾讯新出的微信读书,主要考虑这是1.0版,所以功能不是那么复杂。做完之后回顾了一下自己的制作过程,既算是做一个总结,也希望能给同样正在学习的新手带来一点帮助。就…

    2016-01-06
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 1 部分: 推荐引擎初探

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 1 部分: 推荐引擎初探 随着 Web 技术的发展,使得内容的创建和分享变得越来越容易。每天都有大量的图片、博客、视频发布到网上。信息的极度爆炸使得人们找到他…

    2015-12-22
  • 浅谈如何从零学习成优秀的交互设计师

    浅谈如何从零学习成优秀的交互设计师 本文全系列满满干货,是从众多交互设计前辈们分享的宝贵经验里挑选出的最实用的方法,不仅能让你彻底了解交互设计,还能帮有志在这个领域发展,却苦于没有老师的童鞋,从零开始…

    2014-12-23
  • 一招教你让交互方案更靠谱!超好用的目标导向设计法

    对于一枚交互设计 师,设计水平的重要判断标准之一,是看设计师能否产出足够靠谱的方案。对内,方案要能帮助产品不断向前发展,提升产品的数据,为公司带来收益;对外,方案要能满足用户的使用需要,方便用户的操作,提供良好的用户体验。对于交互的同学来说,这些是我们的天职,要想尽一切办法去做好。那么问题来了,如何才能做好这些天职呢?下面我将分三个阶段介绍一个很好用的设计方法 :目标导向设计法。掌握了这个设计方法 ,可以帮你设计出团队内部认可、用户也喜欢的方案。

    2017-05-28
  • 工业设计与交互设计的关系

          工业设计是一个很宽泛的概念:它的设计构思上需要考虑到产品整体外型线条、各种细节特征的相关位置、颜色、材质、音效、人因工程等;产品范围上包括杯子、电脑、交通工具等实体产品。认为「工…

    2017-08-01
  • UI设计有哪些规范?

    UI设计有哪些规范?可能很多小伙伴都在工作中思考过这个问题,现在作者总结了一些UI的设计规范,给大家做个参考。

    2017-05-22
  • 网易云音乐交互设计:如何让用户感知到个性化推荐

    一般用户会以为都是热门推荐,只有非常细心的用户才可能发现,比如你最近听了不少古典音乐,那在首页上就会看到古典相关的歌单推荐。

    2016-10-25
  • 用户体验:从幽灵按钮到空心元素,它们一直在流行

    幽灵按钮和类似的空心元素,在诸多的设计趋势当中,还是显得颇为单薄的。它们的转化率看起来不够突出,和其他的固定形体相比,吸引力也一般,它们的视觉效果主要取决于周围的对比度和环境本身,一句话,缺点很多。即便如此,它们并没有很快消失,相反依然活跃在设计的一线。它们能够如此,很大程度上是因为我们对于这些元素已经习以为常了。它们最初出现在 UI 界面上的时候,用户所感到的迷惑和混乱,已经逐步消失,我们都知道,它是一个按钮。现在的幽灵按钮和类似的元...

    2018-05-04
  • 皮克斯教给我们的22条改善用户体验的原则

    注:皮克斯动画工作室(Pixar Animation Studios),简称皮克斯。1986年,在史蒂夫·乔布斯以1000万入主以后,创作了《玩具总动员》、《海底总动员》、《头脑特工队》等经典3D动 画电影。2006年,皮克斯被迪士尼以74…

    2016-06-12