Automated Aesthetic Quality Assessment of Mobile UI Design via Hierarchy-Perceiving Graph Attention Networks and Visual Hierarchy Features

Abstract

Abstract

With the rapid development of the mobile internet, the aesthetic quality of mobile user interface (UI) design has become a key factor influencing user experience and product competitiveness. However, existing evaluation methods still suffer from significant limitations in terms of objectivity, scalability, and the understanding of compositional semantics. This study proposes an automatic aesthetic quality assessment method for mobile UI design that integrates visual hierarchy features with a Graph Attention Network, termed HPA-GNN (Hierarchy-Perceiving Graph Attention Network). Based on the principles of visual hierarchy, the golden ratio, and color contrast, visual elements within a UI interface are abstracted as graph nodes. A spatial relational graph structure is then constructed according to compositional principles, and a graph attention mechanism is introduced to achieve differentiated aggregation of node features. Experiments are conducted on a self-constructed dataset containing 1,080 annotated UI design images. The results demonstrate that HPA-GNN significantly outperforms existing baseline models in both prediction accuracy and scoring consistency: the Weighted Root Mean Square Error (WRMSE) reaches 0.362 ± 0.017, the Spearman rank correlation coefficient is 0.731 ± 0.016, and the Graph Structure Integrity Rate (GSIR) is 0.934 ± 0.015. Compared with CNN-based baseline models, improvements of approximately 17.2%, 12.8%, and 14.9% are achieved, respectively. Ablation experiments further verify the complementarity and synergistic effects of the three compositional rules. This study provides an interpretable technical pathway for intelligent evaluation of mobile UI design aesthetics, offering important theoretical and practical implications for the development of design assistance tools, user experience optimization, and the standardization of design quality.

Keywords: Mobile UI design; Aesthetic quality assessment; Graph neural networks; Visual hierarchy features; Design intelligence