Slik utfører du en grensesnittbeholdning med InVision

Per definisjon: En beholdning er en samling av gjenstander spores i en liste. Dette begrepet er ikke noe nytt, men ideen om å bruke dette konseptet mot grensesnitt er. Brad Frost, som utpekte begrepet "Atomic Design", sier at å skape agnostiske mønstre bidrar til å bygge langt mer allsidige komponenter som kan brukes bredt over et system.

I denne korte opplæringen bruker vi InVision til å lage et grensesnitt inventar. Vi vil jobbe mot et ferdig produkt med komponenter og moduler som er perfekt gjenbrukbare og bærbare.

Starter

En "modul" er et sett av standardiserte deler eller uavhengige enheter som kan monteres for å konstruere en mer kompleks struktur. Å bygge denne måten gjør forutsigbare utfall mer sannsynlig.

For å nå dette høydepunktet av utviklingsutopi bruker vi InVision's Boards-funksjonen.

Aaron Stump på Dribbble

Styrene er smertefri å lage, og hver enkelt kan bli betegnet med navn og beskrivelse. Når informasjonen er fullført, klikk på "opprett bord" -knappen.

Naturligvis kan plater brukes til ulike formål, enten det er for en lagerrevisjon som den vi lager, eller for merkevarebygging, og så videre.

Vi vil fokusere på grensesnittet inventar for formålet med denne opplæringen, men husk at brett kan brukes til andre kontekstuelle behov også.

Opprette revisjonen

Nå som styret vårt er opprettet, er det på tide å komme seg til virksomheten og begynne det virkelige arbeidet vi har kommet for å gjøre; grensesnittet inventar revisjon. Avhengig av arbeidsflyten kan dette gjøres på noen forskjellige måter, men vanligvis starter det med skjermbilder av grensesnittets "atomer" som knapper, overskrifter, innganger, farger og til og med ikoner. Siden Atomic Design også inneholder "molekyler" og "organismer", kan du bevege deg på hver type som prosessen guider deg.

I de fleste tilfeller er molekyler og organismer et mye høyere inspeksjonsnivå som inkluderer mindre atomiske / molekylære stykker kombinert på unike måter å skape en større helhet.

Alisa Law prosjekt.

Organisasjonen er definitivt den viktigste delen når du starter revisjonen. Som du kan se over, brøt jeg ned en bestemt seksjon i mønstre og variasjoner, slik at jeg kunne identifisere deler av grensesnittet som gjentas, men hadde en liten variasjon. Dette er flott når det kommer tid til å kode fordi du kan finne gjenbrukbare mønstre for å holde CSS lean, til slutt konstruere et mer modulært system.

Camp Shalom prosjekt.

Atomer vil bidra til å identifisere variasjoner og til og med veilede deg i navngivningskonvensjonens søken; den vanskeligste delen av jobben. Når du oppdager atomer dine, tenk selv hva som er et "skjermmønster" og hva er et "innholdsmønster", da begge vil variere sterkt. Hvis dette spørsmålet ikke besvares riktig, kjører koden risikoen for å avvike fra å bli en bærbar og modulær enhet som passer for ulike sammenhenger.

Fargestifter er også en stor brukstilstand med InVision-brett. Dette kan være en stor tidsbesparende guide når du diskuterer om fargekonsistens brukes i et grensesnitt. Fargeprøver kan også bidra til å holde styr på fargeverdiene som kreves ved bruk av variabler for å lagre fargeinformasjon for å jobbe med CSS-forprosessorer.

Murmuration Malts prosjekt

Dra nytte av boards for å dokumentere og diskutere navngivningskonvensjoner, funksjonalitet, plugins / biblioteker og til og med identifisere mønstre fra et høyere nivå.

Mønsteridentifikasjon brukes sammen med kommentarer til Murmuration Malts-prosjektet Gif hentet fra blogginnlegget Invision Boards Design Collaboration Reimagined

Kommentarer og skisser er en powwerful funksjon som også kan brukes med brett! Bruk skissering for å peke ut deler av grensesnittet i spørsmålet, eller bruk kommentarer for å diskutere mønstre oppdaget for å størkne kravene før utvikling. Det er massevis av andre gode kommenteringsfunksjoner som følger med InVision Jeg oppfordrer deg til å lese mer på deres nettsted.

Konklusjon

Styrene er veldig praktiske å bruke til initale funn, enten utvikling eller visuell i intensjon. Hvis du vil lære mer, kan du lese alt om forumene på Invision-bloggen. Som alltid, glad koding og takk for lesing!