游戏UI/UX：道与术

在进入正题之前，先让我们讨论一下什么是电子游戏。抛开那个所有人都知道的唯像的定义，每个游戏制作人对什么是电子游戏这个问题都有自己的答案。这些答案根据其对机制、交互和体验三者之间关系的表述，我们可以将其分为机制主义者、交互主义者和体验主义者。机制主义认为游戏的机制是的电子游戏的核心，是其区别于其他表现形式的关键。游戏的其他部分只是为了玩家能够理解和操作这些机制而设计的；与机制主义相对的，交互主义者认为游戏与其他艺术表现形式最大的区别在于游戏的交互性，而机制和叙事则是实现这种交互的手段；而体验主义者则认为将电子游戏与其他艺术形式区分开的关键在于它所能提供给玩家的其他表现形式所不具备的独有的体验，而机制和交互只是实现这种体验的手段。

这三种观点各自的支持者都不在少数，而且都有充足的理由和精彩的游戏案例来论证他们自己的观点。同时各个观点的抨击也各有道理，例如康维生命游戏11 康维生命游戏是约翰·康威（John Conway）所发明的一种元胞自动机。详见康维生命游戏的维基百科。可以作为一个将机制主义推向极致的案例，这比起一般意义上的电子游戏，不如说是一个数学模型；将交互主义推向极致，我们只能得到一个赛博斯金纳箱22 详见斯金纳箱的维基百科。，这显然也不能称之为“第九艺术”；而体验主义则过于模糊，我们很难说出一个具体的，由游戏所独创的，其他表现形式不具备的体验。在这个问题上，大概最终游戏制作人们也不会得出一个共同的答案。现实中的电子游戏是机制、交互、体验缺一不可的产品，而三者之间的关系则是由游戏制作人凭借自己对游戏的理解而自由创造的，不同的理解会从根本上让游戏的设计和开发流程变得截然不同，最终制作出的游戏因此也会各具特色，而这种多样性的、独特的创造正是电子游戏行业生命力的表现。

言归正传，游戏 UI 是玩家和开发者一直面对却总是忽视其重要性的部分。在绝大多数玩家甚至开发者眼中，UI 都只是游戏中的标签、按钮、图标和页面跳转，与游戏的其他部分是近似独立的——事实上大多数游戏的 UI 也确实如此。然而我必须强调的是，这种最常见的方案只是一种妥协，UI 真正的内涵与外延远比一般认知中的更加宽广。

1. 当我们在谈论游戏的 UI 时，我们到底在谈论什么？

UI（User Interface）是用户界面的简称，它是指用户与计算机程序进行交互的界面，这包括硬件界面和软件界面。游戏作为一种特殊的软件，其 UI 是用户与游戏逻辑交互的界面。系统地说，我们可以把玩家与游戏逻辑的交互过程概括为如下的循环33 在现代游戏开发的语境下，由于游戏的渲染、音频和硬件的基础设施由引擎实现，引擎拥有应用程序的控制流。在这种情况下，上述的循环在实际工程中看起来会是隐式的。：

  1. 玩家通过物理设备制造输入
  2. 将输入转换为游戏逻辑中的输入
  3. 游戏逻辑根据事件更新游戏状态t
  4. 将游戏状态转换为物理设备的输出
  5. 玩家根据输出进行决策

图 1 游戏循环中 UI 的内涵

在这个过程中，我们接下来所谈论的 UI 是（1）（2）和（4）组成的整体。而 UX（User Experience）是用户在通过 UI 与游戏程序进行交互时的体验，因此 UI 和 UX 是不可能被分开来独立讨论的。

1.1. 可是我认知中的 UI 不是这样的？

这是由于随着计算机发展历史的演进，人们逐渐形成了一套约定俗成的设计语言：使用输入框、按钮、标签、图标等元素，以静态或响应式网格系统为基本布局方式，使用点击、焦点、拖动为主要的硬件交互逻辑。这套设计语言从网页和传统程序设计中被发明出来，已经成为用户和设计师的先验知识。

当人们使用一种语言时，语言也同样在塑造使用它的人。由于设计师大多熟悉平面设计和印刷品/网页设计，而大型游戏的复杂性又使得高度详细的分工成为一种必然，因此目所能及的游戏里，人们常常采用一种妥协的方式来设计 UI，即游戏演出与准静态的图形界面相结合的方式——前者是游戏中高度复杂的部分，例如 3C，场景等；而后者则使用上述的设计语言进行设计，成为了常规认知中的 UI。因此，大众认识中的 UI 其实是 UI 这一概念的子集。

图 2 全境封锁的 UI 设计。与传统的演出+ 准静态平面设计不同，它选择将控件和指示器通过 HUD 的方式嵌入在游戏场景中并参与游戏交互，这是在上述狭义 UI 的概念之外的。

2. 当我们进行游戏 UI 设计时，我们在设计什么？

由上所述，当我们在设计游戏 UI 时，我们在设计：

  1. 玩家的输入方式。这在狭义上是在固定玩家所使用的设备的前提下，设计玩家通过物理设备制造有效输入的方式。例如在 PC 游戏中的键位映射，鼠标点击、悬停和拖动等；而在移动设备、手柄、VR/AR 等其他设备上则需要针对性设计相应的输入方式。
  2. 物理输入到游戏逻辑的转换方式。这是指将玩家通过物理设备制造的输入，转换为游戏逻辑中的事件。
  3. 游戏逻辑到物理设备输出的转换方式。在 PC 游戏中，这包括信息显示、场景渲染、音效、界面元素等。这包括如何引导玩家的视觉重心，元素的先后顺序等许多复杂问题。
  4. 以上的三个部分有机结合所塑造的用户体验。这包括玩家的决策过程、游戏的反馈机制、游戏的情感状态、叙事等。

这么说来仿佛整个游戏只剩下 UI 和机制设计了。地编、角色原画难道也需要 UI 设计师去做吗？当然不是。地编、角色原画、UI设计师这些分工事实上是游戏开发者在设计游戏时，将游戏的一部分逻辑与相对应的 UI 紧密结合起来的结果。对于独立游戏开发者或者游戏制作人来说，从游戏叙事层面和 UI 两个角度来考虑设计问题是必要的。而对于 UI 设计师而言，从整个 UI 的角度出发，分析当前的场景应该展示什么，玩家需要哪些信息，可以做出哪些游戏操作，对此应该使用什么样的交互，是制作出色的 UI 所必须考虑的问题。

3. UI 设计在于调动玩家的先验知识

图 3 Flappy Bird 游戏截图

图 4 与之对应的纯文字信息界面

作为一个开胃小菜，图 3 是 Flappy Bird 的静帧。而 图 4 同样是 Flappy Bird 的静帧。你可能会抱怨道：“图 4 是 UI 吗？”当然是，而且它给出的信息相当完全。它包含玩家需要知道的所有信息，包括分数、鸟的高度，接下来可以通过的位置和抵达的倒计时。

对于游戏来说，二者相比，哪个能更好地将游戏的状态传达给玩家用以执行决策？想必不会有人选择 图 4 的 UI。这是为什么？与 图 4 纯粹的文本和数值相比，图 3 的 UI 调用了玩家的先验知识，将游戏的状态以可视化的方式展示出来，使得玩家可以更快速地理解游戏的规则和状态：玩家先验地知道空中的物体受到重力影响会下坠，鸟扇翅膀可以向上飞，撞到东西会很疼。

如何高效利用玩家的先验知识来减少玩家需要特别对待和学习的新知识或需要打破的先验知识，是 UI 设计时所需着重考虑的内容44 当然，也有需要利用玩家的先验知识让玩家陷入陷阱的做法，但那是玩法设计的事情，我们在这里不做考虑。。

3.1. 对比、颜色、形状的先验知识

人类视觉系统对高对比度的元素更敏感，颜色、形状、摆放方式也会影响注意力的分配。这些已经由前人总结为格式塔原理55 详见 https://www.interaction-design.org/literature/book/the-glossary-of-human-computer-interaction/gestalt-principles-of-form-perception等平面构成和色彩原理，在此不再赘述。

除此之外，形状也带有相当丰富的先验知识。从几何结构而言，锐角给人以危险和锋利的印象，直角给人以方正和科技造物的印象，而充满钝角形状的结构则让人感觉坚硬和笨重；除此之外，形状最重要的功能是通过象形，具体地指向玩家脑海中已经存在的某个概念。

3.2. 运动物体的先验知识

作为生物的本能，玩家会天然地认为正在变化的元素是可交互的，从静态到动态的变化会让一个元素迅速地吸引玩家的注意力。因此 Hover 效果是一种常见的 UI 设计元素，它可以提示玩家当前鼠标悬停在哪个可交互元素上。

3.3. 交互的先验知识

点击、悬停、在元素上的拖动是玩家利用鼠标交互的先验知识。在玩家不知道该如何与一个元素交互时，通常会选择使用这些方式逐个尝试一遍。这个元素的样式会影响玩家在选择这些操作时的优先级。对于一些形状上看起来“可拖动”的元素，玩家会先尝试拖动它，只有当拖动失败时才会选择点击或悬停。当玩家的鼠标放置在元素上时，鼠标指针或元素发生对应的变化也会影响玩家尝试交互的优先级。

键盘操作中，WASD 或方向键用以角色移动是先验知识，使用空格跳跃或确认、回车确认，ESC 返回或打开菜单也是玩家的先验知识。

3.4. 计算机标准的 UI 设计语言是玩家的先验知识

标准的通过键鼠输入，在屏幕上显示按钮等可交互控件和标签、图标、文本、进度条等不可交互控件来处理显示和交互的设计语言在长期的用户教育下已经是所有玩家的先验知识。玩家看到静态的按钮就会知道它是可交互的。而作为变化着的元素，进度条和旋转的加载指示器反而不被玩家认为可以交互，这是标准 UI/UX 设计语言对玩家的教育的结果。

3.5. 排版的先验知识

由于格式塔原理，玩家会将文本、图标、进度条等元素视为整体，而不是单独的个体。这使得玩家可以更快速地理解和使用 UI 元素。玩家通常会认为居中的元素是主体，而居左或居右的元素是辅助元素。这也是为什么在游戏 UI 设计中，居中的元素通常会被放在屏幕的顶部或底部，而居左或居右的元素则会被放在屏幕的左侧或右侧。

3.6. 场景模拟的先验知识

玩家对现实世界的场景化认知同样是重要的先验知识来源。游戏 UI 设计中常常使用取材自现实世界中的物体和场景布局，以帮助玩家更好地理解其交互的规则和状态。智能手表形式的 UI 会让玩家优先使用点击和滑动与其交互，而不是考虑键盘按键等其他交互方式，这是现实中使用智能手表这一场景的先验知识所决定的。角色从悬崖上坠落非常危险，墙体通常不可以穿越，锁住的门需要钥匙来打开……游戏演出部分的所有内容都可以说是利用玩家对现实世界的先验知识来达成的。

3.7. 先验知识是玩家群体特定的知识

不同的玩家群体会有特定的先验知识。例如大多数玩家都懂得如何看地图，因此这是一个相对广泛的可利用的先验知识；而只有少数玩家知道代码和栈的概念，因此这在通常情况下是相对较少利用的先验知识。这种先验知识在游戏设计中是非常重要的，因为它可以帮助游戏开发者更好地理解玩家的行为和需求，从而设计出更符合玩家需求的游戏。UI设计师需要考虑游戏的目标玩家群体和他们的先验知识，才能让游戏对目标群体而言更加亲切。

不同文化背景下的玩家也会有不同的先验知识。UI 的叙事属性在很大程度上受到各元素的样式所蕴含的文化背景和情绪的影响。北欧风格的游戏叙事通常要在各个元素中体现北欧的纹样和符号，中国风的叙事同样也需要体现相应的文化要素。

4. UI 设计在于减少玩家与游戏交互的摩擦成本

先验知识的利用让我们能高效地向玩家表明游戏目前的状态，而不是让玩家通过不断地尝试和学习来理解游戏的规则。这也使得游戏的交互成本大大降低，玩家可以更快速地完成游戏任务。

除了利用先验知识降低玩家与游戏交互的摩擦成本，经过设计的键位与交互逻辑也可以极大地降低玩家与游戏交互的摩擦成本。连续打开多级菜单进行操作是相当常见的场景，而如果每个菜单都需要玩家点击多个按钮才能到达，那么玩家就需要花费更多的时间和精力来完成任务。而如果每个菜单都有一个唯一的快捷键，玩家就可以通过按下这个键位来快速打开菜单，而不需要点击多个按钮；不同的页面的相同语义的交互应当被放置在相同或尽可能接近的位置，否则，玩家需要针对每个页面寻找自己想要找的操作在什么位置，这在页面众多的游戏中会是一场灾难66 这是由Fitt’s law 菲茨定律直接导出的结果。

语义化的模态键位则是更进一步的键位设计。赋予按键特定的含义，例如 F 键用作与游戏中的物品互动，这种操作通常需要玩家在特定情境下才能触发，因此称为模态键位。

除此之外，希克—海曼定律（Hick’s law）告诉我们，人在面临选择越多的时候，所要消耗的时间成本就越高。因此我们在不应把所有的主要选项平铺在一个场景中，而应将这些交互项按照游戏的空间上的或语义上的层级和顺序来组织它们。让一个静帧中的主要选项保持在5个以内是一个理想的选择。

增加一些交互的带来的效用也可以抵消玩家与游戏交互的摩擦成本。电子游戏所能调动的玩家感官只有视觉、听觉和触觉。前两者大多数开发者都能认识到，而触觉的调动则少有人提及。与PC的触觉交互主要是与键盘和鼠标交互的手感，连续的交互操作如果可以通过流畅的键位或动作衔接打出类似QTE的操作体验，则会成为游戏体验中可称道的重要部分——事实上这是PC音乐游戏最重要的反馈之一；键盘上按键触感的区别也可以利用，空格键和回车键作为键盘上的特殊大键，它们的手感是与众不同的，利用好这种独特的手感也可以创造出有节奏和愉悦触觉的交互体验。通过创造性的视、听、触觉的结合可以产生独特的游戏交互体验，让玩家在体验游戏时更好地进入心流状态。

4.1. 小结

游戏 UI 设计是一个复杂、综合、从实际出发的过程，旨在充分利用玩家的硬件设备和先验知识以降低玩家与游戏交互的摩擦成本。这个过程的高度复杂和玩家审美这一因素所带来的不确定性让游戏 UI 设计几乎成为了一种艺术，从交互主义的视角来看，游戏 UI 作为交互的唯一载体，就是游戏这一第九艺术本身。

5. UI/UX 设计的“术”：从修改一个常见错误集开始

在“术”的层面上，每个 UI 设计师的技法、经历和偏好会让设计具有各自的风格。这里没有绝对的指导原则，但设计成品的好坏却是可以通过体验和观察判断出的。因此由他人修改的 UI 就会掺杂他人的设计风格和思想，这是难以避免的事。下面是以我的“术”来对这个 UI 页面进行修改的案例。

图 5 源自 这篇 Amoniethian 的独立游戏开发日志

由于我只有准静帧作为参考77 好消息是，这个 UI 本身就是准静态的，所以没有太多信息蕴含在交互中 :)，所以在开始分析这个 UI 的问题之前，需要先找出这个 UI 希望向玩家传达的信息和期望玩家在这个界面下进行的交互。

5.1. 对 UI 所需达成的目标的分析

根据这个页面的内容，我推测这个页面希望向玩家传达以下信息：

  1. 玩家所处的亚空间区域名称、地形和在本区域中的所有地点，地点是包括但不限于前哨站的建筑，这些地点有自己的名称、风险等级、预期收益和描述；地点有普通、进阶和特殊三种标识类型。玩家一次只能选择一个可用的前哨站投放以执行任务。
  2. 玩家的鼠标操作有效性。即玩家鼠标在对应位置下是否能够触发预期的交互。这在目前是通过鼠标悬停在地区的圆圈上时高亮该圆圈来实现的。
  3. 当前选中地点的建筑类型、标识类型、风险等级、预期收益和描述。
  4. 玩家可以在这个页面返回到上一页面，按常理推断是一个可以在多个亚空间区域中选择一个的区域进行操作的更大的地图；又或者本页面是从任务系统面板的执行任务按钮弹出的，那么这会取消当前的所有动作回到任务系统面板。
  5. 当前的回合数。
  6. 在当前的页面可以抵达的其他页面的导航。
  7. 玩家查看地形的交互方法，包括缩放地图和移动地图。
  8. 当前的系统状态和通讯连接情况。
  9. 某种软科幻、迷幻与复古交织的叙事风格。

玩家在这个页面时可以执行的游戏操作，以及为了执行所述的游戏操作，需要进行的物理操作：

  1. 选择一个地点：通过鼠标点击在地图上选择对应地点的圆形区域。
  2. 在选择一个地点时转而选择另一个地点：通过鼠标点击在地图上选择另一个地点的圆形区域。
  3. 返回上一个页面：通过鼠标点击返回按钮。
  4. 缩放和移动地图：通过鼠标滚轮缩放地图，中键按住拖动鼠标以移动地图。
  5. 打开任务、干员档案、站点档案、守则、空间站历史、通讯的弹出菜单：通过鼠标点击对应的按钮。
  6. 在选择的地点投放以执行任务：通过鼠标点击投放按钮。

假设我没有遗漏或分析错需要传达的信息和可以执行的操作，那么这个 UI 在最基本的传达信息和表明可执行的交互操作这两点上都没有特别大的缺陷。但是就和上面 “UI 设计在于调动玩家的先验知识” 中所举的 图 4 例子一样，在信息的组织和传达方式上有待改进。

5.2. 目前 UI 的问题

图 6 对 UI 横向比例的分析和一些比较突出的问题

图 7 对页面内主要文本的 WCAG 对比度测试

5.3. “我流”准静态设计

我无意在这个 UI 的基础上大动干戈进行修改，这样修改后的结果是两种思路拼合成的怪物。因此，我会从头做一个类似布局的设计草稿来满足 “对 UI 所需达成的目标的分析” 中所描述的需求。

一台1982年的老式苏联示波器。 想让一个复杂的 UI 能够以最快速度将从玩家的脑子中调动起一整套操作和体验，那么基于场景的 UI 就是最好的选择。“迷幻、复古、科幻”的风格，1:4的双栏布局，一侧菜单，另一侧是显示器——有什么场景与之最相符？我的答案是示波器。从操作和逻辑上，示波器的交互也相当适合这个页面的需求。

辐射 4 的地图 UI 因此我将这个页面的交互整体搬入示波器的操作逻辑中。选中地点之后才应该出现的操作和信息被我顺理成章地放在了选中地点之后才出现的交互中。同时，根据上文提到的菲茨定律，我让交互和信息出现的位置和玩家的指针尽可能地靠近。在玩家使用鼠标和键盘操作地图的时候，网格、指示器、旋钮、游标都会随之变动，这让玩家可以在交互中得知这些元素的作用，与元素周围的细小文字标签相结合给玩家更整体、沉浸的场景交互体验。各个元素在发生改变时应当适当给予音效，在视、听、触三个感官上共同给予玩家操作的反馈。

以上便是我对这个 UI 的修改思路和设计草稿。希望通过这个案例，读者可以对游戏 UI 设计的理论和技巧有一些基本的了解。

5.4. “我流”设计

如果没有布局的约束，我的设计会是以动态交互为主要内容的游戏UI。

图 9 《明日方舟：终末地》的菜单界面。

6. 结语

在这个 AI 席卷全行业的时代，限制人知识和能力的最大瓶颈不是已知的未知，而是未知的未知：已知的未知可以通过各种技术手段快速掌握并使用，而未知的未知则连搜索的意念都无法产生，没有意识到问题的存在，也就不可能有解决的方法。这篇短文是关于 UI/UX，UI/UX 设计的概念纠正和一些绪论性质的内容，希望可以起到走马观花的作用，把一些未知的未知转化为已知的未知，如此的话这些文字就有了存在的意义。