用户界面和用户体验设计

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


用户界面 (UI) 是由艺术视觉设计和通信中心信息设计结合来产生菜单、商店布局、头显示 (HUD) 和其他与玩家交互的界面。用户界面 (UX) 与游戏的交互关系是由玩家与游戏的交互方式、玩家选择公开给游

用户界面

用户界面共享重要信息,例如命中点、任务目标和价格,允许玩家做出决定并导航游戏。 因为它通常是游戏与玩家交流的主要方式,因此 UI 对玩家的体验至关重要。 不能设计得好的 UI 会让玩家感到困惑和沮丧,从而导致低转货币化。 有效的设计 UI 使用以下原则:

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

优先级

首先分享最具价值的信息是信息层级。 这是在玩家经常使用限制的信息集做出即时决策的游戏中特别重要。 当优先级用户体验时,确定是否为玩家提供最佳体验,并确保其易于找到。 请考虑这些问题:

  • 玩家在这一刻正在做什么?
  • 他们需要了解或访问的最重要内容是什么?
  • 他们有什么选择?
  • 他们需要什么信息才能做出那些选择?
  • 他们是否经常选择这些选项?

在游戏的过程中,重要信息和功能会发生变化,这取决于玩家所扮演的角色、其位置在游戏世界中的地点和其所拥有的物品。UI 可以设计来仅从以下方面呈现重要信息:交换按钮和信息,取决于每个上下文中的实用性。这确保玩家总是拥有他们需要的东西,而不是那些他们不需要的东西。

例子

不相关的元素可能会导致困惑和分散。 法术边界 RPG 有一个清洁、最小限度的 UI,这对于移动界面来说尤为重要,因为小屏幕可以轻松被满屏按钮、屏幕和文本。

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.
法术边界 RPG 后选择的物品

Super Striker League ,玩家交互基于是否控球。没有球的情况下,玩家可以冲刺和铲球来恢复控球。一旦拥有球,按钮将切换为Deke和通过,以便玩家闪避对手并传球。通过 alternating 这些按钮,界面保持上下文菜单,避免不必要的 distractions。

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

在生存游戏中, 玩家需要了解他们的生命值和饥饿状态,并且快速访问他们的地图、物品栏和工具。 此信息允许他们做出决定并优先考虑生存。 如果此信息或工具很难找到或丢失,生存将变得更加挑战并不必要地 frustrating。

生存游戏中的HUD功能

注意

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

  • 颜色: 亮色吸引人注意力更多。 使用生动的色调为关键文本、按钮和其他元素,并使用柔和的色调为更小的颜色提供色彩。 这种对比会提高可见度并减少分散。
  • 大小: 更大的元素更容易被看到,且比较小的元素更容易被感知。
  • 空间: 元素被宽泛的负空间或填充物包围是有吸引力的。
  • 接近度: 集合元素暗示连接。 通过将相关功能和项目放置在一起,玩家可以理解其联系并更容易找到它们。
  • 移动: 动态元素吸引注意。即使是轻微的移动也可以让元素在静电竞争中脱颖而出。粒子效果、摇摆按钮和动态箭头是常用于教程中提供指导的。

使用这些工具时,适度使用亮、移动元素是关键。过度使用亮、移动元素可能会让玩家感到眩晕并使其无法集中,从而影响其帮助。

例子

在 监狱逃脱 的季节通行证用户界面中,金黄色条纹与季节通行证专属图标之间的黄金黄色条纹,让黄金黄色条纹从免费版本区分开来,并且视觉上与免费版本区分开来。

监狱逃脱 UI 中的季节通行证 UI

龙大冒险, > 视觉优先级是通过增加其大小并将其与更多填充物分离来区分它与较小的束。

在 龙大冒险 中的金币包

在 塔防模拟器 ,尺寸和靠近度都用于视觉上组织和区分每日塔皮肤从每日箱子。

商店在 塔防模拟器 >

视觉语言

除了将玩家的注意力集中在屏幕上最重要的元素之外,UI 设计者还开发了一个视觉语言,帮助玩家理解他们正在看到的内容。 视觉语言是一种设计在一目一经的方式提供信息的语言。 语言由工具如形状态、颜色和样式等提供。 一些使用视觉语言的例子包括:

图标

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

玩家统计在风暴之力

按钮

作为玩家输入的常见形式,按钮必须很容易识别。 将按钮放在容器中,例如将文本或标志包围的颜色,使它们从背景中分离,使其看起来互动。 添加高亮或阴影可以提高其触摸感,因为它们暗示3D深度。

按钮在 BotClash Simulator
> >

文本

包含重要高级信息的标题和头衔应该比头体文本大得多。颜色可以高度辨认,与背景颜色良好对比的颜色应该被视为重要信息。 色彩选项,例如颜色和浅色,可以强调游戏中的物品、统计数据或能力。 总是以可读性为先级,选择字体时应该考虑到此。

服装商店在幸运之风

当视觉语言被设计好之后,它可以被记录在 风格指南 中,这是一个包含规则和示例的规则集,它们帮助团队中的每个人理解如何在游戏中一致地应用语言。

约定

约定是许多不同游戏中常见的设计选择。一些例子包括:

  • 按钮上的 X 符号,当按钮被按下时关闭对话框
  • 已将灰色应用于已禁用的按钮
  • 一个锁定图标覆盖按钮或功能,表示玩家还没有或未解锁它

由于其广泛使用,玩家通常对此有所熟悉。 利用此熟悉度可以让界面更直观,减少对游戏具体指令的需求。 玩游戏在您的目标游戏类型内可以帮助识别您可能识别的约定。 一个 UI 设计师可能会选择独特的方法来更好地服务于其游戏,但知道这些约定是有助于您的决策过程的。

X 关闭按钮在 幸运之风龙之冒险BotClash 模拟器
2> 门2> >

奥术大旅中的绿色“健康”属性一致性

一致性

无论 UI 设计师做出什么样的决定,他们都应该一致地应用它们在游戏中。一致性可以帮助玩家更高效地导航游戏,并且避免混乱和沟通。

这里有一些游戏中的 UI 一致性示例:

  • “健康”属性在所有文本、相关图标和健康条中绿色显示。
  • 任何时候,NPC 对话框中提及游戏内物品,都会以下列字体高亮显示:
  • 关闭按钮总是是方形、红色、并且包含一个白色的 X,仅在对话框的右上角出现。
  • 当玩家无法在商购物购买物品时,价格会显示为红色。

这些选择是有意图的,旨在 facilitae 玩家理解和导航。 通过应用它们一致,玩家可以联系相关元素、识别重要项目、发展肌肉记忆、做出快速的信息决策并花更多时间浸泡在游戏中。

用户体验

用户体验设计与玩家如何互动、如何让他们知道游戏的选择、以及如何从一个选择移动到另一个选择的方式有关。 尽管 UX 通常与用户界面 (UI) 共同工作,但它的焦点更多是与交互性和玩家体验相关,而不是与视觉和信息设计相关。

了解玩家

UI设计师的主要目标是创建直观、不冒犯性和方便玩家使用的交互和流程。 这个过程始于了解玩家本人、游戏的目标受众。 当识别体验中的玩家时,请考虑以关注中/正在关注因素:

  • 人口学: 人口学可以通过揭示玩家群组的一般信息来帮助设计选择。例如,年轻玩家更可能在移动设备上玩耍,因此对于该群组的设计者通常会优先考虑设计和调整移动用户体验。

  • 体验级别: 开发人员可以为没有游戏经验的玩家设计,一些重要的游戏体验,或者在某个中间。与经验丰富的玩家相似的交互,例如点击一个数字键以装备一个物品在工具栏,或者按 c 键 crouch ,可能不会显然给非经验丰富的玩家,并且需要额外的消息或训练。

  • 音乐类型熟悉度: 与一般体验等级类似,音乐类型熟悉度会反映玩家的体验级别,通过特定类型的游戏。游戏在 Roblox 上的流行音乐类型中,例如角色扮演、生存恐怖和第一人称射击游戏,都可能有很多潜在的玩家。但音乐类型��

  • 游戏风格: 玩家经常喜欢特定类型的游游玩,例如比赛和成就收集、探索和合作。这些首选项不仅反映在游戏机制上玩家喜欢的内容,还影响 UX 决策。设计师考虑哪些交互优先级是否需要更新,哪些交互是否需要修复,以及哪些交互是否需要呈现给玩家。他们还考虑了玩家

考虑这些因素,选择一个目标玩家群组(或群组),通过与他们见面、玩耍和了解他们的目标和首选项来了解它们,以便更好地了解设计选择的选择。

设计交互

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

  • 约定
  • metaphors
  • 反馈

约定

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

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

例子包括:

  • Roblox 开发者使用的“E”接近提示,用于向玩家表示物品可以交互,如果他们离它足够近。
  • “C”键允许玩家的虚拟形象爬行,以便在障碍物下或空间紧张的情况下鸭躍。
  • 在工具栏中装备虚拟形象的道具,以便他们可以使用它们。
  • 走到地上的圆圈上以进行匹配。

当特定实现或设计选择因其易于使用而成为人们的热点时,它们会成为约定。例如,“C” 可以爬行,因为它是首个字母 crouch,并且位于 WASD 旁边,因此是玩家使用来导航栏的钥匙。它是一个快速的交互,无需强制,因此是 ideal 从尝试隐藏或逃离接近威胁的情

谐语

通用语言 关系一个抽象概念到更熟悉的概念,并创建一个通道来理解。在Spellbound Wizard RPG 的此示例中,施法魔法的方法是通过从甲板抽卡一些卡来实现的。 甲板基础的 UI/UX 基于抽卡的魔法施法,这种抽卡的实现没有现实生活中的表达,通过将玩家关联到

作为卡片在 法术边界 RPG >

反馈

从游戏向玩家通信被称为反馈。反馈可以帮助玩家理解他们所做的事情对游戏有什么影响。它可以贡献游戏功能的理解并添加额外的波兰语层,使特性更有趣使用。一些反馈示例包括:

  • 一个敌人播放其“击中”反应动画来表示它已经从玩家的武器上受到伤害
  • 一个按钮,可以改变颜色来表示悬停、已压下和已释放状态(已选择)
  • 当玩家完成购买时,注册机“cha-ching!”声音效果播放
  • 随着玩家完成任务目标,进度条会填充

当缺少或不足的反馈时,玩家可能不知道他们的成就是否足够,理解效果是否良好或是否存在错误,甚至可能知道该功能是否正常运行或是否遇到错误。

设计流程

多个交互通常需要玩家完成目标。 UX 设计师关注玩家如何从一个操作或 UI 屏幕或选择到下一个并确保这些路径是有道理和方便的。

例如,在 Berry Avenue RP 上装备一个物品,玩家必须:

  • 找到并点击 Avatar 按钮
  • 选择一个物品类别 (面部、头部、颈部等)
  • 滚动以查找您感兴趣的物品
  • 点击物品,将其装备到他们的虚拟形象
  • 找到并点击“完成”按钮以退出虚拟形象定制
浆果大道 RP 中的头像自定义流程

这些步骤一起表示虚拟形象自定义流程。这个流程是简单的和直截了当,需要尽可能少的步骤即可装备一个物品。因为玩家不需要执行许多操作或思考他们需要做什么,因此这个流程的 friction 很低,这是一个目标的力量测量。

设计高效、低摩擦力的流体需要仔细考虑使用场景。这些使用场景可以用户目标来表达,例如:

  • 想要能够快速修改虚拟形象
  • 轻松查找
  • 选择前预览物品
  • 选择后的快速物品移除

这些目标 then guide the UI and UX design of the feature:

  • 玩家通过显示面板上的显著按钮访问虚拟形象定制功能,可以立即开始装备物品到他们的虚拟形象
  • 选项卡可以将项目分为便利的类别,搜索字段可以让玩家直接搜索
  • 物品在虚拟形象上即时预览
  • 玩家可以通过再次点击该项目来取消选择,或者在装备的物品列表中点击该项目

设计师现在可以开始布置 UI 并计划玩家完成虚拟形象修改的目标所需的步骤。 此过程可以通过使用 流程图 来帮助捕捉玩家在 UI 中导航时的行动。 这些图形可以帮助识别被遗忘的步骤、痛点,以及过度摩擦。

示例流程图。