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

(《全境封锁 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叙事理论都是为了打破“次元壁”,提升用户的沉浸感和体验感。

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

  1. 【游戏开发干货】往期公众号文章汇总

    各位读者好,开工在即,希望我们可以早日战胜疫情,也希望大家都能以一个良好的状态来迎接2020年. 关注我公众号的小伙伴都知道,我的文章基本上都是原创,所以更新频率不是很高.早在2018年5月我就创建了 ...

  2. Unity 2D游戏开发教程之使用脚本实现游戏逻辑

    Unity 2D游戏开发教程之使用脚本实现游戏逻辑 使用脚本实现游戏逻辑 通过上一节的操作,我们不仅创建了精灵的动画,还设置了动画的过渡条件,最终使得精灵得以按照我们的意愿,进入我们所指定的动画状态. ...

  3. C#游戏开发快速入门2.2改变游戏对象的状态

    C#游戏开发快速入门2.2改变游戏对象的状态 改变游戏对象的状态,就是要改变游戏对象的位置.朝向和大小.那么,为什么要改变游戏对象的状态呢?当然是因为游戏对象的状态不合适了.在具体说明之前,读者应该先 ...

  4. C#游戏开发快速入门 2.1 构建游戏场景

    C#游戏开发快速入门 2.1  构建游戏场景 如果已经计划好了要编写什么样的游戏,在打开Unity以后,要做的第一件事情就是构建游戏场景(Scene).游戏场景就是玩家游戏时,在游戏视图中看到的一切, ...

  5. android手机游戏开发从入门到精通_unity3d游戏开发如何从入门到精通?

    对于游戏爱好者来说,unity3d想必大家都不陌生,unity3d和虚幻4算是现在最主流的游戏开发引擎,当然,Unity 3D 游戏开发引擎目前之所以炙手可热,与其完善的技术以及丰富的个性化功能密不可 ...

  6. Silverlight C# 游戏开发:Flyer06小小的改进让游戏更有趣

    Silverlight C# 游戏开发:Flyer06小小的改进让游戏更有趣 今天这套主题,仅仅是通过改进让游戏更加有趣,游戏中的细节永远是耐人寻味,有的游戏团队为此付诸努力甚至成为整个项目的成功关键 ...

  7. (完结)Unity游戏开发——新发教你做游戏(七):Animator控制角色动画播放

    文章目录 一.前言 二.Animator状态机组织 三.过渡条件 四.用代码设置过渡条件,触发动画播放 五.CharacterAniLogic.cs完整代码 一.前言 文章列表 Unity游戏开发-- ...

  8. Unity游戏开发——新发教你做游戏(三):3种资源加载方式

    文章目录 一.前言 二.Unity的目录结构规范 1.Resources(不是很推荐把资源放这个目录) 2.RawAssets(存放生资源) 3.GameRes(存放熟资源) 4.StreamingA ...

  9. Unity游戏开发——新发教你做游戏(一):打开游戏开发新世界的大门

    文章目录 一.前言 二.制作思路 三.提出问题 四.具体实现 一.前言 嗨,大家好,我是新发,如下,我做了个简单的Demo,接下来我会详细介绍如何一步步制作,Demo工程我已上传到GitHub,感兴趣 ...

最新文章

  1. python编程基础人民邮电出版社_Python编程基础与应用
  2. Oracle 日志原理剖析
  3. Python词云学习之旅
  4. Oracle中varchar,varchar2,nvarchar,nvarchar2的区别
  5. springboot+shiro+jwt实现token认证登录
  6. uestc 方老师的分身 II
  7. java导入excle表格,并且对表格进行相应的修改,并对表格数据进行整理,最后导出本地表格等一系列操作...
  8. python字典攻击
  9. visio画图复制粘贴到word_解决Visio画图复制到word中格式不正确的问题
  10. C/C++编程笔记:浪漫流星雨表白程序,七夕想表白,我教你啊!
  11. python 提取字幕_使用 Python 提取字幕文件
  12. 计算机专业毕业设计流程,计算机专业毕业设计答辩流程
  13. python tkinter progressbar_Tkinter 之ProgressBar进度条标签
  14. React Ant Design 通过 DatePicker获取一周的起止时间
  15. 自己写php木马,自己写的php木马webshell扫描器
  16. 2021 京东 校招面试
  17. 使用svn时找到项目下隐藏的.svn文件夹
  18. PEP8中文翻译(转)
  19. mysql导入.dmf文件_AX2012 DMF数据导入的问题
  20. Revit插件技巧:出图插件一键“洞口标注”和一键“洞口定位”

热门文章

  1. 目标检测 YOLOv5 指标计算
  2. 如何添加产品详情的一些参数
  3. 物质是由物质组成的吗?
  4. CET高频考点之——将来完成时
  5. MediaPipe Holisitic:实现端侧人脸手势姿态同时估计
  6. 电脑任务栏同时显示网速与CPU和内存的占用。
  7. 5.25 使用半调图案命令制作影印效果 [Illustrator CC教程]
  8. mysql 内连接关键词_Mysql的内连接、左连接、右连接以及全连接查询
  9. Mybatis模糊查询
  10. 新版速卖通接口对接实现