How do I design a popular boot page?

Welcome to the entrance, the generous enthusiasm or humility and orderly? Is it a decorated or plain? For the boot page, it all depends on the tone of the product. Today to share a good article, for different types of software, put forward practical concrete recommendations, is a guide to the design of a rare good tutorial, hurry to learn!

When you first open an application, you will often see a beautiful guide page design, they do not use the product ahead of time to inform you the main features of the product, the first impression of the good or bad will greatly affect the subsequent use of the product experience. So each company is trying to design these pages, from the very beginning of the fascinating. Then I'll discuss the design of the Guide page with you.

One, the purpose distinguishes

Depending on the purpose and starting point of the Guide page, it can be divided into functional introduction classes, usage descriptions, promotional classes, problem solving classes, and no more than 5 pages on the General boot page.

　1. Function Introduction Class

Feature Introduction class Guide page is mainly the main function of the product display, so that users have a general understanding of product main features. Most of the forms used in the text with the interface, illustrations of the way to show.

Take easy letter As an example, the use of text and watercolor illustrations in the way, the text is divided into 2 levels, the title and small title, the title is the main function of the general, small text is a detailed description of its functional modules or further explanation.

2. Use Description class

Using the Description Class Guide page is to inform the user in advance of the difficulties, unclear operations, and misunderstandings that may occur during the use of the product. This kind of guide page mostly uses the arrow, the circle carries on the marking, mainly by the hand-painted style. Take the guide page of the shrimp music as an example, the more difficult to find the play queue, the operation of the lyrics of the arrow guide to explain.

　　3. Promotion Class

Promotional Class Guide page in addition to a number of product features, more is to convey the attitude of products, so that users understand the feelings of this product, and consider the entire product style, the company's image consistent. This kind of guide page if do not attract people, users will only impatient to quickly across. And the production of sophisticated, interesting guide page, users will stop to watch.

Take Taobao travel For example, Taobao travel through the fresh, living scene illustrations to create a product is a happy to enjoy life, follow the feeling of travel applications, before you travel to help you plan all the itinerary, as long as a suitcase, said go on go, and the concept of the product fit. And another application, choose quiet, comfortable photos with concise text to render the tone of the product.

　4. Problem Solving Class

Problem solving class by describing the problems encountered in real life, direct hit pain point, through the final solution to allow users to produce emotional contact, so that users have a good impression of products, increase product viscosity. For example, the QQ Browser guide page design, through the image of the illustrations directly and clearly explain the QQ browser to solve the problems encountered by other browsers (not search the novel, read the novel to spend money, the novel needs to update, etc.).

　Second, the way of expression

1. Text and interface combination

This is the most common guide page, a short text + interface for this feature, is mainly used in functional introduction classes with instruction class guide pages. This way can more directly convey the main function of the product, shortcomings in and too stereotyped, appear to be stereotyped.

　　2. Combination of text and illustrations

The combination of text and illustrations is also one of the most common forms at present. Illustrations are more like, to use scenes, photographs mainly to express the text content.

　3. Dynamic effects and music

In addition to static pages, the beginning of the popular dynamic effects of the page. In a single page using the form of animation, consider the various components of the speed, break the original silence, let the page move up. At the same time, combining the dynamic effect can consider the way to switch between pages, the default left and right to slide up and down or a few seconds to automatically switch to the next page. When browsing the boot page, try adding some music that matches the rhythm of the action, which is a much more novel way to go.

　4. Video display

After opening the video by playing the way to introduce products or convey a concept, this way more common in the application of biased living records, such as photography, sports applications, to convey youthful vigor, positive and optimistic attitude to life. Advantages: Intuitive, dynamic, living. Disadvantage: The application of a large, video playback will appear cotton situation.

　　Third, summary

The above has been on the Guide page for the purpose of the difference and presentation of the relevant classification, in the specific design of some principles, they will make your design more attractive, information transmission effect better.

　1. copywriting, highlighting the core

According to the Irish philosopher Hamilton observed the 7±2 effect, a person's short-term memory can recall at least 5 words, up to 9 memories, that is, 7±2. Therefore, the display of the copy to control within 9 words, more than the user is easy to forget, the memory bias. If it is difficult to express, you can help to explain or supplement a short paragraph of text. Therefore, in the final copy of the determination, to highlight the focus, superfluous text as far as possible to cut. If the copy after the deletion of words or too much, because of the consideration of the text to be layered, through the space or comma or line-wrapping way for visual optimization.

Precise and appropriate copywriting is also important, translating professional terminology into a language that the user understands. In particular, the design of the guide page through the photograph, the coincidence degree of the copywriting and the photograph directly affects the effect of the emotion transmission.

　2. Visual Focus

In a single boot page, the information should not be too much, only one purpose is stated, and all elements are expanded around that purpose.

Visual focus includes two parts, one is the processing of copywriting, to pay attention to the level, the main title and subtitle to form a contrast; the second is to guide the page of the interface, scene, copywriting elements, to have a visual focus, the arrangement of multiple visual elements using the center of diffusion, focusing on the visual area of the largest, while with the spread of the elements of the contrast. So users can clearly see the core copy information and copy of the corresponding visual performance elements. At the same time, combined with the flow of sight of the law, from top to bottom, from left to right, from large to small. Therefore, the design of the guide page can be carried out according to the rule of the line-of-sight flow.

The following figure is a guide page for the cat client, analyzing its visual stream discovery, the sequence of browsing is from illustration to main copy, to auxiliary copy, the disadvantage of the first is to see the illustrations rather than the copy, the illustrations relative to the text understanding is relatively difficult, so you can not quickly get the main information on the page, you may consider the location of the copy and the illustrations to exchange, This will be better.

　　3. Emotional

A. copywriting

Through the concrete element, the scene manifests the copywriter, uses the realistic, the half realistic way carries on the performance, some applications also may with the watercolor style. Take the day cat as an example, the cat is a shopping application, in the design through the shopping malls, shops, the actual scene of the specific description, rendering easy, cheerful shopping process.

B. Page dynamic, interaction between the pages of the difference between

Prior to the presentation of the classification of the animation and page switching mode, if the increase in the page dynamic, use of dynamic, including amplification, reduction, translation, scrolling, bounce, more diverse forms of expression, will make the Guide page more interesting, more focused attention.

And the switch between the pages in addition to the traditional card sliding around the way, can be combined with lines, arrows and other guidance, usually with the dynamic effect. For example, NetEase News client, impression notes, food memory, they are in the design of the Guide page used as the main line throughout the Guide page, small dots show the current browsing progress, sliding process has the effect of scrolling parallax.

　4. Consistent with product and company tone

The Guide page in the visual style and atmosphere of the creation to be consistent with the product, the company's image, so that users have not used specific products before the product set a corresponding tone. The characteristics of the product determines the style of the Guide page, the product is the consumer class, entertainment, tools or other, according to the different characteristics of the product to determine the guide page is to go easy entertainment, small fresh, or regular, interesting style, in the final form of expression will have a completely different show, is the illustration, interface, animation or other. such as Taobao Entertainment, fresh watercress, Baidu's tools, the cicada travels leisure and so on, through contrast can find their guide page design differences.

On the one hand, the product is in line with the product use experience, on the other hand, will further strengthen the company's image.

For example, between the exchange is a personal user for the timely communication applications, the main cluster, after reading that burning, knocking and so on and micro-letter is not as interesting function, but also want to create a different way of IM communication. Therefore, in the design of the Guide page through interesting, even a bit of funny action and expression to show the interaction is such an interesting, happy many products.

Also such as NetEase Lottery, guide the main color of the page selected with NetEase itself red consistent red, in the company's product system to maintain a high degree of consistency.

　　Summarize

Want to do a good job of guiding the page design, in understanding the user on the basis of the demand for the Guide page, with a passion for product feelings, rely on exquisite layout, ingenious ideas, appropriate atmosphere rendering, add a little bit of characteristics. Of course, the light is boring, or need designers in the specific design of continuous practice, summed up new ideas and methods to explore the unique guide page design.