建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!

网站模板_网站源码_网站素材_建站教程_建站学习网

当前位置:建站学习网 > 网页设计 > HTML5教程 >

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

更新时间:2017-04-11整理编辑:建站学习网阅读:0

   腾讯游戏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的玩家来说就像是一个真正的士兵得到了嘉奖一样。所以我们调用了游戏的数据来针对发放玩家相对应的等级称号。强化游戏特性,体现游戏的真实感,从而触达玩家继续喜欢这款游戏。

  整个的H5主要流程与体验就是围绕着社交化的强关系链的纬度来促进拉新进的核心展开的设计,尝试一些用游戏的数据体现,来促进玩家的兴趣和分享率。

  经过项目组和微信团队的讨论和纠结,以拉新进为核心目标的方向上,我们把方向2—强关系链的这个H5作为了这次上微信朋友圈广告的H5。(相信也会有很多小伙伴还有印象吧)

  三、《全民突击》微信朋友圈广告总结与反思

  在整个过程中我们设计组和项目组,以及与微信团队之间的跨团队协作能力有了很好的提升,提高了相互的信任的友好态度,开阔了我们之后在合作的时候有更好的经验和心得。这也是我有史以来第一次接到那么大的一个项目需求,受益良多!

  在这里感谢在这次项目里付出的小伙伴们!谢谢给我们的信任和支持!

  下面给这次的朋友圈广告做一个小总结,也希望给今后即将要接触朋友圈广告的小伙伴一点启发:

  1.高曝光属性的朋友圈广告环境更利于品牌的知名度/认知度提升,除非已是知名度很高的大众类产品,如快消类品牌/汽车品牌等。(建议:可考虑将微信朋友圈广告做为其中一项广告触达渠道,同时,配合市场其他整合立体式的营销手段多次广告触达达成深刻印象度及最终转化,而非仅单依靠单一投放手段);

  2.朋友圈广告设计的90%精力应关注外层创意的设计,努力实现外层创意即能概要传达广告主旨,而非押宝在点击详情

  3.H5的页数建议不超过4页,尽管这样,大部分用户因为种种如网络卡/没兴趣等原因,在进入H5后的第一页就选择了关掉页面!验证了:朋友圈广告,90%的精力应放在外层创意!H5创意中,90%的精力应放在第一页!第一页就引起强烈好奇!进入第二页后崩失率大大减少。

  4.全民突击游戏客户端300MB,企图用户观看广告点击详情进入观看完H5再点击下载游戏,此行为要求过于理想,朋友圈广告更适于如领取红包/礼包/代金券等轻互动体验。

  整个的微信朋友圈广告的项目完成时间是很紧张,但是我们还是噌噌噌的保质保量的完成了这次的项目。附加一个我们这次H5的设计时间流程:

  感谢耐心的你,听我在这里唠唠叨叨碎碎念的把这个项目说完了。

  这是对我的一个总结,也希望能给你一些有用的经验!下次见~

本文网址:https://www.dedexuexi.com/wysj/html5/2661.html

本站部分文章搜集与网络,如有侵权请联系本站,转载请说明出处。

标签:前端
收藏此文 赞一下!() 打赏本站

如本文对您有帮助,就请建站学习网抽根烟吧!

支付宝打赏
微信打赏
关于“吴亦凡入伍”H5背后的故事
« 上一篇2017年04月11日
为何不要用「h5」这个简称?
2017年04月11日下一篇 »
  • CSS代码鼠标经过图片变换图片的几种方法
    0阅读
    CSS代码鼠标经过图片变换图片方法如下:方法一:在css中,可以利用“:hover”选择器和“background-image”属性实现鼠标滑过改变图片效果,只需要给图片元素添加“图片元素:hover{background-image:url(新的图片路径);”样式即可。
  • 如何利用html+css设置菜单栏缓慢下拉效果?
    0阅读
    如何利用html+css设置菜单栏缓慢下拉效果?解决方法和相关代码分享如下:方法一:过渡(transition)对forum_box开启绝对定位(absolute),让里面的li从其父元素中脱离出去,不然会把之后的内容往右挤,并且设置overflow:hidden,设置高度为0,鼠标移入后再设置相应...
  • 纯css3实现下拉箭头、关闭按钮旋转效果
    0阅读
    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一。但是css3可能要求浏览器执行很多的工作来完成这个动画效果的渲染,这有可能导致浏览器响应缓慢,因此,在使用一些复杂的特效时,大家需要考虑清楚。不过这样的...
  • 使用HTML5的Canvas绘制曲线的简单方法
    0阅读
    Canvas2D自带的曲线方法 最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用
  • html两个文字之间有一个空格的解决办法
    0阅读
    碰到过这样一位朋友,在编写的html代码里面出现两个文字间有空格的情况,两个文字之间他没有加空格符,也没有代码。 这个情况在html编码使用不太多或不太熟练的情况下,很难找出问题。
 
QQ在线咨询
×
欢迎您登陆建站学习网
QQ一键登陆 建站学习网账号登录