Accentsconagua
Share
Ce veți creaÎntr-un timp în urmă am publicat un tutorial privind crearea unui fișier personalizat Sketch cu diagrame de flux reutilizabile. Este o resursă excelentă pentru crearea propriilor fluxuri de utilizatori sau sitemap-uri. În acest tutorial vom încerca să îmbunătățim fișierul Sketch pentru al face mai ușor de utilizat.
Este posibil să aveți colegi care doresc să vă folosească dosarul sau să plătească clienți. Oricum, îmbunătățirile pe care le facem la dosar vor însemna că alții îl pot deschide, îl pot înțelege și îl pot folosi.
Vă recomandăm să mergeți înainte și să citiți tutorialul original. Cel puțin, prindeți fișierul Final Sketch pentru a începe pe piciorul drept și urmați împreună cu această a doua parte. Acest tutorial este jam-packed cu Sketch sfaturi și trucuri, unele sfaturi de aici și acolo, precum și câteva plugin-uri conexe pe care trebuie să încercați pentru tine.
Primul lucru pe care îl vom face este crearea unei noi pagini. Sună-mi "Manualul utilizatorului". Această pagină va servi drept o scurtă prezentare a modului de utilizare a elementelor diagramei de flux. Îl vom folosi pentru a explica rolul fiecărui element, cum să îl folosiți și cum să-i manipulați proprietățile, cum ar fi punctele de pornire pentru săgeți.
Vom începe cu o nouă placă de desen, o sun pe a mea "Cum să folosiți săgețile". presa A pentru a crea un nou Artboard și selectați din colțul din dreapta sus Dimensiunea hartiei și Scrisoare. Schița va plasa automat tabloul de bord cu dimensiunea potrivită pentru tine (aceasta funcționează și cu dimensiunile ecranului desktop și mobile!).
Dimensiunile hârtiei pentru Artboards în SketchVreau ca utilizatorii noi să înțeleagă câteva lucruri, inclusiv cum să selectați o linie și să o plasați pe o tablă de artă, cum să schimbați forma și cum să modificați punctele sale de început și sfârșit. Modul în care explicați aceste lucruri este alegerea voastră; descrierile și instrucțiunile specifice vă stau la dispoziție. Am îmbunătățit descrierile mele prin includerea unor screenshot-uri.
La fel ca și simbolurile sau stilurile de straturi, putem organiza și stiluri de text. Pentru aceste pagini manuale am trei stiluri diferite de text, H1, H2, și corp.
Mele H1 este Helvetica Neue, Regular, cu dimensiune de 24px cu înălțimea de 30px. H2 este Helvetica Neue, Bold, 14px în dimensiune cu înălțimea de linie de 20px. corp este Helvetica Neue, Regular, dimensiune de 12px cu înălțimea de 20px. Toți trei folosesc culoarea # 325372.
Putem folosi sintaxa organizației Sketch pentru a obține aceste stiluri organizate în meniul derulant. Le-am numit după cum urmează, pe care o puteți vedea reflectat în meniul de mai sus:
Îmi place asta - face ca fișierele mele Sketch să fie mult mai organizate!
Următoarea pagină din manualul utilizatorului va discuta adnotările. Pentru a economisi timp, copiați pagina săgeții și editați textul și imaginile pentru a reflecta adnotările. Pentru adnotări trebuie să discutăm următoarele: adăugarea la o pagină, selectarea unei adnotări diferite și redimensionarea.
În tutorialul inițial, ne-am asigurat că adnotările Action și Label au fost redimensionate manual cu proprietățile native ale Sketch. Cu toate acestea, dacă doriți să utilizați un plug-in cool pentru a face redimensionarea pentru dvs., vă pot sugera descărcarea și utilizarea butonului Rebel sau Paddy?
În sfârșit, adaug o pagină pentru "Cum să folosești paginile". Am inclus instrucțiunile implicite despre cum să adăugați o pagină în tabloul de bord, precum și cum să modificați textul implicit "de pagină de pornire".
Bacsis: dacă vreți să plasați cu precizie elementele, selectați un element și apăsați Opțiune pe tastatură. Pe măsură ce mouse-ul se sprijină pe celelalte elemente de pe tabloul de bord, indicatorii vor transmite distanțele precise ale pixelilor între ele.
Următorul lucru pe care trebuie să-l înființăm este ghidul de stil. Am creat o pagină nouă și, ați ghicit-o, l-am numit "Ghid de stil". Ca orice alt ghid de stil, aceasta este menită să introducă utilizatorii diferitelor stiluri utilizate în fișier. În ghidul de stil voi discuta despre culorile, tipografia și stilurile de straturi - inclusiv stilurile liniei de săgeată (solid vs. punctat).
În designul original al diagramelor de flux am ajuns să folosesc nouă culori diferite, așa că să creăm o nouă placă de artă doar pentru ei. Plasați toate culorile pe pagină și denumiți-le. Lucrurile interesante vor urma!
Voi adăuga acum aceste culori ca stiluri. În acest fel, dacă cineva vrea să personalizeze culorile diferitelor elemente pe care le pot.
În primul rând, sintaxa: Stiluri / Culoare / Nume culoare. Asa de, Stiluri / Culoare / Eroare roșie sau Stiluri / Culoare / Fundal albastru. Odată ce ați terminat să le adăugați, arătați și admirați cât de bine sunt organizate aceste culori în Stratul de stil scapă jos! În plus, puteți vedea că există mai multe stiluri din tutorialul original. Vom ajunge la organizarea lor puțin mai târziu.
Primul motiv pentru toate culorile expuse este de a arăta ce se folosește (cum ar fi un ghid de stil). Al doilea motiv este reconstituirea ușoară. Acest lucru nu se va aplica tuturor elementelor diferite în uz (cum ar fi textul), dar ar putea afecta cu ușurință pe cele cu un singur fundal, cum ar fi da și Nu adnotări. Vom încerca să facem exact ce urmează.
Reveniți la pagina cu simboluri. Apoi, aplicați aceleași stiluri pe care tocmai le-am creat elementelor Action, Label, Yes și No. În acest fel, dacă decideți că nu mai doriți ca culoarea Da să fie galbenă, ci verde, tot ce trebuie să faceți este să actualizați culoarea în ghidul Stil și toate fișierele Da din întregul fișier Sketch se vor schimba culoarea.
Pentru a face fluxul de lucru ușor mai ușor, vă recomandăm să salvați culorile în culorile Documentului. Acest lucru le va face mai ușor de accesat în orice moment.
Dacă vă place să fiți organizat, vă recomandăm să descărcați pluginul Sort Me. Se sortează ambele straturi și tablourile de bord, în ordine alfabetică și numerică (sau inversă). Iată câteva alte resurse de eficiență pentru Sketch:
Următorul ghid de stil pe care trebuie să-l creăm este pentru tipografie. Vrem să afișăm toate stilurile de text din document și vreau să le împărțim în două categorii, texte de documente (cum ar fi în manualul și ghidul de stil aici) și cele din diagramele de flux.
Aș vrea acum să vă arăt cum să vă reorganizați stilurile de text actuale și să le redenumiți (dacă este cazul). De la Stilul textului derulați, selectați ultima opțiune Organizați stiluri de text ... Aceasta va scoate o nouă fereastră care este umplută cu fiecare dintre stilurile dvs. de text. Dacă faceți dublu clic pe unul, îl puteți redenumi. Vreau să le redenumiți după cum urmează:
De asemenea, doresc să redenumiți toate cele trei "texte manuale" în "Text document". Am creat numele inițiale cu intenția de a le folosi în cadrul documentației de utilizare a utilizatorului, dar de atunci am adăugat ghidul de stil care face ca convenția de numire să nu mai fie exactă. După cum puteți vedea redenumirea stilurilor de text este simplă. Dacă scrieți greșit un nume sau convenția dvs. de numire trebuie actualizată, nu este o problemă!
Bacsis: pictograma minus mic [-] din colțul din stânga jos va șterge stilul selectat. Dar fiți atenți: nu există nici o revizuire și nu vă întrebați dacă sunteți siguri.
Actualizați stilul textului în ghidul de stil pentru a actualiza tipografia în întregul fișier (la fel ca în cazul culorilor).
Acesta va fi ultimul tablou de artă din secțiunea ghid de stil. Aici vom discuta cum să recolorați și să tratați elementele rămase, simbolul paginii și simbolul de adnotare a deciziei. Vom discuta ultimele săgeți, imediat după terminarea secțiunii de partajare a stilurilor.
Dacă te uiți înapoi la secțiunea de culori, îți vei aminti că avem câteva stiluri suplimentare pe care le-am spus că le vom organiza mai târziu. Ei bine, acum este momentul! Ideea este exact aceeași cu cea a stilurilor de organizare a textului. Alegeți să organizați stilul stratului; puteți să le redenumiți, să le organizați și să le ștergeți la fel ca la stilurile de text.
Pentru stilurile de straturi, vreau să păstrați fiecare din elementele de stil / culoare / ... pe care le-am făcut anterior. Apoi, redenumiți restul după cum urmează:
Bacsis: apăsarea tastei Tab nu navighează în jos numele listei de stil la fel ca în lista de straturi. În schimb, în această fereastră, tasta Tab face ca numele stilului ales să fie editat sau nu. Schimbă-l o dată sau de două ori pentru a vedea exact ce vreau să spun!
Amintiți-vă minus pictograma [-] Am menționat mai devreme? Este pentru ștergerea stilurilor. Vreau să ștergi Fundal gri. Este o rămășiță din explorarea inițială a designului și nu este utilizată nicăieri.
În cele din urmă, închideți fereastra, selectați fundalul adnotării deciziei și selectați Creați un nou stil de strat, din meniul drop down. Denumiți noul stil "Background / Decision". Vom merge mai departe și vom ajusta stilurile acum, înapoi în pagina ghidului de stil. Copiați fundalul din Adnotarea deciziei și din elementele Pagină.
Înapoi în ghidul de stil, lipiți cele două fundaluri în tabloul de arte și elemente. (Doresc doar să copiez peste pagina și adnotarea deciziei.)
Doar pentru a vă oferi un exemplu real de schimbare a stilului și de actualizare universală, vreau să mergem mai departe și să schimbăm stilul de bază al Adnotării deciziei. De aceea am creat pentru dvs. un stil separat de straturi, deci nu va afecta adnotarea acțiunii. Modificați-l la orice doriți, nu trebuie să se potrivească cu designul. Adăugați o margine de 1px cu o culoare aleasă de dvs. și o nouă culoare de fundal.
Odată ce ați terminat, de la Stratul de stil derulați selectați Actualizați stilul stratului. Dacă accesați pagina diagramei de flux sau înapoi la pagina de simboluri, veți vedea că stilurile au fost actualizate. Acesta este un exemplu excelent al stilurilor de actualizare în acțiune. Este exact ceea ce ar trebui să se aștepte să se întâmple dacă ați fi actualizat documentul pentru noul stil de design, cum ar fi diferite culori de marcă.
Bacsis: dacă schimbați stilul unui element cu un stil de strat pe acesta, îl puteți aduce înapoi la stilul original selectând Resetați stilul stratului.
Bine, am dat peste activele finale și totul despre săgeți! Am lăsat cele mai bune pentru ultimul, firește. În primul rând, mai întâi trebuie să adăugăm săgeți în ghidul nostru de stil. Chiar acum avem doar un fel de săgeată la dispoziția noastră. Cu toate acestea, dacă vă amintiți în timpul curățării stilului stratului, am avut o linie solidă și o linie punctată. Să adăugăm săgețile punctate în colecția noastră.
În pagina de simboluri, vreau să copiați prima săgeată, Săgeata / Implicit / Dreapta și să o redenumiți Arrow / Dotted / Default / Right. Selectați linia săgeții și din Styles de strat derulați selectați Arrow line atunci Punctat. Si asta e! Avem prima săgeată punctată.
Încă două lucruri aici. Mai întâi, mergeți mai departe și la celelalte săgeți. Urmează convenția de nume Arrow / Dotted / ... pentru a păstra o organizare bine organizată simboluri scapă jos. Vorbind despre convențiile de nume și sintaxele, al doilea lucru pe care ar trebui să-l faceți este redenumirea fiecărei singure săgeți de linii solide originale. simboluri dropdown va fi dezordonat dacă nu.
Utilizați pluginul Rename It Sketch pentru a face acest lucru mai lin pentru tine! Selectați Plugin-uri> Redenumiți-l> Găsiți și înlocuiți straturile / numele de artboard. Sau puteți apăsa butonul Control + Opțiune + Comandă + R pentru ca fereastra pluginului să apară. Acolo, tastați săgeata / Implicit sau Arrow / S-Shape și înlocuiți-o cu Arrow / Solid / Default și Arrow / Solid / S-Shape și așa mai departe. Asigurați-vă că este selectat domeniul curent de căutare Pagina curenta in loc de Strat.
Ultimul lucru care se referă la săgeți sunt punctele de început și de sfârșit. În primul tutorial i-am arătat cum să adăugați diferite exemple, cum ar fi o schiță. Adăugați cât mai multe stiluri pe care le doriți, atunci când ați terminat, nu uitați să includeți toate punctele noi și minunate de început și de sfârșit în ghidul de stil de asemenea.
Și cu asta, am terminat să creăm ghidul de stil!
Scopul acestui tutorial a fost de a construi unul original și de a vă învăța mai multe modalități minunate de a utiliza Sketch. În același timp, acest lucru va arăta câteva modalități practice de îmbunătățire și ambalare a tuturor fișierelor Sketch pentru a le face mai ușor de utilizat pentru membrii echipei și clienți.
