Le Cronache di Adobe XD: il prototipo, gli asset e l’artboard — Volume 2
Le magiche avventure del software di Adobe ambientate nelle Terre di UI e UX
Introduzione
Adobe XD è il software di casa Adobe per la progettazione di UI/UX, basato su vettori e incluso nella Creative Cloud (CC) oltre ad avere un piano Free (Starter).
Il payoff all’avvio dell’applicazione è chiaro:
Design. Prototype. Share.
Progetta. Prototipa. Condividi.
Proprio da questo payoff inizia la panoramica sulle funzionalità di Adobe XD. Diretto seguito del “volume 1” sulla progettazione (link da inserire), questo “volume 2” tratterà quindi la fase di prototipazione. Seguirà quindi il “volume 3” sulla condivisione.
Prototipazione
Dopo aver visto la sezione Design, dove ci sono tutti gli strumenti per la progettazione, possiamo passare alla modalità Prototype (prototipazione). Qui è possibile creare quindi prototipi interattivi utilizzabili da utenti.
È possibile, in questa fase, impostare una schermata Home, ovvero la prima schermata visibile in fase di navigazione. Selezionando quindi una tavola (ricordo che comparirà un bordo blu se selezionata) potete visualizzare un “flag” con l’icona di una home: al click diventerà azzurro e ciò indicherà che quella pagina è stata impostata come home.
Al click sull’oggetto quindi si abiliterà sulla destra la barra contestuale (Ispezione proprietà) che in questa modalità ha cambiato funzione, ovvero serve a gestire le interazione tra oggetti e/o tavole (Interaction).
Qui è possibile gestire:
- il trigger: scegliere con quale modalità è possibile azionare l’interazione, con Tap (quindi un click), Drag (trascinamento), Time (settando un tempo dopo il quale l’interazione avviene automaticamente), Keys & Gamepad (impostando uno specifico tasto da tastiera o da controller da gaming), Voice (con un comando vocale);
- il tipo di azione (Action > Type): scegliere con quale tipo di azione si genera l’interazione, con Transition, Auto-Animate, Overlay, Previous Artboard, Audio Playback e Speech Playback (che spiegherò in un paragrafo dedicato);
- la destinazione dell’interazione (Destination): scegliere su quale tavola o su quale stato di un componente deve concludersi l’interazione (vedremo la differenza tra collegare tavole e componenti in un paragrafo dedicato);
- l’animazione (Animation): scegliere tra None (nessuna), Dissolve (dissolvenza), Slide Left, Slide Right, Slide Up, Slide Down, Push Left, Push Right, Push Up e Push Down;
- l’attenuazione di transizione (Easing): scegliere il tipo di attenuazione da dare all’animazione dell’interazione (None, Ease In, Ease Out, Ease In-Out, Snap, Wind Up, Bounce);
- la durata dell’effetto (Duration): scegliere la durata (0.2 s, 0.4 s, 0.6 s, 0.8 s, 1 s o personalizzata);
- le azioni audio: scegliere il tipo di azione audio (None, Audio Playback, Speech Playback) e il relativo file audio da collegare.
Le interazioni
Come detto precedentemente, esistono diversi tipi di azioni che generano un’interazione. Selezionare un trigger ovviamente è fondamentale per creare un’interazione. Di seguito vedrete le interazioni tramite il trigger Tap (tocco), ma ovviamente ogni trigger ha una sua peculiarità, come ad esempio Time che ha la caratteristica di generare automaticamente un’interazione dato un parametro variabile in secondi.
Transition (transizione)
Il tipo di azione Transizione (Transition) permette di creare una transizione tra 2 tavole, scegliendo una delle animazioni disponibili:
- None (nessuna): è possibile non selezionare nessuna animazione;
- Dissolve (dissolvenza): è possibile scegliere un’animazione di dissolvenza incrociata tra le 2 tavole;
- Slide Left, Slide Right, Slide Up, Slide Down: è possibile scegliere un’animazione di sovrapposizione della seconda tavola (quella di destinazione) sopra la prima (quella d’origine) scorrendo da 4 punti (sinistra, destra, sopra, sotto);
- Push Left, Push Right, Push Up, Push Down: è possibile scegliere un’animazione di sostituzione della seconda tavola (quella di destinazione) sopra la prima (quella d’origine) scorrendo da 4 punti (sinistra, destra, sopra, sotto).
Auto-animate (auto-animazione)
L’azione Auto-Animate ha bisogno innanzitutto di un’informazione propedeutica prima di essere utilizzata: per generare un’animazione automatica correttamente bisogna che l’oggetto, il gruppo o il componente della tavola di destinazione sia lo stesso di quello di origine e che quindi siano nominati anche allo stesso modo. In questo modo XD riconosce che è il medesimo elemento a modificarsi da tavola A a tavola B e questo permette di generare un’animazione dinamica con un solo click, in primis senza doverla gestire per forza da un software esterno e, in secundis, senza dover gestire ogni singolo elemento in caso di gruppi o componenti complessi. Come vedrete dalla gif sopra, i due componenti sono esattamente uguali e l’auto-animate riconosce lo spostamento delle scritte di modo da portarle da punto A a punto B automaticamente. Questo tipo di azione apre a molte possibilità di creare interazioni animate anche molto complesse.
Overlay (sovrapposizione)
L’azione Overlay invece permette di sovrapporre la tavola, l’oggetto, il gruppo o il componente di destinazione sopra la tavola d’origine. L’oggetto acquisterà un colore verde (linea e tasto verde di trascinamento) di modo da essere riconosciuto come elemento sovrapposto alla tavola. Nella gif sopra ho deciso di sovrapporre l’intera tavola B sulla tavola A, inserendo un’interazione sulla tavola stessa (cliccando il nome della tavola (A) e + nell’ispezione proprietà dell’interazione): così la tavola sovrapposta combacia esattamente con quella di origine, senza bisogno di spostamenti, e al Tap (in questo caso) appare il balloon “Read More” sopra “Volume 2”.
Previous Artboard
Quest’azione imposta automaticamente la tavola di destinazione a quella precedentemente visitata.
Audio Playback
Quest’azione permette di riprodurre, data un’interazione, un file audio.
Speech Playback
Quest’azione permette di riprodurre, data un’interazione, un testo scritto tramite un preset vocale.
Scroll To
Un’azione che è presente solo se si seleziona un oggetto, oltre a quelle elencate, è Scroll To che permette, al click di quell’elemento, di “scrollare” fino ad altro elemento della tavola.
Gli stati di un componente
Le azioni elencate sopra permettono di creare interazioni tra tavole, collegando 2 tavole, un oggetto e una tavola, un gruppo di oggetti e una tavola, un componente e una tavola. Ma possono esistere interazioni anche all’interno del componente stesso, collegando quindi i suoi stati. Sopra, nella gif, potete vedere 3 stati su un componente, Default State, Hover State e Menu: il primo è lo stato di partenza del componente (in questo caso l’oggetto rettangolare con bordi arrotondati e l’elemento text “Il prototipo, gli asset e l’artboard”); il secondo è lo stato di “passaggio”, ossia appunto quando il cursore capita sul componente senza interagirci; il terzo è uno stato personalizzato che ho nominato “Menu” nel quale quell’oggetto si allunga mostrando più elementi. Quindi sul Default State ho aggiunto 2 interazioni, un Tap e un Hover, mentre sul terzo stato solo un Tap di ritorno allo stato di Default. Tutto gestito con un Auto-animate dato che c’è un componente.
L’anteprima
Una volta terminata la prototipazione, in alto a destra dell’interfaccia è possibile trovare un tasto “play” che consente di iniziare l’anteprima del mockup navigabile.
Questa quindi è una panoramica della sezione Prototype, dei relativi strumenti, entità e funzionalità. Nel prossimo e ultimo volume vedremo insieme la fase di condivisione (Share).
Guida completa
Le Cronache di Adobe XD — il prototipo, gli asset e l’artboard | Vol 1
Le Cronache di Adobe XD — il prototipo, gli asset e l’artboard | Vol 2 (tu sei qui!)
Le Cronache di Adobe XD — il prototipo, gli asset e l’artboard | Vol 3
Aggiornamenti
Adobe XD viene aggiornato in media una volta al mese, con fix e nuove funzionalità. Consiglio di verificare al link di seguito, così da rimanere aggiornati.
Learning e tutorial
Adobe ha sempre affermato fortemente, con la comunicazione e gli eventi che la creatività è per tutti. Per questo motivo mette sempre a disposizione dei corsi e tutorial dei proprio software, organizza live event in cui sono coinvolti artisti e Adobe Evangelist su Behance e dà un supporto proattivo sui propri forum. Qui trovate link utili approfondire Adobe XD.
Tutorial
Video e risorse
Forum & community
Live event & performance
Canale Youtube del Senior Adobe Evangelist di XD
Curiosità e utility
Usare gli shortcut, come i miei guru mi hanno insegnato, è un atto prezioso, quasi sacro! Non solo perchè si risparmia tempo (appunto “taglio corto”) ma soprattutto perchè in questo modo la tastiera diventa quasi uno “strumento musicale”: le combinazioni di tasti generano armonia e ritmo al flusso di lavoro. Per questo, consiglio vivamente di utilizzarli sempre perchè diventino una convenzione quotidiana per chi lavora con un software. Qui un bellissimo tool, creato da Andrew Schmelyun, che si chiama Use The Keyboard e che permette di sapere le shortcut di qualsiasi (o quasi) software. Qui il link a quelle di Adobe XD:
