Best Practices für Ansichten

Design auf Schwarz

Das Entwerfen auf einem schwarzen Hintergrund ist für Wear OS aus zwei Hauptgründen entscheidend:

  • Akkueffizienz: Jedes Pixel, das auf dem Display beleuchtet ist, verbraucht Strom. Durch einen schwarzen Hintergrund wird die Anzahl der aktiven Pixel minimiert und die Akkulaufzeit verlängert.
  • Nahtlose Ästhetik: Ein schwarzer Hintergrund hilft, den Gehäuserand der Smartwatch optisch zu minimieren und schafft so die Illusion einer durchgehenden Oberfläche, die bis zum Rand des Geräts reicht. Wenn Sie UI-Elemente in diesem Bereich platzieren, wird dieser Effekt noch verstärkt.

Ausführen

Legen Sie die Hintergrundfarbe immer auf Schwarz fest.

Das sollten Sie nicht tun

Verwenden Sie keinen randlosen Hintergrund oder eine Blockfarbe.

Nur erforderliche Elemente einschließen

Wenn die Funktion aktiviert ist (z. B. mit dem ProtoLayout Material3 PrimaryLayout), wird in Wear OS automatisch das dauerhafte App-Symbol angezeigt, das automatisch angezeigt wird, wenn der Nutzer durch das Kachelnkarussell scrollt. Das App-Symbol darf nicht als Teil der Kachel entworfen und hinzugefügt werden.

Das bereitgestellte App-Symbol muss einfarbig sein, wenn Sie dynamische Designs für Ihre Kachel verwenden. In den Richtlinien für Android-Produktsymbole erfahren Sie, wie Sie das App-Symbol für Ihre Marke erstellen.

Ausführen

Unter Wear OS wird das App-Symbol möglicherweise automatisch angezeigt, wenn der Nutzer durch das Ansichtskarussell scrollt. Das App-Symbol muss nicht im Ansichtsdesign enthalten sein.

Das sollten Sie nicht tun

Fügen Sie das App-Symbol nicht in das Kacheldesign ein, da es doppelt oder überlappend angezeigt werden kann, wenn es auch auf Systemebene angezeigt wird.

App-Titel ausblenden, um die Anzahl der Tippziele zu minimieren

Damit auf kleineren Bildschirmen genügend Platz für interaktive Elemente bleibt, kann der App-Titel ausgeblendet werden, wenn eine Kachel zwei Zeilen (und einen unteren Bereich) verwendet. So wird sichergestellt, dass die Zeilen hoch genug sind (mindestens 48 dp). Auf größeren Bildschirmen (ab 225 dp) kann der Titel wieder angezeigt werden.

Ausführen

Auf kleinen Bildschirmen wird der App-Titel ausgeblendet, damit die beiden Zeilen eine Mindesthöhe und ein Tippziel von 48 dp haben.

Das sollten Sie nicht tun

Wenn Sie den App-Titel auf kleinen Bildschirmen nicht ausblenden und zwei Zeilen haben, entspricht die Höhe der Komponenten nicht unseren Standards für Barrierefreiheit und ist kleiner als die Mindestgröße für Tippziele. In diesem Beispiel ist der Platz für die Schaltflächen kleiner als 48 dp, sodass sie abgeschnitten werden.

Einen primären Anwendungsfall hervorheben

Damit Nutzer wissen, was sie mit den einzelnen Kacheln tun können – ob sie eine App öffnen, eine Aktivität starten oder mehr erfahren möchten –, muss das Layout mindestens ein interaktives Element enthalten.

Ausführen

Diese Kachel ist effektiv, da sie eine kleine Auswahl an Optionen bietet und die Möglichkeit, weitere zu sehen.

Das sollten Sie nicht tun

Diese Lösung ist für Nutzer weniger hilfreich, da sie aufgrund zu vieler Optionen zu Entscheidungsblockaden führt.

Mindestens einen Container einschließen

Jede Kachel in der App muss mindestens ein Containerelement enthalten und vollständig anklickbar sein. Sie muss zu einem entsprechenden Bildschirm innerhalb der App führen. Die Informationen der Kachel, unabhängig davon, ob sie sich im Container befinden oder separat präsentiert werden, müssen die verknüpften Inhalte oder verfügbaren Aktionen klar kommunizieren.

Wenn Schaltflächen verwendet werden, sollten sie den Standarddesignkonventionen entsprechen und eine klare Angabe ihrer Funktion enthalten.

Ausführen

Diese Kachel funktioniert gut, da der Nutzer mit den klaren Touch-Affordances Aktionen für jede der angebotenen Funktionen ausführen kann.

Das sollten Sie nicht tun

Diese Kachel ist weniger effektiv, da nicht klar ersichtlich ist, dass Nutzer auf den Inhalt tippen können, um weitere Informationen zu sehen.

Aktionen sofort verständlich machen

Auf der Smartwatch ist nicht viel Platz, um die Bedeutung der Inhalte zu vermitteln. Daher haben die effektivsten Ansichten leicht vorhersehbare interaktive Komponenten.

Ausführen

Eine erfolgreiche Kachel nutzt den verfügbaren Platz optimal aus, um das Ergebnis jeder Aktion klar zu kommunizieren.

Das sollten Sie nicht tun

Die Aktionen in dieser Kachel sind unklar: Wohin führt der Container mit dem Albumcover den Nutzer und unterscheidet sich das von der Schaltfläche „Wiedergabe“?

Aktionen visuell priorisieren

Damit Nutzer die wichtigste Aktion auf einer Kachel erkennen, sollten interaktive Container visuell priorisiert werden.

  • Verwenden Sie Primärfarben für primäre Aktionsschaltflächen.
  • Sekundäre/Tertiärfarben für sekundäre Aktionen verwenden

Ausführen

Diese Kachel verwendet eine Kombination aus gefüllten (mit primären und sekundären Farbrollen) und durchsichtigen Schaltflächen der untergeordneten Rolle, wobei der Stil „Ton-in-Ton-Füllung“ verwendet wird.

Das sollten Sie nicht tun

Diese Kachel enthält zu viele Schaltflächen mit Füllung und alle haben die Rolle „Primärfarbe“.

Weniger Container verwenden

Bei Kacheln sollte nicht mehr als eine interaktive Komponente verwendet werden, um eine bestimmte Aktion auszulösen. Stattdessen sollte das Gesamtlayout in weniger Containern vereinfacht werden.

Ausführen

Diese Kachel verwendet mehrere Container. Jeder Container dient als Schaltfläche, um eine bestimmte Aktion auszuführen, z. B. einen Timer zu starten oder einen neuen zu erstellen.

Das sollten Sie nicht tun

Die Verwendung von vier Containern ist hier nicht erforderlich, da alle Informationen zum selben Speicherort weitergeleitet werden.

Container zu funktionalen Zwecken verwenden

Damit Nutzer wissen, welche Funktion die einzelnen Komponenten einer Kachel haben, empfehlen wir nicht, Container zu dekorativen oder strukturellen Zwecken zu verwenden, um Tippaktionen zu vermeiden, die nichts bewirken.

Ausführen

Diese Lösung funktioniert, da die einzige Aktion der Kachel ein Erstellungsvorgang ist und alle anderen Inhalte auf dem schwarzen Hintergrund schweben.

Das sollten Sie nicht tun

Diese Kachel ist verwirrender, da es so aussieht, als ob der Nutzer mit allen Containern interagieren könnte.

Schnelle Darstellungen von Grafiken und Diagrammen

Für das Wear OS-Design ist es wichtig, dass Nutzer auf einen Blick alle wichtigen Informationen sehen. Da die Bildschirmzeit begrenzt ist (etwa 7 Sekunden), sollten Sie wichtige Informationen in einem klaren Format priorisieren, das auf einen Blick leicht verständlich ist.

Denken Sie daran, dass die Smartwatch das Smartphone ergänzt und schnellen Zugriff auf wichtige Details bietet.

Ausführen

Schnelle, auf einen Blick sichtbare Darstellungen numerischer oder statistischer Informationen anzeigen und es Nutzern ermöglichen, bei Bedarf auf eine App zu tippen, um mehr zu sehen

Das sollten Sie nicht tun

Detaillierte numerische oder statistische Informationen auf der Kachel anzeigen