Spațiu în sisteme de proiectare

De la Noțiuni de bază la concepte extinse pentru a aplica spațiu cu intenție

M-am referit de mult timp la Culoare, Tip și Icoane ca „Big 3” al limbajului vizual al unui sistem. Toate componentele UI - de la Butoane în sus - sunt construite cu ele. Dar am lăsat ceva afară. Spațiul, frontiera noastră finală.

Space Rivals Color

Spațiul este peste tot. CSS folosește proprietăți precum placarea, marginea și poziționarea absolută în stânga, dreapta, sus și jos pentru a separa obiecte. Pe cinci biblioteci (Bootstrap, Salesforce Lightning, Fundație, un proiect anterior și un proiect curent), am comparat apariția acestor proprietăți de spațiu în raport cu grupuri de proprietăți de culoare, dimensiune, tip, aspect și altele.

Spațiul rivalizează culoarea în frecvența de utilizare în conformitate cu regulile de stil ale unei biblioteci

După eliminarea efectelor (valori „zero” cum ar fi: 0 și termeni rezervați ca transparent sau auto), în cazul în care CSS ne oferă deja un sistem pentru decizii, regulile de spațiu au apărut mai mult decât orice, cu excepția culorii. Nimic altceva - nu tip, dimensiune, aspect - nu a fost chiar aproape. Există atâta complexitate spațială încorporată în bibliotecile noastre, dar mai puțin produsele noastre!

Spațiul ne împarte

Spațiul ilustrează „proiectez în acest mod, construiți astfel” diferența dintre design și dev. Ne-am plâns de multă vreme cu specificațiile cu căptușeală roșie presărate peste desenele noastre. Nu se simte niciodată în valoare. Cu toate acestea, acestea persistă, neinformate de materialul final al produsului nostru: modelul de casetă HTML.

Costurile sunt uriașe: adnotarea, traducerea, discuția, spălarea vizuală în timpul evaluării. Toate astea funcționează ... pentru ceva încă nu este suficient de bun. Astfel, spațiul necesită și o taxă emoțională.

Conceptele de spațiu sunt primitive

Am putea țese concepte spațiale mai intenționate prin design, cod și conversație. Dar noi nu. Folosim doar dimensiuni de tricouri și îl numim pe zi. Putem face mai bine. Putem înlocui furia roșie cu căptușeală roșie pentru a inseta, a ghemui, a întinde și a stiva drum spre un viitor de claritate spațială.

În acest sens, aici sunt fundamentele, un vocabular extins și experiențe suplimentare pe care le-am avut atunci când aplic spațiu la sistemele de lucru.

Fundamente spațiale

Grilă ≠ Spațiu. Gridul este o componentă, folosind spațiul.

Grilele sunt bogate cu decizii spațiale pentru coloane, jgheaburi, margini exterioare și nuanță receptivă. Echipele abordează grilele din timp, astfel încât utilizatorii să poată face cu ușurință o pagină. Din păcate, aceasta este adesea atunci când conversațiile spațiale se opresc.

Convenții grilă pentru margine (albastru) și jgheab (verde var)

O grilă nu este un sistem spațial complet. O grilă este o componentă care folosește spațiul, la fel ca orice alte componente. O grilă se simte diferit. Este invizibil, vine devreme și face doar spațiu. Dar există mai mult spațiu decât grilă.

Take away: Introduceți convenția spațială cu o grilă, dar nu vă opriți acolo. Aliniați marginile unei grile, jgheaburile și valorile coloanelor cu concepte spațiale mai profunde țesute printr-o întreagă bibliotecă de componente.

Stabiliți un număr memorabil de bază și așteptări

Echipele configurează un memorabil, chiar și un număr de bază magic pentru a împământa toate celelalte valori spațiale. Unele echipe preferă baza 10, datorită modului în care număram (datorită celor zece degete, apropo). Am văzut chiar că o echipă folosește o bază 6 - cu factori de ajutor 2 și 3 - pentru a crea loc pentru o serie uber-flexibilă de 3s, 4s, 6s, 8s, 9s, 12s, 15s, 16s, 18s, 21s, 24, 32 și mai mult. Oprește nebunia!

Un set de opțiuni de distanțare, bazate pe 6, care furnizează orice multiplu de 3s și 2s. Într-adevăr? Toate aceste opțiuni?

Majoritatea sistemelor pe care le-am lucrat folosesc 16. Are o dimensiune de font implicită. Este un factor al tuturor rezoluțiilor ecranului (320, 768, 1024). Și oferă multipli memorabili mai mari (32, 64,…) și factori mai puțini (8, 4, 2) decât locul unde începe.

Un set de opțiuni spațiale mai limitate, bazate pe 16

Take away: Puneți la sol sistemul dvs. spațial cu un număr de memorabil de bază și limitați așteptările cu privire la modul în care este utilizat.

Opțiuni la scară neliniară

Cu o bază stabilită, echipele pot încă să alunece în pași aleatori (12, 14, 18, 22, 24, 28, 30, 32, ...). Pentru a preveni asta, alții folosesc o scară liniară (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, ...) unde fiecare pas este un increment fix. Pentru mine, orice rezultat este folosit imprevizibil, oferind prea multe opțiuni prea apropiate. Când folosesc 24 sau 28? Nu știu.

Progresie liniară de la 4 la 32. Într-adevăr, aveți nevoie de toate aceste opțiuni?

O alternativă este neliniară. Opțiunile includ raportul auriu, scara modulară sau progresia geometrică similară care ar putea dubla fiecare pas. Pornind de la bază, vom merge pe ambele direcții, până la opriri mai mici (16, 8, 4, 2) și mai mari (16, 32, 64 și ... adică) pe scară.

Progresie geometrică, dublând fiecare pas. % s reprezintă o utilizare proporțională în biblioteca noastră.

Take away: Considerați o progresie geometrică sau ceva asemănător neliniar. S-ar putea să întâmpinați tensiuni ocazionale pentru a adăuga un 24 între 16 și 32. Cu toate acestea, în experiența mea, astfel de momente sunt rare și rareori justifică ruperea sistemului simplu.

Numește fiecare etapă pentru o reutilizare memorabilă și precisă

Îmi place comutarea spațiului compact, confortabil și confortabil al Gmail. Așa că, atunci când ne-am construit sistemul spațial, am sugerat să folosim acele etichete în activitatea noastră. Imediat, un coechipier m-a provocat: „Cum numim alți pași?” Opțiunile mele spartane, fragede și luxoase nu au trecut cu adevărat.

O etichetă descriptivă pentru fiecare oprire? Ai grija.

Așa că am făcut ceea ce facem întotdeauna: folosim o scară de dimensiuni de tricouri. Mediu corespunde valorii implicite și S, XS, L, XL și - dacă este necesar - XXS și XXL sunt alte opțiuni. Este ceea ce fac majoritatea bibliotecilor (Bootstrap, Lightning etc.).

Take away: Opțiuni de spațiu pentru nume pur și simplu, folosind o scară precum dimensiunile tricourilor pentru a crea o limbă pe care oamenii o pot aminti și aplica cu exactitate. Dacă încercați mai multe etichete descriptive, fiți pregătiți pentru coechipieri să răspundă „Mic, mediu, mare, vă rog.”

Am examinat multe biblioteci și am discutat cu mulți designeri. Convențiile simple ale numerelor de bază și ale unei scări numite sunt locul în care conversațiile se termină de obicei. Chiar dacă aceste câteva opțiuni sunt simple, folosirea spațiului este încă simțită atât de ... întâmplător. Aveam nevoie de mai mult.

Extinderea unui vocabular pentru spațiu

În revizuirea lucrărilor noastre emergente, nu există multe intenții distincte pentru aplicarea spațiului. De exemplu, să inspectăm componenta mea preferată: cardul.

În calitate de dezvoltator front-end, mă gândesc la toate casetele de elemente care se potrivesc între ele.

Cardul oferă o ilustrație utilă a multor concepții spațiale pe care le folosim: insetarea conținutului de la o margine, modificarea formei unei inserții, distanțarea elementelor în linie și stivuirea articolelor în interiorul și între o componentă.

Aceste concepte - inset, insertie, intet, stivuire, linie și grilă - acoperă marea majoritate a regulilor CSS ale bibliotecii noastre pentru spațiu: căptușire, marjă, stânga, dreapta, sus și jos. Aceste concepte îmbunătățesc, de asemenea, modul în care fiecare atom este de sine stătător, îmbunătățind compozibilitatea.

Conceptul 1: (pătrat)

O inserție oferă conținut de indentări pe toate cele patru părți, precum matul fotografiei încadrate de pe un perete. Utilizarea este răspândită pe mai multe componente la diferite dimensiuni, indiferent dacă modulul nostru 3-Up și mesajele de blocare simt mediu, pastile suplimentare compacte sau subsolurile spațioase și materialele.

Valoarea implicită este, de asemenea, un punct de plecare util pentru primul design mobil, extinzându-se la dimensiuni mari la o lățime de vizionare relevantă, cum ar fi 768px.

Conceptul 2: Squish Inset

O inserție gâtuită reduce spațiul de sus și de jos, în cazul nostru cu 50%. Deși este mai puțin obișnuit decât omologul său pătrat, un squish a apărut frecvent în elemente (precum un buton) și containere asemănătoare celulelor, cum ar fi un tabel de date sau un element de listă.

Insetare redusă în butoane, celule din tabelul de date și elemente de grup

Conceptul 3: Stretch Inset

Contrastat cu un buton sau o pastilă, am găsit întinderea verticală a cutiilor de text, a textelor și a altor elemente de formă.

Conceptul 4: Pila

Cu toată respectarea UI derulată orizontal, majoritatea copleșitoare derulează vertical. Și asta înseamnă un lucru: stivuim lucruri. Stivuim mesajul la titlu pe tabelul de date. Stivuim module în șine. Stivuim copie, pastile și bare de instrumente, toate într-un card, fiecare într-o grilă. Heck, defilare infinită înseamnă stivă infinită! Stivuim, stivuim, stivuim.

Conceptul 5: Inline

De asemenea, aranjăm obiecte în linie, înfășurându-se pe măsură ce curg ca textul din stânga sau din dreapta. Astfel de obiecte - pastile, etichete, pesmet și multe altele - pot sta singure sau stiva și se pot amesteca cu alte obiecte.

Conceptul 6: Grila

Ah, salvați grila pentru ultima dată? Pe măsură ce distanțarea se stabilizează, ne aflăm în revizuirea marjelor grilei și a jgheaburilor, alinierea acestor spații la punctul nostru de pornire magic și la alte utilizări.

Deci, așa cum se aplică la o componentă Card, căptușeala și marginea în stil pot arăta ca ceva:

Aplicarea noțională de inserții, stive și linii (sau distanțiere generice - ack!) Pe un card

Ce am învățat

Utilizarea conceptelor de spațiu necesită să ne adaptăm la ceva nou. În echipa mea, a fost nevoie de o zi pentru scepticismul ușor pentru a da drumul la îmbrățișarea noului model.

Învață vizual un sistem de spațiu

Cei mai mulți colaboratori nu pot vedea spațiul, motiv principal pentru care este aplicat atât de arbitrar. Dar acum avem un sistem: un număr limitat de concepte, fiecare oferind o gamă limitată de opțiuni.

O referință vizuală, asemănătoare cu o foaie de lucru, a conceptelor spațiale

Take away: Învață-ți conceptele spațiale folosind o diagramă documentă strânsă sau o foaie de înșelăciune. Astfel de referințe accelerează modul în care înțelegem, aplicăm și susținem conceptele prin design și cod.

Oferiți asistenți simpli și monitorizați utilizarea

Nu fi prost. Aceste șase modele nu rezolvă totul. Încă am ajustat un margine de jos aici și lăsat acolo din când în când. Deci, există o justificare pentru urmărirea unor opțiuni spațiale mai intenționate cu alternative mai generice (cum ar fi $ space-m).

Take away: Oferiți opțiuni generice, utilizați-le puțin și așteptați ca echipele de produse să le utilizeze. Când apar într-o solicitare de critică sau tragere, educați coechipierii pe concepte mai specifice, cum ar fi insertul sau stiva.

Evitați numele variabile cu căptușire sau marjă

Când introduceți ceva mai complicat, alții pledează în mod justificabil pentru ceva familiar, cum ar fi „De ce nu putem folosi căptușeala și marja în numele noastre variabile?” În acest caz, 2+ concepte de spațiu folosind căptușire, iar acele concepte pot fi aplicate prin stânga. și proprietăți corecte. margin este utilizat pentru a stiva, grila și spațiu în linie. În plus, ce zici de platformele non-web care nu folosesc HTML?

Take away: Înlăturați conceptele de numele proprietăților. Sunt mulți la unul și limitează reutilizarea la o singură platformă.

Rezolvați coliziunile ca înălțimea liniei sistematic

Normele de umplere simplă și de marjă de stivă s-au ciocnit cu un adversar spațial cunoscut de mult: înălțimea liniei. Această interacțiune mărește spațiul în mod imprevizibil, adăugând un pixel deasupra și dedesubtul nostru, mai simplu implicit, implicit de 16px.

Cu toate acestea, am urmărit scânteia unei idei („kevinmpowell” „Să spațializăm marja negativă folosind pseudoelemente! Dar cât de mult?”) Cu o oarecare matematică (pot folosi diploma mea universitară!). Rezultatul a fost o formulă mixin care combina dimensiunea tipului și înălțimea liniei pentru a prăbuși spațiul de deasupra și dedesubtul obiectelor de coliziune.

Take away: Nu renunțați la claritatea sistematică din cauza excepțiilor. Încercați să le rezolvați. Dacă puteți depăși astfel de nuanțe, chiar și cu un pic de smecherie CSS, puteți persista un concept mai simplu de care toată lumea se poate lipi.

Utilizați concepte spațiale pentru a forma densitatea

Având concepte precum insert, stivă și grilă, puteți regla cadranele densității cu aplomb. Căutați într-un depozit, găsiți inserții și stive de interes și extindeți sau înlocuiți aceste reguli pentru a ajusta densitatea afișajului.

În stânga, distanțarea implicită. În partea dreaptă, reglați prin creșterea doar a inserției cu 50%.

Take away: Puteți ajusta densitatea spațială chiar și cu un set de opțiuni primitive abia dincolo. Fără ele, controlul densității este un vis. Cu acestea, puteți construi treptat către un motor puternic pentru a găsi, regla și regla spațiul cu o intenție mare și cu un risc mai mic.

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!