Responsives und adaptives Design
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Um der zunehmenden Bildschirmgröße gerecht zu werden, haben wir in die ProtoLayout-Material-Layoutvorlagen und die Figma-Designlayouts ein responsives Verhalten eingebunden, damit sich die Slots automatisch anpassen. Im Grunde sind Slots so konzipiert, dass sie die verfügbare Breite ausfüllen. Unsere Ränder sind als Prozentsätze festgelegt. Den Slots am unteren und oberen Rand des Bildschirms werden zusätzliche innere Ränder hinzugefügt, um Schwankungen bei der Krümmung des Bildschirms bei der Vergrößerung zu berücksichtigen.
Um den größeren Bildschirm und den zusätzlichen Platz optimal zu nutzen, sollten Sie Nutzern Zugriff auf zusätzliche Informationen oder Optionen gewähren. Für diese Layouts ist neben dem integrierten responsiven Verhalten eine zusätzliche Anpassung erforderlich. Dazu können Sie dem Layout nach dem Wendepunkt weitere hilfreiche Inhalte hinzufügen. Der empfohlene Wendepunkt ist auf eine Bildschirmgröße von 225 dp festgelegt.
Wichtige Begriffe
Responsives Design: Ein Designansatz, bei dem Layouts Elemente wie Schaltflächen, Textfelder und Dialogfelder dynamisch formatieren und positionieren, um eine optimale Nutzererfahrung zu ermöglichen. Bieten Sie Nutzern auf größeren Bildschirmen automatisch zusätzlichen Mehrwert, indem Sie responsive Designpraktiken nutzen. Ob mehr Text auf einen Blick sichtbar ist, mehr Aktionen auf dem Bildschirm angezeigt werden oder größere, leichter zugängliche Touch-Ziele vorhanden sind: Responsive Designs bieten Nutzern großer Bildschirme eine verbesserte Nutzererfahrung.
Adaptives Design: Ein Designansatz, bei dem sich die Benutzeroberfläche an bekannte Nutzer-, Geräte- oder Umgebungsbedingungen anpasst. Das adaptive Design in Material umfasst Layout- und Komponentenanpassungen.
Responsive und optimierte Designs erstellen
Damit sich Ihre Designlayouts an größere Bildschirmgrößen anpassen, haben wir das Verhalten unserer Layouts und Komponenten aktualisiert, um ein integriertes responsives Verhalten zu ermöglichen, einschließlich prozentbasierter Ränder und Abstände.
Wenn Sie unsere ProtoLayout-Vorlagen verwenden, können Sie diese Updates automatisch über die ProtoLayout API und die Beta-Release-Notes übernehmen und müssen nur Layouts angeben, in denen Sie nach einem Bildschirmgrößen-Bruchpunkt zusätzliche Inhalte oder Komponenten hinzugefügt haben. Eine vollständige Anleitung und Empfehlungen dazu, wie Sie die Vorteile eines größeren Bildschirms nutzen können, finden Sie in unserer Anleitung für Ansichten mit Kacheln. Die Kacheln haben eine feste Bildschirmhöhe. Deshalb haben wir den Abstand angepasst, um den begrenzten Bildschirmplatz zu maximieren, ohne unerwünschte Ausschnitte zu verursachen.
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 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."]]
