È arrivato il Black Friday! Crea un'app e approfitta subito del 50% di sconto!
Le app GoodBarber sono pronte per iPhone Duo. Scopri come
Blog

Come animare la guida interattiva della mia app?

In GoodBarber, la guida interattiva, o walkthrough, presenta la tua app al primo avvio, in cinque schermate al massimo che si vedono una sola volta. La tua app ha solo pochi secondi per presentarsi, e la guida si configura in pochi minuti nel back office, con i colori e i caratteri della tua app. Ogni passaggio mostra un'immagine o, se vuoi, un'animazione Lottie.

  7 min di lettura

Ecco cosa fa una guida interattiva per la tua app, i due layout tra cui scegliere e come animare un passaggio.

Cos'è una guida interattiva e quando compare

La guida interattiva è la tua app che si presenta. Nel back office di GoodBarber, la trovi in La mia app › Guida. Compare sul telefono, una sola volta, la prima volta che l'app viene aperta dopo l'installazione. Arriva prima delle richieste di autorizzazione, notifiche o posizione, così la prima cosa che si vede è la tua app.

Conta fino a cinque passaggi, ognuno con un media, un titolo e una descrizione, tutti facoltativi. Intorno, gli stessi elementi da un passaggio all'altro, il titolo della pagina o il tuo logo, il pulsante Salta, il pager e il pulsante Avanti, che diventa Inizia sull'ultimo passaggio. Si va avanti toccando il pulsante o scorrendo lo schermo.

Lo sfondo, i caratteri, il colore del pulsante e del pager sono quelli della tua app, è il nostro principio "Set once, consistent everywhere". Non hai niente da ridisegnare. La guida interattiva è il primo passo dell'onboarding, di cui abbiamo descritto le buone pratiche.

Polaroid o Immersive, due layout per i passaggi della guida

Il back office di GoodBarber propone due layout per i passaggi. In Polaroid, il media compare sopra il titolo, nelle sue proporzioni originali, mai ingrandito, e basta un'immagine di 1200 × 1200 pixel. In Immersive, il media riempie tutto lo schermo, come uno sfondo, e il testo si posa sopra. Prevedi 1536 × 2048 pixel e scegli un Effetto sulle immagini, Nessuno, Opacità o Gradient, perché il testo resti leggibile sulla foto. In entrambi i layout, l'allineamento dei contenuti offre sei posizioni, a sinistra o al centro, in alto, al centro o in basso.

Una regola semplice per scegliere. Una foto che porta un'atmosfera chiede Immersive, è quello che ha fatto la scuola di musica Eastside Music Workshop con le sue foto delle lezioni. Un disegno o un'animazione che spiega chiede Polaroid, con uno sfondo tutto suo, è la scelta di Unit 7, il laboratorio serigrafico, i cui tre passaggi sono disegnati.

Animare un passaggio, con un'animazione Lottie al posto dell'immagine

Un'immagine dice cosa fa la tua app. Un'animazione lo mostra. Nel primo passaggio di Unit 7, una fascia oraria del calendario si riempie di verde e viene stampata la parola BOOKED, e capisci che si prenota dal telefono prima ancora di leggere la frase. Nel secondo, una racla attraversa il telaio e il contatore passa da 23 a 24 stampe. Nel terzo, un tamburo Riso segnalato vuoto torna disponibile, con AVAILABLE come adesivo. Tre gesti di tre secondi, in loop. È il nostro principio "Polish you can feel", il movimento che fa sentire un'app ben fatta.

Queste animazioni sono file Lottie, un formato di animazione vettoriale, leggero, che l'app riproduce direttamente. Le trovi nella libreria LottieFiles, come spiega la nostra guida, oppure le fai disegnare con i colori della tua app, come quelle di Unit 7. In GoodBarber, un'animazione si imposta con la stessa facilità di un'immagine. Nel passaggio, scegli LottieFiles invece di Immagine, aggiungi il file, poi regola la Velocità di riproduzione, da x0.5 a x3, e la Riproduzione in loop. In ogni caso, l'animazione riparte dall'inizio ogni volta che compare il suo passaggio. In Polaroid, prende la larghezza dello schermo e conserva le sue proporzioni. In Immersive, riempie lo schermo come una foto.

L'animazione resta una scelta. Un passaggio sta benissimo con un'immagine fissa, e le due si mescolano nella stessa guida.

Configura la guida interattiva in GoodBarber

La guida interattiva è un'estensione di GoodBarber. Installala da Extension Store › Tutte le estensioni, nella scheda Guida interattiva all'app, con il pulsante Installa. Costa 5 € al mese nelle offerte Standard e Premium, ed è inclusa nell'offerta Pro. Compare allora il menu La mia app › Guida, con l'anteprima della tua app accanto.

  1. Scegli il layout, Immersive o Polaroid, in alto nel pannello.
  2. Aggiungi i tuoi passaggi, cinque al massimo. Fai clic su Aggiungere un passaggio, poi su Immagine o LottieFiles. Per un'animazione, la scheda File accoglie il tuo file Lottie JSON, e la scheda URL il link dell'asset di un'animazione LottieFiles. Regola poi la velocità e il loop, e scrivi il Titolo e la Descrizione. L'anteprima, accanto, si apre sul primo passaggio, e il suo pulsante Avanti fa scorrere gli altri.
  3. Regola le Impostazioni generali, comuni a tutti i passaggi. Il Colore di sfondo, l'Allineamento dei contenuti, il Titolo della pagina o un logo al suo posto, il carattere e il colore del titolo e della descrizione del passaggio, il Pulsante Salta e il Pulsante Avanti, il colore del Pager e, in Immersive, l'Effetto sulle immagini. Tutto si salva senza pulsanti da premere, e l'anteprima segue.

Nel video, l'Allineamento dei contenuti passa in basso a sinistra, e tutti i passaggi lo seguono. Perché un solo passaggio abbia le sue impostazioni, uno sfondo tutto suo, un altro allineamento, un altro colore del titolo o del pulsante, passa dal JSON della tua app. L'estensione gratuita Edizione avanzata lo apre con un clic su { MODIFICA }, come per l'ombra, i bordi o la forma. L'editor si apre su walkthrough. Apri steps, poi il passaggio da modificare, e aggiungi le chiavi del pannello che vuoi cambiare. Per esempio, perché solo il primo passaggio posi il suo testo in basso a sinistra, fai clic su "+ Aggiungi", scrivi contentAlign nel campo newKey e il valore bottom_left, poi "Aggiungi". Infine fai clic su "Salva". Gli altri passaggi conservano l'Allineamento dei contenuti del pannello.

Prima, dopo: lo stesso passaggio, in immagine e poi in animazione

Per vedere cosa cambia un'animazione, ecco due volte lo stesso passaggio, quello della tiratura da Unit 7. A sinistra, l'immagine fissa. Il disegno è curato, ma fermo. Resta un po' astratto e non si capisce subito cosa mostra. A destra, la stessa illustrazione animata. La racla attraversa il telaio serigrafico, l'inchiostro compare al suo passaggio, il contatore passa da 23 a 24, e si riconosce subito una tiratura in corso. Nient'altro è cambiato, né il testo, né i colori, né il pulsante.

Qui, il movimento rende il passaggio leggibile. Ma anche quando il disegno è già chiaro, l'animazione dà vita alla guida e mostra che la tua app è curata.

La mia guida interattiva preferita è animata

Quello che preferisco è una guida interattiva animata. Per presentare un'app in poche schermate, non conosco niente di più eloquente del movimento. Quella di Unit 7, un laboratorio serigrafico condiviso, ne è un bell'esempio. È in Polaroid, su uno sfondo Charcoal #282727, con il logo del laboratorio al posto del titolo. I titoli sono in Archivo Black 28, le descrizioni in Archivo 17, in un grigio Concrete #A7A7A7. Il pulsante, ad angoli retti, e il pager prendono il verde del laboratorio, Unit Green #B9FF00. Le tre animazioni Lottie sono state disegnate per l'app, nei suoi colori, e ognuna mostra in tre secondi un gesto dei soci, prenotare, stampare, segnalare. In venti secondi si capisce a cosa serve l'app, e la schermata iniziale prende il testimone.

La guida interattiva in breve

  • In un'app GoodBarber, la guida interattiva, o walkthrough, compare una sola volta, al primo avvio sul telefono, e conta fino a cinque passaggi.
  • Ogni passaggio porta un media, un titolo e una descrizione, tutti facoltativi. Intorno, il titolo della pagina o il tuo logo, il pulsante Salta, il pager e il pulsante Avanti, che diventa Inizia sull'ultimo passaggio.
  • Due layout, Polaroid, il media sopra il titolo, e Immersive, il media a tutto schermo con un effetto per la leggibilità del testo.
  • Un'animazione Lottie si imposta come un'immagine, con una velocità da x0.5 a x3 e la riproduzione in loop. Riparte dall'inizio ogni volta che compare il suo passaggio.
  • Tutto si regola in La mia app › Guida, e ogni passaggio può avere le sue impostazioni nel JSON, con l'estensione gratuita Edizione avanzata.

Tocca a te

Installa la Guida interattiva all'app da Extension Store, apri La mia app › Guida e aggiungi un primo passaggio con un'immagine, il tuo titolo e una frase. L'anteprima lo mostra subito. Poi prova un'animazione Lottie al posto dell'immagine, e guarda la pagina prendere vita.

Non hai ancora un'app? Crea la tua con GoodBarber, il Mobile App Builder.

Continua a leggere