| Graphical user interface(referred to as interface)is the medium through which users interact with applications,and the aesthetic design of the interface is a key consideration in application development.Component is the view unit on the interface and the basic component of the interface.Component style refers to the visual manifestation of the appearance and shape of a single component in colors,fonts,etc.It is an important factor that affects the aesthetics of the interface.At the same time,the rapid growth in the number of mobile applications has led to the continuous production of many excellent interface designs,which have become an important source of interface design inspiration for independent developers.Therefore,analyzing the component design styles of existing mobile applications in the user interface and realizing the extraction and migration of component styles can help independent developers inspire interface design inspiration and improve the efficiency of mobile application development.Component style migration includes two tasks: component style extraction and style migration,but the existing methods have certain defects.For the study of component style extraction,researchers mainly obtain component style from the visual characteristics of interface images(either screenshots or interface design drawings),but this method can only extract three simple colors: red,green,and blue;For the study of component style transfer,researchers mainly use convolutional neural networks to realize the style conversion between artistic images and interface images.The converted images still need to be manually converted into codes by developers.The conversion is difficult and difficult.Apply to the existing application development process.In order to realize the component style migration of the mobile application interface,this paper proposes a new method of component style extraction and migration.The main work contents are as follows:(1)A method of component style extraction based on mobile application source code is proposed.The prerequisite for achieving component style extraction is to identify the component types contained in the interface.However,in existing research,there is a lack of detailed descriptions of commonly used component types in mobile application interface development.At the same time,the component style information obtained from the component style extraction based on the deep learning method is very limited.The component style is saved in the image format.This storage method makes the component style unable to be directly reused and can only be used as a design reference.To this end,this article proposes a component style extraction method based on mobile application source code.First,this article summarizes26 common component types from existing research,collects and analyzes the xml attributes of each type of component,and obtains a total of 131 after voting and screening the name of the attribute used to describe the style of the component.Finally,this article analyzes the code and extracts the component style based on the Element Tree parsing method,and saves the component style information in the form of a two-tuple.(2)A data set of similar components is constructed based on web crawlers and heuristic rules.The prerequisite for implementing component style migration is to calculate the component similarity between mobile applications,but there is currently no data set of similar components focusing on the source code of mobile applications.In response to the above problems,this paper constructs a semantic text data set of similar components based on web crawlers and heuristic rules.This article uses crawler technology to obtain a total of 764 apk files from the 23 application categories of the Google Store.After decompile and heuristic rule processing,nearly 170,000 xml layout files are obtained,nearly 880,000 component information is extracted,and the web is used at the same time.The framework builds a labeling platform.After the experimenters label the data,a total of 21028 pieces of similar component text data are obtained.(3)Proposed a component style transfer method based on deep structure semantic model.The focus of component style migration is component similarity calculation,but there is no suitable method in existing research.The more similar ones are Web-oriented interface code and image-based similar component calculation.The method of calculating component similarity based on the Web interface code uses the strong hierarchical structure information in the code to calculate the component similarity from two aspects of structure and function.The image-based method mainly relies on the structural similarity index to judge,but the two methods are not suitable for the calculation of similar components at the source code level of mobile applications.At the same time,the main solution to the task of interface style transfer in existing research is based on the visual characteristics of the image,using convolutional networks to achieve the style transfer from artistic images to interface images,but this method still requires developers to manually transfer the post-migration The interface image conversion code is difficult to convert.In response to the above problems,this paper proposes a component style transfer method based on the LSTM-DSSM model.First,the text learns the functional semantics and location structure contained in the component context information obtained from the source code,and calculates the similarity probability between the two components.After the model is trained,the accuracy rate on the test set reaches about 70%.Finally,this paper modifies the application source code based on the component similarity calculation results and heuristic rules,completes the component style migration,and proves the effectiveness of the component style migration through user ratings. |
PDF Full Text Request