人气 331

[GUI] 浅谈沉浸式 UI的设计——容易出现的问题及解决方案 [复制链接]

九艺网 2020-8-14 21:34:26

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

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

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

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

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

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

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

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

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

114027h10qudtrtz7uzn0r.jpg
《Apex Legends》的 Hud 布局

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

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

114040jott1pmvgd3yoex1.jpg
《Call of Duty: WW2》坦克对战关卡

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

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

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

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

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

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

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

114055r63rmots9uoebtte.jpg
Tower 的平面图

举个简单的例子,游戏《命运》中存在一个称为“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 系统的时候,一定要注意其设计不要和玩家的心智模型产生偏差。

114103l3wrpupn99ki58rk.jpg
Celia Hodent 反复强调 UI 图标用户测试,就是为了防止认知偏差

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

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


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

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

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

114107xzfsomygbrsefyr1.jpg
游戏流行色彩的变迁

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

114115bogelpo0bgbvepph.jpg
对于勋章质感的还原( 设计来自 Clay Shanks, Louie Peregrino, Ashlee Hynes )

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

114118k4ubknueb0ojjljb.jpg
《银翼杀手2049》的 UI 界面示例

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

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

114123dnjb2wcjo70j1o60.jpg
梅田医院的指示系统

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


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

使用道具 举报

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

QQ|手机版|小黑屋|九艺游戏动画论坛 ( 津ICP备2022000452号-1 )

GMT+8, 2024-3-28 22:04 , Processed in 0.076403 second(s), 27 queries .

Powered by Discuz! X3.4  © 2001-2017 Discuz Team.