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

Source: Internet
Author: User
Tags file size

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.