From the App load page

One of the most agreed criteria for interactive design is "Don't Let me Wait," but Internet products are always subject to actual network problems. Mobile end products are more obvious, 2G, 3G environment load is not enough to power, WiFi environment may not always be so smooth. So "Don't let me Wait" is more like a wild hope, we should think about is "how elegant but not irritating". The most direct connection is the design of the app load page.

An app loading page is roughly divided into 3 categories:

(i) Start load page

Boot loading is the first glimpse of the app we've seen. will give the user the first impression of the product.
Typically, you start the load page design in several ways:

1, fixed loading page

Logo, slogan, product main color, version number, production team, this is the basic elements of the initial start page, the designer's goal is the most direct and fast to the user to convey product image, which is to allow users the most direct understanding of the product of one of the means. But also because the realization of low cost, and the style fixed simple, over time easy aesthetic fatigue. The load page starts to upgrade.

Here's how to make the load page less isolated and abrupt:

Visual Continuity

。 For example, Weiconote's load page background is consistent with its main interface background and visually achieves a harmonious transition.

The use of

dynamic

。 Make it a perfect transition to load pages and content pages through transitions such as fading out or opening doors. For example http://www.aliyun.com/zixun/aggregation/8546.html "> Watercress Film and Day cat client."

2, Variable load page

What happens when a dusty load page starts looking for a way out? Yes, the load page will change. But any change has to be traced to the user to understand. There are currently 2 dimensions:

1. Holiday Custom Load Page

At different festivals, the launch load page will be designed around festivals & products. It is an example of affective design to convey festival information while highlighting product image. For example, Palm Baidu Symbian.

Another interesting example is the launch page for some apps, the eggs that are laid on the user's birthday: This is a means of diverting attention from the user, so that the user is no longer immersed in waiting, but through this waiting time to convey other useful information, so that users no longer irritable.

2. Custom load page for different versions

When the app version is upgraded, the boot load page is upgraded to design a load page that conforms to the current version's theme, features, or new features. Also enhances the user to the new version, the new function cognition degree.

(on the left Sina Weibo summer edition \ on right Sina Weibo New Year edition \ Next left Zaker embed the game Animation forum advertisement)

3. Startup page with the main interface

Using the app's content page as the content of the startup page, from the start load page to the completion of the loaded homepage, the layout content can hardly see the difference. Such a launch page, allowing users to advance into the main interface, to enhance the user's impression of the main interface. It is not easy to create a great sense of visual jumping. But there are problems, such as the main interface of the load page will give users the illusion of usable, but if the loading time is too long, click Pseudo Homepage If no response, may annoy the user.

(Pull time)

4. Start Page with animation

In the game app, this way is more common, in the process of loading, the user sees is a piece of dynamic flash. Sometimes it is possible to match music with related games. For example game Subway surf. While this approach is most media-rich, it also consumes resources. Sometimes because the load burden is too heavy, even cause the picture is not smooth. So you need to choose carefully.

(ii) Content loading page

At present, the more common content loading page will be loaded modal box to represent the current loading, it is not very beautiful, and before loading and loading of the page is very weak correlation. This experience is really a headache and displeasure.

(Zaker)

Is there a good experience with content loading?
Several optimization methods:

1. Increase the correlation between loading pages to avoid using modal boxes

such as line notification loading. The load process is on a loaded notification item, which does not prevent users from browsing the content.

2. Displays the loaded page style at load time to maximize visual continuity

This approach is to as much as possible in the loading process to inform users of effective information, "you will soon see what kind of page" "What will be the content", so that users have a forecast in advance, but also let users have the desire to wait.

(Flipboard)

3. pre-filled content when loading

There are 2 kinds of content here. It can be preset well in advance, such as the head figure in next day, and the lovely bunny chart is replaced before it is loaded. Another is, display last browsing left content, like the recently updated path, load, users can see the last load successful content, and very clever to load the picture in black and white processing.

(iii) Download, application load page

Another common load is loading pages when downloading/applying. The process of downloading and applying can be seen as a coherent process. Instead of imagining two separate modal boxes.
In Cardmon this application, the process of downloading and applying is packaged into a continuous and exquisite process.
The designer found the link between card and download, using the cloud to send cards to the envelope of the dynamic effect, coupled with the download progress bar, so that the original boring download waiting for the process to show a glimmer of anger. After the download is complete, the progress bar is a logical transition to the installation process. The animation effect is still around the previous card logo. The same installation progress bar can still prompt the user for the remaining time.

The main point of this packaging method is to find a link between the product and the download, reasonable use of dynamic effect, progress bar, continuous processing download installation process.
The other is the Weico theme download, which will be downloaded and installed as an independent two process. Downloading and installing separate usage scenarios Typically, users may want to browse, download multiple topics, and then determine which to use. Therefore, the download is processed to replace the download button's progress bar will be more appropriate, rather than modal boxes. Because such loading mode does not affect the user to browse other content, will not let the download mode interrupt the user's original browsing behavior.

These are the several forms and design methods of app loading. Seemingly obscure loading page is actually the whole app is the focus of the heart and exquisite pen. This bit of latency may change the entire user experience. To sum up, the above advocated several principles:

1. Make reasonable use of the startup page, give more meaning to the waiting time 2. Avoid using modal interrupts to interrupt users 3. Load pages, provide users with expectations, and more meaningful information 4. Attention to maintain visual coherence

Source Address: http://mux.baidu.com/?p=3411