Jetoane în sisteme de proiectare

10 sfaturi pentru arhitect și implementarea deciziilor de proiectare pentru toată lumea

Într-o recenzie recentă a codului, pasiunile mele s-au stârnit în timp ce am trecut prin stilul unei componente Pilula cu un coechipier de designer.

Cu greu îmi puteam conține emoția:

"Uite. Da, este codul, dar uită-te atent la aceste jetoane. Știi cum arată asta? Ca specificații! Și ce dacă? Pot citi acest lucru, așa cum puteți. Și le putem arunca peste tot: doc, design și convos. Pretutindeni!"

Reacția coechipierului meu a dat dovadă de curiozitate, chiar dacă nu s-a potrivit cu lovitura emoțională a izbucnirii mele. El nu este un sistem geek ca mine. Nu încă, cel puțin. Dar el a contat ce contează: există o cale vizibilă pentru deciziile pe care le luăm până unde sunt implementate.

Am depus atât de mult efort încercând să scoatem designul din variabilele noastre - cele mai atomice dintre biți de cod reutilizabili - m-am simțit atrasă instantaneu de ideea de a reface designul.

Iată cum am evoluat, arhivat și implementat jetoane de-a lungul proiectării, codului și colaborării.

De la variabile la jetoane

Fiecare sistem de proiectare oferă opțiuni. De exemplu, culorile pot varia de la negru la neutre la alb. Fiecare neutru - identificat printr-un cod HEX precum # 2B303B - poate fi stocat și pus la dispoziție într-o variabilă $ color-neutru-20, pentru utilizare într-un preprocesor precum Sass.

Variabilele scot misterul din valori obscure. Dar nu elimină diferența dintre denumire și utilizare. Ei răspund „Ce opțiuni am?” Și totuși lasă „Ce alegere fac?” Neclar.

Opțiunile nu sunt suficient de bune.

Decizii de proiectare, o opțiune aplicată unui context

Punctul forte al unui sistem vine din faptul că știi cum să aplici opțiuni (cum ar fi $ color-neutru-20) în contexte (cum ar fi o culoare convențională de fundal închis). Acest lucru motivează opțiunea ca decizie.

Acestea sunt decizii pe care le pot folosi cu încredere!

Totuși, astfel de decizii sunt în general îngropate într-un fișier într-un proces folosit de dezvoltatorii care lucrează la produsul web pe care îl dețin. Ce zici de designeri? Alte produse web? Peste alte platforme precum iOS și Android? Am luat decizii codificate destinate tuturor, dar au deținut într-o temniță a unui repo pe care nimeni altcineva nu o poate găsi.

Jetoane de proiectare, decizii propagate printr-un sistem

Salesforce UX oferă o privire. Ideile lor mă captivează, cel mai mult conceptul lor de stil de viață care aplică jetoane de design pe produse folosind instrumentul lor open source Theo.

Aici, opțiunile și deciziile nu sunt îngropate în fișierele Sass. În schimb, acestea sunt centralizate și propagate ca jetoane către orice produs, proiectant sau dezvoltator care adoptă sistemul, în formate ușor de utilizat, previzibile.

Sute de jetoane pot deveni decizii lizibile, intenționate și de urmărire țesute în produsele unui portofoliu sau ale unei întreprinderi.

Vedeți deciziile ca pe o foaie mare de specificații? Eu pot. Designerii pot și ei. Cu o astfel de vizibilitate și instrumentare, ei recunosc impactul deciziilor lor. Înainte, ne-am decis pentru $ color-neutru-80 pentru o margine sau fundal cu un pic de whimsy. Acum, aplicăm o linie de păr $ border sau un fundal de culoare $ de fundal într-un mod gânditor, convențional.

Designerii încep să colaboreze. Ei iau decizii cu mai multă deliberare și încredere, își organizează gândurile într-o structură pe care o împărtășesc. Dezvoltatorii urmează exemplul.

Acest lucru poate transforma activități dureroase precum redline și măsurarea pixelilor într-o colaborare bogată cu vorbirea cu simboluri. Pe parcursul activității noastre - criticarea conceptelor de design, scrierea criteriilor de acceptare, verificarea solicitărilor de tragere - arhitectura și implementarea jetoanelor sunt mereu prezente.

Jetoane de arhitectură

O arhitectură tokenă de succes și de durată depinde de gruparea simplă, ordonarea, clasificarea și luarea deciziilor.

# 1. Afișează mai întâi opțiunile, apoi deciziile

Nu puteți lua decizii fără opțiuni. Jetoanele sunt un instrument eficient pentru ilustrarea traseului de la una la alta.

În fișierele noastre simbolice, începem cu opțiuni precum culorile disponibile. După aceea, aplicăm opțiuni în contexte precum „culoare text” și „culoare fundal”.

Take away: Organizează-ți deciziile pentru a sugera baza lor atomică: construind de la opțiuni la decizii și simplu la complex.

# 2. Începeți cu Color & Font și nu vă opriți acolo!

Vorbesc adesea despre cele trei mari limbaje ale unui design: culoare, tipografie și iconografie. Deci nu este de mirare că fișierul nostru token începe cu opțiuni și decizii de culoare și tip (pictogramele sunt automatizate în altă parte). Cu toate acestea, stilul vizual este compus din mult mai multe, și astfel ar putea fi jetoane.

În timp ce vom începe cu aplicarea culorilor pe fundal și text, ne vom extinde la multe alte tipuri de decizii, inclusiv lucruri precum:

Take away: Începeți, dar nu stați doar cu culoarea și tipul. Extindeți-vă deciziile pentru a acoperi numeroasele preocupări ale unui limbaj de design.

# 3. Variază opțiuni pe scări semnificative

Multe concepte tokenizate includ cântare din care să alegeți, cum ar fi dimensionarea tricourilor (XS, S, M, L, XL, XXL), progresii (cum ar fi un geometric 2, 4, 8, 16, 32, 64) sau terminologia personalizată (cum ar fi compact, confortabil și confortabil). De asemenea, scalele pot începe cu câteva opțiuni (doar S&M) și se pot dezvolta pentru a include mai multe, după cum este garantat.

Scalele permit ramificarea unei ierarhii de jetoane cu variante similare, dar distincte, cum ar fi îmbogățirea spațiu-inserției (de la XS la XL) la variante de spațiu-inserție-squiș și spațiu-inserție-întindere (ambele oferind și XS până la XL).

De acord cu un model de scalare - tricouri sau progresii, decideți! - pentru intervale ca acestea este o încercare specifică echipei. Și mai dur, va trebui să evitați cântarele întărite care nu sunt rezistente pentru a insera mai târziu un pas.

Take away: Adoptați și tokenizați cântarul și demonstrați modul în care se aplică pe diferite scenarii.

# 4. Invitați contribuție, dar curatați colecția

Când o alegere garantează să devină un jeton? O singură utilizare: nu, nu este suficient. O secundă poate lipsi de convingere. Dar trei? Dacă apare atât de mult, este, de obicei, demn de indicativ. Excepție există, dar criteriile „Folosit de 3 ori?” Sunt motive de discuție.

Deci, cine este token gatekeeper-ul? Nimeni, dacă angajăm procese sănătoase pentru proiectarea și revizuirile dev. Oricine poate propune jetoane, depistând candidații într-un concept sau poate solicita. Canalul nostru Slack are multe discuții, de asemenea.

Cu toate acestea, servesc ca curator de jetoane, scanând lucrul cu ochii pentru candidații. Pot să depășesc marcajul unei solicitări și să omit JavaScript. Cu toate acestea, scanez în profunzime fișierele de stil și jetoane în nume fine, reclasific nominalizări și provoc o extindere excesivă. Toată lumea are o voce simbolică. Dar nu toată lumea îi pasă suficient sau are timp să mențină tokenurile curate.

Take away: Faceți din jetoane un efort de echipă și, chiar dacă implicit, desemnați o minte arhitecturală structurată pentru a vindeca colecția.

# 5. Decizii de absolvire de la componente la jetoane

Este o distragere pentru a devia puterea creierului spre a gândi în mod constant jetoane, jetoane, jetoane. „Ar trebui să fie un simbol nou? Este un simbol? Nu folosesc un jeton? Nu, nu are nevoie de nimeni.

Cu toate acestea, colegul meu de echipă Kevin Powell are un obicei sănătos de a stoca variabile în partea de sus a unui fișier de stil de componente. De exemplu, o porțiune de variabile utilizate în stilul componentei sale de formă identifică multe aplicații de culoare text pentru a forma elemente precum erori inline, intrare, etichete și text pentru marcator.

Fișier de componente emergente din stânga, cu variabile specifice fișierului în partea de sus ușor de comparat și de luat în considerare pentru fișierul de jetoane din dreapta.

Aceste variabile specifice componentelor oferă un inventar util de candidați pentru a absolvi biblioteca de jetoane. Aici, putem prinde o ocazie de a înlocui o culoare dezactivată mai puțin specifică de $ color-neutru-90 cu mai mult intenționat $ fundal-culoare-dezactivat în fișierul form_elements.styl. Pe de altă parte, componenta $ border-color-input-hover este mai puțin probabilă pentru reutilizare dincolo de formulare și, așadar, un candidat slab.

Take away: Încurajați obiceiurile în proiectare și dezvoltare care parchează decizii reutilizabile - candidați candidați - într-un loc previzibil, cum ar fi partea de sus a unui fișier text sau colțul artei de design.

# 6. Faceți față schimbărilor sistemice în mod previzibil

Jetoanele sunt un instrument minunat, deoarece formulați un sistem curat de la zero. Dar cum rămâne cu 18 luni de acum, când evoluează deciziile de proiectare? Cum se schimbă o cascadă token? Care sunt riscurile și cum le atenuați?

Jetoanele vă protejează de schimbări imprevizibile, pe scară largă, având în vedere specificul lor și, ca urmare, utilizarea mai limitată și intenționată.

Căutarea unei variabile generice

Anterior, s-a pieptănat și evaluat un depozit pentru un cod hex # 2B303B sau variabila $ color-neutru-20 aplicată pentru numeroase elemente. Boo!

Căutarea unei anumite decizii.

Acum, urmăriți amploarea utilizării $ text-culoare-microcopie cu precizie și reducerea riscului. Da!

Take away: Beneficiați de avantajele de întreținere ale unui jeton și folosiți-le ca punct de vânzare pentru echipa dvs. adoptatoare.

Implementarea jetoanelor

Majoritatea echipelor încep să consolideze deciziile ca o stivă uriașă de nume de variabile ierarhice previzibile într-un fișier SASS sau Stylus. Dar acel dosar îngroapă deciziile într-un singur loc, limitând utilizarea la această tehnologie.

Aceasta lasă promisiunea de jetoane neîmplinite. Un prim pas în răspândirea jetoanelor într-un sistem este eliberarea acestora cu un format deschis precum JSON.

# 7. Faceți ca datele Token să fie reutilizabile, prin JSON

JSON este un standard deschis ideal pentru codificarea perechilor ierarhice / valori pentru reutilizarea instrumentelor.

Cu token-urile în JSON, puteți transforma deciziile pentru mai multe preprocesoare - SASS, Stylus și LESS - așa cum necesită comunitatea dvs. Acest lucru deschide ușa către produse restrânse la un preprocesor pe care nu le pot lăsa sau nu le vor lăsa în urmă, chiar dacă nu este sistemul „recomandat”.

În mod similar, JSON creează o punte de legătură cu alte platforme, indiferent dacă sunt consumate direct în iOS sau transformate în XML pentru echipele Android.

Takeaway: codificați jetoanele într-un format reutilizabil pe platforme, expunându-le într-o formă pe care toată lumea o poate folosi.

# 8. Gestionați și citiți datele Token cu ușurință, prin YAML

JSON este puternic, ierarhic și flexibil. Cu toate acestea, este imperfect ca loc de gestionare a datelor. Sintaxa este verbală, predispusă la erori atunci când este curățată manual, nu are suport pentru comentarii și nu are variabile.

Introduceți YAML, un limbaj care poate fi citit mai mult de oameni pentru înregistrarea perechilor de proprietăți ierarhice / valori. YAML adaugă variabile și comentarii la capacitatea ierarhică a lui JSON într-un format mai lizibil. YAML ajută la afișarea rapidă a jetoanelor cu ușurință oricărui public, iar simplitatea sa deschide o graniță pentru designeri pentru a sugera noi valori și chiar pentru a depune singuri cererea de tragere.

Echipa noastră folosește yamljs pentru a transforma datele YAML pe care le gestionăm ca o sursă unică de adevăr într-un obiect JavaScript ca pas al procesului nostru de construire.

Take away: Luați în considerare YAML pentru a permite proiectanților să se angajeze și să lucreze în cod, apropiindu-i de cod și de cei care utilizează codul.

# 9. Automatizarea documentației cu date de token

Încorporarea deciziilor de proiectare în cod nu este valabilă dacă proiectanții și dezvoltatorii nu știu care sunt deciziile și cum să le acceseze. Acesta este motivul pentru care folosim jetoane la fel de conținut, la fel de mult ca și codul.

În sistemele noastre, aruncăm token-urile ca structură de date (gândește-te: JSON) în șabloane pentru a arăta deciziile într-o referință de jetoane și alte subiecte precum butoanele spațiale și tematice.

Șabloane de bază pentru site-ul de documentare, alimentat de date cu jeton

Altă documentație este mai personalizată, cum ar fi o stivă de nuanțe de culoare care include nume, scoruri de accesibilitate și multe altele. Deși nu este o buclă simplă prin ierarhie token, documentația poate utiliza în continuare direct jetoane.

Take away: Folosiți jetoane pentru a vă îmbogăți cât de bine poate fi ghidul dvs. de viață.

# 10. Încorporați date de token în instrumentele de proiectare, Prea mult

Datele de jetoane pot inspira idei pentru instrumente nu numai pentru dezvoltatori, dar și pentru designeri. Vorbim despre construirea de instrumente personalizate pentru comunitatea de proiectare a portofoliului nostru în instrumente precum Sketch, Photoshop sau (înapoi la zi) InDesign.

Un astfel de software oferă cârlige diferite pentru a utiliza datele JSON în avantajul dvs. De exemplu, InVision's Craft se bazează pe obiecte JSON stocate ca text în subfoldere, ceea ce sugerează o posibilă integrare cu rezultatele procesului de construire a sistemului nostru. Astfel de conexiuni au fost destul de eficace și suficient de silente în trecut încât nu au fost ignorate. Astăzi, se simt mai realiste pe măsură ce un sistem se maturizează.

Take away: Identificați oportunitățile de extindere a sistemului în instrumentele de proiectare, în special software de proiectare. Luați în considerare costurile - atât configurarea, cât și întreținerea - în raport cu beneficiile pentru experiența utilizatorului de sistem.

Cu cât echipele mele folosesc jetoane, cu atât sunt mai acasă că simt că discut despre design. Înfășurarea deciziilor inteligente codificate cu nume semnificative mă ajută să am încredere în ceea ce privește puterea echipei mele care se îndreaptă spre aspirația unui sistem mai coeziv și mai durabil.

Ești pe cale să te pornești la un sistem de proiectare sau să fii nevoie să te scufunzi mai adânc pentru a discuta despre produse și jucători? EightShapes conduce ateliere de planificare a sistemelor și antrenează clienții pe sisteme de proiectare. Hai să vorbim!