跳过导航
学习设计

什么是游戏 UI?游戏界面设计完整初学者指南

按 A 继续

当我们想到视频游戏时,首先想到的是动画和角色设计。但是,如果没有优秀的 UI 设计,任何游戏都不完整,甚至无法使用。没错!在视频游戏行业,UI 设计师有着巨大的发展空间,你很快就会明白原因。

准备好从游戏玩家转变为崭露头角的游戏界面设计师了吗?你只需要本指南和一些可靠的游戏 UI 设计软件——比如 Sketch

选择一个存档槽开始。

Load/Save screen of All of You featuring three empty save slots

Alike Studio 的 All of You 的加载/保存屏幕,通过 Game UI Database。此图片用于教育目的。

提示:什么是游戏 UI?

首先,让我们讨论一下什么是游戏 UI。简单来说,游戏界面设计侧重于创建视觉提示,帮助用户在任何给定的视频游戏中遵循预期的操作过程。想想屏幕上的说明,比如“按 X 打开”,或者周围环境的地图。

当然,游戏界面设计远不止于此——它是一个随着新技术和平台不断发展的领域。例如,为 Xbox 设计游戏,玩家将使用控制器,这与设计手机游戏截然不同,手机游戏的一切都与触摸屏有关。

我们稍后会更深入地探讨这些概念。但首先,让我们全面了解游戏设计过程。

游戏设计混战:当 UX 遇到 UI

与设计中的大多数事情一样,无论在哪里有 UI 设计师,你都可能会找到他们的 UX 对应角色。

以下是这些角色在视频游戏设计中的合作方式

首先,UX 设计师将绘制玩家的旅程。他们通常会创建一个 模型线框图,详细说明这些步骤以及每个决策可能导致玩家走向何方。对于 UX 设计师来说,这个阶段的一个好经验法则是只包括绝对必要的步骤和决策点。

接下来,UI 设计师将开始使用诸如 颜色、排版、内容层次结构和形状等元素创建语义语言,以使这些步骤尽可能直观和吸引人。目标是使玩家能够快速而自信地做出决定——当然,除非你想误导他们 😉

在整个过程中,UX 和 UI 设计师将与动态图形设计师密切合作,他们将开始思考如何为我们所熟知和喜爱的酷炫角色选择屏幕、地图和技能树制作动画。

虽然我们可以花几个小时讨论游戏设计的方方面面,但今天选择的角色是“游戏 UI 设计师”。所以让我们来看看他们的故事情节是什么。

你已选择游戏 UI 设计师

13 Sentinels character selection screen

Atlus 的 13 Sentinels: Aegis Rim 的角色屏幕,通过 Game UI Database。此图片用于教育目的。

想看更多优秀游戏 UI 示例吗?看看 Game UI Database ——那里的团队策划了近 1,000 款游戏的 41,000 多张截图,你一定能找到一些灵感。

第一个任务:了解游戏 UI 设计中的界面组件

说到游戏 UI 设计,有四种类型的视觉表现:叙事性、非叙事性、空间性和元。要成为一名伟大的游戏 UI 设计师,你首先必须了解这些意味着什么,以及如何有效地使用它们。让我们分解一下。

叙事性:角色可以看到或听到,并且符合故事背景的 UI 元素。示例:带有可见屏幕的手机、全息图和其他未来主义小工具。

非叙事性:存在于游戏或故事之外,只有玩家才能看到的 UI 元素。示例:菜单屏幕、任务窗口和生命值栏。

空间性:在游戏空间中表示但角色不可见的 UI 元素。示例:指示敌人是谁的角色轮廓、显示投掷物将落在何处的箭头以及文本标签。

元:与游戏相关但未在游戏空间中表示的 UI 元素。示例:滚动文本或彩色叠加层,指示玩家健康状况的变化。

以下是一个快速了解如何区分四种类型的视觉表现的方法。

第二个任务:游戏 UI 设计实践

正如我们所见,实际上有很多视频游戏元素都属于用户界面设计。UI 设计师创建从生命值栏到角色选择和库存屏幕的所有内容。但是有一个地方几乎完全由 UI 元素组成:HUD,或抬头显示器。

你可以将 HUD 视为容纳各种 UI 元素的叠加层。玩家在玩游戏时会在这里找到他们正在寻找的大部分信息。为了在上下文中理解这一点,让我们看看来自 Persona 5 的这个例子。

Scene in Persona 5 featuring the HUD as game UI example

Atlus 的 Persona 5 中的一个时刻,通过 Game UI Database。此图片用于教育目的。

在这里,你可以看到 HUD 如何在右下角容纳标题角色的生命值和耐力值栏,环绕角色的操作菜单,甚至在右上角的一些文本指南,以提醒玩家他们的下一步行动。

正如 Game Marker's Toolkit 的 这一集 解释的那样,我们可以将大多数 HUD 元素归类为仪表或预览。

像生命值栏和地图这样的仪表,可以帮助玩家了解游戏中当前正在发生的事情以及可能发生的事情。这些 UI 元素旨在帮助玩家做出明智的、全局的决策。

预览,例如指示你应该按 X 打开门的 文本图层,或者显示物品将落在何处的投掷弧线,让玩家了解其行为的直接影响。目标是让玩家对其下一步行动感到放心。

你还可以通过 UI 元素增加或降低游戏的难度。如果你仔细想想,玩家会通过 HUD 收到大部分提示。通常,在选择简单、普通和困难模式时,你实际上是在选择你在屏幕上看到的 HUD 提示的数量。还有,可能还有坏人的生命值增加。

第三个任务:选择游戏 UI 设计软件

好了,课程就到这里!现在我们已经介绍了一些游戏 UI 设计的基础知识,是时候开始工作了。我们应该如何以及在哪里开始创建下一个热门视频游戏?对于 UI 设计师来说,一切都始于选择合适的游戏 UI 设计软件。

除了满足你的基本 UI 设计需求(如图层列表、样式工具和矢量编辑)之外,以下是一些需要注意的基本功能

  • 创建 可重用元素库 的能力,以便你可以存储从同一生命值栏的不同版本到大小不同的地图的任何内容。想象一下你将节省的所有时间!
  • 原型 功能,以便你可以使用 叠加层 将你的 UX 设计师的线框图变为现实,并预览你的 UI 在运行中的效果
  • 协作 选项,以便你可以在微调你的设计时与 UX 设计师和其他队友一起工作
  • 适当的 移交 工具,以便你的开发人员可以轻松地将你的设计转换为功能齐全的视频游戏。
准备好尝试一下游戏 UI 设计了吗?Sketch 可以提供帮助——你可以免费开始

太长不看;总结

  • 游戏 UI 侧重于创建视觉提示,帮助用户在任何给定的视频游戏中遵循预期的操作过程。
  • 这些提示可以是叙事性、非叙事性、空间性或元。
  • HUD(抬头显示器)是一个强大的覆盖层,在游戏过程中承载着许多提示信息,尤其是仪表盘和预览。
  • 游戏UI设计师与用户体验设计师和动态图形设计师密切合作。
  • 合适的 游戏 UI 设计软件将具有原型设计、协作、交付和可重用元素等功能。

就是这样!我们希望你从游戏 UI 设计中学到了一两件事,并且你已经准备好亲自尝试一下。如果不是……也许我们只是给了你一堆细节,让你下次玩你最喜欢的视频游戏时无法视而不见。

怎么样,你说呢?

Request dialogue game UI from Undertale

来自 Undertale 的场景,通过 Game UI Database。 此图像用于教育目的。

您可能也喜欢

免费试用 Sketch

无论您是 Sketch 的新手,还是回来看看有什么新功能,我们都会让您在几分钟内完成设置,并准备好完成您的最佳作品。

免费开始
免费开始