“100 Things To Do In Life” Why Make Your Friends Circle?

Editor’s note: This article comes from WeChat public account “NetEase H5” (ID: wangyih5) .

Author | 玖 柒 & 玖 柒 十

Edit |||

In the past two days, many people have revealed “100 Things to Do in Life” in the circle of friends.

Swipe the screen again, everything about H5 in

From 6 pm on February 21 to the present, this H5 hit has reached 23 million, and the same-name Weibo topic has also been read 24 million.

Swipe the screen again, everything about H5 in

“A lifetime is short. Spend time on meaningful things.”

Busy life makes people forget the passing of time, and complicated and inefficient life can easily make people lose their enthusiasm.

And this H5 has ignited everyone’s passion for life and has new expectations for their own lives.

Netease Da Da also proved once again:

H5 is still a screen-sharp weapon.

We interviewed the colleague of Da Da, and fully restored everything of this explosive H5. I believe it can bring you a lot of inspiration.

01.H5 creative ideas

In the beginning, Netease set the direction of H5’s topic selection to “list” content, and planned to make a H5 that everyone can participate in and would like to share.

Follow this idea to find topics that can reach more people and be relevant to everyone’s life, so I will refine the idea into a “life list.”

The next step is to verify whether the topic is discussed.

During the search process, the DaDa team saw a lot of “100 must-see books in life”, “100 high-scoring movies that must be watched in life”, “100 wish lists”, “100 couples “Things to do” topics such as completion topics are hotDegree is quite high.

Swipe the screen again, everything about H5 in

Setting the content of the list as 100 things is more specific than the simple “life list”, and it can produce more obvious differences in numbers. Therefore, the theme is set as “100 things to do in life” .

There are always people who think that they are still young and that everything is still early. I do n’t know how time is passing by.

Now, “100 Things To Do In Life” remind you that you still have a lot of things you haven’t done.

Some people say that this H5 is setting limits on our lives, but it is not.

There is no limit to life. The DaDa team just puts out everyone’s life experiences and aspirations separately, and summarizes them into “a reference life”.

When you are watching the lives of others, you are also remembering your own life.

You will regret that you have missed a school love; you will also remember the blushing heartbeat when listening to a song with someone you like.

What you think of a bland life is actually very meaningful.

02. Content filtering

The screening of 100 events can be said to be the most difficult step in the entire H5 plan.

NetEase’s planning team has screened a large amount of information on various websites to investigate what more people think of “must-do things in life”.

Then we voted repeatedly, letting everyone choose the “most wanted”, “most regrettable”, and “least felt”.

Sieving again and again took a lot of time.

Emotions involved, users are strongly related

Because it is “100 things to do in life”, being too niche and personalization is not good. These options should cover more ordinary people. Many people have experienced, longed for, and regretted things.

There are also some things that are relatively common, such as wearing contact lenses and piercings. Although many people have experienced them, they have no meaning and cannot be linked to emotions and memories.

So these options are also passed.

And the things that are most related to most of us that are likely to affect our emotions are mostly related to family, love, friendship and dreams.

So there are “take a family portrait”, “meet someone you love”, “talk to your friends all night …”

A netizen joked that this “100 things to do in life” requires money to complete.

IfIt’s true that everything must have strong economic strength. It is better to call it “100 Things You Can’t Do in Life.”

“Buy gifts for parents with the first salary”, “Write a letter to future self”, “Say to my family I love you” …

These are fortunate little things in the lives of ordinary people. There are no thresholds, but they are very meaningful.

And there are other things that happen only at certain ages. Once you miss them, you can never go back.

“Talking about a campus love”, “Inviting relatives and friends to attend the graduation ceremony” … If you haven’t done it before, you will feel regretful.

Sorry, memories, moving, inspiration, these small emotions affect our hearts, and also let everyone have different feelings for this H5, and they are more willing to express themselves by sharing it.

Relax participation

Given the playability of H5, you can’t set everything too difficult or too easy.

In order to prevent people from different understanding of the event options, there will be a specific matter on the copy, and the participation requirements will be relaxed as much as possible so that everyone can get more satisfaction.

For example, “(formerly / was) living with pets”.

If it ’s just “a pet,” some people who have once owned a pet and do n’t have a pet now may ignore this option.

And “Living with pets” will evoke many childhood memories of those who had pets as a child.

Some things that should have been overlooked and thought they hadn’t done it. By relaxing the specific description, many people can think of “ah, I did this kind of thing before”, which can affect everyone’s memories.

03. Visual Design

Overall style

The pattern, color, and text present a good visual impression to the user and can easily capture the user’s attention.

“100 Things To Do In Life” is striking when you open the screen.

The highly saturated yellow represents liveliness and vitality. The entire H5 is brightly colored and conveys rich and colorful feelings, bringing visual dynamics and tension.

Swipe the screen again, everything about H5 in

The flat illustration style is advanced but not naive, and the large area of ​​color blocks is simple and intuitive, showing a modern and stylish sense.

In order to determine the design style of the entire H5, the designer has tried different styles of illustrations many times.Every illustration communicates with the plan in time.

After confirming the presentation content and screen composition of each picture, proceed to the next drawing.

The da da team hopes to use exquisite graphic language to express the things that must be done. When drawing the characters, the lines are soft, abstract but rhythmic. The two designers worked overtime for more than a week to complete the final design of 100 illustrations. .

Before the launch, the H5 loading and rendering time required about 5 seconds due to the cover animation effect, but in order to allow participants to open H5 immediately, the final online version still reduced the H5 cover animation rendering to ensure that H5 can be opened in 1 second .

Result page elements

H5’s results page should let users remember the subject at a glance. Share in the circle of friends, the exquisite results page will not lose the compelling, it is easier to attract users’ attention.

Recently, everyone always feels that the circle of friends is not enough, and I hope that my friends will send more circle of friends to find some fun for the boring ones.

At this time, sharing a good-looking picture to the circle of friends is a great way to gain a little likes.

Considering the number of 100 events, it would be a bit tedious to simply arrange and combine them into a poster, and it would be difficult to make a strong impact visually.

So, make a picture of 100 things.

When users choose what they must do, they will unconsciously fall into the memories of the time and have a psychological expectation of what they must do.

When they see what must be done in the graphic version, they will also have a familiar sense of sight, which evokes emotional resonance.

On the results page, the most eye-catching place is the oversized number: the number completed.

The rich pictures give users visual beauty, and the numbers can intuitively stimulate the user’s psychology.

The magnified number highlights the number of completions, and has strong social attributes, resulting in users’ snooping, envy and comparative emotions.

04. Interaction Design

The “fool” interactive gameplay is more pleasing than the complicated and cool interaction design that I do n’t know where to start.

Da Da still uses simple interactive gestures this time to ensure that everyone can get started quickly and the operation experience is smoother.

More than that, we always strictly control the details and the user experience, and we also hide all kinds of careful thoughts in the interaction.

Abandon the list and click, use arc sliding selection

Different from the flags in the list, H5 has a bold click design. The selection page can be swiped 360 ° freely like a dial.

Swipe the screen again, everything about H5

Considering the number of 100 things, the list-selective typesetting is likely to be dazzling and not complete. Even if you are interested in the subject, you may not be able to read it patiently.

In the circular arrangement, each group slides into the user’s screen with no more than five options, and swipes about 20 times in total to ensure that the user can see everything clearly and not feel irritable.

With the fresh music rhythm, the original matter is divided into meteors, and the overall feeling is very healing.

Adjust event sequence

In the selection page, the order in which the user clicks corresponds to where the results page is presented. The more things the user has to do, the longer the poster will be.

If the user wants to advance the option that is clicked later, the user can drag the location of the option in the “Favorites” at the upper right corner of H5.

Swipe the screen again, everything about H5 in

Dada has observed that many users have difficulty choosing, and they always hesitate when they have a chance.

Every user has different standards when choosing what must be done. It is very likely that an option selected by the aura of his mind at that time, and then he regrets that his hand is too fast.

Considering that users will need to modify options repeatedly, H5 is based on user experience, and can change the location of events to give users great DIY rights to get their own personalized results.

Custom name

There is also a small detail that is most easily overlooked.

Many H5s often use WeChat avatars and names for the convenience of users.

This “authorization and retrieval” behavior actually hides a lot of embarrassment.

When the poster is shared in the circle of friends, if you wear the sand sculpture net name, or a string of characters / symbols that no one can understand, to complete the 100 things you must do in life, it always feels not enough.

To avoid embarrassment, this H5 chooses to only read the avatar, and the name is customized by the user.

Behind any screen-painting work is a deep insight into life and emotions.

I hope “100 Things To Do In Life” will re-awaken everyone’s expectations of life. After the epidemic situation improves, we can really go out of the house and complete these “must-do things”.