游戏开发干货 | GUI是如何帮助游戏进行叙事的?

当你置身于游戏世界, 抬起手就能看到手表智能屏幕上显示的各种装备, 全息投影的导航系统展开, 现实世界与游戏世界逐渐融为一体......
 

 

(《全境封锁 Tom Clancy's The Division》里的全息界面是剧情叙事化UI的典型例子。)


“什么是剧情叙事化UI呀?” 别着急,接着往下读~

众所周知,再新颖、优秀的游戏理念也无法通过糟糕的游戏UI带给玩家好的体验。游戏作为现实世界的缩影,最大的挑战是带给用户/玩家的好的沉浸感体验。精良的页面设计,就扮演了打破游戏世界与现实世界之间那一堵看不见的墙的重要角色。

埃里克和马格?纳斯力在《FPS游戏中增加玩家沉浸感的用户界面》一文中根据不同类型的界面设计,探讨了几种常见的推动游戏叙事的UI类型,下面就让我们结合实例来一探究竟:

01、剧情UI (Diegetic UI)

剧情UI(Diegetic UI)即玩家可以通过视觉、听觉、触觉等感官与游戏内的组件进行互动的UI元素。合理地运用剧情UI是一种能够取代传统UI面板栏(简称HUD)展示信息的有效方式。

剧情UI根据游戏场景将玩家需要的信息融入角色本身,帮助玩家更加投入故事情节以带来更好的沉浸感体验。

在《死亡空间 Dead Space》中,UI设计师并没有采用我们熟悉的生命值表现方式,而是用角色防护服脊柱部位的发光条来表示生命值,静滞力场装置对应位置的发光条表示静滞力场值(游戏设定中的一种能减缓快速移动物体速度的能量场)。
 

 

(《死亡空间 Dead Space》游戏截图)


02、系统UI ( Non-Diegetic UI)

系统UI(Non-Diegetic UI)是指所有UI元素都不在2D HUD平面面板上, 而是覆盖在游戏内容上方, 与游戏场景和空间无关,二手手机靓号买卖是大家比较常见和熟悉的HUD面板栏设计。

常见的HUD以简单直观的方式给玩家一次性提供大量信息,例如游戏《英雄联盟 League of Legends》中进入商城购买装备的操作面板:

 

(《英雄联盟 League of Legends》游戏截图)


当游戏剧情被触发时,展开的操作面板会破坏游戏的沉浸感。所以系统UI设计风格在覆盖游戏内容的同时,依旧需要与环境、风格紧密结合,从而达到帮助用户进入角色的目的,以强化玩家体验。

在如瞄准、切换武器等简单的行为中,玩家很少会打开面板式的用户界面去进行操作,而是倾向于沉浸式的用户界面。例如,玩家可以直接在游戏世界中找到真实的瞄准开关、切换不同的武器,而不用分散注意力。
 

 

 

(《无主之地 Borderlands 》游戏截图)



03、场景化UI ( Spatial UI)

场景化UI(Spatial UI)是指玩家在游戏中可以像小说或电影中的叙述者(narrator)以第一人称视角/第三人称视角进行人机交互/互换信息,同时推动故事情节发展。

通常情况下, 玩家(player)得到的信息需要比游戏中的玩家角色(avatar)要更多才能推动剧情发展,这时候就要“破坏”游戏角色的叙述,通过场景化UI元素在画面中为玩家插入更多信息。例如,为玩家提供必要的“下一步”提示, 但仍与游戏世界中的物品相关,避免出现菜单页破坏玩家沉浸感。

例如《细胞分裂》中,出现游戏世界中的透视图与文字提示来指引玩家进行下一步操作:
 

 


在玩家受到攻击时,通过出现文字提示玩家“通过‘砸’来挣脱”("MASH TO BREAK FREE")来提示玩家脱困的方法:
 

 

(《细胞分裂 Splinter Cell: Blacklist》游戏截图)



04、Meta UI

Meta UI叙事理论中,UI元素并不是融合到游戏世界中的物品中,但与剧情相关/游戏情节相关,如排列在2D HUD面板的信息元素。

例如,常见于HUD面板中的血条信息,在Meta UI叙事理论中会以屏幕变暗或飞溅的绿色/红色液体来提示玩家正在受到伤害/损失生命值;再比如,游戏《看门狗 Watch Dogs》里放大的手机/商店屏幕等等。
 

 

 

(《看门狗Watch Dogs》游戏截图)


作为UI设计师,我们可以通过多种理论角度去分析用户界面,不同的叙述角度适用于不同的游戏类型、能够带给玩家不同程度的沉浸感。不论是剧情UI、系统UI、场景化UI、Meta UI,任何UI叙事理论都是为了打破“次元壁”,提升用户的沉浸感和体验感。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值