Diese kanonischen Layouts sind bewährte, vielseitige App-Layouts, die auf Geräten mit größeren Bildschirmen eine optimale Nutzererfahrung bieten.
Ansichten
Kacheln bieten schnellen Zugriff auf Informationen und Aktionen, die Nutzer für die Erledigung von Aufgaben benötigen. Mit einem Wisch auf dem Zifferblatt können Nutzer sehen, wie gut sie auf dem Weg zu ihren Fitnesszielen vorankommen, das Wetter checken und vieles mehr. Eine App starten oder wichtige Aufgaben schnell über Kacheln erledigen.
Anpassung mithilfe unserer Komponenten und Stile
Sie können den Stil Ihrer Marke auf bestimmte Komponenten anwenden. Dazu gehören Primärfarbe, App-Symbol, Schriftart, Symbole und alle visuellen Elemente, die für die Darstellung Ihrer Kachel relevant sind.
Für responsive Layouts erstellen (Bildschirme mit fester Höhe und prozentuale Ränder)
Um unseren Code und unsere Designlayouts an größere Bildschirmgrößen anzupassen, haben wir sie mit dem integrierten responsiven Verhalten aktualisiert, einschließlich prozentualer Ränder und Innenabstände. Wenn Sie unsere Vorlagen verwenden, können Sie diese Aktualisierungen automatisch über die Tiles API übernehmen. Sie müssen nur Layouts bereitstellen, bei denen Sie nach einem Haltepunkt für die Bildschirmgröße zusätzliche Inhalte oder Komponenten hinzugefügt haben. Vollständige Hinweise und Empfehlungen zur Nutzung eines größeren Bildschirms findest du in unserer Anleitung zu Ansichten.
Alle Vorlagen werden mit den beiden standardmäßigen Haltepunkten für die Bildschirmgröße erstellt: 192 dp und 225 dp. Die Ränder wurden auf Prozentsätze basierend auf der Bildschirmgröße festgelegt, damit Zeilen den verfügbaren Platz ausfüllen, aber nicht zu weit ausdehnen und vom gebogenen Bildschirm oben und unten abgeschnitten werden. Da Kacheln eine feste Bildschirmhöhe haben, haben wir den Abstand angepasst, um den begrenzten Platz auf dem Bildschirm ohne unnötige Begrenzungen zu maximieren.
Die beiden Hauptvorlagen – Primäres Layout und Edge-Inhaltslayout (mit Fortschrittsring) – haben unterschiedliche Ränder. Alle Designlayouts sind jedoch so gestaltet, dass sie einem dieser Elemente entsprechen. Es gibt drei Hauptabschnitte für jede Kachel und Slots, die jedem dieser Bereiche zugeordnet sind. In einigen Fällen können zusätzliche Ränder und Innenabstände integriert werden, damit die Inhalte den verfügbaren Platz ausfüllen und gleichzeitig ihr optisch ausgewogenes Design beibehalten können.
Differenzierte Angebote schaffen
Die vier kanonischen Hauptlayouts mit mehr als 80 Permutationen ermöglichen praktisch unbegrenzte Anpassungen. Kacheln basieren auf einem Slot-basierten System. Sie können also eine Anzeigenfläche aus dem kanonischen Layout durch einen beliebigen Inhalt Ihrer Wahl ersetzen. Behalten Sie in diesem Fall ein responsives Verhalten bei und folgen Sie unseren Designempfehlungen.
Diese Anpassungen sollten begrenzt sein und sollten nicht die Struktur der Kachelvorlage zerstören. Dadurch soll für Konsistenz gesorgt werden, wenn Nutzer auf ihren Wear OS-Geräten durch das Kachelkarussell scrollen.
Auf größeren Bildschirmen Wert nach dem Haltepunkt für die Größe hinzufügen
Fügen Sie einen Haltepunkt bei 225 dp hinzu, um den zusätzlichen Platz auf größeren Bildschirmen optimal zu nutzen. Mit diesem Haltepunkt können Sie zusätzlichen Inhalt anzeigen, mehr Schaltflächen oder Daten hinzufügen oder das Layout an einen größeren Bildschirm anpassen.
Scrollende und nicht scrollende App-Layouts
Beim Entwerfen von adaptiven Layouts auf einem runden Bildschirm stellen Scroll- und Nicht-Scroll-Ansichten jeweils besondere Anforderungen an die Skalierung von UI-Elementen und die Beibehaltung eines ausgewogenen Layouts und der Zusammensetzung.
Nicht scrollbare App-Layouts
Kanonische Layouts und Vollbildkomponenten (einschließlich Medien und Fitness)
Zu den nicht scrollbaren App-Ansichtslayouts gehören Mediaplayer, Bestätigungsdialogfelder, Picker, Umsteiger und spezielle Fitness- oder Tracking-Bildschirme mit Fortschrittsanzeigen. Sie können die Höhe eines Bildschirms einschränken. So wird sichergestellt, dass sich der Nutzer auf eine Aufgabe oder eine Reihe von Steuerelementen konzentriert, anstatt alle Optionen durchgehen zu müssen. Um Geräte mit kleineren Bildschirmen zu berücksichtigen, sollten Sie beim Design die begrenzte Größe berücksichtigen, einen guten Überblick gewährleisten und gegebenenfalls den kreisförmigen Bildschirm einbeziehen.
Richtlinien zur Reaktionszeit (prozentuale Margen)
Definieren Sie alle Ränder in Prozentsätzen und definieren Sie vertikale Einschränkungen, sodass sich der Hauptinhalt in der Mitte so weit ausdehnen kann, dass er den verfügbaren Anzeigebereich ausfüllt.
Am besten unterteilen Sie einen nicht scrollenden Bildschirm beim Entwerfen in einen oberen, mittleren und unteren Abschnitt. Auf diese Weise können Sie im oberen und unteren Bereich Innenränder hinzufügen, um ein Abschneiden zu vermeiden, während der mittlere Abschnitt die volle Breite des Bildschirms ausnutzen kann. Ziehen Sie die Verwendung des Dreh-Scroll-Buttons zum Steuern von Elementen des Bildschirms in Betracht, wenn seine Größe begrenzt ist, da Tippen auf Interaktionen allein möglicherweise nicht die beste Erfahrung bieten kann.
Differenzierte Angebote schaffen
Nicht scrollbare Layouts sind anpassbar, aber es gibt Einschränkungen in Bezug darauf, wie viele Inhalte dem Bildschirm hinzugefügt werden können und welche Art von Komponenten am besten funktionieren. Die Verwendung von IconButtons anstelle von Chips nutzt den begrenzten Platz besser aus und visuelle Grafiken wie ProgressIndicators und große Datenpunkte helfen, wichtige Informationen grafisch darzustellen.
Alle Elemente, die den Rand des Bildschirms umgeben, wachsen automatisch mit der Bildschirmgröße, sodass sie noch wirkungsvoller werden.
Auf größeren Bildschirmen Wert nach dem Haltepunkt hinzufügen
Beim Erstellen eines responsiven Designs für größere Bildschirmgrößen nutzen nicht scrollende App-Layouts den zusätzlichen Platz auf dem Bildschirm optimal. Vorhandene Elemente können den zusätzlichen Platz ausfüllen und so die Nutzerfreundlichkeit verbessern. Außerdem können Komponenten und Inhalte nach einem Haltepunkt in der Bildschirmgröße angezeigt werden.
In der folgenden Liste sind einige Beispiele für dieses Verhalten aufgeführt:
- Mediaplayer können zusätzliche Schaltflächen oder größere Steuerelemente nutzen.
- Bestätigungsdialogfelder können eine Illustration oder weitere Informationen enthalten.
- Fitnessbildschirme können zusätzliche Messwerte erhalten und Elemente könnten größer werden.
Layouts der scrollbaren App
Kanonische Layouts
Layouts für scrollbare App-Ansichten umfassen Listen (ScalingLazyColumn) und Dialogfelder. Diese Layouts machen die meisten App-Bildschirme aus und stellen eine Sammlung von Komponenten dar, die an größere Bildschirmgrößen angepasst werden müssen.
Prüfen Sie, ob die Komponenten reagieren, d. h., dass sie die verfügbare Breite ausfüllen und die ScalingLazyColumn-Anpassungen übernehmen, wenn mehr Bildschirmhöhe verfügbar ist. Diese Layouts sind bereits responsiv erstellt und wir haben einige zusätzliche Empfehlungen, wie Sie die erweiterte Wohnfläche noch besser nutzen können.
Richtlinien zur Reaktionszeit (prozentuale Margen)
Alle oberen, unteren und seitlichen Ränder sollten in Prozentsätzen definiert werden, um eine Begrenzung zu vermeiden und eine proportionale Skalierung der Elemente zu ermöglichen. Beachten Sie, dass die PositionIndicator angezeigt wird, wenn der Nutzer scrollt, und sich unabhängig von der Größe automatisch am Rand des Bildschirms anschließt.
Differenzierte Angebote schaffen
Scroll-Ansichten lassen sich umfassend anpassen und bieten die Möglichkeit, beliebige Komponenten in beliebiger Reihenfolge hinzuzufügen.
Der obere und untere Rand können sich ändern, je nachdem, welche Komponenten oben und unten positioniert sind. Dadurch wird verhindert, dass Inhalte durch die wachsende Kurve des Bildschirms abgeschnitten werden.
Auf großen Bildschirmen nach dem Haltepunkt Wert hinzufügen
Da beim Scrollen in Layouts automatisch mehr von dem zu sehen ist, was zuvor unter dem Falz ausgeblendet war, musst du nichts weiter tun, um einen Mehrwert zu schaffen. Jede Komponente füllt die verfügbare Breite aus. In einigen Fällen erhält eine Komponente zusätzliche Zeilen mit Text (z. B. Karten) oder Komponenten werden so gestreckt, dass sie die verfügbare Breite ausfüllen (z. B. Symbolschaltflächen).