Konsistent Design-Systemer i Skissen Med Atomic Design og Auto-Oppsett Plugin

0
51

Har du design digitale produkter (eller nettsteder) og hånd design filer ut til utviklere for gjennomføringen? Hvis du svarte ja, kan bosette seg i! Mens de skulle-designere-kode debatten raser videre, og vi kommer til å se på hvordan legge til en metodikk til å designe din arbeidsflyt kan gjøre deg raskere, mer stabil, og elsket av alle utviklere… selv om du ikke har koden.

La oss grave litt i!

Hvorfor en metodikk?

I utviklingen verden, det virker som om minst halvparten av karrieren din er om du bor oppdatert med nye tech-og utjevning opp dine ferdigheter. Mens tempoet er kanskje ikke fullt så panisk i design landskap som det er i utvikling, og det har definitivt vært et stort skifte i verktøy-i løpet av de siste tre årene eller så.

Verktøy som Skissen har gjort mye av den gamle smerten av å jobbe i design-filer en ting fra fortiden. Smarte kombinasjoner av tekst stiler, objekt stiler, symboler og biblioteker nå mener omfattende endringer er bare ett klikk unna. Ikke mer å plukke gjennom 40 Photoshop lag for å lage en enkelt farge endring.

Likevel, feiing farge endringer i en markedsføring destinasjonssiden er ikke lenger den største design challenge. Design og utvikling team er nå forventet å levere komplekse grensesnitt lastet med samhandling og betinget states… for hver enhet som er tilgjengelig nå, og neste dag. Å jobbe som både designer og utvikler, jeg har sett arbeidsflyt friksjon fra begge sider.

Utover verktøy, designere trenger en tilnærming.

Tenker i form av “komponenter”

Hvis du arbeider i tech plass i ethvert kapasitet, har du sannsynligvis hørt om utvikling av rammer som Reagerer, Kantete, eller Vue.

Um-ja, jeg er en designer så som egentlig ikke angår meg, bye.

Litt. Men hvis du håper å gjøre design arbeid for moderne digitale produkter, er det en ganske stor sjanse for at disse produktene vil bli bygget ved hjelp av en av disse rammeverkene. Ingen forventer at en arkitekt til å bygge strukturer for seg selv, men de bedre har en høy grad av forståelse av hva verktøyene er og hvordan de vil bli brukt.

Så her er hva du trenger å vite om moderne front-end rammer:

De har ført til et paradigmeskifte for utviklere i hvilke produkter som er laget ved å kombinere en rekke mindre komponenter i komplekse systemer som kan tilpasses ulike kontekster og enheter. Dette gjør koden enklere å vedlikeholde, og hele systemet mer fleksibelt.

For et utvalg av legitime årsaker, og mange designere har ikke fanget på dette paradigmeskifte så raskt som utviklere. Vi mangler en mental modell for å skape bitene som utgjør disse grensesnittene uavhengig av deres miljø/sider/skjermer/viewports etc.

En slik tilnærming er Atomic Design.

Hva er Atomic Design?

Først oppfunnet av Brad Frost, Atomic Design er en metode som forsøker å svare på et enkelt spørsmål: hvis hundrevis av enheten størrelser mener vi kan ikke lenger effektivt design “sider” så hvordan gjør vi selv design?

Svaret ligger i å bryte ned alt som kunne gjøre opp en “side” eller “se” inn i mindre og mindre biter, og skaper et “system” av blokker, som deretter kan bli saman inn i et uendelig antall varianter for vårt prosjekt.

Du kan tenke på det som ingredienser i en oppskrift. Sikker, kan du lage muffins, men du kan like gjerne lage en kake med den samme listen av ingredienser.

Brad bestemte seg for å bruke kjemi analogi, og så han foreslår at våre systemer er laget av:

  • Atomer
  • Molekyler
  • Organismer

For enkelhets skyld, la oss ta en titt på hvordan vi kan bruke dette på en nettside.

Atomer

Atomer representerer de minste byggesteinene som utgjør vår brukergrensesnitt. Tenk deg en form for etikett, en form input, og en knapp. Hver og en av dem representerer et atom:

En overskrift, tekst blokk, og hver link fungere som atomer.

Molekyler

Molekyler er rett og slett grupper av atomer som er kombinert for å skape noe nytt. For vårt formål, kan vi tenke på molekyler som grupper av usammenhengende UI stykker som er kombinert for å skape en meningsfull komponent.

Atomene kommer sammen for å danne en “kort” komponent.

Organismer

Organismer er bygd opp av grupper av molekyler (eller atomer eller andre organismer). Dette er deler av et grensesnitt som vi kan tenke på som en “del”. I en fakturering program, en organisme kan være en dashboard å kombinere en “ny faktura” – knappen (atom), et søk form (molekyl), en “total åpne” – kort (molekyl), og tabell over forfalte fakturaer. Du får ideen.

La oss se på hva en “omtalt blokk” organisme kan se ut i vår enkel nettside:

En overskrift (atom), tre kort (molekyler), bilde (bilder) (atom), og en teaser (molekyl) kombineres for å danne en utvalgt kvartal organismen.

Ved hjelp av stabler for konsistens

Så, nå som vi har en mental modell for “ting,” hvordan vi går om å lage disse byggeklossene? Skissen er flott ut av boksen”, men den plugins tilgjengelig for den gir stor ytelse verktøy… akkurat som tekst redaktører for utviklere. Vi vil være med Skisse innebygde symboler verktøy, så vel som den fantastiske Stabler” – funksjonen fra Anima App ‘ s Auto-Oppsett plugin.

Ved hjelp av disse verktøyene vil gi noen uvurderlige fordeler som jeg vil peke ut som vi går, men i det minste kan du stole på:

  • bedre design konsistens og raskere iterasjon
  • en kontroll fra bruker konsekvent avstand multiplikatorer
  • raskere omlegging av innhold
  • hjelp til å identifisere design problemer raskt og tidlig på

Nøyaktig hva er det stabler?

Hvis du noen gang har hørt utviklere ivrig snakke om flexbox for bygging av anlegg i CSS, så kan du tenke på stabler som Skissen tilsvarende. Stabler (f.eks. flexbox) kan du gruppere en serie av lagene sammen, og deretter definere sine avstand og innretting på en vertikal eller horisontal akse.

Her er vi i gruppe tre elementer, justere dem gjennom sitt senter, og satt 48px loddrette avstanden mellom hver enkelt:

En enkel stablet mappen justere og distribusjon av tre elementer.

Lagene vil automatisk bli gruppen i en blå mappe med et ikon av en vertikal eller horisontal prikker for å vise hva slags stabel du har.

Se på det! Du bare lært flexbox uten å berøre en linje med kode. 😂

Nestede stabler

Den virkelige kraften i stabler kommer fra hekkende stabler inne i andre stabler:

Stabler kan være nestet inn i hverandre for å lage komplekse avstand systemer.]

Her kan vi se et kort komponenten består av flere stakker:

  • kort__cta kobling fra forrige eksempel.
  • kort__kopi stack som håndterer justering & space for overskrift og tekst.
  • kort__innhold som kontrollerer avstanden og justering mellom kort__cta og kort__kopi stabler.

En rask notat om lag naming

Jeg nesten alltid bruker BEM naming convention for min komponenter. Utviklere setter pris på logikk når jeg har til å videreføre design-filer fordi det ofte er på linje med navnekonvensjoner de bruker i koden. I de tilfeller hvor jeg er å utvikle prosjektet selv, det gir meg litt av et forsprang som jeg har begynt å tenke på markeringen i design fasen.

Hvis det er super forvirrende, ikke bekymre deg om det. Vennligst bare gjøre dine kollegers jobben litt enklere ved å organisere ditt lag og gi dem beskrivende navn.

Stabler shmacks, jeg har stor oppmerksomhet på detaljer, og du kan gjøre alt dette manuelt!

Du har helt rett! Men hva når du har nøye lagt ut 10 poster, alle i forskjellige størrelser, og nå trenger de ekstra plass mellom dem? Eller, du trenger for å legge til en linje av tekst til en av disse elementene? Eller, du trenger å dele innholdet inn i tre kolonner snarere enn fire?

Det skjer aldri, ikke sant? 😱

En av to ting skjer vanligvis på dette stadiet:

  1. Du starter manuelt flytting av alle ting, og noen til å betale for bortkastet tid (om det er du eller kunden).
  2. Du ganske fudge det… tross alt, utvikleren vet sikkert hva den opprinnelige intensjonene var det før du dro hver margin av med et par punkter i ditt oppsett. _(ツ)_/

Her er hva stabler får du:

  • Du kan endre justeringen eller avstand valg så mye du vil med et enkelt verdi justering og ting vil bare magisk oppdatering.
  • Du kan endre størrelsen på elementer uten å måtte ta på tegnebord til rejig alle ting.
  • Du kan endre rekkefølgen, legge til eller fjerne elementer fra bunken mappen og se elementer fordele seg selv i henhold til dine innstillinger—akkurat som koden. 🎉

Legg merke til hvor fort det er å redigere innhold og eksperimentere med forskjellige oppsett for alle og samtidig opprettholde konsistens:

Stabler og symboler gjør eksperimentering billige og konsistent.

OK, så nå vet vi hvorfor stabler er fantastiske, hvordan kan vi faktisk bruke dem?

Opprette stabler

Opprette en stack er et spørsmål om å velge to (eller flere) lag og treffer stabler mappe-ikonet i inspektør. Derfra, du kan bestemme om du legger dem i bunker ditt lag horisontalt eller vertikalt, og angi avstanden mellom elementene.

Her er et eksempel på hvordan vi skulle lage et atom komponent ved hjelp av stakker:

Å skape en horisontal stabel med 20 piksler avstand mellom tekst og ikon.

Og, la oss nå anvende stabler konseptet til et mer komplekst molekyl komponent:

Å lage en kort-molekylet bruker nestede stabler.

Å lage symboler fra stabler

Vi har snakket om de mange fordelene av stabler, men vi kan gjøre dem enda mer effektiv ved å bruke Skissen som er symbolet verktøy for dem. Resultatet vi får er en stabel som kan administreres fra én kilde, forekomst og om igjen hvor som helst.

Å skape et atom symbol

Vi kan ta som call-to-action stabelen vi nettopp opprettet, og gjøre den til et symbol. Så, vi kan bruke overstyrer innstillingene for tekst og vet at stabler vil hedre avstand:

Å skape et symbol fra en stakk er flott for å sikre plass konsistens med overstyrer.

Hvis jeg senere bestemmer deg for at jeg ønsker å bytte plass med et par punkter, jeg kan bare justere stabelen avstand på symbolet og har det oppdatering på hver forekomst 🎉

Å skape et molekyl symbol

På samme måte, jeg kan gruppere flere stablet atomer i en komponent og gjør det til et symbol:

Å lage en kort-symbol fra våre stabler og call-to-action symbolet.

Symboler + stabler = 💪

Ville ikke det være fint om vi kunne opprettholde romslig krav vi setter uavhengig av tweaks vi kan bringe dem ned linjen? Ja!

Bytte ut ett element med en annen inne i en komponent

La oss anta at vår kortet komponent krever nå en knapp i stedet en link som en call-to-action. Så lenge vi har plass på den knappen i riktig bunke mappe, alle piksel-påvirke skjer ‘automagisk’:

Fordi våre symbol bruker stabler, avstanden mellom kopi og call-to-action vil automatisk bli respektert.

Redigering av molekyler og organismer på fly 🔥

Du tenker kanskje at dette er ikke en stor avtale, og at en justering av små romslig saken fra forrige eksempel ville ha tatt bare et øyeblikk uten stabler. Og du ville ikke være galt. Men la oss se tilbake til våre forestillinger om atomic design for et øyeblikk, og spør hva som skjer når vi har langt mer kompleks “organismer” (grupper av atomer og molekyler) til å håndtere?

Lik vår mobile eksempel fra begynnelsen, dette er hvor den innebygde-i kraft av stabler virkelig skinner:

Stabler og symboler gjør eksperimentering billige og konsistent.

Med et bibliotek av grunnleggende symboler (atomer) på fingertuppene, og kraftig avstand/verktøy for justering, kan vi eksperimentere og lage uendelige variasjoner av komponenter. Nøkkelen er at vi kan gjøre det raskt og uten å ofre design konsistens.

Komplekse layouter og mega stabler

Tråd med de elementene vi har allerede laget, la oss se hva en lagstabelen kan se ut for en enkel markedsføring siden:

Et eksempel på en utvidet lagstabelen.

Ikke la den første inntrykk av kompleksiteten i de stabler skremme deg. En ikke-stablet versjon av denne tegnebord ville ikke se så forskjellig, bortsett fra fargen på mappen ikoner.

Men det er de veldig mapper som kan gi oss alle kraft:

Layout eksperimentering kan være raskt og billig!

Vi trenger kanskje ikke å kode, men vi har et ansvar for å mestre våre verktøy for effektivitet og finne ut nye arbeidsflyter med vår utvikler kolleger.

Dette betyr at man må gå bort fra å tenke på design i sammenheng med sider, og opprette samlinger av komponenter… moduler… ingredienser… legos… finne ut en metafor som fungerer for deg og så sørg for at hele laget aksjer vokabularet.

Når vi gjør dette, problemene rundt arbeidsflyt og samarbeid smelte bort:

Hastighet og Fleksibilitet

Nøye bygning komponentene med symboler, og ved hjelp av automatisert og konsekvent avstand/justering med stabler krever litt tid investering på forhånd. Imidlertid, avkastningen av lett eksperimentering og evne til å endre kurs raskt og til lave kostnader, og er vel verdt det.

Konsistens og UX

Å måtte tenke på hvordan elementene fungerer som kombinasjoner og i forskjellige sammenhenger vil fange UX-lukter tidlig og avdekke saker som er rundt konsistens før du er 13 skjermer i. Endre retning ved å justere noen få variabler/komponenter/avstand enheter beats påvirke elementer rundt et tegnebord hele dagen.

Ansvar og Styring

En enkelt 1440px side utsikt over ting du bygger rett og slett ikke gitt en utvikler med nok sammenheng for flere skjermer og samhandling. På samme tid, laging av flere high fidelity comps en liten element om gangen, og er et billig buster (og dette er spesielt sant for app-design). Så, hva har en tendens til å skje på små grupper? Utvikleren får en nydelig 1440px utsikt… aaaaand alle cognitive overhead med å fylle i hullene for alt annet.

Å gi opplysninger som er jobben vår.

Atomic design ga oss hastighet, kreativ frihet og fleksibilitet. Det forandret alt.”

—Fra det frem av Atomic Design

Hvis vi jobbe med utviklere på digitale produkter, og vi bør være glade om å lære hvordan pølser blir laget og tilpasse vår tilnærming til design tilsvarende. Våre verktøy kan ikke utvikle seg ganske så raskt som JavaScript-rammeverk, men hvis du ikke har tatt en titt under for å panseret av noen av disse programmene i de siste par årene, dette er en flott tid til å grave!