Mobile: Farben

Kontext

Der erste Schritt bei der visuellen Gestaltung einer mobilen White Label-Anwendung ist die Auswahl der richtigen Farben.

Manche Farben beeinflussen das Aussehen der mobilen App mehr als andere, also solltest du dir darüber zuerst Gedanken machen.

Bitte beachte: Alle Farben sollten im Hex-Farbcode-Format angegeben werden, z.B. (#ff6600)

Globale Farben

Primärfarbe

Die Primärfarbe wird verwendet, um einen wichtigen Teil der Benutzeroberfläche hervorzuheben. Die Hauptfarbe der Marke wird am häufigsten dafür verwendet. Diese Farbe sollte ausreichend Kontrast zu allem anderen haben, damit die Textelemente in dieser Farbe gut lesbar sind. Wir verwenden diese Farbe für die folgenden Elemente in der mobilen App:

1. Plus- und Minus-Schaltflächen zum Hinzufügen von Artikeln zum Warenkorb
2. Häkchen
3. Aktive Registerkarten
4. Filterschaltflächen
5. Aktive Registerkarten-Symbole
6. Maus-Cursor
7. Links
8. Tags
9. Ausgewählte Filter, etc...

Sekundärfarbe

Die Sekundärfarbe wird verwendet, um zusätzliche Details der Schnittstelle hervorzuheben. Diese Farbe sollte ebenfalls einen  ausreichenden Kontrast zum Rest deines App-Layouts haben, damit der weiße Text, der auf dieser Farbe steht, gut lesbar ist. Du kannst diese Farbe verwenden, um Farbverläufe zu erstellen, die den Status der aktuellen Aktion darstellen:

1. Der Fortschrittsbalken auf der Loyalty-Karte mit dunklem Hintergrund
2. Benutzerstandort
3. Statusbildschirm-Hintergrundverlauf in Kombination mit Primärfarbe
4. Hintergrund der Statusleiste mit Farbverlauf in Kombination mit der Primärfarbe
5. Ladevorgang der Schaltflächen in Kombination mit Primärfarbe

Hintergrundfarbe

Die Hintergrundfarbe wird in der gesamten mobilen App verwendet. „Hintergrund Hinten“ ist die Haupthintergrundfarbe und die Farbe „Hintergrund Vorne“ wird für Elemente verwendet, die über der Hauptebene liegen - wie Dialogfenster und Karten. Auf manchen Bildschirmen wird der gesamte Hintergrund aus der Farbe „Hintergrund Vorne“ gebildet:

1. Hintergrund Vorne
2. Hintergrund Hinten

Erfolgsfarbe (Aktionsstatus)

Die Erfolgsfarbe wird verwendet, um den Erfolg einer Aktion oder Verfügbarkeit anzuzeigen:

1. Bestellung mit App-Tag
2. Snackbar
3. Statusbildschirm

Fehlerfarbe (Aktionsstatus)

Die Fehlerfarbe wird verwendet, um Fehler oder eine nicht erfolgreiche Aktion anzuzeigen:

1. Fehlerstatus des Eingabefeldes mit Hinweis
2. Fehlerstatus für Modifikatoren
3. Statusbildschirm für stornierte Bestellung

Deaktivierungsfarbe (Aktionsstatus)

Die Deaktivierungsfarbe wird verwendet, um deaktivierte Elemente und Aktionen zu kennzeichnen

1. Zähler für nicht verfügbare Artikel
2. Deaktiviert-Schaltfläche
3. Deaktiviert-Symbol

Farbe des Symbols bei Inaktivität

Die Farbe des Symbols bei Inaktivität wird auf Symbole angewandt, die für die Navigation oder den inaktiven Zustand/Leerlauf verwendet werden:

1. Schaltfläche „Löschen“ bei inaktiven Eingabefeldern
2. Leere Häkchen
3. Anzeigepfeile
4. Schaltfläche „Passwort ein-/ausblenden“ bei inaktivem Passwortfeld

Farbe für aktives Symbol

Die Farbe des aktiven Symbols wird für alle Symbole verwendet, die eine Aktion auslösen:

1. Profilsymbole
2. Zurück- und Schließen-Symbole
3. Symbol für Belohnungen und Angebote
4. Info-Symbol
5. Schaltfläche „Löschen“ bei aktiven Eingabefeldern

Hintergrundfarbe für große Symbole

Die Hintergrundfarbe der großen Symbole wird für alle großen aktiven Symbole verwendet:

1. Symbole für Bestellarten
2. Konfigurationssymbole

Linien

Die Linienfarbe wird für jede grafische Linie im gesamten System verwendet. Alle Linienfarben werden erstellt, indem die Deckkraft einer bestimmten Farbe reduziert wird. Aus diesem Grund sollte die Linienfarbe sehr dunkel sein. Dann können sogar nur 6% der Deckkraft sichtbar sein.

1. Aktivierte Eingabelinie (100% Deckkraft)
2. Passive Eingabelinie (20% Deckkraft)
3. Trennlinie (6% Deckkraft)
4. Schaltflächenlinie (15% Deckkraft)
5. Tabulator/Registerkartenlinie (10% Deckkraft)

Vegetarische Farbe

Vegetarische Farbe wird für Symbole verwendet, die vegetarische und vegane Lebensmittel darstellen:

1. Vegetarisch
2. Vegan

Farbe der Überschriften

Unser Rat: Sei besonders vorsichtig bei der Wahl der Textfarben. Diese Farbe sollte einen ausreichenden Kontrast zum Hintergrund haben, um lesbar zu sein und die Anforderungen der Barrierefreiheit zu erfüllen. Für die Überschriftfarben empfehlen wir dieselbe Farbe wie im Rest der App - Schwarz, aber du kannst auch eine andere wählen - denk nur daran, dass sie gut sichtbar sein muss:

1. Große Überschrift
2. Überschrift

Textkörperfarbe

Auch hier gilt der gleiche Ratschlag - denke daran, dass der Textkörper lesbar und für alle zugänglich sein sollte. Außerdem solltest du für den Fließtext eine sehr dunkle Farbe wählen, am besten Schwarz, denn alle anderen Textfarben werden aus dieser dunkelsten Farbe hergestellt. So beträgt der Platzhalter für das Eingabefeld zum Beispiel nur 20% der Textfarbe:

1. Textkörperfarbe 100%
2. Textkörperfarbe 80%
3. Textkörperfarbe 60%
4. Textkörperfarbe 20%

Hauptschaltflächen- und Textfarbe

Hauptschaltflächen werden für eine primäre Aktion auf dem Bildschirm verwendet. Hauptschaltflächen werden aus zwei Farben erstellt: der Hintergrundfarbe der Hauptschaltfläche und der Textfarbe der Hauptschaltfläche. So kannst du eine Kombination erstellen, bei der der Text vor dem Hintergrund lesbar ist:

1. Hintergrundfarbe der Hauptschaltfläche
2. Textfarbe der Hauptschaltfläche

Sekundärschaltfläche und Textfarbe

Sekundäre Schaltflächen werden für sekundäre Aktionen auf dem Bildschirm verwendet. Sekundärschaltflächen werden ebenfalls aus zwei Farben erstellt: Hintergrundfarbe der Sekundärschaltfläche und Textfarbe der Sekundärschaltfläche. Diese Kombination sollte ebenfalls gut lesbar sein:

1. Hintergrundfarbe der sekundären Schaltfläche
2. Textfarbe der sekundären Schaltfläche

Zusätzliche Farben

Status-Info Farbe

Die Statusinfo-Farbe wird verwendet, um zusätzliche neutrale Informationen für den Nutzer anzuzeigen. Diese Farbe sollte genügend Kontrast haben, sodass der weiße Text lesbar ist:

1. Infos zu Snackbar
2. Tag
3. Infos zu Bedingungen

Symbol Inaktivität Dunkle Farbe

Die dunkle Farbe des Symbols bei Inaktivität wird auf Symbole angewandt, die für sekundäre Aktionen auf der Seite verwendet werden. Sie bilden eine andere Kategorie als sekundäre Schaltflächen und Textfarben:

1. Dropdown-Pfeil
2. Symbole für inaktive Bestellarten
3. Inaktive Registerkarten-Symbole
4. Symbole in Filtern
5. Bekanntgabe der Loyalty-Punkte

Farbe des Zählers

Die Zählerfarbe wird für den Hintergrund des Artikelzählers verwendet. Diese Farbe sollte genügend Kontrast haben, sodass der weiße Text lesbar ist:

1. Artikelzähler

Hintergrundfarbe des Splash-Screens

Die Hintergrundfarbe des Splash-Screens wird als Hintergrund für den Splash-Screen verwendet, auf dem hauptsächlich das Logo der Marke gezeigt wird:

1. Diverse Hintergrundfarben

Hintergrundfarbe des Symbol-Launchers

Diese Farbe ist Android-spezifisch. Wähle die Hintergrundfarbe für den Symbol-Launcher:

1. Hintergrundfarbe des Symbol-Launchers