如何绘制UI结构

基础 · 使用文档

UI结构化数据绘制教程

什么是UI结构化数据

UI结构化数据是对手机屏幕界面的一种模板化描述。它用矩形、文本、按钮、滚动区域等基础元素来标记和描述屏幕上的各个UI组件的位置、大小和属性。

通过绘制UI结构化数据，您可以：

• 标记界面元素：记录按钮、输入框、图标等的位置和类型
• 创建UI模板：为常用页面创建模板，用于自动化识别
• 智能操作：配合"查UI结构化数据"节点，实现智能点击、等待、滚动
• 跨设备适配：基于UI结构而非固定坐标，提高脚本兼容性

进入方式

1. 在底部导航栏点击"仓库"按钮
2. 选择"UI结构"标签
3. 进入UI结构化数据管理列表

管理界面

创建文件夹

• 点击导航栏中间的"+"按钮
• 选择"文件夹"，输入名称创建
• 支持嵌套文件夹，用于归类管理

创建结构

• 点击导航栏中间的"+"按钮
• 选择"结构"，输入名称
• 进入编辑器开始绘制

文件夹/结构操作

• 单击进入文件夹或编辑结构
• 长按进入选择模式，可批量移动
• 重命名：点击编辑图标修改名称
• 删除：删除结构或文件夹（含子内容）
• 移动：将结构/文件夹移动到其他文件夹
• 导出：导出为JSON文件分享或备份
• 导入：从JSON文件导入结构

编辑器界面

顶部工具栏

• 返回：返回列表页
• 保存：保存当前结构

画布（中间区域）

• 白色背景的绘制区域，模拟手机屏幕
• 支持多点触控缩放和平移
• 所有元素在此绘制和编辑

工具面板（可拖拽）

点击画布上的任意位置可拖拽移动工具面板位置。

可用绘制工具：

元素绘制

1. 在工具面板中选择一个工具
2. 在画布上点击并拖动，从起始点拖到结束点
3. 松开手指，元素即创建完成
4. 元素会以半透明颜色填充显示

元素选择和编辑

单击选中

• 单击元素：显示变换框（边框+8个控制点）
• 变换框支持：移动（拖动中心）、缩放（拖动8个控制点）
• 选中后可直接拖拽调整位置和大小

双击编辑属性

• 双击元素：弹出属性面板
• 可编辑属性包括：

删除元素

• 在属性面板中点击删除按钮
• 或在选中状态下按删除键

遮罩层编辑（高级功能）

遮罩层允许您在真实手机屏幕上直接绘制和编辑UI结构元素，实现所见即所得的编辑体验。

开启条件

• 需要授予悬浮窗权限
• 编辑器内的服务会自动启动

使用方法

1. 点击悬浮的"开启蒙板"按钮
2. 屏幕上方会显示半透明遮罩层
3. 遮罩层上会显示已绘制的所有元素
4. 在遮罩层上可以：
   • 选择工具绘制新元素
   • 拖动调整元素位置
   • 双击编辑元素属性
   • 删除不需要的元素

遮罩层编辑的优势

• 在真实应用界面上绘制，定位更准确
• 可以切换到目标APP，边看边绘制
• 元素的坐标和大小与实际屏幕精确对应

关闭遮罩层

• 点击悬浮的"关闭蒙板"按钮
• 遮罩层关闭，所有编辑内容同步到画布

保存结构

1. 点击顶部的保存按钮
2. 输入结构名称（必填）
3. 输入描述（可选）
4. 选择保存的文件夹位置
5. 点击确认保存

结构将以JSON格式保存在本地数据库中，包含所有元素的位置、类型和属性信息。

导出与导入

导出

• 在结构列表页点击导出图标
• 选择导出格式和路径
• 导出为JSON文件

导入

• 在结构列表页点击左下角导入按钮
• 选择JSON文件
• 导入的结构会自动添加到列表中

在流程图中使用

绘制的UI结构可以在以下场景中使用：

1. 查UI结构化数据节点

在流程图编辑器中添加"查UI结构化数据"节点，可选择已保存的UI模板进行页面识别。

典型流程：

截图 → 查UI结构化数据 → [匹配成功] 智能点击/智能滚动
                         → [匹配失败] 条件处理

2. 智能节点

智能点击、智能滚动、智能等待、智能输入节点都可以通过UI元素选择器引用已保存的结构中的元素。

3. 页面状态识别

通过匹配当前屏幕与保存的UI模板，判断当前处于哪个页面，实现条件分支。

最佳实践

1. 命名规范：为每个元素使用有意义的名称（如"登录按钮"、"搜索框"）
2. 层次组织：容器包含子元素，父元素覆盖子元素范围
3. 适量元素：每个结构建议10-30个元素，过多会影响匹配性能
4. 特征元素：选择页面上独一无二的特征元素作为识别关键点
5. 避免重叠：元素之间避免大面积重叠，可能导致误识别
6. 定期更新：APP界面更新后，及时更新对应的UI结构模板