Illustrazione di Matt Rae
Adobe XD supporta vari tipi di media, dalle immagini e dalle grafiche vettoriali, alla musica e ai file audio, per consentire di realizzare progetti e creare prototipi di straordinarie esperienze digitali senza difficoltà.
In questa guida imparerete a sfruttare due di questi tipi di media, i video e i Lottie, per creare un prototipo di un'applicazione di condivisione video social simile a TikTok e Instagram Reels. Scaricate il file di avvio e apritelo in Adobe XD per procedere con questa esercitazione.
Aggiungere video e Lottie su Adobe XD
Prima di iniziare l'esercitazione, è utile capire come funzionano i video e i media Lottie all'interno di Adobe XD. Proprio come le immagini e le grafiche vettoriali, i file video e Lottie possono essere trascinati sull'area di lavoro dal file system del computer. Una volta inserito nell'area di lavoro, il file può essere spostato e le impostazioni possono essere regolate dall'interno dell'Ispettore proprietà in modalità Progettazione.
Analogamente alle immagini, trascinando uno di questi tipi di file su una forma vettoriale o un percorso, verrà automaticamente mascherato all'interno dei limiti della forma, rendendo più semplice riempire le forme segnaposto con contenuti video e Lottie. Ciò può essere molto utile quando si popola un layout wireframe con risorse ad alta fedeltà. Una volta aggiunto un video o un file Lottie in una forma, facendo doppio clic sulla maschera sarà possibile regolare il posizionamento del file all'interno di essa.
Attualmente Adobe XD supporta file video MP4 di dimensioni pari o inferiori a 15 MB per ottimizzare velocità e prestazioni. I file Lottie sono accettati in formato JSON e possono essere scaricati da LottieFiles o esportati da Adobe After Effects utilizzando il plug-in LottieFiles for After Effects.
Nei file di avvio fornito in precedenza, troverete una cartella con diversi file video e Lottie disponibili per l'utilizzo in questo progetto di esercitazione.
Il file di avvio fornito include una serie di risorse, componenti ed elementi dell'interfaccia che verranno utilizzati per progettare e creare prototipi di un'esperienza video mobile che consente di sfogliare brevi video clip. Questa guida si concentrerà sull'aggiunta di file video e di file Lottie, per cui troverete diverse pagine già disposte e pronte all'uso.
Creazione del flusso di accesso dell'app
La prima esperienza da creare è il flusso di accesso in cui gli utenti inizieranno il loro percorso con questa esperienza mobile. Il flusso inizierà con l'animazione del logo dell'app nella schermata iniziale, quindi procederà in una sequenza di accesso che include la riproduzione automatica di un video nello sfondo.
Logo animato dell'app
Iniziate individuando il componente Logo animato dal pannello risorse del documento e trascinando un'istanza sulla prima schermata, sostituendo il rettangolo del segnaposto al centro della tavola da disegno. Questo componente include un file Lottie creato in After Effects e importato in Adobe XD.
Per garantire che l'animazione del logo venga riprodotta automaticamente, è necessario aggiornare le impostazioni di riproduzione in Ispettore proprietà. Nella sezione Supporto interattivo, selezionate Riproduci automaticamente dal menu a discesa. La visualizzazione in anteprima del progetto mostra che l'animazione Lottie viene riprodotta automaticamente all'apertura della finestra di anteprima.
Dal momento che l'animazione del logo simula un caricamento dell'app, il prototipo deve passare alla schermata successiva al termine dell'animazione. A tale scopo, selezionate nuovamente l'animazione Lottie e passate alla modalità Prototipo. Selezionate + nel menu delle interazioni e aggiungete una nuova interazione con il trigger Fine della riproduzione. Non sostituite il trigger Tempo perché è l'interazione che attiva la riproduzione automatica dell'animazione.
Con Fine della riproduzione selezionato come trigger, impostate la destinazione sulla prima schermata del flusso di accesso (Caricamento schermata iniziale). In questo modo, il prototipo potrà continuare una volta completata l'animazione.
Video di sfondo
Il passo successivo consiste nell'aggiungere un file video come sfondo del flusso di iscrizione. Poiché esistono diverse schermate per questo flusso di iscrizione, è utile impostare lo sfondo su una schermata, quindi copiarlo e incollarlo sulle altre.
Nella prima schermata, selezionate il livello Segnaposto video dal pannello Livelli, quindi spostatelo nella parte superiore dello stack (in questo modo è più semplice aggiungere il video e l'operazione può essere eseguita con i tasti di scelta rapida). Trascinate quindi il file HomeScreen.mp4 dalla cartella dei file di esempio e posizionatelo nella forma rettangolo (rilasciatelo quando il rettangolo diventa blu).
Fate doppio clic sul rettangolo per regolare la maschera in base alle necessità. Dopo aver trovato una posizione che vi piace, andate a Ispettore proprietà e aprite le impostazioni video. In questo caso, il video deve essere riprodotto in loop, quindi fate clic sul pulsante Loop per abilitarlo. Selezionate Riproduci automaticamente nel menu a discesa delle impostazioni video.
Ora copiate questo elemento video negli Appunti, selezionate le altre tavole da disegno nel flusso di iscrizione e incollatelo (XD lo incollerà automaticamente su tutte le tavole da disegno selezionate).
Infine, spostate ogni istanza sul retro dello stack di livelli su ogni tavola da disegno (è possibile utilizzare i tasti di scelta rapida, 'Maiusc + ['). Le tavole da disegno di questo flusso di iscrizione sono già state collegate con Animazione automatica, quindi in anteprima, facendo clic su di esse si vedrà che il video viene riprodotto automaticamente e continua a essere riprodotto durante la navigazione del prototipo. Nelle ultime due tavole da disegno, impostate la riproduzione del video su Nessuna riproduzione, poiché il video non sarà visibile su queste schermate.
Creazione dell'indicatore di carico
Una volta completata l'iscrizione, l'app verrà caricata e quindi trasferita nella home page dell'app. Per creare questo effetto, è possibile aggiungere un'altra animazione Lottie alla schermata tra l'iscrizione e la home page.
Sulla tavola da disegno intitolata Caricamento dell'app, trascinate il file Lottie Indicatore di caricamento dalle risorse del documento nel rettangolo del segnaposto. Utilizzando lo stesso approccio del logo animato, impostate l'animazione su Riproduci automaticamente e una volta completata la riproduzione, andate alla tavola da disegno Fase intermedia, che passa automaticamente alla schermata iniziale.
Per ottenere una transizione uniforme dalla schermata precedente, posizionate una copia dell'indicatore di caricamento sull'ultima schermata del flusso di iscrizione, ma riducendo le dimensioni e impostando l'opacità su 0%. Quando la transizione della pagina avviene con Animazione automatica, l'indicatore di caricamento si espanderà quando inizia la riproduzione.
Creazione di un carosello video verticale
Una volta che il flusso di iscrizione è completato, è possibile completare la schermata principale dell'applicazione. Questa schermata si comporta come un carosello video verticale che passa al video successivo al termine della riproduzione. Il carosello verrà creato in modo analogo ai caroselli basati su immagini utilizzando Adobe XD per creare un elemento interattivo. Tuttavia, in questa situazione, la riproduzione video viene controllata in modo da riprodurre un singolo video alla volta e fa avanzare automaticamente il carosello al termine di un video.
Creazione di componenti video
I componenti per questo elemento sono già stati creati. Trovate il Componente principale nella sezione dei componenti del file di esercitazione. È stata creata un'istanza per ciascuno dei quattro video da includere nel feed.
Iniziate selezionando la prima istanza etichettata Elemento post e selezionando il rettangolo dell'immagine segnaposto come avete fatto prima. Trascinate dalla cartella delle risorse il video Berg.mp4 e regolate la maschera come desiderato. Non preoccupatevi di regolare altre impostazioni, poiché queste verranno regolate in ogni stato del componente.
Ripetete questo passaggio con le altre tre istanze della pagina, aggiungendo i video Walk.mp4, Dive.mp4 e River.mp4 in ciascuno dei segnaposto video.
Infine, compilate ciascuno di questi elementi video in un componente impilandoli verticalmente uno sull'altro e formando un componente chiamato Feed video.
Per questo feed video, verrà eseguita un'azione di trascinamento per passare al video successivo, nonché una progressione automatica alla fine della riproduzione video. Per ottenere questo risultato, invece di utilizzare gli stati dei componenti, verranno utilizzate singole tavole da disegno, e il posizionamento del componente si sposterà semplicemente verso l'alto e verso il basso, in base al video che verrà riprodotto.
Posizionamento del componente compilato
Iniziate prendendo un'istanza del componente compilato (poiché ogni componente avrà delle sostituzioni) e posizionandolo nella prima tavola da disegno per il feed home. Utilizzando la scelta rapida della tastiera della parentesi quadra o il pannello Livello, posizionatelo nella parte inferiore dello stack di livelli e assicuratevi che la parte superiore del componente (primo video nello stack) si trovi nella parte superiore.
Fate quindi doppio clic sul componente e impostate la riproduzione video per il primo video su Riproduci automaticamente. Per ogni tavola da disegno, solo il video visualizzato deve essere impostato su Riproduci automaticamente, dunque assicuratevi di applicare queste modifiche alle istanze del componente compilato e non al componente principale.
Creazione di prototipi di interazioni video
Infine, per collegare i video insieme, creerete due interazioni su ognuno. La prima interazione sarà sul video stesso; nel primo video, selezionate il video nel pannello Livelli. Nella modalità Prototipo, impostate una nuova interazione con l'attivazione di Fine della riproduzione e una destinazione della successiva tavola da disegno della serie. Utilizzate Animazione automatica come tipo di azione e selezionate una facilitazione per la scelta. Questa interazione passa automaticamente al video successivo una volta che il primo video completa la riproduzione.
Nei casi in cui un video è lungo o un utente desidera saltarlo e passare al video successivo, è possibile aggiungere un'interazione Trascina. A tale scopo, selezionate il componente video compilato e in modalità Prototipo aggiungete un'interazione con un trigger Trascina. Ancora una volta, utilizzando l'opzione Animazione automatica, selezionate la tavola da disegno successiva della serie. Ora quando un utente trascina il mouse sul componente video, il prototipo animerà i video scorrendo verso l'alto e passando al video successivo.
Collegamento del resto dell'applicazione
Sull'area di lavoro sono disponibili altre tavole da disegno, complete di video incorporati. Provate a sperimentare con queste risorse fornite per creare una visualizzazione dei dettagli video dalla pagina del profilo o create risorse personalizzate per completare l'esperienza dell'applicazione video.
Scoprite di più su come creare prototipi con Adobe XD e altre esperienze come questa con le esercitazioni sulla creazione di prototipi.
