12 unpopular H5 design tips

This time I bring you 12 unpopular H5 design tips. How to use H5 design tips? What are the precautions of H5 design tips? The following is a practical case, let’s take a look.

12 unpopular H5 design tips, the contents are as follows

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

Such as: Scratching music 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., should be kept away from the bottom of the page (about 128px, this size is not a fixed Z value). It depends on the adaptation method used for reconstruction (for reference only: 640*1136 px, from Calculated from top to bottom, the main content is 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 to 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.

Such as: various particle effects floating across the screen, etc.
Reason: If the visual effects presented cannot be realized by code, it means that full-screen size sequence frames must be used to process them, and the volume will soar, affecting the loading experience.

7. In terms of animation, tips on sequence frame compression and static pictures 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 go to "tinypng.com" for pictures and compress it to effectively reduce the size.

Reason: Um, do you need to give a reason for this? Well, let me tell you secretly that now this website can not only compress PNGs, but also JPGs, and more importantly... it supports batch downloads!

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

Tips: 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 devices do not support the simultaneous playback of multiple audios... which means that background music and sound effects cannot be played at the same time! (Macintosh is no problem)

11. In terms of reconstruction, the video cannot play automatically. The first playback requires the user to click to trigger it.

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

12. For reconstruction, please pay more attention to "Meizu" mobile phones and Huawei P6/P7 when testing. , a phone 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 difficult to explain clearly.
Android:
WeChat version 5.4-6.1, if 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.
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, Just use the down arrow.
◆ Fingerprint scan? Pro screen triggers interaction? Blow your breath to detect gas composition?
These are all pseudo-techniques, just have fun playing with them, haha.
But things like multi-screen interaction, audio analysis, etc., providing technical support through various interfaces and realizing some interactive operations, these are the future trends!

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to count the number of table sums in bootstrap

How to use JS to switch between hiding and displaying Switch icons at the same time

How to implement vue.js todolist

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