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

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

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

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

弗雷尔卓德之心 布隆

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

（扫码可看动效，下同）

迷失之牙 纳尔

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

星界游神 巴德

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

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

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

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

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

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

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

下列为推广渠道分布

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

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

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

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

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

【最新的实战好文三篇】

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

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

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

原文地址：tgideas.qq

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

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