升级–游戏UI指南(带有信息图)

六十年前, 位于纽约阿普顿的布鲁克海文国家实验室举行了开放日活动。参观实验室的参观者将获得一个互动展品, 一个名为” 两个人的网球” 的游戏。设置很简单-一个5英寸的模拟显示屏和两个控制器, 每个控制器都有一个旋钮和一个按钮。世界上第一个视频游戏诞生了, 但是两年之后, 展览就关闭了。
十二年过去了, 一家叫Andy Capp’ s Tavern的酒吧出现了一个非常类似的街机游戏。游戏名称?傍它的制造者?雅达利似乎在一夜之间, 新兴的视频游戏世界发生了变化。新奇成为行业。
自Pong以来, 视频游戏图形的复杂度呈指数级增长。我们遇到了各种想象中的外来昆虫, 精灵冒险活动以及来自各军团的士兵。我们勇敢地展现了蘑菇王国, 拳击台和充满敌意的风景。让人联想起怪异的角色和不可能的情节线条虽然很有趣, 但也值得讨论使视频游戏值得玩的设计元素-UI组件。
像网站或移动应用程序一样, 视频游戏具有通用的UI组件, 可帮助玩家导航, 查找信息并实现目标。从开始屏幕到硬币计数器, 视频游戏UI组件是可玩性(玩家的娱乐和娱乐体验)的关键方面。要了解这些组件如何影响游戏体验, 我们必须快速解决对视频游戏设计至关重要的两个概念:” 叙事” 和” 第四墙” 。
叙述
叙事是视频游戏讲述的故事。
第四墙
第四墙是玩家与游戏发生空间之间的虚构障碍。
叙述和《第四墙》提供了游戏中每个UI组件必须回答的两个问题:

  1. 该组件是否存在于游戏故事中?
  2. 该组件是否存在于游戏空间中?
从这两个问题中, 出现了四类视频游戏UI组件:非数字化;饮食主义空间和元。
升级–游戏UI指南(带有信息图)

文章图片
非数字化
  • 该组件是否存在于游戏故事中?没有
  • 该组件是否存在于游戏空间中?没有
非规限的UI组件位于游戏的故事和空间之外。游戏中的所有角色(包括玩家的头像)都不知道存在这些组件。非糖尿病成分的设计, 位置和上下文至关重要。
在快节奏的游戏中, 非寓教于乐的成分可能会打断玩家的沉浸感。但是, 在具有大量策略的游戏中, 它们可以为玩家提供对资源和动作的更细致的评估。
非饮食成分通常在电子游戏中以统计量表的形式出现。他们跟踪点, 时间, 损坏以及玩家在游戏过程中积累和消耗的各种资源。
升级–游戏UI指南(带有信息图)

文章图片
在《超级马里奥兄弟3》中, 状态计量器是非数字化的, 因为它存在于游戏世界和故事之外(游戏中的角色不知道它在那里)。
地道的
  • 该组件是否存在于游戏故事中?是
  • 该组件是否存在于游戏空间中?是
Diegetic UI组件会同时存在于游戏的故事和空间中, 并且游戏中的角色会意识到这些组件。即使它们存在于游戏故事和空间中, 但考虑不充分的营养成分仍然能够分散玩家的注意力或使他们沮丧。
规模使营养成分难以处理。例如, 驻留在车辆仪表板上的游戏中速度表可能太小, 无法让玩家清楚地看到。在某些游戏中, 手持设备的重生组件(如地图)可以切换到二维全屏视图, 从而使它们不具有糖尿病性。
升级–游戏UI指南(带有信息图)

文章图片
在拆卸赛车游戏Wreckfest中, 汽车是无用的UI组件。在比赛过程中, 它们遭受明显的伤害, 这表明玩家将被淘汰出比赛有多近。
空间的
  • 该组件是否存在于游戏故事中?没有
  • 该组件是否存在于游戏空间中?是
在游戏空间中可以找到空间UI组件, 但游戏中的角色看不到它们。空间组件通常充当视觉辅助工具, 帮助玩家选择对象或指出重要的地标。
文本标签是空间UI组件的经典示例。在幻想和冒险游戏中, 玩家可能会遇到外观上不熟悉的重要物体。文本标签可快速消除歧义, 并使玩家沉浸在游戏体验中。
升级–游戏UI指南(带有信息图)

文章图片
美式足球俱乐部Madden具有空间UI组件, 可帮助玩家选择化身并了解游戏场景。

  • 该组件是否存在于游戏故事中?是
  • 该组件是否存在于游戏空间中?没有
元UI组件存在于游戏故事中, 但不位于游戏空间中。玩家的化身可能会或可能不会意识到元组件。传统上, 元组件用于表示对玩家头像的损害。
元组件可能非常微妙-就像游戏的2D平面上缓慢堆积的污垢层一样, 但它们也可以在游戏体验中扮演重要角色。在动作和冒险游戏中, 有时会晃动, 模糊或变色整个视场, 以表明玩家受到了伤害。
升级–游戏UI指南(带有信息图)

文章图片
【升级–游戏UI指南(带有信息图)】塞尔达传说(Legend of Zelda)利用滚动文本(元组件)来推进叙事并为玩家提供有用的提示。
对视频游戏UI组件进行分类并不总是一件容易的事。生命量表在一种游戏中可能是消极的, 而在另一种游戏中则没有糖尿病的。根据游戏的叙述以及玩家与第四堵墙的关系, 组件可能会模糊类之间的界线。同样, 可以根据游戏的艺术指导将无限范围的视觉样式和配置应用于组件。
升级–游戏UI指南(带有信息图)

文章图片
下载此信息图的PDF版本。
将此信息图表嵌入网站。
? ? ?
在srcmini设计博客上进一步阅读:
  • 黑暗的用户界面。好和坏。该做什么和不该做什么。
  • 设计基础–视觉层次结构指南(带有信息图)
  • 增强现实vs.虚拟现实vs.混合现实–入门指南
  • 跃入VR / AR设计
  • 游戏化设计的实用方法

    推荐阅读