Summary of tips when designing H5

This time I will bring you a summary of tips in H5 design, what are the precautions when designing H5, the following is a practical case, let’s take a look.

I believe many people have some experience with the use of HTML5. In fact, there are many different techniques for using HTML. The following article will share with you several techniques in HTML design. Get up and take a look

1. In terms of interaction, use the right sliding operation method with caution.

Such as: GuaShuaLe smear effect, slide left and right to turn pages, etc.

Reason: On Apple phones, sliding to the right can easily trigger the effect of returning to the "previous page".

2. In terms of interaction, use horizontal screen display with caution.

Reason: In terms of experience, the user device needs to turn on the screen rotation function in order to watch it normally, and the user operation cost is high. For mobile phones with different screens, the aspect ratio is different, making it difficult to display the best visual effects.

3. Visually, function buttons, etc., are far away from the bottom of the page (about 128px, this size is not a fixed value). It depends on the adaptation method used for reconstruction (for reference only: 640*1136 px, calculated from top to bottom, main content within 1008px).

Reason: Better equipment for mobile phones with various screens to avoid buttons being blocked.

4. Visually, use the "light overlay effect" or the "layer style" effect in PS with caution.

For example: add a "soft light", "screen color", "hue" and other effects to the layer, unless this visual element can be merged into one.

Reason: Digging holes for reconstruction, making it difficult to cut pictures and unable to restore visual effects.

5. Visually, vector graphics? Want to make a simple animation? Try exporting it in SVG format!

Reason: Why refuse something that can reduce the size...

6. In terms of animation, try to avoid full-screen animation and give priority to partial animation.

For example: various particle effects float across the screen, etc.

Reason: If the visual effects presented cannot be implemented in code, it means that full-screen size sequence frames must be used to process them, which will increase the size and affect the loading experience.

7. For animations, tips on sequence frame compression and static images can be saved with higher quality. For the blurry state of motion in the middle, boldly lower the picture quality.

Reason: Compressed volume, even if the motion state is jagged, it is not obvious.

8. For reconstruction, please upload the picture to "tinypng.com" and compress it to effectively reduce the size.

Reason: Well, let me tell you the reason for this? Well, let me tell you secretly, now this website can not only compress png, but also compress jpg, and more importantly... it supports batch downloading!

9. For reconstruction, please compress the music, which can greatly reduce the overall size.

Tip: If there are no special requirements, you can consider making it a mono audio file with a bit rate of 48 or lower.

10. In terms of reconstruction, Android does not support the simultaneous playback of multiple audios... which means that background music and sound effects cannot be played at the same time! (Apple machines have no problem)

11. In terms of reconstruction, Video cannot be played automatically. The first playback requires the user to click to trigger it.

(What format is used for the video? It is recommended to use mp4 format and use H.264 encoder)

12. In terms of reconstruction, please pay more attention to "Meizu" mobile phones and Huawei P6/P7 when testing, mobile phones with virtual buttons at the bottom of the screen. Equipment is prone to problems.

Having said that, here are a few more tidbits.

◆ What browser kernel does WeChat use? Well, this question is really hard to explain clearly.

Android:

WeChat version 5.4-6.1, if you have installedQQ Browser, use the kernel of QQ Browser. Otherwise, use the one that comes with the mobile phone system.

After WeChat version 6.1, the core of QQ browser is embedded.

QQ Browser: Version 6.2 and later use the blink kernel. I used webkit kernel before. (Don’t be confused, if necessary, please go to: http://x5.tencent.com/index to learn more about QQ Browser)

apple:

It has always been built into the system...

◆ When sliding up to turn pages, the visual guidance arrow should be upward, not downward; unless you click on the page turning effect, use the downward arrow.

◆ Fingerprint scanning? Touch screen to trigger interaction? Blow to detect gas composition?

These are all pseudo-techniques, just be happy to be toyed with them, haha.

However, such as multi-screen interaction, audio analysis, etc., providing technical support through various interfaces to achieve some interactive operations, these are the future trends!

I believe you have mastered the method after reading the case in this article, and there will be more exciting Please pay attention to other related articles on php Chinese website!

Recommended reading:

H5 video tag operation camera

Detailed explanation of the use of django controls and parameter passing

jquery realizes selecting all and inverting single selection

The above is the detailed content of Summary of tips when designing H5. For more information, please follow other related articles on the PHP Chinese website!