选择艺术风格 是为您的 UI 元素选择一个美学方向的过程。 重要的是,艺术风格提供您可以参考的视觉地面规则,以确保您的 UI 清晰地向玩家提供信息,让他们在您的体验中做到。
使用 样本激光标记体验 .rbxl 文件作为参考,此部分用户界面教程显示您如何根据体验类型设计您的 UI 元素,包括指导:
- 根据您想要向玩体验通信的内容,识别必要的用户界面元素。
- 选择一种颜色主题,它将强化您的观众对音乐的品味。
- 描述任何屏幕尺寸下的简单图标。
- 确立按钮顺序,即可满足不同玩家的工作流程的可能性。
- 确定一种确保在目标设备上可读取的文本系统。
完成此部分后,您将学习如何设计您想要通过体验中的玩家通信的信息结构和流程。
识别您的 UI 元素
选择艺术风格为您的 UI 的第一个步骤是确定您需要通信到您的受众的各种信息的 UI 元素。 在设计过程的早期阶段,执行此工作是关键,因为它允许您根据目标地点和玩家与每个 UI 元素交互的情况进行分类,并为您的体验进行重用元素的重用。
有很多不同的方法来为您的游戏玩法需求 brainstorm 哪些 UI 元素,但建议从开始游戏体验的时候开始,即使玩家加入您的体验。例如,当玩家打开示例激光标签体验时,他们可能会提出以下问题:
- 体验的目的是什么?
- 我如何知道谁在我的团队中?
- 我如何跟踪我的团队积分?
- 我如何选择一个冲击波?
- 我如何知道激光发射器的激光在哪里?
- 如果我使用移动设备,我如何使用我的冲击波?
- 我射击激光后,可以在多久后再次射击?
- 我如何知道我将开始回合?
- 我如何知道当我成功标记某人时,我的激光枪会标记他吗?
- 我如何知道敌方队伍成功标记了我?
通过使用这些问题来了解玩家成功的关键信息,您可以将样本激光标记体验的 UI 需求分为三个类别:
- 体验目标的信息。
- 关于激光器的信息。
- 玩家状态的信息。
将您的体验 UI 需求分类为类别是有帮助的,因为您可以在每个组合中形式化您的艺术风格来强化每个类别需要教学的玩家。例如,如果您想要让玩家知道角色的生命状态,您可以选择一个带有颜色绿色和/或加成图标的艺术风格,以便玩家快速识别其功能。
排序您的体验 UI 需求进入类别后,您可以创建需要满足每个类别要求的 UI 元素的列表。 要示例,样例激光标记体验使用以下表格的 UI 元素来满足每个类别的要求。 通过此教程,UI 教程将继续使用此列表并突出重要的设计决策与每个类别的 UI 元素相关。
类别 | UI元素 |
---|---|
体验目标的信息 |
|
关于激光器的信息 |
|
玩家状态的信息 |
|
有了你为体验创建的 UI 元素列表,我们可以开始对每个组合的 UI 元素进行造型和语义上的选择,从颜色主题开始。
选择一个颜色主题
一个 颜色主题 或颜色调色板,是一个选择颜色通过在您的体验中一致应用通信消息的颜色的选择,例如使用明亮的颜色表示当前选项可用。 应用颜色主题到您的UI元素很重要,特别是您使用体验中的颜色约定在体验中使用颜色约定,因为它允许玩家以最小的努力快速了解您的UI。
在环境艺术课程中,每个半区域的激光标签环境都由顶层到底层的视图进行分色,以便区分地图上哪个区域的地图都在每个团队的特定位置附近: mint
样本激光标记体验使用同一主题的颜色在其 UI 中突出显示与每个团队相关的信息,例如每个玩家的团队指示在 3D 空间中,或者团队点跟踪器在屏幕上。这种一致性可以帮助玩家快速了解体验的目标,特别是在第一人称射击体验中,玩家需要做出快速的决策。
选择适合自己的体验的颜色主题时,请考虑以关注中/正在关注因素:
- 颜色主题的力量基于帮助玩家在每个颜色和其功能之间进行快速 mental 联想。因此, 限制你的颜色主题 仅用于显示你想要玩家 associ 与你的 UI 元素的关键信息。
- 为了确保玩家失明症可以理解你的颜色主题的消息, 不要总是仅靠颜色来区分界面元素 ,而是要在组合颜色、图形和/或动画之间使用颜色来确保你的 UI 有效地与每个玩家沟通。
- 从视觉角度来说,您的用户界面更重要。因此,为了使您的用户世界面更易于读取,请先将颜色设置为与灯光和暗影元素之间的平衡颜色。
为了突出上一点的指导,示例激光标记体验使用黑白中立的颜色对大多数其他屏幕元素进行近似2D屏幕的重叠。黑色和白色对比度很高,因此它们是阅读其余屏幕显示的3D环境的理想选择。
轮廓简单图标
图标是代表体验中的一种行动作、对象或概念的符号。 描述简单和直观的图标是重要的,因为它使玩家能够轻松识别他们可以做的事情和你希望他们通过你的 UI 无需使用文本来引导注意力的内容。 在移动设备上访问你的体验使用小屏幕,这可能会让屏幕混乱并从中引导注意力。 这个
简单的图标通常有独特的风格来自您的 3D 元素,而仍然与您的体验的整体世界保持兼容。例如,在环境艺术教程的最终环境中, both modular 和 prop 3D 资产都有一个清洁的高科技艺术风格,它使用圆形形状和圆滑的角落来使用长方形形状。从地板旁边的边角到天花板上
要在保持独特的同时补充此艺术风格,您将学会在此教程中稍后学习的所有 UI 元素包含未来感的美学和圆形角度,而不会与 3D 资产在环境中的形状语言相匹配。 这使每个标志的意义与其他信息在 2D 和 3D 空间中的形状语言分开。
要示示此概念,请参阅 crosshair 示例灯标体验的两个图像,其中一个显示玩家在屏幕上的激光射击位置,另一个显示玩家在移动设备上的激光射击位置。两个图像都包含柔和的角度来与世界的整体保持一致,但它们的六边形和圆形形状使它们与任何玩家在体验中联系到的图标都有一些不同。
当为自己的体验创建简单的图标时,请考虑以下方面:
- 简单的图标即使小时也能清晰地显示。为此,请在 移动设备屏幕上限制图标 。
- 图标是强大的,因为它们可以通过语言的不同来传达消息。只要它们不会影响玩家对您的 UI 的理解, 将不必要的文字替换为图标 来改善本地化努力。
- 使用相同的材质、风格和颜色的图标,例如表示力量的剑刃图标或代表魔法的杯子图标。 在体验的材质和风格上拥抱符号 ,以便玩家可以理解你的图标,无需额外的指导。
如果您不知道体验的流派中哪些图标主题型是常见的,请查看游戏界面数据库。 此免费资源工具包括数百个游戏的不同类型的屏幕截图,您可以在设计过程中参考。
确立交互顺序
互动顺序是玩家与您的UI交互的顺序。随着屏幕上的多个互动可能UI元素,重要是确立一个直观的互动顺序来帮助玩家做出决定,在他们导航各种工作流程时。
工作流程通常有三种类型的交互:
- 主要交互 – 玩家最有可能执行的动作。
- 次要交互 – 玩家可能会执行的次要交动作。
- 第三级交互 – 玩家最不可能执行的操作。
每种互动类型都必须有不同的视觉突出级别,这取决于玩家是否执行该操动作。为了说明此概念,请查看以下图像的互动顺序,在工作流程中选择一个激光标记体验中的激光枪,其中 A 代表主要互动,B 代表副要互动,C 代表第三级互动。
在这个工作流程中,玩家最有可能执行的动作是选择两种不同类型的激光之间,因此激光按钮比任何其他交互元素在设计中都要大得多。在此视觉重点层次, 视觉重点层次将玩家的注意力吸引到设计中的其他任何交互元素的中间。在玩家做出他们的选择后,工作流程的
尽管不太可能,但玩家可能不知道他们可以选择一个之一的冲击按钮来通信他们想要使用哪个冲击按钮。为了在这种情况下提供帮助,玩家可以使用两个箭头 terziary 按钮来在选项之间循环。 这些按钮是隐藏在主要和次要交互元素之上的,但也是可以被玩家感知到的。
如果您将主要、次要和第三级交互放置在不同的交互顺序中,例如将左键箭头按钮与选择按钮交换,玩家在选择顺序上的清晰方向不足。为此,在按钮顺序的视觉重点之外,有效的工作流程跟随一个 视觉层级 ,该向玩家通过他们需要做的选
当为自己的体验创建交互顺序时,请考虑以下方面:
- 玩家需要清楚地了解在与您的 UI 交互时可以执行哪些操作。因此,为了这个原因,建议为可交互的 UI 元素提供至少一个形式的视觉反馈 (显示轮廓或更改按钮大小、颜色或动画,当它处于焦点状态) 。
- 如果在交互可能的用户元素上的标签模糊或类似于一起的工作流程,玩家可以理解如何完成一项操作或过程。为了避免负面玩家体验,请 创建清清除、明确、独立的标签 。
- 如果交互界面元素太大,它们可以从屏幕上的其他重要信息上分散注意力。 相反,如果它们太小,它们可以难以读取或选择,尤其是在移动设备上接近的情况下。 因此, 评论移动设备上的交互界面元素的大小 是必要的。
在在 Studio 实现中,您将学习如何使用 UIAspectRatioConstraint 对象确保用户元素的特定外观比例,无论设备玩家使用您的体验。 在设计过程中轻松,这种技术也可以帮助您满足 Web 内容可访问性指南的触摸目标大小和位
确定一个文本系统
文本系统 是一套关于字体和风格的规则对于您的UI中的所有字符,例如“总是使用大头衔”或“使用绿色字体时参考健康统计数据”。 在设计过程中早期确定一个文本系统可以让您有一个您可以在整个体验中一致应用的结构,因此玩家可以预期在搜索他们需要的信息时会发现他们需要的信息。
虽然文本系统可以根据体验的流派或3D世界要求来变化,但所有文本系统必须遵循的最重要规则是确保所有的用户界面文字都是清晰和容易阅读的。 通过使用此规则作为所有与您的文本系统相关的决策的基础,您可以改善玩家阅读您的UI时考虑到玩家与您的文本交互的不同方式来改
- 您可以使用设备玩家来访问您的体验。
- 玩家可以阅读您的本地文本的语言。
- 屏幕上的文本可能有的背景。
例如,当玩家被标记出时,屏幕的响应设计将根据玩家的设备缩放为较小或更大的字体大小,包括足够的空间在每个语言的英文字体上,并且包括对长度为更长的语言的语言在其背景上的对比背景,以便玩家可以读取文本无论什么颜色在其背景上。
当确定为自己的体验创建一个文本系统时,请考虑以关注中/正在关注:
- 当它与背景的噪音混合时,文本很难读取。要改善您的 UI 的可读性,请在对比颜色或使用 Stroke 显示文本。
- 如果您为不同的设备缩放您的文字,文本将占用太多空间或变小并且在玩家屏幕上无法解码。要在您的文本中发现差异,请在设计过程中在多个设备上测试您的设计。
- 当您将文本本地化为其他语言时,单词可以扩展您的原始设计。要改善您的设计的组成,请参阅屏幕上您的文本可以占用的最大空间。
- 虽然有些字体可以满足您的体验的美感,但它们可能很难在大量读取时读取。因此,为了这个原因, 使用体验中的文字体量 ,例如标题或警告文本。
当您为 UI 艺术风格的计划完成后,您可以进入教程的下一部分,了解如何在各个玩家工作流程中将布局每个元素的方法。