Prototipa facilmente: un tutorial di InVision Studio

A meno che tu non abbia dormito per la prima metà del 2018, probabilmente eri perfettamente consapevole della febbrile attesa nella comunità del design interattivo che ha portato al rilascio dell'app InVision Studio. InVision è meglio conosciuto per le suite di plug-in Sketch e Photoshop come Craft e per essere la piattaforma di riferimento per trasformare rapidamente i progetti di interfacce statiche in prototipi cliccabili e condivisibili. Con un passo coraggioso lo scorso anno, hanno annunciato lo sviluppo del proprio software di progettazione digitale per competere con i favoriti del settore come Sketch e Figma.

Il prodotto è stato pubblicizzato come rivoluzionario e ha fatto alcune importanti promesse per un flusso di lavoro senza interruzioni dal design al prototipo, funzionalità di interazione complessa, animazioni di transizione mozzafiato e sarebbe gratuito. InVision ha pubblicato alcuni video teaser e demo piuttosto eccitanti per stimolare i designer. Le aspettative sono aumentate ulteriormente quando la versione beta iniziale è stata respinta più di un paio di volte all'inizio dell'anno.

Man mano che sempre più designer hanno iniziato a giocare con il software, stanno spuntando sempre più tutorial e guide per dimostrare le basi dello strumento di progettazione dell'interfaccia dell'app. InVision ne ha anche creati alcuni per integrare gli utenti nelle nozioni di base di InVision Studio.

Anche se le versioni ad accesso anticipato stanno ricevendo recensioni contrastanti, Studio ha alcune funzionalità interessanti e molto potenziale. Questo tutorial ha lo scopo di guidare i primi utenti attraverso le basi della prototipazione di InVision Studio e aggiungere alcune animazioni di prototipi di base.

Crea un prototipo interattivo con transizioni animate fluide in un batter d'occhio seguendo questo tutorial di InVision Studio!

Il tour del nichel dell'area di lavoro di InVision Studio

Gran parte di Studio dovrebbe essere familiare ai progettisti dell'interfaccia utente e a chiunque abbia utilizzato software di progettazione digitale come Sketch. Gran parte dell'area di lavoro prende in prestito spunti dall'interfaccia utente di Sketch, con il pannello laterale sinistro che ospita pagine, livelli e gruppi; il pannello laterale destro per gli ispettori; e una barra degli strumenti contestuale lungo la parte superiore.

Troverai anche molti degli stessi strumenti, anche se alcune funzionalità hanno nomi diversi. Ad esempio, un "simbolo" di Sketch è chiamato componente in Studio.

Il pannello delle interazioni

Ai fini di questo tutorial, ci concentreremo sull'utilizzo degli strumenti di interazione per creare hotspot interattivi tra gli schermi e creare transizioni fluide tra di loro. Gran parte della magia accadrà nel "pannello delle interazioni" sul lato destro dell'area di lavoro di Studio.

Il modo semplice per creare interazioni è selezionare un livello o un gruppo di trigger e premere "c" sulla tastiera (o fare clic sull'icona del fulmine nella barra degli strumenti in alto), che avvia un piccone blu con cui selezionare una schermata di destinazione. Studio chiederà quindi al progettista di selezionare il gesto o l'input dell'utente che attiva l'evento e di scegliere tra una serie di transizioni preimpostate o una transizione di "movimento".

Animazione di InVision Studio

Ci sono molti elementi per un ottimo design dell'interazione, ma l'uso corretto di transizioni animate e microinterazioni in un'interfaccia utente è più di un semplice allestimento di vetrine.

Migliorano l'usabilità e possono fare la differenza tra un prodotto amato e un pasticcio confuso.

In questo tutorial, utilizziamo una combinazione di transizioni preimpostate e transizioni di movimento per creare il nostro prototipo di app. Le transizioni preimpostate sono abbastanza semplici e risulteranno familiari agli utenti della piattaforma prototipo online InVision.

Le regole che regolano il funzionamento delle transizioni di movimento tra gli schermi sono un po' più misteriose. Sebbene ci siano molte ovvie considerazioni di progettazione prese in considerazione nella creazione dello strumento, ad esempio il collegamento automatico di elementi tra gli schermi, sono necessari alcuni tentativi ed errori per ottenere determinati effetti quando si aggiunge movimento alle transizioni. Si spera che questo tutorial aiuti i designer a sentirsi un po' più a loro agio sperimentando ciò che InVision Studio ha da offrire.

Cose da tenere a mente

Studio promette molte funzionalità intelligenti intorno alle animazioni. Ad esempio, può creare transizioni di movimento tra oggetti duplicati da una tavola da disegno a un'altra quando connessi tramite un'interazione. I designer possono quindi modificare queste animazioni come desiderato per ottenere alcuni effetti di allentamento e di movimento meravigliosi. Imparare le eccentricità di come funziona quando si tenta di trasferire una pila di oggetti in una sequenza specifica può richiedere pazienza e un po' di pratica.

Le transizioni di movimento funzionano meglio con oggetti su tavole da disegno che sono stati duplicati l'uno dall'altro. La funzione di animazione è "intelligente" in quanto riconosce gli oggetti duplicati con gli stessi nomi di livello, quindi fai attenzione a non rimuovere o rinominare i livelli chiave tra le schermate (che è un modo frustrantemente semplice per rovinare un'ottima animazione).

Tieni presente che Studio è ancora agli inizi, quindi i designer dovrebbero essere preparati a incontrare una buona dose di bug. Ad esempio, il pulsante "anteprima" lancia un'anteprima interattiva del prototipo, ma a volte le interazioni non si attivano affatto, nel qual caso sarà necessario salvare e riaprire il file.

Durante l'apprendimento del software, più di un file sembrava corrompersi in modo strano, eliminando tutte le tavole da disegno e rendendo inaccessibili tutti i pannelli degli strumenti. Ho segnalato il bug e ho imparato a salvare più versioni dei miei file per non perdere troppo lavoro.

Infine, è sempre utile essere organizzati. Quando crei un prototipo su qualsiasi piattaforma, che si tratti di Studio, Sketch o Marvel, tenere traccia degli oggetti e delle etichette dei livelli ti farà risparmiare tempo e frustrazione, soprattutto se stai lavorando con un team o se a un certo punto stai consegnando il file. Prendere nota dell'ordine dei livelli e dei gruppi di livelli durante la creazione di interazioni; questo spesso fa una grande differenza nel raggiungimento dell'effetto di animazione desiderato.

Il tutorial!

Cominciamo! Se non l'hai già fatto, vai su InVision Studio per scaricare una versione ad accesso anticipato dell'app Studio. Dopo aver installato InVision Studio sul computer, scaricare i file del tutorial qui. Una volta avviato il software Studio, scegli di aprire il file dal punto in cui lo hai salvato.

Passaggio 1: apri il file e dai un'occhiata

Questo prototipo interattivo sarà per un'app mobile sugli artisti moderni dalla fine del XIX all'inizio del XX secolo. Tutti gli schermi sono stati creati in anticipo utilizzando un'attenta duplicazione della tavola da disegno, necessaria per un uso corretto della funzione di transizione del movimento.

La gerarchia ha 3 livelli di profondità, a partire da "Casa", poi nella biografia di ogni singolo artista e infine fino a un carosello di quattro esempi del lavoro dell'artista. Noterai che la tavola da disegno "Home" ha una piccola icona di una casa, che designa la tavola da disegno iniziale per il prototipo.

Il tutorial si concentrerà sulla creazione di semplici percorsi di navigazione che collegano questi tre livelli di profondità. Utilizzeremo gli strumenti di interazione e transizione di Studio per far sembrare il prototipo un'app adeguatamente interattiva.

Passaggio 2: collega la tessera dell'artista alla biografia dell'artista

Vai alla prima tavola da disegno. Prenditi un momento per espandere il gruppo di livelli "Tessere artista 1". Noterai tre gruppi nidificati: uno per il nome dell'artista, uno per un'immagine in primo piano e un terzo livello contenente "Testo bio".

Osservando la schermata della tavola da disegno, il terzo gruppo di livelli non è immediatamente visibile a causa del modo in cui Studio gestisce le transizioni di movimento, a cui arriveremo tra poco. Basta prenderne nota per ora.

Seleziona il gruppo di livelli contenente tutti questi elementi: "Tessere artista 1". Con questo gruppo selezionato, premi "c" sulla tastiera (o fai clic sull'icona del fulmine nella barra degli strumenti in alto) per avviare lo strumento di interazione. Il tuo cursore sarà seguito da una frusta blu per scegliere la schermata di destinazione per la tua interazione.

Seleziona la tavola da disegno immediatamente a destra intitolata "Biografia dell'artista 1" e ti verrà chiesto di scegliere il trigger e il tipo di transizione. Per il trigger, scegli "Tocca", quindi scegli "Movimento" come transizione. È quindi possibile scegliere la durata della transizione. Impostiamo questa transizione su 2 secondi e premiamo "Salva".

Fare clic sul pulsante di riproduzione per visualizzare in anteprima il prototipo. Hai visto il modo in cui le cose si muovono lungo lo schermo e come il livello bio è scivolato verso il basso da sotto l'immagine? Congratulazioni: hai creato una transizione di interazione piuttosto fluida!

Passaggio 3: collega un pulsante Indietro alla schermata principale

Ora dovremmo dare agli utenti un modo per tornare alla schermata iniziale. Vai alla tavola da disegno "Artist Bio 1" e seleziona il componente "btn_back" nell'angolo in alto a sinistra. Crea un trigger qui premendo "c" e selezionando la tavola da disegno "Home".

Ancora una volta, impostiamo il trigger su "Tocca", l'interazione su "Movimento" e la durata su 2 secondi. Fai clic su Anteprima e divertiti con le transizioni di apertura e chiusura che hai appena creato. Nota come l'animazione attivata dalla chiusura del riquadro è un'inversione dell'animazione riprodotta all'apertura del riquadro.

Passaggio 4: collega la galleria

Se stai prendendo nota dei nomi dei livelli nella prima e nella seconda tavola da disegno, potresti notare che sono identici. Questo perché, come accennato in precedenza, le animazioni di Studio collegano automaticamente i livelli duplicati da una tavola da disegno all'altra se condividono un nome. La modifica del nome di questi livelli interromperà il collegamento all'animazione e la transizione verrà impostata su una semplice dissolvenza, particolarmente impegnativa per chi è ossessionato da etichette di livello significative.

Vogliamo applicare un'altra transizione di movimento ordinata per aprire la galleria di immagini del carosello. La tavola da disegno intitolata "Artista 1 - Immagine 1" contiene elementi duplicati dalla tavola da disegno "Biografia artista 1", ridimensionata per mostrare più immagini di esempio.

Inizia facendo clic sul livello "Biografia artista 1" per selezionare il gruppo "Immagine in primo piano". Questo sarà il trigger per l'apertura della galleria. Crea un'interazione "Tocca" qui collegandoti alla prima tavola da disegno nella galleria e seleziona "Movimento". Questa volta, imposta la durata in modo che sia un po' più veloce: 1 secondo.

Per creare una bella transizione per chiudere la galleria, seleziona semplicemente il livello del pulsante di chiusura nella tavola da disegno "Artista 1 - Immagine 1" e ricollegalo alla tavola da disegno "Artista Bio 1", con le stesse impostazioni di prima.

Visualizza in anteprima questa animazione e ammira come il prototipo passa dalla schermata biografica dell'artista al carosello di immagini e viceversa. Ora abbiamo collegato la navigazione attraverso tre livelli della gerarchia della nostra app!

Passaggio 5: collega tutte le immagini della galleria

Abbiamo eseguito la maggior parte delle transizioni di movimento che dovremo fare e ora inizieremo a utilizzare alcuni dei predefiniti di animazione per il resto della galleria.

Il modello di interazione qui per il nostro utente per sfogliare questo carosello di immagini sarà un familiare gesto di scorrimento. La buona notizia è che quest'ultima parte è piuttosto semplice e non richiederà molto tempo utilizzando i preset di animazione di Studio.

Seleziona la tavola da disegno "Artista 1 - Immagine 1" e crea un'interazione che porta alla tavola da disegno successiva, "Artista 1 - Immagine 2". Questa volta, imposta il grilletto su "Scorri a sinistra". Per la transizione, seleziona "Preset" e scegli "Push Left" dal menu a discesa.

Per creare un'interazione inversa, seleziona la tavola da disegno "Artista 1 - Immagine 2" e collegala alla tavola da disegno precedente, solo questa volta utilizzando un gesto "Scorri a destra" e una transizione "Spingi a destra".

Ripeti questo schema con le prossime tavole da disegno, collegando le tavole da disegno per l'immagine 2 all'immagine 3 e l'immagine 3 all'immagine 4. Facile!

Per renderlo ancora più realistico, chiudiamo il ciclo tra l'immagine 1 e l'immagine 4. Seleziona la tavola da disegno per l'immagine 4 e collegala all'immagine 1. Scegli un trigger "Scorri a sinistra" e una transizione "Spingi a sinistra" proprio come faresti per il immagine successiva di una serie. Collega la tavola da disegno dell'immagine 1 all'immagine 4 con il rovescio e presto: hai creato una galleria in loop!

Infine, seleziona ciascuno dei componenti "btn_close" nelle tavole da disegno della galleria di immagini e collegali nuovamente alla tavola da disegno bio. Puoi scegliere la transizione che preferisci qui, ma io sono andato con "Push Right".

Ormai hai un percorso di navigazione abbastanza ben sequenziato da sfoggiare. Fai clic su Anteprima e provalo; il tuo prototipo dovrebbe funzionare molto come la gif all'inizio di questo tutorial. Datti una meritata pacca sulla spalla.

Passaggio 6: ripetere

Ora che hai collegato tutte le schermate per il primo esempio dell'artista con interazioni slick, ripeti i passaggi per le altre due serie di schermate nel file tutorial. Sono organizzati in modo simile e sarà una buona pratica per abituarsi al modo in cui lavora Studio.

Prossimi passi

Si spera che questo tutorial abbia fornito un'introduzione ad alcune delle fantastiche funzionalità della prototipazione di InVision Studio. Mentre impari a usare Studio, dovresti provare a modificare le transizioni usando gli strumenti di animazione avanzati. Sperimenta con gli altri strumenti nell'area di lavoro e prova a seguire altri tutorial di InVision Studio disponibili. Con la pratica, puoi diventare uno dei guru del design di InVision Studio in prima linea.

Potresti aver riscontrato alcuni bug o comportamenti imprevisti lungo il percorso, ma questa è la natura del provare un nuovo software. Le persone di InVision sono state molto reattive ai feedback e continueranno sicuramente a migliorare Studio, rendendolo sempre più stabile e utile.

Studio è uno strumento divertente da provare e non c'è motivo per non sperimentare uno strumento gratuito di prototipazione di app. Anche se non è probabile che sostituisca software di riferimento come Sketch nella comunità di design di oggi, ha molto potenziale.

Ulteriori letture sul blog di Toptal Design:

• Perfeziona il tuo processo di progettazione UX: una guida alla progettazione di prototipi
• Il potere di Figma come strumento di progettazione
• Prototipazione con dati reali: un tutorial per corniciaio
• La guida fondamentale all'usabilità mobile
• Best practice ed errori per la progettazione di app mobili