1、 Visually, be careful to use the "Light Overlay Effect" or the "Layer Style" effect in PS.
For example, add "soft light", "color filter", "hue" and other effects to the layer, unless this visual element can be combined into one.
Cause: Dig a hole for reconstruction, resulting in poor cut, unable to restore the visual effect.
2、 For animation, try to avoid full screen animation and give priority to local animation.
For example, various particle effects float across the screen.
Reason: If the rendered visual effect cannot be realized in code, it means that full screen sequential frames are used for processing, and the volume will soar, affecting the loading experience.
3、 In animation, sequence frame compression techniques, static pictures, save high quality. The blurry state of the middle movement, boldly lower the picture quality.
Ps: Compress the volume, and even if there are serrations in the motion state, it is not obvious.
4、 Images, image compression, "tinypng. com", under compression, effectively reduce the volume. (There is still a lot of compression space for PSD exported pictures)
PS: Support PNG, JPG, and batch compression download
5、 Music must be compressed, which can greatly reduce the overall volume.
Tip: If you have no special requirements, you can consider making a mono audio file with a bit rate of 48 or lower.
Common H5 presentation form
Secret Room Scene
Group chat among friends
One mirror to the end
Test answer
video
Brief strokes
Hand drawn illustration
Games
Dual screen interaction
Pseudo 3D
360 panoramic 3D
H5 Creative play 1. Shake
H5 creative case: Baidu Wallet
This is very simple. By shaking the phone, you can match the trigger function of receiving signal commands at the same time and increase interaction with users.
H5 creative play 2, gravity sensing
H5 creative case: Baidu Wallet
Shake is usually associated with gravity sensing. The mobile phone generally has a gravity sensing processor inside, which supports the interface and functions required for shake switching. Shake song, shake screen, flip mute, shake video, etc., which is a very fun function to use.
H5 creative play 3, changing colors
H5 creative case: retro dressing, see what kind of Han clothing you are!
For example, in the case of "Retro Dressing", select a cartoon character you like in the picture, and then click the option to add clothes for the character, such as the Qucheng deep clothes, Han family clothes, as well as head shapes and headdresses, such as jade hairpins and oblique hairpins. Give users a variety of choices to choose their favorite clothes, costumes and hairstyles.
H5 creative play 4, visual contrast
H5 creative case: Maxam: some things must be done at night
In the H5 case, "some things must be done at night". Through the prompt, slide the page to the right, and there will be different feelings of the same thing in the day and night. The contrast between light and dark will enable users to better understand the meaning of the product. [H5 Development]
H5 creative play 5, canvassing for praise
H5 creative case: The most beautiful bride on the Double Seventh Festival plays PK. Who will you support, Baby Ni Ni?
The case "The most beautiful bride in the Tanabata Festival plays PK, Baby Ni Ni, who will you support?" is H5 produced to promote the movie "Bride Battle". As the protagonist in the movie, Baby and Ni Ni are hostile, so who will win the final victory? The right to vote is in the user's hand. Click the flower ball and throw it to two goddesses. They will compete for the flower ball. Who grabs the flower ball will increase a vote for their chances of winning, and want to add more flower balls to their goddess? Then forward it to friends and save flower balls for the beloved goddess.
H5 creative play 6, bullet screen
H5 creative case: show your musical attitude - I'm a singer
H5 Show Your Musical Attitude - I'm a Singer uses gravity sensing, canvassing, and other playing methods. Here we are going to talk about the pop-up screen. Click "Send the pop-up screen" to send words or blessings that you want to say in your heart to the singer you like. Compared with the implicit support of "Like TA", you can express your love for the singer openly and honestly.
H5 creative play 7, video interaction
H5 creative case: China bus: dare to look at Wu Xiubo for 5 seconds?
This was also the H5 case at the screen level at that time. The circle of friends was turning, and all major platforms published case studies one after another to exchange views or videos with idols, which was certainly more exciting than a few simple words or pictures.
[H5 Development]
H5 creative play 8, turning books
H5 creative case: Xibei Oat Noodle Village: what you eat determines who you are
The mobile phone needs to be placed on the horizontal screen to create the effect of reading and turning pages, so that users who are accustomed to seeing pages of pictures and texts have a refreshing feeling.
6、 In interaction, slide right carefully
For example: Scratching effect, left and right sliding page turning, etc.
Reason: On the iPhone, sliding right is easy to trigger the effect of returning to the "previous page".
7、 In terms of interaction, use the horizontal screen carefully to show the effect
Reason: In terms of experience, the screen rotation function of the user's device needs to be turned on for normal viewing, and user operation costs are high.
For mobile phones with different screens, the ratio of length to width is different, which makes it difficult to show the best visual effect.
UI design size: 1136 * 550px
8、 Visually, function buttons 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, the main content is within 1008px).
Reason: It can better adapt to mobile phones with various screens and avoid buttons being blocked. [H5 Development]
Normal vertical screen size: 640 * 1136px or 640 * 1008px
H5 creative play 9, simulation of mobile phones, WeChat clients, etc
H5 creative case: Wu Yifan enlisted in the army
That is, after scanning the QR code, you will find someone calling you or using the commonly used WeChat chat page, which can shorten the distance with users, just like friends talking or chatting.
H5 Creative play 10, voice and recording
H5 creative case: new singing of old songs will bring you to know the Procurator
Simulate the interface of mobile phone music player to create a KTV atmosphere, as well as the clapping and song cutting buttons. Select a record, and the music will pop up.
H5 Creative Play 11, Chamber of Secrets
H5 creative case: incarnate spies, change history
The secret room game is generally a game of escaping from the secret room or collecting items. Like the case of "Avatar Spy, Change History", it puts the user in the historical context of World War II and turns into a spy. In order to protect information, it chooses a place in the secret room to hide information.
H5 creative play 12, double screen interaction
H5 creative case: A drop of milk meets love
The dual screen interactive technology is also very interesting. It requires two mobile phones to operate together to watch the complete H5 works. It is often used in festivals that need to convey love, such as Tanabata and Valentine's Day.
H5 creative play 13, erase
H5 creative case: Happy New Year
Erasing is an interactive game we often see. Only when users erase the screen with their fingers can hidden content appear.
H5 creative play 14:, 360 panorama
H5 creative case: Durex Art Museum
The best case that panoramic technology has been used is Durex Art Museum, which has built an art museum in the mobile phone screen with technology. 360 ° panoramic view has no dead angle, giving users a sense of immersive experience.
This article comes from Shangpin China: H5 website construction
