Accentsconagua
Share
Cosa starai creandoQualche tempo fa abbiamo pubblicato un tutorial sulla creazione di un file di schizzo personalizzato con diagrammi di flusso riutilizzabili. È una grande risorsa per creare i tuoi flussi di utenti o sitemap. In questo tutorial stiamo andando a rinforzare quel file di Sketch per renderlo più utilizzabile per gli altri.
Potresti avere colleghi che desiderano utilizzare il tuo file o forse pagare i clienti. In ogni caso, i miglioramenti apportati al file implicheranno che altri possano aprirlo, comprenderlo e usarlo.
Ti consiglio di andare avanti e leggere il tutorial originale. Per lo meno, prendi il file finale di Sketch per iniziare con il piede giusto e segui questa seconda parte. Questo tutorial è pieno di suggerimenti e trucchi di Sketch, alcuni suggerimenti pro qua e là, così come alcuni plugin correlati che devi provare per te stesso.
La prima cosa che faremo è impostare una nuova pagina. Sto chiamando il mio "Manuale dell'utente". Questa pagina servirà da guida rapida su come utilizzare gli elementi del diagramma di flusso. Lo useremo per spiegare il ruolo di ogni elemento, come usarli e come manipolare le loro proprietà come i punti di partenza per le frecce.
Inizieremo con una nuova tavola da disegno, chiamerò la mia "Come usare le frecce". stampa UN per creare una nuova tavola da disegno e dall'angolo in alto a destra selezionare Misura del foglio e Lettera. Sketch posizionerà automaticamente la tavola da disegno giusta per te (funziona anche con le dimensioni dello schermo del desktop e dello smartphone!).
Dimensioni della carta per tavole da disegno in SketchVoglio che i nuovi utenti capiscano alcune cose, tra cui come selezionare una linea e posizionarla su una tavola da disegno, come cambiarne la forma e come modificarne i punti di inizio e di fine. Come spieghi queste cose è la tua scelta; le descrizioni e le istruzioni specifiche dipendono da te. Ho migliorato le mie descrizioni includendo un paio di screenshot.
Proprio come con i simboli o gli stili di livello, possiamo anche organizzare gli stili di testo. Per queste pagine di manuale ho tre diversi stili di testo, H1, H2, e corpo.
Mio H1 è Helvetica Neue, Regular, misura 24px con altezza della linea di 30px. Il H2 è Helvetica Neue, Bold, 14px in taglia con altezza in linea di 20px. Il corpo è Helvetica Neue, Regular, dimensioni 12px con altezza della linea di 20px. Tutti e tre usano il colore # 325372.
Possiamo utilizzare la sintassi dell'organizzazione di Sketch per ottenere questi stili organizzati nel menu a discesa. Li ho nominati come segue, che puoi vedere riflessi nel menu a discesa sopra:
Adoro questo: rende i miei file di Sketch molto più organizzati!
La pagina successiva nel manuale dell'utente discuterà le annotazioni. Per risparmiare tempo, copia la pagina della freccia e modifica il testo e le immagini per riflettere le annotazioni. Per le annotazioni, dobbiamo discutere i seguenti aspetti: aggiunta a una pagina, selezione di una diversa annotazione e ridimensionamento.
Nel tutorial iniziale, ci siamo assicurati che le annotazioni di azione e etichetta fossero ridimensionabili manualmente con le proprietà native di Sketch. Tuttavia, se vuoi utilizzare un buon plugin per ridimensionare il tuo sistema, ti suggerisco di scaricare e usare Rebel Button o Paddy?
Infine, aggiungo una pagina per "Come usare le pagine". Ho incluso le istruzioni predefinite su come aggiungere una pagina alla tavola da disegno e su come modificare il testo predefinito della "home page".
Mancia: se hai mai bisogno di posizionare accuratamente i tuoi elementi, seleziona un elemento e premi Opzione sulla tua tastiera. Mentre il mouse passa sopra gli altri elementi della tavola da disegno, gli indicatori trasmetteranno le esatte distanze dei pixel tra di loro.
La prossima cosa che dobbiamo impostare è la guida allo stile. Ho creato una nuova pagina e, avete indovinato, l'ho chiamata "Guida allo stile". Come ogni altra guida di stile, questo ha lo scopo di introdurre gli utenti ai diversi stili utilizzati nel file. All'interno della guida allo stile ho intenzione di discutere i colori, la tipografia e gli stili di livello, inclusi gli stili di linea delle frecce (solido o tratteggiato).
Nel design originale dei diagrammi di flusso ho finito per usare nove colori diversi, quindi creiamo una nuova tavola da disegno solo per loro. Metti tutti i colori nella pagina e nominali. La bella roba arriva dopo!
Ora aggiungerò questi colori come stili. In questo modo, se qualcuno vuole personalizzare i colori dei diversi elementi che possono.
Innanzitutto, la sintassi: Stili / Colore / Nome colore. Così, Stili / Colore / Errore rosso o Stili / Colore / Sfondo blu. Una volta che hai finito di aggiungerli, guarda e ammira come ordinatamente ordinati quei colori appaiono nel Stile di livello cadere in picchiata! Inoltre, puoi vedere che ci sono degli stili rimasti nel tutorial originale. Ci organizzeremo un po 'più tardi.
La prima ragione per tutti i colori presentati è mostrare cosa è in uso (come dovrebbe essere una guida di stile). Il secondo motivo è per ricolorare facilmente. Ciò non si applica a tutti i diversi elementi in uso (come il testo), ma potrebbe facilmente influire su quelli con uno sfondo come il sì e No annotazioni. Cercheremo di fare esattamente quello dopo.
Torna alla pagina dei simboli. Successivamente, applica gli stessi stili che abbiamo appena creato agli elementi Azione, Etichetta, Sì e No. In questo modo, se decidi che non vuoi più che il Sì sia giallo ma verde, tutto ciò che devi fare è aggiornare il colore nella guida Stile e tutti i Sì nell'intero file di Sketch cambieranno colore.
Per rendere il tuo flusso di lavoro un po 'più semplice, potresti voler salvare i colori nei colori del documento. Questo renderà loro più facile l'accesso in ogni momento.
Se ti piace organizzarti, ti suggerisco di scaricare il plugin Sort Me. Ordina sia i livelli che le tavole da disegno, alfabeticamente e numericamente (o anche invertendo). Ecco alcune altre risorse di efficienza per Sketch:
La prossima guida di stile che dobbiamo creare è per la tipografia. Vogliamo visualizzare tutti gli stili di testo nel documento e voglio dividerli in due categorie, i testi dei documenti (come nel manuale e nella guida di stile qui) e quelli nei diagrammi di flusso.
Vorrei ora mostrarti come riorganizzare gli stili di testo correnti e rinominarli (se necessario). Dal Stile del testo Scorri verso il basso, seleziona l'ultima opzione Organizza gli stili di testo ... Questo farà emergere una nuova finestra che è piena di ognuno dei tuoi stili di testo. Se fai doppio clic su uno, puoi rinominarlo. Voglio che tu li rinomino come segue:
Voglio anche che tu rinomini tutti e tre i "Testi manuali" in "Testo del documento". Abbiamo creato i nomi iniziali con l'intenzione di usarli semplicemente nella documentazione del Manuale dell'utente, ma da allora abbiamo aggiunto la guida allo stile rendendo la convenzione di denominazione non più accurata. Come puoi vedere rinominare gli stili del testo è semplice. Se scrivi un nome errato o la convenzione di denominazione deve essere aggiornata, non è un problema!
Mancia: l'icona piccola meno [-] nell'angolo in basso a sinistra cancella lo stile selezionato. Ma fai attenzione: non c'è annullamento e non ti chiedi se sei sicuro.
Aggiorna lo stile del testo nella guida di stile per aggiornare la tipografia nell'intero file (proprio come con i colori).
Questa sarà l'ultima tavola da disegno sotto la sezione della guida di stile. Qui discuteremo come ricolorare e trattare gli elementi rimanenti, il simbolo della pagina e il simbolo di annotazione della decisione. Discuteremo le frecce per ultime, subito dopo aver terminato la sezione degli stili condivisi.
Se guardi indietro alla sezione dei colori, ti ricorderai che avevamo alcuni stili aggiuntivi che ho detto che organizzeremo in seguito. Bene, ora è il momento! L'idea è esattamente la stessa che con l'organizzazione degli stili di testo. Scegli di organizzare lo stile del livello; puoi rinominarli, organizzarli ed eliminarli tutti proprio come con gli stili di testo.
Per gli stili di livello, voglio che tu mantenga ogni singolo stile / colore / ... che abbiamo creato in precedenza. Quindi, rinomina il resto come segue:
Mancia: premendo il tasto Tab non si sposta verso il basso l'elenco dei nomi di stile come nella lista dei livelli. Invece, in questa finestra, il tasto Tab rende il nome dello stile selezionato modificabile o meno. Attiva o disattiva una o due volte per vedere esattamente cosa intendo!
Ricorda l'icona meno [-] che ho menzionato prima? È per eliminare gli stili. Ho bisogno che tu cancelli Sfondo grigio. È un residuo della mia esplorazione iniziale del design e non è in uso da nessuna parte.
Infine, chiudi la finestra, seleziona lo sfondo della Annotazione decisionale e seleziona Crea un nuovo stile di livello, dal menu a discesa. Assegna un nome al nuovo stile "Sfondo / Decisione". Andremo avanti e regoleremo gli stili di questi ora, nella pagina di guida dello stile. Copia gli sfondi dall'annotazione della decisione e dagli elementi della pagina.
Tornando alla guida di stile, incolla i due sfondi nella tavola da disegno Frecce e elementi. (Sto solo andando a copiare oltre la pagina e la decisione di annotazione.)
Solo per darti un esempio concreto di come cambiare lo stile e aggiornarlo universalmente, voglio che procediamo e cambiamo lo stile di sfondo della Annotazione della Decisione. Questo è il motivo per cui ti ho creato uno stile Layer separato, quindi non avrebbe influenzato l'annotazione dell'azione. Passa a tutto ciò che vuoi, non deve corrispondere al design. Aggiungi un bordo 1px con un colore a tua scelta e un nuovo colore di sfondo.
Una volta che hai finito, dal Stile di livello menu a discesa selezionare Aggiorna stile layer. Se vai alla pagina del diagramma di flusso di esempio o alla pagina dei simboli, vedrai che gli stili sono stati aggiornati. Questo è un ottimo esempio degli stili di aggiornamento in azione. Questo è esattamente quello che dovresti aspettarti se dovessi aggiornare il documento per un nuovo stile di design, come i diversi colori del marchio.
Mancia: se cambi lo stile di un elemento con uno stile di livello su di esso, puoi riportarlo allo stile originale selezionando Ripristina stile layer.
Ok, ci siamo imbattuti nelle risorse finali e si tratta di frecce! Ho lasciato il meglio per ultimo, naturalmente. Per prima cosa, dobbiamo aggiungere frecce alla nostra guida allo stile. In questo momento abbiamo solo un tipo di freccia a nostra disposizione. Tuttavia, se ricordi durante la pulizia dello stile di livello, abbiamo avuto una linea continua e una linea tratteggiata. Aggiungiamo le frecce tratteggiate alla nostra collezione.
Nella pagina dei simboli, voglio che copi la prima freccia, Freccia / Predefinito / Destra, e rinominala Freccia / Punteggiata / Predefinita / Destra. Seleziona la linea della freccia e da Stili di livello menu a discesa selezionare Linea della freccia poi punteggiato. E questo è tutto! Abbiamo la nostra prima freccia tratteggiata.
Altre due cose qui. In primo luogo, andare avanti e quello alle frecce rimanenti. Attenersi alla convenzione del nome Arrow / Punteggiata / ... per mantenere una organizzazione ben organizzata simboli cadere in picchiata. Parlando di convenzioni e sintassi dei nomi, la seconda cosa che dovresti fare è rinominare ogni singola delle frecce della linea continua originale. Il simboli il dropdown sarà disordinato se non lo fai.
Usa il plugin Rename It Sketch per renderlo più fluido per te! Selezionare Plugin> Rinomina> Trova e sostituisci livelli / nomi di tavole da disegno. O puoi premere il Controllo + Opzione + Comando + R per far apparire la finestra del plugin. Lì, digita Arrow / Default o Arrow / S-Shape e sostituiscilo con Arrow / Solid / Default e Arrow / Solid / S-Shape e così via. Assicurati che l'ambito di ricerca corrente sia selezionato su Pagina corrente invece di Strato.
L'ultima cosa quando si tratta di frecce sono i punti di partenza e di arrivo. Nel primo tutorial ti ho mostrato come aggiungere diversi esempi come un contorno. Aggiungi tutti gli stili che vuoi, poi quando hai finito non dimenticare di includere tutti i nuovi e fantastici punti di partenza e di arrivo anche nella guida allo stile.
E con questo, abbiamo finito di creare la guida allo stile!
Lo scopo di questo tutorial era di costruire quello originale e insegnarti modi più fantastici per usare Sketch. Allo stesso tempo, questo avrà mostrato alcuni modi pratici per migliorare e impacchettare tutti i tuoi file di Sketch per renderli più utilizzabili per i membri del team e i clienti.
