news 2026/9/24 11:03:54

构建活的界面: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/9/24 1:11:24

Elasticsearch 8.13.4 常用搜索操作完全指南

Elasticsearch 作为分布式搜索和分析引擎,提供了丰富的搜索能力。本文将详细介绍 Elasticsearch 8.13.4 中最常用的搜索操作,帮助您快速掌握其核心搜索功能。 一、基础概念回顾 在开始搜索操作前,让我们简要回顾几个核心概念: 索引…

作者头像 李华
网站建设 2026/9/20 23:13:00

零基础入门:12个月成为渗透测试员的完整路线图(必收藏)

进入渗透测试领域似乎是一件令人难以承受的事情——尤其是如果你之前没有任何经验的话。对我来说,渗透测试曾经看起来像是一个不可能实现的职业。但如果可以使用捷径来加速你的旅程呢?通过利用现有渗透测试人员的方法和个性中的弱点,你可以从…

作者头像 李华
网站建设 2026/9/21 13:05:16

基于微信小程序的植物百科平台系统毕业设计项目源码

题目简介在植物科普大众化、查询场景轻量化需求升级的背景下,传统植物百科存在 “信息检索难、交互形式单一、场景适配性差” 的痛点,基于微信小程序构建的植物百科平台系统,适配植物爱好者、园艺从业者、学生等角色,实现植物信息…

作者头像 李华
网站建设 2026/9/20 21:28:36

拆解鸿蒙 IoT 接入:网络通信、分布式软总线和能力调用是怎么配合的

摘要 随着物联网设备数量的快速增长,设备之间“能连上”已经不是问题,如何低成本、低复杂度、稳定地接入和管理设备,才是开发中的核心难点。 在传统模式下,IoT 设备往往只是一个“外设”,需要开发者自己处理协议、连接…

作者头像 李华
网站建设 2026/9/20 10:28:43

基于SpringBoot的社区居民服务系统的设计与实现毕业设计项目源码

项目简介在社区服务精细化、居民需求多元化的背景下,传统社区管理存在 “服务响应慢、需求对接散、数据统计难” 的痛点,基于 SpringBoot 构建的社区居民服务系统,适配居民、网格员、物业人员、社区管理员等角色,实现便民服务、事…

作者头像 李华