Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Material 3 Expressive s'appuie sur le langage des formes de manière beaucoup plus vaste et significative en utilisant des formes de conteneur flexibles pour appliquer l'arrondi et l'affûtage des rayons d'angle afin de prendre en charge les listes de morphing de forme et les états des boutons.
Le système de conception introduit également des boutons qui épousent les bords comme modèle de conception emblématique et propre aux appareils ronds sur Wear OS.
Conserver le scaling des éléments d'UI
Lorsque vous concevez des mises en page sur un écran rond, les vues avec et sans défilement ont chacune des exigences uniques pour maintenir la mise à l'échelle des éléments d'interface utilisateur et préserver une mise en page et une composition équilibrées.
Vues défilantes
Pour les vues de défilement, utilisez des pourcentages pour définir toutes les marges supérieure, inférieure et latérales afin d'éviter le rognage et de fournir une mise à l'échelle proportionnelle des éléments.
Toutes les marges supérieure, inférieure et latérales doivent être définies en pourcentage pour éviter le rognage et permettre une mise à l'échelle proportionnelle des éléments.
Vues non défilantes
Pour les vues sans défilement, utilisez des pourcentages et des contraintes verticales pour toutes les marges. De cette façon, le contenu principal au milieu peut s'étendre pour remplir la zone disponible.
Toutes les marges doivent être définies en pourcentage et les contraintes verticales doivent être définies de sorte que le contenu principal au milieu puisse s'étendre pour remplir la zone disponible.
Niveaux de consignes relatives à la qualité
Nos consignes de qualité sont organisées en trois niveaux. Offrez la meilleure expérience possible à vos utilisateurs en respectant les consignes des trois niveaux.
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 pleinement l'espace disponible dans l'application.
Réactif et optimisé
Proposez plus de contenu aux utilisateurs sur les appareils qui le permettent et utilisez des mises en page responsives qui s'adaptent automatiquement à différentes tailles d'écran.
Adapté et différencié
Exploitez au maximum l'espace supplémentaire en utilisant des points d'arrêt pour offrir de nouvelles expériences puissantes sur les grands écrans, ce qui n'est pas possible sur les appareils dotés de petits écrans.
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/26 (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/26 (UTC)."],[],[],null,["# Design quality tiers\n\nMaterial 3 Expressive leans into shape language in a much more expansive and\nmeaningful way by utilizing flexible container shapes to apply rounding and\nsharpening of corner radii to support shape morphing lists and button states.\nThe design system also introduces edge-hugging buttons as an ownable and iconic\ndesign pattern for round devices on Wear OS.\n\nMaintain UI element scaling\n---------------------------\n\nWhen designing layouts on a round screen, scrolling and non-scrolling\nviews each have unique requirements to maintain UI element scaling and preserve\na balanced layout and composition.\n\n\n**Scrolling views**\n\nFor scrolling views, use percentages to define all top, bottom, and side\nmargins to avoid clipping and provide proportional scaling of elements.\n\nAll top, bottom, and side margins should be defined in percentages to avoid\nclipping and provide proportional scaling of elements. \n**Non-scrolling views**\n\nFor non-scrolling views, use percentages and vertical constraints for all\nmargins. That way, the main content in the middle can stretch to fill the\navailable area.\n\nAll margins should be defined in percentages and vertical constraints should be\ndefined such that the main content in the middle can stretch to fill the\navailable area.\n\n\u003cbr /\u003e\n\nTiers of quality guidelines\n---------------------------\n\nOur quality guidelines are organized into three tiers. Enable the best possible\nexperience for your users by meeting guidelines in all three tiers.\n\n\n**Ready for all screen sizes**\n\nEnsure your app is delivering a quality experience across all screen sizes.\nCreate layouts that fully use the available app space. \n\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**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\u003cbr /\u003e\n\n| **Caution:** A larger display size should *never* display less information than ones that are smaller than it, this is especially relevant for custom behaviors added in at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less are the larger screens. Screens should always show \"more value\" and never \"less value\" with increasing size."]]
