撰写了文章更新于 2018-03-16 09:11:32

【翻译】开发者谈《Into the Breach》中的UI设计

【翻译】（开发者访谈）ITB的UI设计曾是个梦魇，但也是令其卓越的关键

原文章地址：https://www.rockpapershotgun.com/2018/03/05/into-the-breach-interface-design/

原作者：Alex Wiltshire

转译者：sPicaLance

简介与序曲

作为一项游戏设计原则，我们愿意牺牲那些酷的点子，来使（游戏）每时每刻都能清晰易懂。如果游戏能够被一种明明白白、清楚干净的方式来展示，那么我们就可以这样做。

--Justin Ma，Subset Games

“我想我们在一开始就陷入了UI设计的梦魇中。” Matthew Davis （下译作马修·戴维斯），Into the Breach的主程序兼合作设计者如此说道。

“当我们决定要在游戏中的每个单独的回合都清晰，明白地展示每个单独的敌人的行动时，我们就已经可以清楚地预见那个梦魇会是多么可怕的了。”Justin Ma（下译作贾斯丁·马），Into the Breach 的主美术兼合作设计者补充道。

Into the Breach 是一款回合制战术战棋游戏。来自于Faster Than Light的开发者 Subset Games 工作室。游戏内，玩家操控一个由3种不同的机械高达组成的机甲战队，飞入战场，为了守护地球上最后幸存者们的城市，与巨大的昆虫型敌人战斗。这里充满了丰富的战略抉择，敌人种类，以及数不胜数的需要征服的挑战。这款游戏可以说是非常有深度，高度复杂，而且是“近乎于完美”的了。就像贾斯丁·马说的那样，他和马修·戴维斯在过去的4年里，几乎花了一半的时间来雕琢的，就是这个游戏的UI设计。实话实说，UI设计确实是那些令Into the Breach脱颖而出的重要因素之一，而且UI设计还向我们指示出了这款游戏特有的的本质。

在Into the Breach中，最关键最核心的一点是你永远精确地知道虫子们接下来要怎么攻击。你知道什么样的攻击形式它们会发出，会造成多少点伤害，这一切都清清楚楚。这是那种你好像会有“上帝视角”感觉的游戏，但同时你又处于敌众我寡的境地，因此你指挥的每一个战术回合，就是用你获知的信息和游戏知识来拼命思考如何与巨大的虫子们战斗的过程。

在跳虫型敌人落向你的城市上方之前，将它推向未被其他单位占领的空地，然后指挥另外一个我方机甲挡住其他烦人虫子的射击。每个回合都是一个小巧的解谜游戏，你将该死虫子们的进攻计划分崩离析，撕成碎片，从狭缝中拼杀出一线生机。

而这些精彩的绝境求生战，都建立在一个必要的前提条件下：每个回合，你都清清楚楚地了解每个可能的威胁，每个敌人的攻击模式，以及你的每个行动、每个动作能带来的效应、结果。

清楚易懂的攻击方式设计：

“我们对UI设计的要求是，在任何我们已考虑到的游戏中可能出现的情况下，玩家都必须要非常清晰地理解，了解到现在发生了什么” 贾斯丁·马说道。

这就是为什么机甲们以及虫子敌人们只有三种不同的攻击表现方式：能够影响邻近单位的近战攻击；在一条直线上射出弹丸直至它碰到第一个障碍物才会爆破的远程攻击；以及能够飞越障碍物，瞄准同一直线上任意一格的抛射攻击。

“曾经有段时间我们采用了传统的【三格射程】式的攻击表现方式，那种菱形的形状。直到后来我们意识到当我们尝试去同时展示大数量敌人的攻击情况时，你将根本没有办法去搞懂到底谁在攻击谁”贾斯丁·马继续说道。那将是一个充满了抛物线指示物，阴影指示物，被攻击目标指示物的一片混乱的游戏界面，根本没法阅读。

“我个人是不喜欢每个回合都得停下来检查一下攻击范围的，尤其是你还得移动单位来检查我是否能从这里击中目标，或者需要数格子的情况” 马修·戴维斯说道，“对大脑，以及眼球来说，这些到底谁能攻击到谁的繁琐情况是难以管理的。所以打从一开始，我就打算设计一个你一眼扫过去就能知道战场上到底发生了什么的界面，你也就省去了多次检查自己到底能不能在正确射程击中敌人的麻烦。”

Into The Breach早期视觉设计原型

将清晰的，格调分明的攻击类型展现的明明白白，也就意味可能要舍弃一些复杂的武器攻击效果，比如新星型攻击，或者扇形区域攻击。因为马修·戴维斯不想让游戏转变成一个测试玩家在脑海里如何想象、旋转射击区域形状能力来确定自己是否能射中的游戏。

“这我必须得插一下嘴，那些攻击类型贼酷”贾斯丁·马突然插话道。但他也确实承认那些酷炫的攻击类型有些华而不实。“你能看见那些伤害指示物铺得满地图都是，这对于我们开发者来说还行，因为我们确切地了解每种类型的敌人能够做什么样的攻击行为。但当我们把测试版游戏交给测试玩家时就是两码事了。我们得把‘Who was doing what’这件事展示地特别清楚明白才行。”

因此，所有抛射攻击都会以一段循环的抛物线表示，所有远程攻击都会以一段点点点线来表示，所有近战攻击都以箭头方向来表示。这些解决方案，都是从马修·戴维斯和贾斯丁·马观察测试玩家在理解游戏内容的微小失误上出发，被一点一点改善，一点一点打磨好后才最终放入游戏的。他们的目标就是提供给玩家一个直观的，瞬间就能搞懂的武器工作原理。当然，这个野心也逼迫他们不得不放弃一些似乎对于玩家来说稍微有些复杂难懂的武器设计。

举个例子，在之前的测试版，很长一段时间以来游戏里存在一种投石武器，在最终正式版里它是抛射型攻击武器，但是在早期版本其一直作为远程型攻击武器存在，却又可以射击到瞄准路线上沿途的目标。这已经是一个游戏规则内的规则打破者了——其他的远程武器都不是想它这样运作的——不过它也有个额外的小规则，当它碰撞到一个敌人时，它会在那个敌人的面前留下一块巨石。“那个其实挺有趣的，它能带来一些有趣的抉择，而且在攻击一个敌人时留下个障碍物挡住另一个敌人的感觉很爽。”马修·戴维斯说道，“你能用那个武器做不少很酷的事”。但那些情况是难以描述且不够直观的。

这个早期原型展示了尝试去设计同时展示攻击地点和移动路径的UI表现方式。

类似的，许多武器能够将单位推动，但所有的武器、攻击只能推动单位仅仅一格，这里在游戏中没有任何例外情况，比如说不存在在冰面上推动单位直到它们撞击到一个障碍物（译注：哎？游戏里没这么一说吗？有点没注意到）

“这有点难以表达清楚” 贾斯丁·马这样讲道，“但我们认为将推动效应简化成简单的一格的推动可以让人们更容易理解，计算复杂的战场上究竟会发生什么”

动画演示比文字描述事半功倍：

在Into the Breach中，系统教导你一个新的武器是怎样运作的最主要的方式是通过鼠标提示窗口来展现的。选中一个目标，鼠标指针悬停于一项武器之上，就会弹出一个小窗口给你展示生动形象的动画演示了那个武器的运作方式，而且这个动画演示总是与你可用机甲中与这个武器类型相适配的那个机甲的形象来演示的。

(译者补充图，图源：https://media.giphy.com/media/fx2g2LaPaqWJGSmLgh/giphy.gif)

这是个完美的资源库，而且也是一种游戏设计哲学：【在提供给新玩家所有他们所必须知道的信息的同时，展示给那些熟手们一个高度简化的UI】

但是，这些提示曾经一度不是完全动画演示的。“我们当时发现我们用来描述武器是怎样运作的语句变得难以接受的复杂化了。”马修·戴维斯补充道。

“唉，老铁。”贾斯丁·马叹到。

“那些描述武器功能的语句过于复杂了。我们当初观看测试玩家鼓弄那些新武器时，他们看完那些三个句子长的描述语句后还是一脸懵逼的表情。”那些提示窗口里一度只包含静态图片，而且还是用通用单位来展示武器原理，而不是那些实际与其配对的特定种类的机甲。所以有时玩家会难以将那些演示与他们的实际情况联系起来，无法瞬间领会到武器的运作模式。

所以马修·戴维斯不得不把这个棘手的挑战提上日程，那就是将所有的这些提示窗口动态化，使他们能够将互相匹配的机甲与武器组合在一起，用小动画来演示出来，使得它们足够直观易懂。

“我始终认为这是咱们做过的最重要的决定” 贾斯丁·马说道，“你能够将‘对目标格子造成伤害且推动邻近格的单位’这个句子输入到提示栏里一百次。但是展示一小段动画演示能够比这句子有效一千倍。这真**逗。”

“当然，这是我在这游戏里最喜欢的那些小玩意之一。”马修·戴维斯开心道。

一个展示了早期游戏界面布局的原型。

特殊效果带来的设计风暴与图标地狱：

每个武器的不同功能只是这个游戏丢给你的信息量风暴里的一环。在游戏中也存在几种不同的环境效果或者说特殊buff，比如尘埃（单位位于其中时无法开火），燃烧（将使单位燃烧，收到每回合一点的伤害），A.C.I.D(禁用单位的护甲，而且受到所有伤害翻倍)以及其他种种不同的特效。他们一个个简单地独立生效时还好说，当他们相互叠加，互相作用时，就是一种剪不清理还乱的乱麻啦。譬如：如果一个被A.C.I.D感染了的格子着火了怎么办？你该怎么去画出这种格子？

“每当我们想再往游戏里添加更多的小岛或者特效或者各种乱七八糟的东西时，类似这样的麻烦问题就成堆地涌现出来” 马修·戴维斯说道。

“咱们真该聊聊一个单位被封冻在了冰块中，然后你用一个带有A.C.I.D的不带直接伤害的攻击推动它到了一个着火的格子上的情景。它会打破冰块吗？究竟会发生什么？”贾斯丁·马打趣道。

一个利用图标展示单位将被如何推动的原型。