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-SymbolApp-Symbole werden vom App-Entwickler bereitgestellt und vorübergehend auf dem Bildschirm angezeigt. |
DesignbereichJede Kachelvorlage hat ihre eigenen Regeln für den primären Inhaltsbereich. Beachten Sie unbedingt die Layout-Anleitung. |
Untere TasteSchaltflä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.
Wear zeigt automatisch dein App-Symbol an
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.
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.
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.
Farbe
Beschränken Sie sich auf drei Farben, damit die Kacheln immer übersichtlich bleiben.
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.
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 |
Weitere Informationen
Weitere Informationen finden Sie in den Designrichtlinien für Ansichten.