Allgemeine Informationen



Die Onboarding Seite wird beim ersten Start der App aufgerufen. Darin wird in wenigen Schritten die Bedienung der App erläutert. Wenn Sie möchten, kann das Onboarding auch über das App Menü erneut aufgerufen werden. 


Der Nutzer kann sich durch Wischen von Schritt zu Schritt durch das Onboarding bewegen.

Sie können die Zahl der Schritte und deren Inhalte selbst festlegen. Die Inhalte bestehen aus je einem Bild, zb. einem Screenshot, oder einem Icon und einem kurzen Text. 


Um die Ladezeit der App nicht unnötig zu verlängern ist es sinnvoll, Bilddateien im JPEG Format zu verwenden. Für Icons werden PNG Dateien mit transparentem Hintergrund benötigt. 

 


Voraussetzungen:


  • Bilddateien: Pro Schritt mit Bild je eine Bilddatei im JPEG Format für Phone, Größe 1080x1920 px. Zusätzlich für Tablet je eine Bilddatei, Größe 2048x1536 px.
  • Icons: Pro Schritt mit Icon je eine Bilddatei im PNG Format mit transparentem Hintergrund in der Größe 1280x1280 px.
  • Texte: Für jeden Schritt eine Überschrift und ein kurzer Text, max. 300 Zeichen.
  • Buttons: gewünschte Farbe als Hexadezimalwert und gewünschter Button Text z.B. "Weiter".



Anleitung


Purple stellt in den Standard dynamischen Inhalte ein "neutral" gehaltenes Onboarding zur Verfügung. Es kann jedoch je Kunde angepaßt werden, z.B. Bilder, Texte oder Button-Farben.


Es liegt ein Ordner "onboarding" im "default" Ordner der dynamischen Inhalte (siehe technische Dokumentation).

Die konfigurierbaren Dateien liegen unter default/onboarding/assets/config.

Zur Bearbeitung der .json Dateien, können Sie einen html oder text editor verwenden. Wir empfehlen das Tool Brackets.


  1. Im Ordner "onboarding_images" liegen Bilder (.jpg) und Icons (.png), die eingebettet oberhalb von Text angezeigt werden.


    Es empfiehlt sich je für Phone und Tablet optimierte Bilder zu nutzen:
    • Phone.jpg = 1080 × 1920 px  
    • Tablet.jpg = 1536 × 2048 px
    • Die Bilder sollten sprachneutral (ohne Texte) sein.
    • Dateigröße < 1 MB

  2. Die Datei message.json enthält die Beschriftung der Buttons, mit denen der Nutzer durch die Bilder/Schritte blättert.


  3. Die onboarding.json enthält die Texte zu den Bildern und die Links zu den jeweils passenden Bildern in onboarding_images.

    • Jede {...} ist eine "Seite" im Onboarding, d.h. separates Bild und Text. Jede Klammer wird mit einem Punkt in der Actionbar als Navigation angezeigt.
    • Hier gibt es die Möglichkeit auf "icon" (wird zentriert und verkleinert) oder auf "image" zu referenzieren.
    • iOS only: "button" als weiterer Button, z.B. zum "Einkäufen Wiederherstellen" einfügen
      "button": {
      "text": "Restore Purchases",
      "action": {
      "type": "RESTORE_PURCHASES"
      }
  4. Die style.json definiert die Farben für Texte und Buttons innerhalb des Onboardings.

    • onboarding_bar = Button Farbe unten auf Seite; auf Phone die untere Actionbar und Button in einem.
    • onboarding_bar_pagination_active = (only Phone) Punkte, um Anzahl der Seiten des Onboarding anzuzeigen (Kombination aus Button und Actionbar unten, die auch die Punkte anzeigt)
    • onboarding_pagination_active = (only Tablet) Punkte, um Anzahl der Seiten des Onboarding anzuzeigen (sie werden auf tablet oberhalb der Bilder angezeigt)
    • onboarding_step_button = Farbe für separaten Button, wenn weitere Funktionen als Button per Action URL eingebaut werden sollen, z.B. "Einkäufen Wiederherstellen" (Hinweis: dieses Beispiel sollte dann im Plattform-spezifischen Ordner "iOS" eingebaut sein, da es nur für iOS verfügbar ist)


Man kann über eine Action URL das Onboarding erneut aufrufen und diese Option z.B. im App Menü anbieten: purple://app/onboarding/app_start/open.