通过语义指导桥接UI生成中的鸿沟

文献标题

Bridging Gulfs in UI Generation through Semantic Guidance

出版信息

• 主题领域: 用户界面（UI）设计中的生成式人工智能
• 关键词: 生成式人工智能, UI设计, 语义表示, 意图规范, 迭代优化, 执行鸿沟, 评估鸿沟, 设计语义, 用户研究, 人工智能透明性

背景与问题

• 问题 / 挑战: 当前的生成式UI系统在帮助用户表达设计意图、解读生成结果以及迭代优化设计方面存在显著挑战。这些挑战反映了Norman提出的执行鸿沟（表达意图的难度）和评估鸿沟（解读结果的难度），并在迭代优化过程中被进一步放大。
• 重要性: 解决这些挑战对于提高生成式UI系统的可用性、可预测性和有效性至关重要，尤其是在专业设计工作流程中，精确性和控制能力尤为重要。
• 动机与相关研究: 先前的研究探索了基于规则和数据驱动的UI生成、意图规范工具以及语义表示。然而，现有系统通常专注于输入结构化或输出评估中的某一方面，而未能在统一框架中将两者连接起来。本文通过引入一个语义中间层来弥补这一空白，从而在意图规范和输出评估之间架起桥梁。

解决方案

• 提出的方法: 一个基于语义的UI生成系统，提出了一个四层层级框架（产品层、设计系统层、功能层、组件层）来结构化设计语义，并作为用户意图与AI生成输出之间的中间层。
• 创新点:
  1. 开发了一个用于UI生成的设计语义层级框架。
  2. 引入语义表示以弥合用户意图与生成输出之间的鸿沟。
  3. 实现了一个支持结构化规范、透明分析和基于关系的优化的系统。
• 流程与关键技术:
  • 对六大主流UI生成服务的提示指南进行了主题分析，提取出层级语义框架。
  • 设计了一个基于Web的系统，利用该框架进行结构化输入、语义提取和迭代优化。
  • 集成了GPT-5进行语义解析和分析，以及Vercel的v0-1.5-md进行UI生成。
  • 实现了语义关系可视化、范围编辑和增强语义分析等功能，以提高透明性和控制力。

结果

• 具体发现:
  • 与基线的聊天式系统相比，该语义系统显著改善了意图表达（平均得分：5.93对4.64）、输出可解释性（5.93对3.86）以及修改的便捷性（6.00对3.71）。
  • 参与者报告语义漂移减少，迭代优化更加可预测。
• 相较基线的优势:
  • 在所有测量维度上获得更高评分，包括意图表达性、输出透明性和迭代可控性。
  • 通过语义提取和关系分析增强了用户对AI决策的信任和理解。
• 实验 / 评估:
  • 采用受控用户研究，14名参与者（UI/UX设计师、软件工程师、产品经理）参与，使用组内设计比较语义系统与聊天式基线系统。
  • 任务包括目标界面生成和开放式界面设计，每个任务至少进行三轮迭代。
  • 使用定量测量（7点Likert量表）和定性访谈评估系统的有效性。
• 局限性与未来工作:
  • 对语义类别的初始学习曲线较高，并且在解析长形式意图时可能存在细微信息的丢失。
  • 评估范围有限；未来研究应考察团队级工作流程和多屏设计。
  • 技术挑战包括扩展到复杂的UI架构以及提高模型在局部编辑中的可靠性。

总结

本文提出了一种基于语义的生成式UI设计系统，通过将设计语义结构化为四层层级框架，弥合了执行鸿沟和评估鸿沟。该系统使用户能够以更高的透明性和控制力规范意图、分析输出并迭代优化设计。用户研究表明，与聊天式基线系统相比，该系统在意图表达、输出解读和迭代优化方面显著改进。尽管该方法引入了一定的初始学习成本，但为AI驱动的UI设计提供了系统化和可解释的工作流程，在专业和协作环境中具有潜在应用价值。未来工作将致力于将该方法扩展到更复杂和更具创造性的设计场景中。