《英雄联盟》界面交互设计研究（上）

　　文/扬花朝南

　　腾讯旗下《英雄联盟》这款游戏一直位列营收最高端游排行榜，其中不容忽视的是游戏界面的本地化，而许多游戏工作室往往容易忽略游戏界面对玩家的重要性。今天就和大家聊聊《英雄联盟》界面更新的交互设计。

　　排位赛匹配界面更新的ui/交互设计研究

　　15年11月底，在LOL测试服的更新中，游戏内的排位赛匹配和选人系统进行了一次很大的调整。BP（选人/禁选）不再是一楼的特权，玩家匹配前可以选择倾向英雄（防止被BAN）和位置（分为主要和次要），全队五人都在不同程度中参与到了决策，更多人性化的设定，游戏趣味更足。从游戏交互和体验的角度，我们来分析一下这次的更新。

　　1.整体匹配流程的变化

　　从之前的版本看，S5赛季的排位赛匹配流程是：匹配玩家——BAN英雄——选择英雄——开始游戏。从流程上看似乎这个过程很简洁也很容易的能够快速进入到游戏界面，但是我们经常会遇到这样的情况：玩家进去选人以后很喜欢抢位置，如果不满意自己的位置就各种送，各种骂，导致整个游戏过程非常不开心，影响玩家在游戏过程中的体验。同时我们经常在游戏中和队友的行动不一致，很难在一局比赛中有很好的默契。

选择位置

　　所以，S6赛季将会采用新的排位赛游戏选人系统。从测试服来看新的匹配流程有了很大的变化：选择位置——位置分配——选择倾向英雄——B\P英雄——开始游戏。从图中可以看到新的排位赛基本流程，在整个选人的过程中，首先需要玩家选择自己想玩的位置来进行匹配，这样每个玩家都能玩到自己想玩的位置，对于和位置选择的矛盾将得到很好的解决。“中单不给就送”之类的情况可以得到很好的缓解。其次，我们每个人都会知道自己的位置，对队友们擅长的位置有一个大概的了解，这对于团队策略的影响不言而喻。再次，我们可以选择想用的英雄，并为队友高亮，选择意图能够让队友们知道各个队员的想法，更好的构建阵容。大多数玩家都比较喜欢选择固定的2个位置游戏，而一些背黑锅打野或者奶的位置无人问津，那么在新版的设计中，英雄联盟的设计师将会针对这一块来鼓励玩家更多的选择这些比较少人选择的位置来游戏。而在BP选人中，5个玩家都会参与到选人的过程中来，一二楼负责抢英雄，三四五楼负责BAN英雄。

位置分配

选择倾向英雄

BAN英雄

选择英雄

　　匹配选人的过程中，最大的变化是加入了玩家对游戏倾向选择的过程，下面将对选人过程做一些具体分析。

　　各个流程的交互ui研究

　　1. 选择位置

　　在进入排位之前，你可以选择两个你想要玩的位置，总共有六个位置，上单，中单，打野，下路ADC，辅助，任意（也就是补位，或者全能）两个位置的选择能够及时的解决在匹配的过程中，很多玩家可能拿不到想要的位置被迫去打自己不擅长的位置，同时也杜绝掉排位随便拿英雄，练英雄的情况，这里能够确保匹配后能有一个位置可以玩，能够加快匹配的速度。

　　在现有国服S5赛季中的阵容匹配选人界面，玩家也能够先选择自己想打的位置和英雄，但是只能选择一个位置和固定的英雄，那么这个过程本身就很难快速匹配，总会有一些位置是比较冷门的，这样增多了匹配的时间。

　　2. 位置匹配

国服阵容匹配比赛界面

新版匹配比赛界面

　　玩家在预选自己的主要和次要位置以后，与其他玩家组成一个队伍，那么在匹配比赛之前，队伍内会再次对位置进行一个分配，在这个界面玩家可以有更多的交流，让玩家能够选择所擅长的位置，避免了玩家与玩家之间选择相同位置的尴尬和不愉快。也能够更好的执行战术和策略的安排以及增加队友间的相互了解，有利于比赛中的配合。

位置分配

　　3. 选择倾向英雄

　　在禁选开始前，玩家可以选择自己想用的英雄并为队友高亮。在这里示意队友自己要用什么英雄，不要BAN掉。这样可以让队友知道你的想法，更好地构建阵容。

选择倾向英雄

　　4.B\P英雄

　　有时候我们需要有一些特殊的战术和位置分配，这里的界面交互设计能够让玩家之间的沟通机会变多了，路人之中也不会出现一个带了点燃的安妮，队友不知道安妮是中单或者辅助，必须每个人都认真参与才能进行一场完整的游戏。

BAN英雄

选择英雄

　　与现在国服选人进行对比中可以发现，在国服选人的时候有各种亮熟练度的玩家们，手速一慢，自己要用的英雄就会被ban掉，同时在这里你也能明白队友大致玩什么类型的英雄，可以思考接下来的ban人阶段如何ban掉对队伍有威胁的英雄，或者考虑队友接下来的选人，预先ban掉有counter能力的英雄。

国服BP英雄界面

　　BP从此更有策略性，玩家们不再只是死ban一些热门英雄，真正要去思考如何从BP上去战胜对手。而在正式进入BAN人阶段时，BAN人将由三、四、五楼分别来负责，一、二楼则拥有先选的机会，可以优先拿到自己的英雄。

　　新的选人界面能够更多的照顾到玩家的需求和想法，也可以有更多交流的空间和机会，让对局开始之前，队友们之间有更多的了解，有利于游戏的进行和体验，也让大家一起参与到整个的选人过程中来，更人性化的设定，增加游戏的趣味性。相比较老版本的选人界面，有更多的策略性，增强玩法，优化玩家的游戏体验，更加注重团队的合作性。

　　游戏中界面ui更新交互研究

　　我们再来看看之前游戏中界面UI的更新，15年7月28日英雄联盟发出新版本v5.14，对游戏操作界面做了一个非常大的调整，新界面似乎颠覆了之前版本的界面布局，笔者从交互设计与用户体验的角度做了浅析研究。

　　首先来看一下新版本（5.14）做了哪些调整（如图1）。

　　图中的数字代表的是相同界面中相同元素，我们看到5.14版本对整体的布局有一个很大的调整，左下角的英雄头像和属性移到了中间偏左的位置，物品栏移到了中间偏右的位置，而技能栏位置没有发生大的变化，同时队友头像移到了右下角小地图的上方，而双方比分和KDA的信息则在小地图上显示出来。对于这样颠覆性的界面变动，我们的网友和玩家进行了强有力的吐槽，批评声非常之大，而在现在最新版本中，设计师针对玩家的一些反馈，又对之前的这个版本做了相应的改进和优化。更大的队友头像，将比分和kda信息返回到了界面的右上角。我们来看看网友们到底有什么样的反馈：

　　玩家对这次版本的优化并不看好，网上吐槽声一片，我们先看一下官方对这次新界面的解读：“这次更新是对现有界面的一次进化，并且设计目的是通过更好的布局、更佳的可读性和更多的特性来改善玩法清晰度，从而在各位玩英雄联盟时提供更好的支持。我们正在制作一个更加流线型的用户界面，这个界面不会遮盖游戏空间，并且会基于玩家的使用情况来重新组织游戏信息。”可以看出界面的进化目的是为了有更好的游戏体验，然而很多玩家却并不买账。

　　界面改动细节分析总览

　　根据官方给出的消息，本次界面的改动主要针对三大主题信息的改动：

　　1.影响战术性获取的信息

　　主要是那些不断支撑着你做出决策（主要是战斗方面）的信息，类似正在放大招或者正在喝药等情报。它还包括那些正在对你的英雄产生作用的东西，例如被友方风女套了个护盾，或者被对方套了个点燃等。

　　2.影响策略性思考的信息

　　策略信息让玩家可以看到全局。它帮助玩家们理解对局的整体状态，以及地图上将要发生什么，从而让玩家们借此做出长期决策。举个例子，也许你打够了钱，可以在第一次回家时就买到暴风大剑。在你回城之前，你会有几个问题要考虑：战线的推进情况如何？对方的打野在哪？你的辅助到6级了么？和你的对线对手相比，你的跟进能力如何？龙刷了么？然后，也许你去参加了团战，并且有些其它问题需要快速应答：我的队友还有谁存活着？我们击杀了对面多少人？敌人还有多久重生？我们可以利用这段时间干些什么？

　　3.更加易用的信息优化

　　这些更新是以综合易用性为目的的功能要求。我们移动了记分板，水平地列出两支队伍，并且增加了拖拽功能。

　　影响战术性获取的信息

　　对我们的操作和行动有直接影响的信息，比如我们的血量，魔法值；我们技能的状态，是在冷却中还是魔法值不够，我们当前有哪些装备，gank是否有优势？当前是否有一些buff。这些在战斗中的信息直接影响到我们的决定和行动。

　　1.头像、经验条、等级、属性

　　左下角的人物状态是这次调整比较大的，对用户的习惯也是有很大的影响，英雄属性和头像位置的改变，将它们整合到中间下部的区域范围来，将左下角的空间留出来，对于这样的调整，玩家非常不适应，很多玩家希望把头像和英雄属性等信息移回道左下角，设计师riot的解释是：英雄联盟是一个左下对右上的游戏，所以无论对于蓝方还是紫方，左下角的视野都是非常重要的。以前的物品栏在左下角，挡住了玩家很多重要的信息，所以我们将其移动到了右边，是希望玩家们在游戏中有足够的信息，更好的集中精力和对手去斗智斗勇。所以把左下角的区域留出来给玩家，能够更好的去发现战场上出现的状况从而快速反应做出决策，这对于玩家的游戏体验来说是有利的。

　　对于英雄属性的呈现方式，更换了排列的顺序和调整了字体和图标的大小，目的是为了帮助大家更好的查阅信息，并且不会影响到玩家的视觉注意。之前版本左下角的面板很小，展开后也没有很大的空间来对所有属性进行展示，而整合到中间下面的区域后，空间有所提升。但是由于字体和图标变小了，很难看清楚。由于我们在游戏中，这里的区域是属于一个视觉上的周边区域，玩家一般不会对这些地方作为一个重点观看，而玩家在需要了解这些信息的时候，这里的设计一定要处理的清晰和简明，玩家一眼就能够看清楚看明白，所以在5.15后的版本中，对这里进行了更进一步的优化，将字体和图标进行了放大处理，且对比度得到提升，能够让玩家更容易清晰的看明白。

　　而对于经验条的修改，调整比较大，由之前的金黄色到现在的紫色，笔者作为交互设计师认为经验条的显示有不合理性的地方。之前的经验条，颜色为橙色，在主要颜色为暗色调的界面中使用了橙色可以说是相当的显眼，并且使用的是条状，能让人很容易就能够分析出什么时候到2，什么时候到6，这对于中高端局的上下路对拼来说是相当重要的。反观现在，在暗色调的界面中使用了同样暗色调的紫色作为经验条的颜色，而且使用的是较为细小的圆形侧边，让人很难看到不说还很难做到之前那样容易的判断升级时间，所以从LOL设计师RIOT的谈话中来看，英雄联盟团队对这样的设计也在调整中，可能是由于整体色调的一个调整，所以对经验条这一块主要考虑到整体界面的表现出发，而忽略了其对玩家的重要性。

　　相关阅读：游戏模块分析总结（2）之UI、操作篇

via：GAD

不错 分析得不错

UE设计