Film.

Ma non è solo un software di grafica.

Manca un software di prototipazione.

Questo vuol dire che tutte le interfacce, le slide, gli elementi che creiamo possono essere resi interattivi.

Questo è comodo per tutta una serie di cose.

Puoi fare un'interfaccia un prodotto, una figura e testarla con un utente.

Puoi renderla interattiva per mostrarla.

Uno sviluppatore per trasmettere l'idea un project manager quello che vuoi, il concetto fondamentale che Fig ma può rendere in te tutto quello che crei.

Questo è forse la parte più pratica di tutto il corso e quindi la vedremo direttamente su Un'interfaccia per vedere i concetti fondamentali e cosa possiamo usare per rendere davvero interattiva la tua interfaccia sul film.

Per prima cosa entriamo in modalità prototipazione, quindi nella barra qua destra remiamo su prototipi.

Quando non ho selezionato nulla, vedo queste opzioni.

Vedo il device che posso utilizzare di default non, ma posso impostare i principali device disponibili o addirittura mettere delle custom.

Abbiamo poi il background che applicheremo al prototipo interattivo e tutti flow che abbiamo creato, che vedremo tra un secondo.

Qui ho preparato alcune schermate di un flusso immaginario per poter mettere subito in pratica tutte le interazioni che vogliamo inserire dentro i nostri mockup per iniziare, vediamolo al volo.

Abbiamo la schermata di prima con questa lista.

Quello che vogliamo fare è fare cover, coprire col mouse button, vederne l'effetto e andare in questo flusso di importazione di un database.

Vogliamo trascinare questo file dentro questo elemento ti drag drop e nel momento in cui viene fatto partire, concludere il flusso ritornando alla schermata principale.

Dopodiché vogliamo fare altre due cose.

Vogliamo mostrare una per lei che mi chiede conferma se voglio annullare davvero questa azione.

Infine nascondere questa azione.

Partiamo dal principio creando un flow seleziona il fram da cui voglio partire é qua in flight starting point aggiungiamo un punto.

Possiamo nominarlo? Chiamiamolo prototipi.

Dopo, quando faremo partire un prototipo con il tasto play presenta Quello che succede è che partiremo proprio da questo ramo.

Andiamo poi avanti Prototipi Pando.

La prima cosa, se ricordate bene, è prendere questo bottone e farlo interagire con il mouse all' over.

Selezioniamo questo elemento che è quello su cui vogliamo aggiungere un'interazione é la creiamo trascinando da questo pulsantino più cosa vogliamo che succeda qua? Vediamo tutte le impostazioni che possiamo applicare.

Non vogliamo che l'effetto sia il click, ma vogliamo che sia Wondering mentre sto coprendo quell'elemento.

Voglio che l'animazione sia istantanea.

Vediamo subito l'effetto premendo play vedete il pulsante? Questo modo reagisce quando lo copro.

Abbiamo poi un'interazione piu' semplice che possiamo impostare ed è quella un click.

Vogliamo che una volta che clicchiamo su questo pulsante, che è quello che vediamo quando copriamo primo mandati nella schermata successiva.

Quindi qua Monclick animazione istantanea in questo punto qua.

Dopodiché vogliamo poter trascinare questo elemento a destra.

Quello che facciamo in questo caso è creare due coppie dello stesso frame in modo da mostrare lo stato di partenza e lo stato di arrivo.

Selezioniamo ancora una volta l'elemento che vogliamo rendere inter agibile.

Si'.

Lo colleghiamo al frame che ci interessa.

Ok, cosa impostiamo qua? Preme Remo su un click.

Selezioneremo on drugs durante il trascinamento.

É l'effetto che otterremo.

È questo il primo è per ricominciare.

Posso trascinare L'elemento dal punto iniziale al punto finale.

Abbiamo poi un altro effetto fondamentale che possiamo applicare una volta che arrivo qua.

Non voglio rimanere bloccato in questo punto, ma quello che voglio è che si passi direttamente allo stato successivo.

Quello che possiamo fare qui è selezionare L'intero fra me applicare un'interazione questa volta non sarà un click on drug o attraverso un'altra interazione dell'utente, ma sarà fuori di lei automatico.

In questo caso selezioniamo un millisecondo per renderlo istantaneo.

É l'effetto che otterremo è questo una volta iniziata l'animazione quando arrivo qui e mollo il cursore, entrerò nella seconda schermata automaticamente passero' alla terza ora Rilascio l'immagine click va subito in questa in questa modalità qui abbiamo poi gli ultimi due punti fondamentali.

Quindi colleghiamo al volo questo pulsante un semplice click e vediamo per lei smart.

Per quanto riguarda gli over lei quello che possiamo ottenere questo abbiamo un modale fram separato che non sta dentro un mock-up che vogliamo inserire nel nostro prototipo interattivo mostrandolo come uno per lei, soprattutto il resto.

In questo caso l'elemento che vediamo è un modale che ci chiede conferma di un'azione.

Quindi sto importando questo documento.

Questo file é sempre ma nulla prima di annullare per tutto quanto ti chiedo conferma di quello che stai facendo.

L'elemento con cui interagisco è questo pulsante qua a nulla.

Quindi partirò.

Questo lo trascino su modal l'elemento verso cui voglio creare un'interazione Da qua selezione rough on click e cambiero' navigato con per lei o per me o per lei.

Apre questo elemento in overlay sopra il resto ho anche delle opzioni aggiuntive.

Posso decidere dove questo viene posizionato lasciero' set se l'elemento viene chiuso oppure no.

Se clicco all'infuori di questo Se aggiungere un background sotto lo per lei quello che succede in questo caso è quello che vediamo qua nel momento in cui saremo a nulla.

Questo elemento viene posizionato in centro come per lei con una opacità sotto.

In più, se premo fuori questo si chiude in automatico.

Ci sono un altro paio di cose da dire su per lei e che posso applicare ha degli elementi un'azione In questo caso raggiungeremo da qua click lo uso per lei stessa cosa qua In questo caso abbiamo due elementi che fanno un'azione.

In questo caso chiudono per lei a nulla e questa X.

Ma possiamo fare anche operazioni più complesse.

Se abbiamo per esempio piu' modali, possiamo strappare lover lei e anche qua l'unico limite che abbiamo nella nostra fantasia l'ultimo.

Concetto fondamentale che voglio mostrarvi è lo smart.

Se io da questa schermata voglio andare a quella successiva, ho vari modi in cui posso animare.

Ci sono tutti i modi classici che non hanno bisogno di spiegazione.

Abbiamo l'animazione istantanea, dissolvenza, move out, i soliti classici movimenti.

Ma quello più importante è smart.

È una particolarità di Fig.

Ma é quello che fa è muovere in modo automatico intelligente.

Gli elementi che ho in questo caso l'effetto che voglio ottenere è di vedere questo elemento che esce uscendo verso il basso.

E come facciamo allora quest'uomo cap dopo questo elemento continua il background coppia incolla vedete ora questi due blocchi questi due tram hanno lo stesso elemento, però qua qua lo abbasso, lo abbasso in modo da averlo sempre dentro l'interfaccia ma in un'altra posizione l'ultima cosa da fare per chiudere questo effetto è impostare come interazione after direi vogliamo che questa azione parta dopo.

Dopo un paio di secondi automaticamente segniamo duemila millisecondi.

In questo modo l'effetto che poi otteniamo è questo premiamo avanti, vediamo questo elemento e dopo due secondi sparisce muovendosi cioè un ultimo punto che vogliamo portarci a casa e sono piu'.

Li abbiamo già accennato All'inizio quando abbiamo creato questo piccolo ping l'auto blu prototipo.

Lo vediamo qua dentro, Flow.

E sono i punti in cui possiamo entrare dentro il prototipo.

Se torniamo al prototipo di prima e apriamo il menu qua a sinistra.

Vedete, trovo la stessa dicitura.

In questo caso è semplice potremmo averne solo uno, ma in molti casi quello che ci interessa avere più punti di entrata per flussi diversi o punti diversi.

Per esempio, potremmo voler fare un'animazione particolarmente complessa aggiungerla in questo punto e non dovere ogni volta ripartire dall'inizio e quindi può esserci comodo inserire l'inizio di un flusso proprio qui.

Oppure potremmo avere una funzionalità molto ampia di un prodotto e voler avere piu' punti di ingresso per creare un punto d'ingresso.

Ricordiamocelo, selezioniamo iframe aggiungiamo starting point.

Possiamo dare un nome Flow due e se non ho selezionato nulla, vedrò tutti i blu che ho definito dentro questa pagina sotto Flow.

Posso andare direttamente dentro il fram? Posso copiare il link a quel punto del flow, oppure posso presentare direttamente di quel flusso che sto selezionando L'esempio che abbiamo appena visto è su un mock-up su un pezzo di interfaccia, ma possiamo davvero fare quello che vogliamo.

Molte persone usano prot taiping per creare delle said semplici una dopo l'altra da vedere attraverso le frecce, ma anche animate, usando smart o altri elementi in questo modo lo abbiamo visto come prototipi.

Pare come aggiungere delle interazioni ai nostri mockup ai nostri prototipi.

Ogni elemento può avere un'interazione con un trigger.

Cosa fa partire Dell'animazione? Possiamo per esempio avere Will Bring come nel primo esempio possiamo vedere un semplice click come nel secondo o far partire tutto in automatico, come in questo caso.

Abbiamo un poi l'azione l'effetto che vogliamo ottenere.

Possiamo navigare in un'altra schermata, possiamo aprire una per lei, eccetera.

Abbiamo infine un'ultima, cosa che dobbiamo impostare e l'animazione che vogliamo questa interazione abbia può essere istantanea a dissolvenza smart o quello che preferisci tu.