5 strategii pentru utilizarea simbolurilor în Sketch: pentru creșterea echipelor și a proiectelor

Simbolurile sunt cea mai puternică caracteristică a Sketch-ului.

Simbolurile au potențial - potențial pentru conectarea, sincronizarea, partajarea, contopirea, scalarea, reglarea, cuibarea și, cel mai bine, toate, protejarea ușoară. Dacă mă apuc de un instrument de prototipare care nu are funcționalități de simboluri, îl reduc aproape în mod clar.

Simbolurile sunt elemente de design flexibile legate de o sursă editativă, altfel cunoscută ca o singură sursă de adevăr. Pe scurt, sunt magie.

Aceasta este magia simbolurilor. Este bine dacă toate piesele nu fac clic pentru tine - vom analiza mai profund sistemele de simboluri.

Simbolurile dvs. Sketch nu trebuie să vă scoată în evidență, dar ar trebui să poată crește așa cum fac proiectele dvs. De asemenea, ar trebui să poată fi împărtășiți în mod convenabil cu ceilalți. Iată trei strategii pentru utilizarea simbolurilor Sketch în moduri scalabile, ușor de utilizat.

1. Construiți simboluri pe calea corectă

Construiți simboluri bine și vor îmbătrâni bine. Nu este distractiv să reconstruiești un simbol, deoarece nu l-ai făcut suficient de flexibil pentru prima dată, mai ales când l-ai folosit în zeci de locuri. Iată câteva indicatoare care vă ajută să vă ajutați și echipa dvs. să construiți simboluri care nu vor avea nevoie de renovări constante.

Începeți cu elementele de bază

Începeți cu cele mai de bază componente pe care le puteți. Totul ar trebui să înceapă la nivel atomic. Când ștampilele dvs. sunt modulare, se potrivesc mai bine și sunt mai ușor de lucrat.

Simboluri cuib

Puteți cuibă simboluri în alte simboluri pentru a face prototiparea simplă și flexibilă. Cuibăritul este atunci când introduceți un timbru într-o ștampilă mai mare. Și cu o caracteristică cunoscută sub numele de suprasolicitări, veți putea schimba și personaliza afișările de ștampilă în zeci de locuri diferite, în zeci de moduri diferite.

Cuibăritul te va forța să gândești la niveluri. Simbolurile de nivel 1 ar putea fi icoane și blocuri de text, simbolurile de nivel doi pot fi butoane și liste, iar simbolurile de nivel trei pot fi panouri întregi și ferestre pop-up. Biții, piesele și nivelurile vor arăta diferit în funcție de complexitatea proiectului, dar punctul de a cuibări simbolurile este întotdeauna același. Pentru a înlocui elementele la niveluri superioare.

În timp ce un simbol funcționează ca o ștampilă, o instanță a unui simbol funcționează ca impresia unui timbru. Și pentru că ștampilele sunt magice, impresiile de la același timbru pot fi diferite. Aceste variații se numesc anulări. Dacă ștampila dvs. mare are o ștampilă în interior, puteți utiliza anularea pentru a face o impresie să spunem 1 iunie și alta să spunem 22 decembrie. În mod similar cu o marcă de expresie schimbătoare, o impresie poate spune RECEPTATĂ și alta poate spune PLĂTIT. Chiar și cu înlocuirile, impresiile sunt încă legate de ștampila magică. Dacă schimbați cerneala timbră dater în roșu, atât 1 iunie cât și 22 decembrie devin roșii! ‍ ​​Magic.

Iată opțiunile de înlocuire pentru un simbol puternic al butonului. Cu acest buton puteți trece pe A) simbolul stilului Text imbricat, B) textul însuși și C) forma butonului și D) stilul de umplere.

Dar cât de departe trebuie să ajungă cuibărirea? Câte simboluri din simboluri sunt necesare pentru a avea un sistem de proiectare inteligent? Răspunsul este relativ la fiecare proiect. O regulă bună este să aveți surse simple de adevăr pentru simbolurile dvs., dar să nu aveți opțiuni copleșitoare sau inutile. De exemplu, pentru o bibliotecă de proiectare puternică, care va fi folosită pentru o mulțime de proiecte diverse, veți dori un simbol al butonului ca sursă de adevăr - cu simboluri imbricate pentru forme, umplere de culoare, stare și text. Cu toate acestea, dacă construiți filme de bază, nu înnebuniți. Construiți simbolul butonului cu una sau două înlocuirile de care aveți nevoie.

Legea lui Tesler, cunoscută și sub numele de Legea conservării complexității, prevede că pentru orice sistem există o anumită cantitate de complexitate care nu poate fi redusă.
(Legile UX)

Utilizați stilurile de text ca simboluri

În versiunea curentă a Sketch-ului nu puteți trece peste un stil de text într-un simbol. Când doriți să schimbați stilul text din butonul preferat de la cta-red-bold la cta-albastru-italic, asta doare! Dar sunt vești bune. Există o soluție.

De exemplu, proiectăm o aplicație de mesagerie. Interfața de utilizare are nevoie de un sertar în care conversațiile pot apărea fie negru, roșu sau gri, în funcție de disponibilitatea unui prieten:

A. Alcătuiți un simbol cu ​​text roșu, un simbol cu ​​text negru și un simbol cu ​​text gri. Artboard-ul fiecărui simbol trebuie să aibă aceeași dimensiune.

b. Creează un simbol pentru sertarul conversațiilor.

c. Încurcați simbolurile numelui, de la pasul 1, în simbolul sertarului. Faceți acest lucru de câte ori este necesar până când aveți o listă:

Puteți vedea simbolurile „Nume” din dreapta sunt amplasate în simbolul „Lista numelor” din stânga.

d. Acum, dacă aduc simbolul sertarului în prototipul meu la nivel de pagină, pot înlocui stilurile de text din panoul de proprietăți:

Odată ce simbolul este plasat pe o pagină, opțiunile sale de înlocuire apar în panoul inspectorului din dreapta.

Aranjați straturile

În cadrul simbolurilor complexe, a se vedea: simboluri cuibărate, asigurați-vă că aranjați straturile în mod intuitiv. Panoul din stânga ferestrei dvs. este locul unde puteți găsi și organiza straturile. Puneți elementele din partea de sus în partea de sus și elementele din partea de jos în partea de jos. Dați simbolurilor dvs. cuiburi nume simple, cum ar fi „Text-aici” și „pictogramă”, mai degrabă decât „Icoana 10 Copierea copiei 2.”

Ordinea stratului dictează modul în care sunt aranjate înlocuirile. De asemenea, atunci când numiți casetele și simbolurile dvs. text, rețineți că numele lor apar lângă opțiunile lor de anulare.

Dacă sunteți mai inteligent în acest sens, opțiunile dvs. de înlocuire vor fi atât de simple, oricine le-ar putea folosi. Un vis pentru atâtea echipe de proiectare.

Critic pentru aranjarea straturilor este, de asemenea, blocarea acestora. Un strat blocat nu i se poate atribui o înlocuire. De exemplu, simbolul dvs. de bară nav poate avea o linie de text care nu trebuie să fie schimbată; blocați stratul cu ⌘⇧L și acesta va fi ascuns de opțiunile dvs. de înlocuire. Fii un curator bun, eliminând personalizarea acolo unde nu este nevoie.

Utilizați opțiuni simbol pentru redimensionarea ușoară

Panoul inspectorului din dreapta are o mulțime de constrângeri utile pentru construirea de simboluri redimensionabile. Utilizati-le. Doriți ca impresiile dvs. de ștampilă să arate bine pe fiecare dimensiune de hârtie.

Restrângerile de redimensionare sunt aici pentru a vă ajuta. Le veți găsi în panoul de inspector atunci când aveți un obiect sau un simbol selectat.

Investiți timpul într-un comportament inteligent de redimensionare a unui simbol - Link fix în ianuarie 2018. Utilizați restricțiile de redimensionare pentru a fixa elementele pe una sau mai multe laturi ale containerului lor, pentru a repara lățimea unui element și / sau pentru a repara înălțimea unui element. Unele lucruri trebuie întinse, altele trebuie să stea în colț; constrângerile de redimensionare spun unei instanțe simbol cum să se comporte atunci când dimensiunile sale se schimbă.

https://www.sketchapp.com/images/pages/docs/03-layer-basics/video/after@2x.mp4 - Link fix ianuarie 2018

Notă # 1: Dacă doriți să păstrați umplutura consistentă atunci când redimensionați un simbol, fixați-vă obiectele pe toate cele patru muchii. (Sursa video)

Nota 2: Simbolurile se vor redimensiona mai bine dacă le proiectați într-un mod condensat. La urma urmei, un simbol este mai ușor de extins decât este de comprimat.

Simbolurile care conțin imagini pot fi redimensionate cu ușurință dacă sunt configurate ca o completare. În loc să inserați o imagine (Inserați> Imagine), ar trebui să utilizați un model de completare. Aceasta înseamnă mai întâi realizarea formei containerului (Inserare> Formă), alegerea „Completării modelului” în secțiunea de completare a inspectorului, apoi alegerea imaginii ca model. Recunosc că s-ar putea simți sensul giratoriu sau contra-intuitiv, dar tehnica de umplere păstrează integritatea imaginii dvs. atunci când este redimensionată, în cele din urmă pentru a preveni denaturarea incomodă.

Puteți specifica modul în care doriți ca imaginile să completeze formularul: Completare, Fit, Stretch sau Tile.Imaginea din stânga este un model de completare pentru o formă, iar imaginea din dreapta este o imagine standard. Le-am întins vertical pentru a arăta cât de bine funcționează umplerea modelului. Lecția nr. 1: nu întinde cățelușii.

2. Organizează-ți simbolurile

A fi organizat este critic. Dacă colecția dvs. de timbre devine mare, aveți nevoie de un organizator de birou. Dacă colecția dvs. de timbre devine mai mare, ar trebui să obțineți câteva sertare. Vrei timbrele tale atât de organizate încât, atunci când pleci în vacanță în Bali, un stagiar poate sta la biroul tău și găsește ștampila pe care o caută. Iată câteva sfaturi pentru asta.

Numește-ți simbolurile

Cu simbolurile Sketch, există o mulțime de nume. Un nume nu specifică doar ce este un simbol, ci specifică și unde se află un simbol; un simbol numit buton / principal va avea folderul buton ca părinte.

Denumiți și organizați-vă simbolurile în mod consecvent. Mai important decât să ai nume excelente pentru pictogramele tale este ca numele lor să aibă sens printre celelalte simboluri din biblioteca ta. De preferat, numiți simbolurile dvs. în funcție, mai degrabă decât cu indicii vizuale. O notă vizuală precum „albastru” poate fi modificată, în timp ce o funcție precum „starea presată” va rămâne pe tot parcursul.

Folosiți înlocuirile de stil

Sistemul dvs. de pictograme poate avea o duzină de variații de culoare, contur sau bordură - un posibil coșmar pentru orice bibliotecă de simboluri. 20 de icoane negre înseamnă sortarea a 20 de simboluri. 20 de icoane în 12 culori înseamnă sortarea a 240 de simboluri.

Din fericire, de la Sketch 52, puteți utiliza înlocuirile de stil pe care le puteți face modificări cu simboluri ușor. Este o alternativă mult mai frumoasă la prostiile pe care trebuia să le facem în Sketch 51.

Din fericire, Jon Moore de la UX Power Tools acoperă modul de realizare.

Stilul trece peste acțiune. (Împrumutat din articolul lui Jon)

Organizează-ți simbolurile vizual - oriunde

Prezentarea contează! Chiar dacă aveți o echipă mică de proiectare cu așteptări relativ scăzute, ar trebui să separați, să grupați și să etichetați simboluri pentru a le face mai ușor de găsit.

Un loc pentru fiecare simbol și fiecare simbol la locul său.

Metoda nr. 1 pentru organizarea simbolurilor: de fiecare dată când creați un simbol, mențineți marcată opțiunea Trimitere simbol la pagina „Simboluri”. Lasă pagina Simbolurilor să devină dezordonată. Creați o pagină nouă cu ⌘⇧N unde veți adăuga și organiza toate simbolurile.

Designerului Javier Cuello îi place Metoda # 1. În stânga este pagina lui Simboluri. În dreapta este pagina unde își ține actul împreună. (Sursa imaginii)

Metoda nr. 2 pentru organizarea simbolurilor: Organizați-vă simbolurile pe pagina dvs. de simboluri. Este simplu! Aleg să-mi sort simbolurile în pagina Simboluri și iată un plugin pe care îl folosesc pentru a mă ajuta să îl fac rapid.

3. Partajează bibliotecile de simboluri

Acum că ștampilele dvs. sunt frumos construite, numite în mod constant și organizate inteligent, este timpul să le împărtășiți. Într-o actualizare recentă, Sketch a adăugat biblioteci - o caracteristică de a lega, sincroniza și partaja în mod inteligent simbolurile Sketch.

Cu toate acestea, există o captură, dacă dvs. și un coleg doriți să vă conectați la aceeași bibliotecă: amândoi trebuie să accesați același fișier în aceeași locație. Puteți accesa același fișier printr-un folder cloud partajat sau dacă aveți o echipă ca a mea care nu lucrează mult de la birou, configurați o unitate de rețea partajată.

Accesați preferințele dvs., găsite folosind ⌘ sau sub „Sketch” din meniul aplicației pentru a naviga la preferințele bibliotecii. De acolo puteți adăuga o bibliotecă din orice fișier Sketch, atât timp cât are simboluri în ea. Preferințele bibliotecii sunt locul în care ați adăuga fișierul partajat. Dacă doriți să aflați mai multe despre biblioteci, consultați documentația Sketch.

Notă: Un scop al Sketch Libraries este să vă oprească editarea accidentală a simbolurilor care sunt partajate cu alții. Simplu, Sketch vă va prezenta un pop-up pentru a confirma modificările simbolului pe care încercați să le faceți; Sigur doriți să editați fișierul sursă? Sau doriți să îl deconectați, apoi să editați biblioteca?

Dacă dvs. sau un coleg de echipă actualizați o bibliotecă partajată, vi se va da opțiunea de a alege ce modificări se aplică fișierelor Sketch conectate.

M-am confruntat de câteva ori cu plugin-ul Sketch al mărcii și este o opțiune de partajare scump pe care îmi place să o ignor. A fost dezvoltat ca un plugin, înainte ca funcția Sketch libraries să fie în jur, și concepută pentru a rezolva aceeași problemă. Nu este nevoie să vă dublați. De asemenea, acesta a fost achiziționat recent de InVision și va fi integrat în viitorul lor manager de sistem de proiectare. DSM ar putea fi o concurență dură pentru instrumente de prototipare precum Adobe XD, Framer și Sketch în sine. Până atunci, continuați să împărtășiți bibliotecile Sketch. Echipa ta vă va mulțumi pentru asta.

4. Stabiliți controlul versiunii

Pe o echipă de proiectare, riscați să suprascrieți fișierele sau să pierdeți evidența versiunilor de fișiere. Unele echipe rezolvă acest lucru folosind GitHub pentru a ramifica, îmbina și comite fișiere Sketch. Deoarece GitHub este o soluție axată pe dezvoltator, Elastic Projects a creat Abstract, un plugin Sketch al unei terțe părți care face controlul versiunii mai prietenos cu designul.

Spațiul de stocare în cloud vă poate ajuta, de asemenea, să controlați versiunea. Dropbox păstrează instantanee toate modificările aduse unui document în termen de 30 de zile, de exemplu. Cu toate acestea, dincolo de aceste 30 de zile, modificările nu pot fi recuperate decât dacă aveți DropBox Business sau Recovery File Extins. Există chiar și unele modalități în sens giratoriu de a controla versiunea cu Google Drive.

5. Învață de la cei mai buni

Cel mai bun mod de a învăța un producător de ștampile este să învețe de la stăpânii de ștampile. Prin săparea în cele mai populare și / sau complexe biblioteci Sketch, veți învăța o mulțime de trucuri avansate. Cum își stabilește echipa Apple simbolurile? Cum se cuibăresc simbolurile într-un kit profesional UI? Îți recomand să folosești bara de căutare pe internet, la îndemână, pentru a urmări fișierele de schițe de top-secret, precum cea din Resurse de proiectare UI pentru iOS.

Poate intenționați să construiți ceva complex cum ar fi un tabel sau un dropdown cu mai multe niveluri. Iată acum! Ușor, ușor! Răsfoiți mai întâi. Verificați Sketch App Resources și vedeți dacă cineva a construit ceva similar.

Împrumuta, împrumuta, împrumuta. Și nu uitați să încercați opțiunile de înlocuire în fișierele pe care le găsiți.

Pentru a închide, iată câteva alegeri de fișiere Sketch pline de simboluri pentru care puteți să săpați, scoateți și experimentați cu:

  • Biblioteca de formulare de Davide Pisauri
  • Buton inteligent de Domenico Laricchia
  • Set de GUI pentru design de material Android 7.0 Nougat de Great Simple
  • Foaie de autocolant de design material de Google
  • Kit UI de masă de O / M Studio