Share
Prototyping bør være en rask og enkel måte å få tillit til designene dine. Ikke lenger betraktet som en måte å stryke bevegelse magi eller over-polish design, prototyping er et kommunikasjonsverktøy. Enten du kommuniserer med interessenter, designansvarlige eller brukere, bidrar en god prototype til å formidle designbeslutninger og teste ideer.
I denne opplæringen skal vi lage en grunnleggende "boarding pass" prototype i Atomic, som du kan forhåndsvise her. Prototypen starter med en lastingstilstand før du kan bla gjennom kommende flyreiser og forhåndsvise din QR-kode for ombordstigning. For å lage denne prototypen bruker vi interaktive komponenter, data, variabler og sidetransisjoner. Ikke vær redd! Jeg hjelper deg gjennom hvert trinn.
Her er en demonstrasjon av hva vi skal opprette:
Det er noen ting du trenger for å følge med:
atomic.ioHvis du når som helst gjennom hele opplæringen, har du et spørsmål, gjerne kontakte meg (@femkesvs) eller Atomic support teamet (@we_are_atomic) på Twitter.
La oss gå!
Jeg har opprettet en prøvefil med eiendelene du vil måtte lage din prototype. Denne prøvefilen er komplett med de eiendelene vi skal bruke, samt forhåndsbygde komponenter.
Du kan få tilgang til eiendelene her. For å bruke eiendelene må du kopiere prototypen til kontoen din. Du kan gjøre dette ved å klikke Kopier og rediger nederst til høyre og velg deretter et prosjekt du vil kopiere det inn i. Jeg foreslår at du oppretter et nytt prosjekt for denne opplæringen.
Før vi begynner å lage vår prototype, må vi først legge til datakilden til Atomic. Jeg har satt sammen et Google-ark med noen grunnleggende data som vi skal bruke i vår prototype.
Du kan få tilgang til dataene her. Med datakilden åpen, gå til Fil> Legg til i disket mitt (du trenger en Google-konto for dette).
Neste, med prosjektet åpent i Atomic, velg Data fane. Herfra klikker du Importer data, og finn datakilden via søk. Når du er lokalisert, velg datakilden. Du vil se Atomic laste dataene inn i prosjektet ditt. Denne datakilden kan nå nås og brukes i enhver prototype i prosjektet.
Vi er klare!
La oss begynne å samle vår prototype ved å opprette lastingstilstanden. Vi gjør dette ved å opprette både en tilpasset overgangs- og tidsbasert sidehandling.
Først velger du lastekomponenten fra Assets-siden for å kopiere (CMD-C og lim inn (CMD-V) den til side 1. Den blir stor, og i stedet for å endre størrelsen på den, plasser den i startposisjon.
Kopier deretter lasteelementet du bare satt på side 1, denne gangen limes på på side 2. Sett det i sin endelige tilstand (rotert med klokken 75 ° slik at flyet er plassert utenfor høyre side av lerretet).
For å opprette overgangen hopper du tilbake til side 1. I panelet til høyre finner du en seksjon som heter Sidehandlinger. Klikk på pluss-knappen og sett deretter inn følgende:
La oss forhåndsvise og se vår overgang i handling - du bør se at flyet glir fra venstre til høyre i løpet av to sekunder. Ryddig!
For å ta det videre kan du også kopiere og lime inn Fly-logoen til både side 1 og side 2 (under lastekomponenten i sidepanelet og plassert bak). Pass på at du følger samme teknikk for å plassere den i start- og sluttposisjon på hver side. Du må sannsynligvis justere rekkefølgen på lagene dine slik at de vises bakfra.
Til slutt må vi opprette en handling som tar brukeren automatisk til side 3 fra side 2. På side 2 legger du til en annen tidsbegrenset handling. Denne gangen bruker vi følgende innstillinger:
Tips: Hvis du vil snike timingen av de to elementene som animerer, kan du gjøre dette ved hjelp av Avansert bevegelsestidslinje.
Deretter kopierer du elementene som trengs for side 3 og limer dem inn på side 3. Du må gjøre litt omarrangering og justeringer for å passe elementene på siden etter behov.
Nesten alle elementene som trengs for denne siden er komponenter.
Komponenter i atomisk er som symboler. Enhver komponent kan redigeres og gjenbrukes gjennom et prosjekt. Eventuelle endringer som gjøres til en komponent, oppdateres i hvert tilfelle. Komponenter kan også være interaktive og inneholde flere tilstander til et symbol. Dette gjør det veldig enkelt å strukturere prototypen din.
La oss legge til litt interaktivitet til boardingPasses-komponenten. For å åpne komponenten, dobbeltklikk på komponentikonet i lagpanelet ved siden av lagnavnet. Når du er åpen, ser du tre sider; en som representerer hvert fly. For nå er disse passene identiske, snart vil vi endre dette.
Vi vet at brukeren har tre fly, og vi vil at de skal kunne sveipe gjennom hverandre. Det er også et QR-kodesymbol som, når de samhandler med, burde hente opp ombordstigningskoden.
Hvis du ser i lagpanelet vil du legge merke til at hver side er en forekomst av en komponent kalt "boardingCard". La oss åpne BoardingCard-komponenten nå for å se hvordan dataene har blitt brukt.
BoardingCard-komponenten er en komponent innebygd i en komponent. Dette gjør at vi kan lage et boarding-symbol som kan brukes på nytt mens de viser forskjellige datasett.
Med boardingCard-komponenten åpen ser du to sider; forsiden og baksiden av passet. Dette er hvor dataene blir tildelt de enkelte tekstelementene.
Data arvet fra foreldreVelg ABC-teksten og ta en titt på Tekstegenskaper. Du vil legge merke til følgende:
Deretter hvis du ser på Google-arket der disse dataene blir trukket fra, ser du en kolonne med tittelen «Avgangskode». Dette betyr at tekstelementet ABC vil vise hvilken data som er vist i kolonnen "avgangskode".
All dynamisk tekst i denne komponenten er satt til Erver fra foreldre. Dette gjør at vi kan koble til databladet på gruppnivå, og derfor viser og sorterer data raden for rad. Vi kommer snart til dette.
Deretter oppretter vi en sidebasert overgang for å bla mellom pass og QR-koden. På forsiden av boardingCard-komponenten trykk H for å få opp hotspot-verktøyet. Deretter tegner du et hotspot over QR-kodeikonet på forsiden.
Hotspots lar deg definere interaktive områder av prototypen din. Når du har valgt ditt hotspot, angir du følgende under interaksjonspanelet:
Deretter, på baksiden, opprett en annen hotspot (H) som tar oss tilbake til forsiden. Denne gangen tegner den over Lukk ikonet og angi følgende:
Tid til å teste samspillet ditt! I nederste høyre hjørne trykker du på Forhåndsvisning knapp. Forhåndsvisningsmodus lar deg teste overgangene dine og samhandle med prototypen din via hotspots. Prøv å klikke på QR-kortet eller lukk ikonet; kortet skal vende mellom de to tilstandene. Du kan lukke forhåndsvisningen ved å trykke X.
Å ha dette boardingkortet som en interaktiv komponent tillater oss å velge hvilke data som vises dynamisk, uten å måtte opprette flere stater og interaksjoner.
For å returnere, klikk på lilla tilbake knappen opp øverst til venstre. Nå bør du være tilbake i boardingPasses-komponenten. I denne komponenten har vi tre passerer som for øyeblikket viser de samme dataene. La oss oppdatere dette nå.
Husk hvordan i boardingCard-komponenten, ble dataene satt til Erver fra foreldre? I dette tilfellet er forelder komponent-forekomsten.
På flyet 1 side velger du boardingCard-forekomsten. I komponentegenskaper permisjon Stat som det er. Under Data, velg datakilden og forsikre deg om Rad er satt til rad 1. Instansen skal nå vise data fra første rad i databladet.
Hvis du bytter raden, vil du legge merke til at de viste dataene oppdateres. La oss beholde det på rad 1 for nå, men på fly 2 og fly 3 angir dette for å vise data fra rad 2 og rad 3 henholdsvis.
For å gjøre det mulig for brukerne å sveipe gjennom passasjepassene, må vi sette opp noen swipe-interaksjoner.
Opprett og tegne et hotspot (H) på høyre side av flyet 1 side (sørg for at du legger litt plass øverst for hotspotet over lukkikonet på baksiden av boardingCard-komponenten, og at det ikke gjør det " Ikke dekk QR-koden på forsiden). Bruk følgende innstillinger for å opprette sveipebevegelsen:
Gjør det samme på flyet 2-siden, og legg til et nytt hotspot på venstre side av flyet 2 og 3 flyturer satt til Skyv høyre og Skyv til venstre i stedet. Du er velkommen til å trykke Forhåndsvisning for å teste og interagere med komponenten, og justere innstillingene for sveipingen tilsvarende.
For å fullføre byggingen av prototypen må vi opprette og bruke en variabel. Denne variabelen vil gjøre det mulig for våre komponenter å snakke med hverandre mens de påvirker deres tilstand.
Variabelen vi skal opprette vil bli brukt til å oppdatere fremdriftspunktene basert på hvilket boardingkort som vises.
Hvis du vil opprette en variabel, trykker du på V å åpne Variabler Modal. Her klikker du Opprett ny variabel og skriv "flightDisplayed" i Navn felt. La standardverdien være tom.
Flott, du har din variabel satt opp! Lukk variablene modal ved å trykke på X eller flukt på tastaturet ditt.
Naviger tilbake til prototypen. Hvis vi forhåndsviser nå fra startsiden, bør du kunne sveipe mellom kortene og også samhandle med QR-koden.
Mens vi nå kan sveipe gjennom passene, er det et par flere ting å konfigurere for å påvirke fremdriftspunktene for å oppdatere basert på fremdriften av ombordstigningskort.
For å gjøre dette åpner du boardingPasses-komponenten. På side 1 la vi opprette følgende sidehandling:
Gjenta dette på side 2 og 3, slik at verdien er satt til 2 eller 3 for å gjenspeile siden du er på.
Vi har effektivt fortalt komponentbordetPass for å oppdatere verdien av variabelen flightDisplayed, avhengig av flyet (siden) som vises. Vi kan nå bruke denne verdien til å påvirke tilstanden til fremdriftspunktene.
Slik gjør du: Gå tilbake til prototypen og åpne komponenten progressDots.
Du vil legge merke til tre sider (stater) kalt 1, 2 og 3. Denne navngivningen samsvarer med verdiene som er angitt i flightDisplayed variabelen. Det er viktig at disse sidene samsvarer med de angitte verdiene.
Gå tilbake til prototypen, velg komponenten progressDots, og:
Vi har nå koblet komponenten progressDots til den variable flightDisplayed. Dette betyr at når verdien av variabelen endres til en verdi, viser progressDots-komponenten siden som samsvarer med variabelverdien.
Prøv å forhåndsvise prototypen din nå, interagere med boardingpassene ved å sveipe og se om fremdriftspunktene oppdateres.
Til slutt kan du slette eller flytte Assets-siden for å sikre at delt forhåndsvisning åpnes på riktig startside. Hvis du vil slette siden, velger du hamburger-menyen på miniatyrbildet og klikker på slett side.
Tips: Se om du kan finne ut hvordan du får promoCard-komponenten til å oppdatere sin tilstand basert på det viste flyet. Du vil opprette en ny variabel kalt cardDisplayed.
Der har du det! Din egen Boarding Pass-app. Hvis du lastet ned iOS-appen, kan du prøve å åpne prototypen og samhandle med den på iPhone. det burde føles akkurat som den virkelige ting.
Godt gjort for å følge denne opplæringen helt til slutt. Du bør nå ha en grundig forståelse av hvordan du lager din egen prototype i Atomic. Hvis du har eksisterende eiendeler i Sketch, kan du importere dem ved hjelp av Atomic Plugin for Sketch, eller designe innbo i Atomic hvis du ønsker det.
Spørsmål? Kommentarer? La dem være under eller nå ut til meg på Twitter (@femkesvs).
Accentsconagua