Proiectare UI mai rapidă cu Simboluri și Stiluri împărțite în schiță

În acest tutorial veți utiliza un design de coș de cumpărături mobil pentru a practica folosind două caracteristici foarte importante în Sketch. Vom acorda o atenție deosebită: "Simboluri" și "Stiluri împărtășite".

Schițează simbolurile

Simbolurile vă permit să duplicați elemente de design și să le reutilizați. Orice modificări pe care le faceți la conținutul unui simbol vor fi reflectate în toate instanțele acelui simbol.

Pentru a crea unul, cu un grup de obiecte selectat, faceți clic pe Creați simbol:

Există două sfaturi importante pentru utilizarea eficientă a simbolurilor. Mai întâi, asigurați-vă că simbolurile dvs. sunt necomplicate. Să luăm exemplul meu antet simbol:

Veți vedea fundalul, bara de stare, eticheta de titlu și pictogramele, toate afișate aici în subfolderele acestora în simbolul antetului: 

Bara de progres nu va fi inclusă în simbol, deoarece starea sa se schimbă pe fiecare ecran.

Al doilea lucru este să verificați opțiunea Exclude Text Valoarea de la simboluri pentru fiecare strat de text din simbolurile tale. În acest fel poți Editați | × textul pentru fiecare dintre simbolurile duplicate pe o bază individuală.

Schițeze stilurile comune

Funcția "Stiluri partajate" este la fel de simplă ca și "Simbolurile". Este util să modificați aspectul mai multor elemente, în diferite simboluri și obiecte, într-un singur clic. Să vedem din nou antetul și bara de progres. Aici puteți vedea că am schimbat fundalul barei de progres, dar nu arată bine în fundalul antetului:

Pentru a evita modificarea manuală a fiecărui fundal de bara de progres, puteți seta un stil comun. Aici aplicăm header-bg stil pe care l-am pregătit mai devreme, făcând clic Creați un nou stil comun când fundalul antetului a fost selectat:

Apoi aplicăm același lucru pentru fiecare strat care trebuie să reflecte același stil. Acum când editați fundalul bara de progres, fundalul tuturor elementelor cu stil comun va fi modificat:

Concluzie

Cu aceste două caracteristici din setul de instrumente, proiectarea interfeței UI din aplicație în Sketch ar trebui să fie mult mai puțin consumatoare de timp!

Vă mulțumim că ați citit și nu ezitați să adresați întrebări în comentariile de mai jos.