020-29815005
预约专线时间:09:00-23:59

优漫教育:LOL英雄移动端界面UI设计分享

新闻来源:优漫教育 日期:2021-12-08
随着移动互联网的迅猛发展,对于游戏的活动宣传渠道不再局限于PC端,微信、手Q、掌上英雄联盟成为英雄联盟重要的推广渠道。在新英雄、新皮肤的移动推广,做了不少的尝试。接下来跟优漫教育小编聊聊UI设计实战,LOL英雄移动端界面UI设计分享。
      随着移动互联网的迅猛发展,对于游戏的活动宣传渠道不再局限于PC端,微信、手Q、掌上英雄联盟成为英雄联盟重要的推广渠道。在新英雄、新皮肤的移动推广,做了不少的尝试。接下来跟优漫教育小编聊聊UI设计实战,LOL英雄移动端界面UI设计分享。

 LOL英雄移动端界面UI设计分享

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

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

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

(扫码可看动效,下同)

 

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

 

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

 LOL英雄移动端界面UI设计分享

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


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

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

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

UI设计培训

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


以上就是优漫教育小编为大家介绍的“UI设计培训分享:LOL英雄移动端界面UI设计分享”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解,并能快速入门掌握ui设计,实现升职加薪丰富技能。