选择艺术风格 是为您的 UI 元素规划美感方向的过程。因为艺术风格提供了视觉上的规则，你可以参考以确保你的用户界面直观地向玩家提供他们在你的体验中可以做的信息。因此，开始设计过程很重要，因为设计过程可以使用艺术风格来确保你的用户界面直观地向玩家提供他们在你的体验中可以做的信息。
使用 样本激光标签体验 .rbxl 文件作为参考，本节用户界面教程向您展示如何根据体验类型设计您的 UI 元素的方法，包括指导您：
- 根据您在整个体验过程中想要向玩家传达的内容识别必要的用户界面元素。
- 选择一个强化特定类别颜色约定的颜色主题，这对您的受众具有直观性。
- 概述易于在任何屏幕尺寸上识别的简单图标。
- 确定一个按钮顺序，与不同玩家工作流的可能性匹配。
- 确定确保目标设备可读性的文本系统。
完成此部分后，您将学习如何设计体验中的玩家通过 UI 传达的信息的结构和流程。
识别您的 UI 元素
选择用于您的用户界面的艺术风格的第一步是确定您需要的 UI 元素以传达不同类型的信息给您的观众。在设计过程的开始做这项工作至关重要，因为它可以让你根据功能目的将 UI 元素分类，根据玩家何时何地与每个 UI 元素互动以及在哪里可以重复使用 UI 元素来规划你的体验。
有许多不同的方法可以讨论哪些用户界面元素对您的游戏需求至关重要，但建议从尽快幻想玩家需要了解什么开始。例如，当玩家打开样品激光标签体验时，他们可能会问自己以下问题：
- 体验的目标是什么？
- 我如何知道谁在我的团队中？
- 如何跟踪我团队的积分？
- 我如何选择爆破器？
- 我怎么知道爆破器射出激光的位置？
- 如果我在移动设备上，我如何射击我的爆破器？
- 在我射出激光之后，我什么时候可以再次射击？
- 我怎么知道何时开始回合？
- 我怎么知道当我成功标记某人使用我的爆破器时？
- 我怎么知道敌方团队何时成功标记我？
通过使用这些问题来理解玩家必须知道的信息是成功的关键，你可以将样本激光标签体验的 UI 需求分为三类：
- 关于体验目标的信息。
- 关于爆破器的信息。
- 关于玩家状态的信息。
将体验的用户界面需求分类是有用的，因为您可以围绕每个分组来形式化您的艺术风格，以强化每个类别需要教授玩家的信息。例如，如果你想让你的用户界面告诉玩家他们的角色健康状态可以采取哪些行动，你可能会选择一个将颜色绿色和/或加号图标优先考虑的艺术风格，以便玩家快速识别他们的功能。
排序完体验的用户界面需求后，您可以创建每个类别的需要满足的用户界面元素列表。为了展示，示例激光标签体验使用以下表的 UI 元素来解决以前列出的潜在玩家问题列表。当您通过本教程工作时，UI 教程课程将继续参考此列表，并突出与每个类别的 UI 元素相关的重要设计决定。
| 类别 | 用户界面元素 |
|---|---|
| 关于体验目标的信息 |
|
| 关于爆破器的信息 |
|
| 关于玩家状态的信息 |
|
现在你已经有了体验的 UI 元素列表，是时候开始为每个组合的 UI 元素做风格和语义选择，从颜色主题开始。
选择颜色主题
一个 颜色主题 或颜色调色板是一组颜色，每个颜色都通过在体验中一致应用传达消息，例如使用亮色来表示可选择的内容。将颜色主题应用到您的用户界面元素很重要，尤其是当您依赖体验类别中的颜色约定时，因为它允许玩家快速了解您的用户界面，而不需要太多努力。
在 环境艺术课程 中，每个半激光标签环境的颜色来自顶向下的视图来区分哪个区域的地图靠近每个团队的生成区： 薄荷 对于在地图左侧组装的团队，和 雏菊粉色 对于在地图右侧组装的团队。这些特定颜色有用，因为它们是 互补 的，这意味着它们之间的对比很好，并且允许玩家轻松扫描周围环境并自我定向，无论他们在建建造物中面向哪个方向。
示例激光标签体验在其界面上使用相同的颜色主题来突出每个团队所属的信息，例如每个玩家的 3D 空间团队指示器或覆盖屏幕的团队点跟踪器。这一致性可以帮助玩家在快节奏的第一人称射击体验游戏期间快速理解有关体验目标的信息，尤其是玩家在环境穿越时需要做出快速决定。
当选择自己体验的颜色主题时，请考虑以关注中/正在关注因素：
- 颜色主题的力量取决于帮助玩家快速建立每种颜色与其功能之间的联系。因此， 限制您的颜色主题 仅用于突出您希望玩家与您的用户界面元素关联的关键信息。
- 为了确保色盲玩家能够理解您的颜色主题的消息, 不要总是仅依靠颜色来区分 UI 元素 。相反，将颜色与图标、形状和/或动画结合，以确保您的用户界面与每个玩家有效沟通。
- 对于用户界面而言，阅读性更重要，而不是美观。因此， 优先考虑简单的用户界面 ，其颜色可以在 3D 世界中的浅色和深色元素上保持可读性。
为了突出最后一点中的指导方针，示例激光标签体验使用黑白中立颜色为几乎所有其他用于覆盖 2D 屏幕的 UI 元素。黑色和白色之间的对比很好，而且它们很容易阅读，因为屏幕的其余部分显示了一个彩色的 3D 环境。
概述简单的图标
一个 图标 是代表体验中的动作、对象或概念的符号。简单易懂的图标概述是重要的，因为最终结果可以让玩家轻松识别他们能做什么以及你想通过你的用户界面告诉他们的内容，这可能会凌乱屏幕并分散注意力。如果您的观众使用移动设备上的小屏幕访问您的体验，该过程更为重要。
简单的图标理想上应具有与您的 3D 元素不同的风格，同时仍然兼顾您体验的整体世界。例如，在 环境艺术课程 的最终环境中，模块化和 prop 3D 资产都有一个干净、高科技的艺术风格，它使用了柔软、圆弧的角落形状。从地板上的镂空板到天花板上的几乎圆形窗户，无一例外都没有锋利的边缘。
为了补充这种艺术风格，同时仍然保持独特性，在本教程中你将学习制作的所有 UI 元素都包含未来主义的审美和圆角，而不匹配环境中 3D 资产的形状语言。这使每个标志的含义与 2D 和 3D 空间中的其他信息区分开。
要展示这一概念，请看以下两张图片来自样品激光标签体验，告诉玩家他们的爆破器在屏幕上射击的位置，以及允许玩家在移动设备上射击爆破器的按钮。两个图标都包含柔和的角度以与整个世界保持一致，但它们的六边形和圆形形状将它们与玩家在体验中可能联系的任何东西区分开。
当为自己的体验绘制简单的图标时，请考虑以下内容：
- 简单的图标即使体积很小也是可读的。因此， 限制您的图标上的细节 ，这些细节在移动设备屏幕上将无法识别。
- 图标具有很大的力量，因为它们可以无论玩家的语言传达消息。只要它不会影响玩家对您的 UI 理解， 将不必要的文本替换为图标 来提高本地化努力。
- 许多相同类别的经验使用风格相似的图标，例如代表力量的剑图标或代表魔法的杯子图标。 拥抱你体验类别内的象征符号 以便玩家可以无需额外指导理解你的图标。
如果您不知道哪些类型的图标在体验类主题中常见，请查看 游戏 UI 数据库。用于 UI 设计师的免费资源工具包括来自不同类别的数百个游戏的截图，你可以在设计过程中参考。
建立互动顺序
一个 交互订单 是玩家与您的 UI 可以进行的交互序列。由于屏幕上经常有多个可交互的用户界面元素,建立直观的交互顺序对玩家来说很重要,因为他们在导航各种工作流程时需要做出决定。
通常在工作流中有三种类型的互动：
- 主要互动 – 玩家最有可能执行的行动。
- 次要互动 – 玩家可能会以替代主要行动执行的行动作。
- 第三级互动 – 玩家最不可能执行的行动。
每种互动类型都必须根据玩家执行行动作的可能性拥有不同的视觉重点级别。为了说明这一概念，请检查以下图像的工作流程与样品激光标签体验中的互动顺序，其中 A 代表主要互动、B 代表次要互动、C 代表第三级互动。
在这个工作流程中，玩家最有可能执行的行动是选择两种不同类型的爆破器之一，因此爆破器按钮比设计中的任何其他可交互元素都要大得多。这种视觉强调的水平吸引了玩家的注意力，将他们的眼睛带到整个 UI 元素的中间。玩家做出决定后，工作流程的下一个逻辑步骤是确认他们的选择并开始回合。因此，选择按钮直接位于主互动之下。
虽然几乎不可能，但玩家可能不知道他们可以选择一个爆破按钮来通知他们想使用哪个爆破器。为了在这种情况下提供帮助，玩家可以使用两个箭头三级按钮来轮流使用他们的选择。这些按钮微妙且比主要和次要互动元素要小得多，但它们也可以被需要方向的玩家感知，告诉他们他们能执行哪些行动。
如果你将这些主要、次要和支持互动放在不同的互动顺序中，例如将选择按钮与左箭头按钮交换，玩家将无法确定需要做的选择顺序。因此，除了按钮顺序的视觉强调之外，有效的工作流程遵循一个 视觉层次 ，引导玩家通过他们可能扫描的决策顺序进行理想的决策，例如从上到下和左到右。
当在自己的体验中设置工作流程的互动顺序时，请考虑以关注中/正在关注因素：
- 玩家需要清楚地理解何时可以与您的 UI 交互执行操作。因此，建议 为可交互的用户界面元素提供至少一个视觉反馈形式 ，例如显示轮廓或更改按钮的大小、颜色或动画当它处于焦点状态。
- 如果可交互的 UI 元素上的标签模棱之或相似于同一工作流程中的其他标签，玩家可能会误解如何完成一个行动或过程。为了避免负面玩家体验， 创建清清除、精确且与其他不同的标签 。
- 如果互动 UI 元素太大，它们可能会分散屏幕上其他重要信息。相反，如果它们太小，可能很难阅读或很难选择，尤其是如果它们在移动设备上处于近距离。因此，为了确保在各种屏幕尺寸下的可交互用户界面元素的尺寸，必须 评论各种屏幕尺寸下的可交互用户界面元素的大小 。
在 在工作室实装 中，您将学习如何使用 UIAspectRatioConstraint 对象来确保无论使用哪种设备访问体验，UI元素都保持特定的比例。除了让你的设计流程更轻松外，这种技巧还可以帮助你满足“网页内容可访问性指南”的触摸目标尺寸和间距建议，创建一个在移动设备上至少为 9x9 mm 的互动用户界面元素的触摸区域。
确定文本系统
一个 文本系统 是关于 UI 所有字词的字体和样式规则的集合，例如“始终使用粗体标题”或“在引用健康状态时使用绿色字体”。在设计过程的早期确定文本系统可让您拥有一种结构，可以在整个体验过程中一致应用，以便玩家知道他们需要搜索的信息。
虽然文本系统可以根据体验的类型或 3D 世界需求而异，但所有文本系统必须遵循的最重要规则是 确保所有用户界面文本都清晰易读 。通过使用这个规则作为与您的文本系统相关的所有决定的基础，您可以通过考虑玩家与您的文本交互的不同方式来提高玩家阅读您的界面的可访问性和用户体验，例如：
- 设备玩家可以使用来访问您的体验的设备。
- 玩家可以阅读本地化文本的语言。
- 屏幕上的文本背后的可能的背景。
例如，当玩家被标记出时的下一个屏幕响应设计将根据玩家的设备缩放到更小或更大的字体尺寸，包括英文文本两侧足够的空间，用于长翻译的语言，包括对比背景，以便玩家无论背景颜色如何都能阅读文本。
当确定自己的体验需要一个文本系统时，请考虑以关注中/正在关注因素：
- 文本在融入其背景噪音时很难阅读。要提高您的用户界面可读性， 在对比颜色或有边框的情况下显示文本 。
- 如果你没有为不同设备缩放文本，文本将占用太多空间或在玩家的屏幕上变得模糊和难以阅读。要捕捉您文本中的不一致性，在整个设计过程中 在多个设备上测试您的设计 。
- 当你将它们本地化到其他语言时，单词可以超出你的原始设计。要提高设计的组成， 参考你的文本可以占用屏幕最多空间 。
- 虽然有些字体可以适应您的体验的美感，但它们可能很难在大量阅读中阅读。因此， 稀罕使用装饰性文本 ，例如用于标题或警告文本。
一旦你有了UI的艺术风格计划，你可以移至教程的下一部分，学习如何在各种玩家工作流程中设计每个元素的布局。