Usa Adobe XD per creare micro interazioni

Sep 14, 2025

Come si fa

(Immagine di immagine: Adobe)

Adobe XD può aiutare con la prototipazione - uno dei processi più importanti del ciclo di vita del design, che svolge un ruolo vitale nello sviluppo aiutando i progettisti e i team di dev con la manutenzione del flusso di lavoro. Ci sono stati alcuni importanti cambiamenti nel paesaggio di prototipazione di recente: i progettisti sono viziati per la scelta.

Proprio come molte altre discipline, non esiste uno strumento di progettazione e prototipazione singolo che può ottenere tutto. Diverse fasi richiedono un set unico di strumenti. Sono finiti i giorni in cui i progettisti erano soliti fare affidamento esclusivamente su Photoshop e Sketch. Sebbene siano fantastici strumenti di progettazione dell'interfaccia utente, non hanno le capacità per i flussi di utenti rapidi e i wireframe (vedi il nostro top Strumenti wireframe. Per ulteriori opzioni wireframing).

Ora con la crescente quantità di interazioni nei progetti - come animazioni, gesti e controllo vocale - è difficile trovare uno strumento che può ottenere tutte queste capacità di prototipazione e continuare a mantenere le cose semplici. La codifica è un modo per creare queste interazioni, ma richiede tempo. Fortunatamente, Adobe XD è arrivato in soccorso rilasciando un aggiornamento al suo strumento di prototipazione che include una funzione utile chiamata "Auto Animate". È di gran lunga la più grande aggiunta al potente set di strumenti.

Get Adobe Creative Cloud

L'idea qui è semplice: Auto Animate Abilita i progettisti di costruire prototipi interattivi con animazioni coinvolgenti semplicemente duplicando una tavola da disegno o modificando le proprietà di un oggetto. Queste proprietà potrebbero essere qualsiasi cosa, come le dimensioni, la posizione di X e Y, opacità, rotazione. In precedenza Adobe XD ha offerto interazioni di base come scorrevoli, spingere e dissolversi.

Con l'aggiunta delle nuove funzionalità, i progettisti possono facilmente creare animazioni basate sul movimento, che a loro volta aiuteranno l'utente a creare modelli mentali di flusso di informazioni quando stanno navigando tra più schermi. Questo può anche essere utilizzato per creare gerarchie visive, cta o messaggi che svaniscono temporaneamente dentro o fuori dallo schermo.

In questo articolo, spiegherò come creare semplici animazioni micro utilizzando questa nuova funzionalità Auto Animate di Adobe XD. Prima di iniziare, ci sono alcune cose da considerare su come gli oggetti devono essere gestiti per l'animazione automatica:

Quando un oggetto o un elemento non è sulla tavola da disegno di destinazione, di solito si sbiadisce quando viene visualizzato in anteprima
Quando un elemento non è presente nella tavola da disegno iniziale, tende a sbiadire
Collegare sempre le tavolette quando sei in modalità prototipo, che creerà le interazioni
Per creare animazioni, assicurarsi sempre che gli oggetti e gli elementi abbiano i nomi corrispondenti negli strati e anche il nome del gruppo che potrebbero essere in

Effettua un cambiamento di stato usando Auto Animate

Adobe XD tutorial — Potrebbe sembrare semplice, ma dovrai iniziare con due forme (Immagine di credito: Vamsi Batchu)

Iniziamo facendo un semplice esempio di cambiamento di stato usando Auto Animate. In questo esempio, le proprietà che cambierebbero sono larghezze, altezza e colore. Per qualsiasi transizione animata automatica, hai bisogno di più di due tavole da disegno.

Nella tavola da disegno iniziale, disegna una forma - nel nostro esempio, è un rettangolo verde di 500px x 200px. Duplica questa tavola da disegno e seleziona il rettangolo sulla seconda tavola da disegno. Dobbiamo modificare le proprietà del rettangolo aumentando la larghezza a 1000 e l'altezza a 500. È inoltre possibile eseguire ulteriori modifiche come il cambiamento dell'opacità al 50% o rendere il colore rosa.

Ora fai clic sulla scheda Prototipo nell'angolo in alto a sinistra. Seleziona la prima tavola da disegno e collegalo usando la freccia sulla seconda tavola da disegno. Quando lo fai, c'è una scheda Interazione sulla destra dell'app che può essere utilizzata per impostare i parametri come trigger, azione, destinazione e facilitare. Ogni parametro può essere personalizzato in base alle tue esigenze. Esistono cinque tipi di trigger - incluso il rubinetto, trascinare e cronometrato - che avrà inizio l'animazione.

Impostare la scheda Azione predefinita per Auto Animate e poiché ci sono solo due tavole da disegno nel nostro esempio, impostare la scheda Destinazione per la tavola da disegno 2. Ci sono anche più transizioni fluide che possono essere scelte e cronometrate. Clicca sull'icona PLAY in alto a destra per vedere Auto Animate Fai la sua magia e animare il rettangolo. Quando ci sono più di due elementi che devono essere modificati contemporaneamente, assicurati che i nomi di questi elementi siano gli stessi sia in cartongesso. Ciò informerà l'applicazione che questi due elementi devono essere animati.

Espandi le carte

Ora progrediamo ad un esempio con più interattività e uno che include più elementi. Iniziamo creando la prima tavola da disegno per questo, composta da una carta. La carta avrà elementi come un'intestazione, una descrizione e un collegamento nella cronologia della vista della lettura inferiore. Accanto al link, ci sarà un'icona di freccia rivolta verso il basso. Quando l'utente fa clic sul collegamento, la scheda si aprirà come un cassetto per mostrare le voci precedenti. Poiché ciò accade sulla funzione Click / TAP, le voci precedenti non devono essere create nella prima tavola da disegno.

Quindi, dupliamo questa tavola da disegno e cambiamo qualche proprietà della carta. La prima cosa da fare è aumentare l'altezza della carta rettangolare per farlo sembrare uno stato espanso. L'intestazione e la descrizione qui sotto dovrebbero essere invariati. Ora è il momento di aggiungere quelle voci che abbiamo menzionato prima.

Immagina che ci siano tre voci per la carta. Ogni voce ha un nome di ingresso, una data di immissione e un pulsante come mostrato nell'immagine principale. È possibile creare una voce e duplicata due volte per creare un gruppo di voci. Disporreli come mostrato nell'immagine principale e posiziona il link del testo della cronologia di vista sotto queste voci. Poiché è in uno stato espanso, ruotare l'icona della freccia in modo che sia rivolto verso l'alto. Questo è tutto. Hai completato la configurazione delle tavolette.

Per creare l'animazione, vai alla prima tavola da disegno e fare clic sulla scheda Prototipo dall'angolo in alto a sinistra. Ora fai clic sul collegamento della cronologia Visualizza sulla prima tavola da disegno e trascina il collegamento del prototipo nella seconda tavola da disegno. Questo rende la cronologia di vista che collega il trigger. Modificare le proprietà nella scheda Interazione a destra impostando il trigger per toccare e azione per animazione automatica. Provalo per vedere l'animazione di cassetti liscia. Apporta modifiche all'opzione di allentamento nella scheda Interazione Se trovi che l'animazione non è abbastanza liscia.

Fare animazioni di trascinamento

Trascina è una delle animazioni più comuni quando si tratta di interazioni mobili. Proviamo un semplice esempio con due cartoncini. Per la prima tavola da disegno, iniziare creando un cerchio di qualsiasi colore e dimensioni. Ora crea un rettangolo con una larghezza di 250 px e un'altezza di 25 px. Duplica questo rettangolo otto volte, mantenendo uno spazio di 20 px tra ogni duplicato, in modo che crea una pila. Posiziona il cerchio in cima al primo rettangolo prima di duplicare questa cartongesso.

Non c'è molto da fare per fare la seconda cartongesso. Basta ridurre il divario tra ciascuno dei rettangoli duplicati, quindi sembra che sia compresso. Simile alla prima tavola da disegno, posizionare il cerchio in cima al primo rettangolo. Il passo finale è quello di prototipare facendo clic sulla scheda Prototipo dall'angolo in alto a sinistra. Ora clicca sul cerchio dalla prima tavola da disegno e rendilo un trigger. Proprio come gli esempi precedenti, modificare le proprietà nella scheda Interazione a destra impostando il trigger per trascinare e azione per Auto Animate. Quando fai clic sul pulsante PLAY per visualizzare in anteprima l'animazione, sarai in grado di vedere un'azione fluida come se il blocco venga compresso dalla sfera.

Creare animazioni di caricatore infinito

Una delle migliori caratteristiche di Adobe XD è che Auto Animate può essere applicata tra multipli cartongesso. Per fare un'animazione del genere, devi solo fare semplici modifiche a una delle proprietà.

Creiamo un'animazione di caricamento in cui una batteria viene riempita. La chiave per ottenere questo perfetto è quello di creare correttamente la prima tavola da disegno. La prima tavola da disegno ha un segnaposto della batteria come mostrato nell'immagine. Può essere creato usando forme rettangolari. Per la batteria effettiva all'interno del segnaposto, la prima tavola da disegno dovrebbe essere vuota (che rappresenta lo 0%). Duplica questa tavola da disegno e crea un rettangolo verde con un'altezza 50px che si adatta perfettamente all'interno del segnaposto. Creare duplicati simili in modo che l'altezza della batteria nella terza tavola da disegno sia aumentata di 50 px e così via. Continua fino a quando la tavola da disegno è completamente riempita.

Ora dobbiamo creare un ciclo infinito tra queste tavolette in modo che crei un'animazione di caricamento sincrono. Per questo, vai alla modalità prototipo, fare clic sulla prima tavola da disegno e trascina la freccia del prototipo nella seconda tavola da disegno. Modificare le proprietà nel pannello di interazione, impostando il trigger in tempo e quindi impostare il ritardo su 0 secondi, che animerà alla seconda tavola da disegno quando viene visualizzato in anteprima. Esegui le stesse modifiche a tutte le tavolette, collegando il secondo al terzo e così via prima di collegare finalmente l'ultima tabacco alla fine al primo. Abbiamo collegato con successo tutte le tavole da disegno per formare un ciclo infinito. Modificare le impostazioni di allentamento e durata secondo il vostro requisito per rendere il caricamento più fluido.

Sebbene ci siano tonnellate di varianti che possono essere processate utilizzando Adobe XD, le funzionalità attuali dello strumento sono limitate e sono ancora aggiornate regolari dal team di sviluppo. Quindi, rispetto agli strumenti come il principio, potresti sentirsi come se XD abbia un set di strumenti ristretti. Tuttavia, Adobe ha fatto un ottimo lavoro per rendere lo strumento semplice da imparare e utilizzare. La creazione di interazioni complesse potrebbe richiedere un po 'di tempo e sforzi, ma sono totalmente raggiungibili utilizzando la funzione Auto Animate di XD. La chiave è capire le basi degli oggetti in movimento, ridimensionandoli, aggiungendo strati e utilizzando i trigger.

Questo articolo è originariamente apparso il problema 326 di netto , la rivista principale del mondo per web designer e sviluppatori. Acquistare Edizione 326. o Iscriviti qui .

Per saperne di più:

40 tutorial di wordpress brillanti
11 fantastici framework JavaScript
Il neumorfismo è davvero il trend più caldo del 2020?

Usa Adobe XD per creare micro interazioni

Effettua un cambiamento di stato usando Auto Animate

Espandi le carte

Fare animazioni di trascinamento

Creare animazioni di caricatore infinito

Come si fa - Articoli più popolari

Come animare con la libreria mo.js

Come creare una creatura fantasy super-realistica

Animazione svg con javascript

5 modi per aumentare il SEO del tuo sito web

Come aggiungere texture ai tuoi pastelli con i primer

Come creare le tue tavole di tela

Come master 3D fan art

Diventa creativo con ritratti e consapevoli di viso Liquefy

Categorie