Share
Ce veți creaÎn acest tutorial, vom crea diagrame flux reutilizabil de utilizatori și flux de sarcini în Sketch. Vom valorifica puterea simbolurilor Sketch, folosind elemente de bază și câteva personalizări, pentru ca simbolurile noastre să funcționeze pentru noi.
"Diagrama [A] este o diagramă a succesiunii mișcărilor sau acțiunilor oamenilor sau lucrurilor implicate într-un sistem sau activitate complexă" - Naema Baskanderi
Pentru a construi diagramele noastre de flux vom avea nevoie de elemente pentru pagini, săgeți, acțiuni (inclusiv decizii și indicatori da / nu), etichete și note. Voi trece peste fiecare dintre aceste elemente, cum ar trebui să arate (dacă vă simțiți înclinați să copiați stilul meu), cum ar trebui să funcționeze și cum se potrivesc în imaginea de ansamblu. Dar înainte de a face asta, trebuie să trecem peste convențiile de numire din Sketch. Este unul dintre factorii cheie în a face această lucrare. Haideți să ne scufundăm chiar înăuntru, să o facem?
Simbolurile de schiță sunt perfecte pentru diagramele de fluxDa, avem, și pentru două motive specifice. În primul rând, este o bună practică să păstrați numele straturilor în scopuri organizaționale, mai ales dacă gestionați fișierele cu alte persoane. Când creați un simbol cu mai multe câmpuri de text în acesta, straturile de text numite în mod corespunzător vă vor ajuta să distingeți ce text este atunci când încercați să îl înlocuiți sau să îl înlocuiți.
Al doilea motiv este mult mai răcitor. Schița va grupa automat simbolurile, stilurile de text și stilurile partajate în diferite straturi, presupunând că urmați o anumită sintaxă. Schița se bazează pe convenții de denumire asemănătoare URL-urilor și folderelor, de exemplu, următoarele două simboluri vor fi grupate împreună.
Atunci dacă vom numi un altul:
va fi, de asemenea, grupat sub săgeți, dar într-o subfoldere diferită: Implicit. Această categorizare ne permite să găsim exact simbolul de care avem nevoie atunci când avem nevoie de el:
Simboluri organizate în SketchȚineți cont de acest lucru atunci când numiți ceva înainte, în special straturile de text, simbolurile și stilurile comune.
"Pagina" este o parte fundamentală a diagramei noastre de flux. Utilizatorii de site-uri web sau de aplicații vor urma diferite rute, vor îndeplini diverse sarcini, iar paginile vor fi întotdeauna centrale în acest sens.
Pentru a crea elementul de pagină avem nevoie de un dreptunghi și un câmp de text deasupra acestuia. Stilurile dreptunghiului includ # 325372 pentru culoarea Helvetica Neue, greutatea medie și dimensiunea fontului 11. Puteți crea un stil comun pentru aceasta deoarece celelalte elemente vor avea aceeași tipografie, deși elementul de pagină va folosi majuscule. Pentru a face acest lucru, în conformitate cu Opțiuni, modificați transformarea textului la majusculă.
Dreptunghiul este de 144px-96px cu o rază de 5, # F7FCFD pentru fundal și # B7E7EE pentru marginea interioară de 1px. Este o idee bună să transformați cel puțin stilul dreptunghiului de pagină într-un stil comun. Acest lucru va permite editarea ușoară mai târziu.
Redenumiți stratul de text în "Nume pagină". Astfel, când reutilizați acest element ca un nou simbol, suprascrierea textului va avea un titlu în loc de "text". Selectează-le pe ambele și convertește-le într-un singur simbol prin Creați simbol butonul din bara de instrumente.
În acest tutorial, vom crea mult de simboluri. Schița nu are o comandă cheie specifică pentru acest built in, dar putem face o comandă rapidă personalizată pe noi înșine.
Mai întâi, du-te la Preferințe sistem și intră Tastatură. Selectează Comenzi rapide din partea de sus. În panoul din stânga selectați Comenzi rapide pentru aplicații și apăsați tasta + buton. Se va afișa o suprapunere; în lista de aplicații localizați Schiță. Sub Titlul meniului trebuie să completați numele specific al elementului de meniu pe care îl vizăm, care este în acest caz Creați simbol (este primul element de meniu de sub Strat). În sfârșit, alegeți comanda rapidă de la tastatură și asta este.
Pro tip: acest lucru poate fi folosit pentru orice aplicație.
Realizarea unei comenzi rapide personalizate de la tastatură pentru SketchPuteți face cât mai multe stiluri de săgeți diferite pe cât vă place, dar ideea aici este să vă arătați cum să creați o singură săgeată ajustabilă pentru a începe. Puteți adăuga stilul și variantele proprii mai târziu.
După cum puteți vedea în imaginea de mai sus, săgeata va lua multe forme; trebuie să fim inteligenți în ceea ce-l creăm. În primul rând, avem nevoie de un punct de pornire și un punct final. În cazul meu, este un cerc deschis și un triunghi. Triunghiul este o pictogramă SVG pe care am găsit-o în Proiectul Noun. Poți să faci singur un triunghi simplu sau să folosești o pictogramă.
eu folosesc # 325372 pentru săgeată, la marginea cercului și pentru linie. Cercul are un fundal alb #FFFFFF de asemenea. Acum, transformați-i pe amândoi în simboluri și numiți-i după ce sunt. Dacă doriți să mergeți puțin nebun și să creați simboluri individuale pentru ca triunghiul să fie în sus, în jos, la stânga sau la dreapta, atunci mergeți pentru el. Dar nu este necesar.
Următorul este linia însăși. Creați o singură linie de pixeli cu instrumentul de linie. Oricare ar fi stilul pe care îl aveți aici, transformați stilul liniei într-un stil comun. Am doua; stiluri solide și punctate pentru săgețile primare și secundare. A avea mai multe stiluri partajate va face schimbarea mai ușor între ele. Mai multe despre asta mai târziu.
Apoi, va trebui să creați fiecare tip de săgeată prin combinarea punctului de pornire, a liniei și a punctului final. Săgețile trebuie să fie interschimbabile pentru crearea diagramei, așa că hai să facem asta acum.
Mai întâi, să creăm o tablă de artă pătratică. Un pătrat ne va ajuta să păstrăm totul în aceeași formă, iar săgețile vor fi mai ușor de lucrat atunci. Mina este de 80px la 80px. Vreau să încep prin crearea unei tablouri de artă pentru fiecare săgeată. În acest fel, voi putea să le văd imediat. Să începem prin crearea mai întâi a săgeților orientate spre stânga, dreapta, sus și spre fund. Acum, selectați săgețile și le transformați în simboluri așa cum am făcut. Nu uitați să utilizați și comanda rapidă recent creată. Denumiți aceste simboluri, Săgeată / Implicit / Stânga, Săgeată / Implicit / Dreaptă și așa mai departe (obțineți ideea).
Acum, că săgețile mai ușoare sunt îngrijite; să trecem pe cele curbate. Această parte este crucială pentru că avem nevoie de săgeți pentru a fi ușor de redimensionat și reglabil. Voi merge mai departe și creați unul pentru fiecare dintre cele trei stiluri.
În cadrul noilor tablouri de artă, cu o dimensiune de 80px și 80px și cu ajutorul instrumentului vectorial (V), trageți linia săgeții pentru stilurile L-Shape, S-Shape și U-Shape. Asigurați-vă că liniile dvs. sunt pătrat. Nu faceți încă nici o curbă. Dacă întâmpinați probleme în a face linii perfecte, plasați punctele mai mult sau mai puțin acolo unde ar trebui să fie, apoi editați manual locația prin introducerea pozițiilor X și Y.
Uitați-vă la imagine. Apoi, trebuie să editați curbele. Pentru fiecare linie selectați doar punctele care alcătuiesc colțurile. Nu selectați punctele de început sau de sfârșit. În partea dreaptă, creșteți numărul colțului la ceea ce doriți. Am setat-o pe 10px. Acum, colțurile vor fi redimensionate automat fără a distorsiona linia.
Ultimul lucru pe care trebuie să-l facem este să adăugăm punctele de început și sfârșit. Dar înainte de a face, să transformăm liniile (doar liniile de acum) în simboluri. Vrem ca linia să fie ajustabilă pe baza obiectivelor sale efective, începutul și sfârșitul acesteia, cu excepția icoanelor din capete. Vom adăuga punctele de început și sfârșit într-un minut. Denumiți aceste trei săgeți Arrow / L-Shape / Right-Down, Arrow / S-Shape / Right-Down-Right și Arrow / U-Shape / Right-Down-Left.
Acum, faceți dublu clic pe oricare dintre simbolurile nou create pentru al edita. Vrem să așezați punctele de început și de sfârșit la marginea simbolului și centrul să-l aliniați cu punctele de capăt ale liniei. În mod ideal, doriți să amplasați punctele de început și de sfârșit centrate pe colțul tablourilor de bord ale simbolului.
În cele din urmă, pentru a face ca săgețile să poată fi redimensionate, atât pentru punctul de pornire, cât și pentru punctul final, selectați opțiunea de odihnă fixați lățimea și fixați înălțime. De asemenea, nu uitați să le redenumiți la punctul de pornire și la punctul final. Această schimbare de nume va face mai ușor să știți care este cea care se schimbă atunci când se schimbă tipurile.
Trebuie să repetăm acest lucru cu săgețile rămase, inclusiv direcțiile rămase ale săgeților L-Shape, S-Shape și U-Shape. Realizați-o repetând pașii anteriori.
Puteți avea cât mai multe stiluri de săgeți pe care le doriți; punctat, spart, solid sau orice altceva. Partea plictisitoare este că veți crea un nou set de săgeți pentru fiecare stil, dacă doriți să utilizați mai mult de unul în același fișier. Altfel, trebuie doar să actualizați stilul partajat. Nu uitați să reglați convențiile de denumire în săgeți / S-forma / dreapta-în jos-dreapta / dotate sau săgeată / punctat / formă S / dreapta-jos-dreapta.
Cred că cea mai importantă dezvoltare este în spatele nostru. Elementele rămase nu sunt foarte complicate. Elementele de acțiune de aici cuprind elementele pentru indicatorii da / nu, o decizie, o singură etichetă de acțiune.
Da și niciun indicator nu ne permite să ilustrăm punctele din diagrama noastră în care direcția fluxului este afectată de acțiunea "da" sau "nu".
Acești indicatori sunt simpli (cel puțin în comparație cu săgețile). Le-am făcut prin descărcarea a două icoane din Proiectul Noun. Aici este un link către cec și un link către X. icoanele proiectului Noun Project sunt albe, #FFFFFF. În timp ce culoarea de fundal este # F89B8D pentru 👎 și # FECD75 pentru 👍🏿.
Transformați-le în simboluri și numiți-le Adnotare / Da-Nu / 👎 și Adnotare / Da-Nu / 👍🏿 (da, emojis sunt acceptate.)
Procesul de creare a acestui element este foarte similar cu realizarea elementului de pagină. Creați un pătrat (mine este 126px la 126px) și rotiți-l sau transformați-l la un unghi de 45º. În plus, am adăugat o rază de 5px pe piață. Culoarea sa de fundal este # F2F2F2 , fara limita. Salvați-l ca pe un stil comun. Peste pătrat avem nevoie de o zonă de text. Mi-am denumit stratul de text "Decizia". Rețineți că denumirea straturilor este importantă. Puteți să refolosiți stilul textului partajat dacă l-ați salvat înainte. Dacă nu, stilul pentru text este # 325372 pentru culoare, Helvetica Neue, greutate medie, 11 dimensiune font. Dacă copiați stilurile mele, convertiți stilul textului și al pătratului în stiluri partajate.
În cele din urmă, este timpul să transformăm decizia într-un simbol. O voi numi Adnotare / Decizie.
Eticheta cu o singură acțiune va reutiliza stilurile din elementul de decizie. Este un dreptunghi; a mea este de 117x24 pixeli. Reutiliți același stil de la indicatorul de decizie atât pentru dreptunghi cât și pentru text. Nu uitați să denumiți stratul de text; Mi-am numit "Acțiunea". Transformați-l într-un simbol și denumiți simbolul Adnotare / acțiune. Și am terminat aici; Următor →!
Ultimele două lucruri de pe lista noastră vor fi notele și elementele de etichetare. Să începem cu eticheta. Acesta este un pic cam complicat, dar nu putem face nimic. Pentru a face forma mai ușoară, puteți copia dreptunghiul și textul din acțiunea pe care am făcut-o înainte. Avem nevoie de un dreptunghi, a mea este de 117px-24px, cu o rază de 5px. Are # 6FCFDB pentru fundal. Apoi, zona de text. Reutiliți stilul textului de la indicatorii de acțiune sau de decizie. Apoi, creați un nou stil comun denumit text de etichetă și recolorați textul #FFFFFF. Apoi, transformați-le într-un simbol încă o dată (utilizați comanda rapidă și obișnuiți-vă să fiți acolo)
Faceți dublu clic pe simbolul nou creat și selectați stratul de text. Trebuie să editați proprietățile de redimensionare. Trebuie să-l prindem la marginea stângă și dreaptă a obiectului. Uneori, Sketch face acest lucru automat pentru dvs., dar nu întotdeauna, de aceea este mai bine să faceți dublu control.
În cele din urmă, avem notele. Stilul pe care îl am pentru acestea este după cum urmează: # A4A4A4 pentru culoarea textului, Helvetica Neue, greutate obișnuită de această dată și 11 dimensiuni de font. Acest lucru este diferit de orice altceva de până acum, așa că nu face textul notei într-un simbol. Adăugați-l doar ca stil comun.
Acum, am terminat cu formele și elementele de bază, acum putem pune împreună diagramele de flux.
Imaginea de mai sus prezintă toate simbolurile diferite pe care le am la dispoziție. Aceasta este o colecție destul de mare - și am încercat să o păstrez fără prea multe personalizări. Imaginea de mai jos vă arată o diagramă de eșantioane pe care am creat-o folosind aceste simboluri.
Tot ce trebuie să faceți este să selectați elementul de care aveți nevoie din secțiunea simboluri și să aranjați o diagrama de flux în tabloul de bord.
Bine facut pentru urmarirea tuturor acestor pasi! Acum aveți un fișier Sketch destul de interesant, care vă va lăsa ușor pe dvs. sau pe echipa dvs. să creați diagrame pentru fluxul de utilizatori și sarcini!
Următorii pași ar putea implica crearea unui ghid de stil pentru diagramele de flux; moduri de a schimba cu ușurință culoarea, tipografia și altele asemenea. Poate, de asemenea, crearea de documentație în fișierul dvs. Sketch dacă aveți de gând să-l utilizați cu coechipierii dvs. sau dându-l departe ca freebie. Rămâi acordat pentru tutoriale pe aceste teme în curând!
Accentsconagua