浅谈沉浸式 UI的设计——容易出现的问题及解决方案

在上一篇文章中，我曾简单介绍了沉浸式 UI （ Immersive UI ) 的概念和设计原则。今天我准备谈谈沉浸式 UI 设计过程中容易出现的问题，以及可以采用的解决方案。

之前我提到 Celia Hodent 在 2015 - 2017 年 GDC ( 游戏开发者大会 ）讲座中所使用的玩家交互模型：发现（ Discovery ) - 学习（ Learning ）- 沉浸 （ Immersion ）。

其中，如何在“学习”这个环节，保证玩家有效率地获取并存储信息，是一个极具挑战性的任务。各种不同的问题，都会影响玩家的学习效率。这些问题包括：UI 信息杂乱；UI 系统学习成本过高；UI 系统和游戏世界存在冲突。

接下来我将试图讨论上述的三个问题。

UI 信息杂乱是很多游戏产品都会出现的问题。其原因在于游戏系统过于复杂，不同系统之间没有一个清晰的优先级。这种问题可能是由于游戏开发过程中，负责不同系统的各个组之间没有很好地协调工作，各个系统之间的联系没有得到梳理。当每个系统的信息都变得非常重要时，最后结果就是没有一个重点。如果 UI 信息能以层次分明的方式被呈现，玩家获取这些信息的效率将会极大提高。

抛开游戏产品开发流程上的问题，从设计的角度来说，我们可以通过“布局和层级”解决信息优先级的问题。

在师维所著的《游戏 UI 设计：修炼之道》中，便提到了设计师如何根据游戏功能的主次进行 UI 布局设计：“根据游戏具体内容的数量和重要性进行权衡，合理的归类布局和补齐内容。根据菲茨定律（ Fitts' Law ）的启示，在页面中大而近的目标区域意味着用户更容易达到，反之小而远的目标区域则意味着需要耗费更多的时间。将菜单栏和按钮放置在屏幕边角位置，相关的内容放在一起，尽量减少不必要的鼠标移动”。

简单来说，我们需要按照游戏系统信息的重要性，将其分配到画面的不同位置。比如在 FPS 游戏中，玩家角色的血量和武器值一般是最重要的信息。因此在常见的 HUD 设计中，血量和武器值都被放置在画面的下方，即高频查看的区域。而其他相对不太重要的系统信息，可以放在画面的上方。


在判断出不同系统的优先级之后，我们还需要找出各个系统之间的联系。比如药包和血量肯定存在强联系，但和武器弹药的关系就很薄弱。根据这些联系，我们可以把相关的系统组织在一起，使它们在画面中的物理距离相互靠近。这样一来，相关的系统将被视为一体，而不是彼此毫无关系。这种方法，便是基本设计原则中的“亲密性原则”。

另外，我们在区分系统主次的过程中，需要以动态的思维去思考 UI 的设计。在某些情况下，UI 传递信息的方式并不是静态的。


比如在《Call of Duty: WW2》中的坦克对战关卡中，UI 设计师需要创作出坦克被敌人炮火击中后的 UI 图标。如果我们纯粹从 UI 的角度去考虑，我们可以设计出视觉冲击力非常强的 UI 图标，以显示出玩家操纵的坦克被击中时的火炮强度。从系统来说，这种设计看似也没有问题。因为坦克对战时，自身是否被击中，以及敌人火炮的射击方向，都是非常重要的信息。但是，这样的设计，在实际的游戏中，可能出现很大的问题。因为实际战斗过程中，玩家坦克被击中的频率可能是非常高的。这样就意味着，击中 UI 图标会经常出现在画面上。如果图标的视觉冲击力过强，那么此时画面中的信息可能就会过载。玩家的注意力本来集中在敌方坦克，但是很可能会被 UI 图标的频繁出现所干扰。

所以，我们在设计游戏 UI 的不同层级时，还需要思考各个不同系统在游戏实际运行时的状况。设计师一定要以动态的思维去创造。

UI 系统学习成本过高一般出现在比较大型的游戏产品中。由于游戏产品本身系统复杂，即使每个系统之间的层级清晰，但是玩家学习成本可能依旧很高。更麻烦的是，在服务型游戏（ Game as a service ）极为流行的今天，一个游戏的 UI 系统不会一成不变。随着游戏的不断更新，整个 UI 系统可能会变得极为庞大。“堆积木”式的更新方式甚至可能破坏已有系统的层级。

何况游戏开发者很难在项目初期，预测一款大型游戏将来的更新内容。因此我们不能通过预先做好 UI 拓展设计，来应对将来的游戏内容变化。那么在这种情况下，游戏设计师应该如何解决这个问题呢？

说实话，关于这个问题，我们很难有直接的解决方案。不过我们可以尝试采用一些设计方案，降低 UI 系统的学习成本。

首先，我们可以利用“概念模型”来设计 UI 系统。因为人类总是试图通过简化的模式来存储和提取来自世界的信息。我们渴望规律和模式，因此我们需要把事物简化，好让它们进入到我们的大脑。一旦找到了模式，我们就不需要记住所有的事情。

如果游戏设计师可以为玩家提供一个“概念模型”，玩家掌握了该系统的基本概念后，便能很快地理解这个系统的行为模式。这样即使该系统未来被扩展，玩家不需要二次学习。


举个简单的例子，游戏《命运》中存在一个称为“Tower”的地点 。它类似于 RPG 游戏中的村庄。玩家可以在 Tower 中休息、升级装备、购买物品或者接受任务。从玩家的角度来说，Tower 如同一个补给站。玩家可以在 Tower 的不同地点，和不同的 NPC 进行互动。玩家的互动过程可以简化为：特定需求产生 - 找到提供对应需求的 NPC - 与 NPC 互动 - 完成需求。

某种意义上，Tower 实际上是一个复杂的 UI 系统。不同的 NPC 对应着不同的 UI 页面，玩家在 3D 世界中的移动实际等同于在不同的页面之间切换。这里，Tower 巧妙地把 UI 的信息移植到了空间中。玩家基于空间的记忆，完成各种 UI 页面的操作。如果 Tower 中增加了新的操作页面（ 比如新的 NPC )，玩家很容易注意到这个改变。相比于复杂的页面文件系统，玩家也更容易在 3D 的游戏空间中，找寻到目标 NPC（ 目标 UI 页面 ）的位置。

当然这种设计的弊端在于玩家的每次 UI 操作，需要来回移动，这会耗费巨大的时间。幸好《命运》的战斗之间的节奏相对较慢，且玩家补给装备的时间较为集中。因此这种设计和游戏本身有很好的契合度。

另外，我们需要注意“能供性”（ Affordance ）在 UI 概念模型中所扮演的角色。能供性是指环境为人/动物提供的一种可能性。举个例子，人如果捡到一个长而尖的树枝，很可能会把它当作武器。这是基于树枝的形状和硬度，从而提供了这个可能性。再具体一点，人面对不同的环境，会产生不同的认知模型。当我们在设计 UI 系统的时候，一定要注意其设计不要和玩家的心智模型产生偏差。


比如，相比于锄头，锤子更容易被玩家当作武器。即使锤子在游戏中被当作工具，但是玩家基于现实中对于锤子的认知，依旧会将其当作武器来使用。所以在设计工具的 UI 时，我们应该尽量避免“武器化”的倾向。

再举一个例子，UI 页面中的不同组件，究竟哪些是可以交互的，哪些是只读组件，这些信息能否很快地传递给玩家？我们能否基于“能供性” 的特性将其运用到 UI 设计中？这些都是我们需要思考的问题。


“UI 系统和游戏世界存在冲突”，这个问题看似不会影响玩家的学习效率，但是反过来说，和游戏世界契合完美的 UI 系统，对于玩家更具有吸引力，玩家也更容易投入其中，从而提高学习的效率。

如今很多游戏产品已经具有非常严格的视觉规范和鲜明的品牌特点。UI 作为视觉元素的一部分，每个设计的输出都得到了严密的把控。

为了让 UI 系统和游戏世界尽可能完美地契合，我们需要为 UI 制定规则手册，分别从基本字号、颜色版（ color palette )、色彩规则、动画风格、重要组件视觉状态等等方面进行定义。


比如，同样是射击游戏，科幻题材和二战题材的游戏 UI 设计，其质感势必不同。二战题材的 UI 的材质需要复古，复现出手工制品的质感。科幻题材的 UI 则可以按照极简主义设计，呈现出失真的视觉风格。


对于 UI 动画，我们也需要使其风格符合游戏题材的定义。比如二战题材的 UI 动画，就会参考当年的战争宣传片风格，多采用缩放、淡入/淡出的手法。动画较为笨拙。而科幻题材的 UI 动画，则可能采用简单几何图形搭配复杂位移变换的方式。动画比较平滑。


契合游戏主题的 UI 系统，能给玩家留下良好的第一印象。毕竟人处理信息的第一个层面基于本能反应（ visceral ）。这个层次对于信息的处理是自动的、下意识的，由我们的生物遗传来做决定。而良好的初始印象，会变为产生吸引力的资源，它是促使玩家产生积极情绪反馈的基础。

再举一个现实中的例子，原研哉事务所为梅田医院设计的指示系统，选取了白布作为制作材料。他的出发点在于，尽管白布本身易脏，但是反过来，这种易脏的材质如果能随时保持干净，反而体现出医院具备最严格的卫生标准，体现出医院坚持保持洁净的事实。这和高级餐馆会选取白色桌布是一个道理。白布在这里，不仅是设计师选取的材料，更是用来向用户快速传达信息的媒介。这种原则，我们可以同样应用在游戏 UI 设计中。


以上谈到的各种设计原则，只是游戏设计师技能树的冰山一角。我们可以发现，游戏 UI 设计所涵盖的范围在不断地扩大，无论相比于游戏的其他系统，或是其他领域设计，我们都能找到它与他者交汇的地方。这也是游戏设计的魅力吧！


来源：六十和二四的世界
原文：https://mp.weixin.qq.com/s/jR0xKOj5lZVVexTQ_2t-lQ