Cum să creați un ghid de stil de schiță, o bibliotecă și un kit UI

Fiecare proiect de design poate beneficia de un ghid de stil bine gândit. Utilizați acest tutorial pentru a crea un kit de interfață de utilizare și pentru a crea simultan o bibliotecă personalizată (și reutilizabilă) pentru prototipare rapidă.

Fie că sunt un expert în Sketch sau sunt începători în Sketch, designerii vor descoperi că crearea de ghiduri de stil în Sketch poate fi o resursă valoroasă pentru setul lor de instrumente de proiectare, care poate economisi mult timp.

Un ghid de stil nu numai că ajută la menținerea constantă a lucrurilor, dar permite și actualizări ale elementelor precum culorile și pictogramele din mai multe documente, cu mult mai puține bătăi de cap. Acest tutorial parcurge procesul pas cu pas de creare a unui ghid de stil și a unui kit UI și le va oferi designerilor o mai bună înțelegere a simbolurilor Sketch, referindu-se la o bibliotecă Sketch pentru design-urile lor și încredere în organizarea elementelor lor de design.

Crearea ghidului de stil de schiță

„Un ghid de stil este un „document viu” cuprinzător care ține evidența tuturor elementelor care se repetă pentru un proiect, de la regulile de branding până la cantitatea de teșire pentru butoanele de îndemn la acțiune”, potrivit UXPin. Un ghid de stil poate include orice, de la simple elemente vizuale până la vocabular și imagini aprobate. Acest tutorial acoperă organizarea, culorile, pictogramele, fonturile, stilurile de text și elementele.

Pasul unu: organizare

1. Creați un folder principal pentru a stoca fișiere de schiță, pluginuri și alte active necesare, cum ar fi fonturile și iconografia. (Pluginurile vor fi discutate la sfârșitul tutorialului.)
2. Porniți un nou fișier Sketch și numiți-l „ Clientname Library”. De exemplu, dacă clientul dvs. este Toptal, atunci fișierul dvs. ar trebui să fie numit „Biblioteca Toptal”.

Pasul doi: Culori

Dacă culorile au fost deja selectate, următorul pas este să vă convertiți culorile în simboluri.

1. Pentru a face acest lucru, faceți pătrate de aceeași dimensiune și schimbați-le culorile în consecință. Faceți clic pe „Creați simbol” și salvați aceste elemente folosind sistemul de etichetare color/ @color-name . Color/@pink , color/@background-grey sau color/@FFFFF sunt exemple de etichete adecvate. Convențiile de denumire sunt importante pentru a menține organizat un ghid de stil, așa că un format pentru tot ar trebui stabilit și respectat încă de la început.
2. Odată finalizat, adăugați-le la pagina de ghid de stil.
3. Salvați eșantionul de culoare în secțiunea de documente a paletei dvs. de culori.

Comenzi rapide utile: R - instrument dreptunghi, T - instrument text, alt - măsurare distanță.

Pasul trei: Pictograme

Transformarea pictogramelor în simboluri dinamice permite schimbarea cu ușurință a culorii acestora în oricare dintre culorile salvate în Pasul doi de mai sus. Aceasta înseamnă că, după ce o pictogramă este plasată într-un design, culoarea poate fi schimbată printr-un meniu derulant simplu, numit „override”, folosind „Inspector” din dreapta pânzei.

1. Salvați pictograma ca simbol (dacă este posibil, rămâneți la .svg pentru tipul de material).
2. Accesați pagina cu simboluri, găsiți pictograma și mascați-o cu o culoare implicită din culorile salvate anterior. Pentru a face acest lucru, suprapuneți simbolul de culoare deasupra pictogramei și faceți clic pe „Mască” în bara de instrumente (sau faceți clic dreapta și selectați „Mască” din meniul pop-up).
3. După ce pictograma este mascată, eliminați umplerea debifând caseta de selectare din secțiunea „Umpleri” din Inspector.
4. Organizați pictogramele în pagina de ghid de stil. În aceeași secțiune, este util să specificați culoarea pentru pictogramele active și inactive, plus orice alte specificații importante de culoare.

Pasul patru: Stiluri de text

Odată ce fonturile au fost alese, este timpul să specificați stilurile de text: H1, H2, H3, H4, H5, corp, linkuri, subtitrări, etichete etc. O referință bună pentru tipografia web este această postare pe blog de Typecast.

1. Alegeți dimensiunea, greutatea, caracterul și spația dintre linii pentru cât mai multe stiluri este necesar.
2. Scrieți un cuvânt („Type Something” apare automat când apăsați T, instrumentul de text) și formatați-l pentru a reflecta detaliile de stil alese.
3. Faceți clic pe „Creați un nou stil de text”.
4. Organizați stilurile de text în pagina de ghid de stil.

Pasul cinci: active

Acum pentru partea distractivă. Este timpul să combinați toți pașii anteriori pentru a crea niște active. Dacă activele au fost deja create, pentru coerență, cel mai bine este să le recreați folosind stilurile de text, pictogramele și culorile pe care le-ați ales deja. De exemplu, ar putea exista multe culori diferite de gri în documentul de proiectare de lucru pe care un design nu le-a luat în considerare, astfel încât recrearea activului va garanta consistența culorii alese. Nu uitați să păstrați consecvența denumirii și asigurați-vă că adăugați elemente în pagina ghidului de stil pe măsură ce sunt create.

Iată câteva elemente sugerate pentru a lucra:

Butoane

1. Faceți aceste simboluri dinamice, la fel ca și pictogramele, mascând butonul în culoarea implicită și eliminând umplerea.
2. Pentru a păstra textul centrat în orice moment, întindeți lățimea casetei de text pentru a fi aceeași cu butonul și centrați textul.
3. Pentru a asigura coerența, asigurați-vă că utilizați stilurile de text salvate.
4. Salvați aceste elemente ca simboluri folosind sistemul de denumire a butoanelor/butonului .
5. Utilizați funcția de înlocuire pentru a schimba etichetele și culorile.

Bare de căutare

1. Aplicați constrângeri de redimensionare câmpului de căutare și pictogramelor și textului utilizate în câmpul însuși.
2. Nu uitați să aplicați stiluri de text și culori salvate anterior în paleta de culori a documentului.
3. Salvați acest element ca simbol folosind căutarea ca titlu sau, dacă aveți diferite tipuri de căutare, respectați sistemul de etichetare, cum ar fi căutare/standard și căutare/fără pictogramă .

Butoane radio și casete de selectare

1. Este posibil să aveți un simbol într-un simbol și o modalitate bună de a-l testa este să creați elemente inteligente pentru butoane radio și casete de selectare.
2. Mai întâi, creați activul butonului în sine. Salvați acest element ca simbol utilizând caseta de selectare/selectat și caseta de selectare/deselectat ca exemplu de etichetare.
3. Acum creați intrarea. Adăugați text substituent lângă simbolul casetei de selectare și apoi convertiți întregul material într-un simbol. Deoarece aceasta este acum o intrare, se recomandă salvarea activului ca atare, deci o etichetă bună ar fi input/checkbox/selectat și input/checkbox/deselectat .

Pasul șase: Folosiți Ghidul de stil!

Efectuarea tuturor acestor lucrări pentru a crea un ghid de stil este utilă numai dacă de fapt face ca un proiect să se desfășoare mai bine. Odată ce toate activele au fost create, este timpul să aplicați biblioteca documentului proiectat. În Sketch, accesați „Preferințe ‐> Adăugați bibliotecă...” și adăugați documentul bibliotecii.

După ce ați adăugat o bibliotecă la fișierul de proiectare a proiectului, puteți accesa biblioteca și simbolurile acesteia în secțiunea de simboluri. Veți observa biblioteca iOS UI Design care vine cu Sketch ca opțiune de bibliotecă, precum și biblioteca care a fost importată recent.

Dacă doriți să actualizați un simbol, faceți dublu clic pe simbolul însuși și ar trebui să apară documentul din bibliotecă. După ce ați făcut modificările, reveniți la documentul de proiectare și faceți clic pe butonul de actualizare din colțul din dreapta sus.

Bonus: importarea/exportarea stilurilor de text

Stilurile de text nu sunt salvate cu o bibliotecă, dar pluginul Stiluri de text partajate pentru Sketch rezolvă asta. După ce ați descărcat pluginul, mergeți la documentul bibliotecii și apoi la meniul: „Plugins ‐> Shared Text Styles ‐> Export…” Salvați acest fișier în același folder ca și documentul bibliotecii. Apoi, în documentul de design, accesați din nou meniul: „Plugins ‐> Shared Text Styles ‐> Import Text Styles…” și importați fișierul pe care tocmai l-ați salvat. Vor apărea stilurile dvs. de text.

Bonus: importarea/exportarea paletelor de culori

Similar cu stilurile de text, culorile documentului nu se salvează cu o bibliotecă Sketch, dar pluginul Sketch Palettes rezolvă acest lucru. La fel ca mai sus, exportați paleta folosind „Plugins ‐> Sketch Palette ‐> Document Colors ‐> Save Palette” și importați-o cu „Plugins ‐> Sketch Palette ‐> Document Colors ‐> Load Palette”. Nu uitați să-l salvați în același dosar cu celelalte documente din bibliotecă.

Bonus: Fonturi

Craft by InVision este o suită de plugin-uri care duc software-ul Sketch la nivelul următor. Craft vă permite să înlocuiți imagini cu fotografii de stoc, să prototipați și să vă sincronizați cu InVision, să creați biblioteci și multe altele. Dacă Craft este descărcat, apăsați „cmd-shift-c” în document și se va genera o foaie de stil. Fonturile vor fi listate aici.

Urmând cei șase pași menționați mai sus, atât proiectele de design mari, cât și cele mici vor funcționa mai bine, iar rezultatul final va fi mai șlefuit. Dacă sunt unice sau foarte specifice, ghidul de stil, Biblioteca și kitul UI pot fi folosite pentru un singur client sau pentru multe proiecte dacă elementele UI standard sunt create în mod constant, cum ar fi wireframes și prototipuri. Dedicarea timpului, la început, pentru a crea aceste componente Sketch UI în mod corespunzător, va economisi mult timp pe linie și, potențial, în multe proiecte.

Citiri suplimentare pe Blogul Toptal Design:

• De ce startup-urile au nevoie de un ghid de stil
• Lucruri pe care este posibil să nu le știi despre tipografie în schiță
• Lista finală a celor 50 dintre cele mai bune pluginuri Sketch
• Adobe XD vs. Sketch - Ce instrument UX este potrivit pentru tine?
• Cum să construiți un cadru de design eficient (Include un cadru gratuit de interfață de utilizare pentru schiță)