给玩家更好的体验——浅谈沉浸式 UI的设计

时间：2020-07-14 10:49:36 来源：作者：网络

来自微信公众号“六十和二四的世界”（ID：jim_60_24_world）

近几年以来，游戏 UI ( Game User Interface )正在迅速地发生变化。UI 在游戏中所扮演的，不再是一个孤立的角色。无论是 UI 所涉及到的范围，亦或 UI 在游戏体验中发挥的作用，它开始变得越来越重要。传统的关系结构，已经不再适用于当今的游戏作品。

一直以来，游戏 UI 如同舞台中的帷幕，观众和舞台的接触，需要通过帷幕的拉起才能实现。尽管这个比喻忽略了游戏互动的内容，但是这确乎是 UI 长久以来所起到的作用。尤其是街机时代的游戏 UI，其游戏开始界面，若用帷幕来形容，可谓是恰如其分。

然而，随着游戏行业的发展， UI 和游戏设计之间的边界变得愈发模糊。舞台和帷幕的边界不再那么清晰。游戏设计师需要创作出更棒的作品，以求玩家能获取更好的游戏体验，能更深入地沉浸在游戏的世界。为了达到这个目标， UI 所能发挥的作用不可或缺。因此，我将在这篇文章中，介绍本文的主角——沉浸式 UI ( Immersive UI )。

简单来说，沉浸式 UI 的目标是“有效地传递信息，为玩家带来更好的游戏体验，能让玩家专注于游戏互动”。沉浸式 UI 的形式非常广泛。很多时候，它和剧情 UI ( Diegetic UI ) 非常类似。剧情 UI 来自于 Fagerholt 和 Lorentzon 提出的游戏 UI 设计理论。简单来说，剧情 UI 是存在于游戏的 3D 空间中的一个物体。它能被游戏人物（即玩家操作的角色）看见。比如游戏世界中大屏幕上的操作菜单。这种形式的 UI ，不再是单独突兀的传统 UI ，它与游戏世界同时存在，玩家往往不会意识到它作为 UI 的存在，因此它能促进玩家的沉浸感。

但是，沉浸式 UI 不是依赖于弱化 UI 的存在感。传统形式的 UI 也可以是沉浸式 UI。这一点，我会在接下来的内容中具体阐述。对于我来说，沉浸式 UI 的判断标准来自于目标和实现的结果。凡是能增强沉浸感的设计，都可以创造出沉浸式 UI。这类 UI 完全由目标驱动。所以，我的思考都是以此为出发点。面对众多优秀的沉浸式 UI 范例，我需要找到一个好的框架来梳理和归类。

我决定使用 Celia Hodent 在 2015 - 2017 年 GDC ( 游戏开发者大会）讲座中提到的用户交互模型。她从认知科学和脑科学的角度，向大家展示了玩家是如何了解、学习并沉浸在一个游戏当中。

这个原则分为三个部分：

发现（ Discovery ) - 学习（ Learning ）- 沉浸（ Immersion ）

发现（ Discovery ) 是玩家接触游戏信息的第一个阶段。这个阶段中，我们需要引导玩家注意到游戏试图传达的信息。由于当代游戏，尤其是大型游戏中，各种信息繁复，如何让玩家迅速注意到关键信息，同时不影响游戏其他系统的运转，这需要我们在设计时格外注意。

简单来说，我们需要创造一个关注点（ Focus Point )，即游戏界面的主体（类似摄影中的主题）。我们可以通过游戏界面的布局，或者是游戏 UI 特效甚至是音效，达到这个目的。

比较常见的方式，便是利用色彩。通过色彩吸引观众的注意力，从而让他们快速注意到主体，这种设计方案经常运用在电影和平面设计中。

电影《辛德勒的名单》

David Drummond 为书籍设计的封面

在上述的两个例子中，我们能都看到“大面积底色 + 点缀色”的形式。点缀色彩能轻易抓住观众的视线，突出画面中想要强调的元素。在电影《辛德勒的名单》中，创作者没有使用旁白，或者是特写镜头，而是通过红色让观众注意到小女孩的存在。一旦观众注意到小女孩的存在，之后创作者便可以基于这点，进一步推动故事的发展，而不用担心观众会在下一幕中，便忘记了小女孩的存在。

游戏《镜之边缘》

在游戏《镜之边缘》中，游戏设计师使用红色来显示水管能和玩家互动。在传统设计中，玩家靠近水管后，通常游戏会弹出按钮图标，显示玩家可以通过按键攀爬水管。实际上，这种设计在这里多此一举。一旦玩家知道如何和水管交互后，弹出的水管 UI 信息便会显得冗余。另外，在游戏过程中，玩家操纵的角色会快速移动，这样其实很容易错过弹出式 UI 信息。因此，游戏设计师利用色彩的设计，非常高效且优雅。

当然，游戏中其他常见的 UI 引导方式，便是通过动画引导玩家。这里我以《崩坏3》举例。

游戏《崩坏3》加载动画

游戏《崩坏3》启动后，内容加载是通过电梯上升的方式得以呈现。当加载完毕后，电梯便到达顶楼，游戏画面进入到游戏的主界面。加载过程和游戏主界面之间没有任何间隔，玩家的注意力非常自然地过渡到游戏界面。这种引导方式增强了仪式感，同时保证了游戏体验的完整性。虽然这个设计只是游戏中很小的一部分，但是作为游戏的开始流程，这无疑为玩家留下了极佳的印象。

在引导玩家发现游戏信息的过程中，有一点切记——“千万不要喧宾夺主”。如同李小龙提到的“不要看指头，而要看指头所指的月亮”。

如愚见指月，观指不观月

我们希望玩家关注的信息是“月亮”，而吸引玩家关注信息的各种设计，便是“指向月亮的手指”。如果我们过多关注“手指”，比如夸张绚丽的 UI 动画，那么玩家的注意力的确会被吸引，但是他们不会进一步探索游戏呈现的信息。

当玩家探索到信息后，便会开始学习（ Learning )。然而，学习充满了困难。玩家需要理解、记忆、试错，还要饱受“记忆遗忘曲线”的折磨。玩家能容忍的学习负载是如此之小（因为他们是为了获取乐趣，而不是重新体验昔日的考试），游戏设计师必须保证游戏的信息容易被理解。

传统的游戏 UI，比较常见的一个问题便是：玩家记不住各个界面之间的层级关系。随着游戏界面愈发庞大和复杂，当玩家点开主菜单当中的子界面 1，再从子界面 1 中点开子界面 a，如果此时玩家想打开子界面 2，他们很容易感到困惑。他们可能记得子界面 2 的内容，但是无法想起如何开启界面，或者寻找到他们所需要的信息。一旦玩家开始感到困惑甚至是恼怒，沉浸感便无法建立。更糟糕的是，随着沉浸感的破灭，玩家的注意力也会丧失。但恰恰是高度的注意力，才是玩家高效率学习的前提。这无疑成为了一个恶性循环。

而在最近的游戏产品中，越来越多的游戏设计师，通过使用情景化 UI 来解决这个问题。情景化 UI 能利用空间来帮助玩家记住信息。空间的存在会构建玩家的记忆。

游戏《星球大战：前线 II》主菜单

游戏《星球大战：前线 II》中，其主界面采用了“透明化材质 UI + 3D 场景”的设计。玩家每深入到下一层菜单中，画面右边游戏角色的全息影像（这里是克隆人）便会越靠近镜头。我们可以看到，当玩家深入到第三个层级时，游戏角色是以半身像的形式呈现，和镜头的距离已经非常近。通过全息影像和镜头之间的距离，玩家可以大致判断自己所处界面的层级。这种层级规律，简单实用。3D 场景的存在，保证了每次菜单之间的切换不会造成空间的割裂。而且比较有意思的是，玩家记忆负载的平均数量恰恰是“三”。我猜测这也是为何游戏菜单的最深层级止步于三层。

约翰通过感染人数热点图，发现了感染人数和水井的联系

而在另一方面，游戏设计师开始更多地利用图像传递信息。相比于文字，图像确实具备很多优势。历史上人类第一次发现霍乱的传染方式，便是内科医生约翰斯偌通过将伦敦的霍乱感染数字，转化为图像列表，从而发现了规律，推断出霍乱能通过水源传染。

图像能够直观地传递复杂的信息，尤其是不同事物之间的关系。

《孤岛惊魂5》的武器图标

比如《孤岛惊魂5》中，游戏设计师通过采用不同颜色的图标，来显示武器的额外配件。对于不熟悉枪械知识的玩家来说，通过这种方式学习不同枪械配件的名称，远比各种文字描述要容易得多。同时，这种配件和武器的关系，直接通过图像传递，玩家也容易分清不同配件和武器不同部位的连接方式。

总而言之，我们需要确保游戏 UI 的输出易于理解，形式简单使用，这样玩家的学习过程会变得相对轻松，交互的障碍会大为减少。

为了达到最后一步“沉浸（ Immersion )”，当玩家完成学习后，我们需要保证游戏系统能提供持续的有意义的反馈，并利用自然的映射，让互动清楚有效。通过激发玩家自发的驱动力，以及情感上的反馈，从而让玩家进一步参与到游戏行为中。与其让玩家学习“如何使用 xxx 功能”，不如转变为让玩家学习“为何需要 xxx 功能”。

很多时候，人的自我驱动力能达到很多神奇的效果。Celia 在 GDC 2016 的演讲中，提到了一个非常有趣的实验。科学家找来一群年龄不一的小孩，要求他们迅速判断由相同几何图形组成的两排中，哪一排的几何图形数量更多。能成功完成测试的小孩，最小年龄为 6 - 7 岁。

The Gamer's Brain, Part 2: UX of Onboarding and Player Engagement

当科学家将几何图形换成糖果图案后，能成功完成测试的小孩年龄降低到了 2 岁。由此可以看到，驱动力能让人的行为产生怎样的变化：糖果对于小孩无疑具有更强的吸引力。由于糖果在小孩日常生活中随处可见，这种自然的信号根本不要小孩花费额外的精力去学习和理解。对于糖果的渴望增强了小孩的专注度。

人的驱动力可以分为外在驱动力和内在驱动力。内在驱动力来源于人自身的喜好、创造力、对于生死的认知，这种激励是自发的。而外在驱动力则是通过诸如奖励、竞争的方式所驱动。游戏的每个系统，都可以为玩家提供无数个小的目标，驱动玩家逐一完成。如果每个目标，同时契合游戏试图提供给玩家的核心目标和体验，那么玩家的整个游戏体验，就会变得完整。

让我们来看看，在被 UI 设计师反复提及的游戏《死亡空间》中，UI 设计师是如何完成了这个目标。

《死亡空间》没有 Hud，UI 存在于游戏空间中

首先，设计师则为玩家提供了一种易于理解的概念模式。《死亡空间》的 UI 和游戏角色完全融合。这就是我们前面提到的剧情 UI。玩家操作角色的血量，通过角色背上的发光管数量呈现。武器的弹药数量，则是通过全息图像的方式呈现。子弹数量和玩家角色的血量，是玩家在整个游戏核心体验中（ 生存 + 杀死敌人 ）需要参考的主要数据。游戏设计师通过使用剧情 UI，让血条、子弹 UI 和玩家角色产生了极强的联系。当玩家在战斗过程中，眼球所关注的区域可以完全集中在画面的中央。

试想如果游戏设计师采用传统的 UI 布局，血条和子弹数量放置在屏幕的一角。那么玩家首先要在战斗时，视野不断在画面中央（战斗区域 ) 和画面边缘来回切换。其次，UI 和玩家角色是割裂的状态。尽管玩家也能很快接受两者之间的关系，但是剧情 UI 所达到的沉浸式 UI，无疑更能让玩家身临其境。

UI 成员研究肉类的构造

除此之外，《死亡空间》的 UI 设计师，为了向玩家传递“绝望恐惧”的情感体验。他们仔细研究了现实中肉类的质感和构造，并将这种信息加入到 UI 素材的创作中。这些令人厌恶的图片就被放在界面的背景中，虽然没有直接呈现给大家，但是玩家会被潜意识地影响。从这里可以看出，UI 没有单独地和游戏主体分开，而是从方方面面契合游戏的核心内容。无论是美术风格和情感体验，UI 交互方式和游戏核心机制的联系，《死亡空间》的 UI 都和游戏整体内容，完美地契合在一起。

相信我们能在未来的游戏产品中，看见更多出色的沉浸式 UI 设计。设计师对于用户交互体验的思考，定会有令人惊艳的新突破。

感谢您的阅读！

作者：广播员 Jim