Solution responsive et optimisée
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Les applications responsives et optimisées utilisent des mises en page responsives qui s'adaptent automatiquement à différentes tailles d'écran, offrant ainsi une valeur ajoutée aux utilisateurs et une expérience utilisateur productive et attrayante.
Ajoutez de la valeur grâce au responsive design
Les mises en page responsives mettent en forme et positionnent dynamiquement des éléments tels que des boutons, des champs de texte et des boîtes de dialogue pour une expérience utilisateur optimale. Offrez automatiquement aux utilisateurs de votre application une valeur supplémentaire sur les grands écrans en utilisant des pratiques de conception responsive. Qu'il s'agisse d'une plus grande visibilité du texte d'un seul coup d'œil, d'un plus grand nombre d'actions à l'écran ou d'éléments tactiles plus grands et plus accessibles, les pratiques réactives offrent une expérience améliorée aux utilisateurs sur grand écran.
Créer des applications et des cartes responsives pour Wear OS
Les interfaces utilisateur responsives sont étirées et modifiées pour exploiter au mieux tout l'espace disponible à l'écran, quelle que soit la taille de l'écran. Lors de la conception de mises en page responsives sur un écran rond, les vues avec défilement ou sans défilement ont chacune des exigences uniques pour maintenir la mise à l'échelle des éléments d'interface utilisateur, ainsi que pour préserver une mise en page et une composition équilibrées. Pour les vues défilantes, utilisez des pourcentages pour définir toutes les marges supérieure, inférieure et latérale afin d'éviter le rognage et d'assurer 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 situé au milieu peut s'étirer pour occuper toute la zone disponible.
Consultez les conseils d'implémentation de Compose et des cartes pour les mises en page responsives.
check_circle
À faire
- Utilisez des composants standards conçus pour l'adaptation.
- Utilisez des mises en page adaptatives qui s'adaptent de manière fluide à toutes les tailles d'écran.
cancel
À éviter
- Étirer des éléments d'interface utilisateur (champs de texte, boutons, boîtes de dialogue) pour remplir l'espace supplémentaire
- Augmenter la taille des polices (sauf si elles sont utilisées à des fins principalement graphiques).
Prochaine étape: adaptative et différenciée
Les applications adaptatives et différenciées créent une expérience utilisateur qui n'est pas possible sur les appareils à petit écran.
Commencer
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,["# Responsive and optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\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\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]
