八要素描述模型

八要素描述模型是 PSUIP 核心技术架构的基石，将复杂的 UI 界面科学地拆解为八个可量化的基础维度，为 AI 生成界面提供了结构化的表征方式。

模型概述

定义与原理

八要素模型将 UI 界面拆解为 “形（Shape）、度（Scale）、色（Color）、构（Layout）、质（Material）、字（Font）、动（Motion）、音（Sound）” 八个维度，每个维度下包含若干可量化子属性。

理论基础

该模型源于认知科学对人脑视听皮层的研究发现：大脑处理多媒体信息时，依序分解为与上述八要素高度对应的特征层级。基于此认知规律，AIGUI 采用该模型实现结构化表征，使生成界面更贴合人脑认知习惯。

八要素维度详解

要素分类与属性

要素	含义	子维度举例	元件属性示例	数据示例 Token
形	元件与容器的几何形状	圆角、边框形状等	`shape-borderradius-state-default`	`{shape.borderradius.medium}`
度	元素与容器的尺寸及间距	间距、内外边距等	`scale-padding-state-default`	`{scale.padding.tight}`
色	颜色及不透明度	背景色、文字色、描边色等	`color-bg-state-hover`	`{color.primary.brand3}`
构	布局与排版	对齐方式、换行属性、弹性伸缩等	`layout-display-state-default`	`{layout.display.flex}`
质	材质效果	海拔、阴影等	`material-elevation-state-default`	`{material.hierarchy.ground}`
字	文本排版	字体、字号、字重等	`font-fontsize-state-active`	`{font.size.xl}`
动	交互动效	过渡时间、延时等	`motion-duration-state-default`	`{motion.duration.fast}`
音	音效反馈	音量、循环次数等	`audio-volume-state-default`	`{audio.volume.loud}`

Design Token 数据格式

引用语法

所有子维度通过大括号语法引用样式字典中预定义的值，支持多层级命名：


{要素.范畴.细分.梯度}

完整示例


{
  "button": {
    "shape-borderradius-default": { 
      "value": "{shape.borderradius.medium}",
      "type": "borderRadius"
    },
    "color-bg-state-hover": { 
      "value": "{color.primary.brand3}",
      "type": "color"
    },
    "material-elevation-state-pressed": { 
      "value": "{material.hierarchy.B1}",
      "type": "boxShadow"
    },
    "scale-padding-horizontal": {
      "value": "{scale.padding.normal}",
      "type": "spacing"
    },
    "font-size-default": {
      "value": "{font.size.base}",
      "type": "fontSizes"
    }
  }
}

可扩展性设计

八要素模型支持根据业务需求灵活扩展：

新增子维度：在现有要素下增加新的属性类型
扩展范畴：增加新的语义分类和使用场景
梯度细分：在现有梯度中插入新的数值等级

例如，在”色”要素下增加”渐变色”支持：


{
  "color": {
    "gradient": {
      "primary-to-secondary": {
        "value": "linear-gradient(135deg, {color.primary.brand5}, {color.secondary.brand5})",
        "type": "gradient"
      }
    }
  }
}

数据质量基线

为确保八要素模型的有效性和一致性，建立了严格的数据质量标准：

质量指标

指标	标准	说明
覆盖率	≥ 95%	核心页面元素的要素覆盖度
一致性	100%	同一语义在多端的 token 指称一致
可理解性	语义与视觉一致	语义名称与样式属性传达的视觉效果匹配
可组合性	无冲突	任一元件的状态组合不产生冲突 token
可观测性	埋点回溯	要素级埋点可回溯到具体 token
可扩展性	预留空间	token 梯度值的语义名称保留扩展空间
可无障碍	AA 标准	最低对比度 AA；动效与音效可降级/静音

最佳实践

1. Token 命名规范

使用语义化命名而非具体数值
保持命名的层次结构清晰
为未来扩展预留命名空间

2. 要素组合原则

优先使用系统预定义的要素组合
避免创建过于复杂的自定义组合
确保组合在不同状态下的一致性

3. 性能优化

合理控制 token 的数量和层次深度
使用 CSS 变量实现高效的动态切换
对频繁变化的属性使用硬件加速

八要素描述模型为 PSUIP 提供了科学、系统的 UI 描述框架，确保了 AI 生成界面的质量和一致性，同时支持灵活的扩展和定制。