Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Bei Material 3 Expressive wird die Formensprache auf viel umfassendere und aussagekräftigere Weise genutzt. Dazu werden flexible Containerformen verwendet, um abgerundete und scharfe Eckenradien anzuwenden, die das Morphen von Listen und Schaltflächenstatus unterstützen.
Das Designsystem führt außerdem randbündige Schaltflächen als eigenes und ikonisches Designmuster für runde Geräte unter Wear OS ein.
Skalierung von UI-Elementen beibehalten
Beim Entwerfen von Layouts auf einem runden Bildschirm gelten für scrollende und nicht scrollende Ansichten jeweils eigene Anforderungen, um die Skalierung von UI-Elementen beizubehalten und ein ausgewogenes Layout und eine ausgewogene Komposition zu erzielen.
Scrollansichten
Verwenden Sie für scrollende Ansichten Prozentsätze, um alle oberen, unteren und seitlichen Ränder zu definieren. So vermeiden Sie das Abschneiden von Elementen und ermöglichen eine proportionale Skalierung.
Alle oberen, unteren und seitlichen Ränder sollten in Prozent definiert werden, um das Abschneiden von Elementen zu vermeiden und eine proportionale Skalierung zu ermöglichen.
Nicht scrollende Ansichten
Verwenden Sie für nicht scrollende Ansichten Prozentsätze und vertikale Constraints für alle Ränder. So kann sich der Hauptinhalt in der Mitte über den gesamten verfügbaren Bereich erstrecken.
Alle Ränder sollten in Prozent definiert werden und vertikale Constraints sollten so definiert werden, dass sich der Hauptinhalt in der Mitte über den verfügbaren Bereich erstrecken kann.
Qualitätsrichtlinien nach Stufen
Unsere Qualitätsrichtlinien sind in drei Stufen unterteilt. Wenn Sie die Richtlinien in allen drei Stufen einhalten, können Sie Ihren Nutzern die bestmögliche Erfahrung bieten.
Für alle Bildschirmgrößen geeignet
Achten Sie darauf, dass Ihre App auf allen Bildschirmgrößen eine gute Nutzererfahrung bietet.
Erstellen Sie Layouts, die den verfügbaren App-Bereich vollständig nutzen.
Reaktionsschnell und optimiert
Stellen Sie Nutzern auf Geräten, die dies zulassen, mehr Inhalte zur Verfügung und verwenden Sie responsive Layouts, die sich automatisch an verschiedene Bildschirmgrößen anpassen.
Adaptiv und differenziert
Nutzen Sie den zusätzlichen Platz optimal aus, indem Sie Breakpoints verwenden, um auf größeren Bildschirmen leistungsstarke neue Funktionen anzubieten, die auf Geräten mit kleineren Bildschirmen nicht möglich sind.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-26 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 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."]]
