开发者谈《Into the Breach》中的UI设计
发表于2018-04-13
简介与序曲
“我想我们在一开始就陷入了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设计的要求是，在任何我们已考虑到的游戏中可能出现的情况下，玩家都必须要非常清晰地理解，了解到现在发生了什么” 贾斯丁·马说道。
这就是为什么机甲们以及虫子敌人们只有三种不同的攻击表现方式：能够影响邻近单位的近战攻击；在一条直线上射出弹丸直至它碰到第一个障碍物才会爆破的远程攻击；以及能够飞越障碍物，瞄准同一直线上任意一格的抛射攻击。
“曾经有段时间我们采用了传统的【三格射程】式的攻击表现方式，那种菱形的形状。直到后来我们意识到当我们尝试去同时展示大数量敌人的攻击情况时，你将根本没有办法去搞懂到底谁在攻击谁”贾斯丁·马继续说道。那将是一个充满了抛物线指示物，阴影指示物，被攻击目标指示物的一片混乱的游戏界面，根本没法阅读。
“我个人是不喜欢每个回合都得停下来检查一下攻击范围的，尤其是你还得移动单位来检查我是否能从这里击中目标，或者需要数格子的情况” 马修·戴维斯说道，“对大脑，以及眼球来说，这些到底谁能攻击到谁的繁琐情况是难以管理的。所以打从一开始，我就打算设计一个你一眼扫过去就能知道战场上到底发生了什么的界面，你也就省去了多次检查自己到底能不能在正确射程击中敌人的麻烦。”
将清晰的，格调分明的攻击类型展现的明明白白，也就意味可能要舍弃一些复杂的武器攻击效果，比如新星型攻击，或者扇形区域攻击。因为马修·戴维斯不想让游戏转变成一个测试玩家在脑海里如何想象、旋转射击区域形状能力来确定自己是否能射中的游戏。
“这我必须得插一下嘴，那些攻击类型贼酷”贾斯丁·马突然插话道。但他也确实承认那些酷炫的攻击类型有些华而不实。“你能看见那些伤害指示物铺得满地图都是，这对于我们开发者来说还行，因为我们确切地了解每种类型的敌人能够做什么样的攻击行为。但当我们把测试版游戏交给测试玩家时就是两码事了。我们得把‘Who was doing what’这件事展示地特别清楚明白才行。”
因此，所有抛射攻击都会以一段循环的抛物线表示，所有远程攻击都会以一段点点点线来表示，所有近战攻击都以箭头方向来表示。这些解决方案，都是从马修·戴维斯和贾斯丁·马观察测试玩家在理解游戏内容的微小失误上出发，被一点一点改善，一点一点打磨好后才最终放入游戏的。他们的目标就是提供给玩家一个直观的，瞬间就能搞懂的武器工作原理。当然，这个野心也逼迫他们不得不放弃一些似乎对于玩家来说稍微有些复杂难懂的武器设计。
举个例子，在之前的测试版，很长一段时间以来游戏里存在一种投石武器，在最终正式版里它是抛射型攻击武器，但是在早期版本其一直作为远程型攻击武器存在，却又可以射击到瞄准路线上沿途的目标。这已经是一个游戏规则内的规则打破者了——其他的远程武器都不是想它这样运作的——不过它也有个额外的小规则，当它碰撞到一个敌人时，它会在那个敌人的面前留下一块巨石。“那个其实挺有趣的，它能带来一些有趣的抉择，而且在攻击一个敌人时留下个障碍物挡住另一个敌人的感觉很爽。”马修·戴维斯说道，“你能用那个武器做不少很酷的事”。 但那些情况是难以描述且不够直观的。
类似的，许多武器能够将单位推动，但所有的武器、攻击只能推动单位仅仅一格，这里在游戏中没有任何例外情况，比如说不存在在冰面上推动单位直到它们撞击到一个障碍物（译注：哎？游戏里没这么一说吗？有点没注意到）
“这有点难以表达清楚” 贾斯丁·马这样讲道，“但我们认为将推动效应简化成简单的一格的推动可以让人们更容易理解，计算复杂的战场上究竟会发生什么”
动画演示比文字描述事半功倍
在Into the Breach中，系统教导你一个新的武器是怎样运作的最主要的方式是通过鼠标提示窗口来展现的。选中一个目标，鼠标指针悬停于一项武器之上，就会弹出一个小窗口给你展示生动形象的动画演示了那个武器的运作方式，而且这个动画演示总是与你可用机甲中与这个武器类型相适配的那个机甲的形象来演示的。
这是个完美的资源库，而且也是一种游戏设计哲学：【在提供给新玩家所有他们所必须知道的信息的同时，展示给那些熟手们一个高度简化的UI】
但是，这些提示曾经一度不是完全动画演示的。“我们当时发现我们用来描述武器是怎样运作的语句变得难以接受的复杂化了。”马修·戴维斯补充道。
“唉，老铁。”贾斯丁·马叹到。
“那些描述武器功能的语句过于复杂了。我们当初观看测试玩家鼓弄那些新武器时，他们看完那些三个句子长的描述语句后还是一脸懵逼的表情。”那些提示窗口里一度只包含静态图片，而且还是用通用单位来展示武器原理，而不是那些实际与其配对的特定种类的机甲。所以有时玩家会难以将那些演示与他们的实际情况联系起来，无法瞬间领会到武器的运作模式。
所以马修·戴维斯不得不把这个棘手的挑战提上日程，那就是将所有的这些提示窗口动态化，使他们能够将互相匹配的机甲与武器组合在一起，用小动画来演示出来，使得它们足够直观易懂。
“我始终认为这是咱们做过的最重要的决定” 贾斯丁·马说道，“你能够将‘对目标格子造成伤害且推动邻近格的单位’这个句子输入到提示栏里一百次。但是展示一小段动画演示能够比这句子有效一千倍。这真鸡儿逗。”
“当然，这是我在这游戏里最喜欢的那些小玩意之一。”马修·戴维斯开心道。
特殊效果带来的设计风暴与图标地狱
每个武器的不同功能只是这个游戏丢给你的信息量风暴里的一环。在游戏中也存在几种不同的环境效果或者说特殊buff，比如尘埃（单位位于其中时无法开火），燃烧（将使单位燃烧，收到每回合一点的伤害），A.C.I.D(禁用单位的护甲，而且受到所有伤害翻倍)以及其他种种不同的特效。他们一个个简单地独立生效时还好说，当他们相互叠加，互相作用时，就是一种剪不清理还乱的乱麻啦。譬如：如果一个被A.C.I.D感染了的格子着火了怎么办？你该怎么去画出这种格子？
“每当我们想再往游戏里添加更多的小岛或者特效或者各种乱七八糟的东西时，类似这样的麻烦问题就成堆地涌现出来” 马修·戴维斯说道。
“咱们真该聊聊一个单位被封冻在了冰块中，然后你用一个带有A.C.I.D的不带直接伤害的攻击推动它到了一个着火的格子上的情景。它会打破冰块吗？究竟会发生什么？”贾斯丁·马打趣道。
每一个这些复杂的相互作用都必须根据最符合玩家直觉的方式来反复雕琢。制作者们最终决定快刀斩乱麻地让一个格子在同一时间只能存在一种特效。所以你没法在一个已经有A.C.I.D特效的格子上放置地雷，最主要的原因是将这两种特效在同一时间展示在那么一个小格子上是完全不切实际的。
但是在那些需要展示更多信息的极端情况下，最接近直觉，最普遍的设计方法就是在那些地方砸上一个图标。就像你现在在游戏中看到的一样，像是下回合将从地底爬出的虫子敌人啦，那些正在遭受攻击威胁的城市或单位啦，都有特别的图标来标注。
但这种解决方案也有其弊端。“一年半之前，我们这个游戏简直是个图标地狱” 马修·戴维斯苦笑道。在开发过程中，他们每当见到一位测试玩家错过了一些相关的游戏内信息时，就会在那些地方增设一个图标。于是乎屏幕上就慢慢被图标们挤满了。而对于武器来说，他们的解决方案是编辑和剪辑。
“作为一项游戏设计原则，我们愿意牺牲那些酷的点子，来使（游戏）每时每刻都能清晰易懂。如果游戏能够被一种明明白白、清楚干净的方式来展示，那么我们就可以这样做。” 贾斯丁·马这样说道。
结语
这是不是意味着，贾斯丁·马先生关于这款游戏中视觉表现方面有更多的雄心与抱负呢？比如将一个刚被攻击过的格子上标上燃烧标记，或者是可以被机甲践踏倒的环境物件啥的。说是这么说，但是暂时还不需要想的那么远。
“我压根就不认为我们现在有的设计方案就是最佳方案，”贾斯丁·马的眼神亮了起来。“这些能够变得更~加完美。但是就现在看来，我觉得现在这些是完全起作用的”
“啊，这的确是令人沮丧的部分，真的。我都不认为我们两个中的任何一个人是一个极棒的UI设计师，”马修·戴维斯说道，“我觉得我们只是粗暴地把这些东西推向了能够勉强运作的方面。而不是运用我们自己的设计才华去创造出一个新的解决方案。”
“我觉得我们知道那些我们不喜欢的东西，”贾斯丁·马接过话茬“我们不是牛逼的UI设计师，但我们清清楚楚地了解着那些我们不喜欢的设计，所以这就变成了一个千锤百炼的活，直到我们找到了一些我们觉得还不错的方案。”
（Into the Breach 的互动界面设计决不仅仅是还不错那么简单。）
“我想我们在一开始就陷入了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中，系统教导你一个新的武器是怎样运作的最主要的方式是通过鼠标提示窗口来展现的。选中一个目标，鼠标指针悬停于一项武器之上，就会弹出一个小窗口给你展示生动形象的动画演示了那个武器的运作方式，而且这个动画演示总是与你可用机甲中与这个武器类型相适配的那个机甲的形象来演示的。
(译者补充图)
这是个完美的资源库，而且也是一种游戏设计哲学：【在提供给新玩家所有他们所必须知道的信息的同时，展示给那些熟手们一个高度简化的UI】
但是，这些提示曾经一度不是完全动画演示的。“我们当时发现我们用来描述武器是怎样运作的语句变得难以接受的复杂化了。”马修·戴维斯补充道。
“唉，老铁。”贾斯丁·马叹到。
“那些描述武器功能的语句过于复杂了。我们当初观看测试玩家鼓弄那些新武器时，他们看完那些三个句子长的描述语句后还是一脸懵逼的表情。”那些提示窗口里一度只包含静态图片，而且还是用通用单位来展示武器原理，而不是那些实际与其配对的特定种类的机甲。所以有时玩家会难以将那些演示与他们的实际情况联系起来，无法瞬间领会到武器的运作模式。
所以马修·戴维斯不得不把这个棘手的挑战提上日程，那就是将所有的这些提示窗口动态化，使他们能够将互相匹配的机甲与武器组合在一起，用小动画来演示出来，使得它们足够直观易懂。
“我始终认为这是咱们做过的最重要的决定” 贾斯丁·马说道，“你能够将‘对目标格子造成伤害且推动邻近格的单位’这个句子输入到提示栏里一百次。但是展示一小段动画演示能够比这句子有效一千倍。这真鸡儿逗。”
“当然，这是我在这游戏里最喜欢的那些小玩意之一。”马修·戴维斯开心道。
早期游戏界面布局的原型
特殊效果带来的设计风暴与图标地狱
每个武器的不同功能只是这个游戏丢给你的信息量风暴里的一环。在游戏中也存在几种不同的环境效果或者说特殊buff，比如尘埃（单位位于其中时无法开火），燃烧（将使单位燃烧，收到每回合一点的伤害），A.C.I.D(禁用单位的护甲，而且受到所有伤害翻倍)以及其他种种不同的特效。他们一个个简单地独立生效时还好说，当他们相互叠加，互相作用时，就是一种剪不清理还乱的乱麻啦。譬如：如果一个被A.C.I.D感染了的格子着火了怎么办？你该怎么去画出这种格子？
“每当我们想再往游戏里添加更多的小岛或者特效或者各种乱七八糟的东西时，类似这样的麻烦问题就成堆地涌现出来” 马修·戴维斯说道。
“咱们真该聊聊一个单位被封冻在了冰块中，然后你用一个带有A.C.I.D的不带直接伤害的攻击推动它到了一个着火的格子上的情景。它会打破冰块吗？究竟会发生什么？”贾斯丁·马打趣道。
一个利用图标展示单位将被如何推动的原型
每一个这些复杂的相互作用都必须根据最符合玩家直觉的方式来反复雕琢。制作者们最终决定快刀斩乱麻地让一个格子在同一时间只能存在一种特效。所以你没法在一个已经有A.C.I.D特效的格子上放置地雷，最主要的原因是将这两种特效在同一时间展示在那么一个小格子上是完全不切实际的。
但是在那些需要展示更多信息的极端情况下，最接近直觉，最普遍的设计方法就是在那些地方砸上一个图标。就像你现在在游戏中看到的一样，像是下回合将从地底爬出的虫子敌人啦，那些正在遭受攻击威胁的城市或单位啦，都有特别的图标来标注。
但这种解决方案也有其弊端。“一年半之前，我们这个游戏简直是个图标地狱” 马修·戴维斯苦笑道。在开发过程中，他们每当见到一位测试玩家错过了一些相关的游戏内信息时，就会在那些地方增设一个图标。于是乎屏幕上就慢慢被图标们挤满了。而对于武器来说，他们的解决方案是编辑和剪辑。
“作为一项游戏设计原则，我们愿意牺牲那些酷的点子，来使（游戏）每时每刻都能清晰易懂。如果游戏能够被一种明明白白、清楚干净的方式来展示，那么我们就可以这样做。” 贾斯丁·马这样说道。
结语
一个展示了虫子们的抛射攻击的早期原型
这是不是意味着，贾斯丁·马先生关于这款游戏中视觉表现方面有更多的雄心与抱负呢？比如将一个刚被攻击过的格子上标上燃烧标记，或者是可以被机甲践踏倒的环境物件啥的。说是这么说，但是暂时还不需要想的那么远。
“我压根就不认为我们现在有的设计方案就是最佳方案，”贾斯丁·马的眼神亮了起来。“这些能够变得更~加完美。但是就现在看来，我觉得现在这些是完全起作用的”
“啊，这的确是令人沮丧的部分，真的。我都不认为我们两个中的任何一个人是一个极棒的UI设计师，”马修·戴维斯说道，“我觉得我们只是粗暴地把这些东西推向了能够勉强运作的方面。而不是运用我们自己的设计才华去创造出一个新的解决方案。”
“我觉得我们知道那些我们不喜欢的东西，”贾斯丁·马接过话茬“我们不是牛逼的UI设计师，但我们清清楚楚地了解着那些我们不喜欢的设计，所以这就变成了一个千锤百炼的活，直到我们找到了一些我们觉得还不错的方案。”
（Into the Breach 的互动界面设计决不仅仅是还不错那么简单。）