电商丨这里有一套双11的组合拳,你要不要学? - 优设-UISDC

电商丨这里有一套双11的组合拳,你要不要学?

2016/11/09 8227

alibaba-double-11-combination-1

我这有本秘籍——《双11组合拳》,见与你有缘,就十块卖给你了!

昨天在公交车站躲雨,正望着站牌上一个月后双11的大海报发呆,寻思着今年是剁左手还是把肾卖了……突然,不知从哪儿窜出来的扫地大叔一把攥住我的手,神情严肃地说:“少年,我看你骨骼精奇,是万中无一的武学奇才,维护世界和平就靠你了,我这有本秘籍——《双11组合拳》,见与你有缘,就十块卖给你了!”

中二病晚期小半辈子的我当机立断掏出了十个钢镚,买下秘籍就贪婪地读了起来……

建议关注阿里UED 的官方公众号:「AlibabaGroupUED」

第一式:旗开得胜——揭幕动画

好的开始,是成功的一半。

其实从2011年开始,揭幕动画就已经成为双11项目的一个标配,它更像一个盛大的仪式,带着新一年的品牌主题告诉消费者们:双11启动啦!但对设计师而言,短短几秒的动画创作并不容易,如果缺乏创意和趣味,一样会让消费者难有耐心看下去。

如果你有留意去年的双11,会发现打开 App 时,会出现几只套着国际主题、配上各个国家旗帜为背景的天猫,摆出了各种萌萌哒的造型。挨个出场后,它们聚集在一艘邮轮上,传递2015年“大航海”的主题,也代表着双11由此起航。

2016年,在延续揭幕动画“炫酷”的基础上,设计师们重新思考了动画的价值和意义:单纯的炫技和单向的价值观传递效率很低,想要真正调动起用户的情感,必须打造一个与消费者息息相关的场景。首先从品牌调性来看,今年的主风格是“欧普”——通过几何形体的交错排列,配合明亮的色彩造成刺眼的震颤感,实现让人兴奋和快乐的视觉效果。这种层次感会让人联想起“纸片”,于是我们脑爆了各种翻书、翻页的效果,最终选定了立体贺卡的呈现形式:天然具备了情感化、趣味性,让人愉悦又有亲和感。

什么是用户最感兴趣、最想看的?一定是和用户最相关的。双11中最契合这一点的莫过于我们每一年参与的消费数据,外界对整体的双11盘点非常多,而对每个消费者来说,回顾自己历年双11花了多少钱、抢了多少红包、贡献了多少个包裹等,将成为非常私人的美好时光。

结合“炫酷”和“兴趣”,再凭借强大的PopLayer技术,工程师将视频和实时数据相结合,在任何界面、媒体上进行时间轴的展示。配合灵动的动画效果、活泼的背景音乐、强亲和力的文案,这样,一份属于消费者个人的消费战报就“跃然纸上”了。

uisdc-ali-201611096

第二式:聚沙成塔——红包集结令

有多少朋友已经和小伙伴组成了超强的双11战队?没错,这个双11第一波上线的互动游戏,让我逢熟人就想拉进自己的红包集结战队中来。玩法很简单:用户组建或加入一个战队,队伍里每个人历年双11消费额会自动累加,当达到规定的数额时,队伍的成员就可以随机瓜分消费总额所对应的红包。

看起来很简单,但实际在设计表达和信息传递上并不那么容易。首先,设计师先将玩法分解成三步新手引导,简明扼要地传递了“创建队伍”、“拉好友,集金额”、“分红包”这样三个核心步骤。

uisdc-ali-201611093

其次,这个页面上聚集了大量复杂的信息,分阶段的金额目标、多个用户贡献值呈现、加入退出队伍、排行榜和倒计时等等,一眼看过去目不暇接,重点无法突出。想要降低理解成本,最好的手段就是采用具像化的视觉形象,于是设计师选取了两个关键词——聚合、刻度——来表达集合红包以及分阶段目标的概念,提出了为用户所熟知的“秤”的形象。配合整体视觉风格以及品牌元素,打造出了一个华丽、热闹、激动人心的战队首页。

uisdc-ali-201611097

看起来,好像自己站在一个秤上称体重,不过看着增加的并不是我们身上的赘肉,而是真金白银的双11红包哦!

第三式:凌波微步——双11暴走小分队

还记得上回品牌故事里提到过的“双11暴走小分队”吗?完全体已经正式出炉拉!

这一次,小分队周游全世界,对于不同国家的风土人情,小分队还会穿上适合当地的服装,玩一些当地的特色游戏:美国的自由女生像、日本的和服樱花与油纸伞、澳大利亚的悉尼歌剧院和芭蕾舞表演……这次天猫双11真的玩大了!据说全球超过500个海外社交媒体账号都报道了小分队的暴走新闻!微软、博朗、喜达屋等世界知名品牌也纷纷竞相加入这股暴走热潮。

双11的全球化是历年都会被提及的一个话题,而平台与品牌如何真正走出国门,把视觉符号和各国特色结合在一起,是对设计的一大挑战。今年的暴走小分队从高大上的营销手段中抽离出来,更具情感化、拟人化,才最终深入人心,搭上了信息互联网的高速列车,引发了世界各地媒体的新闻爆点。

如果你身边有歪果仁朋友,请一定让他问问家人,可见到风骚的双11暴走小分队从家门口走过。

第四式:虚实结合——今天你捉猫猫了吗?

回想起前段时间 Pokemon Go 爆红,所有朋友圈的人都跑出去抓小精灵,似乎除了直播,现在最火的也就是AR了。这不双11在即,在天猫淘宝也可以捉猫猫啦。

乍一眼看捉猫猫好像就是 Pokemon Go 的翻版,但细细把玩后就发现它们还是有很大的差别。

任务驱动:既是搜集,又绝不仅仅是搜集。在捉猫猫中,我们设计了一系列限时、限品牌的任务,当用户集齐要求的猫猫种类时即可兑换。平时也许你不会经常喝星巴克咖啡,但如果简单几步操作就可以兑换一张星巴克券,相信绝大部分人都愿意去尝试,而麦当劳的吮指原味鸡等也是同样的道理。配合基础玩法,我们利用贴近消费者生活的几个大品牌做“钩子”,吸引用户投入游戏当中。既能玩到有趣的 AR 游戏,又能参与朋友圈的热点互动,还能喝咖啡吃鸡腿,又有谁会拒绝呢?

玩法简单:最初的设计中,设计师们提出了诸如道具、猫猫升级、玩家pk等多种复杂的玩法,但都被我们一一否决了。为什么?因为在互动游戏中,简单、易上手、低门槛才是传播的基础,再多的新手引导也比不上一个简单的玩法设计。只有所有人都可以轻易地玩起来,所设置的一切权益、趣味才有意义。因此,最终的方案非常简单——选猫猫、点抓去、看奖品,我们甚至还加大了地理位置中的范围圈,让你就算坐在椅子上也能抓到足够多的猫猫。

uisdc-ali-201611092

趣味设计:除了玩法以外,设计师在游戏场景、布局的设计上也是费尽了心思。尤其是各个知名品牌的加入,就要求在场景中展现这些品牌风格的建筑和猫猫。

uisdc-ali-201611095

由于整个游戏是H5构建的,所以对复杂场景的开发有很多技术限制,比如无法实现复杂的3D模型。因此,在游戏中看到的许多“3D”场景,其实都是通过我们再熟悉不过的“纸盒子”形式搭起来的。最终,就和包装设计一样,设计师细致地绘制建筑的每一个平面,并通过技术手段把它们组合起来,就成为我们眼中栩栩如生的画面。

uisdc-ali-201611091

终结式:万宗归一——品牌融合

All in one 作为今年双11的大策略,不仅仅只在品牌 logo 上做文章。如今,双11早已不是天猫的狂欢节,更是全体阿里系产品汇聚一堂的 Party。那么问题来了,日常每个产品和业务都有自己独具一格的品牌色和视觉设计,要如何在双11的大品牌下将大家整合到一起?

就像自然光经过棱镜可以投射出七彩色一样,其实所有色彩都是色谱中的一员。按照这样的思路,我们为双11品牌设计了一套完整的色环,并将阿里旗下的产品重新梳理排列,以临近色的方式排列起来。通过渐变的过度方式,从色环过渡到产品的自由品牌色,最终形成自然、整体的感觉。

在此接触上,图形使用双11 logo 的聚合形式,并印上统一的“11.11”标识,实现了阿里系产品第一次家庭聚会,真正的“All in one”。

uisdc-ali-201611094

啊,这一套秘籍学下来可真是不容易。距离2016年双11只剩半个月了,有了这五招组合拳,看来拯救世界也已经不再遥远了。

我微笑着抬起了头,正看到公司班车的司机正对着我大喊:“双11没几天了,来不及了,快上车!”

「双11 往期设计过程回顾」

Banner 设计丨《揭秘双十一!那些上亿人都在看的BANNER都是怎么设计出来的?》

天猫品牌丨《全民剁手“ALL IN ONE”——2016天猫双11背后的品牌故事》

欢迎关注阿里巴巴UED 的微信公众号:

alibabaued-qr

2016uisdc-classroom-new

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

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

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/alibaba-double-11-combination

sketch UI 界面设计 转场动效 平面设计 交互设计师 设计师 扁平化设计 设计师专访 排版布局 职场 视觉设计 用户体验设计 设计流程 素材下载 配色 web前端开发 海报设计 AI教程 设计理论 产品设计 设计规范 字体下载 神器下载 设计趋势 动效设计 psd下载 图标设计 logo设计 神器推荐 ICON 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里