Genererer designsystemafstand

Hvordan vi skabte et afstandssystem, der tilpassede vores teams og relaterede til vores design på en meningsfuld måde.

Vi har gennemgået, hvordan vi tackle farver og typografi i vores designsystemer på The Scenery, så nu henvender vi os til det system, der stort set ikke bliver bemærket (fordi det ikke rigtig er der): afstand.

Før vi begynder, er det bedst at definere, hvad et afstandssystem skal gøre. På det mest basale niveau bør et afstandssystem definere afstanden mellem elementer og komponenter. Og det skal altid være et komplet system i sig selv - at forsøge at parre afstand til at indtaste eller indlejre det inde i komponenter er en opskrift på katastrofe og udvikler overskriver.

Så vidt mål går, skal dit afstandssystem være ...
1. Let defineret og anvendt på design
2. Forstået af både designere og udviklere
3. Kunne ændre sig uden at bryde

For at definere et afstandssystem, der opnår disse, startede vi med et kernespørgsmål, "Hvad skal afstanden egentlig være baseret på?"

Alle jeres baser tilhører os

Der er et utal af måder at definere dit afstandssystemets kerneenheder, men hvilken er virkelig den bedste? For at finde ud af det, lad os undersøge nogle af de populære indstillinger, vi har brugt i fortiden (i rækkefølge af når vi troede, de var bier-knæene).

Base-10

Gamle trofaste. Base-10 er udbredt af to hovedårsager. Den ene er det antal fingre og tæer, de fleste har. To, det er let at bruge. Bortset fra det er der lidt grund til at bruge base-10-afstand, bortset fra vores følelse af nostalgi (og det faktum, at i Sketch er standard big-nudge 10px).

Bedømmelse: Vilkårlig i bedste fald, men matematik er let!

Ems

Nu taler vi. Ems fremstiller store afstandsstykker, fordi de er en abstraktion baseret på skriftstørrelsen. De er også forfærdelige, fordi de er en abstraktion baseret på skriftstørrelsen. Designere og udviklere elsker begge ems på grund af deres brugervenlighed og fleksibilitet, men de mislykkes inden for et kerneområde: de er variable.

I et af vores hittil største systemer startede vi vores afstandssystem med det advarsel, at pladsen kunne defineres absolut med pixels eller med ems, baseret på kontekst.

Her er hvad der skete: designere kunne ikke forstå, hvordan ems blev brugt, lave matematik i deres hoveder for at oversætte ems til px og derefter bruge disse værdier konsekvent i deres designflats. Det var et mareridt, så vi trak de em-baserede afstandsstykker og flyttede til absolutte dem, der kunne symboliseres i Sketch, deles og implementeres uden at fejle.

Det, vi lærte, er, at et variabelt afstandssystem er teoretisk, men en absolut smerte, når det anvendes i skala over et stort team (og produkt).

Bedømmelse: Fantastisk idé, men designerne vil give et kupp.

Base-8

Træt af base-10? Prøv 8! Det er som 10, men mere delbart. Base-8 er faktisk langt mere nyttigt end base-10 så vidt systemerne går. Det giver fantastiske muligheder for opskalering, der stort set kan deles med 2, 3 og 4, og matcher med basefontstørrelser. Det er også en meget brugt skala, når det kommer til centrale UI-elementer som ikonografi.

Hvis du vil vælge et simpelt matematisk værdibaseret spacer-system, er dette det hidtil bedste. Det bliver hurtigt industristandard, først og fremmest takket være det i Material Design. Men noget ved det virkede stadig rigtig vilkårligt for os, så vi fortsatte med at tænke.

Bedømmelse: Bedre end noget andet indtil videre.

Bare ikke vores type

Ikke dem der skal løse - vi har autoritetsspørgsmål som helhed - vi besluttede at tage et skridt tilbage og overveje, hvilket koncept der skulle definere rummet omkring vores systems komponenter. Derefter indså vi, at vi kunne basere det på de ting, der udgør 98% af vores system: vores systems type.

Enter, ex-enheden.

Ex-enheden er en næppe anvendt CSS-enhed, der er bundet til det, vi ønsker, at afstand skal forholde sig til: typografi. Og ikke bare typen x-højden af ​​typen, der varierer vildt fra skrifttype til skrifttype, selv når basisstørrelsen forbliver den samme. Ved hjælp af denne enhed er vi i stand til at specificere afstandskomponenter, der relaterer direkte til skrifttyperne i vores UI, og skaber et harmonisk design, der bruger klassisk designteori - ikke et vilkårligt tal.

Endnu mere fordelagtigt er det faktum, at enheden er vildt fleksibel. Nu, når du går til at ændre dit systems kernekopi fra Brandon til Avenir, behøver du ikke at omarbejde hele dit afstandssystem, fordi alt føles gigantisk. Enheden er bygget til at mindske smerten ved forandring på tværs af dit system, og det er noget, vi kan få bagved for enhver del af vores system.

Bedømmelse: relateret til vores kernetype, mens vi er superfleksibel at arbejde med. Vinder.

Nu hvor vi har fundet en base, der når vores mål, er vi nødt til at tackle det næste aspekt af afstand: selve størrelserne.

Generering af afstandstørrelser

Afstandsstørrelser er ligesom enhver anden designsystemkomponent - for mange variationer, og de vil blive brugt inkonsekvent, for få, og dit system bliver skrøbeligt og bryder under streg. Målet for os med at definere afstandstørrelser er at definere dem på en måde, der skaber en balance mellem disse to ekstremer.

For at gøre dette skabte vi en filosofi: hver afstandsstørrelse skal være meningsfuldt anderledes end dem, der holder på den.

Hvad er et meningsfuldt rum? Dette lyder sandsynligvis som et ontologisk spørgsmål. Vi kan lige så godt spørge, hvad meningen med livet er, såvel som vores forskellige afstandsstørrelser. Men overraskende fandt vi vores løsning til at definere, hvad en meningsfuld forskel virkelig er, på et sted, vi konsekvent har spottet som både prætentiøst og selvtilfredsstillende. Vi bruger en Fibonacci-sekvens.

Alle har set Dribbble-indlæg, hvor en designer storslået har tilpasset deres vektorformer til den gyldne regel i navnet på klassisk designteori og dyd. Dette er ikke det.

Fibonacci-sekvensen gør en ting meget godt: den adskiller trin, så de er mindst lige så langt væk som trinet forud for dem. Kort sagt håndhæver det meningsfuld skift mellem trin. Hvis du skulle bruge denne sekvens til noget, der er tilpasset dets grundprincip, ville det være det at anvende den til afstand.

Når vi tager vores ex-enheder og anvender en Fibonacci-sekvens, får vi noget smukt i dets enkelhed, men kraftfuldt i forhold til resten af ​​vores designsystem.

Se kodeeksemplet

Dette system er fantastisk af de samme tre grunde, som vi sagde i starten:

1. Det er let at definere og anvendes til design (tak-, Fibonacci- og Sketch-symboler)
2. Det kan forstås af både designere og udviklere (tak, absolutte størrelser)
3. Det kan ændres uden at gå i stykker (tak, ex enhed)

Navngiv dine størrelser

Da den nøjagtige pixelværdi af afstandsstykket kan ændre sig, bruger vi abstraktioner til vores afstandsnavne. Disse kan enten være en numerisk skala (sp-1, sp-2, sp-3 osv.) Eller t-shirtstørrelser (xs, s, m, l, xl osv.). Dette gør det muligt for vores afstandssystem at flexere på specifik dimensionering af hvert trin, mens vi opretholder kodebasens integritet.

Vi vælger t-shirtstørrelserne i vores systemer. De hjælper med at sammenligne den generelle størrelse på rummet, mens de stadig giver udviklere og designere en klar afgrænset sti gennem systemets størrelser. Og da sekvensen ikke er åben for halvmål, behøver vi ikke at bekymre os om nogen forsøger at indsætte den frygtede “smedium” -størrelse i systemet på et tidspunkt.

Med denne kerneproces, der styrer dit systemafstand, er du klar til fremtiden med en kerne, der ændrer yndefuldt, er perfekt relateret til dine design og er ikke kun baseret på dine egne to hænder.

Ether kommer snart. I mellemtiden tjek teasersiden, og tilmeld dig for at blive underrettet, når den lanceres.

- Vi er landskabet