Brug af Sketch Biblioteker og primitiver til at opbygge et endnu bedre system af knapper

Identificering af designprimitiver og en sag til bygningskomponenter, der begrænser redundansmængden i dit arbejde

Komponenter, der deler den samme grænseradius, gemt i en 'primitiv' skissebibliotekfil.

I en tidligere artikel deler jeg en proces, der bruger Sketch Libraries til at opbygge de grundlæggende byggesten i et designsystem. Medmindre du har boet under en klippe, vil biblioteker sandsynligvis være på din radar, hvis ikke allerede en del af din arbejdsgang.

Ved at abstrahere gentagne egenskaber, der udgør vores design, kan vi oprette genanvendelige systemer med stilarter og komponenter og gemme dem i Biblioteker. Dette reducerer designgæld og forbedrer hastigheden, effektiviteten og konsistensen i vores arbejde.

Du kan muligvis referere til disse abstraherede egenskaber som "UI Primitives", et udtryk, som Benjamin Wilkins fra Airbnb og Dan Eden fra Facebook har gjort bekendt med (tror jeg).

Dette er muligvis ikke den eneste brugssag til biblioteker, men det er sådan, jeg har brugt dem, og det har været et kæmpe trin for min designproces. Lad mig nu forklare, hvordan jeg kom dertil.

Designtænkning i primitiver

Tænk på primitiver som de mest granulære niveauelementer, som resten af ​​dit design består af. Hvis du nogensinde har arbejdet med SASS, er primitiver dine variabler. Ligeledes vil de, der kender Lighting Design System, forstå primitiver som designtegn.

Visse CSS-arkitekturer anbefaler, at vi grupperer disse primitive variabler i et lag med abstraktion, og derfor opretter vi ofte en mappe med delvise filer og kalder det 'abstrakte'. Hvis du hører nogen af ​​disse udtryk, skal du vide i de fleste tilfælde, at de er de samme. Det, vi laver her, er at "abstrahere" de almindelige stilarter fra et design for at gøre dem genanvendelige på en måde, der forhindrer os i at gentage os unødigt.

Uanset om du er opmærksom på de primitiver, der indeholder dine design eller ej, vil en revision af dit arbejde sandsynligvis afsløre et hvilket som helst antal af disse gentagne egenskaber. Du vil bemærke mønstre og ligheder, der er delt mellem forskellige dele af UI, som du som designer bevidst har implementeret for at skabe visuel harmoni i dit arbejde.

At tage sig tid til at identificere disse mønstre kan have en enorm indflydelse på din proces. Tænkning på primitiver vil hjælpe dig med at nærme dig dit arbejde på en mere systematisk måde og hjælpe med at løse fælles problemer med hensyn til skalerbarhed og konsistens, da de uundgåeligt bliver en integreret del af de designsystemer, du opretter.

At sætte primitiver i praksis for at forbedre vores designproces i Sketch

Hvor en udvikler muligvis kan udtrække disse UI-primitiver, gemme dem som variabler for at reducere inkonsekvens og forbedre effektiviteten i deres proces. Som designere kan vi opnå nøjagtig de samme resultater ved hjælp af Sketch Libraries.

Et eksempel på at bruge variabler til at abstrahere de genanvendelige egenskaber, der findes i billedet opad.

Så hvordan kan vi tage denne idé om UI-primitiver - at være de mest basale ingredienser i design - og bruge dem til at opbygge større, mere identificerbare komponenter i et designsystem?

Primitive biblioteker til en enkelt kilde til sandhed

Opdel dit UI-kit i delvis skitsebiblioteker

Jeg er sikker nu skal du være fortrolig med ideen om at bruge et UI-kit, hvor alle genanvendelige komponenter lever i en enkelt Sketch-fil. En 'enkelt kilde til sandhed', som mange henviser til den.

På baggrund af denne idé involverer min nuværende proces opdeling af brugergrænsefladekomponenter og de primitive stilarter, de indeholder - som du måske en gang har gemt i en enkelt skissefil kaldet ‘UI kit.sketch’ — i flere uafhængige Sketch-filer.

Ved at tage disse delvise filer og omdanne dem til biblioteker, kan primitiver bruges i enhver anden fil og derfor enhver anden komponent. I det væsentlige opretter vi masser af små, letvægtsdelfiler, der skal bruges på tværs af vores designs eller endda på tværs af forskellige projekter.

Det er værd at bemærke; denne teknik behøver ikke at stoppe på et komponentniveau. Hvorfor ikke opdele dine figurer, farver, rammer, ikoner og så videre i separate Sketch-filer. Med andre ord, hvis du kan identificere en primitiv stil, der forekommer flere steder i dine designs, så er der - inden for grund - en god chance for, at den fortjener sin egen bibliotekfil.

Sandhedsmappe indeholdende primitive biblioteksfiler

Hvorfor bry sig med primitive biblioteker?

Ved at lave primitive biblioteker kan vi skabe et kernesæt med meget genanvendelige egenskaber, hvilket i høj grad reducerer kompleksiteten i vores arbejde. Ved at opbevare flere små filer vil vores projekter være lettere at vedligeholde, genbruge og udvikle, da hver fil indeholder færre dele.

Vi kan derefter bruge disse primitive symboler til at opbygge mere komplekse komponenter, hvilket yderligere reducerer kompleksiteten i vores atomer, molekyler og organismer. Primitive symboler hjælper os med at holde unikke stilarter til et minimum, hvilket reducerer vores komponentfiler til en kombination af primitiver, indlejrede komponenter (afhængigt af deres kompleksitetsniveau) og en håndfuld ikke-genanvendelige egenskaber.

Med andre ord, de eneste nye egenskaber, vi bliver nødt til at oprette, når vi bygger komponenter, er dem, der er specielt knyttet til selve komponenten, da disse egenskaber ikke er tilfældet for genbrug andre steder i vores design.

”Et samlet designsprog burde ikke kun være et statisk sæt regler og individuelle atomer - det skal være et økosystem i udvikling” - Karri Saarinen.

Ved at styre og henvise til primitive biblioteker - vores "eneste kilde til sandhed" - på tværs af flere filer, kan vi let opdatere, foretage ændringer eller føje til en af ​​disse filer på ethvert tidspunkt.

Vi kan tilføje nye komponenter efter behov uden konflikt. Vi har derefter muligheden for at synkronisere opdateringer i hele vores projekt. Faktisk kan vi skabe et designøkosystem, som vil udvikle sig og vokse i tiden. Du kan sige, at vi er i stand til at skabe et levende designordforråd.

At tænke på primitiver og gøre primitive biblioteker hjælper ikke kun dig designeren, men også dine samarbejdspartnere, herunder udviklere. Hvis du er i stand til at identificere alle tilfælde af genanvendelighed i dine design, bliver jobbet med abstraktion af variabler - fra et udviklers perspektiv - en tilsyneladende enkel proces.

Brug af primitiver til at opbygge atomniveaukomponenter

Den næste del af denne artikel vil se på at bruge disse 'primitive' biblioteker til at opbygge mere komplekse strukturer. Jeg vil lede dig gennem den aktuelle proces, jeg bruger til at opbygge et fleksibelt system af knapper ved hjælp af det færrest mulige antal unikke symboler

En grundlæggende del af ethvert godt designsystem, knapper er uden tvivl det mest identificerbare atom (i henhold til atomiske designprincipper) i enhver brugergrænseflade. Og når de abstraheres, består de af en håndfuld af primitive egenskaber.

Knapens anatomi

Se på knapperne i dit design, og du vil sandsynligvis bemærke en håndfuld gentagne egenskaber. Du identificerer muligvis ligheder på et af følgende:

  • Baggrundsform
  • Baggrundsfarve
  • Kantbredde
  • Grænseradius
  • Tekstfamilie
  • Tekstfarve
  • Tekststørrelse
  • Polstring (venstre, højre, top, bund)

Vi kan antage, at nogle af disse primitiver også vises andre steder i vores design, måske for eksempel i formelementer.

Illustreret anatomi af knap mærket med forskellige primitive egenskaber

Ved at opdele disse gentagne egenskaber i biblioteker, kan vi henvise til disse biblioteker for at opbygge vores knapper såvel som alle andre komponenter i vores system, der deler disse samme egenskaber.

Opbevaring af disse primitive egenskaber i biblioteker forhindrer os i at skulle oprette en ny stil hver gang vi bygger en ny komponent.

Revision af aktuelle knapformater

Som jeg nævnte tidligere, begynder godt design med en revision af, hvad der har været før. Når vi udførte en grænsefladebeholdning til AIN, afslørede vores nuværende system, at vi brugte 4 knappetyper i en række farve- og formstilarter.

For at være klar, når jeg henviser til 'type', mener jeg knapper med mærkbare strukturelle forskelle, for eksempel knapper med et ikon er strukturelt forskellige fra dem uden. der henviser til, at når jeg siger "stil", henviser jeg til farver, rammer eller andre kosmetiske egenskaber, der påvirker enhver type knap.

4 knapformater i forskellige farver og former

Identificering af knappetyper

Baseret på revisionen virkede det logisk at gruppere de 4 typer i følgende kategorier:

  • knap solo
  • knap med ikon
  • kun knapikon
  • knapgruppe (venstre, midten og højre)

Hver knaptype vises i vores designs i 3 forskellige størrelser, der er baseret på en rytme forbundet med 8pt gitteret og henviser til deres højde. Disse størrelser er 48px, 40px og 32px. For enkelhedens skyld vedtog jeg t-shirt størrelse ved navngivelse af hver størrelse; Lille, mellemstor og stor.

3 knapstørrelser baseret på 8pt gitter

Identificering af primitiverne

Desuden identificerede jeg i alt 6 primitive egenskaber, der udgør alle knapper. Primitiver, som vi nu ved, er de egenskaber, som findes andre steder i vores design, og ikke kun i vores knapper. Disse var:

  • farve
  • grænse
  • ikon
  • form
  • tekst
  • stat

Selvom jeg visuelt var anderledes, indså jeg, at farver, ikoner og kantformater let kunne henvise til nogle af disse primitive biblioteker, jeg tidligere har oprettet. Dette vil hjælpe med at holde unikke egenskaber til et minimum. Jeg kunne også bruge færre symboler til at fremstille de forskellige knapformater, da de fleste af stiloverskridelserne kunne håndteres direkte af hvert uafhængigt bibliotek. Dette betød, at jeg bliver nødt til at lave færre symboler for at opnå de forskellige stilarter.

Jeg forudsagde, at jeg kun skulle bruge et basesymbol til hver knap-type, som derefter kunne bruges til alle stilinstanser, der findes i den knap-type.

Disse antagelser var for det meste sandt, men primitiverne 'tekst', 'form' og 'tilstand' (som vi får næste gang) overvejede lidt mere på grund af deres manglende genbrug og specificitet over for kun knapper.

Håndtering af knappetekst

Jeg besluttede at undgå at oprette et nyt primitivt bibliotek til tekst brugt i knapper, da det er meget specifikt for selve knapperne. Teksten har en unik linjehøjde afhængigt af knapstørrelsen, så chancerne for, at den nøjagtige tekststil findes andre steder, er minimale. Dette betød at oprette et bibliotek ville være overdrevent.

I dette tilfælde var det lettere at beholde den kompleksitet, der findes med teksten i selve knappernes skitsefil, snarere end at henvise til tekst fra et eksternt bibliotek, som måske aldrig bruges af andre komponenter i systemet.

Med det identificerede jeg 4 forskellige farver på tekst: Brand, mørk, hvid og deaktiveret. Teksten blev også brugt i 3 forskellige størrelser, en for hver knapstørrelse; store, mellemstore og små.

Jeg oprettede separate Artboards i en skissefil kaldet AIN-knapper (præfikset 'AIN–' henviser til designsystemprojektet) for hver af disse tekstegenskaber og konverterede dem alle til symboler. Når jeg bygger den endelige knapkomponent, vil jeg være i stand til at tilsidesætte tekststilen når det er nødvendigt ved at indlejre disse tekstsymboler.

For at disse tilsidesættelser fungerer, sørgede jeg for at holde min Artboard-navnekonvention konstant, og jeg følger et grundlæggende navngivningssystem: komponentnavn, egenskaber (som indeholder alle egenskaber i en egenskabsspecifik mappe), egenskabstype, egenskabsstørrelse og farve. Det lignede sådan:

knap / egenskaber / tekst / stort / brand

Sidenote: For at tilsidesætte et symbol med et andet, skal du også sørge for, at dine tegnebræt er nøjagtig samme størrelse. Så sørg for, at alle dine tekst Artboards har samme højde og bredde, hvis du vil have dem til at vises som overstyringer i inspektionspaletten.

Håndtering af knaptilstande

Stater var et andet primitivt design unikt for min knap. Det vil sige, ingen andre komponenter i mit system deler det samme design til hover, pressede og deaktiverede stater. Dette betød, at stater også skulle bygges direkte i knappen Skitsefil. Som det var tilfældet med teksten, havde jeg ikke brug for at oprette et andet primitivt bibliotek unødigt.

Bygning af knaptilstandssymboler inden for knapkomponentens skissefil

I stedet byggede jeg 3 nye symboler, der kunne bruges som tilstanden tilsidesætter og fulgte en lignende navnekonvention som før:

knap / egenskaber / tilstand / deaktiveret

Hvert symbol består af et enkelt rektangellag med lidt forskellige fyld. Hover-tilstanden lavede jeg ved hjælp af et Artboard med et rektangelfyld på 20% hvidt. For den pressede tilstand gjorde jeg det samme, men med 10% sort fyld. Deaktiveret havde en 80% fyldning af hvid og en anden fyldning af 100% sort ovenpå, denne gang med blandingstilstanden indstillet til 'Hue'. Dette sikrer, at enhver farveknap vises desatureret, når statusoverskridelsen er indstillet til 'deaktiveret'.

Sidenote: Artboardstørrelserne er ikke vigtige, da de kan ændres til størrelse senere, skal du bare sørge for, at alle dine statustavler er af samme størrelse, så dette giver mulighed for, at tilsidesættelse fungerer. Du skal dog sørge for, at størrelserne adskiller sig fra dine Tekstsymbol Artboards. Dette er, så de ikke vises i rullemenuen Tekstoverskridelser. Det er en svag irritation, når du arbejder med Overrides i Sketch, og det er ikke vigtigt, men det vil holde dine muligheder for tilsidesættelse pæn og ren.

Håndtering af knapform

Håndtering af tilstande direkte betød, at jeg også måtte gøre det samme med knapformen. Dette skyldes, at du ikke kan oprette en maske med oprindelige designelementer (som er elementer, der hører til den samme fil) ved hjælp af et eksternt bibliotek. Så for at afsløre knapformen bag tilstanden blev jeg tvunget til at opbygge formen primitiv direkte i knapperne skissefil.

For at gøre dette oprettede jeg 5 forskellige symboler til at huse de forskellige former på mine knapper. Som før disse symboler vil blive brugt til at tilsidesætte, så jeg let kan ændre formen på en knap.

Oprettelse af unikke symboler for hver af de 5 knapformer, der senere skal bruges som tilsidesættelser

Jeg navngav de 5 former, der blev brugt i systemet: Fyld (4px radius på hver side), afrundet (100px radius på hver side), Radius Left (4px radius på venstre), Radius Right (4px radius på højre) og Radius None (0px radius på alle sider). Disse sidste 3 figurer bruges til mine knappegrupper - Venstre, Mellem og Højre, i tilfælde af at det ikke var klart.

Dernæst forvandlede jeg hver form til et maske 'ctrl-klik> Mask' og indsatte en farve fra mit farvebibliotek. Når farven sidder over en maske, klemmer formen nedenfor farven, der afslører formen.

Maskering af form og tilføjelse af en farve fra farvebiblioteket

Derefter nestede jeg symbolet 'tilstand', jeg lavede tidligere, oven på farven.

Til sidst indsatte jeg en kant fra min Border Library-fil. Når jeg gentog trinnene før, sørgede jeg for, at navnekonventionen fulgte:

knap / egenskaber / form / fyld

knap / egenskaber / form / afrundet

Indlejring af statens symbol og grænse fra et grænsebibliotek

Sidenote: Sørg for, at dine formartikler er identiske i størrelser til hinanden, men afvigende i størrelse til både dine tekst- og statlige kunstplader. Dette vil forhindre, at de alle vises i det samme Dropdown-dropdown og holder tingene organiserede.

Bygning af hovedknapkomponenten for hver knaptype

Herfra er alt, hvad der er tilbage at gøre, at opbygge master-symbolerne, der bruges til de forskellige knaptyper. Dette vil samle alle vores forskellige primitive dele, der bygger en hovedknapkomponent, som vi kan bruge til at oprette de forskellige andre knapperformater i vores system.

Bemærk: Tænk på mastersymbolet som det, du indsætter i dine designmodeller ved hjælp af Sketch Runner.

Bare for at sammenfatte betyder det, at vi er nødt til at lave et hovedsymbol til hver af følgende knappetyper:

  • knap solo
  • knap med ikon
  • kun knapikon
  • knappen til venstre
  • knapgruppe midt
  • knappen til højre

Husk for hver knaptype har vi også brug for unikke mestre til vores 3 størrelser.

Bygning af mastersymbolet til soloknapper

Soloknapper er ret enkle. 3 størrelser, små, mellemstore og store, hver bestående af 2 indlejrede symboler - Form og tekst. Vær opmærksom på, at vores primære primære biblioteker blev indlejret inde i formsymbolet, så det er relativt let fra dette punkt. Alt hvad vi skal gøre er at indsætte vores form og tekstsymboler på et nyt tegnebræt til hver størrelse.

Bygning af mastersymbolet til soloknapper

For hvert tegnebræt omdøbte jeg lagene form og tekst, så de tilsidesættende etiketter er lette at forstå og ikke bundet til nogen bestemt form eller teksttype, når jeg kommer til at bruge dem.

Til sidst forvandlede jeg tegnebrættet til et symbol.

Filtrering i menuen Indsæt viser vores 3 nye hovedknap Symboler:

knap> knap solo> lille

knap> knap solo> medium

knap> knap solo> stor

Bygning af hovedsymbolet til knapper med et ikon

For ikonknapper fulgte jeg nøjagtigt den samme proces som med soloknapper, den eneste tilføjelse var inkluderingen af ​​et ikon fra mit primitive Icon Library. Ethvert ikon vil gøre det, da Overrides og ikonfarve allerede er taget hånd om via selve ikonet Bibliotek.

Bygning af et mastersymbol til knapper med et ikon

Husk: 'Ctrl + klik> Opret symbol' gør vores ikonetaster anvendelige, hvis du ikke allerede har gjort tegnebrættet til et symbol.

Byg kun knapper til hovedsymbolet

Igen, meget enkle ikonetaster kun følger de samme regler som før, men denne gang har vi fjernet det indlejrede tekst Symbol. Som du kan se i GIF nedenfor har jeg nu kun 2 lag, et ikon og formsymbol.

Som før lavede jeg et unikt symbol for hver af de størrelser, jeg havde brug for. Én til små, mellemstore og store ikonknapper.

Oprettelse af hovedsymbolerne til ikonet kun stilknapper

Bygning af mastersymbolet til gruppeknapper

Opbygning af gruppeknapperne krævede i alt 9 symboler. En til venstre, midt og højre i hver af de 3 forskellige størrelser; lille, mellemstor og stor. Bortset fra deres form, der brugte en lidt anden tilsidesættelse, er gruppeknapper identiske med vores solo-knapper.

Når jeg placerede min indlejrede form Symbol sørgede jeg for, at formen svarede til den rigtige formeegenskab. Som et eksempel var det nødvendigt at basere symbolet, jeg oprettede, kaldet knap / egenskaber / form / midten og så videre for basissymbolets knap / knapgruppe / medium / midten.

Oprettelse af de 9 basissymboler til gruppeknapper

Brug af vores nye knapper og altoverskyggende stilarter

På dette tidspunkt har vi nu et meget fleksibelt system af knapper, der er lavet af færrest mulige dele.

Ved hjælp af tilsidesættelser kan vi ændre ikon, knapfarve, form, tekststil og kant uden at oprette en helt ny knap hver gang.

Indsættelse af knapper med Runner og brug af tilsidesættelser til at ændre knapformater

Ved at hånde mine forskellige Button-stilarter på en ny side i AIN-knapperne-filen, har jeg nu en visuel reference til hver knap i systemet.

Forskellige knapformater bygget ved hjælp af knapsystemet

For at bruge mit knopsystem andetsteds i mine designs, i andre filer eller andre projekter kan jeg omdanne hele filen til et nyt Sketch Library. I dette tilfælde betød det at dreje AIN-knapper til en biblioteksfil.

Oprettelse af et bibliotek for at gøre knapper genanvendelige på tværs af forskellige projekter og dokumenter

Ved at bruge primitive biblioteker kan jeg nemt tilføje nye elementer til mit system, f.eks. Sige et nyt ikon til mit ikon Bibliotek og øjeblikkeligt få adgang til dem til brug i knappen Knapper. Faktisk kan vores designsystem udvikle sig, når tiden går og med meget lidt ekstra indsats.

En demonstration af skalerbarhed ved hjælp af biblioteker; tilføje ikoner og bruge dem i forskellige filer i systemet.

Afslutter

Jeg håber, at denne artikel har bidraget til at vise vigtigheden af ​​at tænke i en primitiv. Det vil hjælpe dig med at identificere forhold i dine design og forbedre konsistensen i dit arbejde. At tage en primitiv tilgang og dekonstruere dine designs på denne måde kan også hjælpe dig med at se dine designs på en holistisk måde.

I stedet for at se komponenter som meget specifikke, komplekse, men genanvendelige mønstre, kan vi nedbryde dem og identificere genanvendelighed i deres primitive egenskaber.

Ved at kombinere denne tankegang med brugen af ​​Sketch Libraries kan vi udtrække egenskaber, ligesom en udvikler ville variabler, for at skabe delvise designfiler med mindre kompleksitet, som igen er lettere at opdatere og vedligeholde. Vi kan derefter bruge disse primitive delfiler til at opbygge større komponenter, samtidig med at vi begrænser designgælden og holder skalerbarhed i tankerne.

I tilfælde af denne artikel kiggede vi på bygningsknapper, men du kan muligvis anvende denne tænkning og proces til at bygge en hvilken som helst komponent, uanset kompleksitet. Uanset om du designer formelementer, alarmer eller avatarer, som i de fleste tilfælde, vil alle disse UI-elementer dele et vist antal primitive egenskaber.

Hvad er det næste?

Nu skal du have en klar forståelse af, hvordan du kan Biblioteker og primitive til at forbedre din arbejdsgang og skabe skalerbare designsystemer.

I en anden artikel vil jeg se på at bruge knapper og andre primitive biblioteker til at opbygge mere komplekse komponenter - molekyler, hvis du vil - som på lignende måde kan opbevares i en uafhængig bibliotekfil og repræsenterer det næste niveau af strukturel kompleksitet i et UI-design system.

Du kan downloade eksempelprojektet til reference, det inkluderer primitive filer til farver, ikoner, rammer, figurer og komponentfiler til knapperne. Jeg har også medtaget min formularfil for at illustrere, hvordan forskellige komponenter består af de samme primitive biblioteksfiler. Jeg håber, det hjælper dig med at se, hvordan jeg har oprettet tingene. Vær opmærksom på, at du i det mindste har brug for Sketch 47 for at alle disse gode ting kan fungere. Og sørg for at konvertere hver fil til et bibliotek.

Ressourcer

  • Begrænsninger er en grundlæggende del af design af Steven Bradley.
  • Brad Frosts Atomic Design Methodology.
  • Opbygning af et visuelt sprog på Airbnb.
  • Tænkning i symboler for universelt design af Benjamin Wilkins.
  • Dan Eden om Design System Structure.
  • En bedre måde at lave knapper i skitse af Jon Moore.

Hvis du fandt, at denne artikel var nyttig, skal du give den nogle klapper så andre, der kan have gavn af at læse den, kan finde det lettere. Tak for at du tog dig tid til at læse den, jeg ved, at den var lang!

Jeg er Harry Cresswell. Jeg grundlagde indtl.com og arbejder som UX / UI designer og front-end dev hos Angel Investment Network. Jeg designer type på mine aftener og sender et nyhedsbrev om design og typografi.

Find mig på Twitter, hvis du vil sige hej.