说点心里话!「QQ飞车×Vans随我造」项目背后的设计故事

2017/07/16

腾旭游戏TGideas – 狗哥:首先这边分享不是一个项目总结,不会按照一个套路来总结数据,复盘流程,这是一篇写给内部设计师的心里话,作为INHOUSE的视觉设计师和创意工作者,真正有机会按照自己的想法来输出内容和设计风格,是多么幸运的一件事情,就冲着品牌和产品对设计师的信任,或者说对设计师任性的纵容,激发了我们对与#QQ飞车×Vans随我造#活动创作的全部热情,设计师就是一群容易满足又容易被伤害的群体不是么?

从做包装到做文化内容

TGideas服务QQ飞车这款产品已经超过八年,产品一直保持较高的生命力,陪伴着第一批用户从小学,中学然后走入大学,除了常规的营销和运营设计之外,我们一直想能够给这些用户带来一些新的体验,所有的玩家都不仅仅是宅在家里只会玩游戏而已,他们都有社会属性,尤其是作为青少年,正在以旺盛的精力感知这个世界,我们能不能带给用户真正这个年龄段他们感兴趣的文化。

想要干这个事儿,比较快捷的路径是找到调性相符的品牌,在跨界合作中,调动双方的品牌基因,形成化学反应。常规游戏产品的跨界合作形式通常是以资源置换和短期传播一波流为主,找两个品牌的共同契合点,然后做一波包装,你在产品上有我的素材,我在游戏中植入跟你品牌相关的道具。这种形式的合作过于依赖单点素材,且对用户的刺激也相对较浅。我们想要做点不一样的。

有一天我们的QQ飞车品牌经理兴冲冲的跑来说,他在微博上联系到了Vans中国,对方有合作的意向,但是他们从来没有跟游戏品牌合作过,对如何延续双反的品牌价值有担忧,另外他们还提出50年的Vans品牌有一套非常严格的视觉体系,在创意设计上怎么能够符合这个视觉体系又能融入飞车的元素?听完这句话我们的设计师小真就不干了,还质疑我们对风格的把握,哥可是专业干这个的啊,说完就翻开工卡。

翻开工卡背面的卡片,小真还珍藏着几年前参加Vans比赛的时候产出的插图作品,也正是他的缘故,Vans CN开始放下对于设计品质和风格的顾虑,这次合作也算是正式前线搭桥成功。现在小真被戏称“随我造之父”

设计师的对外影响力非常重要,要懂得使用优秀的平台对外展示自己,积极参加一些有影响力的比赛,给自己创造更多的机会,这就是软实力。如果没有小真这个内容设计师的存在,有可能这个项目推动起来有很强的沟通成本,甚至无法推动下去。

牵线之后,我们成立了专项小分队,仔细分析了我们到底能做到什么地步,品牌给予了我们很大的发挥空间和支持,但也提醒我们步子迈得太大容易扯着蛋,在当以传播为导向的营销中,在爆款H5如日当头的背景下,我们还是坚持做一个长线的体验,把真正的街头潮流文化带给我们的飞车用户,鼓励年轻人表达自我—-OFF THE WALL(浓浓的一股子使命感油然而生)。

我们把整体跨界合作分为四个部分:

  • 对整体的活动进行视觉包装和预热,让用户知道他们可以做什么,得到什么。
  • 搭建在线平台,号召用户上传作品,在线创作作品。
  • 将优质的UGC内容和作者进行包装和升华。
  • 将放大升华后的内容再植入游戏内。

对整体的活动进行视觉包装和预热

用Rock手势+画笔的图形来作为整体涂鸦大赛的ICON,用#随我造#作为活动的名称,传达“追随内心,自由创造”的含义。

在主KV方面将游戏中的赛道,汽车等竞速类元素与课堂相关的物品,塑造了一个小橘子脑洞大开的场景,风格上融合插画,版画,涂鸦等类型,在强调氛围的同时保证单个物品的独立识别,保证主ICON的最大识别面积。

我们选用贴近用户的校园场景 拍摄了TVC和动态海报来作为预热,让有个性,渴望表达的用户共鸣。TVC播放量473W ,“他们说”动态悬念海报引发用户猜想,话题浏览量突破10W。

搭建在线平台,号召用户上传作品,在线创作作品

我们设计了用户创作平台,征集游戏角色插画,通过网页端3D控件,在线实时改装赛车和板鞋设计。页面PV4000万,作品回收过5万,点赞人数207万,是飞车历史上参与度最高的品牌活动。

可以看到飞车用户有比较强的创作欲望,不管是否专业,从作品里可以感受他们对飞车的IP形象小橘子的热爱,我们从中找到了几位涂鸦作品的作者,准备开始下一阶段的工作。

将优质的UGC内容和作者进行包装和升华

团队中的多媒体设计师二娃独自一人完成了的人设,分镜,特效,动画,用两个月的时间输出视频。

有时候一个设计作品可以作为沟通语言,效果甚至超过谈判与商务技巧,Vans总部认为游戏角色很好的与Vans精神进行了融合,Vans总部50年来破例迎来一群来自中国的游戏玩家们。我们将所有的行程拍摄成纪录片,反馈给产品的用户。

活动告一段落之后我们通过产品10-11月的用户调研结果看到,飞车用户对此次活动的满意度达到78%,也是历史新高,用户对17年合作的期待度达到83%。

由于2016年跨界合作过程中,TGideas团队与合作方积累了较好的信任度,所以2017年的合作已经开启,基于去年的积累,今年的跨界合作我们更期望把“随我造”变成一个平台,能够持续给游戏用户带来Vans所倡导的OFF THE WALL精神,并把这种精神落实到音乐、滑板、游戏等潮流文化的领域。设计团队为了能够帮助活动达到预期,必须在2016年的基础上,不断输出更加到位的视觉包装与活动策划建议。

将原有的产品的IP角色进行升级和改造,为后续的跨界合作提供更加适合的连接方式。同时也为IP的故事延展积累素材。

小橘子作为游戏内的IP代言人,深入玩家的内心,但是在游戏原画美术的范畴里,角色的美术表现更加的夸张,更具有想象力,符合用户对游戏体验的期望值,但是一旦把角色拿到现实就会格格不入,尤其是合作品牌由自己强烈调性的时候,这种违和感就会加强。

通过我们的分析,小橘子属于18岁刚刚步入成年的女生,她穿上赛车服应该是一种酷酷的,略微性感的Look,在现实生活中,她应该是一个个性,随意,洒脱的女孩子,属于萝莉和御姐之间的状态。

跟以往不同的是,我们一开始并没有去参考太多动漫形象的设计和设定,而是从现实生活中找一个活生生的参考,经过大量的梳理,我们认为最近流行的TOM BOY风格符合性格设定,把没有出柜前的暮光女,作为我们对角色的视觉印象。我们也总结出角色设定的关键词。

△ 将#随我造#的核心视觉进行延展

强化品牌视觉资产

将Rock手势+画笔的图形进行多维度延展,结合音乐、怪企鹅、鞋子和滑板等变成一个无限延展的组合形式,风格更加灵动,潮流感。但是能够保证手势的清晰识别,经过长时间的推广和用户认知,这个就可以变成品牌视觉资产。

2017#QQ飞车×Vans随我造#即将在艺术、音乐、游戏、潮流文化方面进一步创造,变成游戏用户UGC内容的平台,进一步把相关的内容带给用户,我把手势的部分做了延展和夸张,作为各个模块的主视觉。

与HOUSE OF VANS深入合作,首次打造国内网络游戏产品与HOV的跨界。

我们分析了以往HOV的设计风格,我们既要保持已有的调性,但是又想做出不一样的感觉,为了能够更好的融入两个品牌视觉,我们将游戏角色用涂鸦的形式进行包装,尽可能让两个品牌在视觉上融合贯通。在设计原则上保证元素独立和更多组合的可能性。

游戏logo大多数采用绘画式的质感表现,元素较多,如果设计之初能考虑后续的延展,就需要输出线稿和黑白稿,来满足不同场合的应用。

为了能够让小橘子更好的跟HOUSE OF VANS贴合,我们设计了众多辅助图形,让小橘子能够更加自然融入现场场景。

尝试将KV中涉及到的元素实体化,场景化,输出了#QQ飞车×VANS随我造#乐园场景概念设定,为后续故事的展开积累场景素材。

 

为了能够对QQ飞车主体的HOV进行预热,我们拍摄了一条Video来进行传播,让小橘子进入现实场景,营造有创意,好玩有趣的氛围,提升用户对活动的期待度。

为了能够撬动公司内的优质设计资源,联合怪企鹅,QQ音乐,QQ空间,游戏美术,TGideas进行了滑板涂鸦活动,并最终展示在活动现场。后续通过各自渠道的传播,也带动了活动本身的曝光。

现场搭建的过程中,尽可能平衡现场游戏视觉部分与HOV本身的调性,保证到场的用户有各自的归属感。

#QQ飞车×Vans随我造#项目2017年只是完成了开端,对于创意和设计团队,仍然要用在自身的技能能够帮助产品解决实际的问题,想对所有设计师说,我们一直把自己作为工作流水线的末端,习惯扮演通宵修改十版,最后用回第一稿的受害者。不知道是因为太过于沉浸自己的小宇宙还是面对繁复流程的退缩,我们好像始终做不了主导,更别提从更宏观的角度来看待问题,寻找解决办法。对于INHOUSE的团队,以Campain为单位的需求类型,基本上品牌+视觉+多媒体+视频类美术指导+开发+PM已经成为标配,在这种相对平行的Team中,谁都可以成为一个主导,承担更多边界模糊的工作,那么你就会更加深入了解一个项目,沉淀到更多的经验。加油!

「腾讯游戏当年做过的重磅案例」

  1. 《亲历者说!火爆的“吴亦凡入伍”HTML5背后有哪些设计故事?》
  2. 《刷爆网络的「薛之谦憋大招H5」,设计师是这么做出来的!》


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

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/qqspeed-and-vans-design

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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