Brush a red envelope Preheat the design process behind HTML 5

A UV up to 97 million of the HTML 5 page is how to design it? This actual case allows you to feel the full range of Tencent designers abuse! As New Year's Day and the 200 million cash red envelopes warm up HTML 5 designers, today Leo students in the design process of thinking and experience are summarized to share, to learn!

　　At the beginning

First of all, I wish you a happy New Year ~ New Year, every day Monkey Sairey! This year's Eve, QQ red envelopes 200 million of cash everyone estimates are harvested a lot of it (anyway, I was a lot of brush out, oh ha ha!), and in everyone's brush behind the brush, we also carried out a In addition to the important functional experience of the national Brush Brush, New Year's Day and Eve we have done preheating promotion of the H5, to inform users of the activities of the relevant information and content and let users interested in this activity. Preheat promotion will affect the user participation in the brush of the number of activities and participation experience, so to create a good experience preheating H5, need planning, technology, design close cooperation, then design in which to do what work, this story let me explain ...

　　The baby has a little pain in her mind

"That New Year's Day brushes a red envelope to preheat H5, you come to do under Bai?" Oh... Good ~ "When I take this operation, according to the previous experience of operating, it is not expected to be too difficult to get." Soon, the operation of the children's shoes to guide me to explain and communication needs, communication started very happy, and then they and I said this hope to be a notice to the user of the time of the warm-up H5 activities, and give some of the following needs and some risk points:

This H5 needs to educate the user to brush a brush the operation way, need to tell the user clear to rob the red envelope time, who sends the red envelope, needs to have the clear time line.

In addition to the last page, there can only be drop-down this kind of interactive action (click Ah, left stroke does not appear).

The picture needs to be exquisite (the routine is so required).

The entire timeline section is best displayed within 3 screens, with one screen expected to be the full timeline.

Want to have to stimulate the user to share content.

The specific stars, business and total stars, and the number of enterprises involved in the activity are difficult to finalize and may be adjusted several times.

Time is not close to the line also have changes and adjustments possible.

......

The Groove? As soon as I heard it, I was a total idiot. This demand seems to be a big challenge ah ....

　　A flash of inspiration.

Meng force no eggs, hard work to solve the truth. In the middle of my head, I had a flash of light! To meet the conditions mentioned above, so long as this is OK! So out of this stuff:

This simple and good implementation, clear operation, time line integrity, the middle to modify the words also very good adjustment, above the demand seems to be able to meet, ha ha ha haha ... So "simple and complete" a plan, of course, is ~

First of all, as a designer of the pursuit of swelling can be so casual? Moreover, this demand is a promotional operation, it needs to attract users to participate in and promote the publicity purposes, so I personally think at the design level it should have the following points:

Need to convey a clear message

It should be related to the function you need to promote.

The keynote thread runs through activities (or hotspots or topics).

visual style and feeling with a sense of atmosphere, a certain visual impact

The whole event has a bright spot, with some interesting ideas and details

From these points of view, the above so-called "scheme" is in fact completely inconsistent. To meet the needs of the operation, but also in the design to meet the requirements, so or down-to-earth seriously think it ~

　　Officially started

　　Topic keywords

First or to determine the tone of the entire activity, this operation is about hand Q on New Year's Day to preheat the function of "brush a red envelope" activities to promote, therefore, the theme of this H5 should start from New Year's Day, but New Year's Day since the Republic of China is no longer a traditional festival, the reference point is not much, so through the discussion, combined with demand, Come to the keyword: joy.

We've got a brain storm in the back of the subject keyword, I think of the former and friends in a play Monopoly game is very happy scene, and Monopoly game can also have money with red envelopes, so we put the tycoon as a keyword after the image of the carrier, and extract elements used in the design. As for the millionaire game, it looks like this:

▲ screenshot from "Monopoly 7" game

　　The relevance of function and activity

To determine the tone and carrier elements of the activity, next we have to consider how to make this H5 preheating and the "Brush a red envelope" this function to have a connection, in addition to the appearance of red envelopes, brush a brush action is also required to educate users in advance, so planning to let H5 only a drop-down of the interactive operation, through repeated Drop-down (which became a brush), Let the user imperceptibly. In the action, we use some common sense of life as the basis, pull down as the next way to start, give users instant feedback (such as pulling the curtain, pull clouds, turn on the lights, etc.), so that users in this H5 feel natural and not abrupt. Finally, through the H5 after the video intuitive to inform users how to participate in the brush a brush activities, the function and activities.

In combination with the above, we have to share, adjust the problem, the details have also been discussed and worked out the plan, these points we will mention later, let us look at the whole plan first!

...... Well, because the sketch is too grass to understand, so just look at the visual manuscript to say: