UI设计师概述

成功创建应用程序后，您将进入 UI Designer 选项卡。

AppMaster 中的 UI 设计器旨在用户友好，让您轻松创建令人惊叹的 Web 应用程序页面。

通过其直观的拖放界面，您可以设计网页并无缝地填充内容，无需高级编码技能。

UI 设计器分为四个主要部分供用户交互：

1. 左工具栏
2. 顶部面板
3. 底板
4. 画布区
5. 属性面板

左工具栏

左侧的工具栏提供了用于构建网站的工具。通过单击位于此侧边栏顶部的图标，将显示以下面板：

• 用户界面元素列表
• 元素树
• 页面树
• 布局树
• 资产经理

UI 元素列表（快捷键： 1 ）

UI 元素列表 提供了可以通过从面板拖动来添加到画布区域的所有元素。

UI 元素根据其用途进行分类，从而更轻松地导航并找到适合您的应用程序的小部件。

为了快速转到该元素，您可以使用面板顶部的搜索栏。

元素树（快捷键： 2 ）

从 元素树 中，您可以管理和组织放置在 Web 应用程序的选定页面上的所有组件。

在这里，您可以与这些元素进行交互：

• 通过拖动在树之间移动项目，
• 重命名组件，
• 更改画布上元素的可见状态（隐藏/显示）。

使用面板顶部的搜索栏可在树中快速搜索元素。

页面树（快捷键： 3 ）

页面树 允许您组织和管理您的网站页面。您可以在此处创建新页面或文件夹。

在页面树中，您可以复制或删除页面或文件夹。

使用面板顶部的搜索栏可以快速搜索树中的页面或文件夹。

布局列表（快捷键： 4 ）

布局树 有助于管理页面布局。与在页面树中一样，您可以复制或删除布局。

使用面板顶部的搜索栏在树中进行快速搜索布局。

资产管理器（快捷键： 5 ）

资产管理器 有助于上传和组织资产（例如文档、图像和动画）以供您的网站使用。

您在开发过程中上传的所有资源都将保留在资源管理器中，并且可以重复使用而无需重新上传。

您还可以删除不再需要的任何资产。

顶栏

顶部栏提供了一组附加的视图设置。从左侧菜单按钮旁边开始，向右延伸，您将拥有以下一组工具：

• 当前文档： 显示您当前正在处理的页面或布局。
• 断点： 断点图标使您能够在不同的断点之间切换，以预览和修改您的网站在各种设备尺寸上的显示方式。
• 撤消和重做： 撤消和重做按钮可让您撤消或重新应用在设计器中所做的操作，例如应用样式或删除元素。还可以使用快捷键：用于撤消操作 - CRTL/⌘+Z 和用于重做操作 - CTRL/⌘+SHIFT+Z 。

底栏

底部面板允许您缩放或调整页面视图的大小。

在面板的左侧，您可以通过设置画布的高度和宽度来设置自定义页面分辨率。

在右侧，您可以控制比例：

• 放大或缩小
• 设置百分比比例
• 设置实际尺寸
• 使当前窗口适合可见区域

帆布

画布是您的交互式工作区。您可以在此处使用页面组件。您可以选择元素、重新定位它们以及直接在页面上编辑内容。

此外，您还可以在页面和应用程序之间复制 ( CRTL/⌘+C ) 和粘贴 ( CRTL/⌘+V ) 元素，或在当前页面内复制元素 ( CRTL/⌘+D )。

属性面板

设计器右侧的 “属性”面板 允许您自定义所选元素、布局或页面的视觉外观和行为。

属性面板包含 4 个主要面板：

• 外观面板
• 附加选项面板（可选）
• 媒体查询面板
• 业务逻辑面板

在面板的标题上，您可以通过单击项目名称来重命名所选项目、阅读说明，或者通过单击垃圾桶图标来删除项目。

外观面板

外观面板 允许您访问所选元素的显示静态内容和属性。您可以在相应的字段中输入或选择这些值，样式将立即应用于画布上的元素。

如果画布上未选择任何元素，此面板将显示当前页面或布局的设置。

附加选项面板

附加选项面板 适用于需要额外设置数据或选项的元素。

您可以根据所选组件设置数据源或手动输入选项。

媒体查询面板

媒体查询面板 使您能够覆盖每个定义的断点的项目属性。

业务逻辑面板

业务逻辑面板提供元素的所有触发器，并允许您在触发器触发时建立元素交互。