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:
- Plus- und Minus-Schaltflächen zum Hinzufügen von Artikeln zum Warenkorb
- Häkchen
- Aktive Registerkarten
- Filterschaltflächen
- Aktive Registerkarten-Symbole
- Maus-Cursor
- Links
- Tags
- 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:
- Der Fortschrittsbalken auf der Loyalty-Karte mit dunklem Hintergrund
- Benutzerstandort
- Statusbildschirm-Hintergrundverlauf in Kombination mit Primärfarbe
- Hintergrund der Statusleiste mit Farbverlauf in Kombination mit der Primärfarbe
- 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:
- Hintergrund Vorne
- Hintergrund Hinten
Erfolgsfarbe (Aktionsstatus)
Die Erfolgsfarbe wird verwendet, um den Erfolg einer Aktion oder Verfügbarkeit anzuzeigen:
- Bestellung mit App-Tag
- Snackbar
- Statusbildschirm
Fehlerfarbe (Aktionsstatus)
Die Fehlerfarbe wird verwendet, um Fehler oder eine nicht erfolgreiche Aktion anzuzeigen:
- Fehlerstatus des Eingabefeldes mit Hinweis
- Fehlerstatus für Modifikatoren
- Statusbildschirm für stornierte Bestellung
Deaktivierungsfarbe (Aktionsstatus)
Die Deaktivierungsfarbe wird verwendet, um deaktivierte Elemente und Aktionen zu kennzeichnen
- Zähler für nicht verfügbare Artikel
- Deaktiviert-Schaltfläche
- 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:
- Schaltfläche „Löschen“ bei inaktiven Eingabefeldern
- Leere Häkchen
- Anzeigepfeile
- 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:
- Profilsymbole
- Zurück- und Schließen-Symbole
- Symbol für Belohnungen und Angebote
- Info-Symbol
- 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:
- Symbole für Bestellarten
- 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.
- Aktivierte Eingabelinie (100% Deckkraft)
- Passive Eingabelinie (20% Deckkraft)
- Trennlinie (6% Deckkraft)
- Schaltflächenlinie (15% Deckkraft)
- Tabulator/Registerkartenlinie (10% Deckkraft)
Vegetarische Farbe
Vegetarische Farbe wird für Symbole verwendet, die vegetarische und vegane Lebensmittel darstellen:
- Vegetarisch
- 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:
- Große Überschrift
- Ü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:
- Textkörperfarbe 100%
- Textkörperfarbe 80%
- Textkörperfarbe 60%
- 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:
- Hintergrundfarbe der Hauptschaltfläche
- 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:
- Hintergrundfarbe der sekundären Schaltfläche
- 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:
- Infos zu Snackbar
- Tag
- 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:
- Dropdown-Pfeil
- Symbole für inaktive Bestellarten
- Inaktive Registerkarten-Symbole
- Symbole in Filtern
- 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:
- 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:
- Diverse Hintergrundfarben
Hintergrundfarbe des Symbol-Launchers
Diese Farbe ist Android-spezifisch. Wähle die Hintergrundfarbe für den Symbol-Launcher:
- Hintergrundfarbe des Symbol-Launchers
Kommentare
0 Kommentare
Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.