Sisteme de proiectare + Sketch - Cum să începeți pregătirea Bibliotecii de componente UI

În cele din urmă, Design Systems a devenit standardul industriei. Acesta este motivul pentru care este esențial să știm cum să le pregătim pentru proiectele noastre. Dacă sunteți ca mine și creați desenele dvs. digitale în mare parte în Sketch, această poveste conține o mulțime de sfaturi pentru a pregăti acolo Componente UI pentru sistemul dvs. de proiectare.

Notă:
Îmi place să păstrez lucrurile clare. În calitate de creator al UXMisfit.com, prioritatea mea este să îi ajut pe designeri inspirându-i cu o viziune puțin diferită asupra UX și pregătind instrumente de economisire a timpului.

Seturile de instrumente UXMisfit sunt pregătite mai ales pentru Sketch. Puteți găsi unul care să pregătească eficient fluxurile de utilizator sau să asigure o calitate mai bună a pictogramelor aplicației.

De asemenea, puteți găsi Kit-ul de sistem de design - se numește Prime. Conține mai mult decât ar trebui să aibă un sistem de design UI modern pentru Sketch. Cu excepția a sute de elemente personalizabile, acesta include Sistemul Ilustrației, Kit UI Web, Grafice și șabloane vectoriale ale dispozitivelor principale.

Indiferent de kitul de sistem Prime Design, toate sfaturile menționate în poveste funcționează chiar dacă decideți să pregătiți singuri componentele UI.

La început, a existat haos ...

Nu contează dacă începeți să pregătiți componente pentru Design System la începutul unui nou produs sau dacă decideți să-l includeți în proiectul existent vechi de câțiva ani. Este întotdeauna o decizie provocatoare dacă o luați pentru prima dată pentru că trebuie să convingi alte persoane (nu numai proiectanții) de ideea creării unui sistem. Să luăm în considerare modul în care puteți face ca diferiții oameni să fie mai entuziasmați de sistemele de proiectare:

Oameni de afaceri și management - s-ar putea să fie speriați de timp și de costul creației, ceva mare de la sol (desigur, există modalități de a accelera procesul). Evident, costul inițial poate fi ridicat, dar trebuie să-i convingi că în viitorul preț al creării de noi componente va fi mult mai mic, implementarea va fi mai rapidă și calitatea produsului ... mult mai bună.

Dezvoltatori - datorită sistemului de proiectare vor putea pregăti componentele mai devreme și își vor folosi instanțele în mai multe pagini. Menținerea coerenței proiectării va fi mult mai ușoară. Dezvoltatorii nu vor trebui să se gândească dacă acest buton albastru ar trebui să aibă o față cu caractere îndrăznețe sau o umbră - vor folosi doar componenta potrivită (butonul primar).

QA - Arată testerilor că vor primi o singură sursă de adevăr. Datorită acestui lucru, nu va fi nici o îndoială dacă ceva este făcut corect.

OK, dacă echipa dvs. este pregătită, să luăm o cană de cafea și să lansăm Sketch!

Aveți un proiect existent? Faceți inventarul său.

Dacă nu ați pregătit un fel de sistem de proiectare sau un set de UI propriu pentru proiectul dvs. curent, primul pas pentru a face este să verificați toate elementele existente. Probabil veți găsi mai multe instanțe de elemente care diferă doar un pic, dar acestea trebuie să fie rezolvate.

Dacă utilizați Kit-ul de sistem de proiectare existent, veți obține imediat lista cu aproape toate elementele pe care ar trebui să le aibă biblioteca de componente. Ba mai mult, ele sunt deja clasificate ca simboluri. Puteți ajusta elementele existente pentru a se potrivi cu cele din soluția dvs. și ar trebui să le puteți folosi rapid.

Dacă decideți să creați o bibliotecă de la zero, este bine să pregătiți mai întâi lista sau o foaie de calcul. Acest lucru va ajuta la stabilirea structurii corecte. Dezvoltarea arhitecturii de documente pot fi dificile, dar merită să o faci pentru a accelera lucrările ulterioare.

Dar ... Sketch Libraries nu sunt sisteme de proiectare?

Acest lucru poate părea nu atât de evident, dar este corect. Sunt de acord cu Brad Frost. Bibliotecile de schiță nu sunt un sistem de design, dar își aduc aminte și de acestea: ele sunt partea sa fundamentală.

Multe biblioteci sunt scânteile inițiale ale sistemelor de proiectare. Există, de asemenea, metode de preparare a sistemelor vii din acestea, dar acestea vor fi incluse în capitolele următoare.

Sistemele de proiectare sunt mult mai mult decât componentele UI. Acestea ar trebui să includă, de asemenea, ghiduri de mișcare, principiile strategiei de conținut și stilul de redactare și, în sfârșit, componente implementate vii - gata de a fi utilizate pe platforma particulară.

În cele din urmă, toate acestea încep cu componente realizate în instrument de proiectare precum Sketch. Nu uitați că kiturile nu sunt Design Systems în sine, dar aceste biblioteci sunt aici pentru a vă ajuta să construiți sisteme.

Construirea bibliotecii componente UI pentru sistemul de proiectare

Haideți să aruncăm o privire cum să pregătiți componente pentru sistemul dvs., de la cele mai mici particule până la marile organisme și șabloane. Filozofia de design atomic este foarte utilă atunci când pregătiți biblioteca care ar trebui să fie folosită frecvent și extinsă în viitor.

Particulele

Vorbind despre design atomic. Înainte de a sari în crearea componentelor UI fundamentale, este necesar să se stabilească particule.

colorate

Este bine să începeți cu culorile, deoarece fiecare brand are propria paletă. Nu uitați să stabiliți o convenție de denumire bună. Este bine să punctăm care este tonul primar sau secundar și cele pentru elementele de succes, avertizare sau eroare. Nu lăsați sistemul dvs. să includă doar „albastru” sau „violet”, este esențial, deoarece fiecare culoare își are semnificația. Numirea corectă va permite echipei dvs. să recunoască scopul culorii.

Sfat: Pentru a optimiza personalizarea stilului de umplere și a bordurilor. Creați un strat de formă cu stilul partajat care conține doar o completare, apoi creați unul exact în aceeași poziție și dimensiune, care include doar stilul partajat cu margine. Completarea și Borderul ar trebui să aibă aceeași culoare. Dacă adăugați, de asemenea, straturi de formă cu stiluri care diferă doar cu opacitatea din apropiere sau în aceeași poziție, veți putea actualiza stilul în mod excepțional rapid. Va trebui doar să selectați straturile de formă, să actualizați doi parametri (completați și limitați în panoul lateral din Sketch) și să actualizați Stiluri partajate.

Configurarea culorilor în kit-ul Prime Design System

Gradienți și suprapuneri

Unii spun că nuanțele sunt culorile noi. Dacă parcurgeți Dribbble sau Behance, veți observa că multe fotografii le includ. Acesta este motivul pentru care Biblioteca de sistem de proiectare ar trebui să aibă setul pregătit pentru proiect.

Aceeași situație este și cu suprapunerile. Tonul și opacitatea ar trebui definite în sistem pentru a asigura coerența.

Din fericire, de la Sketch 52+, nu este nevoie să pregătiți planșe speciale pentru culori, gradiente, etc. Totul este în Stilurile Stratului Partajat și înlocuirea simbolurilor.

Tipografie

Un bun sistem de tipografie este o parte esențială a fiecărui cadru de utilizare care face parte din sistemul de proiectare mai mare. Când am creat kit-ul, pregătirea acestui element a necesitat un timp imens. Dacă decideți să creați tipografia dvs., nu uitați să includeți cel puțin următoarele stiluri:

  • Negru
  • alb
  • Gri
  • Primar (cu culoarea primară a sistemului dvs.)

Ar fi frumos să avem și:

  • Succes
  • Avertizare
  • Eroare

Aceste variante de culoare vă vor ajuta să vă asigurați suficientă flexibilitate și consistență în lucrările ulterioare.

Acum, să ne scufundăm la scară și dimensiune. Există mai multe metode pe care le puteți defini această proprietate de-a lungul sistemului de tipografie. Am decis să-i inspir pe cei incluși Prime de la Apple și extinderea cu tendința web modernă (titluri uriașe etc.). Datorită acestei baze puternice, puteți fi sigur că sistemul va funcționa și că tipografia va avea o lizibilitate bună pe mobil și pe desktop.

Dacă doriți să aveți o scară de tipografie corect dimensionată, puteți găsi https://type-scale.com util. Nu trebuie decât să alegeți Dimensiunea bazei, tipul de scară și configurați un font de probă și jucați în jurul setărilor.

Când veți defini toate dimensiunile dvs. adăugați cel puțin opțiuni obișnuite și îndrăznețe. Apoi dublați toate elementele de două ori. Aliniați-le la dreapta, centru și stânga. Acum creați Text Style pentru fiecare opțiune.

Pentru a asigura cea mai bună utilizare a tipografiei, utilizați următoarele convenții de denumire:

[Mărime nume] / [Aligment] / [Culoare] / [Stil]

Dacă aveți mai multe familii de fonturi în sistemul dvs.:

[Mărime nume] / [Familie font] / [Aligment] / [Culoare] / [Stil]

De exemplu:

Titlu / Center / Negru / Bold

Titlu / SF Pro / Centru / Primar / Stânga

Puteți, de asemenea, să împărțiți sistemele de tipografie în fișiere separate și să le faceți Biblioteci partajate.

Ip Sfat: Pentru a optimiza personalizarea tipografiei. Plasați toate elementele (din configurarea unei singure culori) într-o singură coloană. Aliniați straturile care conțin diferite stiluri de aliniere (stânga, centru, dreapta) una peste alta. Datorită acestui fapt, veți obține o singură coloană cu tipografie. Acest lucru vă va permite să schimbați tipografia sau stilul său, selectând grupul și actualizându-le împreună. Este mult mai rapid și mai comod decât pregătirea parametrilor pentru fiecare aliniere separat.

Configurarea tipografiei în kitul de sistem Prime Design

Grile și machete

Pregătirea sistemului de grilaj nu numai că va asigura coerența, ci va accelera și activitatea ulterioară. Grila dvs. ar trebui să fie universală - alegerea populară este să configurați grilă cu 8 puncte. Acest lucru vă va asigura că UI-ul dvs. va funcționa bine pe desktop, tabletă și mobil.

Ip Sfat: Pentru a accelera configurația de lucru mare nud (Shift + Săgeată) în Sketch la dimensiunea grilei (de exemplu, 8 pixeli). Acest lucru vă va face munca mult mai rapidă.

Componente UI atomice

Înainte să sari direct în crearea simbolului specific. Faceți timp pentru a enumera toate componentele UI necesare. Această listă poate fi destul de lungă, dar vă va ajuta să planificați structura UI Framework.

Este evident că sistemul de proiectare atomică va include componente precum butoanele, intrările / câmpurile de text, pictogramele, casetele de selectare, comutatoarele și butoanele radio, dar există și elemente care nu sunt atât de evidente atunci când vă gândiți la sistem pentru prima dată ca chatul. bule, jetoane sau componente de rating.

Chiar și componentele dvs. atomice pot avea unele simboluri de particule în interior. De exemplu, butonul dvs. poate include următoarele simboluri: Pictogramă, Shadow, Shape, Component state sau chiar Text (dacă decideți să pregătiți simboluri separate pentru acestea).

Acești atomi nu vor fi doar situațiile controalelor UI în proiectele viitoare, dar vor ajuta, de asemenea, la construirea celor mai complexe în Sketch Library.

Sfat: Ce merită menționat, deoarece Sketch 52 nu trebuie să pregătiți măști speciale pentru culorile butoanelor sau pictogramelor. Stilurile partajate au grijă de asta cu funcția Simbol de înlocuire. Aceasta înseamnă mai puțin simbol și mai transparent și elegant flux de lucru.

Molecule și organisme

Așa că ați creat toate elementele atomice. Acum le puteți combina în molecule.

Aceasta înseamnă că intrarea, butonul și pictograma dvs. de bază pot fi combinate într-una mai complexă - Componenta Căutare câmp de text pentru sistemul dvs. poate fi creată din Formă sau Imagine, Suprapunere, Icoane, Buton sau Stiluri de text.

Utilizarea unui set de elemente esențiale în simboluri și straturi cu Stiluri partajate vă permite să construiți sistemul care se actualizează foarte repede.

Atomic Design este perfect pentru sisteme de proiectare

Kit UI

Designul atomic numește seturile complexe de atomi, molecule și organisme predefinite ca șabloane. Acestea sunt părți mari (cum ar fi secțiunile site-ului web) ale soluției dvs., care pot fi utilizate de mai multe ori.

Este bine să proiectăm șabloane cu scopul lor. A le face prea generice poate provoca elemente care nu se potrivesc în cazuri particulare.

Prime include următoarele categorii pentru șabloane:

  • Erou
  • caracteristicile produsului
  • Galerii
  • Comerţ
  • Ordin
  • Prețuri
  • Stiri / Blog
  • a lua legatura
  • Marturii
  • Cont
  • Tablou de bord
  • Despre
  • Subsol
  • Altele (pentru 404 și pagina în curând).

Când creați propriul dvs. cadru de utilizare, vă încurajez să pregătiți aceste șabloane mari cu cel puțin aceste categorii.

Elementele lipsă ale multor sisteme de proiectare

Mulți designeri se gândesc la Design System Kit pentru Sketch ca la UI Controls Library. Dar sistemele de proiectare sunt mult mai multe; Schița poate fi folosită și în multe alte scopuri de proiectare digitală.

Când am creat kit-ul am realizat că Bibliotecile ar trebui să includă și diagrame și dispozitive vectoriale (în contur, plat și realist). Acestea sunt utilizate atât de des în site-urile moderne și soluții încât trebuie să aibă o reprezentare constantă în sistem.

Mai mult, în prezent site-urile web și aplicațiile sunt pline de ilustrații frumoase. Acesta este motivul pentru care am inclus și un sistem ilustrativ personalizabil care conține componente pentru a le construi și stila rapid.

Ilustrație de probă realizată în 5 minute în Prime

Dacă ați decis să vă proiectați propriul set de biblioteci pentru Sisteme de proiectare, luați în considerare adăugarea acestor elemente.

Colaborarea echipei

Sistemele de proiectare sunt sursa de adevăr pentru membrii echipei. Aceasta înseamnă că bibliotecile de schiță ar trebui să fie pregătite pentru a fi utilizate de toți designerii implicați în proiect. Cel mai simplu mod de a partaja fișiere cu echipa dvs. este să le încărcați în Sketch Cloud

În timp ce pregătiți UI Framework ca bibliotecă, nu uitați să vă asigurați o denumire constantă și corectă. Construirea unei structuri logice și clare vă va ajuta colegii să descopere toate posibilitățile kitului.

Separarea fișierelor

Mai mult, ar trebui să luați în considerare crearea unor părți din Sketch UI Design System ca fișiere separate. Cu excepția bibliotecii de bază, vă puteți gândi să pregătiți un fișier pentru un set de pictograme, set de ilustrații, șabloane de dispozitiv sau diagrame.

Când să separe aceste lucruri? Ar trebui să vă gândiți la realizarea acestuia atunci când este clar că există un set mare de elemente particulare (cum ar fi pictogramele) sau doar unii designeri din echipa dvs. le creează (acest lucru poate fi aplicat ilustrațiilor), iar restul utilizează creațiile lor.

Controlează istoricul Bibliotecilor tale

Cea mai bună modalitate de a gestiona fișierele Sketch Library cu echipa este să folosiți soluția Control versiune ca Abstract. Datorită acestui fapt, veți putea parcurge istoricul modificărilor bibliotecii, examinați modificările coechipierilor dvs., le puteți comenta și le puteți adăuga în master (versiunea principală a Bibliotecii).

Sistem de proiectare a clădirilor de la Sketch

Unele instrumente precum InVision Design System Manager vă permit să construiți Documentația de sistem de proiectare și sursa de adevăr nu numai pentru proiectanți, ci și pentru dezvoltatori, specialiști în QA și alți membri ai echipei.

Utilizarea DSM Invision este simplă, puteți găsi aici o introducere rapidă. Puteți construi rapid documentația sistemului de proiectare, gestiona versiunile și permisiunile utilizatorului pentru a vizualiza sau edita sistemul.

Acest instrument face din Sketch Library-ul tău un sistem de proiectare viu.

În cele din urmă: rupeți consistența - dacă este nevoie

Deși strategia consecventă este fundamentală, trebuie să vă amintiți că, în calitate de UX Designer, trebuie să pregătiți soluția care rezolvă nevoile utilizatorilor într-un mod încântător și să îndeplinească cerințele de afaceri. Acesta este motivul pentru care trebuie să fiți gata să vă spargeți sistemul de proiectare consecvent dacă există un scop mai mare pentru asta.

„Trebuie să descoperiți ceea ce ați învățat.”
- Maestrul Yoda

Dacă există un caz în care elementul respectiv nu funcționează pur și simplu, trebuie să îl validați. Dacă testele vor arăta că încălcarea consistenței UI va face utilizatorii mai fericiți, luați în considerare modificarea. Amintiți-vă doar să notați aceste „excepții” din sistem, astfel încât ceilalți vor ști că nu a fost o eroare, ci o decizie strategică.

Rezumând

Sketch este instrumentul potrivit pentru construirea componentelor UI pentru sistemul de proiectare. Este instrumentul care conține mai multe caracteristici precum Simboluri, Strat și Stiluri de text cu abilități de înlocuire care face fluxul de lucru extrem de ușor. Datorită filozofiei Library, puteți partaja rapid fișierele dvs., și cu pluginuri suplimentare, îl puteți transforma rapid în sistemele de proiectare reale.

Dacă intenționați să începeți să construiți System Design sau să vă organizați UI Library - nu pierdeți timpul creând totul de la zero. Nu ezitați să utilizați kitul Prime - Design System.

Pentru a facilita există un cadou Utilizați codul ofertei MEDIUM10 pentru a beneficia de 10% reducere.

Dacă v-a plăcut Povestea, nu uitați să .

Ați putea fi, de asemenea, interesat de Sketch Plugins care ajută la menținerea sistemului de design UI:

Vă mulțumim pentru lectură, mult noroc cu sistemul dvs. de design!