UI-Diffuser——使用生成式扩散模型的UI原型设计算法解析

文章介绍了UI-Diffuser,一款利用生成性人工智能技术,通过用户输入简单的文本提示和UI组件快速生成UI设计的工具。虽然存在一些缺陷,如组件遗漏和设计质量,但它展示了为UI设计提供灵感的潜力。未来研究将着重于改进其准确性和兼容性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

概述。

移动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设计原型,使应用开发更加高效。

### 数据集生成原型设计方案及方法 #### 1. 明确需求与目标 在启动任何数据集生成项目之前,定义清晰的需求和预期成果至关重要。这包括确定所需的数据类型、规模以及应用场景。例如,在医疗领域可能需要模拟患者记录;而在金融行业,则可能是交易流水等。 #### 2. 设计框架搭建 采用模块化的设计思路来构建整个系统的雏形。可以借鉴集成了一站式AI开发体验的平台所具备的核心功能模块,如数据准备、模型训练和服务部署等部分[^2]。这样的架构有助于后期灵活调整各个组件间的协作方式,同时也便于团队成员理解整体流程逻辑。 #### 3. 合成数据技术选型 针对具体任务挑选合适的合成数据生成工具和技术栈。如果关注于保护个人隐私的同时还能高效产出高质量样本的话,“深入探索合成数据生成”的研究指出这类资源非常适合用于快速迭代产品初期版本或是敏感信息处理场景下的替代方案[^1]。 #### 4. 布局与界面设计 当涉及到可视化呈现时,可利用先进的UI原型设计算法,比如UI-Diffuser中的“LayoutDM”方法来进行初步页面规划。此过程会综合考虑元素分类、尺寸比例等因素以创造出既美观又实用的操作面板布局[^3]。 ```python import layoutdm as ld def generate_layout(categories, sizes, positions): """ 使用LayoutDM生成用户界面布局 参数: categories (list): 组件类别列表 sizes (dict): 尺寸配置字典 positions (tuple): 定位坐标元组 返回: str: XML格式描述文件路径 """ designer = ld.Designer() for cat, size, pos in zip(categories, sizes.values(), positions): component = { 'category': cat, 'width': size['w'], 'height': size['h'], 'x': pos[0], 'y': pos[1] } designer.add_component(**component) xml_path = './output/layout.xml' designer.export_to_xml(xml_path) return xml_path ``` #### 5. 测试验证与优化改进 完成初版后需经过多轮内部评审并邀请潜在使用者参与试用反馈意见。依据收集到的信息持续打磨细节直至满足业务要求为止。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知来者逆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值