Conception responsive et adaptative
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Pour s'adapter à la taille croissante des écrans, nous avons intégré un comportement responsif aux modèles de mise en page Material de ProtoLayout et aux mises en page de conception Figma, ce qui permet aux emplacements de s'adapter automatiquement. En substance, les emplacements sont conçus pour remplir la largeur disponible. Nos marges sont définies en pourcentages, avec des marges intérieures supplémentaires ajoutées aux emplacements en haut et en bas de l'écran, ce qui tient compte des fluctuations de la courbe de l'écran lorsqu'il s'agrandit.
Pour exploiter pleinement la taille et l'espace supplémentaires de l'écran, envisagez d'utiliser l'espace supplémentaire pour offrir plus de valeur en permettant aux utilisateurs d'accéder à des informations ou à des options supplémentaires. Pour obtenir ces mises en page, vous devez effectuer une personnalisation supplémentaire au-delà du comportement responsif intégré. Pour ce faire, ajoutez plus de contenu utile à la mise en page après le point d'inflexion. Il est important de noter que le point d'arrêt recommandé est défini sur la taille d'écran de 225 dp.
Termes essentiels
Conception responsive:approche de conception dans laquelle les mises en page 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 une valeur ajoutée sur les écrans plus grands en appliquant les pratiques de conception responsive. Que ce soit plus de texte visible d'un coup d'œil, plus d'actions à l'écran ou des cibles plus grandes et plus accessibles, les pratiques responsives offrent une expérience améliorée aux utilisateurs d'écrans de grande taille.
Conception adaptative:approche de conception dans laquelle l'interface change en fonction de l'utilisateur, de l'appareil ou des conditions environnementales connus. La conception adaptative dans Material inclut des adaptations de mise en page et de composants.
Créer des conceptions responsives et optimisées
Pour nous assurer que vos mises en page s'adaptent aux écrans de plus grande taille, nous avons modifié le comportement de nos mises en page et composants pour qu'ils soient responsifs, y compris les marges et les marges intérieures basées sur des pourcentages.
Si vous utilisez nos modèles ProtoLayout, vous pouvez hériter de ces mises à jour automatiquement via l'API ProtoLayout et les notes de version bêta. Vous n'avez alors qu'à fournir des mises en page dans lesquelles vous avez ajouté du contenu ou des composants supplémentaires après un point d'inflexion de taille d'écran. Pour obtenir des conseils et des recommandations complets sur l'utilisation optimale d'un écran plus grand, consultez nos conseils sur les cartes. Les cartes ont une hauteur d'écran fixe. Nous avons donc ajusté la marge intérieure pour maximiser l'espace limité de l'écran sans créer de rognage indésirable.
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 adaptive design\n\nTo accommodate the increasing screen size, we've incorporated responsive behavior into the [ProtoLayout Material layout templates](https://developer.android.com/reference/kotlin/androidx/wear/protolayout/material3/package-summary#(androidx.wear.protolayout.material3.MaterialScope).primaryLayout(kotlin.Function1,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.wear.protolayout.ModifiersBuilders.Clickable,androidx.wear.protolayout.material3.PrimaryLayoutMargins)) and Figma design layouts, allowing the slots to automatically adapt. In essence, slots are designed to fill the available width. Our margins are set as percentages, with additional inner margins added to slots at the bottom and top of the screen, accounting for fluctuations in the curve of the screen as it enlarges.\n\nTo maximize the larger screen size and additional space, consider utilizing the extra screen space to provide more value by allowing users to access additional information or options. Achieving these layouts requires additional customization beyond the built-in responsive behavior. This can be accomplished by adding more helpful content to the layout after the breakpoint. It's important to note that the recommended breakpoint is set at the 225dp screen size.\n\nEssential terms\n---------------\n\n**Responsive design:** A design approach in which layouts dynamically format and position elements such as buttons, text fields, and dialogs for an optimal user experience. Automatically offer users additional value on larger screens by utilizing responsive design practices. Whether it's more text visible at a glance, more actions on screen, or larger, more accessible tap targets, responsive practices provide an enhanced experience for users of large screens.\n\n**Adaptive design:** A design approach in which the interface changes based on known user, device, or environmental conditions. Adaptive design in Material includes layout and component adaptations.\n\nBuilding responsive and optimized designs\n-----------------------------------------\n\nTo ensure your design layouts adapt to larger screen sizes, we have updated the behavior of our layouts and components to have built-in responsive behavior, including percentage-based margins and padding.\nIf you are using our ProtoLayout templates, you can inherit these updates automatically through the [ProtoLayout API](/design/ui/wear/guides/surfaces/tiles/reference/kotlin/androidx/wear/protolayout/material3/package-summary) and the [beta release notes](https://developer.android.com/jetpack/androidx/releases/wear-protolayout#1.3.0-beta02), and only need to supply layouts where you have added additional content or components after a screen size breakpoint. For full guidance and recommendations on how to take advantage of a larger screen size, view our [Tiles guidance](/design/ui/wear/guides/surfaces/tiles/wear/guides/surfaces/tiles). Tiles have a fixed screen height, so we've adjusted the padding to maximize the limited screen real estate without creating unwanted clipping."]]
