Black Friday is hier! Maak een app en profiteer nu van 50% korting!
GoodBarber-apps zijn klaar voor de iPhone Duo. Bekijk hoe
Blog

Hoe animeer ik de walkthrough van mijn app?

In GoodBarber stelt de walkthrough je app voor bij de eerste start, in maximaal vijf schermen die je maar één keer ziet. Je app heeft maar een paar seconden om zich voor te stellen, en de walkthrough stel je in een paar minuten in via de back-office, in de kleuren en lettertypen van je app. Elke stap toont een afbeelding of, als je wilt, een Lottie-animatie.

  7 min leestijd

Dit is wat een walkthrough voor je app doet, de twee layouts waaruit je kiest en hoe je een stap animeert.

Wat een walkthrough is en wanneer hij verschijnt

De walkthrough is je app die zich voorstelt. In de back-office van GoodBarber vind je hem onder Mijn App › Walkthrough. Hij verschijnt op de telefoon, één keer, de eerste keer dat de app na de installatie wordt geopend. Hij komt vóór de toestemmingsverzoeken, meldingen of locatie, zodat het eerste wat je ziet je app is.

Hij telt tot vijf stappen, elk met een media, een titel en een beschrijving, allemaal optioneel. Eromheen staan van stap tot stap dezelfde elementen, de paginatitel of je logo, de knop Overslaan, de pager en de knop Volgende, die bij de laatste stap Aan de slag wordt. Je gaat verder door op de knop te tikken of over het scherm te vegen.

De achtergrond, de lettertypen, de kleur van de knop en van de pager zijn die van je app, dat is ons principe "Set once, consistent everywhere". Je hoeft niets opnieuw te tekenen. De walkthrough is de eerste stap van de onboarding, waarvan we de best practices uitgebreid hebben beschreven.

Polaroid of Immersive, twee layouts voor de stappen van de walkthrough

De back-office van GoodBarber biedt twee layouts voor de stappen. Bij Polaroid staat de media boven de titel, in de oorspronkelijke verhoudingen, nooit vergroot, en een afbeelding van 1200 × 1200 pixels is genoeg. Bij Immersive vult de media het hele scherm, als een achtergrond, en ligt de tekst erbovenop. Reken op 1536 × 2048 pixels en kies een Effect op de afbeeldingen, Geen, Dekking of Gradient, zodat de tekst leesbaar blijft op de foto. In beide layouts biedt de contentuitlijning zes posities, links of in het midden, bovenaan, in het midden of onderaan.

Een eenvoudige regel om te kiezen. Een foto die een sfeer draagt, vraagt om Immersive, dat deed de muziekschool Eastside Music Workshop met haar foto's van de lessen. Een tekening of een animatie die iets uitlegt, vraagt om Polaroid, met een eigen achtergrond, dat is de keuze van Unit 7, het zeefdrukatelier, waarvan de drie stappen getekend zijn.

Een stap animeren, met een Lottie-animatie in plaats van de afbeelding

Een afbeelding zegt wat je app doet. Een animatie laat het zien. Bij de eerste stap van Unit 7 kleurt een tijdslot in de planning groen en wordt het woord BOOKED gestempeld, en je begrijpt dat je via je telefoon reserveert nog voor je de zin leest. Bij de tweede gaat een rakel over het zeefraam en springt de teller van 23 naar 24 afdrukken. Bij de derde is een leeg gemelde Riso-drum weer beschikbaar, met AVAILABLE als sticker. Drie gebaren van drie seconden, in een lus. Dat is ons principe "Polish you can feel", de beweging waaraan je een goed gemaakte app voelt.

Deze animaties zijn Lottie-bestanden, een licht formaat voor vectoranimaties dat de app rechtstreeks afspeelt. Je vindt ze in de bibliotheek van LottieFiles, of je laat ze tekenen in de kleuren van je app, zoals die van Unit 7. In GoodBarber stel je een animatie net zo makkelijk in als een afbeelding. Kies bij de stap LottieFiles in plaats van Afbeelding, voeg het bestand toe en stel dan de Afspeelsnelheid in, van x0.5 tot x3, en Afspelen in lus. Hoe dan ook begint de animatie opnieuw zodra haar stap verschijnt. Bij Polaroid neemt ze de breedte van het scherm en houdt ze haar verhoudingen. Bij Immersive vult ze het scherm als een foto.

De animatie blijft een keuze. Een stap doet het prima met een vaste afbeelding, en de twee gaan samen in dezelfde walkthrough.

Stel de walkthrough in GoodBarber in

De walkthrough is een extensie van GoodBarber. Installeer hem via Extensiewinkel › Alle extensies, op de pagina Walkthrough voor app. Hij kost € 5 per maand in de abonnementen Standard en Premium, en is inbegrepen in het Pro-abonnement. Daarna verschijnt het menu Mijn App › Walkthrough, met de preview van je app ernaast.

  1. Kies de layout, Immersive of Polaroid, bovenaan het paneel.
  2. Voeg je stappen toe, maximaal vijf. Klik op Een stap toevoegen en daarna op Afbeelding of LottieFiles. Voor een animatie neemt het tabblad Bestand je Lottie-JSON-bestand, en het tabblad URL de assetlink van een LottieFiles-animatie. Stel daarna de snelheid en de lus in, en schrijf de Titel en de Beschrijving. De preview ernaast opent op de eerste stap, en met de knop Volgende blader je door de andere.
  3. Stel de Algemene instellingen in, die voor alle stappen gelden. De Achtergrondkleur, de Contentuitlijning, de Paginatitel of een logo op zijn plaats, het lettertype en de kleur van de titel en de beschrijving van de stap, de Knop Overslaan en de Knop Volgende, de kleur van de Pager en bij Immersive het Effect op de afbeeldingen. Alles wordt opgeslagen zonder op een knop te klikken, en de preview volgt.

In de video wordt de Contentuitlijning op linksonder gezet, en alle stappen volgen. Wil je één stap eigen instellingen geven, een eigen achtergrond, een andere uitlijning, een andere kleur voor de titel of de knop, dan loopt dat via de JSON van je app. De gratis extensie Advanced edition opent die met één klik op { BEWERKING }, zoals bij de schaduw, de randen of de vorm. De editor opent op walkthrough. Klap steps open, daarna de stap die je wilt aanpassen, en voeg de sleutels van het paneel toe die je wilt veranderen. Wil je bijvoorbeeld alleen de tekst van de eerste stap linksonder zetten, klik dan op "+ Voeg toe", typ contentAlign in het veld newKey en de waarde bottom_left, en daarna "Voeg toe". Klik tot slot op "Opslaan". De andere stappen houden de Contentuitlijning van het paneel.

Voor, na: dezelfde stap, als afbeelding en dan als animatie

Om te zien wat een animatie verandert, hier twee keer dezelfde stap, die van de drukgang bij Unit 7. Links de stilstaande afbeelding. De tekening is verzorgd, maar staat stil. Ze blijft wat abstract, en je ziet niet meteen wat ze laat zien. Rechts dezelfde illustratie, geanimeerd. De rakel gaat over het zeefraam, de inkt verschijnt waar hij langskomt, de teller springt van 23 naar 24, en je herkent meteen een drukgang die bezig is. Verder is er niets veranderd, niet de tekst, niet de kleuren, niet de knop.

Hier maakt de beweging de stap leesbaar. Maar ook als de tekening al duidelijk is, brengt de animatie de walkthrough tot leven en laat ze zien dat je app verzorgd is.

Mijn favoriete walkthrough is geanimeerd

Wat ik het mooist vind, is een geanimeerde walkthrough. Om een app in een paar schermen voor te stellen, ken ik niets sprekenders dan beweging. Die van Unit 7, een gedeeld zeefdrukatelier, is een mooi voorbeeld. Hij gebruikt Polaroid, op een achtergrond in Charcoal #282727, met het logo van het atelier in plaats van de titel. De titels staan in Archivo Black 28, de beschrijvingen in Archivo 17, in een grijs Concrete #A7A7A7. De knop, met scherpe hoeken, en de pager krijgen het groen van het atelier, Unit Green #B9FF00. De drie Lottie-animaties zijn voor de app getekend, in haar kleuren, en elke animatie laat in drie seconden een gebaar van de leden zien, reserveren, drukken, melden. In twintig seconden begrijp je waar de app voor dient, en neemt het startscherm het over.

De walkthrough in het kort

  • In een GoodBarber-app verschijnt de walkthrough één keer, bij de eerste start op de telefoon, en telt hij tot vijf stappen.
  • Elke stap draagt een media, een titel en een beschrijving, allemaal optioneel. Eromheen de paginatitel of je logo, de knop Overslaan, de pager en de knop Volgende, die bij de laatste stap Aan de slag wordt.
  • Twee layouts, Polaroid, de media boven de titel, en Immersive, de media schermvullend met een effect voor de leesbaarheid van de tekst.
  • Een Lottie-animatie zet je in als een afbeelding, met een snelheid van x0.5 tot x3 en afspelen in lus. Ze begint opnieuw zodra haar stap verschijnt.
  • Alles stel je in onder Mijn App › Walkthrough, en elke stap kan eigen instellingen hebben in de JSON, met de gratis extensie Advanced edition.

Nu jij

Installeer Walkthrough voor app via de Extensiewinkel, open Mijn App › Walkthrough en zet een eerste stap neer met een afbeelding, je titel en een zin. De preview toont hem meteen. Probeer daarna een Lottie-animatie in plaats van de afbeelding, en kijk hoe de pagina tot leven komt.

Nog geen app? Maak de jouwe met GoodBarber, de Mobile App Builder.

Lees verder