de Colm Tuite

Cum se construieste un sistem de proiectare

Cum se construiește un sistem de proiectare

Sfaturi pentru proiectarea și construirea unui sistem de proiectare consistent.

Fără îndoială, sunt întrebat despre sistemele de proiectare mai mult decât orice altceva. Deci, după ce am petrecut majoritatea ultimilor ani gândindu-mă la cum să proiectăm, să construim și să prezentăm sisteme de proiectare pentru produse precum Minune, Bantam și Modulz, M-am gândit să împărtășesc o parte din ceea ce am învățat pe parcurs.

Ce este un sistem de proiectare?

Nu este un secret faptul că designerilor le place un kit de interfață bun. Cu toate acestea, dincolo de simpla asamblare a seturilor de instrumente și a ghidurilor de stil, se pare că recent s-a concentrat din ce în ce mai mult pe proiectarea sistemelor destinate să lege produse întregi. Companii ca Shopify și Interfon construiesc echipe interne axate special pe proiectarea sistemelor. Oamenii încep să-și dea seama de importanța proiectării sistemice. Acest lucru este încurajator. Cine știe, poate într-o zi vom avea un instrument de proiectare care nu presupune că începem de la zero de fiecare dată când deschidem un nou document …?

Un sistem de proiectare (în ceea ce privește produsele tehnologice) este mai mult decât un cadru, un set de instrumente UI sau o bibliotecă de componente. Este mai mult decât un ghid de stil sau un set de linii directoare de cod. Este chiar mai mult decât suma acelor părți. Un sistem de proiectare este un set de reguli în evoluție care guvernează compoziția unui produs.

Există multe fațete ale oricărui sistem de proiectare bun – începând cu cultura / misiunea companiei și trecând până la branding, redactare, biblioteci de componente și alt limbaj de proiectare. Punctele de nivel superior sunt, fără îndoială, cele mai importante aspecte ale oricărui sistem de proiectare, dar în sensul acestui articol, voi presupune că, în calitate de companie, știi cine ești, care este misiunea ta și cum ar trebui să arate produsele tale, simt și funcționează.

Odată ce ai acei factori critici la locul lor, poți converti aceste cunoștințe într-un limbaj de proiectare coerent.

Proiectarea unei palete de stil

Înainte de a putea începe să proiectăm componente strălucitoare, trebuie să punem bazele acestor componente. Trebuie să descompunem produsul în forma sa cea mai goală.

Chiar și cea mai simplă componentă de titlu este o colecție de stiluri multiple reutilizabile …

1611302412 686 Cum se construieste un sistem de proiectare

Trebuie să descompunem lucrurile până când ajungem la minimul ireductibil; cele mai esențiale stiluri. Un loc bun pentru a începe este lista completă a Proprietăți stil CSS. Majoritatea acestor proprietăți acceptă doar valori fixe și, prin urmare, pot fi reutilizate pe fiecare site web de pe internet. Proprietățile care acceptă valori personalizate sunt în cele din urmă ceea ce va diferenția produsul nostru de alte produse. Aceste valori personalizate sunt cele care vor defini paleta noastră de stil global. Paleta noastră de stil global este ceea ce vom folosi pentru a proiecta și construi fiecare aspect al tuturor produselor noastre.

Când am terminat, nu ar trebui să existe un singur stil în produsul nostru care să nu fi fost predefinit în paleta noastră de stil global.

Culoare

Să începem cu cea mai evidentă proprietate de stil – singura proprietate de stil pe care se pare că instrumentele de design moderne o înțeleg pot fi denumite, stocate și refolosite: culoare.

Pentru culoarea principală a mărcii, să alegem albastru. Pentru culoarea mărcii noastre secundare, să mergem cu omologul său complementar: portocaliu.

1611302412 394 Cum se construieste un sistem de proiectare
Culorile mărcii

Utilizarea culorii pentru a comunica succesul și eșecul este un model de design obișnuit, așa că haideți să adăugăm verde și roșu în paleta noastră de culori în acest scop. Culorile precum negrul și galbenul ar putea funcționa și ele bine.

1611302412 444 Cum se construieste un sistem de proiectare
Culori de succes și eșec

În cele din urmă, avem nevoie de câteva culori gri. Majoritatea interfețelor grafice vor avea nevoie de cel puțin următoarele culori gri:

  • Un gri foarte deschis pentru fundaluri
  • Un gri ușor mai închis pentru margini, linii, linii sau separatoare.
  • Un gri mediu pentru subpoziții și copie de sprijin.
  • Un gri închis pentru titlurile principale, copierea corpului și fundaluri.

Desigur, este posibil să aveți nevoie de mai multe gri. Este posibil să aveți nevoie de trei nuanțe diferite pentru copierea corpului. S-ar putea să preferați două nuanțe diferite de cursă. Depinde de tine. Ideea aici este că predefiniți orice stiluri de care aveți nevoie în avans, astfel încât acestea să poată fi reutilizate pe întregul produs într-o etapă ulterioară.

Ca ultimă atingere, este posibil să dorim să adăugăm variații de nuanță sau nuanță pentru fiecare dintre culorile noastre. Acestea pot fi utile atunci când vine vorba de proiectarea componentelor pentru adăugarea de fundaluri deschise sau linii întunecate.

1611302413 405 Cum se construieste un sistem de proiectare
Paleta noastră de culori finală

Umbre

Umbrele sunt o altă proprietate de stil frecvent utilizată în majoritatea interfețelor grafice. Din ceea ce am văzut, o mulțime de designeri tocmai vin cu umbre de la manșetă în timp ce proiectează componente. Același lucru este valabil și pentru majoritatea proprietăților de stil. Proiectarea izolată astfel duce deseori la interfețe UI inconsistente.

Să facem un pas înapoi și să luăm în considerare ceea ce încercăm să realizăm cu umbrele noastre. În mod evident, încercăm să adăugăm o anumită perspectivă la interfața de utilizare, dar este probabil ca multe componente să poată beneficia de același efect. Deci, să abstractizăm stilurile departe de componentele individuale și în paleta noastră de stil global.

Aceste patru umbre ar trebui să fie suficiente pentru a stiliza fiecare componentă din sistemul nostru:

  • O umbră subtilă pentru a ridica componentele interactive și pentru a adăuga accesibilitate.
  • O umbră mai pronunțată pentru un efect de plutire asupra componentelor.
  • O umbră puternică pentru a oferi perspectivă drop-down-urilor / popoverilor și a altor componente similare.
  • O umbră îndepărtată pentru componentele modale.
1611302413 731 Cum se construieste un sistem de proiectare
Gama noastră de umbre de la subtil la îndepărtat.

Scrieți scara

Pentru a crea o ierarhie vizuală adecvată pe fiecare ecran, va trebui să definim un număr de dimensiuni de font diferite.

La fel ca în cazul notelor dintr-o piesă muzicală, tipul nostru ar trebui să respecte o scală. Acest lucru ajută la menținerea unui ritm vertical lin. La început, acest lucru poate suna puțin descurajant, dar, din fericire, unii oameni foarte inteligenți și-au dat seama deja de-a lungul anilor. Tim Brown a construit un site excelent pentru a afișa diverse scale de tip. Adam Morse și – a deschis sursa de implementare a programului scara de tip diatonic. În general, consider că scala „Major Third” funcționează bine pentru majoritatea produselor web.

Următorul pas este să decidem aproximativ ce dimensiuni de fonturi vom avea nevoie, apoi să le trasăm pe scala noastră de tip „Major Third”.

  • Implicit (1em) pentru textul standard care va apărea în multe locuri de pe site-ul nostru de marketing, UI etc. 16px este dimensiunea implicită a fontului browserului, așa că haideți să rulăm cu asta.
  • De exemplu, o dimensiune puțin mai mare pentru o copie de corp mare într-un blog.
  • Câteva dimensiuni mai mari pentru titluri și sub-titluri.
  • O dimensiune foarte mare pentru titlurile secțiunilor.
  • O dimensiune ridicol de mare poate, de exemplu, pentru prețurile dintr-o pagină de prețuri.
  • De asemenea, vom avea nevoie de câteva dimensiuni mai mici pentru copierea mai mică a corpului, indicii de intrare și alt text secundar.
1611302413 774 Cum se construieste un sistem de proiectare
Scrieți scara

Raze de frontieră

Acum este doar o chestiune de a aplica același proces la fiecare proprietate de stil care acceptă valori personalizate. Pentru rotunjirea colțurilor, vom avea nevoie de următoarele valori ale razei colțurilor:

  • Raza de margine mică pentru componente mici, cum ar fi casete de selectare, etichete și etichete.
  • Raza de margine medie pentru butoane și intrări și componente similare.
  • Raza de margine mare pentru carduri, modale și alte componente mari.
1611302413 435 Cum se construieste un sistem de proiectare
Raze de margine 2px, 4px și 8px

Notă: De asemenea, vom avea nevoie de o rază de margine de 50% pentru a construi componente circulare precum avatare etc.

Scara de spațiu

Cea mai des utilizată proprietate de stil în aproape orice design este spațiul alb. Indiferent dacă distanțăm linkurile într-un antet, distanțăm elementele dintr-o grilă, adăugăm o anumită distanță între un avatar și un link sau completăm o componentă drop-down – niciun spațiu alb din produsul nostru nu ar trebui să fie arbitrar sau neintenționat.

Ca și în cazul tipului, prin aderarea la o scală de spațiere, ne putem asigura că fiecare dintre componentele și aspectele noastre va fi uniformă. Scala mea de spațiu preferată este Grila de 8dp a designului materialului. Elliot Dahl a scris un articol minunat despre sistemul de rețea 8pt și beneficiile sale.

Ținând cont de trepte de 8dp, putem stabili o serie de valori de spațiere pe care le putem folosi pentru a proiecta fiecare componentă și aspect în cadrul suitei noastre de produse.

1611302414 63 Cum se construieste un sistem de proiectare

Putem folosi, de asemenea, aceste valori de spațiere pentru a defini un set de lățimi, înălțimi și înălțimi de linie pe care le putem refolosi pentru dimensionarea butoanelor, formarea intrărilor, avatare și alte componente similare. Întrucât aceste componente apar adesea unul lângă celălalt în produsele web, ajută dacă urmează aceeași scală de dimensionare pentru a evita orice discrepanțe nedorite.

Spațiul dintre litere

După cum am menționat mai devreme, dimensiunea fontului nu este singura proprietate de stil de care avem nevoie pentru a defini componentele textului. Distanța dintre litere este o altă proprietate utilă pe care o putem folosi pentru a strânge titlurile mari sau pentru a permite titlurilor mai mici să respire.

Valorile de spațiere de 3 sau 4 litere ar trebui să facă truc.

1611302414 143 Cum se construieste un sistem de proiectare

Construirea unei biblioteci de componente

Acum, după ce am definit paleta noastră de stil global, putem lua acele blocuri de bază și putem începe să construim o bibliotecă de componente. În cea mai mare parte, proiectarea componentelor nu este un proces creativ – pur și simplu mapăm stilurile predefinite la componente.

În acest stadiu, nu ar trebui să avem nevoie de un singur stil care nu a fost deja definit în paleta noastră de stiluri. Procesul creativ a avut loc în timpul fazei de proiectare a paletei de stil. Din acest moment, indiferent dacă este vorba despre o culoare, dimensiunea fontului, marja / valoarea umpluturii, lățimea / înălțimea sau altfel, fiecare stil pe care îl folosim pentru a proiecta componentele și aspectele noastre ar trebui să fie smuls din paleta noastră de stiluri. Aproape nimic nou nu trebuie introdus. S-ar putea să pară extrem sau nerezonabil, dar dimpotrivă, aici cred că mulți oameni se rătăcesc.

Dave Rupert a organizat recent acest sondaj pe Twitter, întrebându-se unde să pună codul care anulează stilul unei componente de buton, dacă butonul respectiv se află într-o componentă modală, de exemplu.

Harry Roberts (verificați această minunată lucrare) atunci și-a explicat gândurile despre asta în propriul său articol. După aceea, Jonathan Snook extins cu propriile sale gânduri. Deși sunt de acord cu concluziile la care au ajuns atât Harry, cât și Jonathan, în cele din urmă, cred că întreaga dezbatere este doar inutilă.

Este contradictoriu să concepeți o componentă cu intenția de a o reutiliza la nivel global, apoi să modificați acea componentă într-o singură parte specifică a produsului. Acest lucru învinge scopul de a crea o bibliotecă globală de componente în primul rând. Ori de câte ori văd stiluri care înlocuiesc alte stiluri, este de obicei fie un caz de piratare a unei componente pentru a o face să se potrivească într-un spațiu restrâns, fie de a aborda o variație a unei componente, deoarece nu s-a planificat suficient în timpul etapelor anterioare de proiectare.

De fiecare dată când suprascrieți o componentă globală într-o zonă a unui produs, erodați și consistența sistemului de proiectare. Când efectuați suficiente modificări sporadice ale componentelor împrăștiate pe produsul dvs., nu mai aveți un sistem de proiectare consistent. Aveți doar un sistem de proiectare cu o mizerie inconsistentă care atârnă fundul.

Să luăm câteva componente comune și să parcurgem modul în care le putem construi folosind doar stilurile pe care le-am definit în paleta noastră de mai sus.

Butonul umil

Să începem cu o componentă simplă de buton pentru a ilustra modul în care este posibil să construim componente utilizând doar stilurile pe care le-am predefinit în paleta noastră de stiluri.

1611302414 813 Cum se construieste un sistem de proiectare

Mai multe componente

Din nou, aceste culori, dimensiunile fontului, umbrele și valorile de umplere sunt toate extrase direct din paleta de stiluri pe care am predefinit-o mai sus.

1611302415 35 Cum se construieste un sistem de proiectare

Să încercăm ceva puțin mai amuzant …

Când avem câteva componente proiectate și construite, putem începe să combinăm mai multe componente pentru a crea componente mai complexe, cum ar fi această componentă derulantă.

1611302415 787 Cum se construieste un sistem de proiectare

Această componentă drop-down nu folosește un singur stil în afara paletei de stil de bază pe care am definit-o anterior. Folosind această metodă, putem proiecta o întreagă bibliotecă de componente, apoi putem trece la aspecte mai largi și în cele din urmă pe ecrane complete.

Sfaturi pentru drum

  • Anumite componente vor necesita valori care nu sunt definite în paleta noastră de stiluri, de exemplu, lățimea unei bare laterale. Uneori, aceste valori vor fi doar 1/3 din lățimea ferestrei sau ceva similar. Alteori, aceste valori vor fi arbitrare și refolosibile și este perfect. Ideea este să ne gândim la ce stiluri ar trebui să fie reutilizabile (cele mai multe) și care stiluri nu ar trebui.
  • Lăsați componentele să-și facă treaba. Nu încercați să adăugați margini la butoane, intrări, titluri sau alte componente. La nivel de componentă, ar trebui să definiți doar stilurile care apar uniform în fiecare instanță a componentei respective. Deoarece marjele diferă de la caz la caz, este mai bine să le aplicați folosind un wrapper div. A scris Harry Roberts un articol excelent care atinge acest punct.

Lucrez la un set de instrumente CSS complet bazat pe Cadrul CSS Bantam care va include toate componentele prezentate în acest articol plus multe altele. Proiectul este pentru Modulz, un produs la care lucrez, dar dacă sunteți interesat să utilizați singur acest set de instrumente UI, anunțați-mă Stare de nervozitate. Dacă primesc suficient interes, îl voi deschide.