news 2026/1/14 2:49:26

构建活的界面:AIGUI底板的动态布局

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
构建活的界面:AIGUI底板的动态布局

在 AIGUI(AI Generated UI)的完整技术架构中,我们已经较为详细地介绍过八要素和元件体系,其中交付给用户的个性化、动态化的交互界面,最终是由“底板”来承载。八要素是 AIGUI 的设计语言,元件是这种语言中最基础的"词汇"——它们是构成界面的最小表意单位,比如"按钮"、"文本"等。底板则是将这些词汇组织成完整"句子"的“语法规则”,它定义了元件如何布局、组合,并赋予它们具体的功能场景(如聊天界面、信息展示界面等)。

底板,不只是容器,是智能界面的“骨架”

底板在 AIGUI 生态系统中扮演着至关重要的角色,它不仅仅是元件的简单容器,包含了对元件容器布局的描述、子元件的 id,以及部分需要作用于底板中包含的所有元件上的特殊样式描述。作为连接设计与功能的桥梁,AIGUI 的底板具有如下特点:

动态布局引擎

底板通过自适应,能够根据不同场景需求自动调整布局结构。例如,在会议场景下,底板会采用大尺寸、高信息密度的布局以方便内容展示;在专注办公时,则切换为简洁模式以减少干扰。这种智能适配能力使同一服务在不同办公场景下都能提供最优的交互体验。

服务的外衣

底板作为服务交付最终用户体验的最后一公里,可以根据服务的具体场景和功能,为其动态匹配最合适的外衣,以形成良好体验。当系统识别用户需要使用“人才招聘”服务时,对应的底板会智能调配岗位描述生成、人才筛选、笔试题生成,以及评估反馈等粒子服务的有机组合,形成针对该场景的、完整的交互界面。

统一体验的守护者

底板与元件采用同构的八要素数据结构,因此也具备强大的场景适应能力,能够确保其所包含的所有元件遵循一致的交互逻辑和视觉风格。在视频会议场景中,底板会协调摄像头、麦克风、聊天窗口等元件的状态变化,保证操作体验的连贯性。

底板的创作与进化:从手工编排到智能生成

底板现阶段是通过 DingOS 的 UI 编排平台,由开发者手工对底板和元件进行配置产生的,每个底板都对应着某个粒子服务。在 UI 编排平台中,可使用直观的拖放方式组合元件。下面,我们就以如何编排一个【消息回复】粒子服务为例,展示底板的编排过程。

添加底板布局和元件

对元件增加或修改属性


对布局属性进行调节,完成最终编排

完成设计后,底板文件便会上传至底板库,即最终完成了一个粒子服务的底板编排工作。

理想情况下 UI 编排平台应兼具设计和开发所需要的全部功能,在编排平台中设计完成的 UI 即可直接应用于粒子服务。为了适应传统的设计开发习惯,我们先行采用设计与开发协同的过渡方案:设计师通过专业工具完成界面设计并标注设计语义,工程师在 UI 编排平台导入设计文件后,系统自动解析语义并映射到底板配置,同时建立双向映射库确保一致性,这一过程既能保留现有工作流程,又能为 AIGUI 模型积累训练数据。

同时,我们也完成了全新的用户界面协议标准来解决上述问题,为大语言模型和丰富的 AI 服务提供统一的、高效的图形用户界面的构建能力。该协议即将上线,并提供开放 API 供广大开发者使用,请期待并码住!

通过该协议,任意第三方 AI Agent 或 LLM 的输出都能获得一致的视觉呈现和交互体验

已创建的底板成为训练AI模型的优质素材。随着粒子服务和底板的积累,系统能够自动生成针对新服务的初始底板方案,大幅提升设计效率。

未来,AIGUI 的底板系统将向两大方向演进:一是深度个人化,通过持续学习用户习惯,使界面智能适配更丰富的场景,实现"一人千面"的无缝体验;二是生态化进化,基于海量使用数据不断优化模板,形成可自主生长的底板知识网络,最终构建开放共享的设计生态系统。二者结合将推动 AIGUI 从工具进化为人类真正的数字同事。

至此,我们清晰地看到,AIGUI 不仅仅是一种全新的界面概念,更是一套由“八要素”设计语言塑造、以“元件”为基础构建单元、由“底板”强力驱动的完整智能交互范式。底板,作为这个范式中承上启下的核心“架构师”,其动态布局能力、服务联结纽带作用和统一体验守护职责,正是 AIGUI 实现“智能”与“个性化”的关键所在。

DingOS AIGUI 已通过 PSUIP(例子服务用户界面协议)框架实现,欢迎各界开发者伙伴下载体验。PSUIP支持SDK安装,支持React、Vue 等主流前端框架。

  • Step 1. 安装依赖:执行下列代码;
npm install psuip-renderer --save
  • Step 2. 编写代码:参考 PSUIP 官方文档(点击查看) 或上述示例,编写携带 UI 语义的内容;
  • Step 3. 查看效果:启动项目后,PSUIP 渲染引擎将自动解析内容并生成界面,无需额外配置。

最终,AIGUI 的价值远不止于设计层面。它将通过底板这个关键中枢,驱动界面不断理解用户、适应场景、协同服务,推动 DingOS 及服务生态向真正的智能化演进,同时以标准化机制构建开放生态,共同开启人机共生的崭新篇章。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/1/13 10:48:23

Web品质 - 重要的HTML元素

Web品质 - 重要的HTML元素 引言 在构建现代网页的过程中,HTML元素扮演着至关重要的角色。它们不仅是网页内容的基石,也是影响用户体验和搜索引擎优化(SEO)的关键因素。本文将深入探讨一些在网页设计中至关重要的HTML元素,并解释它们如何帮助提升Web品质。 HTML元素概述…

作者头像 李华
网站建设 2025/12/23 22:23:22

基于SpringBoot的智慧农家乐管理系统毕业设计项目源码

题目简介 在乡村旅游数字化、农家乐运营精细化需求升级的背景下,传统农家乐管理存在 “预订混乱、资源调度低效、客群分析缺失” 的痛点,基于 SpringBoot 构建的智慧农家乐管理系统,适配游客、农家乐经营者、乡村文旅管理员等角色&#xff0c…

作者头像 李华
网站建设 2025/12/27 18:14:44

基于微信小程序的执业药师题库系统毕业设计项目源码

题目简介在执业药师备考场景移动化、刷题需求个性化升级的背景下,传统题库存在 “适配性差、刷题无规划、错题管理低效” 的痛点,基于微信小程序构建的执业药师题库系统,适配备考考生、题库管理员、教研人员等角色,实现章节刷题、…

作者头像 李华
网站建设 2025/12/23 22:22:35

Vue——Vue 3 + Vite + Ant Design Vue + Pinia 数据库系统技术重难点解析

Vue 3 + Vite + Ant Design Vue + Pinia 数据库系统技术重难点解析 在开发数据库管理系统的过程中,我们遇到了一些技术难点,本文将围绕这些难点展开讨论,并提供相应的解决方案和示例代码。 一、复杂表单状态管理与字段权限控制 技术难点 数据库系统中的表单往往具有复杂…

作者头像 李华
网站建设 2025/12/23 22:20:22

概论统计思维导图

概率论与数理统计思维导图 一、概率论基础 1. 随机事件与概率 随机试验:可重复、结果已知但不确定样本空间(Ω):所有可能结果的集合随机事件:Ω的子集 基本事件:单元素子集必然事件(Ω):一定发生不可能事件(∅)&#x…

作者头像 李华