《赛博朋克2077》UI设计有哪些值得学习和反思的地方？

以下文章来源于六十和二四的世界 ，作者广播员 Jim

本期内容，我将从游戏《Cyberpunk 2077》（ 之后简称为 《2077》 ）的 UI/UX 设计出发，探讨相关设计的常见问题。不得不说，《Cyberpunk 2077》的 UI 设计，如同其游戏本身，优点和缺点并存，且两极分化严重。其背后的影响因素，正是当前游戏 UI 发展过程中，势必会遇到的问题。

话不多说，让我们进入今天的话题。

一

《Cyberpunk 2077》UI 色彩板

首先，2077 UI 颜色搭配，采用了非常典型的赛博朋克颜色，即现实中常见的霓虹灯色彩。这些色彩大多互为互补色，从而营造出非常独特的视觉效果。互补色可以让主色调更为明显，从而创造出更具有冲击性的艺术效果。早在印象派时期，莫奈和梵高便是使用此技术的专家。

左为游戏中的两组互补色，右为《Cyberpunk 2077》UI 主开发 Dan Voinescu 的作品

维克托·莫斯科索的海报作品 The Chambers Brothers, The Matrix, San Francisco, 1967

另一方面，这种颜色搭配还能表现超现实的迷幻氛围。20 世纪的平面设计师维克托·莫斯科索（ Victor Moscoso ）曾利用互补色，制作出“色彩颤动”的效果。因为不同颜色经过眼睛水晶体时，会在不同平面上聚焦，最终视网膜成像的清晰度会存在差别，从而产生如同颜色颤动的效果。因此上个世纪 60 年代，这种风格常常用于迷幻摇滚乐和嬉皮士音乐的海报设计。

霓虹灯色彩从上世纪 70 年代开始便出现在大荧幕上。上述各个图片分别来自于《肮脏的哈里》、《省港骑兵》、《南方车站的聚会》、《过关斩将》、《出租车司机》、香港 1975 年夜景、《终结者 2 》、《有话好好说》、《银翼杀手 2049》、《攻壳机动队》

除此之外，霓虹灯设定本身具有极强的非现实感。常见的霓虹灯颜色，在自然界非常少见。当人们看见这种颜色时，自然很联想到城市、现代、科技。而赛博朋克题材的设定便是基于资本和科技发展到极致的大城市。因此整个颜色的搭配和题材的设定达到了很完美的自洽。

但是这种风格化的设计，有一个致命的缺陷 —— 玩家的阅读体验不佳。

《2077》的字体阅读体验不太令人满意

以字体来举例，因为前面提到的“色彩颤动”效果，当人眼盯着红色文字一段时间后，便会感到字体变得模糊不清，有种膨胀运动的趋势。另外，《2077》的开发者还在很多场合给字体添加了荧光效果。这让文字的易读性变得更为糟糕。

《2077》所面临的这种问题，其实是 UI 设计中的常见问题：风格化和易用性的冲突。很多时候，这两者很难达到完全统一。设计师必须在两者之间进行调整和取舍。以赛博朋克题材为例，虽然“互补色+荧光设计”很常见，尤其是在科幻电影中。但是科幻电影中的 UI 更多是传达出一种科技感，UI 更像是视觉特效，而不是真正被人使用的媒介。如果在科幻游戏中使用同样的效果，不一定能带来良好的体验。

《对马岛之魂》电影模式和正常模式的对比

另一个反例便是《对马岛之魂》的电影模式。这种模式本是致敬黑白时代的剑戟片，极大地满足了武士电影的爱好者。但是这种模式下，玩家很难快速识别游戏中的关键道具。比如草丛中的鲜花便很难从远处被发现。而在黑白电影中，创作者会巧妙地利用光影来表现空间和结构，从而弥补颜色信息的缺失。

总的来说，风格化 UI 究竟是服务于视觉效果，还是玩家交互的易用性，这都决定于游戏类型以及体验目标。纯粹复刻他者的设计，无法保证体验的完整。

二

《2077》UI 的另一个特点便是使用了大量剧情 UI（ diegetic UI ），即存在于游戏 3D 空间且存在于游戏世界中。玩家和游戏角色都能意识到 UI 的存在。这种设计通常是为了让玩家更沉浸于游戏中。关于这一点，我在之前的文章 浅谈沉浸式 UI 有所提到。

大家可以注意到字幕是先出现日文，之后再被翻译为英文

由于《2077》是以第一人称为主，这一点更是加强了“玩家所见即角色所见”的设定。因此玩家通过游戏世界中的 UI 完成的操作，其逻辑都和游戏世界对应。比如游戏中的字幕，甚至都被处理为人工智能翻译器输出的文字。字幕本身也是游戏世界的一部分。这种设计复刻了现实的体验。因为大家在日常生活中，都是和身边工具进行互动。互动的过程能被用户察觉。

如果是第三人称游戏，UI 往往是非剧情 UI（ non-diegetic UI，传统意义上的 UI ）或者是空间 UI（ Spatial UI，即存在于游戏 3D 空间中的 UI，但不被游戏角色觉察 ） ）。玩家通过此类 UI 完成操作时，从逻辑上来说，游戏角色觉察不到玩家的行为。此时玩家和角色产生隔离。

车辆 UI 设计本身很棒，但是玩家能看见外界的区域非常有限

美中不足的是，《2077》的这种设计在快节奏的战斗中，会显得非常笨拙。比如玩家与电梯的互动，就需要玩家靠近电梯的按键后才能执行操作。虽然游戏中已经尽可能利用未来世界的高科技设定，让很多操作行为变得异常简洁。比如玩家骇入敌人的大脑，只需要通过一个按键完成，而不是打开控制台输入指令。

问题在于，这种情况，能处理的输入是非常有限的。因为游戏必须区分玩家的输入是 UI 系统输入和游戏玩法系统的输入。很多情况下，两个系统之间都会用到同样的按键。而系统的界限非常模糊，并存在很多极端情况。比如玩家在家中客厅切换播放器音乐频道，有时候就会被游戏系统当作是跳跃的输入（ 两者使用同一按键 ）。另外，由于剧情 UI 交互界面存在于游戏3D世界中，交互界面只处于整个画面很小的一部分。玩家的位置和角度，都会影响界面的大小。因此界面内容必须简单。这意味着《2077》的剧情 UI 无法处理过于复杂的请求。

《Half-Life: Alyx》很好地处理了第一人称与全息 UI 之间的关系

更令这个系统雪上加霜的是，很多科幻游戏中常使用的空间 UI（ 比如全息影像 ） 无法应用到《2077》当中。因为《2077》是第一人称游戏，存在于游戏 3D 空间中的全息 UI，势必距离玩家镜头很近，否则玩家很难进行操作。如果不经过精心设计，这实际上和菜单类的 UI 没有太大区别。从开发的角度来说，菜单类 UI 成为了性价比更高的选择。因此在实际游戏体验中，我们还是会发现菜单类 UI 在《2077》占了很大的比重。（ 甚至是向调酒师点酒的过程，依旧是通过菜单 UI ）。整个游戏 UI 系统只有部分达到了 UI 和游戏世界融合，剩余的系统还是回归到传统菜单 UI 设计。这不得不说是一种遗憾。

三

除了上述提到的两个方面以外，《Cyberpunk 2077》UI 还存在一个问题 —— 信息传递效率太低。

《2077》游戏主菜单

首先，各个菜单界面的结构较为复杂。设计者把所有的界面都放在了一个主菜单之下，这看似将所有重要版块展示给玩家，但是各个版块之间的优先级实际是不一样的。比如游戏任务过程中，我会经常用到地图和武器菜单。我会希望越过主菜单，直接进入目标界面。地图界面虽然有快捷键，然而在我退出地图后，我会先回到主菜单，再回到游戏画面。哪怕只是多了一步骤，这也会降低玩家的使用效率。

《最后生还者2》枪械升级界面是很典型的场景 UI

而对于使用频率较低的版块，我会更倾向于将它们转换为场景 UI（ 依附于场景中某个物体/场景的 UI ）。这样既能增加沉浸感，同时还能让主菜单的界面更为简洁。

密密麻麻，五颜六色，令人“目不暇接”

玩家会在游戏中找到大量的文本信息。这些信息是构建整个游戏世界观的重要元素。然而，文本的呈现方式令人失望。从本质上来说，它们就是记事本文字，只是包装了一层赛博朋克皮肤。相比于图片和视频，文字信息处理速度无疑是较慢的。这种情况下，如何更有效地让信息以更高效的方式传递给玩家，同时创造一个适合阅读的环境，便是设计师需要考虑的问题。《2077》的大量 UI 信息缺乏基本的排版，没有任何用户引导。用户需要自己找寻重要信息。再加上前面提到的荧光效果字体，用户体验非常不佳。

我个人非常喜好基于安全屋或者基地的设计（ 图片来自 dinah.kavurma.net )

类似的 UI 设计也在《辐射》系列中出现。对此我们还可以用后核战文明的设定来解释。然而《2077》UI 的特色之一便是科技感。这让玩家很难相信游戏中的菜单 UI 是来自于未来的设计。我对此有两点个人建议：

1. 文本的阅读模式应该占据更大的平面空间，同时适当增加图片信息。试想我们日常使用聊天软件，如果用户列表只有文字信息，我们找寻特定人聊天会变得非常困难。有信息量的图片能很容易引起玩家的注意。需要注意的是，如果图片缺乏信息，那么玩家会把它处理为装饰性图片；
2. 
   
3. 创造一个更舒适的阅读环境。比如主角 V 的家就是一个比较合适的空间。这里的游戏节奏较慢，相比于任务中间查看信息，在家中处理信息会让玩家感到更为舒适。同时也符合现实的经验。当然这需要其他系统进行相应调整，我们不能强迫玩家只能在家中处理文本信息。
   

四

《2077》UI 设计具有很强的风格，也有明确的体验定位。很可惜最后成品没能带来很好的用户体验。为了实现 UI 艺术设计目标，《2077》UI 系统牺牲了玩家使用 UI 的效率，却没有让整个系统完全融入到游戏世界观中。这反过来再次说明，不结合美术风格、世界观设定以及游戏玩法，单独设计 UI 系统，最后不仅无法保证 UI 的质量，反过来还会影响玩家的游戏体验。