Diese Seite wurde von der Cloud Translation API übersetzt.

Designsystem für Fliesen

Kacheln haben einige grundlegende Designelemente. Erstellen Sie mithilfe von Vorlagen und Komponenten einzigartige Kacheln für Ihre App.

Grundlegende Elemente

In der folgenden Tabelle werden grundlegende Designelemente von Kacheln beschrieben.

App-Symbol

App-Symbole werden vom App-Entwickler bereitgestellt und vorübergehend auf dem Bildschirm angezeigt.

Designbereich

Jede Kachelvorlage hat ihre eigenen Regeln für den primären Inhaltsbereich. Beachten Sie unbedingt die Layout-Anleitung.

Untere Taste

Schaltflächen sind wichtig, um sekundäre Aktionen für die Kachel zu aktivieren. Platzieren Sie die Schaltflächen 6,3% über dem unteren Displayrand.

App-Symbol

Wear zeigt das App-Symbol automatisch an, während der Nutzer durch das Kachelkarussell scrollt. Das App-Symbol verschwindet und sollte nicht innerhalb der Kachel implementiert werden. Weitere Informationen zum Erstellen von App-Symbolen finden Sie unter Produktsymbole.

Alt-Text

Abbildung 1: Beispiele für App-Symbole

Wear zeigt automatisch dein App-Symbol an

Dos

Angenommen, Wear OS zeigt automatisch dein App-Symbol an.

Don'ts

Lege das App-Symbol auf das Kacheldesign, sonst wird es zweimal angezeigt.

Schaltfläche

Wählen Sie kurzen Text für Ihre Schaltflächen. Verwenden Sie einen Text, der sich speziell auf die Aktion und das Ziel des Call-to-Action bezieht. Achte darauf, dass die Übersetzung des Schaltflächentexts der Anzahl der Zeichen entspricht. Wenn der übersetzte Schaltflächentext zu lang ist, legen Sie für die Schaltfläche fest, dass stattdessen Mehr angezeigt wird.


Placement	Schaltflächenspezifikationen	Typ
Platziere die Taste auf dem Zifferblatt 6,3% von unten.	Lasse auf beiden Seiten einen Abstand von 12 dp.	Schriftgrößen sind nicht skalierbar. Legen Sie eine Schriftgröße von mindestens 9 fest. Verwenden Sie für nicht-lateinische Sprachen eine Schriftgröße von mindestens sieben.

Vorlagen

Es stehen vier Arten von Tile-Vorlagen zur Verfügung. Laden Sie das Tile Design Kit (Figma) herunter, um die Beispiele anzusehen und Feedback zu Ihrer Erfahrung mit dieser Vorlage zu geben.

Textzentriert

Die textbasierte Kachelvorlage wurde für die Anzeige von Text auf Kacheln entwickelt, z. B. die neuesten Nachrichten, bevorstehende Ereignisse und Erinnerungen. Sie wird häufig für Anmelde-, Fehler- und Einrichtungsstatus verwendet, um Nutzer über den aktuellen Status zu informieren und einen klaren Call-to-Action anzubieten.

textzentriert

Schaltflächen zentriert

Die schaltflächenorientierte Kachelvorlage ist für Kacheln mit bis zu fünf Hauptaktionen vorgesehen. Verwenden Sie diese Vorlage, um schnell mit bestimmten Aufgaben zu beginnen.

Informationszentriert

In der informationszentrierten Kachelvorlage werden allgemeine Messwerte und Fortschritte angezeigt. Dies ist besonders nützlich für Kacheln zu Gesundheit und Fitness. Sie bietet flexible Optionen für die Anzeige von Inhalten. Priorisieren Sie wichtige Daten und vermeiden Sie eine Überfüllung der Vorlage, um Übersichtlichkeit zu gewährleisten.

Infozentriert

Datenzentriert

Die datenzentrierte Kachelvorlage ist eine vielseitige Vorlage zur Anzeige von Diagrammen und grafischen Elementen mit einer Zusammenfassung regelmäßiger Informationen. Sie bietet Flexibilität bei der Datenvisualisierung und ist nützlich, um visuelle leere Zustände zu erstellen. Es ist wichtig, einfache grafische Elemente beizubehalten, damit die Kachel immer übersichtlich bleibt.

datenzentriert

Farbe

Beschränken Sie sich auf drei Farben, damit die Kacheln immer übersichtlich bleiben.

Dos

Legen Sie als Hintergrundfarbe Schwarz fest.

Don'ts

Legen Sie als Hintergrundfarbe ein randloses Bild oder eine randlose Farbe fest.

Typografie

Roboto als primäre Schriftart unter Wear OS verwenden Verwende Text 2 als standardmäßige und kleinste Schriftgröße und Display 2 als größte.

Schriftgröße

Weitere Informationen zu Schriftart, -stärke und -größe finden Sie unter Typografie.

Komponenten

Bauen Sie Ihre Kacheln mithilfe von Komponenten an. Passe die Farben der Komponente an, um deine Marke auszudrücken. Folge dazu den Richtlinien für Wear-Material-Designs.

Laden Sie das Tile Design Kit (Figma) herunter, um Komponentenbeispiele anzusehen.

Komponente	Variante	Beispiel
Schaltfläche	Standardschaltfläche	Verfügbare Größen: Standard, Groß und Extragroß
Schaltfläche	Schaltfläche für Standardtext	Verfügbare Größen: Standard, Groß und Extragroß
Chip	Primärer Standard-Chip
Chip	Sekundärer Standardchip
Chip	Kleiner Avatar-Chip
Chip	Großer Avatar-Chip
Chip	Kompakter Chip (unten)
Fortschrittsanzeige	Standardmäßige Fortschrittsanzeige
Fortschrittsanzeige	Fortschrittsanzeige mit Lücke