Come aggiungere motion graphics ai video
Come aggiungere motion graphics ai video per renderli più esplicativi: 8 grafiche che aggiungono valore, regole di tempistica, una scaletta di 60 secondi e 3 modi per realizzarle.
Roozbeh Firoozmand12 min di lettura
La maggior parte dei video di prodotto non ha bisogno di più movimento. Ha bisogno che l'occhio dello spettatore sia nel posto giusto al momento giusto. Quando aggiungi motion graphics a un video, ognuna dovrebbe svolgere uno di questi due compiti: mostrare dove guardare o spiegare il significato di qualcosa. Tutto il resto è decorazione e, in una registrazione dello schermo, la decorazione entra in competizione con l'interfaccia che stai illustrando.
Qui sotto: le 8 grafiche che aggiungono valore, le regole di tempistica per ciascuna, una scaletta prima/dopo per un walkthrough di 60 secondi e 3 modi per realizzarle.
Il test che ogni grafica deve superare
Guarda la clip con la grafica e senza. Lo spettatore trova il pulsante o il numero giusto più velocemente con la grafica? Se la risposta onesta è "sembra più carino", eliminala. Altri 2 controlli aiutano a eliminare il superfluo:
- Una sola grafica animata alla volta. Sfalsa le entrate di almeno mezzo secondo, altrimenti lo spettatore non riuscirà a leggerne nessuna.
- La grafica arriva insieme alla narrazione. Se la voce fuori campo dice "clicca su Esporta" e l'evidenziazione appare 2 secondi dopo, lo spettatore sta già cercando. Falla apparire sulla parola, o qualche fotogramma prima.
8 grafiche che aggiungono valore in una registrazione dello schermo
| Grafica | Scopo | Regola generale |
|---|---|---|
| Callout (etichetta di testo) | Identifica l'elemento sullo schermo | Da 2 a 6 parole, sullo schermo per almeno il doppio del tempo di lettura |
| Zoom + evidenziazione | Mostra dove si svolge l'azione | Zoom prima del clic, mantieni per 1-2 secondi dopo l'azione |
| Contatore passaggi | Indica allo spettatore a che punto è | Stesso angolo, stesso stile, per ogni passaggio |
| Lower third | Identifica una persona o una sezione | Terzo inferiore, lontano dall'interfaccia dimostrata |
| Titolo | Separa i capitoli | 2-3 secondi, 1 riga di testo |
| Freccia animata | Indica qualcosa che uno zoom non isola | Disegna, poi resta ferma |
| Contatore dati | Dà enfasi a un numero | Conta in circa 1 secondo, poi mantieni il valore finale |
| Transizione | Segna un cambio di scena o argomento | 1 stile per video, meno di mezzo secondo |
Callout
Un callout dovrebbe identificare il controllo o dichiarare il risultato: "Impostazioni fatturazione" o "Fattura inviata". Limitalo a 6 parole. Le linee guida per i sottotitoli della BBC raccomandano un minimo di circa 0,3 secondi per parola. In una registrazione dello schermo, lo spettatore sta anche analizzando l'interfaccia, quindi raddoppia: un callout di 4 parole richiede circa 2,5 secondi, non 1,2.
Zoom + evidenziazione
La motion graphic più utile in una registrazione dello schermo, e la più abusata. Esegui lo zoom 0,5 secondi prima del clic, mantieni mentre appare il risultato, poi allontana lo zoom affinché lo spettatore veda dove si trova. Un'evidenziazione (un riquadro morbido o uno sfondo oscurato) svolge lo stesso compito senza muovere l'inquadratura, il che è adatto a dashboard dense dove lo zoom nasconderebbe il contesto. Usa l'una o l'altra per ogni azione.
Contatori passaggi
"Passaggio 3 di 5" in un angolo fisso indica allo spettatore quanto manca. Mantieni posizione e stile fissi e cambia solo il numero. Sotto i 3 passaggi, evita.
Lower third
Nei video di prodotto, i lower third identificano il presentatore in un riquadro o etichettano una sezione ("Vista Admin"). Attenzione al posizionamento: la parte inferiore della maggior parte delle web app contiene barre di salvataggio e widget di chat.
Titoli
Usali tra i capitoli, non a ogni passaggio. Un video di 60 secondi ne richiede 1, all'inizio. Un titolo che richiede troppo tempo per essere letto è un paragrafo che finge di essere una grafica.
Frecce animate
Una freccia è meglio di uno zoom quando due elementi sullo schermo sono correlati, come "questo interruttore cambia quell'anteprima". Lascia che si disegni in circa 0,3 secondi, poi fermala. Una freccia che rimbalza attira l'attenzione finché continua a muoversi.
Contatori dati
Contare fino a "1.240 ticket" dà peso a un dato in una demo o in un video di lancio. Raramente è adatto a un tutorial. Anima velocemente e mantieni il numero finale, altrimenti il movimento è l'unica cosa che lo spettatore ricorderà.
Transizioni
Usa 1 stile per video, solo quando cambia la scena o l'argomento. Tra due passaggi sulla stessa schermata, un taglio netto è solitamente la scelta migliore. Evita effetti flash: il criterio di successo WCAG su 3 flash o meno esiste perché i contenuti lampeggianti possono scatenare crisi epilettiche ed emicranie.
Regole per mantenere coerenti le sovrapposizioni animate
Le sovrapposizioni animate sembrano professionali quando seguono un sistema:
1. Uno stile di movimento. Stessa accelerazione, stessa direzione di entrata, stessa durata per ogni callout. Se i callout entrano da sinistra nel passaggio 1, devono farlo anche nel passaggio 5. 2. Modelli di brand, creati una volta. Font, colori, logo e layout dei titoli devono far parte di un modello salvato, non ricostruiti per ogni video. Ogni strumento qui sotto supporta questa funzione in qualche forma. 3. Area sicura. Tieni il testo lontano dai bordi dell'inquadratura e dai controlli dell'interfaccia che stai mostrando. Segna l'area sicura nel tuo modello. 4. Le grafiche seguono il copione. Scrivi prima la narrazione, poi segna la parola su cui si appoggia ogni grafica. Niente parola, niente grafica.
Prima e dopo: scaletta per un walkthrough di 60 secondi
Un walkthrough di 60 secondi su "invia la tua prima fattura" in una tipica app di fatturazione SaaS. "Prima" è la registrazione grezza con voce fuori campo.
| Tempo | Prima (registrazione grezza) | Dopo (con motion graphics) |
|---|---|---|
| 0:00–0:03 | Dashboard, cursore che si muove | Titolo: "Invia la tua prima fattura" con logo, 3 secondi |
| 0:03–0:10 | Il narratore spiega l'obiettivo sulla dashboard | Appare il contatore passaggi ("Passaggio 1 di 4"); evidenziazione sulla scheda Fatture mentre il narratore la nomina |
| 0:10–0:18 | Clic su Fatture, caricamento pagina | Zoom sul pulsante Nuova fattura 0,5 secondi prima del clic; callout "Nuova fattura" |
| 0:18–0:32 | Inserimento cliente, voci, importo | Passaggio 2 di 4; zoom indietro per mostrare il modulo completo; sfocatura sull'email reale del cliente |
| 0:32–0:40 | Scorrimento fino alla data di scadenza | Passaggio 3 di 4; freccia dal campo data di scadenza all'anteprima dei termini di pagamento |
| 0:40–0:50 | Clic su Invia, notifica di conferma | Passaggio 4 di 4; zoom sulla notifica; callout "Fattura inviata", mantenuto per 2,5 secondi |
| 0:50–0:57 | Il narratore menziona i promemoria | Transizione a scorrimento verso la schermata Promemoria; evidenziazione sull'interruttore |
| 0:57–1:00 | Il video termina sulla dashboard | Schermata finale con il titolo del prossimo video, stesso modello dell'apertura |
Sono 16 eventi grafici in 60 secondi. Funziona perché le entrate sono sfalsate e ognuna si appoggia a una parola nel copione. La sfocatura serve per la privacy ed è l'unica grafica che non dovresti mai saltare quando usi dati reali dei clienti.
3 modi per aggiungere motion graphics ai video
1. Un editor tradizionale: Premiere, After Effects o DaVinci Resolve
Adobe Premiere con After Effects. I modelli di Motion Graphics (file .mogrt) vengono creati in After Effects e riutilizzati in Premiere. Secondo la pagina di supporto di Adobe, trascini un modello dal pannello Modelli grafici su una traccia video, quindi lo modifichi nella scheda Modifica del pannello Proprietà. I modelli basati sui dati riempiono grafici a barre e a linee partendo da dati di fogli di calcolo, che è la strada più pulita per ottenere contatori e grafici accurati.
DaVinci Resolve. La pagina Fusion è un compositore basato su nodi all'interno di Resolve, con oltre 200 strumenti. Puoi creare terzi inferiori, sfondi animati e transizioni in Fusion, salvarli come macro ed esporre solo i controlli che un editor dovrebbe toccare. Appariranno poi nella libreria effetti della pagina Edit per qualsiasi progetto. Resolve è scaricabile gratuitamente; Resolve Studio costa 295 $.
Ideale per: team con un motion designer che crea modelli una volta sola e editor che li riutilizzano. Compromesso: zoom e callout su una registrazione schermo vanno impostati manualmente con i keyframe, ogni volta.
2. Un editor basato su modelli: Canva o CapCut
Canva ti permette di animare pagine, elementi e testo dal pulsante Anima, con preset Lento, Medio o Veloce o durate precise di entrata e uscita. "Mostra tempistica elementi" ti consente di impostare quando appare ogni elemento, e "Crea un'animazione" ti permette di trascinare un elemento lungo un percorso di movimento. I Kit aziendali memorizzano loghi, colori e font affinché i modelli rimangano coerenti con il brand.
CapCut ha una libreria di modelli di testo e animazioni di testo e, su desktop, puoi usare i keyframe per posizione, scala, rotazione e opacità. È così che creeresti uno zoom manuale o un callout a scorrimento.
Ideale per: marketer che usano già questi strumenti e hanno bisogno di testo animato su clip brevi. Compromesso: nessuno dei due è pensato per le registrazioni schermo, quindi zoom che seguono i clic, pulizia del cursore e sfocature per la privacy sono lavoro manuale.
3. Clevera: overlay su una timeline, o un brief a parole
Clevera parte dalla registrazione. Per video tutorial con narrazione AI e demo di prodotto, ammorbidisce il cursore, evidenzia le interazioni chiave e applica uno zoom intelligente mentre scrive e sincronizza la voce fuori campo. Gran parte del lavoro di zoom ed evidenziazione nell'elenco delle inquadrature qui sopra è fatto prima ancora di aprire l'editor.
Nell'editor della timeline, aggiungi o regoli il resto: overlay di testo, immagini, sfocature ed evidenziatori, schermate iniziali, intro, reveal del logo, zoom e transizioni come zoom incrociato, a tendina, a persiana, dissolvenza, wipe morbido e scorrimento. Schermate iniziali, reveal del logo e stile video si salvano come modelli predefiniti o personalizzati, così il secondo video sembrerà uguale al primo. Se vuoi solo che la tua registrazione sia stilizzata con zoom, overlay e schermate iniziali, l'opzione stilizzata (pronta per la condivisione) non usa crediti AI, quindi è illimitata su ogni piano, incluso quello Free (con Free condividi tramite link o embed; i download MP4 sono inclusi in Starter e Pro).
Per grafiche al di fuori di questo elenco, usa Descrivi cosa vuoi nel generatore di motion graphics AI. Scrivi un brief a testo libero, come "aggiungi un contatore animato da 0 a 1.240 a 0:45 e una freccia dal campo della data di scadenza all'anteprima dei termini", e Clevera costruisce grafiche animate sopra il video esistente. L'elenco degli overlay dell'editor non include una freccia o un contatore dedicati, quindi questa è la strada giusta per ottenerli.
Le modifiche a testo, evidenziazioni e sfocature su un video Clevera pubblicato aggiornano ogni link ospitato e ogni embed, quindi l'etichetta di un pulsante rinominato viene corretta una sola volta. Una nuova interfaccia richiede comunque nuove riprese.
Ideale per: team di prodotto, supporto e marketing che creano guide ogni settimana senza un editor. Compromesso: il registratore AI cattura solo siti web e web app https pubblici, quindi le riprese di software desktop e intranet provengono dall'app desktop o da un caricamento. E vedi la sezione successiva per i lavori che non dovrebbe fare.
Cosa ha aggiunto Clevera da solo e cosa no
Nell'ottobre 2026 abbiamo fatto catturare al registratore AI di Clevera una breve attività in una demo di un'app di gestione attività, 0:58 di riprese grezze, e l'abbiamo trasformata in un video tutorial. Circa 50 secondi e 9 crediti dopo, la timeline conteneva già una schermata iniziale, un reveal del logo e zoom automatici a 1.5x e 1.8x, ridotti a 0:40. Questo è il lavoro fatto per le righe della schermata iniziale e degli zoom dell'elenco inquadrature. Callout, contatore di passaggi e frecce non c'erano; quelli spettano a te.
Abbiamo poi eseguito "Stilizzato per la condivisione" sulla stessa registrazione con il nostro modello del team invece del Predefinito integrato. Ci sono voluti circa 25 secondi e 0 crediti. L'output è durato 1:07, più lungo della fonte a causa della schermata iniziale, con 2 zoom automatici a 1.8x e l'editor aperto sul pannello Stile per sfondo, spaziatura, angoli e cursore. La pagina registrata appariva sbiadita e a basso contrasto; il pannello Stile incornicia le riprese, non le corregge.
La versione da 1:07 "Stilizzato per la condivisione" della stessa registrazione, non modificata, 0 crediti.
Per quanto riguarda il brief, un brief personalizzato ha creato un'infografica animata da 1:00 con una barra di caricamento in circa 7-8 minuti per 86 crediti. I numeri erano corretti, ma ha ignorato i 15 secondi scritti nel brief (la durata si imposta nel menu Formato) e la riga sorgente è risultata troppo piccola per un telefono. Quella clip è stata costruita da zero. Non abbiamo ancora testato grafiche sovrapposte a una registrazione esistente.
L'infografica animata da 1:00 restituita da Clevera dal brief, non modificata.
Quando vale la pena pagare un motion designer
Gli editor AI e i modelli coprono le grafiche in questa guida. Non sostituiscono un motion designer per:
- Un video di lancio o un filmato del brand in cui ogni fotogramma è diretto artisticamente e il movimento stesso è il messaggio.
- Grafiche tracciate su riprese in movimento, come un'etichetta che segue un telefono in una ripresa a mano.
- 3D, animazione di personaggi o illustrazioni personalizzate in movimento.
- Il tuo sistema di modelli. Una settimana del tempo di un designer per costruire i tuoi terzi inferiori, schermate iniziali e reveal del logo in After Effects o Fusion ripaga su ogni video che il tuo team realizzerà in seguito, in qualsiasi strumento che accetti modelli.
La solita divisione: un designer per il sistema e il lancio principale, uno strumento AI o un editor di modelli per le guide settimanali.
Inizia con lo zoom
Se aggiungi una sola cosa alla tua prossima registrazione schermo, fai in modo che sia uno zoom che atterra mezzo secondo prima del clic. Risolve la lamentela più comune sui video di prodotto, "Non riuscivo a vedere cosa hai cliccato", e ogni altra grafica in questa guida si basa sull'abitudine di portare l'occhio dello spettatore dove punta la narrazione.
