Generiranje razmaka dizajnerskog sustava

Kako smo stvorili sustav razmaka koji je na smislen način usklađivao naše timove i vezao se za naše dizajne.

Pregledali smo kako se bavimo bojama i tipografijom u našim dizajnerskim sustavima u The Scenery, pa smo sada skrenuli pažnju na sustav koji uglavnom prolazi neopaženo (jer ga zapravo nema): razmak.

Prije nego što započnemo, najbolje je definirati što bi razmakni sustav trebao raditi. Na svojoj osnovnoj razini, razmakni sustav trebao bi definirati udaljenost između elemenata i komponenata. A to bi uvijek trebao biti cijeli sustav - pokušaj spajanja razmaka da biste ga unijeli ili umetanje unutar komponenti recept je za katastrofe i programer prepisuje.

Što se tiče ciljeva, vaš razmakni sustav trebao bi biti ...
1. Lako se definira i primjenjuje na dizajnu
2. Razumijeni podjednako od dizajnera i programera
3. Sposobna se mijenjati bez probijanja

Da bismo definirali sustav razmaka koji ih postiže, započeli smo s osnovnim pitanjem: "Na čemu se zapravo treba temeljiti razmak?"

Sva vaša baza pripada nama

Postoji bezbroj načina za definiranje osnovnih mjernih jedinica vašeg razmačnog sustava, ali koji je doista najbolji? Da bismo to saznali, istražimo neke popularne opcije koje smo koristili u prošlosti (za red kada smo mislili da su pčelinje-koljeno).

Baza-10

Stari vjerni. Baza-10 prevladava iz dva glavna razloga. Prvo, to je broj prstiju i nožnih prstiju većine ljudi. Dva, jednostavan je za upotrebu. Osim toga, nema malo razloga za korištenje razmaka base-10, osim našeg osjećaja nostalgije (i činjenica da je u Sketchu zadana velika guranje 10px).

Presuda: proizvoljno, u najboljem slučaju, ali matematika je laka!

EMS

Sada razgovaramo Ems čine velike razmaknice jer su apstrakcija na temelju veličine fonta. Također su strašne jer su apstrakcija na temelju veličine fonta. Dizajneri i programeri obožavaju e-poštu zbog njihove jednostavne upotrebe i fleksibilnosti, ali ne uspijevaju u jednom temeljnom području: oni su promjenjivi.

U jednom od naših najvećih dosadašnjih sustava započeli smo sustav razmaka s upozorenjem da se prostor može definirati apsolutno s pikselima ili s emsom na temelju konteksta.

Evo što se dogodilo: dizajneri nisu mogli razumjeti na koji se način koristi ems, napraviti matematiku u glavi kako bi preveli ems u px, a zatim te vrijednosti dosljedno koristili u svojim dizajnerskim stanovima. Bila je to noćna mora, tako da smo povukli distance temeljene na em i prešli na apsolutne koji se mogu simbolizirati u Sketch-u, dijeliti i provoditi bezuspješno.

Ono što smo naučili jest da je sustav varijabilnih razmaka u teoriji lijep, ali apsolutni bol kada se primjenjuje u razmjeri na velikom timu (i proizvodu).

Presuda: Sjajna ideja, ali dizajneri će organizirati državni udar.

Baza-8

Umorni od baze-10? Isprobajte 8! Kao da je 10, ali djeljiviji Baza-8 je zapravo daleko korisnija od baze-10 što se tiče sustava. Pruža sjajne mogućnosti za povećavanje veličine koje su u velikoj mjeri podijeljive sa 2, 3 i 4, a podudaraju se s osnovnim veličinama fonta. To je također vrlo korištena ljestvica kada su u pitanju osnovni elementi UI kao što je ikonografija.

Ako želite odabrati jednostavan matematički distančni sustav temeljen na vrijednosti, ovo je najbolji do sada. Brzo postaje industrijski standard, prije svega zahvaljujući upotrebi u dizajnu materijala. Ali nešto o tome i dalje nam se činilo stvarno proizvoljno, pa smo nastavili razmišljati.

Presuda: Bolje nego išta drugo do sada.

Samo nije naš tip

Ne rješavaju se oni - mi u cjelini imamo autoritetna pitanja - odlučili smo se povući korak unaprijed i razmisliti o tome koji bi koncept trebao definirati prostor oko sastavnih dijelova našeg sustava. Tada smo shvatili da možemo to temeljiti na stvarima koje čine 98% našeg sustava: tip našeg sustava.

Uđite, bivša jedinica.

Bivša jedinica je jedva korištena CSS jedinica koja je vezana za stvar na koju želimo da se razmaci odnose: tipografija. I ne samo tip, x-visina tipa, koja se jako razlikuje od tipa do slova, čak i kada je osnovna veličina fonta ista. Pomoću ove jedinice, mi smo u mogućnosti utvrditi razmak komponenti koje se odnose izravno na fontove u našem korisničkom sučelju, stvarajući skladan dizajn koji koristi klasičnu teoriju dizajna - a ne proizvoljni broj.

Još je korisnija činjenica da je jedinica besprijekorno fleksibilna. Kada prijeđete da promijenite kopiju jezgre karoserije vašeg sustava iz Brandona u Avenir, nećete morati preraditi cijeli sistem razmaka jer se sve čini gigantskim. Jedinica je izgrađena za ublažavanje boli zbog promjena u vašem sustavu, i to je nešto što možemo zaostati za bilo koji dio našeg sustava.

Presuda: povezana s našom osnovnom vrstom dok je super fleksibilna za rad. Pobjednik.

Sada kada smo pronašli bazu koja postiže naše ciljeve, trebamo se pozabaviti sljedećim aspektom razmaka: samim veličinama.

Generiranje razmaknica

Veličine razmaka su baš kao i bilo koje druge komponente sustava dizajna - previše je varijacija i one će se upotrebljavati nedosljedno, premalo i vaš sustav će postati krhak, razbijajući se pod stresom razmjera. Cilj nam je u definiranju veličina razmaka definirati ih na način koji uspostavlja ravnotežu između te dvije krajnosti.

Da bismo to učinili, stvorili smo filozofiju: svaka veličina odstojnika treba biti značajno drugačija od one koja je nosi u zagradi.

Što je smisleni prostor? To vjerojatno zvuči kao ontološko pitanje. Mogli bismo se pitati kakav je smisao života, kao i naše različite veličine distanca. Ali iznenađujuće, našli smo rješenje kako definirati što je zaista značajna razlika na mjestu koje smo dosljedno smatrali pretencioznim i samozadovoljnim. Koristimo Fibonaccijev niz.

Svi su vidjeli Dribbble postove gdje je dizajner veličanstveno uskladio njihove vektorske oblike sa zlatnim pravilom u ime klasične teorije dizajna i vrline. To nije to.

Fibonaccijev niz čini jedno vrlo dobro: razlikuje korake tako da su barem toliko udaljeni kao korak koji im prethodi. Ukratko, provodi smislenu promjenu između koraka. Ako biste ovaj slijed koristili za bilo što što se poklapa s njegovim temeljnim principom, bilo bi ga primijeniti na razmak.

Kad uzmemo svoje bivše jedinice i primijenimo Fibonaccijev slijed, dobit ćemo nešto lijepo u svojoj jednostavnosti, ali moćno u odnosu na ostatak našeg dizajnerskog sustava.

Pogledajte primjer codepen

Ovaj je sustav fantastičan iz ista tri razloga koja smo naveli na početku:

1. To se jednostavno definira i primjenjuje na dizajnu (hvala, simboli Fibonaccije i Sketch-a)
2. To mogu razumjeti i dizajneri i programeri (hvala, apsolutne veličine)
3. Može se promijeniti bez puknuća (hvala, bivša jedinica)

Imenovanje vaših veličina

Budući da se točna vrijednost piksela odstojnika može promijeniti, za imena razmaka koristimo apstrakcije. To mogu biti numerička ljestvica (sp-1, sp-2, sp-3, itd.) Ili veličine majica (xs, s, m, l, xl, itd.). To omogućava našem sustavu razmaka da se prilagodi određivanju veličine svakog koraka, održavajući integritet baze podataka.

Odlučujemo se za veličine majica u našim sustavima. Oni pomažu u povezivanju opće veličine prostora, a programerima i dizajnerima i dalje daju jasan i razgraničen put kroz veličine sustava. A budući da redoslijed nije otvoren ni za pola mjere, ne moramo se brinuti da li će netko pokušati umetnuti strašnu veličinu „smedium“ u neki trenutak.

Pomoću ovog jezgrskog procesa koji napaja vaš razmak u sustavu, bit ćete postavljeni za budućnost s jezgrom koja se elegantno mijenja, savršeno se odnosi na vaše dizajne i ne temelji se samo na vašim rukama.

Eter uskoro dolazi. U međuvremenu pogledajte stranicu najave i prijavite se da biste bili obaviješteni kada se pokrene.

- Mi smo scenografija