Auto Byte

专注未来出行及智能汽车科技

微信扫一扫获取更多资讯

Science AI

关注人工智能与其他前沿技术、基础学科的交叉研究与融合发展

微信扫一扫获取更多资讯

作者:赵天明

让机器学习设计手机GUI,这合理么?

研究背景:

图形用户界面(Graphical UserInterface,简称 GUI,又称图形用户接口),为用户和计算机桌面程序,手机类移动端软件,和在线网站提供了可视化的交互方式。设计优秀的GUI颜值在线且简洁易用,吸引大量忠实用户。

但即便对经验丰富的GUI设计者,新App与GUI的创作过程也是非常困难且耗费时间的,例如交互流畅、通用、简洁、美观、风格连贯等与设计相关的规则和标准是设计者们需要遵循的。而且为了紧跟时代潮流,不断从其他的资源(如Dribbble)寻找最新最热的设计来获取灵感也为设计者们带来了额外巨大的工作量。

然而,GUI设计人员在公司中的人数有限,如此复杂繁重的GUI设计工作经常需要程序开发人员“顶上”。在一项对超过5700名软件开发者的调查中,51%的人反映他们从事App的GUI设计任务要比其他开发工作多,且每过几天就要参与。

但是软件程序开发者往往缺少足够的专业设计经验与设计审美。所以经常在刚刚起步或小规模的公司中,缺少GUI设计经验的程序开发者们要通过参考网上现有的GUI来规划实现他们自己的GUI设计。

研究动机:

利用现有GUI来设计与开发新GUI已成为了一种常规辅助设计手段,比如常见的UI搜索方法。但是仍存在诸多问题,例如:

(1)由信息差异导致检索到的GUI可能无法满足开发人员的需求;(2)检索到的GUI设计可能会被许多其他开发者采用,导致与其他App高度相似,甚至可能涉及潜在的知识产权问题;(3)一些检索到的GUI设计风格可能已经过时,开发人员很难跟踪GUI设计的最新趋势。

因此,迫切需要一种用于创造性GUI设计生成的自动化方法来减轻新手设计人员和程序开发人员的负担。通过生成的GUI设计,开发人员可以进一步采用自动化GUI代码生成来实现部分流程自动化。这样,整个GUI开发过程将大大简化。

图片图1 机器学习生成的新GUI设计

研究方法:

我们引入了对抗生成模型(GAN),但传统GAN方法生成GUI质量差,且缺乏多样性。为此,我们做出调整,通过复用现有GUI设计中的组成部分而非整个GUI来生成新的样本。

GUI由多个小组件和空间布局组合构成,通过研究和归纳,我们将一个GUI“适当”分解为多个组成部分,例如GUI上部的导航栏,选项栏,或者是一些带有具体图像或文字信息组件。我们以它们为数据基础让模型生成新的GUI。

图片图2 GUI分解为多个组成部分

如何利用这些部分生成新的GUI设计呢?由于它们可被视为一种离散型数据,组成的序列可以用来表示一个新GUI。所以我们参考并采用了一种自然语言处理(NLP)中应对文本序列的方法,并开发了我们的生成模型GUIGAN。

我们将生成一个新的GUI设计视为NLP任务中生成一个新句子,而组成句子的单词就是组成GUI的各个部分和组件。这样,我们让模型像学习单词组句一样学习拼接不同GUI的部分来生成新GUI。

可NLP任务中不论单词或句子形式都比较简单,但GUI图像比文本更复杂,不仅具有颜色,风格等直观特征,并且有内部组成结构的信息。

因此我们让模型也去学习真实GUI样本中的风格特征和结构特征。这样一方面可以增加生成样本多样性,同时让它们具备真实GUI的审美外观与结构特征。

图片图3 “新”GUI由“旧”GUI重新组合而成

GUIGAN:

我们的模型包含一个SiameseNet,一个LSTM生成器,和一个CNN判别器。

SiameseNet用来学习并保存GUI部分的设计风格特征,再根据GUI元数据获取它们的结构信息。

LSTM生成新的序列,序列中的元素即为已有不同GUI的组成部分,它们通过模型的重新组合形成新的GUI设计。

CNN判别器用来给LSTM生成的序列打分,根据生成结果对生成器进行奖惩。

同时,计算生成序列元素的风格特征是否接近,并且结构是否与真实GUI相似,将计算结果加入到整个训练过程中。

图片图4 GUIGAN方法流程图

自动评估实验:

实验数据来自Rico公开数据集,GUIGAN的FID和1-NNA在两个实验数据集上分别比最佳baseline提高了33.63%和11.33%,28.23%和14.18%。

图片

用户评估实验:

5名具有移动端应用开发经验的参与者分别就生成GUI的美观,颜色风格协调性,结构合理性三个方面打分,另外对功能性做出评判。

GUIGAN在三项指标比baseline提高了31.22%、25.00%和34.87%。GUIGAN在功能性上有0.812的平均分,比baseline提高了79.65%。对两个方法的显著性分析也表示了GUIGAN在提升所有指标上的重要作用。

图片

进一步工作:

我们的模型还可以根据未完成的预设部分来补全整个GUI设计,而且生成的最终结果各不相同。未来我们将要拓展这项功能,并且也让用户能够输入更多的条件定制化地生成不同的GUI。

图片


图片图5 给定预设GUI部分(最左列),生成不同结果

图片

原文链接:https://www.computer.org/csdl/proceedings-article/icse/2021/029600a748/1sEXouuzoS4

GitHub: https://github.com/GUIDesignResearch/GUIGAN

入门自然语言处理机器学习
相关数据
机器学习技术

机器学习是人工智能的一个分支,是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、计算复杂性理论等多门学科。机器学习理论主要是设计和分析一些让计算机可以自动“学习”的算法。因为学习算法中涉及了大量的统计学理论,机器学习与推断统计学联系尤为密切,也被称为统计学习理论。算法设计方面,机器学习理论关注可以实现的,行之有效的学习算法。

自然语言处理技术

自然语言处理(英语:natural language processing,缩写作 NLP)是人工智能和语言学领域的分支学科。此领域探讨如何处理及运用自然语言;自然语言认知则是指让电脑“懂”人类的语言。自然语言生成系统把计算机数据转化为自然语言。自然语言理解系统把自然语言转化为计算机程序更易于处理的形式。

生成模型技术

在概率统计理论中, 生成模型是指能够随机生成观测数据的模型,尤其是在给定某些隐含参数的条件下。 它给观测值和标注数据序列指定一个联合概率分布。 在机器学习中,生成模型可以用来直接对数据建模(例如根据某个变量的概率密度函数进行数据采样),也可以用来建立变量间的条件概率分布。

推荐文章
暂无评论
暂无评论~