DStart:随着移动互联网的迅猛发展,对于游戏的活动宣传渠道不再局限于PC端,微信、手Q、掌上英雄联盟成为英雄联盟重要的推广渠道。在新英雄、新皮肤的移动推广,做了不少的尝试。

1yx20150701

以上为2014年6月至2015年6月新英雄移动端推广页面,以及2015年推出的娑娜终极皮肤-DJ娑娜移动端推广页。

在引入页的设计上,设计师根据英雄特性做不同的引入交互,再通过帧动画、CSS3、canvas技术让用户在浏览页面过程中进行一个互动,更形象简易的了解新英雄特性。

弗雷尔卓德之心 布隆

布隆的被动技能通过普通攻击和Q技能对目标身上增加“震荡猛击”,当“震荡猛击”层数到达4时,就会被击晕,那么在引入页上就利用这一特性,通过点击屏幕狙击能量唤醒新英雄。主要利用JS+帧动画效果完成。

(扫码可看动效,下同)

3yx20150701

迷失之牙 纳尔

套用一下纳尔视频介绍里的一句话“纳尔是一个灵巧的小动物”,因为是动物,所以通过寻找“神兽”这样的一个定义来进行英雄的唤醒,技术上通过canvas擦除+帧动画来进行交互实现。

4yx20150701

星界游神 巴德

巴德的存在会导致神奇的调和之音出现,这些调和之音会为巴德提供经验值,法力和移动速度加成。那么通过他的这一被动技能,我们通过点击收集调和之音的方式来进行英雄的唤醒。

5yx20150701

在内容展示上,移动端英雄专题内容参考PC端页面展示内容,展示英雄原画、背景故事、介绍视频、基本技能、技能视频,由于移动端页面更趋向于轻巧及可读性,于是摒弃了英雄截图、英雄克制技巧及使用技巧。下面我们看一组数据。

2yx20150701

由于手机浏览过程中,用户浏览操作页面会上下翻页,在进行数据统计时未进行数据去重,故到达率超过100%,但是仍可以看出页面触达率较高,背景故事、技能、视频等的浏览率值较高,页面内容布局较为符合用户所需。

有关内容有一项补充,在布隆专题的时候,有尝试在移动端进行英雄、皮肤的购买,但是购买的转化率不是很好,于是在后续的两期中,将新英雄、皮肤的购买去掉。以下为购买按钮的点击数据及转化率。

购买按钮点击数据(占比:点击量/页面浏览总量)

6yx20150701

购买数(从点击购买按钮到购买成功的转化率为:33.4%)

7yx20150701

在页面推广上,也进行了一些尝试性的推广传播。下面为三期英雄5天的PV\UV

8yx20150701

下列为推广渠道分布

9yx20150701

布隆主要通过微信消息推送、官网扫二维码进行传播, 纳尔除了保留布隆的传播渠道外,更增加了掌上英雄联盟这个传播渠道,掌盟流量占比达到62%,巴德则继续沿用纳尔的传播渠道,另外增加了微博、手Q两个渠道,然而增加的这两个渠道并没有带来很大的流量,这一期掌盟的流量占比达到99%,可以看出用户通过手机获取相关英雄联盟信息多为通过掌盟APP。

讲完有关新英雄的一些数据,那接下来我们了解一下新皮肤的一些数据,在3月的时候,终极皮肤–DJ娑娜在移动端进行了一个专题推广。再来放一下二维码。

10yx20150701

关于英雄皮肤,用户更关心的是皮肤的是否好看,皮肤特效是否酷炫,皮肤专题的内容制作上设计师更注重皮肤的原画展示、皮肤的特效视频展示。页面不需要过多的特效渲染,而更突出皮肤本身的酷炫效果。

在DJ娑娜移动端的推广上,有了前2期新英雄的推广经验,在新皮肤的推广上更注重掌盟的推广,以下为DJ娑娜皮肤一些数据。

11yx20150701

12yx20150701

感谢大家关注~~
设计:帅强
重构:大思敏、小海

【最新的实战好文三篇】

网页重设计的7个环节!
《实战经验!搞定网页重设计的7个必要环节》

有第一稿就可以一劳永逸的方法!
《百试百灵!设计师如何不依赖灵感进行设计工作?》

字体设计的另一个方法!
《字体进阶篇!如何用衬线加强法做字体设计?》

原文地址:tgideas.qq

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

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量97万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

点赞
收藏
继续阅读相关文章

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 
载入中....
评论 收藏