Mobile: Symbole

Kontext

In diesem Artikel bekommst du einen Überblick über die Verwendung von Symbolen und Startbildschirmbildern. Gehen wir eines nach dem anderen durch!

Aber bevor wir loslegen...

... denk bitte daran: Deine Symbole sollten so einfach und leicht zu interpretieren sein wie möglich. Der Benutzer, der das Symbol sieht, sollte schnell und genau verstehen, was es bedeutet und was es tut. Denke daran, dass deine Marke Kunden aus der ganzen Welt und aus verschiedenen Lebensbereichen bedienen könnte – deshalb solltest du Symbole mit einer möglichst universellen und eindeutigen Bedeutung wählen.

Zum Beispiel:

Das linke Symbol ist das „Böse.“ Es enthält zu viele Farben, hat nicht die richtige Größe, ist nicht richtig zugeschnitten und ist zu detailliert.

Das rechte Symbol ist das „Gute.“ Es ist einfach, richtig dimensioniert und zugeschnitten. Und außerdem, haben wir es extra für dich gemacht :)

Symbole

Die Ikonografie bzw. Bilddeutung ist einer der wichtigsten Bestandteile der Benutzeroberfläche. Es ist, sozusagen eine visuelle Sprache, die Befehle, Inhalte und die Bedeutung hinter den Funktionen darstellt. Die Icons sollten stets einfache visuelle Metaphern darstellen, die von den Benutzern auf Anhieb verstanden und erkannt werden können.

Du kannst aus zwei von uns zur Verfügung gestellten Symbolsätzen wählen, oder du kannst deine eigenen erstellen, indem du unseren Richtlinien für Symbole folgst.

Bitte beachte: Du kannst die Farben der Symbole im Customization Center jederzeit ändern, damit sie besser zu deiner Marke passen.

Figma-Symbolsätze

Symbolsatz - Fetter 

Symbolsatz - Dünner

Große Symbole

Große Symbole werden an mehreren Stellen in der App verwendet. Du solltest sie nach dem Stil deiner Marke gestalten oder du verwendest die im Satz enthaltenen. Falls du nur einige der Symbole im Satz ersetzen möchtest, achte darauf, dass die neuen Symbole dem visuellen Stil der anderen Symbole im Satz entsprechen.

Anforderungen

• Symbolgröße: 48x48 px
• Format: SVG
• Korrekte Namensgebung

Symbole für Bestellarten

Je nachdem, welche Bestellarten deine Marke in ihrer App aktiviert hat, sollten die richtigen Icons bereitgestellt werden

Auswahl für Take-Away

Falls die App deiner Marke Curbside als Bestellart aktiviert hat, sollten diese Symbole bereitgestellt werden

Angebot / Belohnung – Einlösekanäle

Je nachdem, welche Einlösekanäle deine Marke in ihrer App aktiviert hat, sollten die richtigen Icons bereitgestellt werden

Intelligente Bestellungen – Reisemodi

Falls die App deiner Marke die Funktion Smart Orders (Intelligente Bestellungen) aktiviert hat, sollten diese Symbole berücksichtigt werden.

Mittlere Symbole

Dies sind die am häufigsten verwendeten Symbole in der App. Du solltest sie nach dem Stil deiner Marke gestalten oder du verwendest die im Satz enthaltenen.

Anforderungen

• Symbolgröße: 24x24px
• Format: SVG
• Korrekte Namensgebung

Dünnerer Symbolsatz – Vorschau

Fetterer Symbolsatz – Vorschau

Kleine Symbole

Werden nur an sehr wenigen Stellen in der App verwendet. Du solltest sie nach dem Stil deiner Marke gestalten oder du verwendest die im Satz enthaltenen.

Anforderungen

• Symbolgröße: 16x16px
• Format: SVG
• Korrekte Namensgebung

Andere Symbole

Zu dieser Gruppe gehören die Symbole, die auf dem Kartenbildschirm verwendet werden, sowie die Plus- und Minus-Symbole, die auf dem Artikelbildschirm verwendet werden. Du solltest sie nach dem Stil deiner Marke gestalten oder du verwendest die im Satz enthaltenen.

Anforderungen

• Symbolgröße: Unter jedem Symbol definiert
• Format: SVG
• Korrekte Namensgebung

Bitte beachte: Wenn deine App Sprachen wie Arabisch oder Hebräisch verwendet, solltest du RTL-Symbole (Recht nach Links) bereitstellen. Du findest alle notwendigen Symbole in der Figma-Datei in den RTL-Abschnitten (sowohl für fettere als auch dünnere Symbolgruppen).

Solltest du vorhaben, deine eigenen Symbolsätze zu erstellen, dann orientiere dich bitte an der Namensgebung, die wir bereits verwenden. Die Namen der Symbole findest du in Figma in der Seitenleiste „Layers“.