Über Ansichten haben Nutzer schnell Zugriff auf die Informationen und Funktionen, die sie benötigen. Mit einer Wischbewegung auf dem Zifferblatt können Nutzer ihren Fortschritt bei der Erreichung ihrer Fitnessziele, das Wetter und mehr sehen. Über Kacheln können Sie schnell Apps starten oder wichtige Aufgaben erledigen.
Responsive und optimierte Designs erstellen
Damit Sie Ihre Designlayouts an größere Bildschirmgrößen anpassen können, haben wir das Verhalten unserer Layouts und Komponenten aktualisiert. Sie sind jetzt standardmäßig responsiv und verwenden unter anderem prozentuale Ränder und Abstände.
Wenn Sie unsere ProtoLayout-Vorlagen verwenden, können Sie diese Updates automatisch über die aktuelle Betaversion der Wear ProtoLayout-Jetpack-Bibliothek übernehmen. Außerdem müssen Sie nur Layouts angeben, in denen Sie nach einem Breakpoint für die Bildschirmgröße zusätzliche Inhalte oder Komponenten hinzugefügt haben. Hier finden Sie eine Anleitung und Empfehlungen dazu, wie Sie die größere Displaygröße optimal nutzen können. Kacheln haben eine feste Bildschirmhöhe. Wir haben das Padding angepasst, um den begrenzten Bildschirmplatz optimal zu nutzen, ohne unerwünschte Beschneidungen zu verursachen.
Prüfen, ob Komponenten die verfügbare Breite ausfüllen
Alle Komponenten sollten responsiv sein. Wenn Sie die Höhe und Breite auf „expand“ festlegen, wird der verfügbare Platz ausgefüllt. Fügen Sie die erforderlichen Ränder ein, damit Inhalte nicht durch die abgerundeten Ecken des Displays abgeschnitten werden.
Adaptive und differenzierte Designs erstellen
Um den zusätzlichen Platz auf größeren Bildschirmen optimal zu nutzen, fügen Sie einen Größen-Breakpoint bei 225 dp hinzu. Mit diesem Breakpoint können Sie zusätzliche Inhalte einblenden, mehr Schaltflächen oder Daten einfügen oder das Layout an den größeren Bildschirm anpassen.
Dazu ist für jeden Breakpoint ein anderes Design erforderlich. Das Design für größere Bildschirme (ab 225 dp) kann die folgenden zusätzlichen Elemente enthalten:
Zuvor ausgeblendeten Titel-Slot einblenden
Dies wird bei Layouts mit zwei Zeilen vor dem Breakpoint empfohlen, bei denen der Titelslot entfernt werden muss, um das Mindest-Tippziel von 48 dp zu gewährleisten.
Größe der vorhandenen Komponenten erhöhen oder ihren Status ändern
So können mehr Details angezeigt oder die Inhalte übersichtlicher gestaltet werden.
Komponentenslots im aktuellen Layout hinzufügen
Durch das Hinzufügen von Komponenten bietet das Layout mehr Optionen oder zusätzliche Details. Achten Sie aber darauf, dass die Inhalte weiterhin schnell erfassbar sind.
Unten weitere Inhalte hinzufügen
In einigen Fällen ist es sinnvoller, Aktionsschaltflächen oder Inhalte im unteren Bereich hinzuzufügen, anstatt Komponenten im Haupt-Slot.
Achtung : Auf einem größeren Display sollte niemals weniger Informationen angezeigt werden als auf einem kleineren. Das ist besonders relevant für benutzerdefinierte Verhaltensweisen, die am Breakpoint hinzugefügt wurden.
Ein häufiges Beispiel hierfür ist, wenn Komponenten oder Textgrößen über den Haltepunkt hinaus vergrößert werden und auf größeren Bildschirmen weniger angezeigt wird. Auf Displays sollte immer mehr Wert mit zunehmender Größe angezeigt werden.
Reaktionsschnelles und adaptives Verhalten
Das responsive und adaptive Verhalten hängt von den drei Slots (Abschnitten) des Layouts ab.
Slot für App-Symbol und -Titel
Das vom System bereitgestellte App-Symbol verhält sich nicht anders. Der Titel-Slot wird automatisch an die größere Bildschirmgröße angepasst und zeigt zusätzliche Zeichen an. Im oberen Bereich gibt es proportionale (prozentuale) interne Ränder, um ein Abschneiden bei zunehmender Bildschirmgröße zu vermeiden.
Haupt-Slot (Komponenten)
Für alle Komponenten im Haupt-Slot sollte die Breite und Höhe auf „expand“ festgelegt werden, damit sie sich automatisch an die größere Bildschirmgröße anpassen. Im Hauptbereich des Slots und in einigen Fällen in jeder Zeile dieses Slots gibt es proportionale (prozentuale) interne Ränder, um ein Abschneiden bei einer größeren Bildschirmgröße zu vermeiden. Wenn Sie eine Kombination aus Eckenradius und Layout verwenden, sind für den Haupt-Slot möglicherweise größere Ränder erforderlich.
Unterer Steckplatz
Das Verhalten der unteren Schaltfläche oder des unteren Texts ändert sich nicht. Die Breite der Schaltfläche und der Textfelder wird jedoch automatisch an die größere Bildschirmgröße angepasst und es können mehr Zeichen angezeigt werden. Für den unteren Slot gibt es proportionale (prozentuale) interne Ränder, um ein Abschneiden bei einer größeren Bildschirmgröße zu vermeiden. Wenn kein unterer Slot vorhanden ist, wird automatisch ein Standardrand hinzugefügt.
Differenzierte Nutzererlebnisse schaffen
Ein vollständig anpassbares Layout mit 60 oder mehr integrierten Permutationen ermöglicht praktisch unbegrenzte Anpassungsmöglichkeiten. Kacheln basieren auf einem slotbasierten System. Sie können also einen Slot aus dem kanonischen Layout durch beliebige Inhalte oder Komponenten ersetzen und die Komponente auf eine der vielen Varianten und Farbkombinationen festlegen. In diesem Fall sollten Sie für ein reaktionsschnelles Verhalten sorgen und unsere Designempfehlungen befolgen.
Diese Anpassungen sollten begrenzt sein und nicht von der Kachelvorlage abweichen. So wird die Konsistenz beibehalten, wenn Nutzer auf ihren Wear OS-Geräten durch das Kachelkarussell scrollen.