[论文解读] BlackBox Toolkit: Intelligent Assistance to UI Design

Vinoth Pandian Sermuga Pandian, Sarah Suleri|arXiv (Cornell University)|Apr 4, 2020

Innovative Human-Technology Interaction参考文献 4被引用 8

一句话总结

本文介绍了BlackBox Toolkit，这是一个由两部分组成的AI系统，通过在保留人类对创意决策控制的前提下自动化重复性任务，协助用户界面设计师。MetaMorph使用微调后的RetinaNet检测低保真草图中的用户界面元素（mAP达到63.5%）；Blu则利用重新标注的RICO数据集上的深度学习技术，将用户界面截图转换为结构化蓝图，从而实现自动化的布局重建与设计交接。

ABSTRACT

User Interface (UI) design is an creative process that involves considerable reiteration and rework. Designers go through multiple iterations of different prototyping fidelities to create a UI design. In this research, we propose to modify the UI design process by assisting it with artificial intelligence (AI). We propose to enable AI to perform repetitive tasks for the designer while allowing the designer to take command of the creative process. This approach makes the machine act as a black box that intelligently assists the designers in creating UI design. We believe this approach would greatly benefit designers in co-creating design solutions with AI.

研究动机与目标

• 通过将人工智能作为智能助手整合，减少用户界面设计中的心理负担和重复性工作量。
• 在自动化低层次重复性任务的同时，使设计师保留在创意决策上的控制权。
• 通过人工智能驱动的转换，弥合低保真草图与高保真原型之间的差距。
• 从视觉用户界面截图中创建机器可读的设计蓝图，以改善开发人员交接效率。
• 探索人工智能辅助的协同创作在用户界面设计中的应用，将人工智能建模为类似文艺复兴时期学徒的‘黑箱’助手。

提出的方法

• MetaMorph采用微调后的RetinaNet深度神经网络进行目标检测，以识别和定位低保真草图中的19类用户界面元素。
• 通过在UISketch数据集中随机放置用户界面元素，生成了包含125,000张图像的合成数据集Syn，用于增强MetaMorph的训练数据。
• Blu利用深度学习技术，基于重新标注的RICO数据集子集，从Android用户界面截图中检测用户界面元素类别、位置、分组关系及布局结构。
• 布局检测过程结合了格式塔心理学原则，以算法方式推断用户界面元素的对齐与分组关系。
• 两个工具均集成到一个原型设计工作台（Eve）中，使设计师能够进行草图绘制、转换为中保真设计，并生成高保真Android XML代码。
• 该系统被设计为‘黑箱’助手，其中人工智能负责处理重复性任务（如元素检测、布局重建），而设计师则保留在样式和创意决策上的控制权。

实验结果

研究问题

• RQ1 如何在不剥夺设计师对创意决策控制权的前提下，利用人工智能自动化用户界面设计中的重复性任务？
• RQ2 深度学习模型是否能够以足够高的准确度检测低保真草图中的用户界面元素，从而支持下游的原型设计？
• RQ3 在多大程度上可以利用深度学习与格式塔原则，从用户界面截图中自动推断出布局结构？
• RQ4 人工智能辅助工具如何减少返工并提升用户界面设计及向开发人员交接的效率？
• RQ5 人工智能在协同创作用户界面设计中可扮演何种角色，同时确保设计师作为创意主导者的地位？

主要发现

• MetaMorph使用微调后的RetinaNet模型，在从低保真草图中检测19类用户界面元素时，实现了63.5%的平均精度（mAP）。
• 包含125,000张生成的低保真草图的合成数据集Syn，显著提升了MetaMorph模型的鲁棒性与泛化能力。
• Blu成功地从截图中重建了用户界面蓝图与布局树，使用的是重新标注的RICO数据集子集，实现了结构化设计表示。
• 对RICO的用户界面元素层级与布局信息进行重新标注，纠正了自动化标注中的错误标签，提升了模型的可靠性。
• 将MetaMorph与Blu集成到Eve原型设计工作台中，实现了从草图到高保真Android XML代码的端到端转换，且在每个阶段均保持设计师的控制权。
• BlackBox Toolkit证明，人工智能可作为用户界面设计中的‘黑箱’助手，自动化重复性任务，同时保留人类的创造力与控制权。