--- title: "Una guida interattiva animata per la tua app GoodBarber" description: "In GoodBarber, la guida interattiva, o walkthrough, si configura una volta, in cinque passaggi al massimo, ognuno con un'immagine o un'animazione Lottie." canonical_url: "https://it.goodbarber.com/blog/come-animare-la-guida-interattiva-della-mia-app-a1168/" lang: it date: 2026-11-13 last_updated: 2026-11-13 --- # 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. ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) [Marie-Pierre Jeffard](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/)UI Designer [Scegli **GoodBarber** come tuaFonte di notizie preferitaScegli **GoodBarber** come tua](https://www.google.com/preferences/source?q=it.goodbarber.com) 13 nov 2026 · 7 min di lettura ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98688324-68887963.jpg?v=1794562890.189679) 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 ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98688324-68887964.jpg?v=1794562892.0856893) 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](https://it.goodbarber.com/blog/onboarding-delle-app-mobile-best-practice-per-arrivare-prima-al-valore-a1105/). ## Polaroid o Immersive, due layout per i passaggi della guida ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98688324-68887965.jpg?v=1794562894.253701) 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 ![](https://cmsphoto.ww-cdn.com/superstatic/81312/art/grande/98688324-68887966.jpg?v=1794562896.1297112) 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](https://it.goodbarber.com/help/organizzare-il-tuo-contenuto-r93/aggiungere-animazioni-lottiefiles-alla-guida-interattiva-dell-app-a427/), 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 [Animazione: nel pannello della guida, il passaggio 1 passa da un'immagine a un'animazione Lottie, poi l'Allineamento dei contenuti passa in basso a sinistra](https://player.vimeo.com/video/1246541295?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) La guida interattiva è un'estensione di GoodBarber. Installala da **Extension Store › Tutte le estensioni**, nella scheda **[Guida interattiva all'app](https://it.goodbarber.com/extensions/walkthrough/)**, 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](https://it.goodbarber.com/blog/come-regolare-l-ombra-nella-mia-app-a1124/), [i bordi](https://it.goodbarber.com/blog/come-regolare-i-bordi-nella-mia-app-a1133/) o [la forma](https://it.goodbarber.com/blog/che-forma-per-la-mia-app-angoli-retti-arrotondati-o-tondi-a1156/). 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 [Animazione: lo stesso passaggio della guida interattiva, con un'immagine fissa a sinistra e la sua animazione Lottie a destra](https://player.vimeo.com/video/1246541294?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) 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 [Animazione: la guida interattiva completa di un'app di laboratorio serigrafico, dall'avvio alla schermata iniziale](https://player.vimeo.com/video/1246541293?badge=0&autopause=0&player_id=0&app_id=58479&autoplay=1&muted=1&loop=1) 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](https://it.goodbarber.com/create/) con GoodBarber, il Mobile App Builder. Segui GoodBarber su Google [![Add as a preferred source on Google](https://portal.ww-cdn.com/portal_static/images/preferred-source/badge-en.172e670ec003.png)](https://www.google.com/preferences/source?q=it.goodbarber.com) ![](https://blog.goodbarber.com/_public/profile/21/212215c51625b9eaa5ea86f45bb46da875792630-default.jpg) Informazioni sull'autore Marie-Pierre Jeffard UI Designer Sono UI Designer di GoodBarber. Design system delle app, componenti, layout, sito, illustrazioni, animazioni: tutto quello che faccio ruota intorno all'interfaccia. Quello che mi piace del nostro prodotto è inventare regole universali, che funzionano su tutti gli schermi e accolgono tutte le identità visive. L'app diventa uno scrigno per i tuoi contenuti. Amo ciò che sembra semplice, e tutto il lavoro invisibile che serve per arrivarci: le regole, le scelte e i vincoli che tengono in piedi un'interfaccia. È questo che racconto qui. [Altri articoli di Marie-Pierre](https://it.goodbarber.com/blog/author/marie-pierre-jeffard/)[LinkedIn](https://www.linkedin.com/in/marie-pierre-jeffard/)