Maison >interface Web >Tutoriel H5 >Points clés de l'optimisation de la conception de sites Web mobiles

Points clés de l'optimisation de la conception de sites Web mobiles

一个新手
一个新手original
2017-09-20 09:12:571660parcourir

Bien que le terminal mobile soit limité par les performances du téléphone mobile, le réseau et d'autres contraintes et ne puisse pas obtenir les mêmes excellents résultats qu'un PC, le terminal mobile possède également ses propres avantages uniques, tels que le défilement de parallaxe et le capteur « d'accélération » grâce à l'unique fonction de détection de gravité du téléphone mobile. Réalisez une interaction homme-machine élégante et intéressante telle que « secouer ».

Éléments visuels qui affectent la page d'accueil du site Web mobile

  • Temps de chargement de la page Web

  • Format du site Web [conception et réponse]

  • Fonction de recherche visible

  • Cliquez pour appeler

  • Connexion visible

  • Fonctions des médias sociaux

  • Affichage de l'application

Temps de chargement de la page Web
Le principal facteur d'influence le facteur est les fichiers de ressources statiques, les images, etc.


Format du site Web [conception et réponse]


Fonction de recherche visible


Cliquez pour appeler


Connexion visible


Fonctionnalités des réseaux sociaux


Affichage de l'application


Spécifications de conception de la page d'accueil du terminal mobile


Mobile spécifications de conception de page spéciale du terminal

Configurer une zone de sécurité
Indépendamment du mobile ou du PC, une zone de sécurité doit être déterminée comme la zone visuelle et de contact de l'utilisateur, et les informations importantes doivent être placées dans la zone de sécurité. Paramètres de la zone de sécurité mobile : laissez un espace blanc approprié des deux côtés de la largeur de l'écran mobile et ajustez la hauteur du premier écran en conséquence.


Contrôler la taille de l'image
L'image d'en-tête d'un sujet donne souvent aux utilisateurs un fort impact visuel, mais en raison des limitations du réseau mobile, le coût d'attente pour charger une image est souvent bien plus important que sur un PC Par conséquent, la zone étendue de l’image d’en-tête est adaptée à l’utilisation de matériaux de couleur unie, dégradés et mosaïques pour réduire le trafic réseau et améliorer la vitesse de chargement.


Police
Dans la page du sujet, la taille de la police principale doit être contrôlée dans les limites de 3. La police doit être rendue en utilisant la police par défaut du système mobile autant que possible. à volonté et assurez-vous que la taille de la police est un nombre entier.
Généralement, la taille de la police sur la version mobile est le double de celle de la version PC.


Zone d'interaction de contrôle
Les terminaux mobiles sont souvent des panneaux de contrôle. La sensibilité minimale des doigts dans la zone chaude de l'écran est de 44 pixels. Ce problème doit être pris en compte lors de la conception de la zone d'interaction du terminal mobile.


Réduire les sauts
Limités à l'environnement du réseau mobile, les sauts de page provoqueront un plus grand malaise psychologique chez les utilisateurs, les informations clés doivent donc être affichées raisonnablement sur une seule page autant que possible. Si le saut est nécessaire, vous pouvez utiliser des méthodes d'expansion, de pop-up, de déroulement et d'autres méthodes pour réduire l'impact psychologique de l'utilisateur.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn