Premiers pas avec les mises en page adaptatives
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
L'écosystème Wear OS est constitué d'appareils de différentes tailles d'écran. L'utilisation des principes d'UI adaptative est essentielle pour offrir une expérience de la plus haute qualité à tous les utilisateurs.
Qu'est-ce qu'une UI adaptative ?
Les UI adaptatives 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.
Les UI adaptatives changent de manière responsive, à l'aide de composants et de méthodes intégrés directement à la logique de mise en page. Ces mises en page utilisent également des points de rupture de taille d'écran (en appliquant une conception différente à différentes tailles d'écran) pour créer une expérience encore plus riche pour les utilisateurs.
Principales tailles d'écran
Découvrez les principales tailles de référence à garder à l'esprit lorsque vous concevez de nouvelles expériences.
Tailles d'écran
Types de mises en page
Lorsque vous concevez des mises en page adaptatives sur un écran rond, les vues à défilement et non à défilement ont chacune des exigences uniques pour mettre à l'échelle les éléments d'interface utilisateur et maintenir une mise en page et une composition équilibrées.
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 un étalonnage proportionnel des éléments.
Vues non déroulantes
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.
Ajouter de la valeur grâce à des mises en page et des pratiques de conception adaptatives
Lorsque vous concevez des mises en page adaptatives sur un écran rond, les vues à défilement et celles sans défilement ont chacune des exigences uniques pour mettre à l'échelle les éléments d'interface utilisateur et maintenir une mise en page et une composition équilibrées.
Les images suivantes sont des suggestions générales. Les exemples sont fournis à titre d'illustration uniquement. Consultez chaque page de composant ou de surface pour obtenir des conseils détaillés, contextuels et adaptés.
Plus de contenus en un coup d'œil
Les mises en page responsives permettent d'afficher plus de chips, de cartes, de lignes de texte et de boutons sur un même écran.
Plus d'éléments de contenu visibles
Utilisez de nouvelles mises en page, appliquées à des points d'arrêt de taille d'écran définis, pour permettre l'introduction de nouveaux contenus lorsque cela est possible, offrant ainsi une valeur ajoutée à l'utilisateur sur les appareils à plus grande taille d'écran.
Amélioration de la visibilité
Utilisez l'espace supplémentaire à l'écran pour proposer des conteneurs plus grands, un texte plus gros, des anneaux plus épais et une visualisation des données plus précise afin de faciliter la lecture pour les utilisateurs.
Amélioration de l'usabilité
Utilisez l'espace supplémentaire de l'écran pour proposer des cibles plus grandes, une hiérarchie visuelle plus importante et un espace supplémentaire entre les éléments de contenu afin de faciliter les interactions avec les interfaces.
Compositions optimisées
Utilisez nos composants et modèles mis à jour pour améliorer l'apparence de nos UI sur toutes les tailles d'écran.
Qualité de l'application
Nos consignes relatives à la qualité sont organisées en trois niveaux. Offrez la meilleure expérience possible à vos utilisateurs en respectant les consignes des trois niveaux.
Consignes relatives à la qualité
Prêt pour toutes les tailles d'écran
Assurez-vous que votre application offre une expérience de qualité sur toutes les tailles d'écran. Créez des mises en page qui utilisent tout l'espace disponible dans l'application.
Commencer
Réactivité et optimisation
Proposez plus de contenus aux utilisateurs sur les appareils qui le permettent et utilisez des mises en page responsives qui s'adaptent automatiquement à différentes tailles d'écran.
Commencer
Adaptative et différenciée
Exploitez tout l'espace supplémentaire en utilisant des points de rupture pour proposer de nouvelles expériences puissantes sur les écrans plus grands, qui ne sont pas possibles sur les appareils à écran plus petit.
Commencer
Utiliser des mises en page canoniques établies
Utilisez des mises en page canoniques établies pour aider vos UI à s'adapter facilement à différentes tailles d'appareils.
Nos mises en page canoniques ont été développées avec soin pour offrir une expérience de haute qualité sur toutes les tailles d'écran.
Mises en page standard
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,["# Get started with adaptive layouts\n\nThe Wear OS ecosystem is made up of devices that have a wide variety of screen\nsizes. Utilizing adaptive UI principles is critical to delivering the highest\nquality experience for all users.\n\nWhat is adaptive UI?\n--------------------\n\nAdaptive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on.\n\nAdaptive UIs change responsively, using components and methods built directly\ninto the layout logic. These layouts also utilize screen size\nbreakpoints---applying a different design on different screen sizes---to create an\neven richer experience for users.\n\nKey screen sizes\n----------------\n\n\nLearn about key reference sizes to keep in mind as you design new experiences\n\n[Screen sizes](/design/ui/wear/guides/foundations/screen-sizes) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nTypes of layouts\n----------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\n\n**Scrolling views**\n\nAll top, bottom, and side margins\nshould be defined in percentages to avoid clipping and provide\nproportional scaling of elements. \n\n**Non-scrolling views**\n\nAll margins should be defined\nin percentages and vertical constraints should be defined such that the\nmain content in the middle can stretch to fill the available area.\n\n\u003cbr /\u003e\n\nAdd value through adaptive layouts and design practices\n-------------------------------------------------------\n\nWhen designing for adaptive layouts on the round screen, scrolling and\nnon-scrolling views each have unique requirements for scaling UI elements and\nmaintaining a balanced layout and composition.\n\nThe following images are broad suggestions; examples are for illustrative\npurposes only. View each component or surface page for detailed, contextual,\nresponsive guidance.\n\n\n**More content at a glance**\n\nResponsive layouts allow for more chips, more cards, more lines of text, and\nmore buttons to fit on a single screen \n\n**More content elements visible**\n\nUtilize new layouts, applied at defined screen size breakpoints, to allow for\nthe introduction of new content when possible, giving the user additional value\non devices with larger screen sizes.\n\n\u003cbr /\u003e\n\n\n**Improved glanceability**\n\nUse extra screen space to provide larger containers, larger text, thicker rings,\nand more granular data visualization to provide better glanceability for users. \n\n**Improved usability**\n\nUse extra screen space to provide bigger tap targets, greater visual hierarchy,\nand additional space between content items to make interfaces easier and more\ncomfortable to interact with.\n\n\u003cbr /\u003e\n\n\n**Optimized compositions**\n\nUtilize our updated components and templates to offer a better look and feel for\nour UIs across all screen sizes. \n\n\u003cbr /\u003e\n\nApp quality\n-----------\n\n\nOur quality guidelines are organized into three levels. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n[Quality guidelines](/docs/quality-guidelines/wear-app-quality) \n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\n\n**Ready for all screen sizes**\n\nMake sure your app is delivering a quality experience across all screen\nsizes. Create layouts that fully use the available app space.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-ready) \n**Responsive and optimized**\n\nDeliver more content to users on devices which allow for it, and utilize\nresponsive layouts that automatically adapt to different screen sizes.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-optimized) \n**Adaptive and differentiated**\n\nMake the most of additional real estate by utilizing breakpoints to offer\npowerful new experiences on larger screens which are not possible on devices\nwith smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)\n\n\u003cbr /\u003e\n\n*** ** * ** ***\n\nUtilize established canonical layouts\n-------------------------------------\n\n\nUse established canonical layouts to help your UIs adapt smoothly across a range\nof device sizes.\n\nOur canonical layouts have been developed thoughtfully to offer a high quality\nexperience across all screen sizes.\n\n[Canonical layouts](/design/ui/wear/guides/foundations/canonical-adaptive-layouts) \n\n\u003cbr /\u003e"]]
