Share
I denne veiledningen vil jeg lære deg hvordan du lager en animert prototype av mobilapplikasjonsdesign. Prototypen vil se ut som en ekte applikasjon på telefonen din; Du kan navigere og bla gjennom designet ditt ved hjelp av bevegelser og tilpassede animasjoner.
På slutten av denne opplæringen vil du kunne lage en animert prototypeversjon av alle applikasjonsdesign ved hjelp av Pixate. La oss komme i gang!
For denne opplæringen trenger du tre ting å følge med:
Etter min mening er Pixate det beste verktøyet for designere å lage helt funksjonelle, egendefinerte animerte prototyper for mobilapplikasjoner, uten å skrive en enkelt linje med kode.
I motsetning til andre prototypingsverktøy, som Flinto eller Marvel, Pixate, kan du skille lag og legge inn interaksjoner, for eksempel Dra, Trykk, Dobbelttrykk, Rull, Klem og mer.
Prototypen selv finnes på nettet. Under denne opplæringen bruker vi webversjonen av Pixate, men vi får sluttresultatene i et innfødt program på telefonen vår, noe som gir en flott væskeopplevelse.
Før vi kan begynne å lage vår første prototype, må vi sette opp et nytt prosjekt i Pixate.
Når du har logget deg på kontoen din, klikker du på Nytt prosjekt knappen, velg deretter Ny prototype alternativ.
Her kan vi velge den spesifikke typen enhet vi designer for. I så fall, velg iPhone 6, siden vi har designet treningsprogrammet for den aktuelle enheten i Sketch.
Merk: Vi kan også velge smartwatch skjermstørrelser som Apple Watch, LG G Watch eller Moto 360.
Pixate tillater oss å animere hvert enkelt objekt i prototypen vår, basert på ulike hendelser og interaksjoner, for eksempel skjermbelastningen, trykk, dobbeltklikk eller bla. Dette betyr også at vi må eksportere de elementene vi ønsker å animere i prototypen.
La oss åpne vår Sketch-fil og begynne å eksportere hvert element en etter en. Hvis du ser på den endelige prototypen, kan du se at i tilfelle av "GO-skjermen" eksporterte jeg separat navigasjonslinjen, fanefeltet, hver eneste kolonne av værmeldingen og målkretsene.
Du bør eksportere i PNG, siden det er nøkkelen til å ha transparente lag.
Tips: fokus alltid på en skjerm av gangen. På dette punktet i prosessen, bør du kun eksportere lagene på "GO-skjermen", slik at det blir enklere å jobbe med og endre ting på farten hvis det er nødvendig.
Importere eiendeler i Pixate er et spørsmål om å dra og slippe de eksporterte PNG-filene i nettleservinduet:
Nå er det på tide å gjenoppbygge skjermen vår i Pixate. Dette arbeidet kan gjøres mye raskere hvis vi henviser til Inspeksjonspanel både i Pixate og Sketch. Når dette er tilfelle, må vi bare kopiere og lime inn X- og Y-verdien av hvert element.
Merk: Husk at vår Sketch-design ble laget på @ 2x oppløsning, mens i Pixate jobber vi med @ 1x oppløsning. Dette betyr at vi må dele hvert nummer fra Sketch av 2 før du søker på Pixate.
La oss åpne Pixate-programmet på vår iPhone, der vi kan se at vårt design har begynt å komme sammen. Fra nå av, hver gang vi endrer noe på webapplikasjonen, blir det automatisk synkronisert med våre telefoner.
Etter å ha valgt den første kolonnen i værmeldingen, kan vi se hvilke typer animasjoner som er tilgjengelige på venstre side i nettleseren vår. La oss dra og slippe Fade animasjon til motsatt side, høyre sidefelt.
Nå må vi spesifisere når vi vil at denne animasjonen skal vises. Sett Basert på verdier til * SKJERM *, Lastet.
Dette betyr at animasjonen vår vil bli spilt rett etter at den første skjermen er lastet, noe som skjer umiddelbart når vi kjører prototypen.
Siden vårt mål er å få en fading i kraft, la oss sette den opprinnelige opaciteten til 0% på Egenskaper panel, og til 100% på Animasjonspanel.
På bunnen av Animasjonspanel Vi kan også sette lette kurven, varigheten og forsinkelsesverdiene.
Du bør angi varigheten mellom 0.2-0.4s, men det er nei offisielt vei her, så jeg oppfordrer deg til å leke med disse verdiene til du føler at de er akkurat.
Merk: i min prototype foretrukket jeg å bruke litt langsommere animasjoner, slik at du kan se dem tydeligere. I et ekte prosjekt vil jeg anbefale raskere og mer subtil bevegelse.
La oss nå velge den andre kolonnen av værvarselet og angi nøyaktig det samme Fade animasjon som vi gjorde før, med bare en forskjell: denne gangen satte animasjonsforsinkelse å være rundt 0.1-0.3s. På denne måten vil animasjonene spilles i en sekvens.
Fortsett med nøyaktig samme metode for alle elementene du vil legge til en Fade animasjon til, men ikke glem å kontinuerlig øke verdien av animasjonsforsinkelsen.
La oss nå sette opp samspillet mellom sirkler i målgruppen. For å kunne horisontalt rulle mellom målringene må vi importere dem som tre separate PNG-filer.
Etter å ha plassert dem i riktig posisjon, la oss lag et nytt lag i Pixate; nødvendig for å aktivere horisontal rulling. På Egenskaper panel sørg for at du ser ut til det Ingen bildesett. Før vi legger til noe samspill med dette laget, legger vi til målringene PNG-filer til det nye laget på lag panel. Enkelt sagt, dette ligner på Gruppe verktøy i skisse.
Nå kan vi legge til en Dra samhandling til dette nye laget og settet Horisontal rulling med minimumsposisjon: -255pt og maksimal posisjon: 120pt på Animasjonspanel.
For den lille studseffekten under den horisontale rulle skapte jeg en tilpasset animasjon med spesielle forhold. For å starte, legg til en Flytt animasjon til det nyeste laget, som inneholder alle ringlagene.
Nå, i animasjoner panelet angir Basert på verdi til Målinnstillinger og Dra utgivelsen.
Først og fremst IF-betingelse Jeg brukte følgende formel: goal_settings.x> -255 && goal_settings.x < -67, som betyr at hvis posisjonen til målgruppelaget (lag ID: goal_settings) er høyere enn -255 pt og mindre enn -67 pt, det vil flytte venstre side av laget til -67 pt punkt.
For animasjonen brukte jeg en Vår lettelse kurve med en friksjon verdi av 25 og spenning av600.
Min andre IF-betingelse er: goal_settings.x <= -67 && goal_settings.x > -255, flytt deretter venstre side av laget til -255 pt.
Den tredje betingelsen er: goal_settings.x> -67 && goal_settings.x < 150, flytt deretter venstre side av laget til 150 pt.
Sist, men ikke minst, den siste IF-setningen er: goal_settings.x < 150 && goal_settings.x > -67, som vil flytte venstre side av laget til -67 pt.
Merk: Jeg vet at dette ser litt komplisert for første gang, men jeg oppfordrer deg til å kopiere og lime inn min løsning og prøve den, deretter endre noe og prøv det igjen. Mine forhold er ikke på noen måte perfekt, så du kan til og med forbedre og justere dem, til de føler seg riktig for deg.
Som vi gjorde med målringen, la oss lage et nytt lag og legge hvert lag vi har så langt inn i det. Vi grupperer bare lagene på "GO-skjermen" akkurat nå.
Før vi begynner å importere og gjenoppbygge skjermbildet Utfordringer i Pixate, må vi opprette et nytt lag som vil fungere som gruppelag for hvert element på denne skjermen. La oss plassere dette rett ved siden av "GO-skjermen" uten polstring eller mellomrom mellom dem.
Etter at vi har importert og bygget opp skjermen vår, lag for lag, må vi sette den vertikale rulle etter utfordrerkortene.
la oss lag et nytt lag uten bildebakgrunn og legge til kortlagene våre til det. Vertikal rulling er enda enklere enn horisontal rulling, fordi det eneste vi må gjøre er å legge til en Rulle interaksjon til dette nye laget.
For å se skjermbildet "Utfordringer" på vår iPhone, må vi gå tilbake til vår "GO-skjerm" og legge til et nytt rektangellag øverst på Utfordringer-knappen på fanen.
Sett utseendet til ingen bildefylling og legg til en Trykk på interaksjon til det. La oss nå gå tilbake, velg vårt utfordringer gruppelag, som inneholder hvert element på skjermbildet Utfordringer og legg til en Flytt animasjon til det.
De eneste gjenværende tingene vi må gjøre er å sette Basert på hendelse til knappen vi nylig har lagt til vår "GO-skjerm" med Trykk på interaksjon og sett Flytte til verdi til 0 pt. Så når vi trykker på utfordringsknappen på "GO-skjermen", vil Challenges gruppelaget bevege seg inn på riktig sted.
For å animere utfordrerkortene, bruker vi to animasjoner, en Fade og en Flytt, samtidig. Pass på at du har angitt Basert på Verdien til Utfordringer-knappen.
For Fade-animasjonen bruker vi samme teknikk som med GO-skjermbildet, så la oss stille Opacity til 0% på Eiendommer panel og Fade til verditil 100% på animasjoner panel. For varigheten jeg brukte 0.5s med en 0.2s utsette.
Merk: ikke glem å kontinuerlig øke verdien av forsinkelsen for hvert kort.
Vår andre animasjon er en Flytt animasjon. Akkurat som i tilfelle av Fade animasjonen, la oss sette Basert på Verdien til Utfordringer-knappen og bruk nøyaktig samme animasjonsvarighet og forsinkelse som i tilfelle av Fade-animasjonen. Sett nå Flytt til toppen verdi til 10px, som vil flytte utfordringskortet 10px oppover, når animasjonen starter.
Siden på slutten av animasjonen vil hvert utfordringskort være 10px oppover, vi må flytte dem 10px nedover på vårt Pixate lerret.
La oss lage et nytt lag en gang til, som vil inneholde avsnittet Bla gjennom utfordringer. Som i tilfelle av delen Mine utfordringer, la vi legge til en Rulle interaksjon til det.
For å kunne bytte mellom Mine utfordringer og Bla gjennom utfordringer, må vi opprette et nytt lag øverst på tittelen Bla utfordringer, som vil fungere som en knapp. Sett lag fylle til Ingen bildesett og legg til en Trykk på interaksjon til det.
Nå, hvis vi går tilbake til vårt gruppeblad for Browse challenges (opprettet i forrige trinn), kan vi legge til en Fade animasjon til det basert på denne nye knappen. Så til vi trykker på Bla gjennom utfordrerknappen, er opaciteten til bla gjennom utfordringene seksjonen 0%, og etter kranen blir den 100%.
Som et siste trinn la jeg til en Skala og Fade animasjon til tidslinjens fremdriftsfelt i delen Bla gjennom utfordringer.
Merk: ikke glem å bruke nøyaktig samme animasjonsvarighet og forsinkelsesverdier for Fade and Scale-animasjonene.
Før vi begynner å animere skjermen "Aktiviteter", må vi gjenta noen få trinn utført i tilfelle "Utfordringer skjerm" også.
La oss lage et nytt lag rett ved siden av skjermbildet Utfordringer uten utfylling. Dette laget vil være gruppelaget for elementene på "Aktiviteter-skjermen".
La oss nå gå tilbake til vår "GO-skjerm" og lage et nytt lag øverst på siden aktiviteter knappen på fanen. Legg til en Trykk på interaksjon til dette nye laget.
Gå tilbake til vårt Gruppegruppe Aktiviteter og legg til en Flytt samhandling til det basert på vår nye knapp.
Legg nå til en Fade animasjon til alle resultatene på aktivitetsskjermbildet med en 0.4s animasjonsvarighet og a 0.1s animasjonsforsinkelse mellom resultatene.
Merk: ikke glem å sette Basert på verdi til "Aktiviteter-knappen", som vi plasserte på "GO-skjermen".
Lag et nytt gruppelag og plasser hver treningsøkt i den, bortsett fra den første. Vi trenger dette for Flytt ned animasjon, Siden du bare går ned i ett lag, er det mye enklere enn å flytte ned seks eller syv lag på en gang.
Legg nå til en Trykk på interaksjon til den første treningsøkten, legg deretter til en Flytt animasjon til gruppelaget vi nettopp har opprettet. På animasjonspanelet setter du Basert på verdi til den første treningsøkten og legg til en Flytt til toppen verdien rundt 277pt. Når vi trykker på den første treningsøkten, vil alt annet bevege seg ned på skjermen.
For treningsdetaljer, har jeg bare brukt Fade og flytte animasjoner basert på å trykke på den første treningsøkten.
I begynnelsen, bare visne og flytte i bakgrunnen, deretter grafen og til slutt de spesifikke tallene og detaljene i treningen.
Du bør spille litt her med animasjonens varighet og forsinkelser.
Du er fantastisk! Du har nettopp opprettet din første fullt fungerende, tilpassede animerte Pixate-prototype. Etter å ha fulgt denne opplæringen håper jeg at du er mer trygg på å bruke Pixate for prototyper for mobilprogrammer.
Jeg er nysgjerrig på å høre dine synspunkter på denne opplæringen og gjerne stille spørsmål i kommentarene, jeg vil være her for å hjelpe og svare på dem.
Accentsconagua