快速搭建移动端用户界面

本教程以搭建一个AI 助手的用户界面为例，为你演示如何搭建移动端的用户界面。

前提条件

你已经通过工作流编排完后端业务逻辑。本教程中的 AI 助手应用，主要是通过大模型回答用户的问题，所以只需要创建一个包含大模型节点的对话流即可，详情请参考步骤三：编排业务逻辑。

本教程搭建用户界面的步骤如下图：

步骤 1：设计用户界面

在开始开发前，你需要设计 AI 助手的用户界面。

AI 助手的界面应是类似通讯软件的对话式页面，以便用户能够与 AI 助手进行互动。用户界面编辑器提供了 AI 对话组件，你可以直接使用这个组件来快速搭建 AI 助手用户界面，从而简化开发流程。

步骤 2：搭建用户界面

扣子提供了可视化的用户界面搭建能力，你可以通过拖拉拽的方式搭建一个用户界面，无需编写一行代码。

参考以下操作，搭建 AI 助手应用的用户界面。

1. 在应用 IDE，单击页面上方的用户界面页签。
2. 选择页面类型。
   扣子应用支持发布为小程序等移动端应用，也可以发布为 Web 页面等网页应用。这里我们选择小程序和 H5。
   
3. 搭建页面布局。
   AI 助手应用只有一个简单的对话窗口，所以我们只需要搭建一个页面并添加 AI 对话组件即可。
   1. 在画布中选中页面，并在右侧 Page1 配置面板中关闭导航栏。
      移动端页面默认开启首页底部的导航栏，AI 助手应用只有一个页面，所以需要手动关闭底部的导航栏。
      
   2. 在组件面板中，找到 AI 组件 > AI对话组件，然后将 AI 对话组件拖入到画布中。
      
4. 设置组件属性。
   1. 在画布中，选中拖入的 AI对话组件。组件名称为Chat1。
   2. 在 Chat1 组件配置面板中，修改以下配置：

      配置	说明	示例
      对话流	选择步骤三中搭建的对话流，也就是 ai_assistant。
      头像	单击上传，为你的 AI 助手上传一个头像。
      bot名称	此名称会作为 AI 助手的名称显示在对话页面。默认为 coze Assistant，此处我们修改为 AI 助手。
      开场白	AI 助手的开场白，可以直接使用以下示例文案。 你好！我是你的专属 AI 助手。无论你需要查询信息、提供建议、还是简单的聊天，我都在这里为你服务。 告诉我你的需求，让我们开始愉快的对话吧！
      开场白预置问题。	AI 对话组件预置了三个开场白问题，这里我们改为以下三个开场白问题： 双子座有什么特点 推荐一本好书 想去新疆，有什么行程建议吗

配置效果如下：

步骤 3：预览用户界面

完成上述所有配置后，单击预览查看整体功能并进行体验。

页面会展示 AI 助手在移动端的页面预览效果，你可以在页面下方的输入框中输入一段文字，并按回车键发送消息。AI 助手会立即回复你的问题。