Share
I denna handledning lär jag dig hur man skapar en animerad prototyp av din mobilapplikationsdesign. Prototypen ser ut som en riktig applikation på din telefon; Du kommer att kunna navigera och bläddra genom din design, med hjälp av gester och anpassade animeringar.
I slutet av denna handledning kommer du att kunna skapa en animerad prototypversion av vilken applikationsdesign som helst med Pixate. Låt oss börja!
För denna handledning behöver du tre saker att följa med:
Enligt min åsikt är Pixate det bästa verktyget tillgängligt för designers att skapa helt funktionella, anpassade animerade prototyper för mobilapplikationer, utan att skriva en enda kodrad.
Till skillnad från andra prototypverktyg, som Flinto eller Marvel, Pixate, kan du separera lager och integrera interaktioner, till exempel Dra, Knacka, Dubbelklicka, Rulla, Nypa och mer.
Prototypen själv finns på webben. Under denna handledning kommer vi att använda webbversionen av Pixate, men vi kommer att få slutresultatet till en inbyggd applikation på vår telefon, vilket ger en bra fluidupplevelse.
Innan vi kan börja skapa vår första prototyp måste vi installera ett nytt projekt i Pixate.
När du har loggat in på ditt konto klickar du på Nytt projekt knappen och välj sedan Ny prototyp alternativ.
Här kan vi välja vilken typ av enhet vi designar för. I det här fallet, låt oss välja iPhone 6, eftersom vi utformade fitnessprogrammet för den specifika enheten i Sketch.
Notera: vi kan också välja smartwatch skärmstorlekar som Apple Watch, LG G Watch eller Moto 360.
Pixate tillåter oss att animera varje enskilt objekt i vår prototyp, baserat på olika händelser och interaktioner, som skärmbildningen, knackar, dubbelklickar eller rullar. Detta innebär också att vi måste exportera de delar vi vill animera i vår prototyp separat.
Låt oss öppna vår Sketch-fil och börja exportera varje element en efter en. Om du tittar på den slutliga prototypen kan du se att när det gäller "GO-skärmen" exporterade jag separat navigeringsfältet, flikfältet, varje kolumn i väderprognosen och målcirklarna.
Du ska exportera i PNG, eftersom det är nyckeln till att ha transparenta lager.
Tips: alltid fokusera på en skärm i taget. Vid denna punkt i processen ska du bara exportera lagren på "GO-skärmen", så det blir enklare att arbeta med och ändra saker på gång om det behövs.
Importera tillgångar i Pixate är en fråga om att dra och släppa de exporterade PNG-filerna i webbläsarfönstret:
Nu är det dags att bygga om vår skärm i Pixate. Detta arbete kan göras mycket snabbare om vi hänvisar till Inspektionspanel både i Pixate och Sketch. När så är fallet måste vi bara kopiera och klistra in X- och Y-värdet för varje element.
Notera: kom ihåg att vår Sketch-design gjordes i @ 2x upplösning, medan vi arbetar i Pixate med @ 1x upplösning. Det betyder att vi måste dela upp varje nummer från Sketch by 2 innan vi ansöker om Pixate.
Låt oss öppna Pixate-applikationen på vår iPhone, där vi kan se att vår design har börjat komma ihop. Från och med nu, när vi ändrar något på webbapplikationen, kommer det automatiskt att synkroniseras till våra telefoner.
Efter att ha valt den första kolumnen i väderprognosen kan vi se vilka typer av animeringar som finns på vänster sida i vår webbläsare. Låt oss dra och släppa Fade animation till den andra sidan, den högra sidofältet.
Nu måste vi ange när vi vill att den här animationen ska visas. Ställ in Baserat på värden till * SKÄRM *, laddad.
Det betyder att vår animation spelas direkt efter att den första skärmen är laddad, vilket händer omedelbart när vi kör prototypen.
Eftersom vårt mål är att få en blek effekt, låt oss ställa in den ursprungliga opaciteten till 0% på Egenskaper panel, och till 100% på Animationspanel.
I botten av Animationspanel Vi kan också ställa in lättnadskurvan, varaktigheten och fördröjningsvärdena.
Du bör ställa in varaktigheten mellan 0.2-0.4s, men det finns ingen officiell vägen här, så jag uppmuntrar dig att leka med dessa värden tills du känner att de bara är rätt.
Notera: I min prototyp föredrog jag att använda lite långsammare animationer, så att du kan se dem tydligare. I ett verkligt projekt skulle jag rekommendera snabbare och mer subtil rörelse.
Låt oss nu välja den andra kolumnen i väderprognosen och ställa exakt samma Fade animation som vi gjorde tidigare, med endast en skillnad: den här gången satte animationsfördröjning att vara omkring 0.1-0.3s. På så sätt spelas animationerna i en sekvens.
Fortsätt med exakt samma metod för alla element som du vill lägga till en Fade-animering till, men glöm inte att ständigt öka värdet på animationsfördröjningen.
Låt oss nu skapa interaktionen mellan cirklarna i målavsnittet. För att kunna horisontellt rulla mellan målringarna måste vi importera dem som tre separata PNG-filer.
Efter att ha placerat dem i rätt läge, låt oss skapa ett nytt lager i Pixate; nödvändigt för att möjliggöra horisontell rullning. På Egenskaper panel se till att du ser utseendet på Ingen bilduppsättning. Innan vi lägger till någon interaktion till det här laget lägger vi till målsignalerna PNG-filer till det nya lagret på Skikten panel. I enkla termer liknar detta Grupp verktyg i skiss.
Nu kan vi lägga till en Dra interaktion till det här nya lagret och uppsättningen Horisontell rullning med minsta position: -255pt och maximalt läge: 120pt på Animationspanel.
För den lilla studsningseffekten under den horisontella rullningen skapade jag en anpassad animering med speciella förhållanden. För att börja, lägg till en Flytta animering till det nyaste lagret, som innehåller alla ringlagren.
Nu, i animationer panelen ställer in Baserat på värde till Målinställningar och Drag Release.
För det första IF-villkor Jag använde följande formel: goal_settings.x> -255 && goal_settings.x < -67, vilket innebär att om positionen för målgruppslaget (lag ID: goal_settings) är högre än -255 pt och mindre än -67 pt, det kommer att flytta lagrets vänstra sida till -67 pt punkt.
För animationen använde jag en Vårlättnadskurva med en friktionsvärde av 25 och spänning av600.
Mitt andra IF-villkor är: goal_settings.x <= -67 && goal_settings.x > -255, flytt sedan vänster sida av skiktet till -255 pt.
Det tredje villkoret är: goal_settings.x> -67 && goal_settings.x < 150, flytt sedan vänster sida av skiktet till 150 pt.
Sist men inte minst är det senaste IF-uttalandet: goal_settings.x < 150 && goal_settings.x > -67, som flyttar vänster sida av skiktet till -67 pt.
Notera: Jag vet att det här ser lite komplicerat för första gången, men jag uppmuntrar dig att kopiera och klistra in min lösning och prova den, ändra sedan något och försök igen. Mina villkor är inte på något sätt perfekta, så du kan till och med förbättra och anpassa dem tills de känner sig rätt för dig.
Som vi gjorde med målringen, låt oss skapa ett annat nytt lager och lägga varje lager vi har hittills in i. Vi grupperar bara lagren på "GO-skärmen" just nu.
Innan vi börjar importera och återuppbygga skärmen "Utmaningar" i Pixate måste vi skapa ett nytt lager som fungerar som grupplagret för varje element på den här skärmen. Låt oss placera detta precis bredvid "GO-skärmen" utan någon stoppning eller klyfta mellan dem.
När vi har importerat och byggt upp vår skärm, skikt för lager, måste vi ställa in vertikal rullning för utmaningarna.
låt oss skapa ett nytt lager utan bildbakgrund och lägg till våra kortlager till den. Vertikal rullning är ännu enklare än horisontell rullning, eftersom det enda vi behöver göra är att lägga till en Rulla interaktion till det här nya lagret.
För att se skärmbilden "Utmaningar" på vår iPhone måste vi gå tillbaka till vår "GO-skärm" och lägga till ett nytt rektangellager överst på Utmaningar-knappen på flikfältet.
Ange utseendet till ingen bildfyllning och lägg till en Tryck på interaktion till det. Låt oss nu gå tillbaka, välj vårt Challenges grupplager, som innehåller varje element på skärmen "Utmaningar" och lägg till en Flytta animering till det.
Det enda som vi måste göra är att ställa in Baserat på händelse till den knapp som vi nyligen lagt till på vår "GO-skärm" med Tryck på interaktion och ställa in Flytta till värde till 0 pt. Sedan när vi trycker på utmaningarna på "GO-skärmen", kommer Challenges gruppskikt att flytta in på rätt plats.
För att animera utmaningskorten använder vi två animationer, en Fade och en Flytta samtidigt. Se till att du har ställt in Baserat på värdet till utmaningarna knappen.
För Fade-animationen använder vi samma teknik som med GO-skärmen, så låt oss ställa in Opacitet till 0% på Egenskaper panel och Bleknar till värdetill 100% på animationer panel. Under den tid som jag använde 0.5s med en 0,2 s fördröjning.
Notera: glöm inte att ständigt öka värdet av förseningen för varje kort.
Vår andra animation är a Flytta animering. Precis som i fallet med Fade animationen, låt oss ställa in Baserat på värdet till Challenges-knappen och använd exakt samma animationstid och fördröjning som vid Fade-animationen. Ställ nu in Flytta till början värde till 10px, som kommer att flytta vårt utmaningskort 10px uppåt när animationen startar.
Sedan i slutet av animationen kommer varje utmaningskort att vara 10px uppåt, vi måste flytta dem 10px nedåt på vårt Pixate-kanfas.
Låt oss skapa ett nytt lager igen, som kommer att innehålla avsnittet Bläddra utmaningar. Som i fallet med avsnittet Mina utmaningar, lägger vi till en Rulla interaktion till det.
För att kunna växla mellan sektionerna Mina utmaningar och Bläddra utmaningar måste vi skapa ett nytt lager högst upp i titeln Bläddra utmaningar, som fungerar som en knapp. Ställ in lagerfyllningen till Ingen bilduppsättning och lägg till en Tryck på interaktion till det.
Om vi går tillbaka till vårt Bläddra utmaningar grupplager (skapat i föregående steg) kan vi lägga till en Fade animation till det baserat på den här nya knappen. Så tills vi trycker på knappen Bläddra utmaningar är opaciteten för avsnittet Bläddra utmaningar 0%, och efter kranen blir det 100%.
Som ett sista steg lade jag till en Skala och bleka animering till tidslinjens progressfält i avsnittet Bläddra utmaningar.
Notera: glöm inte att använda exakt samma animationsvaraktighet och fördröjningsvärden för Fade and Scale-animationerna.
Innan vi börjar animera skärmen "Aktiviteter" måste vi upprepa några steg som utförts vid skärmen "Utmaningar".
Låt oss skapa ett nytt lager intill "Utmaningar-skärmen" utan någon stoppning. Detta lager är grupplagret för elementen på skärmen "Aktiviteter".
Låt oss nu gå tillbaka till vår "GO-skärm" och skapa ett nytt lager överst på sidan verksamhet knappen på flikfältet. Lägg till en Tryck på interaktion till det här nya lagret.
Gå tillbaka till vårt Gruppagalleri och lägg till en Flytta interaktion till det baserat på vår nya knapp.
Lägg nu till en Fade animation till alla resultat på skärmen Aktiviteter med en 0.4s animeringstid och a 0.1s animationsfördröjning mellan resultaten.
Notera: glöm inte att ställa in Baserat på värdet till "Aktiviteter-knappen", som vi placerat på "GO-skärmen".
Skapa ett annat gruppslag och placera varje träningspassession i den, förutom den första. Vi behöver det här för Flytta ner animering, eftersom det bara är enklare att flytta ner ett lager än att flytta ner sex eller sju lager samtidigt.
Lägg nu till en Tryck på interaktion till den första träningspasset, lägg sedan till en Flytta animering till det grupplager vi just har skapat. På animationspanelen ställer du in Baserat på värdet till den första träningspass och lägg till en Flytta till början värdet runt 277pt. När vi knackar på den första träningspasset kommer allt annat att gå ner på skärmen.
För träningsdetaljvy har jag bara använt Blekna och flytta animeringar baserat på att tappa den första träningspasset.
I början, bara blekna och flytta i bakgrunden, sedan grafen och slutligen de specifika siffrorna och detaljerna i träningen.
Du borde spela lite här med animationstiderna och förseningarna.
Du är grym! Du har just skapat din första fullt fungerande anpassade animerade Pixate-prototyp. Efter att ha följt denna handledning hoppas jag att du är mer säker på att använda Pixate för prototyper för mobilapplikationer.
Jag är nyfiken på att höra dina synpunkter på denna handledning och är fritt att ställa några frågor i kommentarerna, jag kommer att vara här för att hjälpa och svara på dem.
Accentsconagua