Six types of loading loading styles for apps

Today this article is to share the loading load of the design, the article will have some examples in this share to everyone!

Most apps have to exchange data with the server, the app sends a data request to the server, the server transmits the data to the app after it receives the request, the app receives the data content after it is successfully received, and the feedback data receives the failure without receiving success. In this data exchange process, due to network reasons, it takes a certain amount of time, that is, the user to wait for the load to complete, this time to use the loading loading mechanism, it tells the user, the app is trying to load the data for you, you have a little bit. Good loading design can weaken the user's waiting anxiety, unreasonable loading design will let the user scold father dozens.

① title bar Loading

　　

Nail & Nails

, nails, etc. are used in this form. Chat List page Chat history is stored locally, so the content of the page is not empty. This time the load does not need to get the user's visual focus, as long as the title bar show the app is loading, loading success then the title bar loading disappear, if because the network error is not connected to the server, the title bar shows the disconnected state.

② White screen Loading

　　

This white-screen loading style is used when the page content is relatively single and needs to be loaded once. This mode of loading the user will not see anything until the full load is complete, so once you have been too long, be sure to prompt the user for what causes the load to fail, instead of always going around. At the same time, the load icon is more interesting, but also to alleviate the anxiety of the user waiting (above the right image is better than the left image to make users feel Good).

③ progress bar

　　

safari&

The loading style of the progress bar is found in browsers, including the PC-side and mobile browsers. Some app pages will be H5, and most of the pages will use the style of the progress bar to show the loading process.

④toast

　　

When a user performs an action, in order to prevent the user from continuing the operation causing the data load to fail, the style of the toast is used to prompt the load while restricting the user from continuing. In this case, the user can only perform operations that return to the previous level of the page, and other actions are disabled.

To prevent the data from being loaded, you can add a Cancel button on the toast to allow the user to actively stop the loading state, because the load data fails very rarely, so there are not many apps with the Cancel button on the toast.

⑤ drop-down refresh

　　

Drop-down refresh is widely used in most apps, this loading mechanism ensures that users can see the local cache data, but also to inform the user page is refreshing, at the same time, the user can also choose to reload the data by the gesture action of the pull down, to a certain extent to meet the obsessive-compulsive disorder patients.

⑥ Preset map/placeholder

　　

When the frame of the page is fixed, only the data in the frame needs to be loaded, using the refresh style, which is to load the frame and then load the data within the frame. To the extent that the contents inside the frame are empty, placeholders or preset images are used to populate them.

The above simple to introduce six kinds of common loading loading style, although there are six styles, but in fact, there are only two loading principle: one is the overall loading of the page data, loading completed once the display, the second is to load some of the content, and then load the rest of the content (load the text before loading the picture; Load the frame before loading the data in the frame).

I often say that the design form is always to serve the function of the product, and the product function is to meet the needs of users. Understand the design forms of these loading loads and think about them in more depth: These forms are designed to reduce the anxiety of users waiting for data to load. So is there a better mechanism to reduce the anxiety of users waiting? Yes, of course.

First: Optimize the app loading algorithm, make the app and server interaction data time is brief. This requires the development of the excellence of the staff. This fundamentally solves the problem because it directly reduces the time it takes to load the data, which reduces the time the user needs to wait.

Second: The use of pre-loading mechanism. For example, when the user looks at the first page, the app loads the next few pages in the background, and when the user turns to the second page, it doesn't have to wait to load, because the app has already helped the user to load it up early. This loading mechanism is particularly good for the user experience, but there is a problem, that is, to predict user behavior, load other data, which consumes a lot of traffic, it is recommended to take this pre-loading mechanism in the WiFi network environment, and in the cellular network state does not adopt the pre-loading mechanism. This will discuss communication with the developer to ensure that the preload mechanism works perfectly.

Third: Asynchronous processing. This is a good app for Instagram, and I don't know if you've noticed that you'll feel particularly smooth when using Instagram, even when the network is bad. Why is this? Because in the network bad situation, you give a good friend, Instagram does not prompt you the network is not good, the operation failed, but prompted you praise success, in fact, it just will you praise the operation of the record down, and so on the network a nice to the behavior of praise to the server, to complete the praise behavior. This is to reduce the user's operational burden, let the product to solve the problem, rather than throw the problem to the user.

Keep in mind that there are six types of loading loading styles that are common in the app, and of course there are other load design styles, but what does it matter? You have mastered the principle of product loading, really understand the loading mechanism, so that you can status quo.

Six types of loading loading styles for apps