User Interface Design Searching Based On Information Architecture

As a direct bridge to convey information to users,the user interface needs to present the information in the interface to users in a reasonable manner.Wireframe diagrams are designed based on information architecture,reflecting both the information planning of the information architecture and the concrete performance of the information architecture,it can be said that the wireframe diagram has determined the prototype of the product interface.However,the reasonable layout of information elements and high-quality wireframes require designers with long-term experience.Referring to interface design examples that conform to the information architecture can help designers design wireframe diagrams.Conducting interface search based on information architecture can help designers collect reference examples of interface design with similar information architecture during the wireframe design phase,which can save time in collecting reference interface design examples and improve design efficiency on the one hand,and help designers understand and apply design by referring to excellent interface examples on the other hand,it can help designers understand and apply design knowledge and improve the design quality of wireframe diagrams.The existing research oriented to user interface information organization and information architecture focuses on the application of information architecture in interface design,and lacks less a computer understandable representation of information architecture;in addition,although there are already many user interface databases where interface and code data can be found,it is difficult to directly obtain the information architecture corresponding to the interface,as information architecture is an intermediate product of the interface design process;the related studies on user interface retrieval are also mostly based on metadata or pixel-based interface retrieval,which cannot address the interface retrieval needs in the wireframe diagram stage.In order to solve these problems and realize user interface design retrieval based on information architecture,this study starts from the characteristics of information architecture,explores the formal description method of information architecture,and based on this,extracts the information hierarchy tree from the interfaces in the interface library,then designs the similarity algorithm of information architecture tree,and finally realizes user interface design retrieval through information architecture.The main work is as follows.(1)A formal representation method of information architecture is proposed,which solves the problem that the traditional representation method of information architecture cannot be understood by computers.For the most commonly used tree structure of information architecture,this paper proposes a formal representation of information architecture,analyzes the characteristics and relationships of information architecture tree hierarchy,root nodes,non-root non-leaf nodes,and leaf nodes,respectively,and clusters the common types of leaf nodes by card sorting,and obtains nine classes of leaf node types,and through this formal model,it is possible to analyze different nodes of information architecture from.The formal model enables an accurate and comprehensive formal description and definition of user interface information architecture tree from the perspective of characteristics,attributes and node relationships of different nodes of the information architecture,and lays the foundation for the work of information architecture-based interface retrieval efforts.(2)A method of extracting interface information hierarchical tree based on semantic clustering is proposed to solve the problem that information architecture data is difficult to obtain.There are few existing studies on the extraction of interface information architecture,the information architecture,as an intermediate product of interface design,is difficult to obtain the information architecture corresponding to the interface.And to search the interface based on the information architecture,the information architecture corresponding to the interface in the interface database is needed.Therefore,this paper extracts the information hierarchy tree of the page from the mobile user interface data based on the formal representation of information architecture proposed in Chapter 1.The overall architecture of the interface is first extracted from the view hierarchy code file of the mobile application interface,then redundant components and attributes are parsimonious based on heuristic rules,and finally the semantically similar repetitive items in the interface are clustered and merged by the method of semantic clustering,laying the foundation for the subsequent work of information architecture-based interface retrieval.(3)An information architecture tree similarity algorithm based on fuzzy subtree matching is designed to solve the problem of matching information architecture trees and interfaces.Although the information hierarchy tree was extracted from the interface earlier,with features such as hierarchy and combination of information,there is still a gap between its nodes,which are more oriented to specific elements than information expression,and the information architecture tree,and the similarity calculation cannot be performed directly.To this end,an information architecture tree similarity algorithm based on fuzzy subtree matching is designed,which establishes a mapping between nodes in an information architecture tree and their specific implementations(i.e.,element types)by defining fuzzy subtrees,decomposes the similarity between trees into the similarity of multiple subtrees,performs maximum matching on subtrees,and then calculates the similarity of trees according to subtree weights.Finally,the algorithm is designed based on the information architecture-based user interface retrieval experiment,and the algorithm is validated on the RICO dataset and the results are analyzed.