确定布局的网格

梳理布局 是在各种工作流程中设计通过 UI 传达的信息结构和流程的过程。教程的这一关键步骤可以让你对你的用户界面元素的布置进行循环，发现痛点，并在你投入时间和资源解决问题之前改善玩家的体验。

使用 样本激光标签体验.rbxl 文件作为参考，本节用户界面课程的这一部分向您展示如何在屏幕上结构您的 UI 元素，包括指导您：

• 计划一个视觉层次结构为您的用户界面，可以直观地引导玩家到他们需要成功在您的体验中的功能和信息。
• 使用基本形状在 UI 元素上阻止审查您的 UI 元素与 Roblox 核心 UI 和触摸控控制的组成。
• 开发用户流程来计算玩家需要采取的必要行动以实现目标。

完成本节后，您将学习如何在 Studio 中构建和配置尊重您的艺术风格和线框的 UI 。

计划视觉层次

视觉层次是一个组织结构，通过重要程度排序突出用户界面元素。为体验中的不同工作流程制定视觉层次结构是重要的，因为它为玩家设置成功实现目标的基础，这尤其适用于快速游戏的第一人称射击体验，在这些游戏中目标会在一瞬间发生改变。

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

1. 关于体验目标的信息。
2. 关于爆破器的信息。
3. 关于玩家状态的信息。

每个类别在最终设计中屏幕上的位置突出了它们的重要程度：

• 第一个类别靠近 顶部 ，因为它包含用于如何赢得游戏的最重要的用户界面元素。
• 第二类占用了靠近 中间 的屏幕空间的大部分，因为它作为聚焦点吸引玩家关注 3D 空间的行动，并且对于游戏的玩法具有最重要的意义。
• 第三类是靠近 侧 的，因为玩家可以阅读这些 peripheral 信息，而不会分散他们的注意力从游戏中。

对于一些经验类型，你只需要一次显示一个类别的信息，因为它是在那个工作流程中对玩家重要的唯一类型的信息。然而，对于第一人称射击体验，玩家需要同时看到多个类别的 UI 元素，因为它们都提供信息，玩家需要成功，例如他们的团队得分、他们的爆破器冷却期和他们是否被标记出轮。

当计划自己体验中的工作流程的视觉层次时，请考虑以关注中/正在关注因素：

• 如果你在整个屏幕上将不同类别的 UI 元素组合在一起，玩家将不知道在哪里寻找他们需要的东西。为了帮助玩家导航您的体验， 同一类别中的组 UI 元素合并 。
• 如果在一次屏幕上有太多类别，玩家可能不知道需要关注哪些信息。为了避免淹没玩家的混乱， 在不同的工作流程中显示 UI 元素的上下文 。
• 同样，如果每个类别中的 UI 元素过多，那么它可能会分散玩家对如何完成某个操作或过程的理解。因此，为了实现这一目标，很重要 使用你的艺术风格来提供视觉重点为你的理想互动订单 。

要对样品激光标签体验的视觉层次进行全面审查，请参阅以下表：

在 UI 元素中阻止块

现在你有一个视觉层次结构在心中，你可以使用基本形状来阻止单个用户界面元素来审查你自定义用户界面布局与 Roblox 核心用户界面在多个设备上的组成。这个过程可以让你看到需要修改你的设计以便它对玩体验使用的所有屏幕尺寸都有效，例如在移动设备、平板电脑、笔记本电脑和电视上。

在开始之前，您需要计算出 Roblox 的核心用户界面与您的自定义用户界面元素所需的屏幕空间。例如，默认情况下，Roblox 在每个体验中显示以下 UI 元素：

• 体验中的玩家列表。
• 角色的生命条。
• 角色的背包。
• 一个聊天窗口。
• 一个捕捉按钮。
• 角色表情的弹出菜单。

您可以禁用任何这些元素，它们不满足自己体验的游戏需求，以节省屏幕空间用于自定义用户界面。例如，示例激光标签体验不需要背包，因为玩家只有选择单个激光发射器的能力。然而，如果玩家可以一次选择多个爆破器，体验将禁用此核心用户界面以确保玩家重生时总是有空间选择爆破器选择器，然后提供另一个位置从您的道具中选择。

除了 Roblox 的核心用户界面外，您还必须考虑 Roblox 的默认触摸控件所需的屏幕空间。例如，当玩家使用移动设备访问您的体验时，虚拟拇指显示在屏幕左下角，跳跃按钮显示在屏幕右下角。这保证玩家总是能够导航您的体验，即使当他们没有键盘或控制器时。

通过考虑您体验游戏所需的 Roblox 核心用户界面元素和触摸控控制的可能性，您可以在 一个设计 中阻止自定义用户界面元素，该设计适应于所有设备。这很重要，因为它意味着你不需要在更新体验时保持分离的 UI 版本。

为了展示这一方法，请查看以下两张图，显示样品激光标签体验块在移动设备和 PC 设备的自定义用户界面元素中的样子。两个图像包括：

• 基本形状用于代表自定义用户界面，因为它允许设计在最终设计之前进行多轮迭代。
• 可以让眼睛跟随信息而不受彩色背景环境干扰的灰色填色
• 聊天窗口和活跃玩家列表的打开状态，以及聊天窗口来看它们在屏幕上占用多少空间。
• 即使移动控件不适合 PC 设备，也需要空间。

当你在设计布局时以这种方式思考多少 UI 元素可以同时在屏幕上存在时，你正在为所有潜在布局按照玩家的设备和工作流程进行未来防护。

当为布局中的 UI 元素禁用时，请考虑以关注中/正在关注内容：

• 在您的 UI 上阻止的位置和方式可能会影响布局的组成。 旨在平衡和对称 在 Roblox 的核心用户界面旁边的自定义用户界面元素的数量和尺寸上。
• 与某些移动设备和平板电脑的底部角落相距很远的用户界面互动不舒服或不可能。 将互动元素放置在易于达到的区域，靠近拇指的自然休息位置 * 当玩家在你的环境中导航时，3D空间可能会分散你在屏幕上的用户界面的注意力。 测试你的布局对各种可能的背景的敏感性，以确保屏幕上的用户界面元素仍然清晰可读 以确保屏幕上的用户界面元素仍然清晰可读

了解有关多个设备的 UI 元素设计和封锁时需要考虑的更多信息，请参阅定位和大小 - 跨平台因素。

开发用户流程

用户流是玩家在体验中可以采取的路径集合，用于完成任务，例如选择武器、购买物品或治愈角色。用户流通常从你期望玩家开始任务的地方开始，并以任务结束时玩家达到的最后行动或成就结束。此外，有效的用户流程还包括玩家可能自行采取的不寻常路径，以实现相同的目标。

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

为玩家在体验中可以做的一切开发用户流程很重要，因为它可以让你评估任务完成地点和方式，并预测你可以为任何遵循自己路径的人减轻痛点。例如，如果您为示例激光标签体验开发额外的用户流程，玩家在发生什么情况下：

• 在满足结束条件之前退出一轮？
• 加入团队时离开游戏？
• 在回合中接收电话呼叫？
• 在 15 秒内失去与回合的连接？

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

当为自己的体验开发用户流程时，请考虑以关注中/正在关注内容：

• 你想让玩家在你的体验中做的事情和他们想要做的事情可能完全不同。最好 测试你的布局以多种类型的玩家 来获得他们想要走的路径的理解。
• 流程图可能难以阅读且无效，如果它们尝试在图中同时捕捉多个场景。为了将注意力集中在每个任务上， 将流程图限制为一次只能执行一个主任务 。
• 互动模式会根据玩家是否使用触摸控控制、游戏手柄或计算机鼠标与您的体验互动而异。如果你为多个设备进行设计， 为每个设备开发独特的用户流程 以便你能识别痛点并简化工作流程。

在你完成网络图形设计之后，是时候进入工作室并让你的用户界面获得生命了。