游戏 UI 示例：好坏例子对比的速成课程

玩家将他们的意图付诸行动或理解游戏中发生的事情有多容易？在本教程中，您将学习如何通过检查现有游戏的好例子和坏例子来构建更好的游戏 UI，并最终得到一个问题清单来指导您完成设计。

顺便说一句，您应该查看我们的 2020 年 UI 和 UX 设计指南，以了解最新趋势。如果您正在寻找开始的地方，您可以 在 Envato Elements 上找到大量精心设计的游戏资产。

Envato Elements 上的游戏资源

介绍

作为游戏玩家和游戏开发者，我们知道沉浸感就是一切。当您沉浸其中时，您会忘记时间并参与游戏所呈现的内容。决定沉浸感成败的一个主要因素是玩家将想法转化为游戏内动作的难易程度——也就是说，游戏的用户体验 (UX) 的流畅程度以及其用户界面的精心设计(UI) 是。一个游戏通过提供太少或太多的信息、需要太多的输入、用无用的提示让玩家感到困惑或让新玩家难以互动而伤害了自己。糟糕的 UI 设计甚至会彻底破坏你的游戏。

Honey Bee Match 3 的合成截图。左上半部分由ColorOracle以绿盲模式呈现；右下半部分是原件。估计每 100 人中就有 1 人是绿盲，而这款游戏对他们来说几乎无法玩。

在本文中，我不会教你如何将 UI 组合在一起。相反，我将专注于使 UI 设计良好或设计不佳的原因，以及如何将这种想法应用到您自己的游戏中。我将把 UI 和 UX 设计作为一系列目标来研究，这些目标与游戏的任何其他部分一样重要和精确，使用的例子来自错误的游戏和正确的游戏。

什么是 UI 和 UX？

术语UI和UX有时（错误地）可以互换使用，但它们具有特定的含义。

UI 或User Interface是指用户与您的游戏交互的方法（键盘控制、鼠标控制）和界面（库存屏幕、地图屏幕）。UX 或用户体验是指这些交互的直观和愉快程度。

换个角度来看：汽车的用户界面是它的方向盘、踏板、仪表盘上的刻度盘和控件；汽车的用户体验来自于无形的东西，比如反应灵敏的制动踏板、踩油门时发动机平稳加速、具有恰到好处的阻力的变速杆——这些让汽车驾驶起来很愉快。

一个好的用户界面有什么作用？

简而言之，一个好的 UI 的作用是清晰、快速地提供相关信息，并在完成工作后不碍事。如果您只从本教程中获取一点信息，那就这样吧：

一个好的用户界面会告诉你你需要知道什么，然后让你走开。

我们可以更进一步，将 UI 设计的过程归结为六个基本问题：

1. 这个界面是否告诉我我现在需要知道什么？

2. 是否很容易找到我正在寻找的信息，还是我必须四处寻找？（菜单嵌套太深以至于对玩家隐藏信息？）

3. 我可以使用此界面而无需阅读其他地方的说明吗？

4. 我可以在这个屏幕上做的事情是显而易见的吗？

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

6. 有没有我可以缩短（例如使用快捷键）或完全删除的乏味或重复性任务？

在设计和玩游戏时经常问这些问题。UI 设计的世界是一个无休止的吹毛求疵的世界，它是游戏开发中少数可以沉迷的领域之一。

恰当的例子

一个很好的例子是Fallout 3的 Pipboy - 或者，更具体地说，当你访问它时，你的角色将 Pipboy 提升到视线水平的短动画：

动画只持续半秒，所以你可能不会花太多心思。但请注意，在 80 小时的游戏过程中无数次坐下来后，它如何挑战玩家的耐心。永远不要断定你的玩家会“习惯”以非最佳方式做某事。他们只会激怒并诋毁你缺乏设计感。

如何练习设计 UI？

我相信学习 UI 设计最好的方法就是制作网站。像Jakob Nielsen 的 Alertbox这样的惊人资源可以为您提供尽可能多的信息，了解究竟是什么让 UI 易于使用、人们如何与软件交互等等。

编者注：总是有我们的姊妹网站Webdesigntuts+ ...

一个好的 UI 的核心是可用性，这是一个包含前面提到的六个基本问题的答案的属性。关于可用性和使您的界面可用，还有很多话要说，我让您选择Alertbox并找到与您的体验相关的部分。

谁应该设计游戏的 UI？

许多程序员害怕制作 UI，因为他们觉得这是一项创造性的工作，最好留给像艺术家这样对演示有更好理解的人。然而，UI 设计在很大程度上是一个合乎逻辑的过程，对开发人员来说是完全平易近人的。

事实上，我相信程序员（或者创意总监，或者你团队中最直接影响游戏体验的人）应该负责UI的制作，因为他们知道游戏里里外外，谁知道哪些信息是重要的，哪些是附带的。

他们应该关注 UI 的功能方面：它有多大，它（或应该）滚动，显示什么信息，在哪里，以及玩家如何浏览它。用两种或三种颜色来模拟它，永远不要仅仅依靠颜色的变化来传达信息。至少，通过ColorOracle或Coblis运行它，以确保色盲的人不会错过。

界面不佳的游戏

在开始讨论之前，重要的是要了解，当我谈论糟糕的 UI 时，我会根据我作为一名使用键盘和鼠标玩游戏的 PC 游戏玩家带来的想法和行为来做出判断。

用户对输入的选择与用户体验极为相关，尽管这不是全部。例如，习惯了触摸界面的人会觉得按钮界面很尴尬，但设计良好的按钮界面仍然很容易理解和预测。

遗忘

Oblivion 的 UI 是一个平台的 UI 与另一个平台不兼容的经典示例。即使 Oblivion 从游戏机移植到 PC，它仍然保留了以控制器为中心的 UI。这完全类似于在ios或android上发布游戏并让玩家移动屏幕上的光标，就像他们使用笔记本电脑的触控板一样，而不是利用绝对触摸位置。

那么是什么让 Oblivion 的 UI 如此糟糕呢？这是浪费空间、不适当的缩放和不适当的控制的组合。

我希望您一次查看六个项目很酷；这些窗户不可调节。在 1920x1080 分辨率下，传达相关信息（例如库存内容）的菜单的实际部分仅使用总屏幕空间的 21.7%。

只使用屏幕的五分之一并不是那么糟糕：你可以在这么大的空间里做很多事情。真正的问题是字体和图标的大小是在 PC 显示器上查看所需大小的两倍，这极大地限制了可以显示的项目数量。

线性列表视图还意味着您倾向于进行大量滚动，并且选项卡式界面对您隐藏了所有内容。检查您的状态效果包括单击“魔术”选项卡，转到“效果”子选项卡，然后滚动列表。在标签后面隐藏很少使用的信息（例如角色统计信息）是一回事，但隐藏重要信息（例如在您四处走动时消耗您的健康的原因）则完全不同。

遗忘也缺乏捷径。没有地图按钮来调出地图；您必须单击指南针以调出地图选项卡。没有 Quick-Sell 键或 Sell Stack 快捷键；您必须使用鼠标操作数量滑块并通过单击或按 Enter 确认。退出窗口没有标准按钮（大多数游戏中的 Escape），因此通过按 E、Tab、Escape 或其他键来退出不同的窗口。

续集《天际》将继续解决其中一些问题，但有些问题会继续存在或变得更糟。我第一次在天际打开箱子时实际上被卡住了：逃生并没有让我离开那个窗户；库存钥匙没有让我出去；试图再次使用胸部并没有让我失望。没有可以单击退出或提示告诉您该做什么的按钮。在窗口外单击不起作用。猜猜最后是什么钥匙让我退出了箱子？护套/准备好的武器，当然。

孤岛惊魂3

孤岛惊魂 3 的菜单对于 PC 用户来说真的很尴尬。有时它不响应点击，所以你必须点击三下；菜单可能需要一些时间才能加载；它并不是真正节省空间 - 你现在知道交易了。

它已经打了补丁，所以我将重点关注它首次发布时游戏内 HUD 的状态。让我们先来看看其前身《孤岛惊魂 2》中的 HUD。

这是你大多数时候看到的。诸如健康指标和弹药计数之类的东西会在您需要时淡入淡出，但总的来说，HUD 会让您一个人呆着。

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

Far Cry 3的 HUD不会让你孤单。我很难在屏幕截图或视频中展示它；这只是你作为一名不断被拉回现实的玩家所经历的事情。它会产生幽闭恐惧症的感觉。

小地图很大且不透明，因此会妨碍您。左上角的客观提醒也很大且不透明，并且会妨碍您，尽管它会在几秒钟后消失，但它会在您即将开始忘记自己正在玩游戏时重新出现。当你被击中时，命中指示器会出现在屏幕中央附近，它们会再次阻碍你，而不是像其他所有游戏一样出现在屏幕的边缘。如果您收集了足够的制作材料，右侧会出现另一个不透明的大弹出窗口，让您知道您可以制作新的东西。

每次这些弹出窗口出现时，它都会让玩家摆脱他们所拥有的任何乐趣，并提醒他们他们正在使用软件。明显信息的过度供应让人感觉游戏不相信玩家有能力。该补丁允许您关闭这些 HUD 中最糟糕的功能，但小地图仍然存在，并且菜单对于鼠标和键盘交互仍然很尴尬。

具有良好用户界面的游戏

但是，我们不要把所有这些时间都花在谈论糟糕的 UI 上。UI 的优秀示例来自承认其系统的局限性和优势的游戏。

晨风

大多数 PC 游戏玩家都同意 Morrowind（Oblivion 的前身）拥有最好的 PC UI 之一——除了我将在下面讨论的一个问题。

让我们回顾一下这个屏幕的基本元素。

• 它是一个带有四个不同的未选项卡窗口的单一屏幕。从左上角顺时针方向，您有角色详细信息、地图（您可以缩放）、您的法术和魔法物品列表以及您的库存（带有用于分类物品的标签）。

• 每个窗口的右上角都有一个凸起的小正方形。如果单击此方块，则即使退出菜单模式，该特定窗口仍将保留在屏幕上。例如，如果您尝试完全绘制海岸地图，则可以保持地图窗口打开，或者您可以保持魔法窗口打开以密切关注治疗环中剩余的充电次数。

• 您可以将这些窗口拖动到屏幕上的任何位置，并且可以调整它们的大小或最小化它们以根据您的需要定制 UI。

• 屏幕右下方是一些状态图标。如果您在那里看到一个不熟悉的图标，您可以在菜单模式下将鼠标悬停在它上面，工具提示会告诉您它是什么。相同的图标也出现在 Magic 窗口的顶部。

• 库存以节省空间的网格布局，您可以通过调整库存屏幕的大小来调整其显示的项目数量。

这个 UI 对 PC 播放器意味着什么？几乎所有内容都只需单击一下即可。如果您想查看您的技能，请滚动角色窗口。如果你想装备一些东西，你把它拖到你的纸娃娃上。该界面快速且易于访问，世界上几乎每种类型的物品都有一个独特的库存图标，因此找到您的熟练工锤需要半秒钟查看您整洁、可扩展的库存。

唯一让这个 UI 失望的细节是药水和卷轴重用了库存图标。药水的质量有独特的图标，但效果却没有，所以大师水呼吸药水看起来就像大师休息矿石疲劳药水。

超越善恶

使用控制器输入文本在最好的时候是不方便的，在最坏的时候是痛苦的。您不能将手指直接移动到某个键上，您必须按自己的方式按下按钮，从而产生许多不必要的动作和动作。

Beyond Good and Evil通过实施通常被认为是有史以来最好的控制台文本输入方案来回避所有这些：一个无限的丝带，上面按顺序排列着字母和数字。功能区滚动快速且无延迟，提供持续的听觉反馈，并且对调整做出响应。为什么其他游戏没有效仿它是一个谜。好吧，我有点不公平。其他键盘样式的文本输入屏幕确实允许您按住一个方向并按顺序滚动浏览所有键，但它们在开始全速滚动之前通常会有延迟，或者滚动速度不够快。（请记住基本问题，“我是否需要等待界面加载或播放动画？”）

家园

Homeworld 于 1999 年破土动工，因为它是第一个具有真正 3D 运动的 RTS。能够沿三个轴移动单元是一项新的设计挑战，而 Homeworld 绝对具有风格和优雅。问题：如何在 2D 平面（您的显示器）上表示 3D 运动。

解决方案：首先，处理玩家习惯的传统水平面。

然后，处理额外的垂直平面。

运动画面还为玩家提供了一些微妙但强大的工具：

• 请注意这些童子军活动范围之外的指南针环。Homeworld 的地图又大又空，指南针航向对于在本地空间中定位自己很重要。

• 看看构成这个屏幕功能部分的线条是多么容易。一些游戏试图通过使它们变得苍白或透明来使它们的 UI 元素与游戏世界协调一致，但 Homeworld 却没有。帝国：全面战争是一个很好的反例。发射弧指示器由一条细红线组成，边缘有白色污迹，它经常融入地形。感谢上帝的模组和模组。

• 移动范围圆圈的中心有一个漂亮的十字准线，它始终指向您选择的阵型的中心。没有它，您将不得不寻找所选船只的生命值条以找出它们的位置，并且当船只受损时，生命值条会变得非常小和黑暗。

• 移动线为您提供移动距离，便于在没有明显地标的地图中估算运输时间。

• 看看侦察兵前面的收割机船。有一条线穿过它，终止于上方的一个小圆圈。该圆圈位于童子军的水平面上（绿色圆圈）。这条线标出了 Harvester 实际在该平面下方或上方的距离。使用这两个指标，向船移动既快速又准确：移动圆盘顶部的水平面标记，然后向下拖动到线的底部以设置垂直面。

十字军之王2

十字军之王 2 是一种复杂的、多层次的游戏，让你感觉很愚蠢。但是，它的界面会尽力帮助您完成这一切。首先，会弹出许多帮助框，直到您对游戏的那部分感到满意并告诉它停止。其次，有这个奇妙的功能。假设我想知道硬币图标代表什么；我只是将鼠标悬停在它上面然后BAM！

此处的工具提示看起来有点无实体，因为屏幕截图中未捕获指针。

出现了一个狂野的工具提示！游戏告诉我如何称呼硬币图标，给我相关的信息，甚至告诉我这些信息是如何组织的。您可以对游戏中的任何其他元素执行此操作，并且工具提示会很快出现，因此我无需等待。

你可能会看到这个并说，“Duh，工具提示一直存在。当然，当我将鼠标悬停在某个东西上时应该会弹出一个。” 请记住它，因为它很容易忘记。

无风谷

一个特别容易忘记工具提示的地方是游戏的正面菜单。这是“无风谷”选项菜单中的 Vsync 工具提示。

这是Half Life 2: Episode 2的选项菜单中的 Vsync 工具提示。

真的很有帮助。大多数进入高级图形选项的 PC 游戏玩家都知道 VSync 是什么，但放置工具提示只是礼貌 - 只要它是有用的工具提示而不是显示“打开或关闭 VSync”的工具提示。

文明5

Civ 5 的城市屏幕是快速提供信息的一个很好的例子。

这个单一的屏幕告诉你：你整个帝国的经济和文化状况；这座城市的生产，包括人口增长（如果建筑清单倒塌，还有边界增长）；该城市可用的单位和建筑物以及建造它们需要多长时间；您的城市的扩张，以及其中的资源图块以及公民当前正在使用的图块；已经在其中建造的建筑物，以及一个折叠的公民管理面板，您可以在其中切换到不同的工人分配配置文件以专门化该城市的输出。

您还可以在城市地图上的瓷砖之间移动工人，充分利用所有这些屏幕空间。

结论

让我们将 UI 设计的六个基本问题重新定义为六个通用准则：

1. 预测用户想知道什么，并给他们这些信息。

2. 信息必须易于查找。

3. 您的 UI 应该易于使用和导航。尽可能使用已建立的模式：每个人都知道 Ctrl-Click 将项目添加到选择中，所以不要让它交换项目。

4. 让用户在菜单系统中的位置显而易见，并让用户可以去哪里以及他们可以从那里做什么。

5. 最小化加载时间并避免菜单中的动画。

6. 消除或简化重复性任务。

UI 设计是一项你不应该害怕做的合乎逻辑的工作。注意你玩的游戏，注意它们如何呈现信息以及这让你感觉如何。记下您重复做的事情，以及如何改进它们。寻找仅作为装饰的信息，并考虑用什么代替它。注意让你感到困惑的事情。最后，总是让一些人在你面前测试你的游戏。告诉他们如何运行游戏，然后静观其变，抵制引导他们的冲动。真是令人谦卑。