机器之心专栏
作者：ChunyangChen、TingSu、GuozhuMeng、ZhenchangXing、YangLiu
做过前端开发的人常有这样的经历，面对一张UI设计图片，要把它转换为相应GUI骨架代码。首先开发者需要从视觉上理解图片中的UI元素及其空间布局，然后将自己的理解转换为合适的UI组件以及组件间的组合，如图1所示。
图1将UI设计图转换为GUI骨架元素（部分）
然而，UI设计图与GUI骨架之间存在概念上的差异，为了弥合这一差距，开发人员需要了解GUI骨架的所有组件及其支持的视觉效果，以及不同组件的交互和组合效果。这个差异可以理解为对UI设计的元素描述和代码实现之间的知识鸿沟。实际上，更多的开发者正使用反复试验的方式来弄清楚GUI组件组合方式来实现给定的UI设计，这样的跟踪和不断地尝试非常麻烦，也浪费了宝贵的开发时间，不利于UI设计开发的快速迭代。
有没有办法通过UI设计图直接生成GUI骨架代码来简化这个繁复的转换过程，让开发者解放更多精力投入到后续的应用功能开发中去？
某些工具声称可以在给定UI设计图的情况下自动生成GUI骨架代码，但这些工具由于是基于人工设计的视觉理解规则实现的，因此功能十分有限，不能处理真实复杂的UI设计（如图1）。
ChunyangChen(Monash)、TingSu(NTU)、GuozhuMeng(SKLOIS)、ZhenchangXing(ANU)、YangLiu(NTU)提出了一种根据给定UI设计图自动化生成GUI骨架代码的神经网络翻译模型ui2code。从现有应用程序中提取UI设计和GUI实现的众包知识，并开发一个GUI骨架生成工具（专家），在给定UI设计图的情况下自动生成GUI骨架。这个专家知道各种各样的UI设计和GUI骨架，它可以向开发人员建议GUI框架的组件应该如何组合布局以实现UI设计图像。
论文：FromUIDesignImagetoGUISkeleton:ANeuralMachineTranslatortoBootstrapMobileGUIImplementationinInternationalConferenceonSoftwareEngineering(ICSE’18)
论文链接：