What are the components of an app?

1. Cold start page

The startup page when opening the APP is usually a simple combination of logo, slogan, version number, product name, company name, Copyright and other information. It appears. The duration is generally within 3 seconds;

There are two ways to start an application: cold start and warm start;

Cold start: when the application is started, there is no application process in the background;< /p>

Hot start: When the application is started, the process already exists in the background.

2. Guidance page

Generally, it is a functional guide for the product, allowing users to quickly understand the product features; the number of pages is usually 1-5 (3 is the most common); content Composed of theme, picture/text introduction, page indicator, skip button, etc.;

Common usage scenarios: new user activation, old user return, major version feature update, etc.

Design Things to note: There should not be too much text information, the theme content should be prominent, the pictures should be in line with the brand tone, and the number of pages should not be too many.

3. Login and register

Generally, APPs will have their own user systems, but a small number of third-party apps with simple functions do not, such as calculators, alarm clocks, weather, etc. in system tools. .

Third-party account login, users do not need to enter information and can directly log in with a third-party account. The process is simplified and the retention rate is improved;

E-mail registration, generally this is the first time to register. Based on the web version;

Mobile phone number registration is usually combined with a password or dynamic verification code.

The above three methods are generally used in combination.

4. Content page

Status bar StatusBar?: Used to present signal, time, power and other information. It is located at the top of the APP interface. The background color can be changed to be consistent with the APP;

Navigation bar NavBar?: Navigation function, located below the status bar, generally displays navigation content, page titles, and can also place search controls, etc.;

Tab bar TabBar?: allows users to navigate on different pages To switch, located at the bottom of the APP, usually 3-5 contents, icons plus text;

Toolbar ToolBar?: often used to display operations on the current page, located at the bottom of the APP, with graphic and text formats based on It depends on the usage scenario, and is generally used for secondary pages;

SearchBar?: Used for searching, the width and height can be customized, and can be located in the navigation or below the navigation.

5. Content form

List form: Each list information can be a separate picture or text, or a mixture of pictures and text, most of which will be distinguished by dividing lines;

Card format: a display format that summarizes similar content into rectangles or rounded rectangles;

Collection view: displays similar information in a tiled format, usually with pictures. , supplemented by text;

Picture format: pure picture display;

Text format: pure text display;

6. List

List layout is very common in APPs. Its characteristic is that it can display multiple pieces of information on a smaller screen, and users can get more information by sliding up and down.

The minimum height for a comfortable list experience is 80px, and the height needs to be determined based on the content.

List layout examples are as follows:

Weibo message list 126px, WeChat message list 136px, QQ message list 132px, NetEase Cloud Music list 110px, WeChat personal center list 88px.

7. Cards

Cards are small rectangular modules containing pictures and text. They are the entrance for users to learn more detailed information.

It is convenient to clearly display the same type of content information, such as information flow, etc.;

In the same page layout, the width of the card should remain unchanged, but the height can be adjusted accordingly. The maximum size of the card The height is based on the height of space available on the platform. Generally, cards or buttons on mobile terminals have at least 2px rounded corners. Without rounded corners, they will be sharp and unpleasant.

The horizontal composition in cards often uses 16:9, 4:3, and 2:1, 3:2 and other ratios are also used.