Ruimte in ontwerpsystemen

Van basis tot uitgebreide concepten om ruimte te creëren met opzet

Ik heb lang naar kleur, type en pictogrammen verwezen als de "Big 3" van de beeldtaal van een systeem. Alle UI-componenten - vanaf knoppen - zijn hiermee gebouwd. Maar ik heb iets weggelaten. Ruimte, onze laatste grens.

Space Rivals Kleur

De ruimte is overal. CSS gebruikt eigenschappen zoals opvulling, marge en absolute positionering links, rechts, boven en onder om objecten te scheiden. In vijf bibliotheken (Bootstrap, Salesforce Lightning, Foundation, een vorig project en een huidig ​​project) heb ik het optreden van deze ruimte-eigenschappen vergeleken met eigenschapsgroepen kleur, grootte, type, lay-out en meer.

Ruimte concurreert met kleur in frequentie van gebruik binnen de stijlregels van een bibliotheek

Na het verwijderen van effecten ("nul" -waarden zoals: 0; en gereserveerde termen zoals transparant of automatisch) waarbij CSS ons al een systeem voor beslissingen biedt, verschenen ruimteregels meer dan wat dan ook behalve kleur. Niets anders - niet type, grootte, lay-out - kwam zelfs in de buurt. Er is zoveel ruimtelijke complexiteit ingebouwd in onze bibliotheken, laat staan ​​onze producten!

Ruimte verdeelt ons

Space belichaamt de kloof tussen 'Ik ontwerp op deze manier, jij bouwt op die manier' tussen ontwerp en ontwikkelaar. We hebben lang geklaagd over de rood omlijnde specificaties die over onze ontwerpen zijn verspreid. Het voelt nooit de moeite waard. Toch blijven ze bestaan, niet op de hoogte van het afgewerkte materiaal van ons product: het boxmodel van HTML.

De kosten zijn enorm: annoteren, vertalen, bespreken, visueel schrobben tijdens QA. Al dat werk ... voor iets dat nog steeds niet goed genoeg is. Zo eist de ruimte ook een emotionele tol.

Ruimteconcepten zijn primitief

We kunnen meer opzettelijke ruimtelijke concepten weven door ontwerp, code en conversatie. Maar dat doen we niet. We gebruiken gewoon T-shirtmaten en noemen het een dag. We kunnen het beter doen. We kunnen rood omlijnde, rode woede vervangen om in te zetten, te squishen, uit te rekken en ons een weg te banen naar een toekomst met ruimtelijke helderheid.

Met dat in gedachten, hier de basisprincipes, een uitgebreide woordenschat en verdere ervaringen die ik heb gehad bij het toepassen van ruimte op systemen.

Space Fundamentals

Raster ≠ Spatie. Grid is een component die ruimte gebruikt.

Rasters zijn rijk aan ruimtelijke beslissingen voor kolommen, goten, buitenmarge en responsieve nuance. Teams pakken rasters vroeg aan, zodat gebruikers gemakkelijk een pagina kunnen maken. Helaas is dat vaak wanneer ruimtelijke gesprekken stoppen.

Rasterconventies voor marge (blauw) en goot (limoengroen)

Een raster is geen compleet ruimtelijk systeem. Een raster is een component die ruimte gebruikt, net als elke andere component. Een rooster voelt anders. Het is onzichtbaar, komt vroeg en heeft alleen ruimte. Maar ruimte is meer dan raster.

Afhaalmaaltijden: introduceer ruimtelijke conventie met een raster, maar stop daar niet. Lijn de marges, goten en kolomwaarden van een raster uit met diepere ruimtelijke concepten geweven door een hele componentenbibliotheek.

Stel een memorabel basisnummer en verwachtingen in

Teams stellen een gedenkwaardig, zelfs magisch basisnummer in om alle andere ruimtelijke waarden te aarden. Sommige teams geven de voorkeur aan basis 10, vanwege hoe we tellen (trouwens vanwege onze tien vingers). Ik heb zelfs een team een ​​basis 6 zien gebruiken - met behulpzame factoren van 2 en 3 - om plaats te maken voor een uiterst flexibele reeks van 3s, 4s, 6s, 8s, 9s, 12s, 15s, 16s, 18s, 21s, 24s, 32s en meer. Stop de waanzin!

Een set afstandsopties, gebaseerd op 6 maar met een veelvoud van 3 & 2's. Werkelijk? Al deze opties?

De meeste systemen die ik heb gebruikt, gebruiken 16. Het is een goede standaard lettergrootte. Het is een factor van alle schermresoluties (320, 768, 1024). En het biedt memorabele veelvouden groter (32, 64, ...) en factoren minder (8, 4, 2) dan waar het begint.

Een set beperktere ruimtelijke opties, gebaseerd op 16

Afhaalmaaltijden: aard het bereik van uw ruimtelijke systeem met een memorabel basisnummer en beperk de verwachtingen over hoe het wordt gebruikt.

Schaalopties niet-lineair

Met een gevestigde basis kunnen teams nog steeds in willekeurige stappen glijden (12, 14, 18, 22, 24, 28, 30, 32, ...). Om dat te voorkomen, gebruiken anderen een lineaire schaal (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, ...) waarbij elke stap een vaste stap is. Voor mij is elk resultaat onvoorspelbaar gebruikt en biedt het te veel keuzes die te dicht bij elkaar liggen. Wanneer gebruik ik 24 of 28? Ik weet het niet.

Lineaire voortgang van 4 naar 32. Heb je echt al deze opties nodig?

Een alternatief is niet-lineair. Opties omvatten de gulden snede, modulaire schaal of de vergelijkbare geometrische progressie die elke stap zou kunnen verdubbelen. Beginnend vanaf de basis, zullen we in beide richtingen stoppen om kleiner (16, 8, 4, 2) en groter (16, 32, 64 en ... dat is het ongeveer) te stoppen op de schaal.

Geometrische progressie, verdubbeling van elke stap. % s staat voor proportioneel gebruik in onze bibliotheek.

Afhaalmaaltijden: overweeg een geometrische progressie of iets dergelijks niet-lineair. Je kunt af en toe spanningen ervaren om een ​​24 tussen 16 en 32 toe te voegen. Naar mijn ervaring zijn dergelijke momenten echter zeldzaam en rechtvaardigen ze zelden het doorbreken van het eenvoudige systeem.

Noem elke stap voor memorabel, nauwkeurig hergebruik

Ik ben dol op de compacte, gezellige, comfortabele ruimteknop van Gmail. Dus toen we ons ruimtesysteem bouwden, stelde ik voor om die labels in ons werk te gebruiken. Meteen daagde een teamgenoot me uit: "Hoe noemen we andere stappen?" Mijn spartaanse, tienerachtige en luxueuze opties gingen niet voorbij.

Een beschrijvend label voor elke stop? Doe voorzichtig.

Dus deden we wat we altijd doen: gebruik een schaal voor T-shirts. Gemiddeld komt overeen met standaard en S, XS, L, XL en - indien nodig - XXS en XXL zijn andere opties. Dit is wat de meeste bibliotheken (Bootstrap, Lightning, enz.) Doen.

Afhaalmaaltijden: geef opties voor de ruimte eenvoudig een naam, met behulp van een schaal zoals T-shirtmaten om een ​​taal te creëren die mensen zich kunnen herinneren en nauwkeurig kunnen toepassen. Als je meer beschrijvende labels probeert, wees er dan op voorbereid dat teamgenoten kunnen antwoorden "Klein, medium, groot, alsjeblieft."

Ik heb veel bibliotheken bekeken en met veel ontwerpers gesproken. Eenvoudige conventies van basisnummers en een benoemde schaal zijn waar gesprekken meestal eindigen. Hoewel deze paar opties eenvoudig zijn, voelde het gebruik van de ruimte nog steeds zo ... willekeurig. Ik had meer nodig.

Een vocabulaire uitbreiden voor ruimte

Bij het beoordelen van ons nieuwe werk zijn er niet veel verschillende intenties om ruimte toe te passen. Laten we bijvoorbeeld mijn favoriete component inspecteren: de kaart.

Als front-end ontwikkelaar stel ik me alle elementen voor die bij elkaar passen.

De kaart biedt een nuttige illustratie van veel ruimtelijke concepten die we gebruiken: inhoud insineren vanaf een rand, de vorm van een inzet variëren, items inline op afstand plaatsen en items binnen en tussen een component stapelen.

Deze concepten - inzet, inzet squish, inzet stretch, stapel, inline en raster - dekken het overgrote deel van de CSS-regels van onze bibliotheek voor ruimte: opvulling, marge, links, rechts, boven en onder. Deze concepten verbeteren ook hoe elk atoom op zichzelf staat, waardoor de configureerbaarheid wordt verbeterd.

Concept 1: (Vierkant) Inzet

Een inzet biedt inspringende inhoud aan alle vier zijden, zoals de matte van de ingelijste foto aan een muur. Het gebruik is wijdverbreid, over vele componenten in verschillende groottes, of onze 3-Up module en block-berichten medium aanvoelen, extra compacte pillen of ruime voetteksten en mastheads.

De standaardinstelling is ook een handig startpunt voor het eerste mobiele ontwerp en wordt uitgebreid naar een relevante viewport-breedte zoals 768px.

Concept 2: Squish Inzet

Een vierkante inzet vermindert de boven- en onderkant van de ruimte, in ons geval met 50%. Hoewel minder gebruikelijk dan zijn vierkante tegenhanger, vond een squish vaak plaats in elementen (zoals een knop) en celachtige containers zoals een gegevenstabel of lijstitem.

Ingedrukt inzet in knoppen, datatabelcellen en lijstgroepitems

Concept 3: Stretch-inzet

In tegenstelling tot de druk van een knop of pil, merkten we dat we de inzet van tekstvakken, tekstgebieden en andere vormelementen verticaal uitstrekten.

Concept 4: Stapel

Met alle respect voor de horizontaal gescrolde gebruikersinterface schuift de overgrote meerderheid verticaal. En dat betekent één ding: we stapelen dingen. We stapelen bericht op kop op datatabel. We stapelen modules op rails. We stapelen copy, pillen & toolbars, allemaal op een kaart, elk in een raster. Heck, oneindige scroll betekent oneindige stapel! We stapelen, stapelen, stapelen.

Concept 5: Inline

We rangschikken ook objecten inline, inpakken als ze als tekst van links of rechts stromen. Dergelijke objecten - pillen, tags, broodkruimels en meer - kunnen op zichzelf staan ​​of stapel en zich vermengen met andere objecten.

Concept 6: Grid

Ah, bewaar het rooster voor het laatst? Naarmate de afstand zich stabiliseert, zien we dat we de marges en goten van het raster opnieuw bekijken en deze ruimtes afstemmen op ons magische beginpunt en ander gebruik.

Dus, zoals toegepast op een kaartcomponent, kunnen uw gestileerde opvulling en marge er ongeveer zo uitzien:

Notionele toepassing van inzetstukken, stapels en inlines (of generieke spacers - ack!) Op een kaart

Wat we hebben geleerd

Het gebruik van ruimteconcepten vereist dat we ons aanpassen aan iets nieuws. In mijn team heeft het een dag geduurd voordat lichte scepsis plaatsmaakte voor het nieuwe model.

Leer visueel een systeem van ruimte

De meeste bijdragers zien geen ruimte, een primaire reden waarom het zo willekeurig wordt toegepast. Maar nu hebben we een systeem: een beperkt aantal concepten, elk met een beperkt aantal opties.

Een visuele verwijzing, vergelijkbaar met een cheatsheet, van ruimtelijke concepten

Afhaalmaaltijden: leer uw ruimtelijke concepten aan de hand van een strak doc-diagram of spiekbriefje. Dergelijke verwijzingen versnellen hoe we de concepten begrijpen, toepassen en ondersteunen door middel van ontwerp en code.

Bied eenvoudige helpers en gebruik van de monitor

Doe niet zo dwaas. Deze zes modellen lossen niet alles op. We hebben hier nog steeds een marge-bodem aangepast en zijn daar af en toe weggegaan. Er is dus een reden om meer opzettelijke ruimte-opties te volgen met meer generieke alternatieven (zoals $ space-m).

Afhaalmaaltijden: generieke opties bieden, deze spaarzaam gebruiken en verwachten dat productteams ze gebruiken. Wanneer ze zich voordoen in een kritiek of pull-verzoek, leer teamgenoten dan over meer specifieke concepten zoals inzet of stapel.

Vermijd variabele namen met opvulling of marge

Wanneer u iets gecompliceerder introduceert, pleiten anderen terecht voor iets vertrouwds, zoals: "Waarom kunnen we padding en marge niet gebruiken in onze variabelenamen?" en juiste eigenschappen ook. marge wordt gebruikt om inline te stapelen, raster en spatie. En hoe zit het met niet-webplatforms die geen HTML gebruiken?

Afhaalmaaltijden: onderscheid concepten van eigenschapsnamen. Ze zijn veel op één en beperken hergebruik tot één platform.

Los botsingen zoals lijnhoogte systematisch op

Eenvoudige inzetvulling en stapelmargevoorwaarden botsten met een lang bekende ruimtelijke tegenstander: lijnhoogte. Deze interactie verhoogt de ruimte onvoorspelbaar en voegt een pixel toe boven en onder onze eenvoudigere standaardinstelling van 16 px.

We volgden echter de vonk van een idee (@ kevinmpowell's "Laten we negatieve marge ruimte met behulp van pseudo-elementen! Maar hoeveel?") Met wat wiskunde (ik kan mijn universitair diploma gebruiken!). Het resultaat was een mix-formule die de lettergrootte en lijnhoogte combineert om de ruimte boven en onder botsende objecten samen te vouwen.

Afhaalmaaltijden: geef de systematische duidelijkheid niet op vanwege uitzonderingen. Probeer ze op te lossen. Als je dergelijke nuances kunt overwinnen, zelfs met een beetje CSS-trucjes, kun je een eenvoudiger concept handhaven waar iedereen zich aan kan houden.

Gebruik ruimtelijke concepten om dichtheid te kiezen

Met concepten zoals inzet, stapel en raster, kunt u de wijzerplaten van dichtheid afstemmen met aplomb. Zoek in een repository, vind inzetstukken en stapels interesses en breid deze regels uit of overschrijf ze om de weergavedichtheid te verfijnen.

Links de standaardafstand. Rechts, afstemming door alleen de inzet met 50% te verhogen.

Afhaalmaaltijden: u kunt de ruimtelijke dichtheid afstemmen, zelfs met een primitieve set opties die nauwelijks verder gaat. Zonder hen is dichtheidscontrole een droom. Met hen kunt u geleidelijk bouwen aan een krachtige motor om ruimte te vinden, aan te passen en af ​​te stemmen met een grote intentie en minder risico.

Wil je beginnen met een ontwerpsysteem of moet je dieper duiken om producten en spelers te bespreken? EightShapes geeft workshops voor systeemplanning en coacht klanten bij ontwerpsystemen. Laten we praten!