游戏开发论坛

 找回密码
 立即注册
搜索
查看: 16794|回复: 0

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

[复制链接]

4万

主题

4万

帖子

8万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
85217
发表于 2022-3-18 09:41:12 | 显示全部楼层 |阅读模式
以下文章来源于六十和二四的世界 ,作者广播员 Jim

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

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



微信图片_20220318093608.JPG
《Cyberpunk 2077》UI 色彩板

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

微信图片_20220318093614.JPG
左为游戏中的两组互补色,右为《Cyberpunk 2077》UI 主开发 Dan Voinescu 的作品

微信图片_20220318093615.jpg
维克托·莫斯科索的海报作品 The Chambers Brothers, The Matrix, San Francisco, 1967

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

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

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

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

微信图片_20220318093617.JPG
《2077》的字体阅读体验不太令人满意

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

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

微信图片_20220318093618.JPG
《对马岛之魂》电影模式和正常模式的对比

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

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



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

微信图片_20220318093619.JPG
大家可以注意到字幕是先出现日文,之后再被翻译为英文

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

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

微信图片_20220318093620.jpg
车辆 UI 设计本身很棒,但是玩家能看见外界的区域非常有限

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

微信图片_20220318093621.jpg
本令人期待的全息 UI 却成为装饰性物体

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

微信图片_20220318093622.jpg
《Half-Life: Alyx》很好地处理了第一人称与全息 UI 之间的关系

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



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

微信图片_20220318093623.jpg
《2077》游戏主菜单

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

微信图片_20220318093624.jpg
《最后生还者2》枪械升级界面是很典型的场景 UI

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

微信图片_20220318093625.jpg
密密麻麻,五颜六色,令人“目不暇接”

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

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

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

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



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

文/广播员 Jim
来源:六十和二四的世界

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

作品发布|文章投稿|广告合作|关于本站|游戏开发论坛 ( 闽ICP备17032699号-3 )

GMT+8, 2024-10-10 05:45

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表