移动应用程序中用户界面显示缺陷检测的经验研究  

Empirical Study on UI Display Issue Detection in Mobile Applications

作　　者：刘哲 王俊杰 陈春阳 车行 苏宇辉 王青[1,2,3,4] LIU Zhe;WANG Jun-Jie;CHEN Chun-Yang;CHE Xing;SU Yu-Hui;WANG Qing(Laboratory for Internet Software Technologies,Institute of Software,Chinese Academy of Sciences,Beijing 100190,China;University of Chinese Academy of Sciences,Beijing 100049,China;State Key Laboratory of Intelligent Game,Institute of Software,Chinese Academy of Sciences,Beijing 100190,China;Science&Technology on Integrated Information System Laboratory,Institute of Software,Chinese Academy of Sciences,Beijing 100190,China;Monash University,Melbourne 3800,Australia)

机构地区：[1]中国科学院软件研究所互联网软件技术实验室,北京100190 [2]中国科学院大学,北京100049 [3]中国科学院软件研究所智能博弈重点实验室,北京100190 [4]中国科学院软件研究所天基综合信息系统重点实验室,北京100190 [5]Monash University,Melbourne 3800,Australia

出　　处：《软件学报》2024年第11期5040-5064,共25页Journal of Software

基　　金：国家重点研发计划(2018YFB1403400);国家自然科学基金(62072442,62002348)。

摘　　要：应用程序图形用户界面(graphical user interface,GUI/UI)为应用程序与其终端用户提供了一座可视化的桥梁,用户可以通过交互操作使用应用程序.随着移动应用程序的发展,兼具美学与交互设计的图形用户界面也变得越来越复杂,用户也更加关注应用程序的可访问性和可用性.然而图形用户界面的复杂性也对其设计与实现带来巨大的挑战.由于用户对于移动设备的自定义设置以及不同的设备型号和屏幕分辨率导致用户界面显示问题频繁发生.例如由于软件或硬件兼容性,在不同设备上进行界面渲染时总会出现文本交叠、组件遮挡、图像丢失等显示问题.它们对应用程序的可用性和可访问性产生负面影响,导致用户体验不佳.不幸的是,对于移动应用程序用户界面显示问题的成因知之甚少.为了应对这一挑战,收集来自百度众测平台上的6729张具有用户界面显示缺陷的应用程序截图和GitHub中1016个缺陷报告提供的应用程序截图,采用主题分析方法识别出9类用户界面显示缺陷,然后对GitHub中1016个缺陷报告和其对应的缺陷代码进行分析,总结出用户界面显示缺陷本质成因.研究发现:(1)在众测数据集中用户界面显示缺陷截图占总截图的62.1%;(2)导致界面显示缺陷的原因中字体的缩放设置与组件的自适应设置不适配所占的比例较大;(3)界面的布局设置会导致界面显示缺陷产生;(4)硬件加速未开启会影响界面的正常显示.The graphical user interface(GUI/UI)provides a visual bridge between the application and its end users,and users can use the application through interactive operations.With the development of mobile applications,GUI,which combines aesthetics and interaction design,has become more and more complex,and users are increasingly concerned about the accessibility and availability of applications.However,the complexity of GUI also brings great challenges to its design and implementation.Due to user-defined settings for mobile devices and different device models and screen resolutions,UI display issues frequently occur.For example,due to software or hardware compatibility,when rendering interfaces on different devices,there will always be display issues such as text overlap,component masking,and image loss.They have a negative impact on the availability and accessibility of applications,resulting in poor user experience.Unfortunately,little is known about the causes of UI display issues of mobile applications.In order to cope with this challenge,this study collects 6729 screenshots of applications with UI display issues from Baidu crowdtesting platform and 1016 screenshots of applications provided by issue reports in GitHub and identifies nine types of UI display issues using the theme analysis method.Through the analysis of 1061 UI issue reports from GitHub and the corresponding defective code,the essence and causes of UI display issues are summarized.The research found that(1)62.1%of the total screenshots in crowdtesting dataset are defective screenshots displayed on the UI;(2)the reason for the UI display issues is that the font scaling setting does not match the adaptive setting of components to a great extent;(3)the layout setting of the interface will lead to display issues;(4)If the hardware acceleration is not turned on,the normal display of the interface will be affected.

关 键 词：经验研究 移动应用程序 界面显示缺陷 界面显示缺陷成因 界面显示缺陷检测 

分 类 号：TP311[自动化与计算机技术—计算机软件与理论]