[论文解读] Creating User Interface Mock-ups from High-Level Text Descriptions with Deep-Learning Models

Forrest Huang, Gang Li+3 more|arXiv (Cornell University)|Oct 14, 2021

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

一句话总结

本文提出了三种新颖的深度学习方法——两种基于检索的方法和一种生成式方法——用于从高层次的自然语言描述自动生成低保真度的UI原型图。所提出的方法，包括一个文本到UI的生成器和两个跨模态检索器，在生成连贯、多样且相关的UI设计方面表现出色，用户研究证实其对专业设计师和非专业人士均具有实用价值。

ABSTRACT

The design process of user interfaces (UIs) often begins with articulating high-level design goals. Translating these high-level design goals into concrete design mock-ups, however, requires extensive effort and UI design expertise. To facilitate this process for app designers and developers, we introduce three deep-learning techniques to create low-fidelity UI mock-ups from a natural language phrase that describes the high-level design goal (e.g. "pop up displaying an image and other options"). In particular, we contribute two retrieval-based methods and one generative method, as well as pre-processing and post-processing techniques to ensure the quality of the created UI mock-ups. We quantitatively and qualitatively compare and contrast each method's ability in suggesting coherent, diverse and relevant UI design mock-ups. We further evaluate these methods with 15 professional UI designers and practitioners to understand each method's advantages and disadvantages. The designers responded positively to the potential of these methods for assisting the design process.

研究动机与目标

• 解决将高层次设计目标转化为具体UI原型图的挑战，该任务耗时且需要专业设计技能。
• 使非专业应用开发者和设计师仅通过自然语言描述即可生成可用的UI原型。
• 开发支持多样化、连贯且相关的UI建议的方法，以减少手动设计工作量并提升设计沟通效率。
• 通过定量指标和用户研究，评估基于检索与生成的方法在实际设计工作流中的有效性。

提出的方法

• 提出UI生成器（UI Generator），一种深度生成模型，利用序列到序列架构结合后处理技术，从文本描述生成UI原型图，以实现质量过滤。
• 引入多模态检索器（Multi-modal Retriever），一种跨模态检索模型，通过学习文本与UI的联合嵌入，基于语义相似性从大规模语料库中检索相关设计。
• 开发仅文本检索器（Text-only Retriever），一种仅使用文本嵌入匹配文本描述与UI的检索方法，实现快速且可解释的搜索。
• 应用布局验证和视觉质量过滤等后处理技术，以提升生成原型图的一致性和可用性。
• 使用大规模配对的文本-UI数据集（screen2words）对所有模型进行预训练和评估，确保描述与视觉输出之间的一致性。
• 采用基于Transformer的架构对文本和UI进行编码，以有效建模复杂的设计语义和结构关系。

实验结果

研究问题

• RQ1 深度学习模型在多大程度上能够从高层次的自然语言描述中生成连贯且多样的低保真度UI原型图？
• RQ2 在建议相关UI设计方面，基于检索的方法与生成式方法的相对优势和劣势是什么？
• RQ3 与现有方法相比，所提出方法在多样性、相关性和连贯性方面的表现如何？
• RQ4 这些模型在UI设计流程的不同阶段（从构思到细化）中能够提供多大程度的支持？
• RQ5 专业UI设计师如何看待AI生成的UI建议在实际设计工作流中的实用性与可用性？

主要发现

• UI生成器通过基于采样的生成过程，成功从文本描述生成新颖且连贯的UI原型图，且可通过温度控制调节输出多样性。
• 多模态检索器通过利用视觉-文本联合嵌入，在检索语义相关设计方面优于仅文本检索器。
• 对15名专业设计师进行的用户研究显示，所有三种方法均获得高度积极反馈，尤其在构思和快速原型制作阶段表现突出。
• 仅文本检索器因其速度和可解释性，更受青睐于早期设计灵感阶段；而UI生成器在创新性和多样性方面表现更优。
• 与基于检索的模型相比，生成模型在输出多样性方面表现更佳，尤其是在接收到抽象或高层次设计目标时。
• 所有方法在设计建议质量方面均显著优于基线方法，其中UI生成器在新颖性和连贯性方面达到当前最先进水平。