UISketch: 一个大规模的用户界面元素草图数据集

文献标题

UISketch: A Large-Scale Dataset of UI Element Sketches

文献信息

• 主题领域: 用户界面 (UI)设计、人工智能 (AI)、计算机视觉
• 关键词: 数据集, UI元素草图, 草图识别, 深度神经网络 (DNN), 低保真原型, 线框图, 人机界面设计

研究背景与问题

• 发现的挑战:
  • 当前尚缺乏大规模用户界面(UI)元素手绘草图数据集，用于支持使用深度学习模型自动化低保真(lo-fi) UI设计到代码的转换。
  • 缺少关于人类与机器对UI元素草图识别精度进行直接对比的研究。
• 重要性:
  • UI设计师经常使用草图作为快速表达和沟通设计想法的工具，而低保真的手绘草图是UI设计早期阶段的关键资源。
  • 自动化地将手绘草图转化为高保真的设计或代码，可显著提高设计效率并减少设计时间。
• 研究动机与相关工作:
  • 近年来的研究已开始探索利用深度学习将手绘草图自动转换成代码，但缺乏大规模带标注的UI草图数据集。
  • 现有数据集（如RICO、TU Berlin Sketch Dataset）主要关注屏幕截图或物体草图，无法满足特定于UI元素草图识别的需求。

解决方案

• 提出方法:
  • 作者创建了UISketch数据集，包含17,979个UI元素手绘草图，涵盖21个UI元素类别（例如按钮、下拉菜单、文本框）。
  • 数据集来源于967名参与者，包括UI/UX设计师、前端开发人员、人机交互(HCI)与计算机科学(CS)研究生。
  • 提供数据的参与者通过纸质问卷或数字问卷（使用笔、铅笔或触控笔）绘制草图。
• 创新之处:
  • UISketch是首个大规模开放的UI元素草图数据集，并首次基于此数据集研究了人类与计算机的草图识别能力。
  • 使用了深度神经网络(DNN)，例如ResNet-152，对草图进行分类，并与人类识别结果进行对比分析。
• 实施步骤与关键技术:
  1. 设计草图问卷，包含21个UI元素作为绘制样本。
  2. 收集草图，并采用Otsu阈值法等技术对纸质草图进行数字化处理。
  3. 用26种现有深度学习模型（如ResNet、DenseNet、VGG）对数据集进行训练和评估。
  4. 使用t-SNE可视化工具分析深度模型对草图特征的聚类情况。

研究成果

• 具体成果:
  • 创建了包含17,979个手绘草图的UISketch数据集，公开供研究社区使用。
  • 人类对于UI草图的识别准确率约为96.49%，而基于深度学习的最佳模型（ResNet-152）达到91.77%的识别准确率。
  • 发现计算机的识别问题主要源于UI元素的结构相似性，而人类识别错误则更多受到语义相似性的影响。
• 比较优势:
  • UISketch为基于草图的图像检索、自动化草图完成、草图到代码转换的后续研究提供了重要基准。
  • 数据集包含数字化的草图及其近似平均图像，有助于理解UI元素的普遍结构特征。
• 实验与评估结果:
  • ResNet-152在基于结构的信息分类方面表现最佳，但仍低于人类的识别精度。
  • t-SNE聚类结果显示模型倾向于基于结构相似性对草图进行分类，没有体现语义上下文。
• 局限性与未来方向:
  • 数据集目前仅包括移动设备(Android)常见的UI元素，未来计划扩展到Web与桌面平台的UI元素。
  • 拟举办后续研究收集更多富语义和带时间戳的矢量草图，以提升模型的语义理解能力。
  • 计划构建低保真UI屏幕草图的完整数据集，以及带标注的对象检测数据集。

总结

• UISketch数据集为AI辅助UI设计的研究铺平了道路，包括草图补全、草图分类、以及代码生成等应用。
• 深度学习的性能目前虽接近人类，但仍需结合语义理解进一步完善。此研究首次系统分析了UI草图的结构和语义特性及其识别机制。