Responsiv und optimiert
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Apps, die responsiv und optimiert sind, nutzen responsive Layouts, die sich automatisch an verschiedene Bildschirmgrößen anpassen, was den Nutzern einen Mehrwert bietet und eine produktive, interaktive Nutzererfahrung bietet.
Mehrwert durch responsives Design
Bei responsiven Layouts werden Elemente wie Schaltflächen, Textfelder und Dialogfelder dynamisch formatiert und positioniert, um eine optimale Nutzererfahrung zu erzielen. Bieten Sie Nutzern Ihrer App auf größeren Bildschirmen mithilfe von Best Practices für responsives Design automatisch einen Mehrwert. Ganz gleich, ob mehr Text auf einen Blick sichtbar ist, mehr Aktionen auf dem Bildschirm angezeigt werden oder größere, barrierefreiere Tippziele sind – mit responsiven Verfahren verbessern sich die Nutzerfreundlichkeit auf größeren Bildschirmen.
Responsive Apps und Kacheln für Wear OS erstellen
Responsive UIs werden so gestreckt und angepasst, dass der gesamte verfügbare Platz auf dem Bildschirm optimal genutzt wird – unabhängig davon, auf welcher Bildschirmgröße sie gerendert werden. Beim Entwerfen responsiver Layouts auf einem runden Bildschirm gelten sowohl für scroll- als auch für nicht scrollbare Ansichten eigene Anforderungen, um die Skalierung von UI-Elementen sowie ein ausgewogenes Layout und eine ausgewogene Anordnung der Elemente beizubehalten. Bei scrollenden Ansichten können Sie mithilfe von Prozentsätzen den gesamten oberen, unteren und seitlichen Rand festlegen, um eine Begrenzung zu vermeiden und eine proportionale Skalierung von Elementen zu ermöglichen. Verwenden Sie bei nicht scrollbaren Ansichten Prozentsätze und vertikale Einschränkungen für alle Ränder. Auf diese Weise kann der Hauptinhalt
in der Mitte die verfügbare Fläche ausfüllen.
Weitere Informationen zur Implementierung von responsiven Layouts finden Sie unter Schreiben und Kacheln.
check_circle
Dos
- Verwenden Sie Standardkomponenten, die für die Anpassung vorgesehen sind.
- Nutzen Sie adaptive Layouts, die sich nahtlos an verschiedene Bildschirmgrößen anpassen.
cancel
Don'ts
- Sie können UI-Elemente (Textfelder, Schaltflächen, Dialogfelder) so erweitern, dass sie zusätzlichen Platz ausfüllen.
- Erhöhen Sie die Schriftgröße (es sei denn, sie dienen hauptsächlich grafischen Zwecken).
Nächster Schritt: anpassungsfähig und differenziert
adaptive und differenzierte Apps schaffen eine Nutzererfahrung, die auf Geräten mit kleineren Bildschirmen nicht möglich ist.
Los gehts
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,["# Responsive and optimized\n\nApps that are **responsive and optimized** utilize responsive layouts that\nautomatically adapt to different screen sizes, offering some additional value to\nusers and providing a productive, engaging user experience.\n\nAdd value through responsive design\n-----------------------------------\n\nResponsive layouts dynamically format and position elements such as buttons,\ntext fields, and dialogs for an optimal user experience. Automatically offer\nusers of your app additional value on larger screens by utilizing responsive\ndesign practices. Whether it's more text visible at a glance, more actions on\nscreen, or larger, more accessible tap targets, responsive practices provide an\nenhanced experience for users of larger screens.\n\n\nBuild responsive apps and tiles for Wear OS\n-------------------------------------------\n\nResponsive UIs stretch and change to make the best possible use of all available\nscreen space, no matter what size screen they're rendered on. When designing\nresponsive layouts on a round screen, scrolling and non-scrolling views each\nhave unique requirements to maintain UI element scaling, as well as preserve a\nbalanced layout and composition. For [scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#scrolling), use percentages to\ndefine all top, bottom, and side margins to avoid clipping and provide\nproportional scaling of elements. For [non-scrolling views](/design/ui/wear/guides/foundations/canonical-adaptive-layouts#non-scrolling), use percentages\nand vertical constraints for all margins. That way, the main content in the\nmiddle can stretch to fill the available area.\n\nSee the [Compose](/training/wearables/compose/screen-size#responsive-layouts) and [Tiles](/training/wearables/tiles/screen-size#responsive-layouts) implementation guidance for responsive\nlayouts. \ncheck_circle\n\n### Do\n\n- Use standard components which are designed for adaptation.\n- Utilize adaptive layouts which adapt smoothly across screen sizes. \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space.\n- Increase the sizes of fonts (unless they're serving a primarily graphic purpose).\n\nNext step: adaptive and differentiated\n--------------------------------------\n\nApps that are **adaptive and differentiated** create a user experience that\nisn't possible on devices with smaller screens.\n\n[Get started](/design/ui/wear/guides/foundations/larger-screens-differentiated)"]]
