Verwenden Sie Farbe, um Stil auszudrücken und Bedeutung zu vermitteln. Die Farben Ihrer App können entscheidend für die Personalisierung, die Definition des semantischen Zwecks und natürlich die Markenidentität sein.
Fazit
- So sorgen Sie für Barrierefreiheit:
- Achten Sie auf den Farbkontrast und vermeiden Sie die Kombination von Farben mit ähnlichen Farbtönen.
- Denken Sie daran, dass Rot und Grün gängige Muster sind, aber auch, dass sie für Nutzer mit bestimmten Formen der Farbfehlsichtigkeit nicht zugänglich sind.
- Verwenden Sie Farben sinnvoll: Apps können farbenfroh und ausdrucksstark sein, aber halten Sie sich an eine Farbpalette. Wenn Sie Ihr Farbschema mit zu vielen semantischen Farben erweitern, kann das verwirrend sein. Zu viele dekorative Farben können dagegen überfordern.
- Farben können Muster haben. Wiederholen Sie daher etablierte Farbmuster. Verwenden Sie in Ihrer App einheitliche semantische Farben.
- Damit Ihre App in verschiedenen Kontexten gut funktioniert, sollten Sie ein helles und ein dunkles Farbschema (und idealerweise Kontrastthemen) erstellen.
- Weisen Sie Farben mithilfe von Tokens zu, um die Farbrolle des Elements anzugeben, anstatt einen hartcodierten Wert zu verwenden.
- Farben können aus verschiedenen dynamischen und statischen Quellen stammen. Vermeiden Sie es jedoch, zu viele Farben in derselben Ansicht zu verwenden.
- Verwenden Sie bei dynamischen Inhaltsfarben möglichst keine Farben aus mehreren Inhaltselementen.
Farbraum unter Android
Um zu verstehen, wie Android Farben auf Ihre Benutzeroberfläche anwendet, ist es wichtig, zuerst zu wissen, wie sie auf einem Gerät dargestellt werden.
Wie Farben auf einem Gerät dargestellt werden
Ihre App wird auf einem hinterleuchteten Bildschirm angezeigt, der digitale Farben verwendet und bestimmten Modellen und Regeln folgt, die unseren Augen helfen, diese Farbe wahrzunehmen. Digitale Farben sind additive Farben, die durch „Addition“ oder Mischung verschiedener Lichter erzeugt werden, um ein vollständiges Farbspektrum zu schaffen. Wie Menschen Farben auf verschiedenen Bildschirmen wahrnehmen, kann je nach Farbkalibrierung, Bildschirmtyp, Einstellungen und Farbraum eines Geräts stark variieren.
Berücksichtigen Sie beim Entwerfen einer App, dass die verwendeten Farben aufgrund dieser Faktoren möglicherweise nicht identisch sind, ganz zu schweigen von der individuellen Farbwahrnehmung einzelner Nutzer.
Farbräume
Ein Farbraum ist eine Organisation von Farben, die ein Farbmodell verwendet. RGB ist ein additives Farbmodell, bei dem das Farbspektrum durch Rot, Grün und Blau erzeugt wird. CMYK, das für den Druck verwendet wird, ist ein subtraktives Farbmodell. Aus diesem Grund verwenden interaktive Designer in der Regel RGB- oder ähnliche Modelle, um Farben auszuwählen.
Mit Material 3 (M3) wurde HCT eingeführt, ein neuer Farbraum, in dem Farben mithilfe von Farbton, Farbsättigung und Farbton definiert werden, um im Vergleich zu anderen Modellen wie HSL wahrnehmungsgenau zu sein.
Weitere Informationen zur Farbwissenschaft und zur Entwicklung von HCT finden Sie im Buch The Science of Color & Design.
Farbton, Farbsättigung und Farbton
HCT ermöglicht eine individuellere und flexiblere Verwendung von Farben, die innerhalb der Systemparameter bleiben. Beim HCT-Modell werden Farben anhand von Farbton, Farbsättigung und Farbton modelliert:
- Farbton: Der Farbton ist analog zum Adjektiv, mit dem ein einzelner Nutzer die Farbe beschreiben könnte, z. B. „rot“ oder „elektrisches Violett“. Der HCT-Wert für die Farbton liegt zwischen 0 und 360.
- Chroma: Der Farbton gibt an, wie bunt eine Farbe ist, von neutralem Grau bis hin zu voller Leuchtkraft. Im HCT-Farbraum hat die Chroma einen Maximalwert von etwa 120.
- Ton: Der Ton ist die Leuchtkraft oder Helligkeit einer Farbe. Bei HCT wird Ton verwendet, um Kontraste zu schaffen. Farben, die auf denselben Farbtonwert festgelegt sind, sind für bestimmte Kontexte für Barrierefreiheit nicht barrierefrei. Töne mit niedrigerem Wert sind dunkler und Töne mit höherem Wert heller.
Farbsystemprozess
M3 Color basiert auf dem HCT-Modell, um harmonische, barrierefreie Farbschemata abzuleiten und dynamische Farbfunktionen zu unterstützen. Das M3-Farbsystem beginnt mit einer Quellfarbe. Diese Quellfarbe wird in fünf Hauptfarben übersetzt: Primär-, Sekundär-, Tertiär-, Neutral- und Neutralvariante. Diese fünf Hauptfarben bilden tonale Paletten, die aus tonalen Intervallen für jede Hauptfarbe bestehen.
Wenn Sie eine Schlüsselfarbe manuell zuweisen, notieren Sie sich den Farbton und die Chroma der Eingabe, da der Farbton nicht der Tonwert der Farbrolle sein kann.
Das M3-Farbsystem basiert auf den Material Color Utilities (MCU), einer Reihe von Farbbibliotheken mit Algorithmen und Dienstprogrammen, die Ihnen das Entwickeln von Farbthemen und ‑schemata in Ihrer App erleichtern.
Im folgenden Video wird beschrieben, wie Farbschemata abgeleitet werden.
Farbeinschränkungen
Farbeinschränkungen sind die physischen Grenzen der Farbe – sei es die tatsächliche Physik, unsere eigenen biologischen visuellen Einschränkungen oder die Einschränkungen der Farbwiedergabe auf dem Bildschirm. Einige Farbtöne können beispielsweise nicht mit bestimmten Farbklängen oder Farbtönen kombiniert werden. Aufgrund von Farbeinschränkungen sind Farben wie Hellblau oder Hellrot nicht möglich. Die Tonfarbe muss für alle Farbtonwerte einheitlich sein.
Die Abbildung oben zeigt drei verschiedene Tonwertkarten für die Farbtonwerte H105, H25 und H285.
Diagramm 1 – Farbton 105 (gelb) Gibt die Verfügbarkeit der Farbe an. Sättigung und Ton funktionieren wie ein Diagramm. Die Farbton „Gelb“ hat bei bestimmten Tönen im Diagramm eine begrenzte Chroma, d. h., Gelb hat bei niedrigeren Tönen nicht eine große Bandbreite an Leuchtkraft.
Diagramm 2 – Farbton 25 (rot) Enthält mehr chromatische Optionen als Farbton 105 (gelb). In dieser Tonkarte liegt der Punkt mit der höchsten Farbigkeit auf einer niedrigeren Tonebene.
Diagramm 3 – Farbton 285 (blau) Die höchste Farbigkeit wird bei einem noch dunkleren Farbton erreicht. Bei einem helleren Farbton geht dagegen Chromakapazität verloren.
Farbschema
Ein Farbschema besteht aus Akzenten und Oberflächen, die aus bestimmten Farbtönen abgeleitet und Farbrollen zugewiesen werden, die dann UI-Elementen und ‑Komponenten zugeordnet werden. Farbrollen beziehen sich auf die Verwendung der Farbe und nicht auf den Farbton. Beispiel: „auf-primär“ anstelle von „auf-blau“.
Farbschemata sollen harmonisch sein, für barrierefreien Text sorgen und UI-Elemente und Oberflächen voneinander unterscheiden. Farbrollenpaare (bestehend aus Container- und On-Container-Rollen) haben Tonwerte, die einen barrierefreien Kontrast bieten.
Es werden helle und dunkle Farbschemata erstellt, die jeweils eigene Farbzuweisungen haben.
Das Material-Farbsystem und benutzerdefinierte Farbschemata bieten Standardwerte für Farben als Ausgangspunkt für die Anpassung.
Weitere Informationen zum M3-Farbsystem
Im Android UI Kit finden Sie ein anpassbares Farbschema.
Farbe auf die Benutzeroberfläche anwenden
Die UI-Farbe besteht aus Akzent-, semantischen und Oberflächenfarben.
- Akzentfarben beziehen sich auf Hauptfarben, die in der Regel Teil der Farbpalette der Android-Marke sind.
- Semantische Farben (oder benutzerdefinierte Farben in Material 3) sind Farben mit einer bestimmten Bedeutung.
- Oberflächenfarben beziehen sich auf alle neutralen abgeleiteten Farben, die als Hintergrundfarben verwendet werden.
Akzentfarbe
Akzentfarben sind in der Regel die ausdruckstärksten Farben in einer Benutzeroberfläche, sei es für das Branding, das Hervorheben von Aktionen, den persönlichen Ausdruck oder den Ausdruck der Nutzer.
Jede Akzentfarbe (primär, sekundär und tertiär) wird in einer Gruppe von vier bis acht kompatiblen Farben in verschiedenen Tönen zur Kombination, Betonung und visuellen Ausdruck zur Verfügung gestellt.
Dynamische Farben
Akzentfarben können aus dynamischen Quellen definiert werden.
Ab Android 12 (API-Level 31) kann das System mithilfe der dynamischen Farbfunktion eine Quellfarbe aus dem Hintergrund oder den In-App-Inhalten eines Nutzers extrahieren, z. B. aus einem Keyart-Asset. Bei der dynamischen Farbgebung werden MCU-Algorithmen und ‑Prozesse verwendet, um Farbschemas zu erstellen und mit wenig Aufwand zu implementieren. Weitere Informationen zum Anwenden dynamischer Farben auf Ihre App finden Sie unter Nutzer die Möglichkeit geben, die Farben in Ihrer App zu personalisieren.
Im Codelab Dynamische Farben visualisieren können Sie sich ein praktisches Beispiel für dynamische Farben ansehen.
Statisch
Ein statisches Schema hat unveränderliche (oder relativ unveränderliche) Werte. Eine gängige Methode zum Erstellen eines statischen Farbschemas ist die Verwendung von Markenfarben, bei der primäre, sekundäre und tertiäre Farben an die Hauptfarbpalette der Marke angepasst werden.
Auch wenn Sie dynamische Farben verwenden, empfehlen wir Ihnen dringend, ein statisches Farbschema als Fallback zu erstellen, falls dynamische Farben auf dem Gerät des Nutzers nicht verfügbar sind. Andernfalls verwendet das System das violette Farbschema für den Grundwert.
Mit dem Material Theme Builder können Sie den MCU-Farbalgorithmus anwenden, um ein statisches, benutzerdefiniertes Design zu generieren. Das Ergebnis sind Farben, die Sie selbst ausgewählt haben, die aber den Tokens des M3-Farbsystems und den harmonischen Prinzipien der Barrierefreiheit entsprechen.
Es ist weiterhin möglich, ein vollständig benutzerdefiniertes statisches Schema zu erstellen. Weisen Sie dazu unterschiedliche Werte in den Farbstilen (color.kt oder color.xml) zu oder exportieren Sie die Themendatei aus dem Material Theme Builder für Figma, nachdem Sie die Figma-Stileigenschaften aktualisiert haben.
Nutzung
Materialkomponenten haben vordefinierte Farbrollen, aber Sie können Farb-Tokens in Ihrer gesamten Benutzeroberfläche und in benutzerdefinierten Elementen verwenden. Verwenden Sie alle Akzentfarben mit Bedacht und berücksichtigen Sie, dass das menschliche Auge besonders von leuchtenden Farben angezogen wird.
Wie bei der Schriftart wird die Farbe hier in einer Hierarchie angewendet. Die primäre Farbe und ihre jeweiligen Rollen werden wichtigen Calls-to-Action (CTAs) zugewiesen. Wir empfehlen, Komponenten wie Floating-Action-Buttons (FABs) für Hauptfunktionen zu verwenden.
Wenn Sie eine primäre Farbe auswählen, sollten Sie die primäre Farbe Ihrer Marke zuweisen. Alternativ können Sie eine Farbe für interaktive Komponenten auswählen, damit Ihre Markenfarben sparsamer verwendet werden. Sekundäre und tertiäre Farben folgen in der Hierarchie der Hervorhebungsbedeutung.
Ein übersättigter Look kann dazu führen, dass nur die Grundfarben Primär-, Sekundär- oder Tertiär verwendet werden. Verwenden Sie Farbschemata mit weniger leuchtenden Containerfarben und Rollenkonturen, um die Farbhierarchie zu unterstützen.
Verwenden Sie für eine bessere Nutzerfreundlichkeit kräftigere Primärfarben, um Aktionen mit größerer Bedeutung in der visuellen Hierarchie Ihrer App zu kennzeichnen. In der folgenden Abbildung hat die FAB im ersten Bild eine gedämpfte Farbe mit demselben Farbton und derselben Farbkraft wie die Navigation, wodurch sie sich einfügt. Das zweite Bild zeigt eine FAB, die durch eine kräftige Primärfarbe mehr Aufmerksamkeit auf sich zieht.
Im Codelab Materialfarbe anpassen können Sie sich die dynamische Farbe praktisch ansehen.
Semantische Farbe
Semantische Farben sind Farben, die bestimmten Bedeutungen zugeordnet sind. Fehler ist beispielsweise eine semantische Farbe.
Achten Sie auf Einheitlichkeit bei der Bedeutung der Farbe. Wenn Sie ein Muster festlegen, wiederholen Sie es in der gesamten App. Wenn Sie beispielsweise Lila für eine Mitgliedschaftsfunktion festgelegt haben, verwenden Sie Lila für alle Instanzen dieser Mitgliedschaftsfunktion.
Im folgenden Beispiel wird in einer App rot verwendet, um einen Fehler in einem Textfeld anzuzeigen, aber lila für das andere. Das würde beim Überfliegen eines Formulars zu Verwirrung führen.
Das Material-Farbschema bietet zwar die semantische Farbe Fehler, aber zusätzliche semantische Farben werden durch benutzerdefinierte Farben erstellt, um das Farbschema zu erweitern. Weitere Informationen zu benutzerdefinierten Farben
Mit der Harmonisierung können Sie dynamische, von Nutzern erstellte Farben mit benutzerdefinierten Farben in Ihrer App abgleichen, um harmonischere Farbpaletten zu erstellen.
Oberflächenfarben
Oberflächenfarben sind für Hintergrundelemente wie Komponentencontainer, Seiten und Bereiche vorgesehen und stellen den Großteil der Farben Ihrer App dar. Verwenden Sie ruhig viel Fläche. Das menschliche Auge braucht Raum, um sich zu entspannen. Oberflächen helfen auch, Inhalte zu begrenzen und den Leser zu leiten.
M3 führte das Konzept der tonalen Oberflächen ein, d. h., alle Farben werden aus den Farbpaletten abgeleitet. Töne schaffen sowohl Tiefe als auch mehr Kontrast, um die Barrierefreiheit zu verbessern. Weitere Informationen zu Oberflächenrollen finden Sie in der M3-Leitfaden zu Oberflächenrollen.
Barrierefreiheit und Farbe
Je nach Sehschärfe sehen Menschen Farben unterschiedlich. Da einige Leser farbenblind sind, müssen Sie Farbkombinationen prüfen, damit sich die UI-Elemente nicht ineinander verlieren. Auch wenn Opacity und Weight nicht unbedingt der Farbton einer Farbe sind, haben sie einen starken visuellen Einfluss darauf, wie Nutzer Farbe wahrnehmen.
Der Farbkontrast ist der Unterschied zwischen der Leuchtkraft der Vordergrund- und Hintergrundelemente, dargestellt in einem Verhältnis. Für dieses Verhältniss gibt es Bewertungsstufen. Wenn Sie beispielsweise den Kontrast zwischen dem Text auf einer Schaltfläche und dem Container messen, können Sie die Lesbarkeit des Texts bestimmen. Die Farbkontrastrichtlinien sind in Text und Nicht-Text unterteilt, wobei für jede Kategorie eigene Bewertungen gelten. Weitere Informationen finden Sie unter Design mit barrierefreien Farben.
Verwenden Sie Farbe niemals als einzige Aufforderung oder Anzeige für eine verfügbare Aktion. Verwenden Sie eine Schaltfläche, ändern Sie die Schriftstärke oder verwenden Sie ein Symbol, um Nutzer darauf hinzuweisen, dass sie mit dem Element interagieren können.
Farbe implementieren
Tokens sind kleine variable semantische Darstellungen von Designdaten. Sie sind wiederverwendbar und ersetzen statische Werte wie Hex-Codes für Farben durch selbsterklärende Namen. Verwenden Sie Tokens anstelle von hartcodierten Farbwerten, um die Farbrolle eines Elements zuzuweisen.
Im Figma-Beispiel „Now in Android“ finden Sie Beispiele für die Zuordnung von Farben zu Rollen.
Farbwerte werden in einer Farbdatei color.kt mit Compose (oder color.xml mithilfe von Ansichten) festgelegt. Diese als Stile festgelegten Farben sind Teil eines Themas. Weitere Informationen finden Sie unter Design für Android-Designthemen.
Verwenden Sie zum Festlegen von Farbwerten unter Android den Hexadezimalcode, der RGB in einem sechsstelligen Format darstellt. Wenn Sie die Deckkraft erfassen möchten, hängen Sie den Wert an den Anfang, um einen 8-stelligen Code zu erhalten.
So verwenden Sie den Material Theme Builder:
Mit dem Material Theme Builder (MTB) können Sie benutzerdefinierte helle und dunkle Farbschemata erstellen.
Mit MTB können Sie dynamische Farben visualisieren, Material Design-Tokens generieren und Ihre Farbschemata anpassen.
Das Farbschema kann vollständig angepasst werden, indem Sie die Stileigenschaften im Figma-Inspection-Bereich aktualisieren. Diese geänderten Werte werden exportiert.
