游戏开发论坛

 找回密码
 立即注册
搜索
查看: 11714|回复: 0

《英雄联盟》手游UI设计分析

[复制链接]

4万

主题

4万

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
85217
发表于 2020-11-2 15:42:02 | 显示全部楼层 |阅读模式
微信图片_20201102152401.jpg

《英雄联盟》手游(以下简称LOL-M)在海外上线,在UI设计方面有非常多值得我们学习的地方。信息爆炸的时代,信息做减法、轻量化就变得尤为关键。我认为LOL-M在这方面做到了一个新的高度,做了一些我们想做却不敢做的设计。结合这两天的体验,本文从6个维度和大家分享UI设计中值得我们学习的地方。

1、设计的轻量化

整体UI画面乍一看会有:就这?,不过如此嘛,我上我也行...等等错觉,但真正用起来后才发现是—真香!

设计并没有一味追新炫技,甚至有些“复古”,而是把重点放在了做减法上。

如何做图形化

主界面设计非常简洁、克制,突出 “ PLAY ” 按钮。

微信图片_20201102152410.JPG

除了玩家名字和左边的一个活动入口按钮还有一些必要的代币数量这唯三的地方有文字表达外,其他信息全部用图形化表达。

设计师用了4种方法让图形化具有了可执行性:

1.极致简洁

在图形设计上追求极致的简洁,放很小也能看得很清晰,看起来有克制的精致感

微信图片_20201102152413.JPG

2.利用信息折叠来消除理解误差

做图形化的时候我们往往会担心理解误差,LOL-M的设计师给出的解决方案是在图标入口点击进二级界面时在标题处告诉你进入的是什么系统,这就有效解决了理解的偏差问题,是对信息折叠处理的第1个妙用。

微信图片_20201102152416.JPG

微信图片_20201102152421.gif
GIF演示

信息折叠的第2种方法:用点击弹出tips弹出图标解析很好的替代了PC上的悬浮弹出交互,这样就能够对一些无法理解图标进行点击查看。

微信图片_20201102152424.gif

微信图片_20201102152426.gif
关于信息折叠不仅可以用在图标上,包括一些被简化的信息上

信息折叠的第3种方法:隐藏非必要信息聚焦当前选择的信息。

例如我想要了解某个技能的详细描述时,点击技能图标就只显示当前技能的详细描述,这样阅读信息就能够更加聚焦,避免了技能展示界面信息爆炸的尴尬。

微信图片_20201102152429.gif

3.在一些需要使用文字表达的地方,图标和文字互斥的方式来进行设计。

意思就是用图标的地方不用文字,用文字的地方不用图标,避免图标和文字一起使用引起的信息重复,使画面保持简洁。此方法用在不同的页签及入口上。

微信图片_20201102152431.JPG

微信图片_20201102152434.JPG

微信图片_20201102152436.JPG
以上为用图标案例

微信图片_20201102152601.JPG

微信图片_20201102152603.JPG
以上为用文字案例

4.7±2记忆法则

人类的短时记忆的容量为7±2 ,即一般为7 ,并在5-9之间波动。这就是神奇的7±2效应。

主界面下方的图形化菜单入口为6个,避免因为图形化带来的记忆负担,此做法多处运用在游戏UI设计中。

微信图片_20201102152605.JPG

英雄选择最多展示5个,其他的折叠起来:

微信图片_20201102152607.JPG

微信图片_20201102152609.gif

2、IP的延续

游戏中界面做了大量的简洁轻量化的设计,界面边框和控件基本没有做任何的装饰

微信图片_20201102152613.JPG

微信图片_20201102152615.JPG

微信图片_20201102152618.JPG

微信图片_20201102152620.JPG

微信图片_20201102152622.JPG

整体氛围和用色延续PC版本,并且在一些细节设计上延续了PC版上具有IP特征的凯尔特图形,只是变得更加简洁和克制。

微信图片_20201102152623.JPG

3、信息不同展示方式的切换

相同的信息可以切换不同的展示方式,有快捷高效的有信息详尽的,照顾不同的玩家使用习惯。

例如天赋的选择上,新手一般不需要自定义使用默认即可,老司机可能就需要能够自己编辑了,把这两种需求通过切换的方式实现来既可以满足不同玩家的需求又保证了画面的简洁度。

微信图片_20201102152632.gif

微信图片_20201102152634.gif

微信图片_20201102152636.gif

4、文字的设计

通过不同字号大小、颜色、合理的信息归纳和排版来实现文字的层级区分与重要信息的可读性。在这些点上相信大家都有了解。

但LOL-M在这方面做得更为极致,通过对比发现,同一组的信息里最大字号为46号 最小字号仅为14号,并且重点文字的颜色更为明亮。通常我们在手游中很少使用低于20号的字,随着手机分辨率的提升这个标准也在发生改变。通过加大字号大小的跨度来区别重要和非重要信息使得层级变得更加一目了然,让玩家更容易获取到重点信息,降低阅读难度。

微信图片_20201102152638.JPG

5、减少打断感让体验更流畅

LOL-M的设计师在很多地方都用了左右划出的方式来避免体验的打断感:

微信图片_20201102152641.gif

微信图片_20201102152643.gif

如果一定要弹出式,则把面板做一定的透明度,同样可以降低打断感,例如局内游戏参看装备购买页时面板带有透明度,可以透过面板也可以大概看到场景内的情况,有利于玩家做判断。

微信图片_20201102152645.JPG

6、准确表达交互意图的动效

合理的动效设计除了能够让体验更加顺畅,还可以帮助玩家理解交互意图。

这方面LOL-M可谓做得很到位了。

微信图片_20201102152647.gif
匹配成功后进入选角的转场动效

微信图片_20201102152649.gif
锁定角色后切换到备战画面,让玩家感知角色已锁定

微信图片_20201102152652.gif
备战画面通过动效可以看到队友选角色和就位情况

微信图片_20201102152654.gif

微信图片_20201102152656.gif
准备就绪后传送至战场即顺畅又合理,同时也增强玩家的代入感,酷炫到不行

最后放送一波游戏截图

微信图片_20201102152658.JPG

微信图片_20201102152701.JPG

微信图片_20201102152703.JPG

微信图片_20201102152705.JPG

微信图片_20201102152707.JPG

微信图片_20201102152709.JPG

微信图片_20201102152711.JPG

微信图片_20201102152712.JPG

微信图片_20201102152714.JPG

微信图片_20201102152716.JPG

微信图片_20201102152719.JPG

微信图片_20201102152721.JPG

微信图片_20201102152723.JPG

微信图片_20201102152725.JPG

微信图片_20201102152727.JPG

微信图片_20201102152729.JPG

微信图片_20201102152731.JPG

微信图片_20201102152733.JPG

微信图片_20201102152735.JPG

微信图片_20201102152737.JPG

微信图片_20201102152738.JPG

微信图片_20201102152740.JPG

微信图片_20201102152743.JPG

微信图片_20201102152745.JPG

微信图片_20201102152746.JPG

微信图片_20201102152748.JPG

微信图片_20201102152750.JPG

微信图片_20201102152752.JPG

微信图片_20201102152754.JPG

微信图片_20201102152756.JPG

微信图片_20201102152758.JPG

微信图片_20201102152800.JPG

微信图片_20201102152802.JPG

微信图片_20201102152804.JPG

微信图片_20201102152805.JPG

微信图片_20201102152807.JPG

微信图片_20201102152809.JPG

微信图片_20201102152811.JPG

微信图片_20201102152813.JPG

微信图片_20201102152815.JPG

微信图片_20201102152816.JPG

微信图片_20201102152818.JPG

微信图片_20201102152820.JPG

微信图片_20201102152822.JPG

微信图片_20201102152824.JPG

微信图片_20201102152826.JPG

微信图片_20201102152828.JPG

本次LOL-M界面设计分析主要围绕局外界面,对各品类游戏UI设计都有学习借鉴之处,希望对大家有帮助。可能还有许多优秀的点我没有讲到,欢迎大家留意讨论,或者在交流群发表看法。局内的UI体验也非常棒,篇幅原因下次抽空再针对性做一次分享。感谢您的阅读,如果喜欢给个点赞3连啊!

文/陈心添
来源:老司机UI CLUB
原文:https://mp.weixin.qq.com/s/bQ_1fd--yCpu5Yq2VHtmqg

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-10-7 09:14

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表