概述。

移动UI是影响参与度的一个重要因素，例如用户对应用的熟悉程度和使用的便利性。如果你有一个类似的应用程序，你可能会选择一个具有现代、好看的设计的应用程序，而不是一个旧的设计。然而，要从头开始研究什么样的UI最适合应用开发，需要花费大量的时间和精力。

因此，为了支持UI设计，本文提出了UI-Diffuser，它应用了最近得到显著发展的生成性人工智能（稳定扩散），来自动生成UI原型。

UI-Diffuser "通过简单地输入简单的文本提示和UI组件来为你生成UI设计，如果你使用过ChatGPT，你可能已经意识到，自2022年以来，一个生成性的人工智能会为你生成几个候选方案。你会发现，让它们被创造出来，然后修改它们要比从头开始想办法要容易得多，也容易得多。

这篇文章描述了这个UI-Diffuser是如何工作的，以及它的作用。

UI-Diffuser

UI-Diffuser "的概述如下图所示，它包括两个步骤：在第一步，你输入一个UI组件（文本、图标、按钮或图片），Stable Diffusion从UI组件中生成一个合理的布局。在下一步，StableDiffusion通过将第一步生成的布局与文本提示（“一个应用程序中的搜索引擎”）相结合，生成UI设计。

第一步，生成布局，使用一种叫做 "LayoutDM "的方法。这是由CyberAgent在2023年提出的（arXiv，博客）。基于指定的组合，一个结构化的用户界面布局被生成，考虑到各种因素，如类别、大小、位置和组件之间的关系等等。对于第二步，用户界面设计的生成，已经提出了以下架构：文本编码器(CLIP）、图像信息创建器（UNet）、图像解码器（VAE）和控制网。

一旦输入LayoputDM生成的布局和文本提示，就会生成UI设计的图像。首先，文本提示被文本编码器（CLIP）转换为标记嵌入，然后图像信息创建器（UNet）根据标记嵌入生成图像 嵌入，最后由图像解码器（VAE）生成用户界面设计的图像。图像解码器（VAE）生成用户界面设计的图像。为了支持额外的输入条件，如布局，控制网被整合到UNet中：由LayoputDM生成的布局被输入到这个UNet整合的控制网中。

UI-Diffuser 的作用

下表显示了一个由’UI-Diffuser’生成的UI设计样本：第一列’组件和描述’显示了输入到’UI-Diffuser’的UI组件和文本提示；第二列’生成的第三行，‘生成的UI’，是最终UI设计的样本：输入UI组件和文本提示，在短短的几秒钟内，UI设计就会在短短几秒钟内生成。

乍一看，由’UI-Diffuser’生成的UI设计似乎是高质量的，但仔细观察就会发现，有些UI组件被遗漏了，有些则设计得有些糟糕。例如，在上表第5行的 "生成的UI "中，"广告 "组件被忽略了。这个样本表明， 由’UI-Diffuser’创建的UI设计更适合作为一个可以为UI设计师提供创意和灵感的工具，而不是作为一个功能齐全的UI原型设计工具 。

总结

本文提出了UI-Diffuser，它可以自动生成带有UI组件和简单文本提示的UI设计图像。演示显示了它的实用性，尽管目前很难用这个工具完全取代UI设计，但它已经显示了作为一个原型设计工具的潜力，可以为UI设计师提供想法和灵感。然而，该工具确实显示了一些问题，例如输入的UI组件没有被包括在生成的图像中，以及设计质量差，因此需要进一步改进。

研究小组打算对UI-Diffuser进行全面的评估，首先建立一个改进的基准，然后调查三个关键因素：生成的UI的可设计性、与UI组件的兼容性以及与文本描述的兼容性。

此外，为了加强UI-Diffuser，他们计划在"开发具有高质量屏幕截图描述的数据集"、"从生成的UI图像中剪切组件 "和 "从生成的UI中生成代码 "方面开展工作。例如，关于 “从生成的用户界面图像中剪切组件”，生成的用户界面图像作为用户界面设计的想法是有用的，但通常不能被编辑或直接重复使用。

为了克服这一限制，他们还在考虑一种方法，根据生成的布局图像中的绝对位置来修剪生成的用户界面图像的每个组件。例如，由于UI组件可能会相互重叠，修剪上面的组件可能会导致下面的组件出现空白，他们正在考虑在这种情况下用下面组件的颜色来填补空白的方法。

至于"从生成的UI生成代码"，公司也在考虑一个功能，即允许从生成的UI设计中生成与设计相对应的代码：UI-Diffuser生成的布局图像包含组件的类别、尺寸和位置，这样就可以生成相应的代码可以被生成。

现有的设计工具，如Figma，也有搜索设计和检查已创建的设计的代码的能力，但这是一个令人惊讶的耗时和困难的任务。如果用生成性人工智能实现自动化，就有可能更灵活地生成各种设计，而且是用更直观和自然的语言。在未来，预计任何人都能更容易地创建UI设计原型，使应用开发更加高效。