1e41f4b71Sopenharmony_ci# Application Page Structure Design 2e41f4b71Sopenharmony_ci 3e41f4b71Sopenharmony_ci 4e41f4b71Sopenharmony_ci## Common Page Structure 5e41f4b71Sopenharmony_ci 6e41f4b71Sopenharmony_ciAn application consists of multiple pages. The following describes common application pages and their structures. 7e41f4b71Sopenharmony_ci 8e41f4b71Sopenharmony_ci**Launch Page** 9e41f4b71Sopenharmony_ci 10e41f4b71Sopenharmony_ciFor a content-oriented application, it may take a period of time to obtain the content of the application's home page. In this case, the launch page is a good choice when users are waiting for page loading. Generally, the launch page displays the brand image of the application or ads. The launch page is not needed for applications that do not load content from the Internet. 11e41f4b71Sopenharmony_ci 12e41f4b71Sopenharmony_ci 13e41f4b71Sopenharmony_ci 14e41f4b71Sopenharmony_ciUsers always expect to see the application content in the first place. Therefore, you should display the content in a timely manner once page loading is complete. 15e41f4b71Sopenharmony_ci 16e41f4b71Sopenharmony_ciWhen an application is loaded from the background, the launch page should not be displayed. When an application is switched to the background and then loaded from the background, the launch page should not be displayed either. The application should retain its status so that users can continue browsing the application when it is restored from the background. 17e41f4b71Sopenharmony_ci 18e41f4b71Sopenharmony_ci**List Content Page** 19e41f4b71Sopenharmony_ci 20e41f4b71Sopenharmony_ciA list content page usually displays text and data. 21e41f4b71Sopenharmony_ci 22e41f4b71Sopenharmony_ci 23e41f4b71Sopenharmony_ci 24e41f4b71Sopenharmony_ciData in a list should be sorted based on certain logic to facilitate user browsing and operations. For example, data can be sorted in alphabetical or time order. 25e41f4b71Sopenharmony_ci 26e41f4b71Sopenharmony_ciA list should be a collection of items of the same type, and the data in the list should be presented in a consistent layout style. Common lists are single-line, double-line, and three-line lists. 27e41f4b71Sopenharmony_ci 28e41f4b71Sopenharmony_ciThe content to be displayed in a list must be hierarchically clear so that users can get important information and operations at a glance. 29e41f4b71Sopenharmony_ci 30e41f4b71Sopenharmony_ci**Grid Content Page** 31e41f4b71Sopenharmony_ci 32e41f4b71Sopenharmony_ciA grid content page usually displays images or videos. 33e41f4b71Sopenharmony_ci 34e41f4b71Sopenharmony_ci 35e41f4b71Sopenharmony_ci 36e41f4b71Sopenharmony_ciA grid content page displays items of the same importance level with a unified layout. 37e41f4b71Sopenharmony_ci 38e41f4b71Sopenharmony_ciA grid content page primarily organizes content by image. For example, the Gallery application displays images in a grid view. 39e41f4b71Sopenharmony_ci 40e41f4b71Sopenharmony_ciGrid views can be supplemented with texts and operations. For example, in the application market, a grid is used to display application icons, brief description, and download buttons. 41e41f4b71Sopenharmony_ci 42e41f4b71Sopenharmony_ciConsider the responsive layout for a grid content page. When switching between landscape and portrait views, a grid content page should be able to scale to fit the screen width. 43e41f4b71Sopenharmony_ci 44e41f4b71Sopenharmony_ci**Multi-choice Page** 45e41f4b71Sopenharmony_ci 46e41f4b71Sopenharmony_ciA multi-choice page enables users to select multiple data items and process them in batches. It is used when multiple choices can be selected for a list or grid. 47e41f4b71Sopenharmony_ci 48e41f4b71Sopenharmony_ci 49e41f4b71Sopenharmony_ci 50e41f4b71Sopenharmony_ci**Details Page** 51e41f4b71Sopenharmony_ci 52e41f4b71Sopenharmony_ciA details page displays detailed description and operations of an application. 53e41f4b71Sopenharmony_ci 54e41f4b71Sopenharmony_ci 55e41f4b71Sopenharmony_ci 56e41f4b71Sopenharmony_ci**Blank Page** 57e41f4b71Sopenharmony_ci 58e41f4b71Sopenharmony_ciUse a blank page if there is no data on the page. 59e41f4b71Sopenharmony_ci 60e41f4b71Sopenharmony_ci 61e41f4b71Sopenharmony_ci 62e41f4b71Sopenharmony_ci**Settings Page** 63e41f4b71Sopenharmony_ci 64e41f4b71Sopenharmony_ciA **Settings** page usually contains all settings of a module. 65e41f4b71Sopenharmony_ci 66e41f4b71Sopenharmony_ci 67e41f4b71Sopenharmony_ci 68e41f4b71Sopenharmony_ci**My Page** 69e41f4b71Sopenharmony_ci 70e41f4b71Sopenharmony_ciFor content-oriented applications, the **My** page is used to carry user information and asset content. 71e41f4b71Sopenharmony_ci 72e41f4b71Sopenharmony_ci 73e41f4b71Sopenharmony_ci 74e41f4b71Sopenharmony_ci**About Page** 75e41f4b71Sopenharmony_ci 76e41f4b71Sopenharmony_ciThe **About** page displays the basic information about the application, including the contact information and legal terms. 77e41f4b71Sopenharmony_ci 78e41f4b71Sopenharmony_ci 79e41f4b71Sopenharmony_ci 80e41f4b71Sopenharmony_ci 81e41f4b71Sopenharmony_ci## Vertical Page Structure 82e41f4b71Sopenharmony_ci 83e41f4b71Sopenharmony_ciVertical provides specific services for specific people. It is a subdivision category of applications. For example, HUAWEI Music and NetEase Music belong to the music category, HUAWEI Video and Youku belong to the video category, and Kuaishou and TikTok belong to the live streaming category. Vertical page structures are widely accepted and understood by users in a specific field. 84e41f4b71Sopenharmony_ci 85e41f4b71Sopenharmony_ciSome examples are provided below: 86e41f4b71Sopenharmony_ci 87e41f4b71Sopenharmony_ciMusic applications have music playlists, music albums, and music playback pages. 88e41f4b71Sopenharmony_ci 89e41f4b71Sopenharmony_ciVideo applications have video details and video playback pages. 90e41f4b71Sopenharmony_ci 91e41f4b71Sopenharmony_ciLive streaming applications have masonry layout–based recommendation and live streaming pages. 92e41f4b71Sopenharmony_ci 93e41f4b71Sopenharmony_ciCommon vertical page structures are as follows: 94e41f4b71Sopenharmony_ci 95e41f4b71Sopenharmony_ci- Music playback page 96e41f4b71Sopenharmony_ci 97e41f4b71Sopenharmony_ci- Album details page 98e41f4b71Sopenharmony_ci 99e41f4b71Sopenharmony_ci- Video details page 100e41f4b71Sopenharmony_ci 101e41f4b71Sopenharmony_ci- Video playback page 102e41f4b71Sopenharmony_ci 103e41f4b71Sopenharmony_ci**Music Playback Page** 104e41f4b71Sopenharmony_ci 105e41f4b71Sopenharmony_ciA music playback page of a music application usually has functions such as music control (play, pause, previous, and next). It also shows the lyric. 106e41f4b71Sopenharmony_ci 107e41f4b71Sopenharmony_ci 108e41f4b71Sopenharmony_ci 109e41f4b71Sopenharmony_ci**Album Details Page** 110e41f4b71Sopenharmony_ci 111e41f4b71Sopenharmony_ciAn album details page of a music application provides functions such as introduction to an album and songs in the album. 112e41f4b71Sopenharmony_ci 113e41f4b71Sopenharmony_ci 114e41f4b71Sopenharmony_ci 115e41f4b71Sopenharmony_ci**Video Details Page** 116e41f4b71Sopenharmony_ci 117e41f4b71Sopenharmony_ciA video details page of a video application usually has functions such as a video player, video episode, and video introduction. 118e41f4b71Sopenharmony_ci 119e41f4b71Sopenharmony_ci 120e41f4b71Sopenharmony_ci 121e41f4b71Sopenharmony_ci**Video Playback Page** 122e41f4b71Sopenharmony_ci 123e41f4b71Sopenharmony_ciA video playback page of a video application usually has functions such as video image preview and playback control. 124e41f4b71Sopenharmony_ci 125e41f4b71Sopenharmony_ci 126e41f4b71Sopenharmony_ci 127e41f4b71Sopenharmony_ci 128e41f4b71Sopenharmony_ci## Special Page Structure 129e41f4b71Sopenharmony_ci 130e41f4b71Sopenharmony_ciSome application pages may fail to be adapted by means of adaptive or responsive layout when switching between devices with great differences. If users also expect a different application architecture, special adaptation is required. 131e41f4b71Sopenharmony_ci 132e41f4b71Sopenharmony_ciFor example, for a page that has both bottom tabs and subtabs, the bottom tabs can be placed on the top toolbar or integrated with the subtabs on the large screen. 133e41f4b71Sopenharmony_ci 134e41f4b71Sopenharmony_ci
