UI设计器

产品优势

阿里云百炼的UI设计器集成了阿里云多端低代码开发平台魔笔的核心能力：

• 无需编码：UI 设计器提供可视化编辑器。您可以通过拖拽组件、配置路由和布局，快速构建页面，无需编码。

• 服务集成：支持集成多种外部资源，如百炼智能体、大模型、数据库和 HTTP 服务，灵活扩展应用能力。

• 权限管理：内置测试账号体系，支持钉钉、企业微信等一键登录。兼容 OIDC、OAuth2.0 等标准协议，并可通过权限组管理访问权限。

• 一键发布：默认支持一键发布至开发环境，通过内置域名即可访问。生产环境发布支持绑定自定义域名。

UI设计流程

支持范围

• UI设计器支持百炼智能体应用及工作流应用。

• UI设计器支持Web PC和H5端的应用界面开发。

• UI设计器需要与百炼应用在同一业务空间。

计费说明

UI设计器功能本身不计费，会产生费用的项目有：

• 模型推理（调用）：会话过程是基于阿里云百炼平台上的模型进行问答，因此会产生模型推理费用。您可以在模型列表与价格中查看模型推理单价。

  阿里云百炼提供了新人免费额度，额度消耗完后按 token 计费。

• 订阅服务套餐：订阅团队版或更高规格的套餐可以获得不同的功能特性及配额资源，具体请参见套餐规格。

• UI应用数据：UI设计过程中会使用到配额资源，例如文件存储和内置数据库。阿里云百炼默认提供1GB的免费文件存储容量及0.3GB的免费数据库容量（订阅了团队版或更高规格套餐的用户将获得更大的存储空间），用于存储和管理所有与UI设计器相关的静态文件资源。当资源使用量超出套餐配额或免费规格后，超出的部分会按量计费。

步骤一：创建并发布百炼应用

创建并发布智能体应用或工作流应用。

步骤二：创建API Key

API Key和百炼应用需要在同一业务空间。具体操作，请参见获取API Key。

步骤三：创建UI

创建UI的目的是生成初始页面结构，为后续添加组件和布局设计提供基础。

1. 单击创建UI，配置UI基本信息，单击下一步。

   • 名称及描述：自定义填写，建议填写具有实际意义的内容，以便于后续识别UI用途。

   • 上传图标（可选）：上传自有图标。

   

2. 选择UI模板，单击下一步。

   阿里云百炼平台提供了快速构建AI应用、AI基础对话和企业AI知识库Lite三种预置UI模板。这些预置模板中包含了现成的用户界面，您可以在此基础上进行二次开发和调整。空白模板则需要从零开始设计。

   以下教程以“企业AI知识库Lite”模板为例进行说明。

   模板名称	模板说明	本模板适用终端	模板预览
   空白模板	没有任何样式，需要从零开始设计。	PC、H5
   快速构建AI应用	使用 UI 设计器快速连接百炼智能体，帮助您熟悉 UI 设计器功能，快速构建并发布 AI 应用。	PC
   AI基础对话	最基础的 AI 聊天模板，该模板仅使用了一个聊天组件，逻辑相对简单。旨在帮助您快速掌握如何使用UI设计器搭建自己的AI聊天会话应用。	PC
   企业AI知识库Lite	AI知识管理工具，支持智能对话（PC/移动端）和数据分析能力。	PC、H5

3. 配置内置数据库表名称，实现内置数据库表与您期望使用的数据库表之间的映射。

   部分UI模板（例如，企业AI知识库Lite）自带内置数据库表，用于存储UI运行时产生的数据。例如kb_chat_list存储会话记录，kb_chat_msg存储消息，kb_view存储用户访问日志。这些表结构固定且用途明确，不支持修改。您仅能通过映射功能，将数据存储到期望使用的表中。

   • 若您希望使用默认表名，则期望使用的库表名称列保持默认值，无需修改。

   • 若您希望使用自定义表，则在期望使用的库表名称列中输入自定义的库表名称。如果自定义表不存在，系统自动创建并初始化数据（含默认配置及字段结构）。如果自定义库表已存在，则直接使用该库表并保留数据。此时，您需要确保已有库表的结构与模板自带的库表完全一致，否则使用已有库表可能导致数据读写错误或运行时异常。您可以单击模板中数据库表名称列的图标查看模板自带库表的结构。

   创建UI后，可在数据库中查看内置数据库表的详细信息。若库表中无数据，这可能是尚未使用UI进行会话。例如，kb_chat_list表需在用户问答后才会记录输入内容及会话ID。

   

4. 选择API Key及应用ID，单击确定完成UI创建。

   如果选不到API Key及应用，请确认您创建UI的业务空间是否与所需的API Key及应用位于同一业务空间。

步骤四：编辑UI

在左侧的组件面板中有可供拖拽使用的各类UI元素，如按钮、输入框、展示、导航栏等。您可以利用UI设计器的可视化编辑功能，通过拖放操作将所需页面组件添加到页面中，并根据业务要求进行位置调整与样式配置，完成页面搭建。

搭建UI时，如果您需要使用自有的图片及文件，可以提前在UI应用数据的文件页面上传，也可以在搭建过程中随时上传，上传的文件将保存在文件页面。具体操作，请参见UI应用数据。

步骤五：发布UI

1. UI搭建完成后，您可以通过设计器右上角的发布按钮将UI发布到开发环境或生产环境。

   

   环境对比	开发环境	生产环境
   环境说明	为开发人员编写、构建和初步测试提供的环境，同时应用后端会对应用使用开发环境的配置。 开发环境中发布成功的UI将在24小时后失效，失效之后想要访问开发环境的UI需要重新发布。	部署了终端用户实际使用的软件版本的环境，同时应用后端会对应使用生产环境的配置。 生产环境中发布成功的UI长期有效。
   是否收费	免费	需要订阅团队版（99元/月）或更高规格的套餐。具体请参见产品计费说明。
   是否需要配置环境信息	否	需要配置域名

2. 单击页面右上角的访问应用体验搭建的UI。

   

步骤六：分享UI

在UI发布成功后，您可能需要将UI分享给其他用户。UI包含会话页与后台管理，通过设置访问权限，可以让用户在会话中进行知识问答，但限制其访问管理后台。

1. 在UI设计器的左下角单击图标，在登录配置中打开允许匿名访问开关，并单击匿名用户权限组配置。

   

2. 选择环境，在应用访问权限页签中，勾选已经搭建的UI，单击权限设置。

   

3. 选择对用户开放的页面，单击确定。

4. 退出管理员账号，打开UI地址，验证权限配置是否生效。

5. 在UI设计器页面，鼠标悬停于已发布的UI上，单击环境部署，将应用地址分享给其他用户。

   

相关文档

关于UI设计的更多使用场景，请参见实践教程。