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)

Allgemeine Farben

Primärfarbe/Hauptfarbe

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. Aktive Registerkarten
3. Filterschaltflächen
4. Aktive Registerkarten-Symbole
5. Maus-Cursor
6. Links
7. Tags
8. 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:

1. Der Fortschrittsbalken auf der Loyalty-Karte mit dunklem Hintergrund
2. Benutzerstandort
3. Ausgewählte Unterkategorie in der einseitigen Speisekartennsicht

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

Status-/Zustandsfarben 

Erfolgsfarbe:

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

Info-Farbe

Die Info-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

Info-Pillen-Symbol

Wird für die Anzeige von Info-Meldungen in der Snackbar verwendet. Diese Farbe sollten einen ausreichenden Kontrast aufweisen, damit der weiße Text lesbar ist:

Verarbeitungs- und verarbeitete Farben

Diese Farben werden für die Erstellung von Farbverläufen verwendet, die den Status der aktuellen Aktion darstellen. Sie sollten einen ausreichenden Kontrast aufweisen, damit der weiße Text lesbar ist:

1. Hintergrund der Statusbildschirms mit Farbverlauf
2. Hintergrund der Statusleiste mit Farbverlauf
3. Ladezustand der Schaltfläche

Symbolfarben

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

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: Wir empfehlen, für diese Symbole eine dunklere graue Farbe einzustellen, da wir Symbole haben, die 100% dieser Farbe verwenden, und Symbole, die 70% der Farbe verwenden:

1. Schaltfläche „Löschen“ bei inaktiven Eingabefeldern (70% Deckkraft)
2. Leere Häkchen (70% Deckkraft)
3. Pfeile zum Aufklappen (70% Deckkraft)
4. Schaltfläche „Passwort ein-/ausblenden“ bei inaktivem Passwortfeld (70% Deckkraft)

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

Symbol Deaktivierte Farbe

Wird auf die Grundfläche des Symbols angewendet, das den deaktivierten Zustand darstellt. Empfohlene Farbe: hellgrau:

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)

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
2. Deaktivierter Artikelzähler

Zusätzliche Farben

Farbe für Alkohol

Dient zur Einfärbung eines Symbols, das einen Alkoholartikel darstellt:

Farbe für Vegetarisch oder Vegan

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

• Vegetarisch
• Vegan

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