《全民突击》HTML5设计全程回顾及经验总结

星期一 2016/02/15 0:00 阅读：12765 评论：2 作者：ivan 分类：H5、UI设计

小宝：腾讯游戏HTML 5实战案例！在这次朋友圈广告的设计过程中，遇到了好多拦路虎，有惊喜有郁闷，但在这个过程中我收获到了很多关于设计的经验和对项目的理解。下面，我以设计师的角度来分享一下在这次朋友圈广告中的一些过程和感悟，附设计流程图哟。

前言

最近有好多好多的优秀的朋友圈广告出现在我们的眼前，得到了好多人的关注。

小宝也很期待能够做一个有意思的朋友圈广告给大家玩玩，没想到梦想成真了！

这篇有趣的文章呢，我会分3大部分来和大家讲述，请屏幕前的你耐心的听我“墨迹”呗：

一个前所未有的挑战；
《全民突击》朋友圈广告的设计回顾；
就是很有震撼力的总结了；

接下来我就开始了呀！

一、前所未有的挑战

（空降了一个大大大需求）

听说一款3D枪击手游《全民突击》要上微信朋友圈广告了呀。项目组的同学们和我们设计师们都惊呆了，手忙脚轮的赶紧的展开筹划和讨论。

1.01项目背景

随着枪击手游的竞争越来越凶，玩家对《全民突击》的认知还是不够，需要做一次品牌的曝光宣传，让玩家对《全民突击》的认知更深入做到拉新的一个宣传效果，也借助微信朋友圈广告的渠道，打造一个《全民突击》是第一个上微信朋友圈广告的枪击游戏品类的游戏。小伙伴们都“鸡冻湿”了！

1.02需求目的

《全民突击》要在这个阶段进行一次拉新，品牌曝光，提升产品知名度，还要保持老玩家活跃度和拉回流的目的，转化新进，提升市场占有率，做一次品牌的整合传播推广，围绕整个初始想法策划了一个H5对其进行传播。

随后也制定了这次朋友圈广告的定位人群的投放机制：

投放机制的目的也就是拉新进，就要针对目标用户来刺激，触发传播和曝光。打准目标玩家，信息才有效的提高到达率。

对于前期的项目目标的挖掘和制定方向，我们与项目组也讨论了很久，最后也很谢谢大家的相互积极的配合，有效率的做出了一些决定，让我们继续的往下走。

二、《全民突击》微信朋友圈广告的设计回顾

2.01前期构思

这个环节是最要人抓狂纠结也是最能学到东西的环节。我们对这次的设计创意进行了头脑风暴，针对微信朋友圈广告的纬度，围绕着：

a.情感的表达是不是会更适合？

b.游戏的元素要不要也要在里面有所体现？

c.哪些内容会对玩家有排斥或者反感？

d.表述的故事情节会不会过于简单了，玩家根本不在乎？

e.拉取微信与游戏信息会不会有隐私的风险？

……….（无止境的在思考和抛出所有想到的问题，只因为我们的脑汁太多了）

经过反复的纠结与考量，我们选出了2个方向进行设计：

方向1：

情感化：从小爱玩枪-爱枪的天性，讲述一个从小到大，玩具枪的演变，呼唤天性—关联全民突击的游戏特性：枪在手随时战。（洞察：男人都喜欢玩枪，这个是天性，我们的目的就是想让喜欢玩枪的男性用户都来玩我们的《全民突击》，来体验拿枪来征服世界的快感！所以我们用枪的这个媒介做一个情怀的故事，想触发每个男人心中的爱枪梦，从而达到拉新进的核心目的）；

方向2：

社交化：运用游戏的故事+社交（强关系链），千人千面的社交化表现，叙述一个号召你加入战斗的故事；（洞察：玩游戏最好玩的是什么？是能和朋友一起玩，一起吐槽…所以我们运用朋友的这个关系，做一个强关系链的互动，表达出“我们那么多人都来玩了，你怎么还不来玩呢？”的一个拉人的情景，激发他也加入游戏，从而达到拉新进的目的。这就是人人都玩，我也要玩的心理打法）。

下面就开始介绍一下让人紧张刺激的设计过程：

2.02设计过程

（纠纠结结，反反复复，日日夜夜）

根据定好的设计方向的思路，我们开始了对我们的概念和想法方向进行了交互设计——想法平面化，深有体会的是，我的交互设计（高进度交互稿）有效的提高了我们和微信团队，还有与老大汇报的工作效率和热情。很多的体验和细节都可以直接在交互稿体现和直接搜集建议优化修改，促进了跨部门合作的效率。

方向1创意过程：

情感化——不变的玩具，男人永远的游戏

推导思路：

《全民突击》的玩家比例是9：1（男性玩家占据了所有），所以我们在探究为什么大多数都是男生喜爱玩枪击类游戏，枪的吸引怎么那么吸引人？难道这就是男生的天性吗？天生爱枪？

经过讨论和纠结，我们决定以不同枪的玩具形式为载体，承载“乐趣”到“热血”的情绪过渡和变化，最后以“重拾乐趣和热血”反转落到全民突击，点题“不变的玩具，男人永远的游戏！”唤起他内心的冲动，下载游戏玩一把。

交互图：

文案&交互流程：

1.一击命中的乐趣——自制弹弓

小时候，槐树下，擦干鼻涕，握紧弹弓，谁是百步穿杨，弹无虚发的那个神枪手。

2.英姿飒爽的荣耀——木头手枪

拼爹的年代，传说中的木头枪，谁把它别在腰间，成为了院子里的小将军。

3.横扫一切的勇气——无敌水枪

小时烈日硝烟里的“嗷嗷”声，湿透了裤衩背心，谁的水量最足，谁的射程最远，谁就征服了一整个夏天。

4.集结战斗的决心——BB弹枪

放学后，操场见，球台上摆出装备，篮筐下排好阵形，无数个小马哥跃身战场，谁能带领大家走向人生巅峰。

5.过度页

热血、刺激是枪的奥义。勇敢冲锋是战斗中不败的法宝。

6.落版页（交代主题，提供下载）

整个H5的感觉就像是回忆，一个一个枪的呈现与文案的相互配合，再有相应的环境衬托，营造整体的过去到现在的回忆的氛围感。

风格推导：

在整体的风格上我们使用了绘画的方式进行表达，在整体的画面会相对好把控和设计，如果是实体照片，相对在素材上需要很高的标准才能找到想要的效果，为了提高效率和质量，我们进行了绘画和字体排版设计。

视觉稿展示：

方向2创意过程：

社交化——集结号（一封战场来信，邀你一起并肩作战）

推导思路：

对于微信朋友圈广告的特性，除了打情感化的方向，还有一个方向就是打社交化互动方式的传播，打造千人千面的信息传播相对玩家来说是有吸引力的，玩家看到的是我和自己息息相关的内容，还有朋友的关系链的召唤，从而激发玩家有兴趣进行传播和推广。

以“征兵”与“集结”为核心话题，构造一个剧情为导火线，与社交关系结合引出我们需要你与我并肩作战的故事情节。

文案&交互流程：

在一个交互的逻辑梳理上，主要的就是针对3种人群做不同的表现（在文案上，在礼品发放上，在最后的铭牌上），千人千面的社交关系竟可能的做到足。

交互图：(备注：这个方向的交互稿是微信团队给出的方向，在这里也感谢微信团队的小伙伴们的合作支持）

视觉稿呈现与交互叙述：

1.外部图文的展示，一份征集令想得到吸引，吸引用户点进“查看详情”

2.在整体上使用了序列帧动画的形式来交代了P2的故事情节（想一开始给用户映入眼帘的就是一个相对有代入感的故事，吸引住用户继续往下看）；

3.创意亮点就是在这个拉取社交关系链的环节了。

通过全民突击注册用户及微信蜜友的提取及判定逻辑，根据纯新用户/活跃用户/拉新用户的判定，借助五位亲密微信好友的第一人称文案，拉动用户对广告及游戏的兴趣。（在不同的密友中，对用户所说的文案都是不一样的，是千人千面的一个重点的表现）；(备注：在这个拉取好友的逻辑技术，也是感谢微信团队的全力配合，结合我们游戏的数据和微信好友数的筛选机制做了一套拉取逻辑）

拉取逻辑：

在前期与游戏后台同学、微信游戏数据同学在讨论实现的逻辑问题和难点，最终就拍定了推送好友逻辑的方式，以及在文案的语感上我们都做了相对有好的语句来预埋，让强社交化的特性更为突出，对玩家更有触动性，更真实。

4.针对3种玩家人群推送礼包（潜在用户、活跃用户、流失用户）

这个也是在这次讨论中，考虑到了针对不同的人群采取不同的奖励机制，刺激玩家！提升拉新进的核心目标。

5.千人前面的徽章呈现

新人的是一个刚加入的狗牌，流失用户与活跃用户都是有等级的徽章（等级是拉取到游戏里的数据相互匹配的），为什么会设计这一个徽章的环节呢，因为其实只要是玩家都会对自己的一个数据，又或者是称号荣誉很是在意，荣誉感对于一个FPS的玩家来说就像是一个真正的士兵得到了嘉奖一样。所以我们调用了游戏的数据来针对发放玩家相对应的等级称号。强化游戏特性，体现游戏的真实感，从而触达玩家继续喜欢这款游戏。