12 conseils de conception impopulaires pour le H5

Cette fois, je vous présente 12 astuces de conception H5 impopulaires. Comment utiliser les astuces de conception H5 ? Quelles sont les précautions des conseils de conception H5 Voici des cas pratiques, jetons un coup d'oeil.

12 conseils de conception H5 impopulaires, le contenu est le suivant

1 En termes d'interaction, veillez à utiliser la bonne méthode d'opération de glissement.

Tels que : Musique ScratchEffet de frottis, faites glisser vers la gauche et la droite pour tourner les pages, etc.
Raison : Sur les téléphones Apple, glisser vers la droite peut facilement déclencher l'effet de retour à la "page précédente".

2. En termes d'interaction, utilisez les effets d'affichage horizontal sur écran avec prudence.

Raison : en termes d'expérience, l'appareil utilisateur doit activer la fonction de rotation de l'écran afin de le regarder normalement, et le coût de fonctionnement de l'utilisateur est élevé. Pour les téléphones mobiles dotés d'écrans différents, le rapport hauteur/largeur est différent, ce qui rend difficile l'affichage des meilleurs effets visuels.

3. Visuellement, les boutons de fonction, etc., doivent être éloignés du bas de la page (environ 128 pixels, cette taille n'est pas une valeur Z fixe. Cela dépend de la méthode d'adaptation utilisée pour la reconstruction (). à titre de référence uniquement : 640*1136 px, calculé de haut en bas, le contenu principal est dans les 1008 px).

Raison : Meilleur équipement des téléphones portables avec différents écrans pour éviter le blocage des boutons.

4. Visuellement, utilisez l'effet "effet de superposition de lumière" ou l'effet "style de calque" dans PS avec prudence.

Par exemple : ajoutez un effet "lumière douce", "couleur d'écran", "teinte", etc. au calque, à moins que cet élément visuel ne puisse être fusionné en un seul.
Raison : Creuser des trous dans la reconstruction, ce qui rend difficile la découpe de l'image et incapable de restaurer l'effet visuel.

5. Visuellement, des graphiques vectoriels ? Vous souhaitez réaliser une animation simple ? Essayez d'exporter au format SVG !

Raison : Pourquoi refuser quelque chose qui peut réduire la taille...

6. En termes d'animation, essayez d'éviter l'animation en plein écran et privilégiez l'animation partielle.

Tels que : divers effets de particules flottant sur l'écran, etc.
Raison : Si les effets visuels présentés ne peuvent pas être réalisés par code, cela signifie que des images de séquence en taille plein écran doivent être utilisées pour les traiter, ce qui augmentera le volume et affectera l'expérience de chargement.

7. Pour les animations, des conseils sur la compression des images de séquence, les images statiques et la préservation d'une qualité supérieure. Pour l'état de mouvement flou au milieu, réduisez hardiment la qualité de l'image.

Raison : Volume compressé, même si l'état de mouvement est irrégulier, ce n'est pas évident.

8. Pour la reconstruction, veuillez vous rendre sur « tinypng.com » pour la image et compressez-la pour réduire efficacement la taille.

Raison : Euh, devez-vous donner une raison pour cela ? Eh bien, laissez-moi vous dire en secret que désormais ce site Web peut non seulement compresser les PNG, mais aussi les JPG, et plus important encore... il prend en charge les téléchargements par lots !

9. Pour la reconstruction, veuillez compresser la musique, ce qui peut réduire considérablement la taille globale.

Conseils : S'il n'y a pas d'exigences particulières, vous pouvez envisager d'en faire un fichier audio mono avec un débit binaire de 48 ou moins.

10. En termes de reconstruction, les appareils Android ne prennent pas en charge la lecture simultanée de plusieurs audios... ce qui signifie que la musique de fond et les effets sonores ne peuvent pas être lus en même temps ! (Macintosh ne pose aucun problème)

11. En termes de reconstruction, la vidéo ne peut pas être lue automatiquement. La première lecture nécessite que l'utilisateur clique pour la déclencher.

(Quel format doit être utilisé pour la vidéo ? Il est recommandé d'utiliser le format mp4 et l'encodeur H.264)

12. Pour la reconstruction, veuillez faire plus attention aux téléphones mobiles « Meizu ». et Huawei P6/P7 lors des tests, un téléphone avec des boutons virtuels en bas de l'écran. L'équipement est sujet à des problèmes.

Cela dit, voici quelques informations supplémentaires :
◆Quel noyau de navigateur WeChat utilise-t-il ? Eh bien, cette question est vraiment difficile à expliquer clairement.
Android :
WeChat version 5.4-6.1. Si vous avez installéle navigateur QQ, utilisez le noyau du navigateur QQ. Sinon, utilisez celui fourni avec le système de téléphonie mobile.
Après la version 6.1 de WeChat, le cœur du navigateur QQ est intégré.
Navigateur QQ : les versions 6.2 et ultérieures utilisent le noyau Blink. J'ai déjà utilisé le noyau Webkit.
Apple :
Cela a toujours été intégré au système...
◆ Pour l'opération de glissement vers le haut pour tourner les pages, la flèche de guidage visuel doit être vers le haut, pas vers le bas, sauf si vous cliquez sur la page ; effet tournant, utilisez simplement la flèche vers le bas.
◆ Scanner d'empreintes digitales ? L'écran Pro déclenche l'interaction ? Coup pour détecter la composition du gaz ?
Ce sont toutes des pseudo-techniques, amusez-vous simplement à jouer avec, haha.
Mais des choses comme l'interaction multi-écrans, l'analyse audio, etc., fournir un support technique via diverses interfaces et réaliser certaines opérations interactives, ce sont les tendances du futur !

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment compter le nombre de sommes de table dans bootstrap

Comment utiliser JS pour basculer entre masquer et afficher simultanément les icônes Switch

Comment implémenter vue.js todolist

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!