Niveau 2: Réactif et optimisé
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
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
check_circle
À faire
- 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.
cancel
À é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 principalement graphique.
Exemples
Les images suivantes montrent des exemples d'applications responsives et optimisées.
Mosaïque avec des cartes d'images
Liste de fiches avec images
Le contenu et les exemples de code de cette page sont soumis aux licences décrites dans la Licence de contenu. Java et OpenJDK sont des marques ou des marques déposées d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/07/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/07/27 (UTC)."],[],[],null,["# Tier 2: Responsive and optimized\n\nApps that employ responsive layouts and automatically adapt to different screen\nsizes offer additional value to users and provide more productive, engaging user\nexperiences.\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\nAdd value through responsive design\n-----------------------------------\n\ncheck_circle\n\n### Do\n\n- Use the M3 Compose component library which has built-in responsive and adaptive behavior.\n- Utilize responsive layouts, which automatically and smoothly adjust to fill the available space across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements---including text fields, buttons, dialogs---to fill extra space.\n- Increase the sizes of fonts, unless they're serving a primarily graphic purpose.\n\nExamples\n--------\n\nThe following images show examples of apps that are responsive and optimized.\n\n\n### Edge-hugging buttons\n\n\u003cbr /\u003e\n\n\n### List of cards\n\n\u003cbr /\u003e\n\n\n### List of switchers and buttons\n\n\u003cbr /\u003e\n\n\n### Tile with image cards\n\n\u003cbr /\u003e\n\n\n### List of cards with images\n\n\u003cbr /\u003e\n\n\n### Tile with graph\n\n\u003cbr /\u003e"]]
