H5 Mobile End page design experience sharing

Last year JDC out a lot of excellent Wumei ... No, H5, we all very hard, but also accumulated some experience and lessons, today, combined with our actual case, from the font, typesetting, dynamic effect, sound, fitness, ideas of these several aspects of a good chat about H5 design, hope to help students.

　　Font

　　Typesetting

In the limited mobile screen space, we accumulated experience to tell us that the best effect is a simple focus, preferably a core element, the central element should not be too much, highlighting the best focus.

For example, JDC's "12 Constellation Practical Manual" project, with only the simplest graphics and text centered.

In the case of Coca-Cola's "We care about this" example, the more left side of the layout is more likely to attract attention. This is because our lazy brain initially saw this kind of simple typography appear immediately, "Well, I can immediately read without difficulty" subconscious information and with a relaxed attitude of reading.

　　Dynamic effect

1/early stage with the front-end designers to communicate, discuss the elements of the page dynamic rendering. For example, some elements of displacement, rotation, flip, zoom, frame, fade, particle effect, photo processing and so on, as well as the performance of the display. (Http://fffNaNiscm.com This site has H5 can achieve the effect)

For example, JDC produced the "Jing Dong hr recruitment" inside the use of displacement, scaling, fade in the effect. and "Jing Dong Micro Shop Seven Sins" the most generous this screen is to use the particle effect, each coin turnover falling speed is not the same picture more real. This year, the H5 of Victoria and Tesla, which went crazy in the circle of friends, used the effect of erasing, and the vague mask was enough to stir people's curiosity.

The above two, including the most H5 cases this year are in this >>> "so coquettish!" 2014 brush blasting Friend Circle Ten HTML5 technology cases

2/Background Dynamic comparison recommended ease of action, such as "Jing Dong Lepetson Recruitment" example of a meteor in the sky, intermittent appearance does not rob the protagonist of the limelight is better.

3/complex and variable dynamic effect is not necessarily good, to take into account the loading speed and other user experience problems.

　　Sound

1/Take into account the user use of the diversity of the scene, the introduction of the class if you want to add background music, try not to be too rough. A little bit of progress is best, giving users time to close before harassing someone else.

Or it can be turned off at the beginning. But when making a game H5 page, the music can be turned off without turning on the button, because the user is predictable about what happens next.

2/Consider the apparent nature of the music button placement on each page. It would also be great if you could use other page elements instead of musical symbols as buttons.

To the front designer's music file: Format for MP3, monorail, preferably within 30 seconds. In order to load speed, the file size as far as possible in: 100k best, you can use Adobe Audition software to compress. As an infinite loop of background music, the interception must pay attention to the end of the connection.

　　Interaction

1/Show Type: There are many different ways of interaction, the most common is the page, this way to make relatively simple, more to show some new products, functions, or activities introduced. Technology is now available on the market H5 online generators, basically to the picture and text can help you deal with.

In addition to paging, there are clicks, input text, erase screen, sliding screen, etc., play very rich. In the "Pat Christmas Activities" in the use of gravity induction, shaking a wave can be randomly judged, so that users have their own participation in the fun.

2/game type: Like the first friend Circle hung around the nerve cat, or our "Pat jump" this kind of need to compute logic, to draw scores or conclusions of the game.

3/Product Type: There are some H5 as a long-term operation of the product exists, the user's access may be more fixed, such as the micro-mail shopping page.

Mobile phone between: generally we first design with 640x1136, reference line monogram in the 960 high place, the main element is best not too high to fit a variety of models. Other Android machines can be Chettu when the front end is not too big to fit each other.

Response Design: page design and development should be based on user behavior and equipment environment (System platform, screen size, screen orientation, etc.) to respond and adjust accordingly. Concrete practices are made up of many aspects, including flexible grids and layouts, pictures, and the use of CSS media query.

For a single layout of different electronic devices, use solid colors rather than gradients

　　Idea

There are probably several types of information that the mainstream is happy to share:

The most direct interest drive, the sharing of prizes or the need for public financing,

Information that is useful to yourself and also to the people around you,

Participate in the game or test the results.

Whether it's to share with friends or friends or QQ conversations, let users take the initiative to share your message with a large nature of advertising in their own social groups, this information is relevant to themselves and others can also participate in the ideal.

The example of a Coca-Cola polar bear asking for a photo is a good way to advertise it, by simply synthesizing the photo technology to give people the will to share the pictures they are trying to create. There are Ujeans design continues the brand's tone is practical, in the choice of your jeans like also interspersed with the description of the goods, it seems less blunt, it is more in line with the reason 3.

When we design a H5 page, it is important to stand in your own way to see what you are doing, first of all is that you and the people around you are willing to forward to share this thing? Is it interesting? Is it useful information to others?

In doing "1212 to accompany you one or two in the end", our designers in the end to draw a coupon to collect this information, the front also used to use the moral integrity to design the copy and characters, in this experience the importance of copywriting, it is throughout the H5 soul. The second picture of the small print "overseas big-name home to buy the world" is the product wants to say hard advertising lines, but in the tiny mobile phone screen, debris time, we must first catch the eyeball, and then seize the heart, so "body and express, at least one on the road."

The most important thing for the presentation and interactive H5 is the idea. For designers, perhaps they give us only a few lines of text, at that time the early conception of this H5 may be longer than the actual time to do.

For example, the news of the global synchronous sale of IPhone6 to make H5, if we just do a cool picture to tell you that we have the iphone6 to share the circle of friends may win, there will be a profit-driven temptation to send people to share. But through everyone's brain burst, we will this sentence into "about Phone6 Goldbach conjecture", according to the test results to draw an interesting conclusion, so that the forwarding is not a red fruit for the winning behavior, but also with interesting illustrations and their own test of the killing of Matt, is not more subtle more casual it. So the reason for the final forwarding of the above 1,2,3 seems to have it.

This year JDC probably made more than 10 H5 pages, producing quite abundant. The advantage of H5 and app is that the development cycle time is short, efficient to propagate, and much less costly to update iterations. Especially in the game, the future H5 will have more possibilities. We will continue to study and try, whether it is new technology, or more interesting marketing methods, and we share.

Thank you for watching, we will see you next time ~ ~ Please look forward to it!