设计你的布局 是设计结构和信息通过 UI 在各个工作流程中通信的信息的流程。 此教程的关键步骤允许您在UI元素的布局上反复循环，发现痛点，并改善玩家的体验，以便在您投资时间和资源在问题性设计中不起作用的情况下优化您的体验。
使用 样本激光标记体验.rbxl 文件作为参考，此用户界面教程中的这个部分显示您如何在屏幕上结构您的 UI 元素，包括指南：
- 规划一个视觉层次结构，让玩家通过直观的引导玩家到达成功在您的体验中需要的功能和信息。
- 使用基本形状阻止 UI 元素，与 Roblox 的核心 UI 元素和触摸控控制一起查看你的 UI 元素的组成。
- 开发用户流程来满足玩家所需的动作来实现他们的目标。
完成此部分后，您将学习如何在 Studio 中构建和配置您的 UI，尊重您的艺术风格和网格。
设计视觉层次结构
视觉层次是组织结构，它通过重要度排序显示 UI 元素。 为您的体验中不同工作流程创建视觉层次是重要的，因为它将玩家设置为成功完成其目标，这是特别需要快速射击体验中玩家进度的快速游戏过程中目标变更的必要。
有效的视觉层次指南玩家通过屏幕上自然看到的位置完成工作流程。例如，样本激光标记体验的视觉层次必须指导玩家通过以下类别的 UI 元素在屏幕上导航，标记玩家在敌方团队的地图上：
- 体验目标的信息。
- 关于激光器的信息。
- 玩家状态的信息。
这些类别的位置在最终设计的屏幕上，从左到右依次展示其重要度。
- 第一个类别位于 顶部 ，因为它包含有关游戏胜利方式的最有意义的UI元素。
- 第二类占用屏幕空间的大部分，因为它作为聚焦点向玩家们的注意力，3D空间中的行动，并且有最大的意义在游戏中玩。
- 第三类是靠近 侧面 ，因为玩家可以在游戏中不会转移注意力的情况下阅读此边界信息。
对于某些体验类型，您只需要显示一个类别的信息，因为它是玩家在该工作流程中所需的唯一类型的信息。 但对于第一人称射击体验，玩家需要同时从多个类别中查看 UI 元素，因为它们都提供玩家成功的所需信息，例如他们的团队得分、冷却时间和是否标记出局。
当为自己的体验设计视觉层次时，请考虑以下方面：
- 如果您在屏幕上将不同类别的 UI 元素组合在一起，玩家就不会知道该在哪里找到他们需要的东西。 要帮助玩家导航您的体验，请 组合在同一个类别上的 UI 元素 。
- 如果屏幕上有太多类别，玩家可能不知道要注意哪些信息。为了避免让玩家感到困惑，请显示 UI 元素上下文以便为不同的工作流程提供有效的提示。
- 同样，如果每个类别的 UI 元素太多，它可能会让玩家无法理解如何完成操作或过程。因此，使用您的艺术风格为您的理想交互订单提供视觉重点很重要。
对于样例激光标记体验的视觉层次，请参阅以下表：
| 类别 | UI元素 | 视觉层次 |
|---|---|---|
| 体验目标的信息 |
|
|
| 关于激光器的信息 |
|
|
| 玩家状态的信息 |
|
|
了解有关优先级屏幕元素的更多信息，请参阅UI & UX Design。
在 UI 元素上方块
现在您有了一个视觉层次在意，您可以使用基本形状在单个 UI 元素上方块，以查看您自定义 UI 布局与 Roblox 核心 UI 在多个设备上的组合。 此过程允许您看到您需要修改您的设计，以便在所有屏幕尺寸上玩家都可以访问您的体验，例如在移动、平板、笔记本电脑和电视屏幕上。
在您开始之前，您需要确定 Roblox 的核心 UI 中可用的屏幕空间，并考虑到 Roblox 的核心 UI。例如，默认情况下，Roblox 会在每个体验中显示以下 UI 元素：
- 体验内的玩家列表。
- 角色的健康条。
- 角色的背包。
- 一个聊天窗口。
- 一个捕捉按钮。
- 一个弹出菜单的角色表情。
您可以 禁用 任何这些不满足游戏体验要求的元素，以节省屏幕空间为您自己的体验保留。例如，样例激光标签体验不需要背包，因为玩家只有单个激光标签的能力。但如果玩家可以选择多个激光标签，体验将核心用户道具保留，以确保玩家在 respawn 时总
除了 Roblox 的核心 UI 外，您还必须考虑 Roblox 的默认触摸控件的屏幕空间。例如，当玩家使用移动设备访问您的体验时，屏幕左下角会显示一个虚拟手柄，屏幕右下角会显示一个跳跃按钮。这确保玩家总是能够在键盘或控制器无法访问时也能导航您的体验。
通过考虑 Roblox 的核心 UI 元素，必须为您的体验提供游戏玩法的必要性，以及触摸控制的可能性，您可以在 一个设计 中 block 在您的自定义 UI 元素，这是适应设备的重要因素。 这很重要，因为它意味着您不需要为您的 UI 版本更新您的 UI 。
为了展示此方法，请查看以下两个图像，其中一个是样本激光标记体验在移动设备和电脑设备上的自定义 UI 元素的方块。两个图像包括：
- 基本形状代表自定义用户界面，因为它可以让设计在几个迭代之前轻松地实现最终设计。
- 实现眼睛可以跟随信息，而不受色彩背景环境的分散，以及矢量图形的颜色
- 打开聊天窗口和玩家列表的聊天窗口，以便看到聊天窗口在屏幕上的占用位置。
- 即使不是为 PC 设备而设置的移动控件也可以有足够的空间。
当您设计布局以此方式时，您将为所有潜在布局提供未来的防护，并根据玩家的设备和工作流程为所有布局提供保护。
当为你的布局添加 UI 元素时，请考虑以关注中/正在关注：
- 您在您的用户界面中的方块可以影响您的布局的组成。 瞄准平衡和对称 在您自定义用户界面元素与 Roblox 核心 UI 元素之间的数量和大小。
- 与某些移动和平板设备的底部角落很远的 UI 交互是不舒服的或不可能的。 在拇指触摸位置附近的“放置”交互元素。 * 当玩家通过您的环境导航时，3D空间可能会从您的屏幕用户界面中引起注意。 测试您的布局在多种可能的背景下 以确保您的屏幕用户界面元素清晰且可以辨认。
有关多个设备上的 UI 元素设计和块为多个设备，请参阅位置和大小 - 平台间因素。
开发用户流程
用户流是玩家在体验中可以选择的路径，例如选择武器、购买物品或治愈角色。用户流通常从您期望玩家开始任务的地方开始，并且以最终操作或角色达成结束。 有效的用户流还会考虑玩家可能要么自己完成任务，要么在体验结束时达成最终操作或成就。
下图显示玩家进入并玩样本激光标签体验的用户流程。当玩家打开体验时，他们会加入大厅。如果回合还没有开始，他们会等待回合循环开始，否则他们会选择他们的激光枪
开发出玩家在您的体验中可以做的一切的用户流程，因为它可以让您评估其想要完成任务的地方和方式，并预测其可以减轻任何跟随自己路线的人的痛点。例如，如果您开发额外的用户流程为示例激光标签体验，玩家：
- 在满足条件前退出一个回合？
- 在加入团队时离开游戏？
- 在回合中间接到电话？
- 在不到 15 秒内丢失他们的连接到回合？
通过将所有潜在的动作、场景或其他可能发生在玩家完成任务时的情况，您可以更好地确定布局您的用户界面元素对玩家的体验有多么不同，从而在 Studio 中实现您的设计。如果任务感觉直观、无obtrusive、方便，玩家更容易花时间在您的体验中，并在后续时间回来。
当开发用户体验时，请考虑以关注中/正在关注问题：
- 您想要玩家在您的体验中做什么，以及他们想要做什么可能会完全不同。最好使用 测试您的布局多种类型的玩家 来了解他们想要达成目标的路径。
- 流程图可能会在多个场景中尝试同时捕获时变得难以读取并不 эффектив。要将注意力集中在每个任务上，请 将流程图限制为一个主要任务 。
- 交互模式受到玩家是否使用触摸控制、游戏手柄或电脑鼠标与您的体验交互的情况而变化。如果您为多个设备设计，请 为每个设备开发独特的用户流程 ，以便您可以识别痛点并简化工作流程。
在您完成 Wireframe 的设计后，您可以移动到 Studio 并让您的 UI 来生。