UI设计器

阿里云百炼UI设计器提供可视化的应用开发环境,支持通过拖放组件构建应用界面,并发布为网页UI应用。

产品优势

阿里云百炼的UI设计器集成了阿里云多端低代码开发平台魔笔的能力,具备以下核心优势:

  • 低代码:UI 设计器提供可视化编辑器,支持通过拖放组件、配置路由和布局,快速构建页面。

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

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

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

UI设计流程

准备工作

集成AI对话能力,需要创建并发布百炼智能体应用工作流应用,并获取用于调用阿里云百炼服务的API Key

重要

百炼应用、API KeyUI设计需要归属于同一业务空间

步骤一:创建UI

创建UI旨在生成初始页面结构,作为后续添加组件和布局设计的基础。

  1. 选择UI模板

    前往UI设计器页面,单击创建UI,在左侧选择UI模板。

    阿里云百炼平台提供四种预置模板(智能出行助手、智能体门户、AI基础对话、企业AI知识库Lite)及空白模板。预置模板包含预设组件和界面,支持直接修改或二次开发,空白模板则需要从零开始设计。

    模板简介

    模板名称

    模板说明

    支持终端

    模板预览

    空白模板

    没有任何样式,需要从零开始设计。

    PC、H5

    无预设组件,提供空白画布

    智能出行助手

    AI可基于自然语言对话生成个性化行程规划,并动态展示UI界面。

    PC

    智能出行助手

    智能体门户

    构建企业专属的智能体门户,实现多智能体的统一管理与快速上架。

    PC

    智能体门户

    AI基础对话

    基础AI聊天模板,可帮助快速上手UI设计器,搭建AI聊天会话应用。

    PC

    AI基础对话

    企业AI知识库Lite

    AI知识管理工具,支持智能对话(PC/移动端)和数据分析能力。

    PC、H5

    企业AI知识库Lite

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

  2. 填写基础信息

    • 应用名称应用描述:自定义填写,建议填写有意义的名称与描述,以便识别用途。

    • 选择API-KEY:选择百炼API Key

    • 选择应用-智能对话选择已发布的百炼应用。

    • 上传图标(可选):上传自有图标。

    如果无法选择API Key及百炼应用,请确认您创建UI的业务空间是否与所需的API Key及应用位于同一业务空间。

    填写基础信息

  3. 配置数据库表映射

    部分UI模板自带用于存储运行时数据的数据库表(如kb_chat_list会话记录),其结构固定且无法修改,可单击模板中数据库表名称列的image图标查看。

    配置映射时,指定库表名称即可。若该表在数据库中不存在,系统将按模板结构自动创建;若存在同名表,则直接使用并保留已有数据。

    注意:使用已有表时,务必确保其结构与模板内置表完全一致,否则可能导致运行时错误。

    UI创建完成后,可在数据库中查看表详情。若表中无数据,通常是因为没有进行相关操作。例如,kb_chat_list 表在用户发起问答后才会生成记录。

    配置数据库表映射

步骤二:编辑UI

通过拖放组件来搭建页面。左侧的组件面板中提供各类UI元素,包括按钮、输入框、展示、导航栏等。将所需页面组件添加到页面中,根据业务需求调整其位置和样式,完成页面搭建

如果需要使用自定义的图片或文件,可在搭建过程中随时上传,或可提前在文件页面上传。上传的文件将保存在文件页面,详情请参见UI应用数据

步骤三:发布与分享

  1. UI搭建完成后,可通过设计器右上角的发布按钮将UI发布到开发环境生产环境,发布后单击访问应用即可体验搭建的UI。

    发布UI

    5

    环境对比

    开发环境

    生产环境

    环境说明

    用于开发、调试和验证。

    部署了终端用户实际使用的软件版本的环境

    访问方式

    通过平台提供的域名访问

    支持通过平台提供的域名访问和设置自定义的访问地址

    有效期

    发布的 UI 24 小时后失效,需要重新发布才能访问

    发布的 UI 长期有效

    是否收费

    免费

    需订阅付费套餐,同时需要配置域名,详情请参见产品计费说明

  2. UI设计器页面,悬停于已发布的UI,单击环境部署

    UI设计器

  3. 应用地址可分享给其他用户,默认持有链接的阿里云用户均可访问。单击下线可以停止该应用服务。

    应用地址

配置访问权限(可选)

UI应用发布后,默认持有链接的阿里云用户可访问。也可通过设定访问权限,允许匿名用户访问,在会话页进行知识问答,同时限制其访问管理后台。

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

    匿名访问权限配置

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

    匿名访问权限配置权限组

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

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

计费说明

UI设计器功能本身不计费,但使用过程中可能涉及以下费用:

  • 模型调用费用:进行AI对话会产生模型调用费用,详情请参见模型列表与价格

    阿里云百炼提供新人免费额度,额度消耗完后按 Token 的使用量来计费。
  • UI应用数据:UI设计过程中会使用配额资源,例如文件存储和内置数据库。阿里云百炼默认提供1GB的免费文件存储和0.3GB的免费数据库容量,超出免费额度或套餐配额的资源使用量将按量计费

  • 订阅服务套餐:将应用发布到生产环境,需要订阅团队版(或更高级别)套餐,涉及月度费用,具体请参见套餐规格

实践教程

更多UI设计的使用场景,包括创建AI知识库、智能客服、在应用中增加 AI 助手等,请参见实践教程

常见问题

UI设计器页面编辑或设置UI时,提示“当前应用正在编辑中”应该怎么处理?

当前应用正在编辑中

这可能是因为当前UI已在其他窗口中打开,关闭后即可重新编辑,也可点击获取编辑权限强制关闭其他已打开窗口。