> ## Documentation Index
> Fetch the complete documentation index at: https://docs.coze.cn/llms.txt
> Use this file to discover all available pages before exploring further.

用户界面编辑器作为扣子编程的前端低代码搭建功能，专为用户界面的创建和编辑而设计。用户界面编辑器由资源面板、画布以及属性面板组成。
![Image=823x462](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/243a90acfd2d484ab7e1cd7bca729581~tplv-goo7wpa0wc-image.image)
## ①资源面板 {#320492c7}
如上图所示，标号为①的区域是资源面板，它位于界面的最左侧。资源面板由组件栏、模版栏、结构栏和数据栏组成。
### 组件栏 {#aa559433}
组件栏用于存放各种 UI 组件，包含了按钮、文本框、列表、滑动条等多种预制的 UI 组件。你可以通过拖拽操作，将这些组件添加到画布中，实现快速搭建用户界面。
### 模版栏 {#5cc6d27f}
模板栏提供了一系列预设的页面模板，这些模板覆盖了常见的应用场景，你可以选择一个模板来搭建用户界面，然后根据需要进行个性化修改。
### 结构栏 {#e909d1d8}
结构栏用于浏览和管理用户界面编辑器中的不同页面和图层。

* 页面浏览：导航栏包含了一个页面列表，列表展示了低代码应用中包含的所有页面。你可以通过点击列表中的项来快速切换不同的页面，进行编辑或查看。
* 图层管理：导航栏还提供了图层管理功能。你可以拖动元素以重新排序图层。图层管理对于搭建复杂的页面元素至关重要，支持控制不同元素的显示顺序和相互关系。

### 数据栏 {#bced2db9}
数据栏用于设置当前低代码应用专属的界面变量。界面变量主要用于存储低代码应用页面的临时数据，实现组件与页面之间的信息传递以及交互联动。界面变量的作用范围覆盖当前低代码应用内的所有页面。
## ②画布 {#6e6824d5}
如上图所示，标号为②的区域是画布，它位于界面的中心。你可以拖拽组件到画布、调整组件大小和位置、设置布局和层次结构，画布还支持多选操作，使得批量调整和对齐变得简单。
## ③属性面板 {#1f3519f5}
如上图所示，标号为③的区域是属性面板，它位于界面的最右侧。属性面板用于调整选中组件的样式属性和交互事件。当你在画布中选中一个组件时，属性面板会显示该组件的所有可配置项，你可以通过属性面板精细化配置每个组件的外观和动作，实现高度定制化的页面设计。