LOL新英雄与新皮肤移动端页面设计分析

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:tgideas   作者:帅强

关键词

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

LOL新英雄与新皮肤移动端页面设计分析

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

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

弗雷尔卓德之心 布隆

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

(扫码可看动效,下同)

LOL新英雄与新皮肤移动端页面设计分析

迷失之牙 纳尔

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

LOL新英雄与新皮肤移动端页面设计分析

星界游神 巴德

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

LOL新英雄与新皮肤移动端页面设计分析

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

LOL新英雄与新皮肤移动端页面设计分析

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

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

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

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

LOL新英雄与新皮肤移动端页面设计分析

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

LOL新英雄与新皮肤移动端页面设计分析

下列为推广渠道分布

LOL新英雄与新皮肤移动端页面设计分析

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

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

LOL新英雄与新皮肤移动端页面设计分析

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

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

LOL新英雄与新皮肤移动端页面设计分析

LOL新英雄与新皮肤移动端页面设计分析

 收藏