Talk about the hottest HTML 5 cases of the year

Editor's note: The highlight of this article is the combination of this year's hottest H5 case, and with a micro-signal for the scanning experience, @ Tencent Isux to classify the micro-letter case, through their simple talk about design ideas and methods >>>

From exploding the circle of Friends H5 games, "surround the nerve cat", to subvert the traditional advertising of the public comments H5 Special page "We have only one word," from the second half of the 2014, various H5 games and feature pages have come to prominence. "H5", a simplified word from HTML5, is going into more people's eyes by the mobile social platform of micro-trust. This paper focuses on the visual design of H5 page based on micro-communication, and through some case analysis to discuss the design ideas and methods, hoping to communicate with you.

　　Function and Target

First of all, from the functional and design objectives, H5 special page has the following 4 major types:

　　One, the activity operation type

For activities to promote the operation of the H5 page is the most common type, varying forms, including games, invitations, greeting cards, test questions and other forms. Unlike previous simple static advertising pictures, today's H5 activity pages need more interaction, higher quality, and more topical design to facilitate user sharing. It is also important to design a suitable drainage route from the H5 page to the final landing into the brand app.

The popular comments for the film "Rage" Design of the promotion page is familiar with this way. Retro-fitting visual design gives a bright, textured old ticket stub, flashing neon light, with humorous animations and sound effects, with every option ordered. Around the "choice" of this brand keyword, with fascinating test questions to let users life as a large choice, selected to the last question leads to the "popular point selection to see the film", a key to the app purchase ticket page. Even if it is a soft text can not help but with "low oil is good, this page is a bit Diao oh" mood click to share.

　　Second, the brand promotion type

Different from the timeliness of the activities of the operation of the page, brand-type H5 page equivalent to a brand of micro official website, more inclined to brand image, to convey the brand spirit of the user attitude. The design needs to use the visual language which conforms to the brand temperament, lets the user impress the brand.

Accompanied by the romantic piano melody, "Mr. Grass's love letter" in a man's tone to explain his wife's love and guilt in the growth process, and finally led to the "first grass-yin san, love wife preferred" propaganda language. The design uses the memory-like black-and-white tone, the simple picture adds the text, with petals falls, the water surface ripples and so on light animation, renders the esthetic elegant atmosphere. "First Grass" this brand new high-end herbal medicine, with H5 played a heart of emotional cards, so that users remember the "half of your life only for You" love wife brand image.

　　Third, the product introduction type

Focus on product function Introduction, the use of H5 Interactive technology advantages to display product characteristics, to attract users to buy and buy.

This type of H5 page is more commonly seen in the automotive brand, LEXUS NX is one of the outstanding representative cases. Exquisite and highly textured modeling, exquisite light effect to create a cool visual style. With the finger follow the light trajectory cut the curtain kicked off, through the reasonable elegance of touch, friction, sliding and other interactive forms to lead users to explore the product 7 characteristics, macro and micro care.

　　Iv. Summary Report type

Since Alipay's ten-year bill has sparked hot debate, the year-end summaries of major companies are also keen to use H5 technology, and the excellent interactive experience makes the original tedious summary report interesting and lively.

"Beijing-east of the ten wayward" with 10 horizontal screen page tells the top ten achievements in 2014, visual design using simple flat wind illustrations, add paper texture to form a retro card collage feeling. Between the different pages through the finger sliding to achieve smooth parallax scrolling effect, and finally Liu Zong this small egg. After reading a breath probably know what the 2014 Jingdong has done what big things.

　　form for functional services

After defining the functional goals of the topic page, the next step is the critical design phase. How to design in a purposeful way, we need to take into account the specific application scenarios and dissemination of objects, from the user point of view to think what kind of page is the most users want to see the most to share. Here are some common H5 feature page representations:

　　One, simple text

Simple graphics and text are the most typical H5 feature pages in the early days. "Picture" of the changing form, can be photos, illustrations, GIF and so on. Through simple interactive operation, such as paging, to play a similar slide spread effect. The test is the quality of the content itself and the ability to tell stories.

Drop a taxi this case is a typical simple graphic type H5 feature page, with a few photo stories strung up the whole set of pages. Simple and powerful visual, using the whole screen black-and-white photos, dotted with drops of the brand orange. Each switch to a picture, the text is gradually hidden, there is no other form of interaction, so that the audience focus on the content, through the truth of the relationship between strangers to shape the brand's positive energy image.

There are also unwilling to dull the wonderful case. On New Year's Eve, the people rush to rob red envelopes at the moment, micro-letter launched the "From now on to see the Chinese name and benefit," such a topic page. The first sight was awed, and the rmb~ each page is a local enlarged map of the RMB landscape, the creators add ingenious creative elements and micro-dynamic for exquisite portrayal, with the audience into the micro-world of the renminbi. Each note pattern with the thought-provoking copy, in the promotion of micro-letter red envelopes at the same time called for people to re-examine the mystery of human and fame.

　　Ii. gift/Greeting card/invitation Letter

Everyone likes to receive the feeling of gifts, seize this mentality, the brand launched a variety of H5 forms of gifts, greeting cards, invitations, through the promotion of user goodwill to imperceptibly achieve the purpose of brand promotion. Since it is a gift, creativity and production are important points of addition.

AKQA Creative Marketing Company presents a gift for the Christmas season-the Dream crystal ball. By mobile phone, the lens from outside the crystal ball constantly shaking push close, gradually into the crystal ball of the micro-world. Look around through the phone, you can 360 degrees to appreciate the panorama of the crystal ball, shaking a snow will be all over the sky. Write down your blessings and share them with your friends and be sure to be amazed. This H5 page uses the gravity induction, the technology of the BGM, the use of the text and the language is also very fastidious, brings the user the perfect interactive experience, is worth to savor.

Evernote during the new year also ingenuity to launch voice greeting cards, through the public to guide users to send a voice message, and then the blessing of the voice combined with Chinese wind animation made a unique voice greeting card sent to friends. The overall tone is mainly Evernote brand color, at the same time contains a trace of elegant year taste, very flattering.

　　Third, question/answer/grading/testing

Question and answer form of H5 page is also common, using the user's thirst for knowledge and exploration, choose the choice, to see what the final results. A clear clue is necessary, the final results of the page also need to be reasonable not abrupt, if it can be supplemented by a brilliant visual and copy, weakening the boring feeling of the answer that would be better.

As the beginning of this article is also a public comment on the project, this is for Jiang film "one Step Away" to do continuous promotion, so that users for the Jiang representative of the score. Visual design is still brilliant, open brain hole creative and animation design is amazing (must sweep a sweeping experience!). The continuation of the nostalgic posters style, font, copy, decorative elements such as details of the processing is also very attentively. Question and answer form of H5 page can do this is also a rough spell.

　　Four, the game

From "surround the nerve cat", "See You have Multi-Color" and so on the simple game again to Durex "One Night N" (that is, the cottage version "don't Step on White piece") and other brand implants games, H5 games because of simple operation, competitive, once popular circle of friends, but the lack of creativity and homogeneity of the phenomenon led to users of the brain-free games gradually grew tired. Brand in the game to achieve successful dissemination, the need to play and design a little more effort.

Same at Christmas launched a "Santa rescue plan" H5 games, the operation is very simple, just use the fingers alternately on the slide, the role of the neck to pull up to infinity, the game will record you pull the highest distance, and friends than a longer than one. The interface is fresh and lovely, and same's signature painting wind is consistent, the role of the game is same brand role, through the game of humor to convey same unique interesting product culture.

　　4 points to add points for design

A H5 page design quality is superior or not, will directly affect its transmission effect, and even affect the user's perception of brand image. Here is a summary of the following design points:

　　I. Details and unification

To achieve a high quality user experience, you must take into account the unity of detail and the whole. Retro-fitting visual style, that font can not be too modern, humorous tone, the wording of the text can not be too serious, playing emotional content card, the effect can not be too fancy.

Public comments Jiang Film Promotion series "Nine Steps Away" H5 theme page has firmly grasped this point. From the two-dimensional code entrance to the sexy loading page, and then to the final sharing tips of the design, including copywriting and background sound effects, are consistent with the overall play abuse, give users a complete and unified interactive experience.

Paying particular attention to the detail design of "sharing tips" is obvious, compared to a simple arrow and a cold "point here to share", the high quality and goodwill that comes with careful detail design. A few more exciting cases:

　　Second, follow the hot spot, use the topic effect

Want your H5 topic page One night burst red, the first time catches hot spot and Swift on-line, the opportunity carries on the brand propaganda also is a shortcut.

Every day p figure catch Wu Zetian hit the opportunity to launch the popular at home and abroad Mei Niang makeup, at the same time, "the National cos Wumei" H5 Interactive page is also the first time on-line, easy to operate, a key upload photos can be completed immediately Mei Niang makeup, and thousands of Mei Girls PK, entertainment and the public to promote the product.

NetEase Entertainment in the Wumei shear chest wave on the launch of the "God restore Wumei was cut chest truth," the H5 theme page, lay down their integrity with very imaginative rough draft wind direction of the vast audience "restore" the truth. For a time to be wildly forwarded, NetEase Entertainment is also a homeopathic ego propaganda.

　　Third, tell a good story, triggering emotional resonance

No matter how changeable the form of H5 is, the content of value is always the first. In the limited space, learn to tell stories, triggering the emotional resonance of the user, will be the spread of content to form a great push.

LEVI ' s New Year Promotions feature page in the first person tone, with a childhood simple but lively new year and grow up after the rich but boring new year, with hand-painted wind rendering a cordial nostalgic atmosphere. Finally leads to "this new year, the pressure and bondage to throw away, with fresh eyes to feel the life, live out fun" brand promotion slogan, the story of a strong sense of power is undoubtedly driven to share the source.

　　Iv. Rational use of technology to create a smooth interactive experience

With the development of technology, today's HTML5 has many features, so that we can easily achieve the drawing, erase, shake, gravity induction, erase, 3D view and other interactive effects. (If you are interested, you can click on this site: Http://fff.cmiscm.com has almost all the H5 dynamic effects displayed). Compared to plug in a variety of different kinds of dynamic effects resulting in page chaos bloated, we are more advocating the rational use of technology, attentively focused on providing users with a smooth interactive experience.

Typical case is Taobao in the double 12 launched the Pre-sale Promotion H5 topic page. In the browsing process I only use a kind of upward sliding gesture, and the effect of the page is like a fluent animated GIF. Designers cleverly use the graphic design and combination, in the sliding process to create a rich disparity scrolling effect, a single graphic element of the mask, rotation and the overall page dynamic coordination with the very tacit understanding.

　　Conclusion

With the upgrade of mobile phone hardware, the development of HTML5 technology and the opening of micro-platform, the advantages of HTML5, low cost and fast iteration are further highlighted, which will be the best time for business owners, brands, designers and developers who are in the mobile Internet tide. There will be more and more excellent H5 pages in the future, so let's wait and see.