Extracting Mapping Relations for Mobile User Interface Transformation

Ruihua Ji,Junyu Pei,Wenhua Yang,Juan Zhai,Minxue Pan,Tian Zhang

DOI: https://doi.org/10.1145/3361242.3361250

2019-01-01

Abstract:The development of mobile apps has become the current mantra for any business' success. The rise of many types of mobile devices and mobile OS has instantly created the need to develop multiple versions for the same app. In order to grasp as much market share as possible, it is desirable to have all the versions of an app demonstrate similar user interface (UI) appearances, to make users feel comfortable when switching from one platform to another and more likely to stick to the app. However, to ensure consistent UIs among cross-platform versions can be a challenging and costly endeavor, since different platforms have their own UI controls and programming languages. In this paper, we propose an automatic approach to transforming mobile app UIs across platforms, and illustrate our approach by transforming the UIs of iOS apps to Android ones. We leverage the enormous existing apps carefully designed by developers to achieve similar UI effects between iOS and Android versions, since these apps contain valuable knowledge of mapping relations between the iOS and Android UI controls. Starting from the reverse engineering of these apps, our approach separates each user interface into modules of adequate sizes. Then it maps the modules from both versions that contribute to the same visual and functional effect, and automatically mines the mapping relations. By applying the mined relations, our approach has successfully transformed the iOS app UIs into Android app UIs, as confirmed by a series of experiments.