UI 和 UX 设计

*此内容使用人工智能(Beta)翻译,可能包含错误。若要查看英文页面,请点按 此处


用户界面(UI)结合了艺术视觉设计和以沟通为中心的信息设计,以生产菜单、商店布局、抬头显示(HUD)和其他玩家互动的界面。用户体验(UX)与玩家如何与游戏互动、他们如何表达他们的选择以及他们如何从一个选择移动到下一个选择有关。虽然 UI 和 UX 通常是协同工作的,但 UX 对互动和玩家体验的关注更为重要,而不是 UI 的视觉和信息设计。

UI

UI 共享重要信息,如生命值、任务目标和价格,使玩家能够做出决策并导航游戏。由于它通常是游戏与玩家沟通的主要方式,因此 UI 对玩家体验至关重要。设计不当的 UI 可能会让玩家感到困惑和沮丧,导致留存率下降,而设计出色的 UI 则能促进参与和货币化。有效设计的 UI 采用以下原则:

  • 优先级
  • 注意力
  • 视觉语言
  • 约定
  • 一致性

优先级

首先共享最重要的信息被称为_信息层次结构_。在玩家经常基于有限信息做出即时决策的游戏中,这一点尤其重要。在优先排序 UI 时,识别对玩家体验至关重要或最相关的内容,并确保它既方便访问又易于定位。考虑以下问题:

  • 玩家此时在做什么?
  • 对他们而言,最重要的事情是什么,或他们需要了解到什么?
  • 他们需要做出什么选择?
  • 他们需要哪些信息来做出这些选择?
  • 他们将多频繁参与这些选择?

重要信息和功能会根据玩家所扮演的角色、他们在 3D 世界中的位置以及他们所持有的物品而变化。可以设计 UI 仅呈现上下文相关的内容 - 根据每个上下文的有用性来交换按钮和信息。这确保玩家始终拥有他们所需的内容,而不会被不需要的内容所干扰。

示例

不相关的元素会导致困惑和分心。Spellbound RPG 具有简洁、极简的 UI,对于移动界面尤其重要,因为小屏幕很容易被过多的按钮、屏幕和文本所淹没。

未选择的圆形物品按钮特写,带有棕色书本图标。背景环境是棕色泥土和一片雪。
Spellbound RPG 中选择前的物品
选中的圆形物品按钮特写,带有棕色书本图标,以及三个额外的按钮用于技能、装备和玩家卡组。当按钮被选中时,额外按钮才会显示。
Spellbound RPG 中选择后的物品

Super Striker League 中,玩家的互动因他们是否控制球而异。没有球时,玩家可以冲刺和铲球以重新控制。拥有球后,按钮切换为假动作和传球,让玩家能够躲避对手并传球。通过交替这些按钮,UI 保持上下文相关的实用性,避免不必要的干扰。

Super Striker League 中的上下文按钮
Super Striker League 中的上下文按钮

The Survival Game, 中,玩家需要意识到他们的健康和饥饿状态,并能快速访问地图、库存和工具。这些信息使他们能够做出决策并优先处理生存所需的行动。如果这些信息或工具很难找到或缺失,生存将变得更加困难,并带来不必要的挫败感。

The Survival Game 中的 HUD 功能

注意力

尽管 UI 极简化、优先级分明且具上下文,玩家可能仍需帮助找到他们需要的内容。UI 设计师可以使用多个视觉工具来捕捉并引导玩家的注意力,例如:

  • 颜色: 明亮的颜色比暗淡的颜色更容易吸引注意。为重要文本、按钮和其他元素使用生动的色调,为不太重要的元素使用柔和的色调。这种对比增强了可见性并减少了干扰。
  • 尺寸: 较大的元素比较小的元素更显眼且被视为重要。
  • 空间: 周围有足够负空间或填充的元素更加吸引眼球。
  • 接近度: 组合的元素暗示有联系。通过将相关特征和物品放在一起,玩家可以理解它们之间的关联并更容易定位。
  • 运动: 动画元素吸引注意力。甚至微小的运动也能使某个元素在静态元素中脱颖而出。粒子效果、摇晃按钮和动画箭头通常用于教程中以提供指导。

使用这些工具时,适度是关键。过度使用鲜艳的、动态的元素可能会使玩家感到不知所措和困惑,而不是帮助他们。

示例

Jailbreak 的赛季通行证 UI 中,金黄色的条纹位于赛季通行证独占图标下方,吸引注意力,使其与免费奖励在视觉上明显区分开来。

Jailbreak 中的赛季通行证 UI

Dragon Adventures, 中,通过增加最高价值硬币包的大小并用更多填充将其分隔,从而优先显示该硬币包。

Dragon Adventures 中的硬币包

Tower Defense Simulator 中,尺寸和接近度共同用于视觉上分组并区分每日塔皮肤与每日箱子。

Tower Defense Simulator 中的商店

视觉语言

除了将玩家的注意力引导到屏幕上最重要的元素外,UI 设计师还开发视觉语言,以帮助玩家理解他们所看到的内容。视觉语言是一组故意且一致的设计选择,提供有关元素目的、状态、关联性和相关性的一瞥信息。该语言由形状、颜色和样式等工具构成。视觉语言的一些用途包括:

图标

图标可以采用传达意义和关联性的视觉身份。例如,与特定统计数据相关的图标可能共享配色方案和相似形状,使玩家能够识别并理解其功能。

Winds of Fortune 中的玩家统计数据

按钮

作为一种流行的玩家输入形式,按钮必须易于识别。将按钮置于容器中,例如用颜色环绕文本或图标,以将其与背景区分开,使其看起来具有交互性。添加高光或阴影可以增强其触感,暗示 3D 深度。

BotClash Simulator 中的按钮

文本

包含重要高级信息的标题和标题应比主体文本更大且更粗。应考虑具有很高可读性并与它们将被显示的背景色形成良好对比的颜色。诸如颜色和加粗的样式选择可以突出游戏中的物品、统计数据或能力等重要信息。选择字体时始终优先考虑可读性。

Winds of Fortune 中的服装商店

一旦视觉语言设计完成,可以在_样式指南_中进行记录,这是一组规则和示例,帮助团队内的每个人理解如何在整个游戏中一致地应用语言。

约定

约定是广泛应用的设计选择,在许多不同的游戏中都能看到。一些例子包括:

  • 按钮上的 X 符号,当按下时关闭对话框
  • 当前不可用的按钮上应用灰色
  • 一个锁图标覆盖在按钮或功能上,以指示玩家尚未获得或解锁它

由于它们的广泛使用,玩家通常会熟悉这些约定。利用这种熟悉感可以使界面更加直观,并减少对游戏特定说明的需求。在您的目标类型内进行游戏可以帮助识别玩家可能识别的约定。UI 设计师可能会选择独特的方法以更好地适应他们的游戏,但了解这些约定将有助于决策过程。

Arcane Odyssey 中绿色“健康”状态的一致性

一致性

UI 设计师做出的任何决定,应该在整个游戏中保持一致地应用。一致性帮助玩家更有效地学习如何导航游戏,避免困惑和沮丧。

以下是游戏中 UI 一致性的一些示例:

  • “健康”状态在所有文本、相关图标和生命值条中显示为绿色。
  • 每次 NPC 对话提到游戏中的物品时,将其加粗突出。
  • 关闭按钮总是方形、红色,并包含一个白色 X,仅出现在对话框的右上角。
  • 无论何时玩家无法负担商店中的物品,价格均以红色显示。

这些选择都是精心设计的,旨在促进玩家理解和导航。通过一致地应用这些选择,它们使玩家能够建立相关元素之间的联系,识别重要物品,发展肌肉记忆,快速做出信息丰富的决策,并在游戏中花费更多时间沉浸其中。

UX

UX 设计涉及玩家如何与游戏互动,他们如何表明他们的选择,以及他们如何从一个选择移动到下一个选择。尽管 UX 通常与用户界面(UI)密切配合,但它更关注的是互动性和玩家体验,而非 UI 的视觉和信息设计。

理解玩家

UX 设计师的一个主要目标是创建直观、不突兀且方便玩家使用的互动和流程。这个过程始于对玩家本身的理解,即游戏的目标受众。在识别游戏的玩家时,请考虑以下内容:

  • 人口统计: 人口统计通过揭示关于玩家群体的概括性信息来影响设计选择。例如,年轻玩家通常更可能在移动或平板设备上玩,而不是个人电脑,因此面向该受众的游戏通常会优先设计和优化移动用户体验。

  • 经验水平: 开发者可能选择为几乎没有游戏经验、不少经验或介于两者之间的玩家设计。对于经验丰富的玩家而言,熟悉的互动,如按数字键在工具栏中装备物品,或按 c 进行蹲伏,对经验不足的玩家来说可能并不明显,且需要额外的消息传递或训练。

  • 类型熟悉度: 与一般经验水平类似,类型熟悉度反映玩家在特定类型游戏中的经验水平。落入 Roblox 中流行类型的游戏,例如角色扮演、求生恐怖和第一人称射击,可能会拥有许多先前玩过类似类型的潜在玩家。其他类型的游戏可能有经验玩家较少,但可以通过教程和可用性来弥补这种经验差距。

  • 游戏风格: 玩家往往喜欢特定类型的玩法,从竞争和成就收集到探索和合作。这些偏好不仅反映在玩家喜欢的游戏机制中,还影响 UX 决策。设计师考虑优先打造哪些互动、精致哪些互动以及向玩家展示哪些互动。他们也考虑到玩家在参与这些互动时的心态,以及他们希望从中激发的情感。

在考虑这些因素并选择目标玩家群体(或群体)后,通过与他们会面、与他们一同游戏以及了解他们的目标和偏好来进一步了解他们,以更好地指导设计选择。

设计互动

互动 是允许玩家在游戏中体验并表达自己的选择的特点。UX 设计师希望这些互动是直观的,并且需要尽可能少的解释。为此,他们利用:

  • 约定
  • 隐喻
  • 反馈

约定

约定 是玩家可能已经在其他游戏中熟悉的 UX 设计和原则。

Mermaid Life 中的 “E” 接近性提示

约定的示例包括:

  • Roblox 开发者使用的 “E” 接近性提示,提示玩家如果站得足够近,就可以与物品互动。
  • “C” 键允许玩家的化身蹲下,以能躲避障碍物或适应狭窄空间。
  • 数字键从工具栏装备物品到玩家的手中,以便对其进行使用。
  • 走进地面上的圆圈以排队进入匹配。

当特定的实现或设计选择因其易用性而流行时,约定便会建立。例如,“C” 用于蹲下,易于记住,因为它是单词 crouch 的首字母,并且恰好位于玩家用于导航的 WASD 旁边。要在压力下快速执行这一互动是很简单的,这很理想,因为试图躲藏或逃离即将到来的威胁是蹲下的常见用例。

隐喻

隐喻 将抽象概念与更熟悉的概念联系起来,创造出理解的捷径。在来自 Spellbound Wizard RPG 的这个示例中,施放魔法法术的行为是通过从一副牌中抽牌进行的。基于卡片的 UI/UX 将施法这一抽象行为与玩家更容易理解和快速理解的事物结合起来。

Spellbound RPG 中作为卡片的施法

反馈

游戏与玩家之间的沟通被称为_反馈_。反馈帮助玩家理解他们所采取的行动。它可以有助于学习游戏的功能,并为使某个功能的使用更加令人满意提供额外的润色。一些反馈的示例包括:

  • 敌人播放“受击”反应动画,以指示它已受到玩家武器的伤害
  • 按钮更改颜色以表示悬停、按下和释放(已选中)状态
  • 玩家完成购买时,收银机“咔嗒!”的声音效果
  • 玩家完成任务目标时,进度条逐渐填满

当反馈缺失或不足时,玩家可能不知道自己完成了什么、是否产生了良好或不良效果,甚至不知道他们正在使用的功能是否正常工作或出现故障。

设计流程

玩家通常需要多个互动才能完成一个目标。UX 设计师关注玩家如何从一个行动或 UI 屏幕或选择导航到下一个,并确保这些路径是合理和方便的。

例如,要在 Berry Avenue RP 中为化身装备物品,玩家必须:

  • 找到并点击化身按钮
  • 选择一个物品类别(面部、头部、脖子等)
  • 滚动以查找感兴趣的物品
  • 点击该物品以装备到他们的化身上
  • 找到并点击完成按钮以退出化身自定义
Berry Avenue RP 中的化身自定义流程

这些步骤的组合代表了化身自定义流程。该流程简单明了,装备物品所需的步骤尽可能少。由于玩家不需要执行太多操作或过多思考所需做的事情,因此该流程在_摩擦_上较低,摩擦是实现目标所需的努力程度的衡量。

设计高效、低摩擦的流程需要仔细考虑用例。这些用例可以表达为玩家目标,例如:

  • 快速修改化身的愿望
  • 在修改时轻松找到物品
  • 在选择前预览物品
  • 选择后轻松移除物品

这些目标随后指导该功能的 UI 和 UX 设计:

  • 玩家通过 HUD 上显著的按钮访问化身自定义功能,并能够立即开始为他们的化身装备物品
  • 选项卡将物品分为便捷类别,搜索框允许玩家直接搜索物品
  • 物品在化身上即时预览
  • 玩家可以通过再次点击该物品以取消选择,或在装备物品列表中点击它来移除物品

设计师随后可以开始布局 UI,并规划玩家完成修改化身目标将采取的步骤。这个过程可以借助_流程图_来帮助可视化玩家在导航 UI 时的操作。这些图表可以帮助识别被忽视的步骤、步骤不清楚或不方便的痛点,以及过多的摩擦。

流程图示例。
©2026 Roblox Corporation、Roblox、Roblox 标志及 Powering Imagination 是我们在美国及其他国家或地区的注册与未注册商标。