详细内容

《英雄联盟》手游UI分享

《英雄联盟(League of Legends)》手游,是由美国拳头游戏(Riot Games)开发、中国内地由腾讯游戏代理营运的《英雄联盟》正版MOBA竞技手游,国服于2021年7月20日开启测试,在UI设计方面有很多值得我们学习的地方,下面我们来看看它是如何做的。



引导类





253.gif
- 摇杆引导 -


254.gif
- 引导任务&完成 -
完成引导任务后,任务完成的提示会化为一道光注入引导任务,并使其刷新成任务完成,通过光效引导玩家注意力,一气呵成。


255.gif
256.gif
人机匹配引导 -
通过黑色遮罩缩放动效聚焦视线,让玩家能清晰看到引导操作区域。


257.gif
- 分路引导 -
使用动效依次展示信息,防止玩家信息过载。


战场相关






258.gif
- 匹配 -
匹配流程涉及多个界面的跳转,但是设计师通过动效将其流畅地串联起来,减少打断感。


259.gif
- 选择英雄- 
玩家锁定英雄后进入5人模型展示界面,且玩家可在此更换皮肤并预览模型效果。


260.gif
- 进入战场 -
将锁定英雄后显示5人模型,其中一个好处就是可以加入5个被征召穿越的特效,增加出战的仪式感,并给英雄进入战场赋予了空间意义。


261.gif
- 边缘区域发现敌人 -
边缘区域属于边缘视觉区域,通过加入闪光,让玩家可以注意到边缘区域的敌人,及时做出应对。

265.gif
- 队友发信号 -
队友发出指令同理,也通过发光动效提示玩家注意边缘视觉区域的信息,使信息传递有效。

263.gif
- 沟通指令 -
游戏提供了3个快捷指令,同时加入了长按操作,可以滑动并在地图中标记信号点。


264.gif
- 技能画中画 -
当技能作用区域与玩家英雄位置不在一屏时,会出现画中画辅助玩家查看视野外发生了什么,比如传送过程中正在挨打,或者引爆扔出屏幕外的桶伤害敌人。


266.gif
- 战斗胜利 -

267.gif
- 胜利点赞 -
通过加入发光特效,强化点赞的视觉反馈。且只有点赞后再会出现加好友的选项。


268.gif
- 胜利后完成任务 -
通过动效引导玩家注意力,先注意右侧区域的进度完成,然后通过光效引导玩家视线从右转向左,查看总进度。

269.gif
- 战斗数据统计 -


战场外系统






270.gif
- 主界面 -
主界面主体为大幅可动的插画构成,显得极为清爽大气,中央插画区方便日后为新英雄新活动提供展示区域,右下角开始按钮最为明显醒目,刺激玩家多开始匹配提升游戏活跃。


271.gif
272.gif
- 游戏商城 -
274.gif

- 活动系统 -


275.gif
- 公告系统 -
公告系统不同于一般游戏只用文本展示公告内容,设计师提供了多种展示形式,让公告信息更易读。


276.gif
- 英雄库 -


277.gif
- 局内快捷消息设置 -

局内快捷信息设置,使用穿梭框控件,但是对穿梭框进行了交互反馈改进:

1)删除已选中的条目A,如回到左侧候选列表,会出现光效提示,告知玩家条目A已返回到候选列表中

2)拖动条目更改顺序时有被影响的其他条目有光效提示,强化了交互反馈的清晰度



社交





278.gif
- 好友聊天入口提示 -
当有好友发送信息时,好友按钮会直接显示该好友头像&红点,并且点击后会直接定位到此好友并展开聊天页。


279.gif
- 添加好友 -
添加好友列表,系统通过生成标签,促成玩家通过匹配标签加好友,且默认申请文本有趣,容易破冰。


280.gif
- 赠送好友英雄 -


获得物品&英雄






281.gif
- 测试期签到 -

282.gif
- 等级提升 -

等级提升动效分为两段,第一段主要提供夸张的动效放大升级的成就感,第二段展示升级获得的奖励,前期升1级基本都会赠送一个新英雄,可大大提升每次升级的成就感,刺激玩家进一步提升等级。



283.gif
- 获得奖励 -


284.gif
- 首充自选皮肤 -


285.gif
- 选择奖励英雄 -
 完成前期引导后,玩家可五选一一个英雄作为奖励。


Copyright @ 2021 GameTube All rights reserved. 
技术支持: 聚成网络科技 | 管理登录