论文标题

Auto-Icon+:UI开发中图标设计的自动端到端代码生成工具

Auto-Icon+: An Automated End-to-End Code Generation Tool for Icon Designs in UI Development

论文作者

Feng, Sidong, Jiang, Minmin, Zhou, Tingting, Zhen, Yankun, Chen, Chunyang

论文摘要

大约50%的开发资源专门用于UI开发任务[9]。开发图标占据了很大一部分的开发资源可能是一项耗时的任务,因为开发人员不仅需要考虑有效的实施方法,而且需要考虑易于理解的描述。在本文中,我们介绍了自动元素+,这是一种自动生成设计工件图标的可读和有效代码的方法。根据我们的访谈,以了解设计人员之间的差距(图标是由多个组件组装的)和开发人员(图标作为单个图像),我们应用了启发式群集算法将组件构成图像图像。然后,我们提出了一种基于深度学习模型和计算机视觉方法的方法,将组合图像的图像转换为带有描述性标签的字体,从而减少了为开发人员提供费力的手动努力,并促进了UI开发。我们在现实世界UI开发环境中进行了定量评估方法的质量,并证明我们的方法在节省了65.2%的实施时间方面为开发人员提供了图标设计的准确,高效,可读和可用的代码。

Approximately 50% of development resources are devoted to UI development tasks [9]. Occupying a large proportion of development resources, developing icons can be a time-consuming task, because developers need to consider not only effective implementation methods but also easy-to-understand descriptions. In this paper, we present Auto-Icon+, an approach for automatically generating readable and efficient code for icons from design artifacts. According to our interviews to understand the gap between designers (icons are assembled from multiple components) and developers (icons as single images), we apply a heuristic clustering algorithm to compose the components into an icon image. We then propose an approach based on a deep learning model and computer vision methods to convert the composed icon image to fonts with descriptive labels, thereby reducing the laborious manual effort for developers and facilitating UI development. We quantitatively evaluate the quality of our method in the real world UI development environment and demonstrate that our method offers developers accurate, efficient, readable, and usable code for icon designs, in terms of saving 65.2% implementing time.

扫码加入交流群

加入微信交流群

微信交流群二维码

扫码加入学术交流群,获取更多资源