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

【 tulaoshi.com - 平面设计 】

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

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

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

弗雷尔卓德之心 布隆

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

(扫码可看动效，下同)

迷失之牙 纳尔

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

星界游神 巴德

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

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

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

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

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

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

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

下列为推广渠道分布

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

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

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

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

感谢大家关注~~

设计：帅强

重构：大思敏、小海