《Cyberpunk 2077》 UI 有话好好说

作者:董晶晖
2020-12-24
12 3 4

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

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

01

《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 究竟是服务于视觉效果,还是玩家交互的易用性,这都决定于游戏类型以及体验目标。纯粹复刻他者的设计无法保证体验的完整。

02

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

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

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

03

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

《2077》游戏主菜单

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

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

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

密密麻麻,五颜六色,令人“应接不暇”

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

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

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

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

04

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

感谢您的阅读!


本人最近新开公众号“六十和二四的世界”,除了分享游戏随笔,同时涉及电影话题。各位若有兴趣,进来坐坐。

扫码关注“六十和二四的世界”


http://weixin.qq.com/r/MTsLE0LEsx-MrQZw924j

文章为本人原创。文章未经本人允许,不得转载

近期点赞的会员

 分享这篇文章

董晶晖 

游戏程序员/爵士爱好者 

您可能还会对这些文章感兴趣

参与此文章的讨论

  1. 像素罐头FF1 2020-12-24

    “啊~~姑娘十八一朵花”
    大胸弟,为什么你的封面带BGM?

    最近由 像素罐头FF1 修改于:2020-12-24 09:53:58
  2. HcAndersen 2020-12-24

    我个人以为UI和HUD不能混为一谈,很明显2077的第一人称视角是用HUD来代替了UI显示,驾驶也是一样,那么从规则上,两者有本质的区别。
    另外一点,实际上视觉角度的赛博朋克和蒸汽朋克一样,在当下时段是一种复古式美学,其中很多表现要素是现在的科技都觉得落伍的表现,尽管实际的科技程度很高。在这一点上而言,兼顾与游戏性以及表现成本,我认为大量的文本叙事是一个正确选择。哪怕是刺客信条式的基因片段录音,也不会做很多。

    • 董晶晖 2021-01-10

      @HcAndersen:我个人认为从广义来说,用户与游戏交互的接口,都是 UI 的范畴。Hud 在我的理解中,是 UI 的一部分。无论是菜单式 UI 还是 Hud,信息的使用效率是非常重要的。而 Cyberpunk 在这里做得不尽人意。

      另外, 文本阅读的问题不在于文本量的问题,而是文本以何种方式传递出去的问题。就像是我在这里给您回复,这些文字都是会被排版编辑,然后展示出来。Cyberpunk 2077 这里我认为是有所偷懒,没有照顾到玩家的阅读体验。我同意你说的落后科技感设定,辐射中的落后感科技就做得很好。所以说,Cyberpunk 整体方向没有大问题,但是实现和投入度,出现了问题。

  3. 董晶晖 2021-01-10

    @像素罐头FF1:其乐无穷啊兄弟!

您需要登录或者注册后才能发表评论

登录/注册