Les applications qui utilisent des mises en page responsives et s'adaptent automatiquement à différentes tailles d'écran offrent une valeur ajoutée aux utilisateurs et offrent des expériences plus productives et attrayantes.
Les mises en page responsives formatent et positionnent de manière dynamique des éléments tels que des boutons, des champs de texte et des boîtes de dialogue pour optimiser l'expérience utilisateur. Proposez automatiquement aux utilisateurs de votre application une valeur ajoutée sur les écrans plus grands en appliquant les pratiques de conception responsive. Que ce soit plus de texte visible d'un coup d'œil, plus d'actions à l'écran ou des cibles tactiles plus grandes et plus accessibles, les pratiques responsives offrent une expérience améliorée aux utilisateurs d'écrans plus grands.
Ajouter de la valeur grâce au responsive design
À faire
- Utilisez la bibliothèque de composants Compose M3, qui intègre un comportement responsif et adaptatif.
- Utilisez des mises en page responsives, qui s'ajustent automatiquement et facilement pour remplir l'espace disponible sur toutes les tailles d'écran.
À éviter
- Étirez les éléments d'interface utilisateur, y compris les champs de texte, les boutons et les boîtes de dialogue, pour remplir l'espace supplémentaire.
- Augmentez la taille des polices, sauf si elles ont une fonction graphique principale.
Créer des applications et des cartes responsives pour Wear OS
Les UI responsives s'étirent et se modifient pour exploiter au mieux tout l'espace disponible à l'écran, quelle que soit la taille de l'écran sur lequel elles sont affichées.
Lorsque vous concevez des mises en page responsives sur un écran rond, les vues à faire défiler et celles qui ne le sont pas ont chacune des exigences uniques pour maintenir la mise à l'échelle des éléments d'interface utilisateur et préserver une mise en page et une composition équilibrées. Pour les vues à défilement, utilisez des pourcentages pour définir toutes les marges supérieure, inférieure et latérale afin d'éviter le recadrage et de fournir une mise à l'échelle proportionnelle des éléments. Pour les vues sans défilement, utilisez des pourcentages et des contraintes verticales pour toutes les marges. De cette façon, le contenu principal au milieu peut s'étendre pour remplir la zone disponible.
Vues défilantes
Toutes les marges supérieure, inférieure et latérale doivent être définies en pourcentages pour éviter le recadrage et assurer une mise à l'échelle proportionnelle des éléments.
Vues sans défilement
Toutes les marges doivent être définies en pourcentages, et les contraintes verticales doivent être définies de sorte que le contenu principal au milieu puisse s'étendre pour remplir la zone disponible.
Exemples
Les images suivantes présentent des exemples d'applications responsives et optimisées.
Boutons qui épousent les bords
Liste de fiches
Liste des boutons et des sélecteurs
Carte avec des fiches illustrées
Liste de fiches avec images
Carte avec graphique
