> ## 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.

本教程以搭建一个`AI 翻译应用`的用户界面为例，为你演示如何搭建用户界面。
## 前提条件 {#fc38ae91}
你已经通过工作流编排完后端业务逻辑。本教程中的 AI 翻译应用，主要是使用大模型实现多语言翻译，所以只需要创建一个包含大模型节点的工作流即可，详情请参考[步骤三：编排业务逻辑](/guides/app_quickstart#70b1913c)。
![Image=1684x370](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9d741c3025be44c9883b465e4e1b2ab5~tplv-goo7wpa0wc-image.image)
本教程搭建用户界面的步骤如下图：
![Image=569x134](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a88137b5bcbf4621bf1599591ba76509~tplv-goo7wpa0wc-image.image)
## 步骤 1：设计用户界面 {#e138d830}
首先，你需要根据低代码应用的功能设计用户界面，规划用户界面的组件功能和布局。
这个 AI 翻译应用的核心功能是能够满足用户的文本翻译需求，并支持用户选择指定翻译的语言。翻译功能可以通过创建一个包含大模型节点的工作流来实现。
基于以上功能规划，这个低代码应用的用户界面需包含以下组件：

* 一个让用户可以输入翻译内容的区域
* 一个让用户选择翻译语言的列表
* 一个翻译按钮来触发翻译操作
* 一个展示翻译结果的内容区域

完成组件功能设计和规划后，就可以开始用户界面的搭建了。
## 步骤 2：搭建用户界面 {#411641e9}
扣子编程提供了可视化的用户界面搭建能力，你可以通过拖拉拽的方式搭建一个用户界面，无需写一行代码。
参考以下操作，搭建网页端翻译应用的用户界面。

1. 在应用 IDE，单击页面上方的**用户界面**页签。
2. 选择**桌面网页**，然后单击**开始搭建**。
   ![Image=391x289](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4eed38a702614651a37052cd38ecea2f~tplv-goo7wpa0wc-image.image)
3. 添加页面组件，完成页面搭建。
   翻译页面由3个块级组成，具体使用的组件和配置请参考下述步骤。
   ![Image=499x225](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/df734e7c2ecf4029a70a47b18289e091~tplv-goo7wpa0wc-image.image)

### 1 搭建页面结构 {#iVmIjiFysH}
整体上 AI 翻译应用的用户界面由上下两个部分组成。

* 上面是标题区域。
* 下面是功能区域。功能区域又分为左右两个区域。

想要实现这样的页面结构就需要使用容器组件。容器组件是用来进行页面布局的，可以把页面划分成不同的区域和排列顺序。容器组件中可以添加其他各种组件例如文本组件、按钮组件等。
参考以下操作，完成页面布局：

1. 确认画布的**排列方向**为**纵向**。
   ![Image=625x354](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/64f745e3a671499d9d30f32005189637~tplv-goo7wpa0wc-image.image)
2. 在**组件**面板中，找到**布局组件 > 容器**组件，然后将容器组件拖入到中间的画布中。
3. 在画布中，选中拖入的**容器**组件。组件名称为`Div1`。
   ![Image=628x197](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bf999c15891f47619fbc1a638a5b2ef9~tplv-goo7wpa0wc-image.image)
4. 参考以下配置，修改容器组件`Div1`的属性。
   <!-- @cols-width: 384,435 -->
   | | | \
   |**Div1的属性设置** |**示例** |
   |---|---|
   | | | \
   |设置尺寸和布局。 |\
   | |\
   |   * 将**宽度**设置为**填充容器**（即100%）。 |\
   |   * 将**高度**设置为60 px。 |\
   |   * 将**排列方向**设置为**横向**。 |![Image=2366x659](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7fa6c411e444470bac63657320df4c1f~tplv-goo7wpa0wc-image.image) |\
   | | |
   | | | \
   |设置样式。 |\
   | |\
   |   * 找到**填充**属性，然后单击删除图标去掉背景色。 |\
   |   * 将边框设置为灰色。 |![Image=1926x1073](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/65b4bb3958a0414d943a9bde537d2d5d~tplv-goo7wpa0wc-image.image) |

5. 再拖入一个**容器**组件用来组织功能区，并在画布中选中该组件。组件名称为`Div2`。然后选中该组件，参考下表中的属性配置进行修改。
   ![Image=674x210](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a6fb3b1b2b7748d192a2e937c446dcf0~tplv-goo7wpa0wc-image.image)
   <!-- @cols-width: 384,460 -->
   | | | \
   |**Div2的属性设置** |**示例** |
   |---|---|
   | | | \
   |   * 设置尺寸，将**宽度**和**高度**都设置为**填充容器**（即100%）。 |\
   |   * 排列方向设置为**横向**。 |\
   |   * 设置样式。找到**填充**属性，然后单击删除图标去掉背景色。 |\
   | |\
   | |![Image=1958x1000](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9881e8b68b67492d9cc209f3bfcd2080~tplv-goo7wpa0wc-image.image) |

6. 向画布的容器组件`Div2`的左侧区域中，拖入一个容器组件`Div3`，用来组织左侧的内容翻译区域。然后选中该组件，参考下表中的属性配置进行修改。
   ![Image=585x228](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/744b0fd95164418ba4667fbbb3c19f40~tplv-goo7wpa0wc-image.image)
   <!-- @cols-width: 301,540 -->
   | | | \
   |**Div3的属性设置** |**示例** |
   |---|---|
   | | | \
   |   * 将**宽度**设置为50%。 |\
   |   * 将**高度**设置为固定值550px。 |\
   |   * 删除背景色。 |![Image=1950x935](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/fc1500f9a8cb4e2aab27c2711e3d1db5~tplv-goo7wpa0wc-image.image) |

7. 向画布中容器组件`Div2`的**右侧**区域中，拖入一个容器组件`Div4`，用来组织右侧的翻译结果区域。然后选中该组件，参考下表中的属性配置进行修改。
   ![Image=630x272](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/817508c7e3504d97bc0ddf2e212e8d19~tplv-goo7wpa0wc-image.image)
   <!-- @cols-width: 303,535 -->
   | | | \
   |**Div4的属性设置** |**示例** |
   |---|---|
   | | | \
   |   * 将**宽度**设置为50%。 |\
   |   * 将**高度**设置为固定值550px。 |\
   |   * 删除背景色。 |![Image=1993x886](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4b8affa97aeb4523a8fe126039ef5c37~tplv-goo7wpa0wc-image.image) |


至此，我们就完成了这个翻译应用的页面结构搭建。
![Image=444x337](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a1de244728114490b385e64f9ef01fbf~tplv-goo7wpa0wc-image.image)
### 2 搭建页面标题 {#qMwI1AJGf3}
参考以下操作，搭建页面的标题区域。

1. 在**组件**面板中，找到**推荐组件 > 文本**组件，然后将文本组件拖入到顶部的容器组件`Div1`上。
   ![Image=680x127](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4d75b344ba8d4eeb91a4ddd65ec4754b~tplv-goo7wpa0wc-image.image)



2. 在画布中，选中拖入的**文本**组件，然后在右侧的**属性**面板中设置文本内容，字号大小等。
   ![Image=287x214](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d57632d455a146cabdba6796611918b8~tplv-goo7wpa0wc-image.image)

至此，你已经完成了标题区域的搭建。
![Image=541x118](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1578e477f1d54407bb0a86224b034534~tplv-goo7wpa0wc-image.image)
### 3 搭建左侧翻译内容区 {#tVMiJFa8Ms}
参考以下操作，搭建翻译内容区域。

1. 在**组件**面板中，将表单组件拖入到画布的容器组件`Div3`中，然后选中不需要的组件并按下 Backspace ** 键进行删除，只保留文本组件、选择组件和按钮组件。
   ![Image=537x336](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/de19dc2083ae4bbcb146edd6867dc99a~tplv-goo7wpa0wc-image.image)
2. 选中表单组件，参考下表修改它的属性。
   <!-- @cols-width: 303,530 -->
   | | | \
   |**Form表单组件的属性设置** |**示例** |
   |---|---|
   | | | \
   |   * 将**宽度**和**高度**都设置为填充容器。 |\
   |   * 删除边框。 |![Image=1950x1189](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/14a339652df64071b6843871e81573c7~tplv-goo7wpa0wc-image.image) |

3. 选中表单内的文本输入框，然后将其拉伸它的大小，再修改属性配置。
   * **标签内容**和**占位文案**都修改为：请输入翻译内容。
   * **宽度**设置百分比 100%。
      ![Image=606x306](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a90854e0f5cc4093b26506a6a32b3051~tplv-goo7wpa0wc-image.image)
4. 选中表单组件中的**选择**组件，然后修改它的属性配置。
   * 标签内容修改为：目标语言。
   * 选项设置：保留两个选项，分别为英语和日语。确保名称和选项值正确。
      ![Image=613x330](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/54d4a3b890934255a4d3ea4bbfcb4bb2~tplv-goo7wpa0wc-image.image)
5. 选中表单组件中的**按钮**组件，将**内容**修改为**开始翻译**。
   ![Image=521x262](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8b0a6e6cca374e759098bb1728dbd72f~tplv-goo7wpa0wc-image.image)

至此，我们就完成了左侧的翻译内容区域的页面功能搭建。
![Image=400x303](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2d5ceb7831cf43248abfc5b4412dbd70~tplv-goo7wpa0wc-image.image)
### 4 搭建右侧翻译结果区 {#gyQ3YJyuQs}
参考以下操作，搭建翻译结果区域。

1. 在**组件**面板中，将 Markdown 组件拖入到画布的容器组件`Div4`中。
   ![Image=635x370](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e57cd6e8f05d42a6ac247faa45430b22~tplv-goo7wpa0wc-image.image)
2. 选中新拖入的组件，配置以下属性。
   * **内容**：删除已有内容，输入 Markdown 格式内容：`###### 翻译结果`。
      ![Image=471x177](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3f4504b5e7ae42bda02a8c4475c17cab~tplv-goo7wpa0wc-image.image)
   * **高度和宽度**：设置为**填充容器**。
   * **圆角**：设置为**10。**
   * **内边距**：设置为**20。**
   * **外边距**：设置为**0**。
   * **边框**：设置为**灰色。**
      ![Image=428x266](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b081929f11d74906a1d533b29e28824c~tplv-goo7wpa0wc-image.image)

至此，我们就完成了翻译应用的用户界面搭建，可单击**属性**面板上方的**预览**选项进行页面预览。
![Image=682x322](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0b5e702d9285421b8f3b537b24ba6694~tplv-goo7wpa0wc-image.image)
### 5 添加事件 {#bN9B67ZkEM}
搭建好页面后，就可以通过配置事件和添加数据实现业务逻辑与用户页面的联动了。
本场景中，预期是希望用户点击开始翻译时，触发翻译工作流，并且将用户输入的译文和目标语言作为输入传入给工作流。所以，需要为**开始翻译**按钮组件添加一个点击事件。

1. 在**用户页面**页签下，单击已添加的**开始翻译**按钮组件，然后在配置面板中选择**事件**，最后单击**新建。**
   ![Image=512x314](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bbf3b970925448a6b1266c54efbd8fdc~tplv-goo7wpa0wc-image.image)
2. 事件类型选择**点击时**。
3. 执行动作选择**调用工作流**，然后选择已经创建的工作流。选择工作流后，会自动展示所选工作流配置的输入参数。
4. 将鼠标悬浮至content参数的文本框上，然后单击右侧的配置图标。
   ![Image=209x333](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/30b1ad49ea4a458ab7c1c83cdd8c54d4~tplv-goo7wpa0wc-image.image)
5. 在展开的配置面板中，找到用户输入翻译内容的组件 (Textarea)，选择表单值作为工作流中content参数的值。配置完成后关闭参数配置面板。
   ![Image=689x281](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e23327e3d44c4a698de408aec9d4858b~tplv-goo7wpa0wc-image.image)



6. 重复上述操作，将目标语言组件的值作为工作流lang参数的值。
   ![Image=697x300](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/619801ce7cdf44efbee79cc8815477dc~tplv-goo7wpa0wc-image.image)
   1. 单击**确认**完成工作流的调用。
7. 配置翻译结果数据。
   最后需要将工作流返回的翻译内容展示在用户页面中。
   1. 在画布中，选中最后添加的Markdown组件。
   2. 在右侧的**属性**面板中，将鼠标悬浮至内容文本框内，然后单击出现的配置图标。
      ![Image=573x360](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/be9e6ab9e40a45fabcd6ee0f0436a84e~tplv-goo7wpa0wc-image.image)
   3. 在展开的面板中，首先在翻译结果下增加一行，然后选择工作流的返回数据作为翻译结果展示给用户。配置完成后，关闭配置面板。
      ![Image=597x276](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/aed9f7538eb54bfbaf4c824d8d0e6fc5~tplv-goo7wpa0wc-image.image)



## 步骤 3：预览用户界面 {#3fd67bfc}

1. 单击页面右侧配置面板的**预览**选项，查看页面效果，并进行测试。
   ![Image=274x301](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/194e03b5921f495b98f72d7a89924509~tplv-goo7wpa0wc-image.image)
2. 在预览页面，进行测试。
   :::tip 说明
   如果测试结果不符合预期，重新修改界面布局后，需要手动刷新 IDE 页面，再单击**预览**进行测试。
   :::
   ![Image=2134x990](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8d386ce4058d4015a908eb347de04142~tplv-goo7wpa0wc-image.image)