Ok abbiamo capito quali sono le varie esigenze dei prototipi, ma adesso capiamo come si fa un vero e proprio prototipo su film.

Supponiamo appunto che abbiamo il nostro il nostro layout finale.

Qui vedete la simulazione del bailout backstop e la nostra necessità in questo contesto è ovviamente fare il prototipo click danny vuol dire semplicemente dove senza troppi fronzoli ne facciamo che con un tap vado da una parte all'altra non ci sono transizioni, non ci sono animazioni sicuramente diciamo un prototipo grezzo, ma che ci aiuta appunto a capire le interconnessioni all'interno di un layout che ha piu' pagine come facciamo per creare un prototipo su film? Intanto quello che dobbiamo iniziare a capire che sulla destra, a parte la voce design come vedete abbiamo la voce prototipo.

Questa voce qui ci consente di settare intanto delle piccole delle piccole funzionalità.

Intanto se io non ho cliccato da nessuna parte su nessuna tavola specifica, quello che posso fare è decidere quando crescerò questo prototipo all'interno di quale schermata si vedrà la dimensione? Perché io potrei per dire mettete che sto prototipale per progettando per mille e quattrocento quaranta per mille ventiquattro.

Siccome le mie tavole sono più lunghe chiaramente.

Che cosa succede quando le vado a vedere sul modo piu' grande? Vedrò molti più pezzi di schermo a disposizione.

Allora quello che normalmente si fa è comunque cercare di fare in modo che il prototipo è si vede all'interno di una finestra ben definita.

In questo modo siamo sicuri che chi lo sta visionando lo visuale lo visualizzerà esattamente per come è stato progettato.

Quindi possiamo o andare a mettere una di queste dimensioni di prototipo prestabilite oppure posso andare a mettere customer Insights.

Quindi in questo in questo caso io vado a mettere proprio la larghezza e l'altezza che voglio predefinite.

Io e l'altra cosa posso scegliere? Quale sarà il fondo di background sul quale appoggerà il prototipo? Questo perché appunto, per esempio in questo caso questo sito è molto oscuro che non voglio che si visualizzi su un background di fondo molto chiaro, vero? Quindi la tavola da disegno è chiaro, ma vorrei che venisse visto su uno sfondo scuro.

Questo perché l'utente così che lo vede possa concentrarsi proprio sul sul design più vicino all'effetto finale è come si è come si concretizza tutte queste opzioni che abbiamo dato qua semplicemente quando io vado a selezionare una delle mie tavole.

Intanto posso dire siccome il prototipo puo' avere tanti punti di accesso, io posso magari fare un prototipo che parte dalla Home uno che parte magari da un corso, uno che parte da un altro flusso.

La prima cosa che possiamo fare quando prototipi siamo su film è decidere selezionando la tavola su cui ci troviamo.

Qual è lo starting point del flusso? Basterà fare un click sul più e in automatico io staro' deciso staro', diciamo definendo che questo è un primo punto di accesso del flusso del mio prototipo.

Se flow No, non mi piace.

Posso fare doppio clic e dire che questa è la home.

Posso farlo sia da qui che é da qui.

Che cosa succede se adesso faccio play su questa piccola linguetta? Sto chiamando il mio prototipo.

In questo caso è un prototipo.

Ancora non è navigabile.

Ma quello che ho fatto, intanto, è è dare un frame alla visualizzazione del mio prototipo.

Quindi, vedete, in questo modo ho limitato la visione a questo mille sei ottanta per mille.

Ok? È altra cosa che posso fare è far diventare pubblico questo urla in modo che questo prototipo che fino adesso era sulla mia area di lavoro di Fig.

Ma quindi questo design possa essere mandato come urla solo per essere visto.

Quindi non per vedere tutta la mia area di lavoro solo per vedere questa pagina a qualcun altro.

E come facciamo? Vado su Share prototipi e quello che posso fare o mettere le email specifica di qualcuno.

Oppure, se voglio specificando semplicemente che chiunque ha il link puo' vedere questo prototipo basterà copiare il link qui é in auto automatico.

Il chi riceverà questo link vedrà questa pagina e questo prototipo in questo caso ancora vedete, non è niente, è link abile, ma vedrà la pagina e potrà comunque scorrere la dimensione effettiva di come io l'ho progettata.

Ok, attenzione che Fig ma crea sempre una linguetta prototipo accanto a quella del design effettivo che vedete a questi Concina con la penna.

Per uscire dal prototipo basterà chiudere la X che ha generato come Tab Fig.

Ma ok, questo è il primo sta step per ovviamente conoscere le funzioni di prototipo all'interno di Fig.

Ma poi ovviamente però dobbiamo procedere a quello che abbiamo detto I click.

Dammi che cosa facciamo? Colleghiamo semplicemente alcuni elementi della pagina ad altre pagine che vogliamo che vogliamo far visualizzare.

Per esempio su corsi.

Io faccio doppio click progressivi per arrivare alla voce corsi.

Ora vedete che se sono già nella tab prototipi sul mio sulla mia sai bar di film, quindi non sulla Tav design.

Ma se so sulla tav prototipi in automatico mi viene fuori questo cerchietti no qua che mi consente di prendere e collegare proprio manualmente.

Adesso vado alla pagina corsi che è questa prendo e lo trascino e lo vedete si ancora in automatico, si aggancia alla pagina elenco corsi e sto creando questa connessione di prototipo e posso ovviamente decidere quale il rig.

E scatena questa azione di prototipo può essere il clic.

Il drag può essere il rollover può essere anche un elemento da tastiera.

Insomma ci sono tanti trigger nel caso di un prototipo click dammi ovviamente il click la fa da padrona, noi clicchiamo andiamo da una parte all'altra possiamo Inc.

In questo caso lui in automatico mi ha generato questa regola naviga verso la pagina corsi, ma potremmo avere anche altre tipologie di prototipo.

Per esempio potremmo far fare uno switch, quindi cambiare con un altro elemento potremmo dirgli di aprire uno per lei, poi lo vediamo.

Possiamo per esempio anche utilizzare altre funzioni, quelle di Scrooge, tu che non è altro che è un'ancora e quello di Hope Link.

Supponiamo che questo però purtroppo ti potevi incarni a qualcosa che fa online sulla rete, per esempio la pagina ling google.

Potrei tranquillamente mettere l'urlo dentro questa voce, ma in questo caso quando vogliamo navigare da una pagina all'altra del prototipo basterà cliccare navigate tu e poi scegliere la pagina o manualmente da questo menu a tendina oppure facendolo trascinandolo visivamente all'interno della pagina.

Altra cosa importante possiamo scegliere la transizione l'animazione con cui questo passaggio avverrà.

In questo caso, come abbiamo detto, facciamo un prototipo click dammi, vale a dire che clicco e vado.

Allora istat va benissimo, abbiamo altre modalità la dissolvenza, lo smartphone email che poi vedremo e poi è altre modalità ancora.

Soprattutto queste movin' out push sliding slides out non vengono quasi mai utilizzato in un prototipo backstop, ma sono quasi sempre modalità che vengono usate per o il mobile.

Le presentazioni perché sono tutte quelle transizioni che diciamo mi fanno un po' avere una cosa da sinistra verso destra, me la fanno entrare dal basso verso l'alto e quando si prototipo un sito ed ex top.

Queste transizioni ovviamente non sono quasi mai contemplate e magari potrebbe essere contemplata l'apertura di un over lei, oppure fare in modo che sia meno netta questa dissolvenza facendo questa diciamo questo scatto con un po' di dissolvenza, vediamo adesso che cosa succede.

Ovviamente con questa modalità attivata vado di nuovo su home.

A questo punto il prototipo si ricarica e quando clicco soccorsi mi sta andando semplicemente alla pagina corsi.

Chiaramente adesso non riesco a tornare indietro perché ovviamente un prototipo per diciamo funzionare tutte le sue parti dobbiamo elencare ogni singolo elemento di ogni singola pagina per completare la navigazione, quindi in questo caso avrei dovuto magari prendere il mio logo evolversi della della pagina il logo del del mio brand della pagina corsi elin carlo sempre con la voce prototype prototipo attiva alla pagina home ok e in questo caso, per esempio se io vado a ricaricare il mio prototipo basterà fare restart senza mai ricaricare integralmente il prototipo.

Vado soccorsi, vedo la pagina corsi, clicco qui e sto andando alla mia home page.

Questo è proprio un prototipo click dammi altra cosa che possiamo fare per esempio una di voi di queste voci di menu come funziona? In realtà non dovrebbe portare un'altra pagina, ma dovremmo portarmi ad un'ancora all'interno della stessa pagina.

Possiamo fare anche questo con film come lo facciamo semplicemente prendiamo la voce come funziona e invece di andare ad ancorare una pagina esterna, andiamo ad ancorare ad un blocchetto di navigazione che si trova all'interno della stessa pagina.

Possiamo decidere noi qual è il punto di aggancio.

Non ci dobbiamo prof occupare diciamo per l' trezza di dove si trova il blocco? Perché possiamo sempre questa cosa andarla a settare É infatti vedete adesso, avendo attivato questa funzione andando su Monclick, ovviamente sempre il clic e lui mi da' in automatico scroll tu quindi mi farà questo scrolling verso la pagina mi va sul nome del fra me e questa volta non era stato nominato.

Vediamo cosa succede lasciando queste impostazioni qui vado a rivedere il prototipo con r lo ricarico.

Vado su come funziona TAC.

Vedete, mi sta portando qui.

Certo, non è proprio l'ottimo perché me l'ha fatto il riscatto mentre mi piacerebbe vedere che la pagina scrolla.

E allora che cosa faccio? Vado a dirgli che invece che animazione istant gli do animate, quindi con una curva di bézier di animazione e qui vediamo come potrebbe essere simulata scegliendo una curva oisin quindi con una accelerazione finale oas out con una decelerazione finale o in about the un'accelerazione in una decelerazione e varie insomma curve.

Possiamo creare questo tipo di di scrolling.

Vi consiglio magari di farlo un po' più lungo nelle tempistiche, forse anche cinquecento millisecondi.

Ovviamente questo dipende da quanto deve scorrere all'interno della pagina.

Lo vediamo adesso.

Ok, vedete che ha scrollato in maniera più morbida potrei farlo ancora più lungo.

Vediamo, facciamo anche mille e vedrei uno scrollo più più standard è se per esempio vi dà fastidio che è l'ancora sia si fermi un po' troppo in alto rispetto al mio layout.

Qui entrano in gioco queste voci, mi sta dicendo quant'è l'offset in asse verticale è mme di questo scrolling basterà per esempio dargli meno cento per vedere che questo elemento si ferma nettamente prima ed esattamente nella porzione della pagina che mi interessa.

Quindi abbiamo fatto prototipo andando sia da una pagina all'altra tornando indietro cliccando qui.

Andiamo a fare invece uno scrolling della pagina ultimo elemento diciamo per prototipi pare in maniera come dire click dammi è quello di provare anche a prototipi, pare quella che in gergo è una modale.

Quindi io mi costruisco una finestrella a parte che si aprirà a centro pagina.

Come faccio a farla diventare una modale? E invece di dirgli vai a quella pagina gli dico aprimi una per lei con quella paginetta lì.

Ovviamente la modale che andiamo a costruire non deve essere della dimensione delle altre pagine, ma ovviamente più piccola a creare tutto, diciamo lo sfondo dietro ci penserà ovviamente Fig.

Ma quindi che cosa facciamo? Facciamo click progressivi fino ad arrivare alla voce accedi? Io voglio che questa modale si apra in quel contesto, la porto verso la mia finestrella che voglio aprire e qui invece di dirgli navigate tu perché guardate che cosa succederebbe.

Ovviamente mi andrebbe a quella pagina, ma non vedrei quello che c' è sottostante, ma sotto alla pagina precedente.

Quindi non naviga tu verso ma apri un over, lei aprì una finestra con sopra questo blocco e qui posso darvi una serie di informazioni tipo deve essere centrata rispetto alla pagina, oppure deve essere a sinistra oppure in crollata a destra.

Oppure potrei dirgli addirittura dirgli che manualmente la vado a posizionare io.

Vedete? La posso prendere, dirgli posizionati in un punto specifico è diciamo molto raro, ma può essere fatto.

Io vi consiglio di utilizzare nel caso delle modali, la modalità center, quindi centrata.

Altra cosa che posso dirvi è di far chiudere questa modale quando clicco fuori da questo oggetto e di aggiungere un piccolo background sotto per creare questo appunto, profondità no di legger che si sta sovrapponendo anche qua possedere di animazione istante oppure è magari in dissolvenza.

Quindi posso fare in modo che questa modale arrivi con un po' di animazione.

Vediamolo adesso in pratica con r refresh il mio prototipo.

Vado, succede.

Ecco qua che si è aperta la mia modale.

Qui vedo un po' di difetti.

Per esempio, il fondo non è abbastanza scuro, è troppo lenta.

L'apertura, ovviamente perché è rimasta l'animazione di mille secondi di mille e mille secondi.

Mettiamo trecento e magari gli diciamo che lo sfondo è del settanta percento di nero.

Quindi lavoriamo sulla sua alfa.

Lo rivediamo.

Ecco qua.

Cliccando fuori si chiude la modale.

E in questo modo, con pochissimi passaggi, noi abbiamo collegato una pagina, un elemento all'interno della stessa pagina abbiamo collegato pagine diverse e siamo stati in grado di creare anche la prototipazione di una modale all'interno del nostro prototipo che chiamiamo click.

Dammi proprio perché non ci sono troppi troppi fronzoli, ma mi aiuta ovviamente a vedere a validare tutte le pagine della mia navigazione.

Vi ricordo che poi per condividere questo prototipo con terzi sempre andate Souchet prototipi e cliccate! Mettete ovviamente le opzioni di visualizzazione chi può vederlo? Chi no Copiate il link e questo link poi lo condividete con chi volete che validi il vostro prototipo?