升级:游戏 UI 指南(附信息图)

已发表: 2022-03-11

六十年前,位于纽约厄普顿的布鲁克海文国家实验室举办了一次开放日。 参观实验室的参观者观看了一场互动展览,一场名为“两人网球”的游戏。 设置很简单——一个 5 英寸的模拟显示器和两个控制器,每个控制器都有一个旋钮和一个按钮。 世界上第一个电子游戏诞生了,但两年后,展览就关闭了。

十二年过去了,在一家名为 Andy Capp's Tavern 的酒吧里出现了一款极其相似的街机游戏。 游戏名称? 乒乓球。 它的制造者? 雅达利。 似乎一夜之间,蓬勃发展的电子游戏世界发生了转变。 新奇变成了工业。

Pong以来,视频游戏图形的复杂性呈指数级发展。 我们遇到了外星昆虫,精灵冒险,以及来自每支可以想象的军队的士兵。 我们勇敢地面对蘑菇王国、拳击台和不断扩大的敌对景观世界。 虽然回忆古怪的角色和不可能的情节线很有趣,但也值得讨论使视频游戏值得玩的设计元素——UI 组件。

与网站或移动应用程序一样,视频游戏具有通用的 UI 组件,可帮助玩家导航、查找信息和完成目标。 从开始屏幕到硬币计数器,视频游戏 UI 组件是可玩性(玩家的享受和娱乐体验)的关键方面。 要了解这些组件如何影响游戏体验,我们必须快速解决对视频游戏设计至关重要的两个概念:叙事第四面墙

叙述

叙事是视频游戏讲述的故事。

第四面墙

第四面墙是玩家与游戏发生空间之间的想象障碍。

Narrative 和 The Fourth Wall 为游戏中的每个 UI 组件提供了两个问题:

  1. 该组件是否存在于游戏故事中?
  2. 组件是否存在于游戏空间中?

从这两个问题中,出现了四类视频游戏 UI 组件: 非剧情的; 剧情; 空间; 和元。

游戏界面

非剧情的

  • 该组件是否存在于游戏故事中?
  • 组件是否存在于游戏空间中?

非剧情 UI 组件位于游戏的故事和空间之外。 游戏中的所有角色,包括玩家的化身,都不知道这些组件的存在。 非剧情组件的设计、放置和上下文是最重要的。

在快节奏的游戏中,非剧情成分可能会打断玩家的沉浸感。 但在战略重心的游戏中,它们可以为玩家提供更细致入微的资源和行动评估。

非剧情组件通常作为统计表出现在视频游戏中。 他们跟踪玩家在游戏过程中积累和消耗的点数、时间、伤害和各种资源。

视频游戏用户界面
在超级马里奥兄弟 3 中,统计表是非叙事的,因为它存在于游戏世界和故事之外(游戏中的角色不知道它的存在)。

剧情的

  • 该组件是否存在于游戏故事中? 是的
  • 组件是否存在于游戏空间中? 是的

剧情 UI 组件同时存在于游戏的故事和空间中,游戏中的角色都知道这些组件。 即使它们存在于游戏故事和空间中,考虑不周的剧情组件仍然能够分散玩家的注意力或让玩家感到沮丧。

规模使剧情组件变得棘手。 例如,位于车辆仪表板上的游戏内速度计可能太小,玩家无法看清。 在某些游戏中,手持叙事组件(如地图)可以切换为二维全屏视图,使其成为非叙事组件。

游戏界面
在爆破赛车游戏 Wreckfest 中,汽车是剧情式的 UI 组件。 在比赛过程中,他们会受到明显的伤害,这表明球员离被淘汰出局有多近。

空间

  • 该组件是否存在于游戏故事中?
  • 组件是否存在于游戏空间中? 是的

空间 UI 组件可以在游戏空间中找到,但游戏中的角色看不到它们。 空间组件通常用作视觉辅助,帮助玩家选择对象或指出重要的地标。

文本标签是空间 UI 组件的经典示例。 在奇幻和冒险游戏中,玩家可能会遇到外观不熟悉的重要物体。 文字标签可快速消除歧义,让玩家沉浸在游戏体验中。

电子游戏UI设计
美式足球专营权 Madden 具有空间 UI 组件,可帮助玩家选择头像并了解游戏场景。

  • 该组件是否存在于游戏故事中? 是的
  • 组件是否存在于游戏空间中?

元 UI 组件存在于游戏的故事中,但它们并不存在于游戏的空间中。 玩家的化身可能知道也可能不知道元组件。 传统上,元组件被用来表示对玩家化身的伤害。

元组件可能非常微妙——就像游戏 2D 平面上缓慢堆积的污垢层,但它们也可以在游戏体验中占据显着位置。 在动作和冒险游戏中,整个视野有时会晃动、模糊或变色,以表明玩家受到了伤害。

最佳视频游戏用户界面
塞尔达传说利用滚动文本(元组件)来推进叙事并为玩家提供有用的提示。

对视频游戏 UI 组件进行分类并不总是一成不变的。 生命计量器在一个游戏中可能是叙事性的,但在另一个游戏中是非叙事性的。 根据游戏的叙述和玩家与第四面墙的关系,组件可能会模糊类之间的界限。 同样,根据游戏的艺术方向,可以将无限范围的视觉风格和配置应用于组件。

视频游戏 UI 分类信息图。

下载此信息图的 PDF 版本。
将此信息图嵌入网站。
• • •

进一步阅读 Toptal 设计博客:

  • 黑暗的用户界面。 好和坏。 该做什么和不该做什么。
  • 设计基础——视觉层次结构指南(附信息图)
  • 增强现实与虚拟现实与混合现实——入门指南
  • 跳入 VR/AR 设计
  • 游戏化设计的实用方法