那些上亿人都在看的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

相关推荐

  • 提升POS产品交互设计实践

    用户体验User Experience,简称UE/UX)ISO9241-210标准将其定义为 “人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应”。简单来说就是人使用产品的感觉。用户体验的重要性不言而喻。用户体验的好坏,可以直接决定一款产品的命运;好的用户体验,会带来更多的用户,为企业创造更多价值。交互设计(Interaction Design,简称IxD)交互设计作为用户体验的重要组成部分,是指在人与产品、服务、或系统之...

    2018-02-09
  • 华景招聘用户体验分析师啦!

    作为华景员工,除了能体验旅游之外,还能体验华景食堂的凉皮儿和拉面,包子和油条,腊牛肉和酱猪肘,狮子头和卤肉饭,肉夹馍和艇仔粥,老婆饼和豆沙酥,酸辣汤和叉烧饭,泰式河粉和肉酱意面,干煸四季豆和蒜蓉蒸茄子……华景集团招聘1. 用户体验部    用户体验分析师岗位职责:*负责产品的用户研究,分析用户的使用习惯、情感和体验需求*负责原型/产品用户体验评估工作,参与产品的交互界面的设计,分析影响产品用户体验的因素*定期开展用户测试,观察用户使用产...

    2018-05-04
  • 用通俗的方式告诉你什么是交互设计

    文章底部可领取设计资源(软件、笔刷、视频教程等)↓↓↓通常来说,拥有成熟产品的大型互联网公司都会设有交互设计岗位,这个岗位在近几年的招聘市场上也越炒越火。不同于视觉设计师有可视化的作品展示,交互设计师的工作大多无法直观可视化或出于保密性难以对外展示,所以在大众心目中始终是神秘的存在。所以今天就来给大家分享一下我作为一个交互设计师眼中的交互是什么样的。文章的目的是帮助对交互设计不太了解,但工作相关或对此感兴趣的人对交互设计进行基础入门的了...

    2018-04-08
  • 总结了一套完整的设计分析思路

    本文主要是根据个人在各个大大小小的项目中总结而来的一套做设计分析的参考思路,应用于常规的项目场景基本是够用了。“需求是业务方的几句话描述,只能管中窥象的了解他们一些零零碎碎的想法,没理解到本质需求就开始画界面,然后不断的随着他们想法的转产而反复被动修改交互稿…”
    “PM已经画好完整的demo,交互看着似乎能做的只是根据demo做细节优化和完善,做着做着就迷茫了,设计的价值到底在哪呢?”“在公司中作为职能部门的UED团队,需要站在用户的角度思辨业务,通过服务内部客户进而服务我们的最终用户,用设计专业帮助业务成功,与业务一起成长”。Tips: 跟需求方沟通挖掘需求,最重要的注意点是需求方对我们来说是快速了解行业现状和市场需求的绝佳伙伴,所以要更多的聊这些,而不要很快就陷入页面具体细节的讨论。(如果需求方主动要说,可引导至挖掘背后目的是什么,为啥要这样做,具体表现形式可以后面在细化页面时再考虑)某家居用品商要制造一款家用钻孔机,继续往下深挖用户诉求:
    “用户需要的并不是一台钻孔机,他们需要的是墙上有几个孔”
    “用户需要的并不是墙上的几个孔,他们需要的是墙上显示家人照片”
    “用户需要的并不是挂了照片的墙,他们需要的是一个更温馨生动的家”
    ……通过「某策略」,帮助用户实现「某价值」,以完成「价值变现」。

    2017-05-02
  • 微信竟然有这么多渣到爆的细节,再不知道你就OUT了

    1997年,“码农”张小龙靠一己之力写了Foxmail,但电邮软件是免费的,当时连《人民日报》都在为码农张小龙的生计感到担忧。时隔20年后,张小龙的名字在互联网领域几乎已经无人不知,无人不晓,更多的是因为一款足以彪炳互联网史册的产品——微信。

    2017-05-23
  • 人机工程学在交互设计中的运用

    大家在做设计的时候都会遵循一些交互规范或者常用的一些规律,但是经常情况下,我们都没有深入的研究为什么这样定义这个数值,这个数值是否合理?如果没有严格的理论支持,在设计中直接运用一些规律,就有被挑战的可能。下面我谈谈几点我从人机工程角度分析的我们通常使用的一些数值。

    2017-05-03
  • 7种诀窍,创造利于记忆的用户体验

    了解记忆的工作原理,设计师可以创造出以人为本的界面,迎合用户这种与生俱来的能力,节约他们的精力,提升可用性。

    2017-04-27
  • 交互设计与空间展示的深度结合 | 通过交互科技扩展展览空间的体验维度

    本文分为两个主部分,第一部分为如何理解,通过交互科技扩展展览空间的体验维度,第二部分将结合若干具体案例,为大家分享怎样运用交互科技,扩展展览空间的体验维度。大理石是大型彩色模压形状,能够和人通过声音…

    2017-08-01
  • 大势APP的用户体验究竟“火”在哪儿?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:大势APP的用户体验究竟“火”在哪儿?周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目本期主讲老师▼用户体验设计UX是交互设计中非常重要的一点,每个APP根据适用人群和功能设计的不一样,都会有不同的用户体验,下面来说一说在众多...

    2018-04-07
  • 如何在页面上减少用户操作

    作者:柒0   最近有同事在公司反馈:“有用户说xx流程、xx流程太繁琐了。”产品经理反驳:“怎么可能,我已经对标过业内很多体验很好的app,流程上的步骤我敢保证我们绝对不比别人多。” 作为“好事”的交互,我决定走查…

    交互专题 2017-08-07