Der Black Friday ist da! Erstellen Sie eine App und genießen Sie jetzt 50% Rabatt!
GoodBarber-Apps sind bereit für das iPhone Duo. So geht’s
Blog

Wie animiere ich die Anleitung in meiner App?

In GoodBarber stellt die App-Anleitung, auch Walkthrough genannt, Ihre App beim ersten Start vor, mit höchstens fünf Bildschirmen, die man nur einmal sieht. Ihre App hat nur wenige Sekunden, um sich vorzustellen, und die Anleitung ist in wenigen Minuten im Backoffice eingerichtet, in den Farben und Schriften Ihrer App. Jeder Schritt zeigt ein Bild oder, wenn Sie möchten, eine Lottie-Animation.

  7 Min. Lesezeit

Hier sehen Sie, was eine App-Anleitung für Ihre App leistet, welche zwei Layouts zur Wahl stehen und wie Sie einen Schritt animieren.

Was eine App-Anleitung ist und wann sie erscheint

Die Anleitung ist Ihre App, die sich vorstellt. Im Backoffice von GoodBarber finden Sie sie unter Meine App › Anleitung. Sie erscheint auf dem Smartphone, ein einziges Mal, beim ersten Öffnen der App nach der Installation. Sie kommt vor den Berechtigungsanfragen, Benachrichtigungen oder Standort, damit man als Erstes Ihre App sieht.

Sie umfasst bis zu fünf Schritte, jeder mit einem Medium, einem Titel und einer Beschreibung, alle optional. Drumherum stehen von Schritt zu Schritt dieselben Elemente, der Seitentitel oder Ihr Logo, die Schaltfläche Überspringen, der Pager und die Schaltfläche Weiter, die beim letzten Schritt zu Jetzt anfangen wird. Man kommt weiter, indem man auf die Schaltfläche tippt oder über den Bildschirm wischt.

Der Hintergrund, die Schriften, die Farbe der Schaltfläche und des Pagers sind die Ihrer App, das ist unser Prinzip "Set once, consistent everywhere". Sie müssen nichts neu gestalten. Die Anleitung ist der erste Schritt des Onboardings, dessen Best Practices wir ausführlich beschrieben haben.

Polaroid oder Immersive, zwei Layouts für die Schritte der Anleitung

Das Backoffice von GoodBarber bietet zwei Layouts für die Schritte. Bei Polaroid erscheint das Medium über dem Titel, in seinen ursprünglichen Proportionen, nie vergrößert, und ein Bild mit 1200 × 1200 Pixeln reicht. Bei Immersive füllt das Medium den ganzen Bildschirm, wie ein Hintergrund, und der Text liegt darüber. Planen Sie 1536 × 2048 Pixel ein und wählen Sie einen Effekt auf die Bilder, Keine, Deckkraft oder Gradient, damit der Text auf dem Foto lesbar bleibt. In beiden Layouts bietet die Ausrichtung der Inhalte sechs Positionen, links oder mittig, oben, in der Mitte oder unten.

Eine einfache Regel für die Wahl. Ein Foto, das eine Stimmung trägt, verlangt nach Immersive, so hat es die Musikschule Eastside Music Workshop mit ihren Fotos aus dem Unterricht gemacht. Eine Zeichnung oder eine Animation, die etwas erklärt, verlangt nach Polaroid, mit eigenem Hintergrund, das ist die Wahl von Unit 7, der Siebdruckwerkstatt, deren drei Schritte gezeichnet sind.

Einen Schritt animieren, mit einer Lottie-Animation statt des Bildes

Ein Bild sagt, was Ihre App tut. Eine Animation zeigt es. Im ersten Schritt von Unit 7 füllt sich ein Zeitfenster im Plan grün, und das Wort BOOKED wird aufgestempelt, und man versteht, dass man per Smartphone bucht, noch bevor man den Satz liest. Im zweiten fährt eine Rakel über den Rahmen, und der Zähler springt von 23 auf 24 Drucke. Im dritten ist eine als leer gemeldete Riso-Trommel wieder verfügbar, mit AVAILABLE als Sticker. Drei Gesten von je drei Sekunden, in Schleife. Das ist unser Prinzip "Polish you can feel", die Bewegung, an der man eine gut gemachte App spürt.

Diese Animationen sind Lottie-Dateien, ein leichtes Format für Vektoranimationen, das die App direkt abspielt. Sie finden sie in der Bibliothek von LottieFiles, oder Sie lassen sie in den Farben Ihrer App zeichnen, wie die von Unit 7. In GoodBarber lässt sich eine Animation so einfach einstellen wie ein Bild. Wählen Sie im Schritt LottieFiles statt Bild, fügen Sie die Datei hinzu und stellen Sie dann die Wiedergabegeschwindigkeit ein, von x0.5 bis x3, sowie die Schleifenwiedergabe. In jedem Fall beginnt die Animation von vorn, sobald ihr Schritt erscheint. Bei Polaroid nimmt sie die Breite des Bildschirms ein und behält ihre Proportionen. Bei Immersive füllt sie den Bildschirm wie ein Foto.

Die Animation bleibt eine Wahl. Ein Schritt kommt sehr gut mit einem festen Bild aus, und beides lässt sich in derselben Anleitung kombinieren.

Die App-Anleitung in GoodBarber einrichten

Die App-Anleitung ist eine Erweiterung von GoodBarber. Installieren Sie sie über Erweiterungs-Store › Alle Erweiterungen, auf der Seite App-Anleitung. Sie kostet 5 € im Monat in den Angeboten Standard und Premium und ist im Pro-Angebot enthalten. Danach erscheint das Menü Meine App › Anleitung, mit der Vorschau Ihrer App daneben.

  1. Wählen Sie das Layout, Immersive oder Polaroid, oben im Bereich.
  2. Fügen Sie Ihre Schritte hinzu, höchstens fünf. Klicken Sie auf Schritt hinzufügen, dann auf Bild oder LottieFiles. Für eine Animation nimmt der Reiter Datei Ihre Lottie-JSON-Datei auf, und der Reiter URL den Asset-Link einer LottieFiles-Animation. Stellen Sie dann Geschwindigkeit und Schleife ein und schreiben Sie Titel und Beschreibung. Die Vorschau daneben öffnet sich beim ersten Schritt, und mit ihrer Schaltfläche Weiter blättern Sie durch die anderen.
  3. Legen Sie die Allgemeinen Einstellungen fest, die für alle Schritte gelten. Die Hintergrundfarbe, die Ausrichtung der Inhalte, den Seitentitel oder an seiner Stelle ein Logo, Schrift und Farbe von Schritttitel und Schrittbeschreibung, die Schaltfläche „Überspringen“ und die Schaltfläche „Weiter“, die Farbe des Pagers und bei Immersive den Effekt auf die Bilder. Alles wird ohne Klick auf eine Schaltfläche gespeichert, und die Vorschau zieht mit.

Im Video wird die Ausrichtung der Inhalte auf unten links gestellt, und alle Schritte folgen. Soll ein einzelner Schritt eigene Einstellungen haben, einen eigenen Hintergrund, eine andere Ausrichtung, eine andere Farbe für Titel oder Schaltfläche, geht das über das JSON Ihrer App. Die kostenlose Erweiterung Advanced edition öffnet es mit einem Klick auf { BEARBEITUNG }, wie beim Schatten, bei den Rahmen oder bei der Form. Der Editor öffnet sich bei walkthrough. Klappen Sie steps auf, dann den gewünschten Schritt, und fügen Sie die Schlüssel des Bereichs hinzu, die Sie ändern möchten. Soll zum Beispiel nur der erste Schritt seinen Text unten links zeigen, klicken Sie auf „+ Hinzufügen“, tippen Sie contentAlign in das Feld newKey und den Wert bottom_left, dann „Hinzufügen“. Klicken Sie zum Schluss auf „Speichern“. Die anderen Schritte behalten die Ausrichtung der Inhalte aus dem Bereich.

Vorher, nachher: derselbe Schritt, als Bild und dann als Animation

Um zu sehen, was eine Animation verändert, hier zweimal derselbe Schritt, der Druckdurchgang bei Unit 7. Links das Standbild. Die Zeichnung ist sorgfältig gemacht, aber starr. Sie bleibt etwas abstrakt, und man versteht nicht sofort, was sie zeigt. Rechts dieselbe Illustration, animiert. Die Rakel fährt über das Sieb, die Farbe erscheint dort, wo sie vorbeikommt, der Zähler springt von 23 auf 24, und man erkennt sofort einen laufenden Druck. Sonst hat sich nichts verändert, nicht der Text, nicht die Farben, nicht die Schaltfläche.

Hier macht die Bewegung den Schritt lesbar. Aber auch wenn die Zeichnung schon klar ist, bringt die Animation Leben in die Anleitung und zeigt, dass Ihre App sorgfältig gemacht ist.

Meine liebste App-Anleitung ist animiert

Am liebsten ist mir eine animierte App-Anleitung. Um eine App in wenigen Bildschirmen vorzustellen, kenne ich nichts Anschaulicheres als Bewegung. Die von Unit 7, einer gemeinsam genutzten Siebdruckwerkstatt, ist ein schönes Beispiel. Sie nutzt Polaroid, auf einem Hintergrund in Charcoal #282727, mit dem Logo der Werkstatt an Stelle des Titels. Die Titel sind in Archivo Black 28 gesetzt, die Beschreibungen in Archivo 17, in einem Grau Concrete #A7A7A7. Die eckige Schaltfläche und der Pager tragen das Grün der Werkstatt, Unit Green #B9FF00. Die drei Lottie-Animationen wurden für die App gezeichnet, in ihren Farben, und jede zeigt in drei Sekunden eine Geste der Mitglieder, buchen, drucken, melden. In zwanzig Sekunden versteht man, wofür die App da ist, und der Startbildschirm übernimmt.

Die App-Anleitung in Kürze

  • In einer GoodBarber-App erscheint die App-Anleitung, auch Walkthrough genannt, ein einziges Mal, beim ersten Start auf dem Smartphone, und umfasst bis zu fünf Schritte.
  • Jeder Schritt trägt ein Medium, einen Titel und eine Beschreibung, alle optional. Drumherum der Seitentitel oder Ihr Logo, die Schaltfläche Überspringen, der Pager und die Schaltfläche Weiter, die beim letzten Schritt zu Jetzt anfangen wird.
  • Zwei Layouts, Polaroid, das Medium über dem Titel, und Immersive, das Medium im Vollbild mit einem Effekt für die Lesbarkeit des Textes.
  • Eine Lottie-Animation wird wie ein Bild eingesetzt, mit einer Geschwindigkeit von x0.5 bis x3 und Schleifenwiedergabe. Sie beginnt von vorn, sobald ihr Schritt erscheint.
  • Alles wird unter Meine App › Anleitung eingestellt, und jeder Schritt kann im JSON eigene Einstellungen haben, mit der kostenlosen Erweiterung Advanced edition.

Jetzt sind Sie dran

Installieren Sie die App-Anleitung über den Erweiterungs-Store, öffnen Sie Meine App › Anleitung und legen Sie einen ersten Schritt mit einem Bild, Ihrem Titel und einem Satz an. Die Vorschau zeigt ihn sofort. Probieren Sie dann eine Lottie-Animation an Stelle des Bildes aus, und sehen Sie zu, wie die Seite lebendig wird.

Noch keine App? Erstellen Sie Ihre mit GoodBarber, dem Mobile App Builder.

Weiterlesen