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

1、设计的轻量化

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

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

如何做图形化

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

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

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

1.极致简洁

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

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

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

GIF演示

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

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

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

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

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

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

以上为用图标案例

以上为用文字案例

4.7±2记忆法则

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

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

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

2、IP的延续

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

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

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

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

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

4、文字的设计

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

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

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

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

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

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

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

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

匹配成功后进入选角的转场动效

锁定角色后切换到备战画面,让玩家感知角色已锁定

备战画面通过动效可以看到队友选角色和就位情况

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

最后放送一波游戏截图

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

《英雄联盟》手游UI设计分析相关推荐

  1. 谈一谈英雄联盟手游渲染技术与画面

    经过千难万险我终于在第一时间玩上了英雄联盟的手游,专门开一篇,谈谈lol手游的画面. 先看看pc版本英雄联盟的问题 英雄联盟作为一个上帝视角游戏,人物在战斗画面里占比极小. 拿一张截图为例. 1080 ...

  2. Incorrect string value utf8bm4 依然报错_英雄联盟手游报错出现LoginTimeOut 10010解决方法 lol手游公测43个英雄介绍_游戏频道...

    英雄联盟手游中经常会出现LoginTimeOut的报错,那么到底是什么意思呢?要怎么解决呢?希望下面这篇Login Time Out解决方法能帮到大家. 1.很多玩家都报错出现这个问题,这很可能是游戏 ...

  3. origin9语言设置中文_英雄联盟手游怎么设置繁体 LOL手游繁中设置方法?_英雄联盟手游...

    英雄联盟手游终于在海外部分地区上线了,不过玩海外服有一点不好,就是界面都是外文,比如英文.日文.韩文等等.那么英雄联盟手游怎么设置繁体中文呢,这里就来给大家介绍一下LOL手游繁中设置方法,将游戏语言切 ...

  4. 英雄联盟手游超燃测试服务器维护,《英雄联盟手游》超燃测试放号开启,轻松教你获得测试资格...

    说起英雄联盟手游这款游戏,国服的英雄联盟端游玩家们可谓是期待了好久,这不前段时间刚结束了A测,紧接着不久B测又来了,在座的小伙伴们想知道怎么获得英雄联盟手游国服内测资格吗?别急,让我们接着往下看,操作 ...

  5. 服务器登陆密码到期登不上去_英雄联盟手游注册系统炸服怎么回事?服务器瘫痪登不上解决方法[多图]...

    英雄联盟手游服务器在开测日一天就顶不住炸服了,由于人数太多导致注册系统炸服,很多玩家想要进入游戏的时候都发现登不上去,关于服务器瘫痪这个问题,下面也会带来详细的资讯,并给大家提供解决的方法. 英雄联盟 ...

  6. steam怎么看邮箱绑定的账号_lol手游appleid怎么绑定拳头账号 英雄联盟手游账号绑定方法_英雄联盟手游...

    我们在玩ios版英雄联盟手游的时候,是可以直接使用苹果id账号登录的,同时我们也可以将苹果id绑定到拳头账号上,那么lol手游appleid怎么绑定拳头账号呢,这里就来和大家分享一下苹果id和拳头账号 ...

  7. 英雄联盟手游:大神开发提莫打野,伤害爆表,玩家纷纷效仿

    哪里有广告? 相比英雄联盟手游,端游的上线时间较早,所以说关于各个位置的英雄开发五花八门,反观手游由于还处于玩家开发学习时间所以各个位置的英雄基本固定,手游整活哥相比端游要少一些,不过经过测试整活哥开 ...

  8. 英雄联盟手游主播否认部分英雄后期的作用,难道阿卡丽没未来?

    有很多玩家都觉得在英雄联盟手游上面我们需要做更多的一个功夫,那就是让自己在游戏当中的体验更加好,但是在英雄联盟手游当中,我们也必须得看到一些实力玩家,他们用自己的战绩打出了一片天地,而他们所说的话也值 ...

  9. 英雄联盟手游锐雯有多么强大,新手教程全给你,瑞文很简单

    习惯玩英雄联盟手游的时候是否会注意一个问题,那就是自己能够玩哪些英雄,这都是很重要的事情,只是所有的玩家都遇到过这样的问题吗?英雄联盟手游与端游其实有很大的出入,只是这样的出路需要玩家去适应,毕竟手机 ...

  10. 玩英雄联盟手游,谁才是新手最喜欢的英雄?无极剑圣还是吗?

    在我的记忆中一直记得有几个角色是英雄联盟里面最受欢迎的也就是新手英雄,当然在如今的英雄联盟手游里面,他们为什么不曾被别人提起呢?这还是有一定的问题的,那就是说他们现在还是新手喜欢的英雄吗?或者说现在英 ...

最新文章

  1. pandas中的3种基本数据类型介绍
  2. ecplise常用快捷键
  3. hell 12 21 filename重定向的含义和区别
  4. 国科大高级人工智能12-博弈
  5. 如何重启虚拟机里的ssh服务器,通过SSH重启 vSphere 虚拟机
  6. python社区版如何下载库_pycharm社区版在哪里下载
  7. (day 25 - 广度优先搜索 )剑指 Offer 32 - II. 从上到下打印二叉树 II
  8. 【286页干货】一天搞懂深度学习(台湾资料科学年会课程)李宏毅
  9. R语言入门-常用的向量运算
  10. 15款好用的web开源安全测试工具等你来
  11. python pyd 速度提升_pyd打包补充
  12. Notes Fifteenth Day-渗透攻击-红队-内部信息搜集
  13. 干货 | 携程Dynamo风格存储的落地实践
  14. 可以发热的“电”羽绒服!60秒升温15度,自带充电宝,脏了还能机洗
  15. 1. SpringBoot 整合 Canal
  16. 网站徽章shields制作教程
  17. runauto.. 病毒斗争记
  18. Python的学习(十八)---- 单元测试工具nose
  19. mstsc连接传输大文件时突然中断
  20. 康托展开详解 -csdn博客

热门文章

  1. 荣耀9i 鸿蒙,荣耀9i和荣耀9青春版哪个好 哪个性价比更高?
  2. HTML5 JS alert提示框内容换行显示
  3. 千锋白盒测试基础大纲
  4. Python程序运行方式
  5. VeighNa进阶EP01:TuShare数据源接入
  6. 答案版2022年3月全国青少年编程考级C语言一级真题
  7. 如何清理roaming_C 盘突然爆满,怎么清理?
  8. html下拉框代码默认选中状态,@Html.DropDownListFor 下拉框绑定(选择默认值)
  9. 苹果AirPods Android软件,搭配这几个软件,你的 AirPods 在安卓、Mac 上会更好用
  10. 2015年第十三周杭电:献给杭电五十周年的礼物