Plads i designsystemer

Fra grundlæggende til udvidede koncepter til anvendelse af plads med forsigtighed

Jeg har længe omtalt farve, type og ikoner som "Big 3" på et systems visuelle sprog. Alle UI-komponenter - fra knapper og op - er bygget med dem. Men jeg forlod noget. Rum, vores sidste grænse.

Space Rivals Farve

Rummet er overalt. CSS bruger egenskaber som polstring, margin og absolut positionering af venstre, højre, øverste og nederste for at adskille objekter. På tværs af fem biblioteker (Bootstrap, Salesforce Lightning, Foundation, et tidligere projekt og et aktuelt projekt) sammenlignede jeg forekomsten af ​​disse pladsegenskaber i forhold til egenskabsgrupper af farve, størrelse, type, layout og mere.

Rumkonkurrencer farver i brugsfrekvens inden for et biblioteks stilregler

Efter at have fjernet effekter ("nulstillede" værdier som: 0; og reserverede udtryk som gennemsigtigt eller auto), hvor CSS allerede tilbyder os et system til beslutninger, optrådte pladsregler mere end noget andet end farve. Intet andet - ikke type, størrelse, layout - var endda tæt. Der er så meget rumlig kompleksitet, der er indbygget i vores biblioteker, hvad så ikke vores produkter!

Rum deler os

Rum identificerer ”Jeg designer denne måde, du bygger på den måde” kløften mellem design og dev. Vi har længe klaget over de rødforede specs, der drysses over vores designs. Det føles aldrig det værd. Alligevel fortsætter de, uoplyst af vores produkts færdige materiale: HTML's kassemodel.

Omkostningerne er enorme: annotering, oversættelse, diskussion, visuel skrubbe under QA. Alt det der arbejder ... for noget, der stadig ikke er godt nok. Derfor kræver plads også en følelsesmæssig vejafgift.

Rumkoncepter er primitive

Vi kunne væve mere forsætlige rumlige koncepter gennem design, kode og samtale. Men det gør vi ikke. Vi bruger bare T-shirtstørrelser og kalder det en dag. Vi kan gøre det bedre. Vi kan erstatte rødforede, rødvendte vrede for at indsætte, klæbe, strække og stable vores vej mod en fremtid med rumlig klarhed.

Med det i tankerne er her grundlæggende elementer, et udvidet ordforråd og yderligere oplevelser, jeg har haft, når jeg anvender plads til systemarbejde.

Space Fundamentals

Gitter ≠ Mellemrum. Gitter er en komponent, der bruger plads.

Gitre er rige med rumlige beslutninger til søjler, tagrender, ydre margener og responsiv nuance.Teams tackle tidlige gitter tidligt, så brugerne let kan lave en side. Desværre er det ofte, når de rumlige samtaler stopper.

Gitterkonventioner for margin (blå) og tagrender (lime grøn)

Et gitter er ikke et komplet rumligt system. Et gitter er en komponent, der bruger plads, ligesom alle andre komponenter. Et gitter føles anderledes. Det er usynligt, kommer tidligt og giver kun plads. Men der er mere plads end gitter.

Takeaway: Introducer rumlig konvention med et gitter, men stopper ikke der. Juster et gitterets marginer, tagrender og søjleværdier med dybere rumlige koncepter vævet gennem et helt komponentbibliotek.

Indstil et uforglemmeligt basisnummer og forventninger

Hold opsætter et mindeværdigt, endda magisk basenummer for at jordfeste alle andre rumlige værdier. Nogle hold foretrækker base 10 på grund af hvordan vi tæller (på grund af vores ti fingre, forresten). Jeg har endda set et team bruge en base 6 - med nyttige faktorer på 2 og 3 - for at gøre plads til en uber-fleksibel række 3s, 4s, 6s, 8s, 9s, 12s, 15s, 16s, 18s, 21s, 24, 32 og mere. Stop galskaben!

Et sæt afstandsindstillinger, der er baseret på 6 men leverer et hvilket som helst multiplum af 3'ere og 2'ere. Virkelig? Alle disse muligheder?

De fleste systemer, jeg har arbejdet, bruger 16. Det er en god standardskriftstørrelse. Det er en faktor for alle skærmopløsninger (320, 768, 1024). Og det giver mindeværdige multipla større (32, 64, ...) og faktorer mindre (8, 4, 2) end hvor det starter.

Et sæt mere begrænsede rumlige indstillinger, baseret på 16

Afhentning: Jord jeres rumlige systems rækkevidde med et uforglemmeligt basisnummer, og begræns forventningerne til, hvordan det bruges.

Skala indstillinger ikke lineært

Med en etableret base kan hold stadig glide i tilfældige trin (12, 14, 18, 22, 24, 28, 30, 32, ...). For at forhindre dette bruger andre en lineær skala (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, ...), hvor hvert trin er et fast trin. For mig bruges begge resultater uforudsigeligt, hvilket giver for mange valg for tæt på hinanden. Hvornår bruger jeg 24 eller 28? Det ved jeg ikke.

Lineær progression fra 4 til 32. Har du virkelig brug for alle disse muligheder?

Et alternativ er ikke-lineær. Valgmulighederne inkluderer det gyldne forhold, modulskala eller den lignende geometriske progression, der kan fordoble hvert trin. Fra basen går vi i begge retninger til stop mindre (16, 8, 4, 2) og større (16, 32, 64 og ... det handler om det) i skalaen.

Geometrisk progression, fordobling af hvert trin. % s repræsenterer proportional brug i vores bibliotek.

Afhentning: Overvej en geometrisk progression eller noget lignende ikke-lineært. Du oplever måske lejlighedsvis spændinger for at tilføje en 24 mellem 16 og 32. Men efter min erfaring er sådanne øjeblikke sjældne og berettiger sjældent at bryde det enkle system.

Navngiv hvert trin til mindeværdig, nøjagtig genbrug

Jeg elsker Gmail's kompakte, hyggelige og behagelige pladsskift. Så da vi byggede vores rumsystem, foreslog jeg, at vi skulle bruge disse mærker i vores arbejde. Straks udfordrede en holdkammerat mig: ”Hvad kalder vi andre trin?” Min spartanske, teeny og luksuriøse indstillinger passerede ikke mønstre.

En beskrivende etiket til hvert stop? Vær forsigtig.

Så vi gjorde, hvad vi altid gør: Brug en skala i t-shirtstørrelse. Medium svarer til standard, og S, XS, L, XL og - om nødvendigt - XXS og XXL er andre muligheder. Det er hvad de fleste biblioteker (Bootstrap, Lightning osv.) Gør.

Afhentning: Navn på pladsindstillinger ganske enkelt ved at bruge en skala som t-shirtstørrelser til at skabe et sprog, folk kan huske og anvende nøjagtigt. Hvis du prøver mere beskrivende etiketter, skal du være forberedt på, at holdkammerater reagerer "Små, mellemstore, store, tak."

Jeg har gennemgået mange biblioteker og talt med mange designere. Enkle konventioner af basisnumre og en navngivet skala er hvor samtaler normalt slutter. Selvom disse få indstillinger er enkle, føles det stadig, at bruge plads så ... tilfældigt. Jeg havde brug for mere.

Udvidelse af et vokabular for plads

Når vi gennemgår vores nye arbejde, er der ikke mange forskellige måder at anvende plads på. Lad os f.eks. Inspicere min favoritkomponent: kortet.

Som front-end-udvikler ser jeg for mig alle bokse med elementer, der passer sammen.

Kortet giver en nyttig illustration af mange rumlige koncepter, vi bruger: indsættelse af indhold fra en kant, ændring af en indsats form, afstand mellem emner på linjen og stabling af genstande i og mellem en komponent.

Disse koncepter - indsat, indsat squish, indsat strækning, stabel, inline og gitter - dækker langt de fleste af vores biblioteks CSS-regler for plads: polstring, margin, venstre, højre, top og bund. Disse koncepter forbedrer også, hvordan hvert atom er selvstændigt, hvilket forbedrer komposibiliteten.

Koncept 1: (firkantet) Indsæt

Et indlæg tilbyder indrykk indhold på alle fire sider som det matte af det indrammede foto på en væg. Det er udbredt på tværs af mange komponenter i forskellige størrelser, hvad enten vores 3-Up-modul og blokmeddelelser er medium-føle, ekstra kompakte piller eller rummelige sidefødder og mastheads.

Standarden er også et nyttigt udgangspunkt for mobilt første design, der udvides til stort med en relevant visningsbredde som 768px.

Koncept 2: Squish Inset

En squished indsættelse reducerer pladsen øverst og nederst, i vores tilfælde med 50%. Selvom det er mindre almindeligt end dets kvadratiske modstykke, forekom en squish ofte i elementer (som en knap) og celle-lignende containere som en datatabel eller en liste.

Klemede indsats i knapper, datatabelceller og liste over gruppeposter

Koncept 3: Stretch Inset

Kontrasteret med en knap eller en pille er squish, fandt vi os lodret at strække indsatserne af tekstbokse, tekstområder og andre formelementer.

Koncept 4: Stak

Med al respekt for det vandret rullede UI ruller det overvældende flertal lodret. Og det betyder én ting: vi stakler ting. Vi stakler beskeden på overskriften på datatabellen. Vi stabler moduler i skinner. Vi stabler kopi, piller og værktøjslinjer, alt sammen på et kort, hver i et gitter. Heck, uendelig rulle betyder uendelig stak! Vi stakler, stakler, stakler.

Koncept 5: Inline

Vi arrangerer også objekter inline, indpakning, når de flyder som tekst fra venstre eller højre. Sådanne genstande - piller, mærker, brødsmuler og mere - kan stå alene eller stables og blande sig med andre objekter.

Koncept 6: Gitter

Ah, gemme gitteret til sidst? Når afstanden stabiliserer sig, finder vi os ud til at revidere gittermargener og tagrender, og justerer disse rum med vores magiske udgangspunkt og andre anvendelser.

Så anvendt på en kortkomponent, kan din stil polstring og margen muligvis se sådan ud:

Notional anvendelse af indsatser, stabler og inlines (eller generiske afstandsstykker - ack!) På et kort

Hvad vi lærte

Brug af rumkoncepter kræver, at vi tilpasser os noget nyt. På mit hold tog det en dag for let skepsis at give plads til at omfavne den nye model.

Lær visuelt et system af rummet

De fleste samarbejdspartnere kan ikke se plads, en primær grund til, at det er så vilkårligt anvendt. Men nu har vi et system: et begrænset antal koncepter, der hver tilbyder et begrænset udvalg af muligheder.

En visuel reference, beslægtet med et snyderi, af rumlige begreber

Takeaway: Lær dine rumlige koncepter vha. Et stramt doc-diagram eller snyderi. Sådanne referencer gør det lettere for os at forstå, anvende og opretholde koncepterne gennem design og kode.

Tilby enkle hjælpere og overvåg brug

Vær ikke tåbelig. Disse seks modeller løser ikke alt. Vi justerede stadig en margin-bund her og forlod der fra tid til anden. Så der er berettigelse til at følge mere forsætlige pladsindstillinger med mere generiske alternativer (som $ space-m).

Afhentning: Giv generiske indstillinger, brug dem sparsomt, og forvent, at produktteam bruger dem. Når de opstår i en kritik eller trækker anmodning, uddannes holdkammerater til mere specifikke begreber som indsættelse eller stak.

Undgå variable navne med polstring eller margin

Når du introducerer noget mere kompliceret, går andre med rette ind for noget kendt, som "Hvorfor kan vi ikke bruge polstring og margin i vores variabelnavne?" I dette tilfælde kan 2+ pladskoncepter, der bruger polstring, og disse koncepter anvendes via venstre og rigtige egenskaber også. margen bruges til at stack, gitter og mellemrum inline. Plus, hvad med ikke-webplatforme, der ikke bruger HTML?

Takeaway: Drill koncepter fra ejendomsnavne. De er mange til én og begrænser genbrug til en enkelt platform.

Løs kollisioner som linjehøjde systematisk

Enkel indstikspolstring og stakmargenregler kolliderede med en længe kendt rumlig modstander: linjehøjde. Denne interaktion øger plads uforudsigeligt og tilføjer en pixel over og under vores enklere inset-standard på 16px.

Vi fulgte imidlertid en ide's gnist (@ kevinmpowells "Lad os have et negativt margenrum ved hjælp af pseudo-elementer! Men hvor meget?") Med noget matematik (jeg kan bruge min college grad!). Resultatet var en mixin-formel, der kombinerede type størrelse og linjehøjde for at kollapse plads over og under sammenstødende genstande.

Takeaway: Du må ikke opgive systematisk klarhed på grund af undtagelser. Prøv at løse dem. Hvis du kan overvinde sådanne nuancer, selv med lidt CSS-trick, kan du vedvare et enklere koncept, som alle kan holde sig til.

Brug rumlige koncepter for at ringe til densitet

Med koncepter som indsættelse, stak og gitter kan du indstille tallerkenerne med densitet med aplomb. Søg i et lager, find indsatser og stabler af interesse, og udvid eller tilsidesæt disse regler for at finjustere visningstætheden.

Til venstre standardafstand. Til højre kan du indstille ved at øge indsatsen med 50%.

Afhentning: Du kan indstille rumtæthed selv med et knap udover primitivt sæt indstillinger. Uden dem er densitetskontrol en drøm. Med dem kan du gradvis opbygge mod en kraftfuld motor til at finde, justere og indstille plads med stor intention og mindre risiko.

Om at gå i gang med et designsystem eller har brug for at dykke dybere for at diskutere produkter og spillere? EightShapes afholder systemplanlægningsworkshops og coacher klienter i designsystemer. Lad os tale!