Ok, abbiamo portato a casa il nostro prototipo click.

Dammi quindi semplicemente che cliccando colleghiamo una parte all'altra del nostro del nostro design, possiamo ulteriormente portare ad un passo più avanti la parte di prototipazione grazie a quelli che in Fig.

Ma vengono chiamati gli Interactive components.

Perché quello che dobbiamo pensare che il prototipo non è semplicemente collegare da una parte all'altra altre parti del nostro sito web della nostra applicazione.

Ma anche iniziare a pensare realmente in modo interattivo e interattivo vuol dire fare in modo che ogni elemento all'interno della nostra pagina sia vivo, sia appunto inter agibile con il quale possiamo interagire.

E la prima cosa che mi viene in mente quando penso all'interazione e fare in modo anche quando noi iniziamo a progettare i pulsanti che sono quasi sempre l'atomo più piccolo della nostra progettazione all'interno della High li rendiamo realmente interattivi che hanno visualizzazioni, hanno, diciamo, un aspetto diverso a seconda del trigger dello stato in cui mi trovo.

Se sono al rollover, magari si comportano in un modo, se presto si comportano in un altro, sono tutti ulteriori feedback che noi diamo ai nostri utenti quando navighiamo.

E questo è importante anche qui sempre per dare dei riferimenti delle referenze allo sviluppo, ma anche, ovviamente, per immaginare il prodotto digitale sempre più vivo.

Come progettisti di user interface, non possiamo limitarci a disegnare un pulsante fine, ma dobbiamo pensare questo pulsante e tutti gli altri elementi all'interno dell'interfaccia nella loro naturale evoluzione all'interno di nachos ecosistema dinamico e interattivo.

Quindi, quando progettiamo un pulsante non progettiamo piu' un pulsante, ma progettiamo tutti gli Stati che pensiamo possano essere utili per dare un feedback al nostro utente.

Quindi come lo realizziamo su figa? In maniera molto semplice.

Croce vediamo sempre partendo da un componente come l'abbiamo realizzato nei moduli precedenti.

Noi creiamo il nostro oggetto con la troia out.

Lo andiamo a definire come componente tramite la parte alta della nostra interfaccia.

Una volta fatto questo, noi andiamo a creare quella che in gergo viene chiamata una variante, vale a dire Ok, questo è il pulsante base, quello che noi potremmo definire lo stato di default.

Ma che succede quando ci vado sopra? Che succede quando presso li creo tutte delle varianti che sono utili? Ripeto sempre sia per lo sviluppo, ma anche per capire come L'interfaccia si comporterà nella sua naturale evoluzione come crea una variante.

Una volta selezionato un componente, vado nella palette di destra e vedete che dato che lui legge che c' è un componente che può essere variabili zato, vado su variante clicco su più a questo punto che cosa succede? Viene creata questa piccola cornice di tratteggio viola che sta ad indicare che adesso abbiamo un gruppo di pulsanti che sono connessi l'uno all'altro da appunto delle variazioni.

Vedete che cosa succede? Che nel momento in cui vado ad aggiungere una variante è quello che succede è che mi viene subito attribuito una proprietà é un nome della variante io vado a dargli.

In questo caso sto lavorando sul concetto di interazione del pulsante.

Posso stabilire che per esempio questa seconda variazione è lo stato over per me se non mi piace la il valore property uno magari gli do quello che per me è il riferimento in quel momento, cioè lo status.

Ovviamente questa modifica si riflette a cascata anche sull' oggetto precedente la ball diventa status qui, per esempio è in automatico diventato enabled quindici è attivo quando il pulsante è pronto per funzionare.

Quindi guardate che cosa ho fatto.

Ho un unico diciamo un unico componente che però tiene dentro due varie avanti di stato.

Quella attiva è quella in stato over chiaramente adesso e nessuno vedrebbe la differenza, perché lo stato ora è identico allo stato diciamo è attivo.

Ma quello che faccio adesso andare a selezionare il secondo pulsante lo vado a modificare la nella sua cella, sovrascrittura delle sue caratteristiche.

Non vado a distruggere, diciamo l'elemento, ma sempre specialmente gli dico invece di avere questa questo stile di colore gli vada a dare lo stile green per la parte di background e la faccio per la parte magari di testo il testo non è più questo giallino chiaro, ma gli vado a dire che questo darko ottocento la faccio per la freccia che si trova all'interno.

Ecco qui che ho creato la variante over.

Ora chiaramente però queste diciamo variante esiste solo come variante da mettere in pagina.

Ma questi due oggetti non sono collegati tra di loro.

Che cosa vuol dire? Vuol dire che se io adesso vado all'interno della mia pagina web vado a cercare i miei asset e vado, per esempio ammettere la call to action che ho appena sviluppato.

Mettiamola qui così si vede meglio quello che ho ottenuto creando questa variante è che qui, oltre ad avere il collegamento con l' oggetto originale o la possibilità di fare lo switch tra queste due variazioni, però se andassi adesso a testare il mio prototipo quando vado sopra al mio oggetto non succede nulla.

Questo perché ho creato, come dire, una variazione, ma non l'ho collegata.

Non ho creato l'interazione tra i due componenti che appartengono appartengono alla stessa variante.

Come faccio a farlo? Molto semplice.

Basterà fare quello che abbiamo fatto prima tra le pagine, ma questa volta semplicemente tra i componenti.

Che cosa fa? Faccio prendo il mio pulsante numero uno.

Vado nella cyber nella sezione prototipi, prendo e collego al secondo pulsante.

Questa volta gli dirò non al click, ma voglio che quando sono in over sul pulsante, lui deve cambiare verso lo status di over.

Ok, guardiamo se adesso funziona.

Scusatemi, andiamo a vedere nella nostra pagina Vado a provare il prototipo facendo play qui con un po' di tempi di caricamento.

Vedete che mi sta funzionando? Come vedete il passaggio è netto, quindi è o in acceso o spento.

Ovviamente questa cosa la posso rendere più performante.

Come posso renderla più performante in modo molto semplice quando vado qui nella sezione prototipo del mio interactive componente, invece di dirgli istante, gli dico dissolve ok, questo mi farà in modo che ci sarà una dissolvenza.

Se invece ci fosse stato un cambio anche fisico di oggetti e di forme, avrei potuto utilizzare lo smart che vediamo però nella lezione successiva che è un po'.

Come dire un magica di mitt mi trasforma un oggetto da una posizione x ha una diciamo forma e posizione e z diciamo questo morphing è magico tra le tra le varie forme in questo caso siamo semplicemente un dissolve avete fatto fate attenzione al fatto che io ho messo solo wild hovering.

Non devo fare una animazione per lover e una per il mouse out per quando il mouse esce perché ovviamente fism film ha utilizzato un legherà intelligente dice finché ci sei sopra fai questa fammi vedere questa componente nel momento in cui non ci sei più sopra in automatico torno al componente originale, quindi non devo dare due comandi semplicemente il tweet hovering mentre ci sei sopra quindici stein over col mouse io faro' vedere.

Questa è questa componente qui adesso lo rivediamo e vedete che qui la transizione è leggermente più smooth.

Ovviamente è un pochino più delicata perché non ho più il passaggio netto, ma ho una dissolvenza.

Questa cosa, ovviamente, può essere replicata n volte all'interno del vostro layout su altre cose.

Vedete, per esempio l'ho fatta qui.

Potrei farla qui.

Posso fare su rollover di altri elementi all'interno dell'interfaccia.

Quindi quando voi iniziate a prototipi, pare con gli Interactive Components.

Quello che succede è che potete farlo ovviamente in ogni elemento della pagina.

Quindi quello che avrete alla fine della vostra lavorazione del vostro sito è tutta una serie di raggruppamenti di componenti interattivi che vi fanno fare queste animazioni.

Quindi, vedete Piu' non ha piu' componenti singoli, ma gruppi di componenti che reagiscono con l'interazione.

Vedete anche, per esempio, anche la parte per esempio di di chat potrebbe essere fatta allo stesso modo.

Adesso vediamo di collegarla se noi questa vogliamo dirgli che all' over diventa verde, qua vedete che in automatico sto creando questa interazione qui.

Ovviamente le possibilità sono infinite, potete farlo anche su blocchi più complessi.

L'importante è capire appunto che lì la parte di prototipazione su film è molto oltre la semplice parte di collega collegare pagine, ma anche quella di rendere interattivi degli elementi.

Ovviamente io qui ne ho messi due, ma potrei anche creare una terza variante andando o a cliccare qui, oppure a cliccare sul più qui.

Per esempio dirgli che quando presso questo pulsante questo diventa buio facciamo un altro colore facciamolo arancione.

Così è molto evidente come faccio adesso a dirgli che quando presto questo pulsante diventa arancione vado sempre nella sezione prototipo e gli do un'altra interaction vado sul più e gli diro' uai il pressing changi tu vai sullo status tre che non ho ancora chiamato, però adesso lo chiameremo ovviamente lo faremo anche su questo stato qui, perché quando mi trovero' sopra lui andrà su questo stato.

Vado su white pressing ok, vediamo un po' guardate quando clicco mi va sulla parte arancione perché ho definito anche lo stato di pressing oltre allo stato di over.

Quindi giusto per dirvi che non necessariamente dobbiamo creare due varianti, ma potremmo grande tre quattro cinque a seconda di tutte le necessità di interazione di cui abbiamo bisogno.

Non vi ho fatto vedere com'eri nominarlo, ma lo vediamo al volo.

Una volta creata questa terza variante basta andare a destra e dirgli il nome che vogliamo attribuirgli.

Mi raccomando, iniziate a pensare con gli Interactive Components perché questo rendono davvero il vostro lavoro.

È come dei pro, perché chi fa non progetta immagini statiche, ma progetta oggetti interattivi sempre.