App-Layouts
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Wähle beim Entwerfen von Apps für Wear OS genau die Layouts, für die du dich auswählst.
zu jeder Erfahrung. Wear OS läuft auf runden Displays und
als auf Handheld-Geräten, gibt es zwei Kategorien kanonischer Layouts
die Sie beim Entwerfen Ihrer App berücksichtigen sollten.
Nicht scrollbare Layouts konzentrieren sich auf Informationen auf einen Blick und bieten Nutzern einen Mehrwert
wenig oder gar keine Interaktion. Daher kann es schwierig sein,
responsiv in diese Layouts ein:
- Mit einer Kombination aus Sprachen, Schriftskalierung, Geräten und Variablen testen
Inhalte.
- Nicht scrollbare Layouts nur verwenden, wenn die Inhalte bekannt sind oder kontrolliert werden
oder ob Sie ein bestimmtes Design
verwenden müssen.
- Wenden Sie die empfohlenen oberen, unteren und seitlichen Ränder auf das Layout an.
- Definieren Sie Ränder als Prozentwerte an Stellen, an denen der Inhalt normalerweise
abgeschnitten.
- Ordnen Sie die Elemente so an, dass der Raum innerhalb der
und die Balance zwischen
verschiedenen Gerätegrößen zu gewährleisten.
für Seiten, die mehr Informationen enthalten, als auf einen einzigen Bildschirm passen, oder
die für längere und immersivere Reisen erforderlich sind,
Ansicht.
- Wenden Sie die empfohlenen oberen, unteren und seitlichen Ränder an.
- Legen Sie die äußeren Ränder in Prozentsätzen fest, um eine Begrenzung an der
Anfang und Ende des scrollbaren Containers.
- Ränder in festen DP-Werten zwischen UI-Elementen anwenden.
Scrollansichten mit responsiven Designpraktiken passen sich in der Regel an eine Reihe von
Bildschirmgrößen. In einigen Sonderfällen können Sie jedoch
Abmessungen überschreiben und Layouts erweitern, die zusätzliche Optionen anzeigen,
oder dafür sorgen, dass Inhalte besser auf den Bildschirm passen. Im folgenden Beispiel
zeigt, wie die unteren beiden Schaltflächen auf größeren Bildschirmen breiter werden:
Figma-Designkits
Rufen Sie die Downloadseite für Designkits auf, um Designlayouts mit integrierten
Komponenten, Optionen und Empfehlungen zum Erstellen unterschiedlicher Apps und Ansichten
Designs, die Best Practices entsprechen.
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,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
