Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the design skills of HTML5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What are the HTML5 design tips?

1. Interactively, be careful to slide to the right.

Such as: scraping music smear effect, left and right sliding to turn the page and so on.

Reason: on the iPhone, swiping to the right can easily trigger a return to the "one level page" effect.

2. In interaction, be careful to use horizontal screen to show the effect.

Reason: in experience, the user equipment is required to turn on the screen rotation function in order to watch normally, and the user operation cost is high. For mobile phones with different screens, the ratio of length to width is different, so it is difficult to show the best visual effect.

3, visually, function buttons, etc., away from the bottom of the page (probably 128px, this size is not a fixed Z value), specific look at the reconstruction of what adaptation method (for reference only: 640*1136px, from top to bottom calculation, the main content in the 1008px).

Reason: better equipment for various screens of mobile phones to prevent buttons from being blocked.

4, visually, be careful to use the "light overlay effect" or the "layer style" effect in PS.

Such as: add a "soft light", "color filter", "hue" and other effects to the layer, unless the visual element can be merged into one.

Reason: digging holes for reconstruction, resulting in poor cutting, unable to restore visual effects.

5. Visually, vector graph? Want to do simple animation? Try exporting SVG format!

Reason: can reduce the size of the thing, why refuse …...

What are the design skills of HTML5

1. In animation, try to avoid full-screen animation and give priority to local animation.

Such as: a variety of particle effects floating across the full screen and so on.

Reason: if the visual effect cannot be implemented in code, it means that it has to be processed with a full-screen sequence of frames, which will soar in size and affect the loading experience.

2, animation, sequence frame compression tips, static picture, save high quality. The blurred state of the middle movement, boldly depress the picture quality.

Reason: compress the volume, the motion state is not obvious even if there is sawtooth.

3. For refactoring, please add "tinypng.com" to the picture and compress it to effectively reduce the volume.

Reason: well, you have to say why, too? Well, I'll tell you secretly, now this site can compress not only png, but also jpg, and more importantly... Batch downloads are supported!

4. In terms of reconstruction, please compress the music, which can greatly reduce the overall volume.

Tip: if there are no special requirements, consider making a mono audio file with a bit rate of 48 or less.

5. In terms of reconstruction, Android does not support multiple audio playing at the same time. It means you can't play background music and sound effects at the same time! (no problem with Macintosh)

This is the end of the content of "what are the Design skills of HTML5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.