Mises en page d'application
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Lorsque vous concevez des applications pour Wear OS, soyez intentionnel des mises en page que vous choisissez
chaque expérience. Comme Wear OS s'exécute sur des écrans circulaires,
par rapport aux appareils portables, il existe deux catégories
de mises en page standards
dont vous devez tenir compte
lors de la conception de votre application.
Les mises en page sans défilement se concentrent sur des informations lisibles d'un coup d'œil et offrent aux utilisateurs une valeur ajoutée avec
avec peu ou pas d'interaction. Pour cette raison, il peut
être difficile de construire
un comportement réactif dans ces mises en page:
- Effectuez des tests sur une combinaison de langues, de mise à l'échelle des polices, d'appareils et de variables
contenus.
- Utiliser des mises en page non déroulantes uniquement lorsque le contenu est connu ou contrôlé
à l'avance ou si vous devez
utiliser une conception spécifique.
- Appliquez les marges supérieures, inférieures et latérales recommandées à la mise en page.
- Définissez les marges sous forme de pourcentages à des endroits où le contenu pourrait autrement
être rognés.
- Disposer les éléments de manière à faire le meilleur usage possible de l'espace à l'intérieur de
l’écran et maintenir l’équilibre entre
différentes tailles d’appareils.
Pour les pages contenant plus d'informations qu'il ne peut y avoir un seul écran ; ou
nécessaires pour des parcours plus longs et plus immersifs,
vue.
- Appliquez les marges supérieures, inférieures et latérales recommandées.
- Définissez les marges extérieures en pourcentages pour éviter le rognage au niveau des
au début et à la fin du conteneur déroulant.
- Appliquez des marges dans des valeurs de DP fixes entre les éléments d'interface utilisateur.
Les vues déroulantes qui utilisent des pratiques de conception réactive s'adaptent généralement à un éventail
les tailles d'écran. Toutefois, dans certains cas particuliers, vous pouvez utiliser un point d'arrêt
remplacer les dimensions et améliorer les mises en page qui affichent des options supplémentaires,
une plus grande lisibilité, ou pour que le contenu s'affiche mieux à l'écran. L'exemple suivant
montre comment, sur les grands écrans, les deux boutons inférieurs sont élargis:
Kits de conception Figma
Consultez la page de téléchargement des kits de conception pour découvrir les mises en page de conception avec
des composants, des options et des recommandations pour créer différentes applications et cartes
conceptions qui respectent
les meilleures pratiques.
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,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
