线框化你的布局

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

使用 示例激光标签游戏 .rbxl 文件作为参考，本用户界面课程的这一部分向你展示如何在屏幕上构建你的用户界面元素，包括以下指导：

• 规划一个视觉层次结构，使你的用户界面直观地引导玩家找到他们在游戏中成功所需的功能和信息。
• 使用基本形状阻挡用户界面元素，以便审查你的用户界面元素与 Roblox 的核心用户界面和触控控制的组合。
• 开发用户流程，以考虑玩家为实现目标所需采取的必要行动。

完成本节后，你将学习如何在 Studio 中构建和配置你的用户界面，以尊重你的艺术风格和线框设计。

规划视觉层次结构

视觉层次结构是一种组织结构，通过其重要性顺序突出用户界面元素。为你游戏中的不同工作流程规划视觉层次结构很重要，因为它为玩家成功完成目标奠定了基础，这在目标瞬息万变的第一人称射击游戏中尤其必要。

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

1. 关于游戏目标的信息。
2. 关于发射器的信息。
3. 关于玩家状态的信息。

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

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

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

在为你自己游戏的工作流程规划视觉层次结构时，请考虑以下几点：

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

有关示例激光标签游戏视觉层次结构的完整审查，请参见以下表格：

阻挡用户界面元素

现在你已经有了视觉层次结构的概念，你可以使用基本形状阻挡单个用户界面元素，以便审查你的自定义用户界面布局与 Roblox 的核心用户界面在多个设备上的组合。这个过程允许你查看需要修改设计的地方，以便在玩家可以用来访问你的游戏的所有屏幕尺寸上都有效，例如在移动设备、平板电脑、笔记本电脑和电视屏幕上。

在开始之前，你需要弄清楚在考虑 Roblox 的核心用户界面时，你的自定义用户界面元素可用的屏幕空间有多少。例如，默认情况下，Roblox 在每个游戏中显示以下用户界面元素：

• 游戏中的玩家列表。
• 角色的生命值条。
• 角色的背包。
• 聊天窗口。
• 捕获按钮。
• 角色表情的弹出菜单。

你可以 禁用 任何不符合你自己游戏的游戏玩法要求的元素，以节省自定义用户界面的屏幕空间。例如，示例激光标签游戏不需要背包，因为玩家只能选择一个发射器。然而，如果玩家可以同时选择多个发射器，游戏可以禁用这个核心用户界面，以确保在玩家重生时总有空间用于发射器选择器，然后提供另一个位置从你的库存中选择。

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

通过考虑 Roblox 的核心用户界面元素和触控控制的可能性，你可以在 一个设计 中阻挡你的自定义用户界面元素，使其在设备间自适应。这一点很重要，因为这意味着你在更新游戏时不需要维护用户界面的不同版本。

为了演示这种方法，请查看以下两张图片，展示示例激光标签游戏如何为移动和 PC 设备阻挡自定义用户界面元素。这两张图片都包括：

• 基本形状来表示自定义用户界面，因为它允许设计在达到最终设计之前轻松经过多个迭代。
• 灰度着色，使眼睛能够跟随信息，而不被多彩的背景环境分散注意力。
• 聊天窗口和活跃玩家列表的打开状态，以查看它们在屏幕上占据的空间。
• 即使在 PC 设备上不必要，也为移动控制留出空间。

当你以这种方式设计布局时，同时考虑屏幕上可以存在多少用户界面元素，你是在为所有潜在的布局做好未来准备，以适应玩家的设备和工作流程。

在为你的布局阻挡用户界面元素时，请考虑以下几点：

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

开发用户流程

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

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

为玩家在你的游戏中可以做的所有事情开发用户流程很重要，因为这允许你评估你希望他们如何完成任务，并预测你可以在哪里缓解任何跟随自己路径的人的痛点。例如，如果你为示例激光标签游戏开发额外的用户流程，当玩家：

• 在结束条件满足之前退出回合时会发生什么？
• 在加入团队时离开游戏？
• 在回合中途接到电话？
• 在回合中断开连接少于 15 秒？

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

在为你自己的游戏开发用户流程时，请考虑以下几点：

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

在你最终确定线框设计后，是时候进入 Studio 让你的用户界面变为现实。