游戏UI设计的优秀和糟糕典型

作者：Desi Quintans

让你的玩家把意图转化为行动，或理解你的游戏中的情况，这有多困难？在本文中，我将通过分析游戏UI的正面案例和反面案例，让读者理解如何制作出更好的游戏UI。另外，在文章结尾，我还附上UI设计的一般准则以供参考。


作为玩家和开发者，我们都知道沉浸感就是一切。当你处于沉浸状态时，除了眼前的游戏，你会连时间都忘记。对沉浸感的产生和破坏具有主要影响的因素是，玩家是否能轻易地把想法转化为游戏中的行动——也就是，你的游戏的UX有多流畅，以及游戏的I设计有多好。UI提供的信息太多或太少、要求太多输入、多余的提示或指导不足，都会损害玩家在游戏中的沉浸感。糟糕的UI设计甚至可能彻底破坏你的游戏。

（《Honey Bee Match 3》中的两半截图。左上半张是绿色盲患者看到的图像，右下半张是游戏真正的图像。100个人中大约有1个人是绿色盲，绿色盲基本上玩不了这款游戏。）

在本文中，我的目的不是教你如何整合UI。相反地，我只想告诉你优秀的UI和糟糕的UI分别是怎么样的，以及启发你在自己的游戏中利用值得借鉴的思路。我把UI和UX设计当作一系列与制作游戏的其他部分一样重要和准确的目标。我将选取案例分析游戏开发者做错和做对的地方。

什么是UI和UX？

有时候UI和UX被当成可以互换的两个术语，但它们有各自具体的含义。

UI，也就是用户界面，是指用户与游戏产生交互作用的方法（键盘操作、鼠标控制）和界面（目录页面、地图窗口等）。UX，也就是用户体验，是指那些UI的直观程度和使用户产生的愉悦程度。

做个类比：汽车的UI是它的方向盘、踏板、转盘和仪表盘上的控制键；汽车的UX受到刹车踏板的反应灵敏度、引擎加速性能、变速杆的阻力等因素的影响——这些因素决定了开这部小车是否令人愉快。

优秀的UI做什么？

简单地说，优秀的UI的作用是准确迅速地提供相关的信息，提供完信息后马上退到一边。一句概括就是：

“优秀的UI告诉你你必须知道的东西，然后就退到一边。”

我们可以进一步把UI的设计过程归纳为以下六个基本问题：

1、这个界面是否立即告诉我我必须知道的信息？

2、是否容易找到我正在寻找的信息，或者我是否需要四处搜索？（游戏邦注：即菜单是否藏得太深，以至于玩家看不到信息？）

3、我是否可以不阅读说明就知道如何使用这个界面？

4、我可以在这个屏幕上做的事情是否明显？

5、我是否需要等待界面加载或动画？

6、是否存在可以减少的或完全删除的重复性或无聊的操作（如，允许使用快捷键）？

当你设计和玩你自己的游戏时，你要经常问自己以上几个问题。UI设计是不断挑剔的过程，是游戏开发中少数几个必须力求完美的环节之一。

正面案例

《辐射3》的Pipboy就是一个好例子，或者更准确地说是，当你使用Pipboy时，你的角色总是把它举到与眼睛平齐的高度。

这段动画只有半秒钟，所以你不会想太多。但当你要在80个小时的游戏过程中无数次看完它，你就会觉得这是一个巨大的耐心考验。永远不要以为你的玩家会“习惯于”以非最佳方式做某事。他们只会责备你的设计欠考虑。

如何学习UI设计？

我认为最简单的学习UI设计的方法就是制作网页。像 Jakob Nielsen的Alertbox就是一个好资源，你可以从中找到大量关于如何制作好UI和人与软件的交互方式等信息。

优秀的UI最核心的特点是易用性，这个属性就以上六个基本问题的答案所在。关于易用性和如何提高界面的易用性，可以说的东西有很多，但我希望读者自己从Alertbox中寻找信息，并看看哪些印证了你的经验。

谁来设计游戏的UI？

许多程序员都害怕制作UI，因为他们觉得这是一件创造性工作，最好由更加精通表现法的美工来负责。然而，UI设计很大程度上与逻辑有关，这无疑是程序员擅长的。

事实上，我认为程序员（或创意总监，或者团队中任何直接参与制作游戏体验的人）都应该参与制作UI，因为他们正是了解游戏里里外外各方面、知道什么信息重要或不重要的人。

他们应该专注于UI的功能性方面：如UI元素多大、是否滚动、在哪里展示哪些信息以及玩家如何导航等。用两三种颜色装饰UI，永远不要指望用颜色变化来传达信息。至少，要参考色盲模拟器ColorOracle或Coblis，以确保色盲患者不会遗漏信息。

糟糕的游戏UI案例

在谈这一部分前，我想先强调，我对糟糕的UI的判断标准是以使用键盘和鼠标PC游戏玩家的想法和行动为基础的。

用户的输入选择与UX大有关系，尽管不是唯一有关的。例如，有些人习惯了触屏就会觉得按键界面难用，但设计良好的按键界面对这些人来说仍然是容易理解和适应的。

《湮灭》

在《湮灭》中，一个平台的UI与另一个并不相称。即使《湮灭》是从游戏机移植到PC的，它仍然保留着针对控制器的UI。这简直就相当于，在iOS或Android平台发布的游戏要求玩家像使用电脑那样移动光标，而不是用手指触击。

所以，是什么导致《湮灭》的UI变得这么糟糕？空间利用不佳、缩放比例失调和控制失当。

我希望你一次性看六个选项不会让你觉得烦；因为这些窗口是不能调节大小的。菜单上用于传达相关信息（如仓库里的东西）的部分只占整个屏幕空间的21.7%，分辨率是1920×1080。

只使用五分之一的屏幕空间没那么糟，因为那么大的空间就能做很多事了。真正的问题是，根据PC显示器的需要，字体和图标太大了，这大大限制了可以显示的项目数量。

线性列表显示也意味着你往往要经常滚动菜单，而且列表界面隐藏了所有信息。查看你的状态效果必须点击魔法标签，然后进入效果副标签，再滚动列表。把较少使用的信息如角色属性隐藏在标签后，完全不同于隐藏重要的信息如当你在行走时什么东西在消耗你的命值。

《湮灭》还缺少快捷键。没有地图按钮；你必须点击指南调出地图标签。没有“快速出售”按键，也不能成组出售；你必须用你的鼠标移动数量滑块，然后点击“进入”来确认数量。没有退出窗口的标准按钮（在大部分游戏中是ESC),所以要按E、Tab、Esc或其他键才能退出不同的窗口。

《天际》系列修改了一些问题，但有些没有改，有些甚至变本加厉。第一次打开《天际》中的一个小箱子时，我确实感到困惑：按Esc不能退出窗口；按存货键也不行；再次使用小箱子还是不行。你不能点击按钮退出，也没有提示告诉你该怎么做。点击外部窗口也不管用。你们猜猜最后我是怎么退出的？当在是覆盖/准备武器。

《孤岛惊魂3》

《孤岛惊魂3》的菜单对PC玩家来说简直是笨拙。有时候游戏对点击没反应，所以你不得不点击三次；菜单加载很慢；空间使用效率低——你现在知道是怎么回事了。

我本打算以第一版的游戏内HUD的状态为例，但它被修复了。所以我们还是看看《孤岛惊魂2》的HUD。

这就是大部分时候你看到的画面。生命条和弹药计算在需要时会淡入和淡出，但通常不显示在屏幕上。

现在我们看看《孤岛惊魂3》的HUD。

《孤岛惊魂3》的HUD始终显示在屏幕上。我很难接受它出现在屏幕或视频中；因为那让我产生的感觉就是，我突然被人从游戏中硬生生地拽回现实，太糟糕 了。

小地图是很大且不透明的，所以很碍眼。左上角的目标提示框也一样碍眼，尽管它会在几秒钟所消失，但当你正要忘记你是在玩游戏时，它又会跑出来破坏你的沉浸感。当你中弹时，命中提示非常碍眼地挡在屏幕中央，而不是像其他游戏那样出现在屏幕边缘的地方。如果你收集到足够的制作材料，另一个大的、不透明的弹出窗口就会出现在右边，让你知道你可以做新东西了。

每一次这些弹出窗口出现，都意味着把玩家从有趣的游戏世界中拽回现实，让他们知道自己只是在使用软件。过多的提示信息使玩家觉得游戏似乎在怀疑玩家的能力。游戏补丁允许玩家关闭大部分HUD功能，但小地图仍然在留在屏幕上，用鼠标和键盘仍然很难使用菜单。

优秀的游戏UI案例

我们还是不要把所有篇幅花在讨论糟糕的UI上吧。优秀的UI出自那些认识到系统的局限和优势的游戏。

《晨风》

大多数PC玩家都认可《晨风》（《湮灭》的上一部》是UI设计得最出色的游戏之一——除了我下面要说的一个问题。

我们来看一下这个屏幕上的几个基本元素：

1、这是一个由四个不同的、无标签的窗口组成的屏幕。顺时针方向看，你可以看到角色细节设定、地图（可缩放）、法术和魔法道具列表以及角色的仓库（有分类物品的标签）。

2、各个窗口上都有一个突起的小矩形块。点击后，相应的窗口就会在退出菜单模式后保留在屏幕上。例如，如果你要探索地形，你可以把地图窗口打开；或者你可以把魔法窗口打开，以便留心角色的生命值变化。

3、你可以把这些窗口拖放在屏幕的任何位置，也可以根据需要调整窗口或最小化窗口。

4、在这屏幕的右下方有一些状态图标。当你看到陌生的图标时，你可以在菜单模式下把鼠标悬停在它上面，这样就会出现一个小提示框告诉你它是什么。魔法窗口的顶部也有这些图标。

5、角色的仓库对空间的利用很有效，你可以通过调整仓库界面的大小，改变显示物品的数量。

这个UI对PC玩家意味着什么？基本上就是一键操作。想查看技能？滚动角色窗口。想装备物品？把物品拖放在角色纸娃娃上。这个界面用起来非常快捷简单，游戏世界中几乎所有类型的物品都有对应的图标，所以，想看Journeyman之锤？只需要在你整齐的仓库中寻找半秒。

这个UI的唯一缺陷就是，药水和滚动重用仓库图标；有药水品质的专用图标，但它的效果图标却没有，所以Master Water Breathing药水就很难与体力恢复大药水区别开来了。

《Beyond Good and Evil》

用控制器进行文本输入在大多数时候是很不方便的，有时甚至让人抓狂。你不能用手指直接按键盘上的按键，你必须用鼠标点击按钮才行，这就多了不必要的移动距离和动作。

《Beyond Good and Evil》通过执行被普遍接受的一种游戏机文本输入方案解决了这个问题：一条按顺序排列的字母和数字组成的螺旋带子。这条带子可以无延迟地快速滚动，它用声音反馈玩家的调整。令人不解的是，为什么其他游戏就没想到使用这么方便的设计呢？

好吧，我的说法有失偏颇了。其他键盘类文本输入屏幕确实允许玩家长按方向键和连续滚动所有按键，但通常会有延迟，而且滚动得不够快。（记住这个基本问题：“是否必须等待页面加载或直动画？”）

《家园》

《家园》于1999年问世，是第一款真正实现了3D移动的RTS。能够沿着三个轴方向称动物品是一个全新的设计挑战，而《家园》显然用风格和精致交出令人满意的答案。问题：如何在2D平面（你的显示屏）上体现3D移动。

解决方案：一，解决玩家习惯看到的传统水平面。

然后，解决额外的垂直面。

这个移动屏幕也给玩家提供了一些小而强大的工具：

1、注意这些侦察飞船的移动范围之外的罗盘圆环。《家园》的地图很大很空，所以罗盘指向对于在太空中前进是非常重要的。

2、看看这些线条多么轻易就组成了屏幕的功能部分。有些游戏为了让UI元素与世界保持和谐，就使UI元素透明，但《家园》没有那么做。这里，《帝国：全面战争》是一个反面教材：攻击弧指示器是由淡红色线镶不纯的白色构成的，经常与地形混起来。多亏了有MOD爱好者和他们提供的MOD。

3、在移动范围圈中央有一个十字准星，总是指向你选中的对象的中心。没有它，你将不得不寻找选中飞船的生命条来查看他们的位置，然而当飞船受伤害时，生命条会就得相当短小和模糊。

4、移动线给你指明前进方向，便于在没有明显的路标的情况下估计在通过地图的时间。

5、看看侦察飞船前面的收割飞船。有一条线通过它，终止于一个小圆形。这个小圆形位于侦察飞船（绿圆）的水平面上。这条线显示了收割飞船从上或从下距离平面有多远。有了这两个指示器，移动飞船就很快很准确了：移动圆盘上部的水平面标记，然后向下拖放到线的底部，以设置垂直面。

《十字军之王2》

《十字军之王2》是一款复杂又多重的游戏，几乎让玩家觉得自己很迟钝。然而，玩家却能通过它的界面克服困难。首先，帮助框多；当玩家遇到不熟悉的东西时，游戏会弹出相应的提示框。第二，有非常功大的功能。比如，我想知道某图标的含意，我只要把鼠标鼠停在它上面就行了。

（这里的工具提示有点儿空洞，因为这个截图没有捕捉到指针。）

一个工具提示出现了！游戏告诉我这些图标名称和相关信息，甚至告诉我那些信息是怎么组织的。游戏中的其他元素也有工具按提示，并且弹出反应非常灵敏，我几乎不需要等待。

你可能会说：“工具提示到处都是啊。当玩家把鼠标悬停在某物上时，弹出工具提标是自然而然的事。”确实，但人们容易忘记这一点。

《无风之谷》

提示工具特别容易被忘记的一个地方是，你的游戏的前面菜单。以下是《无风之谷》的垂直同步工具提示。

以下是《半条命2》的选项菜单的垂直同步工具提示：

相当实用。大部分了解高级图像选项的PC玩家都知道垂直同步是什么，但提供工具提示只是出于礼貌——只要它是一种实用的工具提示，且不是人们所说的：“关闭垂直同步或开启垂直同步。”

《文明5》

在快速提供可用信息方面，《文明5》的城市屏幕是一个好榜样。

从以上屏幕可知：你的整个帝国的经济和文明状态、包括人口增长在内的城市生产情况、城市可用的单位和建筑以及建造时间、 城市的扩张情况、城市区域内的资源和人民目前在作业的资源、城市范围内的已建成建筑、以及一个缩小了的在城市管理面板，你可以切换到不同的工人分配页面，以查看这个城市的各项生产情况。

你还可以在城市地图上移动工人，这样就充分利用屏幕空间了。

总结

最后，我们再看看UI设计的六条基本原则（也就是上述六个基本问题的答案）：

1、预测玩家想知道的东西，并提供相应的信息。

2、必须容易寻找信息。

3、你的UI应该容易使用和导航。使用普遍接受的习惯：所有人都知道按Ctrl是连选物品，所以不要把它变成交换物品。

4、使玩家容易知道自己在菜单系统中的位置，以便了解从这里可以切换到其他什么菜单以及在这个位置可以做什么。

5、尽可能减少加载时间和避免在菜单中使用动画。

6、删除或简化重复性操作。

UI设计是一项讲究逻辑的工作，但你不应该感到害怕。注意你玩的游戏，研究它们展示信息的方法及其让你产生的感觉。注意你反复做的事，以及如何改进这些重复性操作。寻找那些装饰性信息，考虑是否可以用其他东西取代它。注意让你感到困惑的东西。最后，总是邀请别人当着你的面试玩你的游戏。告诉他们如何运行游戏，然后静静观察他们的执行，此时你务必克制指导他们的冲动。