线框化你的布局

线框化你的布局 是设计你想通过UI在各种工作流程中传达的信息结构和流程的过程。这个教程的关键步骤允许你迭代UI元素的排列，发现痛点，并在你投入时间和资源到一个不适合你体验的问题设计之前改善玩家的体验。

在使用 示例激光标签体验 .rbxl 文件作为参考的这一用户界面课程部分中，向你展示如何在屏幕上结构化你的UI元素，包括关于以下内容的指导：

• 规划UI的视觉层次，使其直观地引导玩家获取他们在体验中成功所需要的功能和信息。
• 使用基本形状构建UI元素，以审查你的UI元素与Roblox核心UI和触控控制的组成。
• 开发用户流程，以考虑玩家为了达成他们的目标而需采取的必要行动。

完成此部分后，你将学习如何在Studio中构建和配置你的UI，使其尊重你的艺术风格和线框。

规划视觉层次

视觉层次是一种组织结构，它通过重要性的顺序来突出UI元素。为你的体验中的不同工作流程规划视觉层次很重要，因为它为玩家实现他们的目标铺平了成功的道路，这在目标时刻变动的第一人称射击体验中尤其必要。

有效的视觉层次引导玩家通过他们需要满足游戏要求的功能和信息，依据他们在屏幕上自然查看的地方以完成工作流程。例如，示例激光标签体验的视觉层次必须在玩家导航地图和标记敌队玩家时引导他们通过以下类别的UI元素：

1. 有关体验目标的信息。
2. 有关炮台的信息。
3. 有关玩家状态的信息。

这些类别在最终设计中在屏幕上的位置突显了它们的重要性顺序：

• 第一类在顶部附近，因为它包含对如何赢得游戏最重要的UI元素。
• 第二类占据中间的大部分屏幕空间，因为它作为焦点将玩家的注意力吸引到3D空间中的动作上，并且对游戏的进行最为重要。
• 第三类在侧边附近，因为玩家可以在不分散注意力于游戏过程的情况下阅读这些边缘信息。

对于某些体验类型，你只需要一次显示一种信息类别，因为这是在该工作流程中对玩家重要的唯一信息类型。然而，对于第一人称射击体验，玩家需要同时看到来自多个类别的UI元素，因为它们都提供玩家成功所需的信息，比如他们的团队得分、炮台的冷却时间，以及他们是否被标记出局。

在为你自己体验中的工作流程规划视觉层次时，请考虑以下内容：

• 如果你将不同类别的UI元素分散在屏幕上，玩家将不知道在哪里寻找他们所需的信息。为了帮助玩家更好地导航你的体验，将同一类别的UI元素分组在一起。
• 如果在屏幕上同时有太多类别，玩家可能不知道需要关注哪些信息。为了避免用杂乱的信息淹没玩家，根据不同的工作流程上下文展示UI元素。
• 同样，如果每个类别的UI元素太多，这可能会分散玩家对如何完成某个动作或过程的理解。因此，重要的是要利用你的艺术风格为理想的交互顺序提供视觉强调。

有关示例激光标签体验的视觉层次的全面回顾，请查看以下表格：

构建UI元素

现在你有了视觉层次概念，你可以使用基本形状构建单个UI元素，以审查你自定义UI布局与Roblox核心UI在多个设备上的组成。这一过程允许你查看需要修改设计的地方，以确保它在玩家可以用来访问体验的所有屏幕尺寸上都有效，比如在移动设备、平板电脑、笔记本电脑和电视屏幕上。

在你开始之前，你需要确定为你的自定义UI元素提供多少屏幕空间，同时考虑到Roblox的核心UI。例如，默认情况下，Roblox在每个体验中显示以下UI元素：

• 体验中的玩家列表。
• 角色的健康栏。
• 角色的背包。
• 聊天窗口。
• 捕捉按钮。
• 角色表情的弹出菜单。

你可以 禁用 任何不满足自己体验的游戏玩法要求的元素，以为你的自定义UI节省屏幕空间。例如，示例激光标签体验不需要背包，因为玩家只有能力选择一个炮台。然而，如果玩家能够同时选择多个炮台，该体验可以禁用这个核心UI，以确保当玩家重生时始终有空间选择炮台，然后提供另一个位置来选择你的库存。

在考虑Roblox的核心UI之外，你还必须考虑Roblox默认触控控制所需的屏幕空间。例如，当玩家使用移动设备访问你的体验时，虚拟摇杆会显示在屏幕的左下角，跳跃按钮会显示在屏幕的右下角。这确保玩家始终能够导航你的体验，即使他们没有访问键盘或控制器。

通过考虑Roblox的核心UI元素与可能的触控控制所需的空间，你可以在一个设计中构建自定义UI元素，这个设计可以在多个设备上自适应。这一点很重要，因为这意味着你在更新体验时不需要维护UI的多个版本。

为了演示这种方法，请查看以下两张关于示例激光标签体验如何为移动和PC设备构建自定义UI元素的图片。两张图片都包括：

• 基本形状来表示自定义UI，因为它允许设计在实现最终设计之前轻松经过多个迭代。
• 灰度着色使眼睛可以跟随信息，而不受到多彩背景环境的干扰。
• 聊天窗口和活动玩家列表的打开状态，以便查看它们在屏幕上占用多少空间。
• 即使在PC设备上不必要，仍为移动控制留有空间。

当你以这种方式设计你的布局，同时考虑到屏幕上可以同时存在多少UI元素时，你为所有可能的布局做好了未来准备，依据玩家的设备和工作流程。

在为你的布局构建UI元素时，请考虑以下内容：

• 你块状UI的位置和方式可能会影响布局的组成。 追求量和大小的平衡与对称，使自定义UI元素与Roblox的核心UI并置。
• 与位于某些移动和平板设备的远离屏幕底角的UI进行交互要么不舒服，要么不可能。 将交互元素放在容易触及的区域，靠近拇指的自然休息位置。
• 当玩家在你的环境中导航时，3D空间可能会分散他们对屏幕UI的注意。 在各种可能的背景下测试你的布局，以确保屏幕上的UI元素保持清晰和易读。

开发用户流程

用户流程是玩家在体验中完成任务所能采取的路径的集合，例如选择武器、购买物品或治疗角色。用户流程通常从你期望玩家开始任务的地方开始，以任务结束时玩家达到的最终动作或成就结束。此外，有效的用户流程还考虑了玩家可能希望采取的非凡路径，以实现相同的目标。

以下流程图显示了玩家进入并玩示例激光标签体验的用户流程。当玩家打开体验时，他们加入大厅。如果回合尚未开始，他们等待直至回合循环开始，否则他们加入当前正在比赛的团队。如果终止条件尚未达成，例如达到时间限制或每个团队标记出10名玩家，则玩家选择他们的炮台并体验标记或被敌方团队标记的主要游戏玩法，在竞技场中装备新的炮台，或者在他们被标记出局后重生。一旦玩家满足终止条件，他们结束回合并再次加入大厅。

为玩家在体验中可以执行的所有操作开发用户流程是很重要的，因为这使你能够评估你希望玩家在哪里以及如何完成任务，并预测可以在哪些地方缓解任何遵循自己路径的人的痛点。例如，如果你要为示例激光标签体验开发额外的用户流程，当玩家：

• 在终止条件未满足之前退出回合时会发生什么？
• 在加入团队时离开体验？
• 在回合中途接到电话时会发生什么？
• 在回合中断连线不超过15秒时会发生什么？

通过可视化玩家在完成任务时可以采取的所有潜在动作或可能发生的场景，你可以更好地确定UI元素的布局如何对玩家的体验产生负面影响，然后在将设计在Studio中实施之前进行调整。如果任务感觉直观、不妨碍、且方便，玩家更可能在你的体验中花时间，并在以后的日期返回。

在为你自己的体验开发用户流程时，请考虑以下内容：

• 你希望玩家在体验中做的事情和他们想做的事情可能完全不同。最好是 通过多种类型的玩家测试你的布局，以理解他们想采取的路径以达到他们的目标。
• 如果流程图尝试在图表中捕捉多个场景，它可能变得难以阅读且无效。为了聚焦你的注意力在每个任务上，将流程图限制为一次一个主要任务。
• 交互模式根据玩家使用触控控制器、游戏手柄或计算机鼠标与体验进行交互而有所不同。如果你正在为多个设备设计，为每个设备开发独特的用户流程，以便识别痛点并简化工作流。

在你最终确定线框设计后，是时候进入Studio使你的UI生动起来。