Niveau 2: Réactif et optimisé

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 leur proposent 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 grands écrans en utilisant des pratiques de conception responsives. Qu'il s'agisse d'afficher plus de texte en un coup d'œil, de proposer plus d'actions à l'écran ou d'offrir des cibles tactiles plus grandes et plus accessibles, les pratiques responsives améliorent l'expérience des utilisateurs de grands écrans.

Ajouter de la valeur grâce au design responsif

  • Utilisez la bibliothèque de composants M3 Compose, qui intègre un comportement réactif et adaptatif.
  • Utilisez des mises en page responsives qui s'ajustent automatiquement et de manière fluide pour remplir l'espace disponible sur les différentes tailles d'écran.
  • É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 principalement graphique.

Exemples

Les images suivantes montrent des exemples d'applications responsives et optimisées.

Boutons qui épousent le bord de l'écran

Liste de cartes

Liste des commutateurs et des boutons

Mosaïque avec des cartes d'images

Liste de fiches avec images

Mosaïque avec graphique