3 seconds to Kill, app guide page How to shine

Everyone forgive my forgetful brain, has been trying to write app experience summary, but do not know where to start, really sorry for the masses, sorry organization, I am sorry for a good kidney. This can not completely blame me, primary school when the Chinese did not test 100 points, afraid to write the light does not ache does not itch, waste reader to accompany the girlfriend time; write too deep, we are not rustic to engage in academic research.

Reader don't worry, brackish end, this goes to the point.

Today's Speaker: How To Do App Installation Guide page (impatient students can jump directly to the second part)

A good App guide page that captures the user's eyeballs the most quickly, and lets them quickly understand the value and functionality of the app, and plays a good role in lubrication and guidance. Well, a good UI can create app clicks. What's the click Rate--it's money!

Before doing the Guide page, we must first learn to locate, know this app belongs to which circle, in the present time, the wrong team is to eat big loss (remember). (Don't worry, the following how to design strategy)

Simply put, there are three kinds of boot pages:

1. Function Introduction Type

2. Emotional Belt Type

3. Funny Play treasure sell Meng Type

1. Function Introduction Type (base initial stage)

Is the most basic, is what to say. Misunderstanding is, the speech wordy, the expression is not clear.

Users need to be on the nail, in such a networked, fragmented era, people stay more and more short, browsing your app interface time will not exceed 3 seconds, in this precious 3 seconds, you need to use a concise, easy to understand the text and interface to present, highlighting the focus on it.

Remember this phrase: The user needs is your copy.

Examples of functional types abound.

Original example: 360 Family Network management

2. Emotional belt type (ascending period)

Go to the kidney or go heart is a problem, you have to go along with the user.

Through copywriting and mapping, guide used to think about the value of this app, the user needs through a certain emotional expression, more visualization, vivid, three-dimensional, enhance the product preheating, so that users have a sense of surprise, I am in this design theme color black, highlighting the stability and safety of products, Directly using the icon to express the situation I want to elaborate, with a more slender line to reflect the content of the introduction of the refinement of the product.

Said a bit of theoretical Kazakhstan, the following to see an example, experience.

Original example: Money for the birth of money

3. Funny Play treasure sell Meng Type

To the magic of decay, the comprehensive use of personification, interactive expression, to learn to play role, storytelling, according to the characteristics of the target users to choose. Let the user immersive, finally make users happy, this type of reading the highest, spelling is the design effect (or animation effect), belong to the advanced stage.

Original example: The meaning of the joke

Ability to see here, do not know whether you have such a doubt:

Does that mean that the Guide page is so important?

Some people say that no one to see no use, some people think there is better than no, there are products feel very important, that is the face of the product. haha ~ actually done or a little use, I feel there are two purposes, preheat and fun. Our designer is to do the user really to see, otherwise we still have what to use AH.

Part II

How do you design a boot page that allows users to stay for 3 seconds?

I have recently done this set of content to guide the column, it is an interesting point plus the design of the Storm point. It might be a little easier to look at. Creation background: This task is based on the content of the 3.1 version of the upgrade, requirements in the 3.12 new version of the show three new features.

At the beginning, I will try to understand the needs of the target users, the need to guide the list, according to the product positioning to come up with different copy, to the design side has been decided to the copy.

It is expected that the whole design cycle is one day and a half, which belongs to the requirement of normal expedited. Time is not much, after getting the copy, how do we understand and locate it?

In the design process first consider the style, itself is a recreational product, so I chose to tell the story. In the previous 3.1 version of the Guide is also used in the more exaggerated performance but lack of entertainment, this time to make the story of the scene to do more strong, more interesting, Uncle Lori come!

Specific design process:

1. Find the material

This is the most important step, the time is urgent, think clearly before you do.

Finding the right is the key, be a design porter, melt into your own story. You can also say that this is a copy, but I just want to have no reservations to the process of drawing me to tell you how to be a flexible designer.

From the petals of the material is very full, the picture has clearly appeared in my eyes. Scenes in the scene, the characters dynamic, expression has been all, now can start to make.

2. Composition + Typesetting

In the design I used the strokes of the expression method, so that the sense of comic sense of the foot is stronger, the character expression can be more exaggerated.

The first step to construct a good diagram to ensure that the set of guidance of the unified, the size of the text. The distinguishing form of key words and so on.

Beginners I suggest setting up three PSD to speak out the points that need to be highlighted. So good to open together to contrast, to ensure the unity of style.

The second step will need to draw the scene has been a line diagram of the way out, in this I directly draw a path with the mouse, personal habits such as the production, so that the lines will be more smooth processing. Hand-painted ability can be directly used in digital plate painting.

3. Post-processing

The first is to deal with the color relationship, the overall color selected a relatively distinct color, each color saturation has been, switching when the contrast is strong.

Second, strengthen the picture atmosphere, the first I used the lightning to highlight the moment to change the feeling of brother, and the depth of the black lines to strengthen the space sense of the picture. And so on, I've also turned this writing element into two other graphs to enhance consistency.

All done, show it.

Summary:

Design method is very important, flexibility is very important. Different needs different play, time is urgent as there are ways to make good things, Prito will block, the UI is not as difficult as imagined.