聊聊实战!LOL新英雄与新皮肤移动端页面二三事

2015/07/01 6185

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

uisdc-tuweia-2

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

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

sdcweixin

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

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

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

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