according to the purpose and starting point of the guide page, it can be divided into function introduction category, instruction category, promotion category and problem solving category. Generally, the guide page will not exceed 5 pages.

1. Function introduction class

The function introduction class guide page mainly shows the main functions of the product, so that users can have a general understanding of the main functions of the product. Most of the forms adopted are displayed by means of text, interface and illustrations.

Taking Yixin as an example, the text is divided into two levels by combining text with watercolor illustrations, namely, headline and subtitle. Headline is a summary of the main functions, while subtitle is a detailed description or further supplementary explanation of its functional modules.

2. Use the instruction class

Use the instruction class guide page to inform users in advance of the difficulties, unclear operations and misunderstood operation behaviors that may be encountered in the process of using the product. Most of these guide pages are marked with arrows and circles, mainly in hand-drawn style. Taking Xiami Music's guide page as an example, the arrow guide to the operation mode of playing queue and lyrics that is difficult to find is explained.

3. Promotion category

In addition to introducing some product functions, the promotion category guide page wants to convey the attitude of the product, so that users can better understand the feelings of the product and consider the consistency with the whole product style and company image. If this kind of guide page is not attractive enough, users will only want to cross it impatiently. Users will stop to watch the well-made and interesting guide page.

Taking taobao travel as an example, taobao travel creates a product through illustrations of fresh and life-like scenes. It is a travel application that enjoys life and follows your feelings. It helps you plan all the travel arrangements before you travel, just one suitcase, and then you can leave, which is in line with the product concept. Another application uses quiet and comfortable photos with simple words to render the tone of the product.

4. Problem-solving class

The problem-solving class directly hits the pain point by describing the problems that will be encountered in real life, and makes users have emotional connection through the final solution, which makes users have a good impression on the product and increases the viscosity of the product. For example, the guide page design of QQ browser directly and clearly shows that QQ browser has solved the problems encountered by other browsers (unable to find novels, spending money on reading novels, updating novels, etc.).

second, the way of expression

1. Combination of text and interface

This is the most common guide page. Short text+interface of this function is mainly used in the function introduction class and instruction class guide pages. This way can directly convey the main functions of the product, but the disadvantage is that it is too modular and looks the same.

2. Combination of words and illustrations

The combination of words and illustrations is also one of the common forms at present. Illustrations are more concrete, mainly using scenes and photos to express the text content.

3. Dynamic Effects and Music

In addition to static pages, pages with dynamic effects have become popular. In the form of animation on a single page, consider the speed of each component, break the original silence and make the page move. At the same time, considering the dynamic effect, we can consider the way of switching between pages, changing the default left-right sliding to up-and-down sliding or automatically switching to the next page in a few seconds. When browsing the guide page, you can try to add some music in line with the dynamic rhythm, which will be a more novel way.

4. Video presentation

After opening, you can introduce a product or convey an idea by playing a video. This method is more common in the application of life record, such as taking photos and sports, which conveys youthful vitality and positive and optimistic attitude towards life. Advantages: intuitive, dynamic and life-oriented. Disadvantages: the application is large, and the video playback will be stuck.

III. Summary

The above has been classified according to the purpose differences and expressions of the guide pages, and some principles should be paid attention to in the specific design, which will make your design more attractive and the effect of information transmission better.

1. The copy is concise and to the point, highlighting the core.

According to the 7 2 effect observed by the Irish philosopher Hamilton, a person can recall at least 5 words and at most 9 words in short-term memory, that is, 7 2. Therefore, the displayed copy should be controlled within 9 words, after which users will easily forget and have memory deviation. If it is difficult to express, you can assist a short paragraph to explain or supplement. Therefore, in the determination of the final copy, it is necessary to highlight the key points and delete the redundant words as much as possible. If the number of words is still too much after the copy is deleted, consider layering the text and visually optimize it by means of spaces or commas or line breaks.

Accurate and appropriate copywriting is also very important, which translates professional terms into a language that users can understand. Especially for the design of the guide page that expresses the theme through photos, the coincidence between the copy and the photos directly affects the effect of emotional communication.

2. Visual Focus

In a single guide page, there should not be too much information, only one purpose is stated, and all the elements are unfolded around this purpose. Visual focus includes two parts. First, the handling of copy should pay attention to the level, and the main title and subtitle should be in contrast; Second, the interface, scene and copy elements in the guide page should have a visual focus point. The layout of multiple visual elements adopts the central diffusion method, and the visual area of the focus point is the largest, and at the same time, it is compared with the diffused elements. In this way, users can clearly see the visual expression elements corresponding to the core copy information and the copy. At the same time, combined with the law of line of sight flow, from top to bottom, from left to right, from big to small. Therefore, the guide page can be designed according to the law of this line of sight flow.

The following picture shows the guide page of Tmall client. By analyzing its visual flow, it is found that the order of browsing is from illustration to main copy, and then to auxiliary copy. The disadvantage is that the illustration is the first time to see it, and it is relatively difficult to understand the text, so the main information of the page cannot be obtained quickly. It is better to consider swapping the positions of the copy and the illustration.

3. Affective influence

A. Copywriting concretization

Copywriting is expressed by concrete elements and scenes, and it is expressed in a realistic and semi-realistic way, and some applications will be accompanied by watercolor style. Take Tmall as an example. Tmall is a shopping application. In design, it renders a relaxed and cheerful shopping process through the concrete depiction of the actual scenes of shopping malls and shops.

B, page dynamic effect, differentiation of interaction between pages

Before, the classification of expression modes has already talked about animation and page switching mode. If page dynamic effect is increased, using dynamic effect, including enlargement, reduction, translation, scrolling and bouncing, the expression forms will be more diversified, which will make the guide page more interesting and more focused.

In addition to the traditional way of sliding cards left and right, the switching mode between pages can be guided by lines and arrows, usually with dynamic effect. For example, Netease News Client, Impression Notes and Food Notes have adopted lines as the main line in the design of the guide page, and small dots show the current browsing progress, which has the effect of scrolling parallax in the process of sliding.

4. Consistent with the product and company tone

The guide page should be consistent with the product and company image in terms of visual style and atmosphere, so as to set a corresponding tone for the product before the user uses the specific product. The characteristics of the product determine the style of the guide page, whether the product is consumer, entertainment, tools or other. According to different product characteristics, it determines whether the guide page is light and entertaining, small and fresh, or regular and interesting. In the final form of expression, it will be completely different, whether it is illustrations, interfaces, animations or other. Such as Taobao's entertainment, Douban's fresh literature and art, Baidu's tools, cicada's travel notes, etc., through comparison, we can find their differences in guide page design.

on the one hand, it is beneficial to the product in one continuous line, which is consistent with the product experience; On the other hand, it will further strengthen the company image.

Take Huihui as an example. Huihui is an instant messaging application for individual users. It focuses on functions that are not as interesting as WeChat, such as gathering together, burn after reading, knocking at the door, and it also wants to create different IM communication methods for users. Therefore, in the design of the guide page, it is such an interesting and joyful product to express communication through interesting and even a little funny actions and expressions.

Another example is netease lottery, where the main color of the guide page is red which is consistent with Netease's own red, thus maintaining a high degree of consistency in the company's product system.

in a word: to design the guide page well, on the basis of understanding the user's demand for the guide page, we should cherish the feelings of loving the product, rely on exquisite layout, ingenious conception, appropriate atmosphere rendering and add a little feature. Of course, just talking is boring, but designers still need to practice in specific design, sum up new ideas and methods, and explore a unique guide page design.