Résumé des conseils lors de la conception du H5

Cette fois, je vais vous apporter un résumé des conseils lors de la conception du H5 Quelles sont les précautions lors de la conception du H5. Voici des cas pratiques, jetons un coup d'œil.

Je pense que beaucoup de gens ont une certaine expérience dans l'utilisation du HTML5. En fait, il existe de nombreuses techniques d'utilisation différentes dans l'utilisation du HTML. L'article suivant partagera avec vous plusieurs techniques de conception HTML. jetez un oeil

1. En termes d'interaction, utilisez la bonne méthode d'opération coulissante avec prudence.

Par exemple : Musique Scratch effet de maculage, 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 l’affichage horizontal sur écran avec prudence.

Raison : en termes d'expérience, l'appareil utilisateur doit activer la fonction de rotation de l'écran pour une visualisation normale, 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., sont éloignés du bas de la page (environ 128 px, cette taille n'est pas une valeur fixe. Cela dépend de la méthode d'adaptation utilisée pour la reconstruction (pour référence uniquement : 640*1136 px). , calculé de haut en bas, contenu principal dans les 1008px).

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 « style de calque » dans PS avec prudence.

Par exemple : ajoutez une "lumière douce", une "couleur d'écran", une "teinte" et d'autres effets au calque, à moins que cet élément visuel ne puisse être fusionné en un seul.

Raison : Creuser des trous pour la reconstruction, ce qui rend difficile la découpe des images et incapable de restaurer les effets visuels.

5. Visuellement, des graphiques vectoriels ? Vous voulez créer une animation simple ? Essayez de l'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.

Par exemple : divers effets de particules flottent sur l’écran, etc.

Raison : si les effets visuels présentés ne peuvent pas être implémentés dans le code, cela signifie que des images de séquence en taille plein écran doivent être utilisées pour les traiter, ce qui augmentera la taille et affectera l'expérience de chargement.

7. Pour les animations, les conseils sur la compression des images de séquence et les images statiques peuvent être enregistrées avec 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 télécharger l'image sur « tinypng.com » et la compresser pour réduire efficacement la taille.

Raison : Eh bien, laissez-moi vous expliquer la raison ? Eh bien, laissez-moi vous le dire en secret, maintenant ce site Web peut non seulement compresser le png, mais aussi le jpg, et plus important encore... il prend en charge le téléchargement par lots

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

Astuce : 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, Android ne prend 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 joués en même temps (les machines Apple n'ont 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.

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

12. En termes de reconstruction, veuillez prêter plus d'attention aux téléphones mobiles « Meizu » et aux téléphones mobiles Huawei P6/P7 qui utilisent des boutons virtuels en bas de l'écran lors des tests. 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é QQ Browser, utilisez le noyau de QQ Browser. Sinon, utilisez celui fourni avec le système de téléphonie mobile.

Après WeChat version 6.1, 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. (Ne vous y trompez pas, si nécessaire, rendez-vous sur : http://x5.tencent.com/index pour en savoir plus sur le navigateur QQ)

Pomme :

Cela a toujours été intégré au système...

◆ Lorsque vous glissez vers le haut pour tourner les pages, la flèche de guidage visuel doit être vers le haut et non vers le bas, sauf si vous cliquez sur l'effet de rotation de page, utilisez la flèche vers le bas ;

◆ Scanner d'empreintes digitales ? Toucher l'écran pour déclencher une interaction ? Coup pour détecter la composition du gaz ?

Ce sont toutes des pseudo-techniques, soyez juste heureux de jouer avec elles, haha.

Cependant, comme l'interaction multi-écrans, l'analyse audio, etc., fournir un support technique via diverses interfaces pour réaliser certaines opérations interactives, ce sont les tendances futures

Je pense que vous maîtrisez la méthode après avoir lu le cas ! dans cet article, et il y en aura d'autres plus excitants. Veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Caméra d'opération de balise vidéo H5

Explication détaillée de l'utilisation des contrôles Django et du passage de paramètres

jquery implémente la sélection de tout et la sélection unique inverse

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!