给玩家更好的体验——浅谈沉浸式 UI的设计
来自微信公众号“六十和二四的世界”（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 设计。设计师对于用户交互体验的思考，定会有令人惊艳的新突破。
感谢您的阅读！
投稿邮箱：[email protected]
商务合作：Amber（微信：lcxk6876767）
其他合作：老林（微信：sea_bug）