Mobile: Komponenten und Bilder des Startbildschirms

Kontext

Komponenten sind vorgefertigte Elemente, wie LEGO-Bausteine, die du auf verschiedene Weise zusammensetzen kannst, um deinen Startbildschirm zu gestalten, Inhalte einzufügen und sie so zusammenzustellen und anzuordnen, dass du das gewünschte Ziel erreichst. Das komponentenbasierte Design ermöglicht es dir, das ideale, einzigartige Design für deinen Startbildschirm zu erstellen.

Liste der Komponenten

Dies sind die Bausteine deines Startbildschirms. Verbinde sie, ordne sie neu an und füge Inhalte hinzu, um einen perfekten Startbildschirm für deine App zu erstellen.

Struktur der Komponenten

Wenn die Komponenten vertikal verbunden sind, bilden sie die Struktur deines Startbildschirms. Wenn der Inhalt übernommen wird, erhältst du einen einsatzbereiten Startbildschirm.

Funktionalität der Komponenten

Einige der Komponenten können neu angeordnet, multipliziert oder sogar ausgeschaltet werden

1. Neu angeordnete Komponenten
   Richte die Komponenten neu aus, um die vertikale Struktur des Startbildschirms zu ändern.

2. Multiplizierte Komponenten
   Multipliziere dieselbe Komponente mehrmals, um verschiedene Inhaltstypen auf sie anzuwenden.

3. Deaktiviert
   Schalte alle Komponenten aus, die du nicht haben willst, und verwende nur die, die für dich am besten funktionieren.

Sichtbarkeit der Komponenten

Um die Dinge zu vereinfachen, können einige der Komponenten auch in kleinere Elemente unterteilt werden. Du kannst bestimmte Funktionen einer einzelnen Komponente, die du nicht haben möchtest, ausschalten.

Einige Beispiele:

Wie man Inhalte auf Komponenten anwendet

1. Hero-Bild

Das Hero-Bild besteht aus einem Bild und einer Schaltfläche und ist das erste, was der Benutzer beim Öffnen der Anwendung sieht. Am besten verwendest du diese Komponente, wenn du deine Marke mit dem Bild visuell darstellst und die Schaltfläche als Link zu der wichtigsten Aktion verwendest, die deine Benutzer ausführen sollen.

Button verlinken zu:

• Bestellung
• Angebote
• Belohnungen
• Promotions
• Benutzerdefinierte Aktionen [URL / Deeplink]

Wenn du aus irgendeinem Grund nicht möchtest, dass die Schaltfläche angezeigt wird, kannst du sie auch ausschalten.

Die Konfiguration des Bildes ist einfach und du kannst sie mit den folgenden Schritten vornehmen:

1. Wähle die Version des Hero-Bildes (Normal oder Kompakt)
2. Wähle die Schaltflächenaktion (Wohin soll die Schaltfläche verlinkt werden)
3. Wähle die Farben und den Text der Schaltflächen aus (Text, Hintergrundfarbe)
4. Wähle das Bild aus (Welches Bild repräsentiert die Aktion der Schaltfläche am besten)

Du brauchst die folgenden Angaben, damit diese Komponente zu deinem Startbildschirm hinzugefügt werden kann:

2. Große Bilderliste

Die große Bilderliste zeigt Inhalte in einem Slider mit großen Bildern an, so dass eine einzelne vollständige Inhaltskarte den gesamten Bildschirm bedeckt und der Hinweis auf die nächste Inhaltskarte angezeigt wird (wenn es mehrere Karten gibt).

Enthält eine Kopfzeile und eine Artikelliste. Die Überschrift kann einen Link enthalten, falls ein Standard-Inhaltstyp in der Komponente angezeigt wird. Der Kopfzeilen-Link wird für benutzerdefinierte Artikel nicht unterstützt.

Verwende eine große Bildlistenkomponente, um folgendes zu präsentieren:

• Neuigkeiten-Artikel
• Angebote
• Belohnungen
• Promotions
• Standorte die in der Nähe sind
• Benutzerdefinierte Aktionen (Zeigt Karte(n) mit benutzerdefiniertem Bild, Text und Aktion)

Du brauchst die folgenden Angaben, damit diese Komponente zu deinem Startbildschirm hinzugefügt werden kann:

Einige Beispiele:

3. Kleine Bilderliste

Die kleine Bilderliste zeigt Inhalte in einem Slider mit einem mittelgroßen Bild an. Hier gelten die gleichen Regeln wie für die große Bilderliste.

Enthält eine Kopfzeile und eine Artikelliste. Die Überschrift kann einen Link enthalten, falls ein Standard-Inhaltstyp in der Komponente angezeigt wird. Der Kopfzeilen-Link wird für benutzerdefinierte Artikel nicht unterstützt. 

Verwende eine kleine Bildlistenkomponente, um folgendes zu präsentieren:

• Neuigkeiten-Artikel
• Angebote
• Belohnungen
• Promotions
• Standorte die in der Nähe sind
• Benutzerdefinierte Aktionen (Zeigt Karte(n) mit benutzerdefiniertem Bild, Text und Aktion)

Du brauchst die folgenden Angaben, damit diese Komponente zu deinem Startbildschirm hinzugefügt werden kann:

Einige Beispiele:

4. Standortliste

Die Standortliste wird nur als Komponente verwendet, um nahegelegene Standorte auf der Startseite der App anzuzeigen. Eine andere Möglichkeit, um nahegelegene Standorte anzuzeigen, ist die Verwendung einer großen oder mittleren Bildlistenkomponente, wie oben erklärt.

Du brauchst die folgenden Angaben, damit diese Komponente zu deinem Startbildschirm hinzugefügt werden kann:

Beispiel:

5. Textansicht

Die Textansicht ist eine Komponente, die vor allem für Informationszwecke verwendet wird. Du kannst sie mit einer externen Seite verlinken oder mit einem Deeplink, der innerhalb der Anwendung implementiert ist.

Du brauchst die folgenden Angaben, damit diese Komponente zu deinem Startbildschirm hinzugefügt werden kann:

Beispiel:

Du kannst diese Komponente als eine Kombination aus folgendem verwenden:

6. Funktionsbasierte Komponente

Diese Komponenten sind nur verfügbar, wenn bestimmte Funktionen für die App deiner Marke aktiviert sind.

Empfehlungs-Komponente

Wenn deine App ein Empfehlungsprogramm aktiviert hat, wird diese Komponente auf der Startseite angezeigt, um auf diese Funktion hinzuweisen.

Fertige Vorlagen

Hier ein paar Beispiele, um dir einen Überblick zu geben, wie du deine Homepage strukturieren kannst.

Definitionen

Aktionen

Standard-Inhaltstypen

Benutzerdefinierter Inhalt

Unterstützt von der großen Bildliste & der kleinen Bildliste.

Startbildschirmbilder

Sie werden als Willkommensbild auf der Homepage deiner App verwendet. Du kannst zwischen einem normalen und einem kompakten Startbildschirmbild wählen.

Bitte beachte: Es ist sehr wichtig, dass du keinen Text oder ein Logo außerhalb des sicheren Bereichs einfügst, da es sonst von der Schaltfläche oder der Statusleiste verdeckt wird.

Achtung: für Marken mit Loyalty ist der sichere Bereich anders Bitte überprüfe die Anforderungen für den Startbildschirm in diesem Artikel zum Thema Loyalty.

Startbildschirm normales Bild

Anforderungen

• Bildgröße: 1125x1665px
• Sicherer Bereich: 1125x1205px
• Format: PNG, JPG
• Filename: hero_image.png

Startbildschirm kompaktes Bild

Anforderungen

• Bildgröße: 1125x996px
• Sicherer Bereich: 1125x580px
• Format: PNG, JPG
• Filename: hero_image_compact.png