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

This article mainly shows you "what are the tips for html5 design", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "what are the tips for html5 design" this article.

Undefined

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, visual, function buttons, etc., away from the bottom of the page (probably 128px, this size is not a fixed value), specific look at the reconstruction of what adaptation method (for reference only: 640mm 1136 px, calculated from top to bottom, 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 …...

6. 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.

7, 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.

8. 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!

9. 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.

10. in terms of reconfiguration, 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)

11. On reconstruction, the video cannot be played automatically, and the first playback needs to be triggered by a user click.

What format does the video use? Recommended mp4 format and H.264 encoder)

12. In terms of refactoring, please pay more attention to the "Meizu" phone and Huawei P6/P7 in the test, with virtual buttons at the bottom of the screen. The equipment is prone to problems.

With so much to say, a few more pieces of knowledge.

What on earth is ◆ Wechat using a browser kernel? Well, that's a hard question to explain.

Android:

Wechat version 5.46.1, if you install QQ Browser, use QQ Browser's kernel. Otherwise, it comes with the mobile phone system.

After Wechat version 6.1, the kernel of QQ Browser is embedded.

QQ Browser: version 6.2 and later use the blink kernel. I used to use the webkit kernel. (don't be dizzy, if you need it, please go to: http://x5.tencent.com/index for more information about QQ Browser)

Apple:

It's always come with the system.

When ◆ swipes the page up, the arrow of the visual guide should be up, not down, unless you click on the page flip effect, use the down arrow.

◆ fingerprint scan? Pro-screen trigger interaction? Test the composition of the gas by blowing?

These are all pseudo-technologies, it would be nice to be happy to be played with, .

However, such as multi-screen interaction, audio analysis, etc., through a variety of interfaces to do technical support, to achieve some interactive operations, these are the future trend!

These are all the contents of the article "what are the Tips for html5 Design?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.