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.
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.
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!
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:
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:
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 azioneQuando 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.
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.
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.
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
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.
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.
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.
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!