H5 applications from the font, typesetting, dynamic, adaptation, etc.

Last year JDC out a lot of excellent Wumei ... No, H5, everyone is very good, and of course, also accumulated some experience and lessons. Today, from the font, typesetting, dynamic, sound, fitness, the idea of these several directions combined with our example I will close the door just to talk with you to talk about the design of H5 ~

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.

As an example of Coca-Cola's "We are Here we care", the more left side of the layout will be 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.

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.