Una panoramica degli strumenti di prototipazione in Sketch

All'inizio di quest'anno, è stato rilasciato Sketch 49 e, insieme ad esso, alcune funzionalità di prototipazione lungamente anticipate. Nella panoramica di oggi, ripercorrerò tutto ciò che è necessario sapere sulla creazione di prototipi in Sketch, dalle scorciatoie must-know, fino al feedback e alla collaborazione con il team su progetti e prototipi.

Nuove icone di prototipazione

Insieme al rilascio delle funzionalità di protoyping sono arrivate quattro nuove icone nella barra degli strumenti di Sketch. Forse la cosa più importante è Punto di accesso che, se selezionato, ti consentirà di rilasciare un hotspot interattivo sulla tavola da disegno. Il prossimo è Link a una tavola da disegno che ti consente di collegare e connettere un hotspot a una tavola da disegno o una destinazione. Il Mostra Prototipazione icona ti consente di attivare e disattivare l'interfaccia utente di prototipazione gialla / arancione in Sketch. Questo è ottimo se stai ancora progettando e non vuoi vedere tutti i link e gli hotspot nell'app. Infine è il Anteprima icona che consente di aprire una finestra di anteprima in modo da poter utilizzare il prototipo proprio lì in Sketch. Ne parleremo più dettagliatamente in seguito.

Tasti di scelta rapida

Naturalmente, Sketch ha implementato alcune scorciatoie da tastiera con il rilascio delle loro funzionalità di prototipazione. Personalmente, adoro usare scorciatoie, spero che le troverai anche utili!

  • stampa H inserire un hotspot
  • stampa W aggiungere un collegamento 
  • stampa Controllo + F per attivare / nascondere l'interfaccia utente di prototipazione giallo / arancione sovrapposta
  • stampa Comando + P per aprire l'anteprima
  • Puoi anche copiare e incollare gli hotspot (con i link se li hanno) tra le tavole da disegno nello stesso modo in cui faresti con qualsiasi altro elemento di design.

Hotspot, collegamenti e scheda Impostazioni

Per avere una buona comprensione di come funzionano sia hotspot che collegamenti, diamo un'occhiata alle loro proprietà in Scheda Ispettore. Se fai clic su un elemento, noterai una piccola scheda per Prototipazione con un simbolo più (+) alla sua destra (esattamente uguale a Riempi, Bordi e Ombre). Se si fa clic sul +, trasformerà l'elemento in un hotspot e ti permetterà automaticamente di aggiungere anche un collegamento per quell'hotspot. Se si fa clic lontano dall'elemnt, si perde l'hotspot. Ma se si aggiunge un collegamento, si avrà quindi accesso alle proprietà di prototipazione per quell'hotspot.

Le proprietà di prototipazione sono relativamente semplici, poiché la prototipazione di Sketch non è ancora diventata troppo complicata o estesa.

Il primo è il Bersaglio cadere in picchiata. Qui è dove si collegano gli hotspot e dove toccando l'hotspot ti porterà in seguito. L'impostazione predefinita è ciò che hai già selezionato, ma a questo punto puoi:

  • cambialo a un altro a bordo (sono organizzati per pagine)
  • rimuovere completamente l'hotspot selezionando Nessuna 
  • scegliere Tavola da disegno precedente. Ciò significa che nel flusso del prototipo, ti riporterà alla tavola da disegno da cui sei venuto. Questo è fantastico per i pulsanti "indietro". 

L'ultima cosa da sapere sulle proprietà nell'Ispettore è animazioni. Questo impone la transizione che si verifica quando si fa clic sull'hotspot. Hai diverse opzioni qui:

  • Nessuna animazione
  • Animare la tavola da disegno da destra
  • Animare la tavola da disegno dall'alto
  • Animate la tavola da disegno da sinistra
  • Animate la tavola da disegno dal basso

Lavorare con gli hotspot e i simboli

Gli hotspot possono essere creati in due modi. Puoi creare manualmente un rettangolo su una tavola da disegno nello stesso modo in cui avresti disegnato manualmente un rettangolo o un livello di testo. In alternativa, puoi selezionare un livello o elemento specifico. Qualsiasi elemento di design può essere trasformato in un hotspot, inclusi i simboli!

Un hotspot in azione

Quando si tratta specificamente di simboli, è possibile posizionare un hotspot dentro un simbolo, invece di usare un'istanza di simbolo come hotspot. Se hai un hotspot all'interno di un simbolo, verrà ripetuto con ogni istanza di simbolo, ma puoi sovrascriverlo come qualsiasi altra proprietà di un simbolo, come cambiare un'immagine, un'icona o un testo. Puoi anche ignorare del tutto l'hotspot, rimuovendolo efficacemente da un simbolo. In questo modo riusciamo a riutilizzare i simboli fino a quando le mucche non tornano a casa senza preoccuparsi di hotspot non necessari.

Icona nella lista dei livelli

Un piccolo dettaglio interessante che Sketch incluso con la prototipazione è un'icona nel Livelli elenco. Questo è lo stesso concetto con cui stanno andando avanti simboli e Fette esportabili. La presenza di un'icona Hotspot tra i livelli rende l'esperienza di prototipazione un po 'più comprensibile.

Tavole da disegno a scorrimento

Questa funzione è particolarmente utile per le pagine più lunghe per i design mobili! Lo schizzo consente automaticamente lo scorrimento per tavole da disegno più lunghe. Nell'esempio del video qui sotto vedrai la visualizzazione dell'articolo per l'interfaccia utente fittizia che sto utilizzando per questa procedura dettagliata. Non devi preoccuparti di impostare nulla per far scorrere le pagine.

 

Impostazione di un "Punto iniziale"

UN Punto di partenza è la tavola da disegno predefinita da cui inizia il tuo prototipo. Di default, non ce n'è uno, il che significa che se si sceglie di visualizzare l'anteprima del prototipo, si aprirà sulla tavola da disegno che è stata selezionata al momento dell'anteprima. 

Definire un punto di partenza è molto più utile una volta che sei pronto a condividerlo con qualcuno. Per selezionarne uno, navigare fino alla tavola da disegno iniziale desiderata e aprirla Anteprima. Nella parte superiore della finestra di anteprima, seleziona il piccolo Bandiera icona. Ogni volta che visualizzi in anteprima il prototipo da ora in poi, inizierà dalla tavola da disegno del punto di partenza. 

Deseleziona l'icona della bandiera (tornandola di nuovo grigia) lo rimuoverà come punto di partenza, tuttavia puoi avere più di un punto di partenza. La selezione dell'icona di bandiera su un'altra tavola da disegno non la rimuoverà da nessun'altra! 

"È probabile che tu voglia definire un punto iniziale all'inizio di un flusso, ma puoi anche definire più punti d'inizio, una funzione che sarà molto utile quando costruisci prototipi più complessi che contengono molte tavole da disegno, o se vuoi solo che gli altri visualizzino una parte particolare del tuo Prototype. "- Documenti di Sketch

Anteprima e condivisione dei prototipi

Attualmente, puoi eseguire l'anteprima del prototipo in Sketch con l'aiuto di Anteprima caratteristica. Ne abbiamo discusso già da un po '. Una finestra si aprirà sulla tua app Sketch e potrai fare clic in giro e accertarti di aver impostato correttamente le cose. 

C'è un altro modo per visualizzare in anteprima il tuo prototipo. Se stai lavorando specificatamente con i design per dispositivi mobili, puoi utilizzarlo in Sketch Mirror. Sia sul tuo iPhone che su iPad, puoi collegare il tuo dispositivo a Sketch. È quindi possibile visualizzare in anteprima il prototipo in modo più nativo e in un'impostazione corretta. Gli hotspot saranno automaticamente lì, interattivi e tutti.

  • Sketch Mirror in 60 secondi

    Sketch ha una grande funzionalità chiamata "Mirror" che ti permette di visualizzare in anteprima, in tempo reale, il tuo lavoro su un iPhone, iPad o un browser. Diamo un'occhiata al suo ...
    Adi Purdila
    Schizzo

Esportare e collaborare

Né Sketch Mirror né la finestra Anteprima, semplificano la condivisione dei prototipi con altre persone. Pertanto, se stai cercando di inviarlo al tuo team o di eseguire un rapido test di usabilità, devi farlo tramite Sketch Cloud. Un prototipo può essere visualizzato e utilizzato tramite Sketch Cloud da chiunque abbia un link. Non puoi esportare un prototipo come faresti con qualsiasi altro design o elemento all'interno dell'app.

Carichiamo il prototipo per impostazione predefinita quando carichi il documento corrente su Sketch Cloud. Viene semplicemente esportato con il documento.

Se è stato definito un punto di partenza, il prototipo verrà inserito nella propria sezione di prototipo nei documenti su Sketch Cloud. Questo è l'unico passaggio in più che devi fare per assicurarti che il tuo prototipo sia facilmente accessibile attraverso Sketch Cloud. Una volta che fai clic sul tuo prototipo, partirà naturalmente dal punto di partenza e sarà interattivo, tutto pronto per partire! 

Condividi il link al prototipo affinché chiunque possa accedervi e utilizzarlo. 

Per aiutare a collaborare, puoi lasciare che le persone lascino commenti sul tuo prototipo (se hai commenti attivati ​​in Sketch Cloud). Saranno in grado di lasciare commenti per voi su singole tavole da disegno all'interno del prototipo.

Modello di prototipazione

Per ulteriore assistenza, dai un'occhiata al modello di prototipazione prematura di Sketch. 

È sotto File> Nuovo da modello> Modello di prototipazione e ha un mazzo di note laterali che spiegano le caratteristiche. 

Conclusione

La nuova funzionalità di prototipazione dello schizzo è rudimentale (ad esempio, ha solo quattro proprietà di animazione). Tuttavia, dovrebbe rendere molto più semplice la prototipazione rapida. Non è più necessario esportare i progetti e quindi importarli in uno strumento esterno come UXPin o persino Marvel.

Penso che possa migliorare il flusso di lavoro per i designer che non hanno bisogno di nulla di sofisticato o potente. Dovrebbe adattarsi perfettamente ai loro flussi di lavoro; specialmente se stanno già utilizzando Sketch Cloud. Se hai bisogno di mettere velocemente e velocemente qualcosa insieme per mostrare il flusso di utenti dei tuoi progetti, questo sicuramente farà il trucco. Aiuterà anche il tuo team a eseguire un test iniziale di flusso o usabilità. A questo punto, non penso che cambierà la mia vita, ma posso sicuramente vedere me stesso utilizzando la prototipazione di Sketch in condivisione con i progetti dell'interfaccia utente dei clienti per i progetti futuri.

Hai già utilizzato la funzione di prototipazione dello schizzo? Che ne pensate? Come si inserisce nel tuo flusso di lavoro? Condividi con noi un link a un prototipo che hai esportato in Sketch Cloud in modo da poter dare un'occhiata anche a noi!