Farbsystem

Android TV entspricht den Farbrichtlinien von Google Material und bietet so eine einheitliche und ansprechende Benutzeroberfläche. So entsteht ein immersiver und ansprechender visueller Stil, der auf den Fernsehbildschirm zugeschnitten ist. In dieser Anleitung wird beschrieben, wie Sie das Material Design-Theme auf eine Android TV-Benutzeroberfläche anwenden.

Highlights

  • Android TV entspricht den Material-Farbrichtlinien von Google, ist aber für Fernseher optimiert.
  • Nutzen Sie dunkle Designs, um filmreife Erlebnisse zu schaffen.
  • Verwenden Sie den Material Theme Builder, um ein Design zu erstellen.

Farbschema

Ein Farbschema hilft Ihnen, Farben auf sinnvolle Weise in Ihrer Benutzeroberfläche einzusetzen und so für Harmonie, Markenkonsistenz und Skalierbarkeit zu sorgen.

Die Grundlage eines Farbschemas sind die fünf Hauptfarben, die sich jeweils auf separate Tonpaletten mit dreizehn oder mehr Tönen beziehen. Den Farbrollen in einer Benutzeroberfläche werden bestimmte Töne aus jeder Tonpalette zugewiesen. Schlüsselfarben sind die Grundlage für die Erstellung eines dynamischen Farbschemas. Sie können mit dem Material Theme Builder auf Grundlage einer Stammfarbe Primärfarben erstellen oder eigene Primärfarben auswählen.

Schlüsselfarben

Nachdem die Schlüsselfarben festgelegt wurden, gibt der Algorithmus von Material das gesamte Farbspektrum an, das für die Darstellung von Interaktionsstatus, Fehlern und barrierefreiem Kontrast erforderlich ist.

Prozess zur Generierung von Farbdesigns

Der Material Theme Builder generiert sowohl dunkle als auch helle Farbschemas mit denselben Farb-Tokens, sodass Sie ganz einfach zwischen den Designs wechseln können.

Farbrollen

Primär

Primäre Rollen werden für wichtige Komponenten in der Benutzeroberfläche verwendet, z. B. für auffällige Schaltflächen, aktive Status und die Tönung von erhöhten Oberflächen.

Primäre Akzentfarbe

Zweiter Track

Sekundäre Rollen werden für weniger wichtige Komponenten in der Benutzeroberfläche verwendet, z. B. für Filter-Chips, und bieten Möglichkeiten für zusätzliche Farbausdrücke.

Sekundärfarbe für Akzente

Dritter Track

Tertiäre Rollen werden für kontrastierende Akzente verwendet, mit denen Primär- und Sekundärfarben ausgeglichen oder die Aufmerksamkeit auf ein Element wie ein Eingabefeld gelenkt werden kann.

Tertiärer Akzent

Plattformen

Neutrale Rollen werden für Oberflächen und Hintergründe sowie für Text und Symbole mit hoher Betonung verwendet. Weitere Informationen zu Oberflächen finden Sie in den Material Design-Richtlinien.

Plattformen

Videokonzepte

Weitere Informationen zu Umrissrollen finden Sie in den Material Design-Richtlinien.

Kontur

Dynamische Farben

Auf Android-Mobilgeräten können Nutzer ab Android 12 individuelle Designs durch die Auswahl von Hintergrundbildern und andere Anpassungen erstellen. Android TV unterstützt keine Hintergrundbilder. Das bedeutet, dass von Nutzern erstellte Schemata nicht unterstützt werden und Android TV OS nur Basisfarben überträgt.

Anstelle von nutzergenerierten Schemata können Sie inhaltsbasierte Farbschemata verwenden, um dynamische und verspielte Designs zu erstellen, die auf Inhalten wie Filmpostern, Albumcovern und anderen Hero-Bildern basieren. Weitere Informationen finden Sie unter Inhaltsbasierte Farbschemas.

Mit den Entwicklerbibliotheken für Material Color Utilities können Sie direkt wichtige Farben aus dem Bild extrahieren oder einen eigenen Algorithmus zur Farbgewinnung ausführen, um eine wichtige Farbe zu finden und dann mit den Material Color Utilities ein Design zu erstellen.

Hier ist ein Beispiel dafür, wie Farben aus einem Bild extrahiert werden:

Dynamische Farben

  1. Quell-Image
  2. Extrahierte Farbe des Ausgangsbilds
  3. Generierte Schlüsselfarben

Sie können ein Farbschema mit diesen Schlüsselfarben generieren oder die Töne verwenden, um sie auf Ihre Benutzeroberfläche anzuwenden.

Beispiel für die Anwendung dynamischer Farben

Bedienungshilfen

Informationen zur Barrierefreiheit finden Sie unter Best Practices für die Barrierefreiheit bei Android TV.