A common need for mobile application development by end-users or in computing education is to transform a sketch of a user interface into wireframe code using App Inventor, a popular block-based programming environment. As this task is challenging and time-consuming, we present the Sketch2aia approach that automates this process. Sketch2aia employs deep learning to detect the most frequent user interface components and their position on a hand-drawn sketch creating an intermediate representation of the user interface and then automatically generates the App Inventor code of the wireframe. The approach achieves an average user interface component classification accuracy of 87,72% and results of a preliminary user evaluation indicate that it generates wireframes that closely mirror the sketches in terms of visual similarity. The approach has been implemented as a web tool and can be used to support the end-user development of mobile applications effectively and efficiently as well as the teaching of user interface design in K-12.
翻译:终端用户或计算机教育中移动应用开发的常见需要是将用户界面的草图转换成使用App Inventor的电线框架代码,这是一个受欢迎的块状编程环境。由于这项任务具有挑战性和耗时性,我们介绍了将这一过程自动化的Strach2aia 方法。Strach2aia使用深层的学习来探测最经常用户界面组件及其在手画草图上的位置,以建立用户界面的中间代表,然后自动生成电线框架的应用发明代码。该方法实现了87.72%的平均用户界面分类精度,初步用户评估的结果表明,它生成了密切反映视觉相似性图画的线条框。该方法已作为一种网络工具加以实施,并可用于支持高效和高效地开发移动应用程序的终端用户开发,以及用于在 K-12 中教授用户界面设计。