用户界面和用户体验设计

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


用户界面 (UI) 结合了艺术视觉设计与通信中心的信息设计,生成玩家与之交互的菜单、商店布局、头部显示(HUD)和其他界面。用户体验 (UX) 关于玩家如何与游戏互动、如何让游戏知道他们的选择以及如何从一个选择移动到另一个。虽然 UI 和 UX 经常协同工作,UX 更多地关注互动性和玩家体验而不是 UI 的视觉和信息设计,

UI

用户界面分享重要信息,例如命中点、任务目标和价格,可以让玩家做出决定并导航游戏。因为游戏通常是与玩家交流的主要方式,因此用户界面对玩家的体验至关重要。糟糕设计的用户界面可以让玩家感到困惑和沮丧,导致保留率低下,而专家设计的用户界面可以促进参与和货币化。有效设计的用户界面遵循以下原则:

  • 优先级排序
  • 注意
  • 视觉语言
  • 约定方式
  • 一致性

优先级排序

首先分享最重要的信息被称为信息层次。这在限制信息集的游戏中特别重要,玩家经常根据受限的信息做出即时决定。当优先考虑用户界面时,确定哪些是对玩家体验至关重要或最相关的,并确保它们既易于访问又易于找到。考虑这些问题:

  • 玩家在这一刻在做什么?
  • 他们需要知悉或访问的最重要事情是什么?
  • 他们有什么选择可以做?
  • 他们需要什么信息才能做出这些选择?
  • 他们多久会参与这些选择?

在游戏过程中,重要信息和功能会发生变化,取决于玩家所担任的角色、游戏世界中的位置以及持有的物品。用户界面可以设计只呈现有意义的内容——根据每个上下文中有用的内容切换按钮和信息。这保证玩家总是拥有他们需要的东西,而不是拥有他们不需要的一切的混乱。

例子

无关元素可能会导致混乱和分心。法术锁定 RPG > 具有清洁、最小主义的用户界面,对于移动界面尤为重要,因为小屏幕可以轻松被过多的按钮、屏幕和文本淹没。

A close up view of an unselected circular Items button with a brown book icon. The environment in the background is a brown dirt with a patch of snow.
法术约束 RPG中选择之前的物品
A close up view of a selected circular Items button with a brown book icon, along with three additional buttons for skills, equipment, and the players deck. The additional buttons only display when the button is selected.

选择后的项目在 Spellbound RPG
>

超级射门联赛 中,玩家的互动会根据他们是否控制球而异。没有球,玩家可以冲刺和铲球来重新获得控制。一旦拥有,按钮切换到德克和通过,允许玩家躲避对手并传球。通过轮流使用这些按钮,用户界面保持在语义上有用,避免不必要的分心。

超级射门联赛中的上下文按钮
超级射门联赛中的上下文按钮

生存游戏中,玩家需要意识到他们的生命值和饥饿状态,并快速访问地图、库存和工具。这些信息可以让他们做出决定并优先考虑生存的行动。如果这些信息或工具难以找到或丢失,生存就变得更加挑战和无意义。

HUD功能在生存游戏

注意

尽管最小化、优先级和上下文化的用户界面,玩家仍可能需要帮助找到他们需要的东西。UI 设计师可以使用多个视觉工具来捕捉和引导玩家的注意力,例如:

  • 颜色: 亮色比沉默色更容易引起注意。为关键文本、按钮和其他元素使用鲜艳的颜色,为较不重要的元素使用淡化颜色。这种对比增强了可见度并减少了分心。
  • 尺寸: 更大的元素更显眼,被认为比更小的元素更重要。
  • 空间: 被充足的负空间或填充物包围的元素很引人注目。
  • 距离: 集群元素暗示连接。通过将相关功能和物品放在一起,玩家可以更好地理解其关联并更轻松地找到它们。
  • 移动: 动画元素吸引注意力。即使是轻微的运动也可以让元素在静电对手中脱颖而出。粒子效果、摆动按钮和动画箭头经常在教程中用于指导。

使用这些工具时,适度是关键。过度使用亮丽、运动元素可能会让玩家感到困惑,而不是帮助他们。

例子

监狱逃脱 的赛季通行证 UI 中,一条金黄色条纹躺在赛季通行证专用图标下,吸引注意力到高级奖励,使其与免费奖励明显不同。

监狱逃脱中的赛季通行证用户界面

龙之旅中, 视觉优先级被给予最高价值的硬币包,通过增加其大小并将其与更多空间分开,以区分它与更小的包。

龙之冒险 中的金币包

塔防模拟器 中,尺寸和距离都用于视觉分组并区分每日塔皮与每日箱子。

塔防模拟器中的商店

视觉语言

除了指向屏幕上最重要元素的玩家注意力外,界面设计师还开发了一个视觉语言来帮助玩家理解他们看到的内容。视觉语言是一组明确一致的设计选择,可以在一眼中提供元素的目的、状态、关联和重要性信息。语言由像形状、颜色和风格等工具构建。视觉语言的一些用途包括:

图标

图标可以使用传达意义和关联的视觉身份。例实例,与特定统计相关的图标可能会共享颜色调色板和类似形状,以便玩家识别并理解其功能。

玩家数据在 命运之风

按钮

作为玩家输入的主要形式,按钮必须易于识别。容器中的房屋按钮,例如围绕文本或标志的颜色,与背景区分,使它们显得互动。添加阴影或亮点可以通过提示 3D 深度来增强其触觉吸引力。

BotClash 模拟器 按钮

文本

包含重要高级信息的标题和头部应比体文本更大且更粗体。高度可读且与背景颜色对比良好的颜色应该被考虑。像颜色和加粗体选项一样的风格选择可以突出游戏内的重要信息,例如游戏物品、统计数据或能力。始终在选择字体时优先考虑可读性。

衣服店在 命运之风

一旦设计了视觉语言,它可以被记录在一个 风格指南 中,这是一组规则和例子,可以帮助整个团队的每个人理解如何在游戏中一致应用语言。

约定方式

常规是通过多个不同游戏看到的设计选择,例如:

  • 按下时关闭对话框的按钮上的 X 符号
  • 应用于目前无法使用的按钮的灰色颜色
  • 在按钮或功能上覆盖一个锁定图标,表示玩家尚未获得或解锁它

由于其广泛使用,玩家通常熟悉这些约定。利用这种熟悉度可以使界面更直观,减少对游戏特定说明的需求。在目标类别内玩游戏可以帮助识别玩家可能认识的规则。UI 设计师可以选择一种独特的方法来更好地适应他们的游戏,但了解这些约定可以影响他们的决策过程。

X 关闭按钮在 命运之风 , 龙之冒险 , BotClash 模拟器 , 和 门

绿色“生命”状态一致性在 奥术之旅 >

一致性

无论 UI 设计师做出什么决定,他们都应该在整个游戏中一致应用它们。一致性可以帮助玩家更有效地导航游戏,并防止混乱和沮丧。

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

  • “生命值”状态在所有文本、相关图标和健康条中显示绿色
  • 随时 NPC 对话提到游戏内物品时,它将被突出显示为粗体。
  • 关闭按钮始终是正方形、红色且包含白色 X,仅出现在对话框右上角。
  • 每当玩家无法在商购物中购买物品时,价格会显示为红色。

这些选择是有意识的,旨在促进玩家的理解和导航。通过一致应用它们,它们可以让玩家关联相关元素、识别重要物品、发展肌肉记忆、做出迅速的决定,并花更多时间沉浸在游戏中。

UX

UX 设计与玩家如何与游戏互动、如何让游戏知道他们的选择以及如何从一个选择移至另一个有关。尽管UX经常与用户界面(UI)紧密合作,但它更侧重于互动性和玩家体验而不是UI的视觉和信息设计。

了解玩家

UX 设计师的主要目标是创建易于理解、不显眼且方便玩家使用的互动和流程。该过程始于对玩家本身的理解,即游戏的目标受众。当识别体验的玩家时,请考虑以关注中/正在关注因素:

  • 人口统计: 人口统计可以帮助设计师做出选择,揭示关于玩家群组的普遍信息。例如,年轻玩家通常更有可能在移动设备或平板电脑上玩游戏,而不是在个人电脑上,因此那些面向该群体的游戏通常会优先设计和精炼移动用户体验。

  • 经验等级: 开发者可以选择为拥有少量游戏经体验、大量游戏经验或位于中间的玩家设计。熟悉经验丰富的玩家的互动,例如点击数字键以在工具栏中装备物品,或按 c 下蹲,可能对经验不足的玩家不明显,需要额外的消息或培训。

  • 品类熟悉度: 类似于普遍经验等级,品类熟悉度反映玩家的经验等级与特定类型游戏。Roblox 上的流行类型游戏,例如角色扮演、生存恐怖和第一人称射击游戏,很可能有许多已经玩过类似游戏的潜在玩家。其他类型的游戏可能拥有更少的经验玩家,但这个经验差距可以通过教程和可用性来克服。

  • 游戏风格: 玩家经常喜欢特定类型的游玩,从竞争和成就收集到探索和合作。这些偏好不仅反映在玩家喜欢的游戏机制中,还会影响UX决策。设计师考虑优先级的交互、需要抛光的交互以及需要向玩家展示的交互。它们还考虑到玩家在进行这些交互时所拥有的心理状态以及他们试图从中激发的情绪。

考虑这些因素并选择目标玩家群组(或群组)后,通过与他们会面、与他们一起玩、了解他们的目标和偏好来更好地 inform 设计选择。

设计互动

互动是允许玩家在游戏中体验和沟通选择的功能。UX 设计师希望这些互动是直观的,需要尽可能少的解释。为了实现这一目标,他们使用:

  • 约定方式
  • 喻例
  • 反馈

约定

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

“E”靠近提示在美人鱼生活

约定的例子包括:

  • Roblox 开发者使用的“E”靠近提示,用于向玩家发出信号,如果他们站得够近,就能与物品互动。
  • “C”键可以让玩家的虚拟形象下蹲,以便它们能够躲过障碍物或者进入狭小的空间。
  • 将工具栏中的数字键装备物品装备到虚拟形象的手中,以便它们可以使用。
  • 走进地面上的圆圈以便排队参加比匹配。

当特定实现或设计选择因其易于使用而获得流行时,便会建立约定。例如“C”来下蹲很容易记住,因为它是单词“下蹲”的第一个字母,而且方便地位于WASD旁边,玩家使用的键来导航栏。它是一种简单的互动,可以快速进行且在压力下进行,这非常适合躲藏或逃离接近的威胁,因为试图隐藏或逃离接近的威胁是蹲下的常见用例。

喻例

喻例 将抽象概念关联到更熟悉的概念,创建一种快捷方式来理解。在 法术魔法巫师角色扮演游戏 的这个例子中,施放魔法法术的行为是通过从一堆卡中抽取卡来执行的。基于面板的 UI/UX将抽象的施法行为转换为玩家更容易理解和快速理解的东西,这没有现实生活的表达,因为它没有现实生活的表达。

以卡牌形式施法在 Spellbound RPG

反馈

从游戏到玩家的通信被称为反馈。反馈可以帮助玩家理解他们采取的行动在游戏中产生了效果。它可以帮助学习游戏的功能,并添加一层额外的波兰语,使特性更容易使用。反馈的一些例子包括:

  • 敌人播放其“命中”反应动画以表明已受到玩家武器的伤害
  • 一个按钮,可更改颜色以显示悬停、压悬浮信息和释放(已选择)状态
  • 当玩家完成购买时,收银机“cha-ching!”的音效播放
  • 当玩家完成任务目标时,进度条填充

当反馈缺少或不足时,玩家可能不知道他们做了什么,不知道效果是否良好或不良,甚至不知道他们使用的功能是否正常运行或遇到错误。

设计流程

玩家完成目标往往需要多个互动。UX 设计师关心玩家是如何从一个动作或 UI 屏幕或选择转到下一个并确保这些路径是合理且方便的。

例如,要在 浆果大道RP 上装备虚拟形象上的物品,玩家必须:

  • 找到并点击虚拟形象按钮
  • 选择一个物品类别(脸、头、颈等)
  • 滚动以找到感兴趣的项目
  • 点击物品以在他们的虚拟形象上装备它
  • 找到并点击完成按钮以退出虚拟形象自定义
浆果大道 RP中的虚拟形象自定义流程

这些步骤一起表示虚拟形象自定义流程。该流程简单且直接,需要尽可能少的步骤来装备一个物品。因为玩家不需要执行很多操作或想太多关于他们需要做的事情,这个流程在 摩擦率 很低,是达到目标所需的努力的一种测量。

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

  • 想要能够快速修改虚拟形象
  • 在修改时轻松找到物品
  • 在选择之前预览项目
  • 选择后易于移除物品

这些目标然后指导了精选能的 UI 和用户体验设计:

  • 玩家通过 HUD 上的显著按钮访问虚拟形象自定义功能,可以立即开始为自己的虚拟形象装备物品
  • 选项卡将项目分类为方便的类别,搜索字段允许玩家直接搜索项目
  • 物品在虚拟形象上立即预览
  • 玩家可以再次点击以取消选择该项目,或者点击装备列表中的该项目

设计师可以开始布置 UI 并计划玩家采取的步骤来完成修改他们的虚拟形象的目标。这个过程可以通过使用 流程图 来加以帮助,其可以 visually 描绘玩家在导航 UI 时的行动。这些图可以帮助识别被忽略的步骤、步骤不清晰或不便的痛点以及过度摩擦。

流程图的示例。