Erste Schritte mit adaptiven Layouts
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Das Wear OS-Ökosystem besteht aus Geräten mit einer Vielzahl von Bildschirmgrößen. Die Verwendung von adaptiven UI-Prinzipien ist entscheidend, um allen Nutzern eine optimale Nutzererfahrung zu bieten.
Was ist eine adaptive Benutzeroberfläche?
Adaptive Benutzeroberflächen werden gestreckt und geändert, um den gesamten verfügbaren Bildschirmplatz optimal zu nutzen, unabhängig davon, auf welchem Bildschirm sie gerendert werden.
Adaptive Benutzeroberflächen ändern sich reaktionsschnell und verwenden Komponenten und Methoden, die direkt in die Layoutlogik eingebunden sind. Bei diesen Layouts werden auch Bildschirmgrößen-Breakpoints verwendet, um ein anderes Design auf unterschiedliche Bildschirmgrößen anzuwenden und so die Nutzerfreundlichkeit zu verbessern.
Wichtige Bildschirmgrößen
Wichtige Referenzgrößen für die Gestaltung neuer Designs
Displaygrößen
Layouttypen
Wenn Sie adaptive Layouts für den runden Bildschirm entwerfen, haben Ansichten mit und ohne Scrollen jeweils unterschiedliche Anforderungen an die Skalierung von UI-Elementen und die Aufrechterhaltung eines ausgewogenen Layouts und einer ausgewogenen Komposition.
Scrollansichten
Alle Ober-, Unter- und Seitenränder sollten in Prozent definiert werden, um Ausschnitte zu vermeiden und eine proportionale Skalierung der Elemente zu ermöglichen.
Anzeigen ohne Scrollen
Alle Ränder sollten in Prozent definiert werden und die vertikalen Einschränkungen so, dass sich die Hauptinhalte in der Mitte so weit wie möglich ausdehnen können, um den verfügbaren Bereich auszufüllen.
Mehrwert durch adaptive Layouts und Designpraktiken
Wenn Sie ein Design für adaptive Layouts auf dem runden Bildschirm entwerfen, haben Ansichten mit und ohne Scrollen jeweils unterschiedliche Anforderungen an die Skalierung von UI-Elementen und die Aufrechterhaltung eines ausgewogenen Layouts und einer ausgewogenen Komposition.
Die folgenden Bilder sind allgemeine Vorschläge. Die Beispiele dienen nur der Veranschaulichung. Auf den Seiten zu den einzelnen Komponenten oder Oberflächen finden Sie detaillierte, kontextbezogene und responsive Anleitungen.
Mehr Inhalte auf einen Blick
Responsive Layouts ermöglichen mehr Chips, mehr Karten, mehr Textzeilen und mehr Schaltflächen auf einem einzigen Bildschirm.
Mehr Inhaltselemente sind sichtbar
Verwenden Sie neue Layouts, die bei definierten Bildschirmgrößen angewendet werden, um nach Möglichkeit neue Inhalte einzuführen und Nutzern auf Geräten mit größeren Bildschirmen zusätzlichen Mehrwert zu bieten.
Verbesserte Übersichtlichkeit
Nutzen Sie den zusätzlichen Bildschirmplatz, um größere Container, größeren Text, dickere Ringe und detailliertere Datenvisualisierungen zu verwenden, damit Nutzer die Informationen auf einen Blick erkennen können.
Verbesserte Nutzerfreundlichkeit
Nutzen Sie zusätzlichen Bildschirmraum, um größere Touch-Ziele, eine bessere visuelle Hierarchie und zusätzlichen Abstand zwischen Inhaltselementen zu schaffen, damit die Benutzeroberfläche einfacher und komfortabler zu bedienen ist.
Optimierte Zusammensetzungen
Mit unseren aktualisierten Komponenten und Vorlagen können Sie die Benutzeroberfläche auf allen Bildschirmgrößen ansprechender gestalten.
App-Qualität
Unsere Qualitätsrichtlinien sind in drei Ebenen unterteilt. Bieten Sie Ihren Nutzern die bestmögliche Umgebung, indem Sie die Richtlinien in allen drei Stufen einhalten.
Qualitätsrichtlinien
Für alle Bildschirmgrößen geeignet
Sorgen Sie dafür, dass Ihre App auf allen Bildschirmgrößen eine gute Leistung bietet. Erstellen Sie Layouts, die den verfügbaren App-Bereich vollständig nutzen.
Jetzt starten
Responsive und optimiert
Bieten Sie Nutzern auf Geräten, die dies zulassen, mehr Inhalte und verwenden Sie responsive Layouts, die sich automatisch an unterschiedliche Bildschirmgrößen anpassen.
Jetzt starten
Adaptiv und differenziert
Nutzen Sie den zusätzlichen Platz, indem Sie mithilfe von Wendepunkten auf größeren Bildschirmen neue Funktionen anbieten, die auf Geräten mit kleineren Bildschirmen nicht möglich sind.
Jetzt starten
Bestehende kanonische Layouts verwenden
Verwenden Sie etablierte kanonische Layouts, damit sich Ihre UIs problemlos an verschiedene Gerätegrößen anpassen lassen.
Unsere kanonischen Layouts wurden sorgfältig entwickelt, um eine hohe Qualität auf allen Bildschirmgrößen zu bieten.
Kanonische Layouts
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-27 (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-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"]]
