1# Application Page Structure Design
2
3
4## Common Page Structure
5
6An application consists of multiple pages. The following describes common application pages and their structures.
7
8**Launch Page**
9
10For 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.
11
12![one-to-many-application-architecture-launch-page](figures/one-to-many-application-architecture-launch-page.png)
13
14Users 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.
15
16When 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.
17
18**List Content Page**
19
20A list content page usually displays text and data.
21
22![one-to-many-application-architecture-list-content-page](figures/one-to-many-application-architecture-list-content-page.png)
23
24Data 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.
25
26A 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.
27
28The content to be displayed in a list must be hierarchically clear so that users can get important information and operations at a glance.
29
30**Grid Content Page**
31
32A grid content page usually displays images or videos.
33
34![one-to-many-application-architecture-grid-content-page](figures/one-to-many-application-architecture-grid-content-page.png)
35
36A grid content page displays items of the same importance level with a unified layout.
37
38A grid content page primarily organizes content by image. For example, the Gallery application displays images in a grid view.
39
40Grid 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.
41
42Consider 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.
43
44**Multi-choice Page**
45
46A 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.
47
48![application-architecture-common-page-structure-multi-choice-page](figures/application-architecture-common-page-structure-multi-choice-page.png)
49
50**Details Page**
51
52A details page displays detailed description and operations of an application.
53
54![application-architecture-common-page-structure-details-page](figures/application-architecture-common-page-structure-details-page.png)
55
56**Blank Page**
57
58Use a blank page if there is no data on the page.
59
60![one-to-many-application-architecture-blank-page](figures/one-to-many-application-architecture-blank-page.png)
61
62**Settings Page**
63
64A **Settings** page usually contains all settings of a module.
65
66![one-to-many-application-architecture-settings-page](figures/one-to-many-application-architecture-settings-page.png)
67
68**My Page**
69
70For content-oriented applications, the **My** page is used to carry user information and asset content.
71
72![one-to-many-application-architecture-my-page](figures/one-to-many-application-architecture-my-page.png)
73
74**About Page**
75
76The **About** page displays the basic information about the application, including the contact information and legal terms.
77
78![one-to-many-application-architecture-about-page](figures/one-to-many-application-architecture-about-page.png)
79
80
81## Vertical Page Structure
82
83Vertical 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.
84
85Some examples are provided below:
86
87Music applications have music playlists, music albums, and music playback pages.
88
89Video applications have video details and video playback pages.
90
91Live streaming applications have masonry layout–based recommendation and live streaming pages.
92
93Common vertical page structures are as follows:
94
95- Music playback page
96
97- Album details page
98
99- Video details page
100
101- Video playback page
102
103**Music Playback Page**
104
105A music playback page of a music application usually has functions such as music control (play, pause, previous, and next). It also shows the lyric.
106
107![application-architecture-vertical-page-structure-music-playback-page](figures/application-architecture-vertical-page-structure-music-playback-page.png)
108
109**Album Details Page**
110
111An album details page of a music application provides functions such as introduction to an album and songs in the album.
112
113![application-architecture-vertical-page-structure-album-details-page](figures/application-architecture-vertical-page-structure-album-details-page.png)
114
115**Video Details Page**
116
117A video details page of a video application usually has functions such as a video player, video episode, and video introduction.
118
119![one-to-many-application-architecture-video-details-page](figures/one-to-many-application-architecture-video-details-page.png)
120
121**Video Playback Page**
122
123A video playback page of a video application usually has functions such as video image preview and playback control.
124
125![one-to-many-application-architecture-video-playback-page](figures/one-to-many-application-architecture-video-playback-page.png)
126
127
128## Special Page Structure
129
130Some 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.
131
132For 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.
133
134![special-page-structure](figures/special-page-structure.png)