Share
Partire da zero ogni volta che si prende in giro un progetto è una perdita di tempo, soprattutto quando si costruisce sopra un prodotto esistente. Su Envato Market abbiamo già un aspetto visivo consolidato e stiamo lavorando a una guida di stile per raccogliere tutti gli elementi dell'interfaccia utente.
Ciò di cui abbiamo bisogno è un modo semplice per creare un prototipo cliccabile usando la nostra libreria UI. Un modello con tutti i pezzi Lego già lì dentro, pronto per essere costruito.
Nel corso di questo tutorial userò le mie esperienze con Envato Market per dimostrare il processo. Tuttavia, tutte le tecniche discusse saranno applicabili alla tua situazione.
Il primo passo nel mio caso è stato quello di creare il modello imitando la nostra guida di stile.
Ho iniziato aggiungendo tutti i nostri font di icone: considerando che avevamo un carattere di icona che volevamo utilizzare nei nostri disegni di Sketch, prima doveva essere installato il carattere dell'icona:
Il modo migliore per avvicinarsi a questo è aprire il font in Libro Font. "Vista del repertorio" (⌘ + 2) deve essere attivo per vedere tutti gli glifi disponibili. Copia ciascun glifo e aggiungili a una tavola da disegno in Sketch.
Successivamente ho fatto a mano tutti i diversi elementi dell'interfaccia utente. Ogni elemento è stato aggiunto alla propria tavola da disegno e successivamente salvato come simbolo:
Dò a ciascuno un nome. I nomi capita di coincidere con le classi utilizzate nella build attuale, ma dipende da te come ti avvicini a questo:
Colpire accedere. Fatto.
Ho ripetuto questo processo per ogni tipo di elemento dell'interfaccia utente principale che abbiamo attualmente catalogato nella guida allo stile. Il risultato di questo laborioso lavoro è stata la creazione di 89 simboli in totale.
L'ultimo pezzo del puzzle era la tipografia. Abbiamo 17 diverse varianti tipografiche, quindi ognuna è stata trasformata in uno stile di testo all'interno di Sketch.
Fai questo aggiungendo una casella di testo e stili il testo usando le opzioni nella barra laterale:
Quindi, trasformalo in uno stile di testo:
Quando abbiamo finito, salviamo andando File> Salva come modello ...
Ora siamo pronti per il rock 'n' roll!
Una volta che avevo tutte le icone, i principali elementi dell'interfaccia utente e la tipografia preparata eravamo pronti per iniziare a prendere in giro le cose.
La creazione di un nuovo file utilizzando il modello di Guida allo stile di mercato di Envato ci fornisce tutte le tavole da disegno, i simboli, i font di icone e gli stili tipografici che abbiamo creato.
Per iniziare un nuovo modello, rimuovo prima tutte le tavole da disegno. I simboli creati in precedenza saranno ancora accessibili poiché sono incorporati nel modello. Io uso il Libro Font per copiare rapidamente tutte le icone da usare nel modello. Insieme, ciò significa che posso iniziare con una lavagna pulita e avere comunque accesso rapido a tutte le risorse di cui ho bisogno. Beatitudine Zen!
Successivamente aggiungo una nuova tavola da disegno:
Ora sono pronto per iniziare ad aggiungere i nostri elementi costitutivi.
Boom! Eccolo:
Sposta in posizione:
Quindi aggiungi il piè di pagina per completare la configurazione della pagina vuota. Ecco!
Ora popoliamo la pagina fittizia con un modulo che collega a una pagina di conferma. In seguito lo aggiungeremo a un progetto InVision in cui possiamo ottenere feedback dai colleghi e testare il flusso inviando un link agli utenti che testano la nuova interfaccia.
Tutto ciò non richiede tempo e la cosa migliore è che nessuno di questi elementi deve essere progettato appositamente per l'interfaccia. Si tratta solo di utilizzare i blocchi costitutivi che abbiamo creato nel modello.
Ora esportiamo questi come immagini selezionando le tavole da disegno e andando a File> Esporta:
L'ultimo e più importante passo è caricare i prototipi su InVision e condividere il collegamento con i colleghi e testare gli utenti per raccogliere feedback.
Qui ho creato un nuovo progetto InVision e caricato i miei prototipi esportati su di esso. Fare clic, ad esempio, sulla pagina di destinazione per aprirla:
Utilizzando lo strumento di creazione, creo un hotspot per collegarmi alla pagina di conferma:
Infine condivido il prototipo con altri dicendo qualcosa come:
"Hey se ne hai un secondo mi piacerebbe sentire la tua opinione su questo nuovo flusso di pagine di conferma su cui ho lavorato. Scoprilo su http://invis.io/RG1XC6XPA "
Sì, puoi seguire quel link per giocare con il mockup.
Questo è tutto! Il nostro primo ciclo di feedback è completo.
Questo è il miglior processo che ho scoperto fino ad oggi per quanto riguarda il rapido ottenimento di un prototipo sullo schermo di qualcuno.
Detto questo, non è ancora l'ideale. Non appena la nostra libreria dell'interfaccia utente cambia qualcuno (attualmente me stesso) deve aggiornare manualmente il modello di schizzo. Il processo ideale sarebbe quello in cui potremmo utilizzare HTML e CSS per creare simboli di schizzo che consentano di mantenere la guida di stile e il modello di schizzo in perfetta sincronizzazione.
Accentsconagua