Share
Cosa starai creandoIn questo tutorial, creeremo diagrammi di flusso di flusso e flusso di lavoro riutilizzabili in Sketch. Sfrutteremo la potenza dei simboli Sketch, utilizzando elementi di base e alcune personalizzazioni per far funzionare i nostri simboli per noi.
"[A] diagramma di flusso è un diagramma della sequenza di movimenti o azioni di persone o cose coinvolte in un sistema o attività complessa." - Naema Baskanderi
Per costruire i nostri diagrammi di flusso avremo bisogno di elementi per le pagine, le frecce, le azioni (comprese le decisioni e gli indicatori sì / no), le etichette e le note. Troverò ciascuno di questi elementi, come dovrebbero apparire (se ti senti incline a copiare il mio stile), come dovrebbero funzionare e come si inseriscono nel quadro generale. Ma prima di farlo, dobbiamo andare oltre le convenzioni di denominazione in Sketch. È uno dei fattori chiave per fare questo lavoro. Immergiti subito, dobbiamo?
I simboli dello schizzo sono perfetti per i diagrammi di flussoSì, lo facciamo, e per due motivi specifici. Innanzitutto, è buona norma mantenere i livelli nominati a fini organizzativi, soprattutto se gestisci i file con altre persone. Quando crei un simbolo con più campi di testo, i livelli di testo con nome appropriato ti aiuteranno a distinguere quale testo è quando stai cercando di sostituirlo o sovrascriverlo.
La seconda ragione è molto più interessante però. Lo schizzo raggruppa automaticamente simboli, stili di testo e stili condivisi in diversi livelli, assumendo che si segua una sintassi specifica. Lo schizzo si basa su convenzioni di denominazione simili a URL e cartelle, ad esempio i seguenti due simboli saranno raggruppati in modo ordinato.
Quindi se ne nominiamo un altro:
sarà anche raggruppato sotto le frecce, ma in diverse sottocartelle: Predefinito. Questa categorizzazione ci consente di trovare esattamente il simbolo di cui abbiamo bisogno, quando ne abbiamo bisogno:
Simboli organizzati in SketchTienilo a mente quando dai il nome a qualcosa che va avanti, in particolare livelli di testo, simboli e stili condivisi.
La "pagina" è una parte fondamentale del nostro diagramma di flusso. Gli utenti di siti web o app seguiranno vari percorsi, completeranno vari compiti e le pagine saranno sempre centrali per questo.
Per creare l'elemento della pagina abbiamo bisogno di un rettangolo e un campo di testo sopra di esso. Gli stili del rettangolo includono # 325372 per il colore, Helvetica Neue, peso medio e dimensione carattere 11. È possibile creare uno stile condiviso perché gli altri elementi avranno la stessa tipografia, sebbene l'elemento di pagina utilizzi le maiuscole. Per fare questo, sotto il opzioni, cambia la trasformazione del testo in maiuscolo.
Il rettangolo è 144px per 96px con un raggio di 5, # F7FCFD per lo sfondo e # B7E7EE per il bordo interno 1px. È una buona idea trasformare almeno lo stile del rettangolo di pagina in uno stile condiviso. Ciò consentirà un facile montaggio in seguito.
Rinominare il livello testo in "Nome pagina". In questo modo, quando riutilizzi questo elemento come nuovo simbolo, il testo sostituirà il titolo invece del "testo". Selezionali entrambi e convertili in un unico simbolo attraverso il Crea simbolo pulsante nella barra degli strumenti.
In questo tutorial, lo creeremo Un sacco di simboli. Sketch non ha un comando specifico per questo built-in, ma possiamo creare noi stessi una scorciatoia personalizzata.
Per prima cosa vai a Preferenze di Sistema e vai dentro Tastiera. Seleziona il Tasti di scelta rapida scheda dall'alto. Nel riquadro di sinistra seleziona Scorciatoie per le app e premere il + pulsante. Apparirà una sovrapposizione; nella lista delle applicazioni individuare Schizzo. Sotto Titolo del menu devi inserire il nome specifico della voce di menu che abbiamo scelto come target, che in questo caso è Crea simbolo (è la prima voce di menu sotto Strato). Infine, scegli la scorciatoia da tastiera, e il gioco è fatto.
Suggerimento pro: questo può essere usato per qualsiasi applicazione.
Creare una scorciatoia da tastiera personalizzata per SketchPuoi creare tanti stili di freccia diversi a tuo piacimento, ma l'idea qui è mostrarti come creare una singola freccia regolabile per iniziare. Puoi aggiungere il tuo stile e le tue varianti in seguito.
Come puoi vedere nell'immagine sopra, la freccia assumerà molte forme; dobbiamo essere intelligenti nel crearlo. Innanzitutto, abbiamo bisogno di un punto di partenza e di un punto finale. Nel mio caso, è un cerchio aperto e un triangolo. Il triangolo è un'icona SVG che ho trovato nel progetto Noun. Puoi creare un semplice triangolo o usare un'icona.
sto usando # 325372 per la freccia, il bordo del cerchio e per la linea. Il cerchio ha uno sfondo bianco #FFFFFF pure. Ora, trasformali in simboli e chiamali in base a ciò che sono. Se vuoi diventare un po 'pazzo e creare singoli simboli per il triangolo in alto, in basso, a sinistra o a destra, allora vai a prenderlo. Ma non è necessario.
La prossima è la linea stessa. Crea una singola linea di pixel con lo strumento Linea. Qualunque sia lo stile che hai scelto, trasforma lo stile della linea in uno stile condiviso. Ne ho due; stili solidi e punteggiati per frecce primarie e secondarie. Avere più stili condivisi renderà più facile il passaggio da uno all'altro. Maggiori informazioni in seguito.
Successivamente, dovremo creare ogni tipo di freccia combinando il punto iniziale, la linea e il punto finale. Le frecce devono essere intercambiabili per la creazione del diagramma, quindi facciamolo ora.
Per prima cosa, creiamo una tavola da disegno quadrata. Un quadrato ci aiuterà a mantenere tutto nella stessa forma e le frecce saranno più facili da usare in quel momento. Il mio è 80px per 80px. Voglio iniziare creando una tavola da disegno per ogni freccia. In questo modo, potrò vederli tutti in una volta. Iniziamo creando prima le frecce sinistra, destra, superiore e inferiore. Ora seleziona le tue frecce e trasformale in simboli come abbiamo fatto. Non dimenticare di usare anche la scorciatoia appena impostata. Dai un nome a questi simboli, Freccia / Predefinito / Sinistra, Freccia / Predefinito / Destra e così via (hai l'idea).
Ora che le frecce più facili sono prese cura di; passiamo a quelli curvi. Questa parte è cruciale perché abbiamo bisogno che le frecce siano facilmente ridimensionabili e regolabili. Ho intenzione di andare avanti e creare uno di ciascuno per i tre stili prima.
All'interno delle nuove tavole da disegno, sempre con dimensioni di 80 px per 80 px, e utilizzando lo strumento vettoriale (V), tracciare le linee della freccia per gli stili L-Shape, S-Shape e U-Shape. Assicurati che le tue linee siano quadrate. Non fare ancora nessuna curva tu stesso. Se hai problemi a creare linee perfette, posiziona i punti più o meno dove dovrebbero essere, quindi modifica la loro posizione manualmente inserendo le posizioni X e Y.
Dai un'occhiata all'immagine. Successivamente, abbiamo bisogno di modificare le curve. Per ogni linea selezionare solo i punti che compongono gli angoli. Non selezionare il punto di inizio o di fine. Sul lato destro, aumenta il numero dell'angolo per quello che vuoi. Ho impostato il mio a 10px. Ora, gli angoli verranno automaticamente ridimensionati senza distorcere la linea.
L'ultima cosa che dobbiamo fare qui è aggiungere i punti di inizio e fine. Ma prima di farlo, giriamo le linee (solo le linee per ora) in simboli. Vogliamo che la linea sia regolabile in base ai suoi endpoint reali, al suo inizio e alla sua fine, esclusivi delle icone alle sue estremità. Aggiungiamo i punti di inizio e fine in un minuto. Nome di queste tre frecce Freccia / Forma a L / Destra-Giù, Freccia / Forma ad S / Destra-Giù-Destra e Freccia / Forma ad U / Destra-Giù-Sinistra.
Ora, fai doppio clic su uno qualsiasi dei simboli appena creati per modificarlo. Vogliamo posizionare i punti di inizio e fine sul bordo del simbolo e centrarlo allineato con i punti finali della linea. Idealmente, si desidera posizionare i punti iniziale e finale centrati all'angolo delle tavole da disegno del simbolo.
Infine, per rendere ridimensionabili le frecce, sia per il punto iniziale che per il punto finale, sotto l'opzione di riposo selezionare difficoltà di larghezza e fissa l'altezza. Inoltre, non dimenticare di rinominarli in Punto iniziale e Punto finale. Questo cambio di nome renderà più facile sapere quale è la situazione quando si cambiano i tipi.
Dobbiamo ripetere questo con le frecce rimanenti, comprese le restanti direzioni delle frecce a forma di L, a forma di S e a forma di U. Fallo ripetendo i passaggi precedenti.
Puoi avere tanti diversi stili di frecce che vuoi; punteggiato, tratteggiato, solido o quant'altro. La parte noiosa è che avrai creato un nuovo set di frecce per ogni stile se vuoi usare più di uno nello stesso file. Altrimenti aggiorna semplicemente lo stile condiviso. Non dimenticare di adattare le convenzioni di denominazione a Freccia / Forma ad S / Destra-Giù-Destra / Tratteggiata o Freccia / Tratteggiata / Forma ad S / Destra-Giù-Destra.
Penso che lo sviluppo più cruciale sia alle nostre spalle. Gli elementi rimanenti non sono molto complicati. Gli elementi di azione qui includono gli elementi per gli indicatori sì / no, una decisione, una singola etichetta d'azione.
Sì e nessun indicatore ci consente di illustrare i punti sul nostro diagramma in cui la direzione del flusso è influenzata da un'azione "sì" o "no".
Questi indicatori sono chiari (almeno rispetto alle frecce). Li ho creati scaricando due icone dal progetto Noun. Ecco un link per il controllo e un link per la X. Le icone del Progetto Noun sono bianche, #FFFFFF. Mentre il colore di sfondo è # F89B8D per 👎 e # FECD75 per 👍🏿.
Trasformali in simboli e chiamali Annotazione / Sì-No / 👎 e Annotazione / Sì-No / 👍🏿 (sì, gli emoji sono supportati).
Il processo per creare questo elemento è molto simile alla creazione dell'elemento di pagina. Crea un quadrato (il mio è 126 px per 126 px) e ruotalo o trasformalo in un angolo di 45 °. Inoltre, ho aggiunto un raggio di 5px sul quadrato. Il suo colore di sfondo è # F2F2F2 , senza frontiere Salvalo come uno stile condiviso. Oltre il quadrato, abbiamo bisogno di un'area di testo. Ho intitolato il mio livello di testo "Decisione". Ricorda, nominare i livelli è importante. Puoi riutilizzare lo stile di testo condiviso se lo hai salvato prima. In caso contrario, lo stile per il testo è # 325372 per il colore, Helvetica Neue, peso medio, 11 dimensioni carattere. Se stai copiando i miei stili, converti lo stile di entrambi, il testo e il quadrato, in stili condivisi.
Infine, è il momento di convertire la decisione in un simbolo. Lo chiamerò annotazione / decisione.
L'etichetta azione singola riutilizzerà gli stili dall'elemento decisionale. È un rettangolo; il mio è 117px per 24px. Riutilizzare lo stesso stile dall'indicatore di decisione sia per il rettangolo che per il testo. Non dimenticare di nominare il livello di testo; Ho chiamato il mio "Azione". Trasformalo in un simbolo e dai un nome al simbolo Annotazione / Azione. E abbiamo finito qui; Il prossimo!
Le ultime due cose sulla nostra lista saranno le note e gli elementi dell'etichetta. Iniziamo con l'etichetta. Questo è un po 'complicato ma nulla che non possiamo gestire. Per semplificare la forma, puoi copiare il rettangolo e il testo dall'azione che abbiamo fatto prima. Avremo bisogno di un rettangolo, il mio è 117px per 24px, con raggio 5px. Esso ha # 6FCFDB per lo sfondo. Successivamente, l'area di testo. Riutilizza lo stile del testo dall'azione o dagli indicatori di decisione. Quindi, crea un nuovo stile condiviso chiamato Etichetta testo e ricolora il testo su #FFFFFF. Quindi, trasformali in un simbolo ancora una volta (hai usato la scorciatoia e ti sei abituato ad essere lì? Grande.)
Fare doppio clic sul simbolo appena creato e selezionare il livello di testo. Abbiamo bisogno di modificare le sue proprietà di ridimensionamento. Abbiamo bisogno di appuntarlo sul lato sinistro e destro dell'oggetto. A volte, Sketch lo fa automaticamente per te, ma non sempre, quindi è meglio ricontrollare.
Infine, abbiamo le note. Lo stile che ho per questi è il seguente: # A4A4A4 per il colore del testo, Helvetica Neue, peso normale questa volta e 11 dimensioni del carattere. Questo è diverso da tutto il resto finora, quindi non rendere il testo delle note in un simbolo. Aggiungilo solo come stile condiviso.
Ora abbiamo finito con le forme e gli elementi di base, ora possiamo mettere insieme i diagrammi di flusso.
L'immagine sopra mostra tutti i diversi simboli che ho a mia disposizione. Questa è una vera raccolta e ho cercato di mantenerla piccola senza molta personalizzazione. L'immagine qui sotto mostra un flusso di diagramma di esempio che ho creato usando questi simboli.
Tutto ciò che devi è selezionare l'elemento necessario dalla sezione dei simboli e disporre un diagramma di flusso sulla tavola da disegno.
Ben fatto per aver seguito tutti questi passaggi! Ora hai un bel file di Sketch che ti consentirà facilmente di creare diagrammi di flusso di flusso e flusso di lavoro!
I seguenti passaggi potrebbero comportare la creazione di una guida di stile per i diagrammi di flusso; modi per interscambiare facilmente colore, tipografia e simili. Forse anche creando documentazione all'interno del tuo file di Sketch se prevedi di usarlo con i tuoi compagni di squadra o di darlo via come un omaggio. Restate sintonizzati per i tutorial su questi argomenti al più presto!
Accentsconagua