打开一个 UI 资产后，您将打开 UI 编辑器的窗口，会看到以下界面：
【UI_Editor_Window001.png】
- 顶部工具栏（Top Tool Bar），其中包含 UI 编辑器的一系列常用功能，比如撤销、重做和保存。
- UI 控件窗口（UI Controller），一个控件列表，列出了可用的控件类型。您可以将其中的控件拖放到 UI 画布窗口 中，生成该控件的 UI 对象实例。
- 层级窗口（Hierarchy），显示 UI 对象（UI Object）的父子级结构。您还可以将控件拖动到此窗口生成 UI 对象。
- UI 画布窗口（UI），这是 UI 布局的可视化呈现。在此窗口中可以操纵已拖动到 UI 画布窗口 中的 UI 对象。
- 项目窗口（Project），可以在其中访问可在项目中使用的资产库，用于便捷地为 UI 对象引用资产。使用方法请参阅 项目窗口 章节。
- 检视窗口（Inspector)，显示选中 UI 对象或资产的属性。
由于 SandMod 编辑器的界面可以进行高度化的自定义，您可以任意改变编辑器的界面布局。上面所演示的是 UI 编辑器的默认界面布局，如果您 UI 编辑器的布局与上图有出入且想改为默认布局，请在菜单栏依次点选 窗口（Window）> 布局（Layout）> 加载布局（Load Layout）> 默认（Default） 加载默认布局。
顶部工具栏（Top Tool Bar）
顶部工具栏（Top Tool Bar）用于在 项目窗口（Project）中 保存（Save）并找到 UI 资产。
【UI_Editor_Window002.png】
UI 编辑器窗口的顶部工具栏包括以下按钮和菜单：
| 名称 | 图标 | 描述 |
|---|---|---|
| 保存（Save） |  | 点击按钮后，正处于打开编辑状态的 UI 内容，将同步至此 UI 资产中。 |
| 撤销（Undo） |  | 点击按钮后，返回上一步的操作，但是无法返回保存前或资产新建前的操作。 |
| 重做（Redo） |  | 点击按钮后，恢复前一次撤销的操作。 |
| 生成 TS 脚本 （Generate TS Code） |  | 点击按钮后，将在指定位置生成获取当前 UI 所有 UI 对象（UI Object）并保存在私有变量中的 Type Script 脚本。关于 UI 自动生成脚本的使用方法，请参阅 UI 自动生成脚本 章节。 |
UI 控件窗口（UI Controller）
UI 控件窗口（UI Controller）中列出了所有可用的控件类型和本游戏项目中的 UI 资产（UI Asset）。
【UI_Editor_Window003.png】
您可以通过搜索框搜索控件类型的名字或项目中 UI 资产的名字直接找到对应的控件类型或 UI 资产。
【UI_Editor_Window004.png】
您也可以通过折叠条目快速找到对应的控件类型或 UI 资产，其中每个折叠条目的分类标准如下：
| 名称 | 描述 |
|---|---|
| 通用（General） | 通用折叠条目列内列出了 SandMod 提供的标准内置控件类型，都是一些常用的控件类型。 |
| 布局（Layout） | 布局折叠条目内都是不同布局类型的控件类型。 |
| 面板（Panel） | 面板折叠条目内列出了不同样式的面板控件类型。 |
| 输入（Input） | 输入折叠条目内囊括的控件类型都是玩家可以通过该控件类型输入特定值，游戏项目可以根据玩家输入的值进行不同的逻辑反馈。 |
| 用户文件（User File） | 用户文件折叠条目内囊括了该游戏项目中所有的 UI 资产。双击该折叠条目内的 UI 资产可以打开新的 UI 编辑器界面并打开对应的 UI 资产。 |
NOTE
关于 通用（General）、布局（Layout）、面板（Panel）、输入（Input）折叠条目内的控件类型功能和编辑方法，请参阅 控件类型 章节。
要将控件类型实例化为 UI 对象（UI Object），可通过以下方法：
方法一：
长按鼠标左键，将其拖到 层级窗口（Hierarchy）中。这样的方式将控件类型实例化为 UI 对象同时可以通过 层级窗口 定义 UI 对象的父子级关系。
【UI_Editor_Window005.gif】
方法二：
长按鼠标左键，将元素拖到 UI 画布窗口（UI）上。 这样的方式将控件类型实例化为 UI 对象同时可以通过 UI 画布窗口 定义 UI 对象的位置。
【UI_Editor_Window006.gif】
层级窗口（Hierarchy）
层级窗口（Hierarchy）包含表示当前 UI 资产（UI Asset）的 UI 对象（UI Object）层次结构树视图。UI 对象根据其 对象名称（Object Name, API 为 name）属性出现在层级树中。您可以选中某个 UI 对象并对其单击鼠标左键来快速重新命名。
【UI_Editor_Window007.png】
您可以使用 层级窗口 执行以下操作：
- 选择要查看或编辑的 UI 对象。
- 重新排序 UI 对象。
- 打开上下文菜单对 UI 对象进行剪切、复制、删除或展开层级。
关于 层级窗口 的更多操作方法和介绍，请参阅 层级窗口 章节。
UI 画布窗口（UI）
UI 画布窗口（UI）在可实时可视化地调整大小的画布上显示 UI 资产（UI Asset）内容，并且您可以在画布上实时编辑 UI 资产 的内容来改变 UI 的最终显示效果。UI 画布窗口显示的内容为已拖动到 UI 画布窗口或 层级窗口（Hierarchy）中的 UI 对象（UI Object）。
【UI_Editor_Window008.png】
关于 UI 画布窗口 的编辑方法和操控方法，请参阅 UI 画布窗口 章节。
检视窗口（Inspector）
检视窗口（Inspector）的功能、操作方式可参考 检视窗口基础 章节。但是在 UI 编辑器中 检视窗口 显示的内容略有不同，而且选中不同控件类型的 UI 对象（UI Object）显示的属性也不一样。
【UI_Editor_Window009.png】
在 UI 编辑器 的 检视窗口 可编辑以下内容：
- 可设置 UI 对象的名字和启用禁用关系。
- 矩形变换（Rect Transform）包含了锚点设置和位置、旋转、缩放等 UI 变换信息。
- 会根据选中的 UI 对象的控件类型显示相关的设置属性。
关于 检视窗口 在 UI 编辑器的运用，请参阅 UI 编辑器检视窗口 章节。