12 little-known HTML 5 design tips

[[165921]]

Be careful when using the right swipe operation, be careful when using the horizontal screen display effect, place the button at the bottom of the page, use the SVG format to make vector graphics... The above-mentioned techniques all come from today's great article. They are simple and compact but very practical. As a designer, you should also try to avoid these pitfalls.

1. In terms of interaction, be cautious when using the right-swiping operation.

Such as: scratch-off smearing effect, swiping left and right to turn pages, etc.

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

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

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

3. Visually, function buttons, etc. should be kept away from the bottom of the page (approximately 128px, this size is not a fixed value), depending on the specific adaptation method used in the reconstruction (for reference only: 640*1136 px, calculated from top to bottom, the main content is within 1008px).

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

4. Visually, be cautious when using the “light overlay effect” or the “layer style” effect in PS.

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

Reason: It creates a pit for reconstruction, making it difficult to cut pictures and unable to restore the visual effect.

5. Visually, vector graphics? Want to make simple animations? Try exporting to SVG format!

Reason: Why reject something that can reduce the size?

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

Such as: various particle effects floating across the full screen, etc.

Reason: If the visual effect presented cannot be achieved with code, it means that it must be processed with a sequence of frames of full screen size, which will increase the size and affect the loading experience.

7. In animation, there are some tips for sequence frame compression. For static images, keep them at a higher quality. For blurred images in the middle of the motion, boldly lower the image quality.

Reason: The volume is compressed, so even if there are jagged edges in motion, they are not obvious.

8. For reconstruction, please go to "tinypng.com" to compress the pictures to effectively reduce the size.

Reason: Um, do you need a reason for this? Well, I’ll tell you a secret. Now this website can not only compress png, but also jpg. More importantly… it supports batch downloading!

9. When reconstructing, please compress the music, which can greatly reduce the overall volume.

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. On the refactoring, Android devices do not support multiple audios playing at the same time... which means that background music and sound effects cannot be played at the same time! (Apple devices have no problem)

11. In the reconstruction, the video cannot be played automatically, and the user needs to click to trigger the playback.

(What format should the video be in? It is recommended to use MP4 format and H.264 encoder)

12. When refactoring, please pay more attention to the "Meizu" phones and Huawei P6/P7, which have virtual buttons at the bottom of the screen. These devices are prone to problems.

Having said so much, here are some tips:

◆What exactly is the browser kernel used by WeChat? Well, this question is really hard to explain clearly.

Android:

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

After WeChat version 6.1, the QQ browser kernel is embedded.

QQ Browser: Version 6.2 and later use the blink kernel. Previously, it used the webkit kernel. (Don't be confused. If you need more information about QQ Browser, please visit: http://x5.tencent.com/index)

apple:

It has always been built-in...

◆ When swiping upwards to turn the page, the visual guide arrow should be pointing upwards, not downwards; unless you click on the page turning effect, then use the downward arrow.

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

These are all pseudo-technologies, just have fun playing with them, haha.

However, multi-screen interaction, audio analysis, etc., using various interfaces for technical support to achieve some interactive operations, these are the trends of the future!