构建活的界面: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 及服务生态向真正的智能化演进,同时以标准化机制构建开放生态,共同开启人机共生的崭新篇章。

相关推荐
无代码专家2 小时前
设备巡检数字化闭环解决方案:从预防到优化的全流程赋能
大数据·人工智能
兔子小灰灰2 小时前
jetson安装pytorch
人工智能·pytorch·python
weilaikeqi11112 小时前
拙诚育泽携手澳仕玛,夯实青少年AI科技竞争力
人工智能·科技
卷心菜加农炮2 小时前
MPK(Mirage Persistent Kernel)源码笔记(3)--- 系统接口
人工智能
Lan.W2 小时前
element UI + vue2 + html实现堆叠条形图 - 横向分段器
前端·ui·html
神算大模型APi--天枢6462 小时前
合规与高效兼得:国产全栈架构赋能行业大模型定制,从教育到工业的轻量化落地
大数据·前端·人工智能·架构·硬件架构
Coding茶水间3 小时前
基于深度学习的学生上课行为检测系统演示与介绍(YOLOv12/v11/v8/v5模型+Pyqt5界面+训练代码+数据集)
图像处理·人工智能·深度学习·yolo·目标检测·机器学习·计算机视觉
Channing Lewis3 小时前
脑机智能会成为意识迁移的过渡形态吗
人工智能
有为少年4 小时前
Welford 算法 | 优雅地计算海量数据的均值与方差
人工智能·深度学习·神经网络·学习·算法·机器学习·均值算法