Del II: Stora prototypguiden

Anders Thid

Detta är den andra delen i vår prototypguide. Denna gång har vi tagit en koll bland Animationsverktygen.

I veckan publicerade jag den första delen i vår prototypguide. Då med tre stycken hotspotverkytyg.

I denna post kommer jag att titta närmare på två verktyg för states och animationer, alltså de som stödjer individuella UI-komponenter och states, där du kan animera komponenterna inom en vy utifrån hur en användare klickar runt. Dessa är användbara för att visa på en viss animation eller en känsla då du bygger ett specialanpassat gränsnitt. Eller så vill du ha en mer verklig upplevelse än det som hotspotverktygen kan ge med sina hela skärmar. 

Här kommer mina två tips:

Pixate

 Pixate är något mer komplext än hotspotverktygen och stödjer egentligen bara en skärm där man kan animera in och ut bilder ur skärmen. Du kan rita färgade fyrkanter i verktyget eller ladda upp dina egna komponenter (bilder som du ritat i annat verktyg) för att bygga upp ett gränssnitt. 

Du kan gruppera komponenter och bygga hierarkier. Genom olika events (touch, swipe, etc) kan man animera in och ut komponenter, eller grupper av dem på din skärm. Så det är mer ett verktyg för att bygga en mindre prototyp med riktigt bra animationer och rörliga objekt än att bygga en stor komplex navigationshierarki i. Det går att bygga med flera skärmar, vilket de visar i sin hjälpvideo, men det blir lite krystat om du ska bygga en prototyp med 30 olika skärmar.

Pixate har väldigt många videos på sin hemsida för att komma igång, vilket är trevligt och gör det hela lättare att komma igång med.

Proto.io

 Proto.io är mer komplext än Pixate, men inte på ett dåligt sätt. I vissa fall kan det faktiskt kännas enklare, och mer likt hotspotverktyen, och det har enormt mycket potential under huven. 

Den största skillnaden är att det stödjer skärmar och du kan precis som med hotspotverktygen länka ihop skärmar via klick eller tap. Så rent generellt skulle det kunna vara ett alternativ till Flinto, POP eller invision om du laddar upp hela skärmar till det och lägger ut hotspots. Men eftersom det inte primärt är byggt för hotspots och helskärmar blir det lite trixigare att jobba med gentemot de rena hotspotverktygen.

Proto.io är snabbjobbat, framförallt eftersom de har enorma bibliotek med UI-komponenter (Android, iOS och Windows phone). Du kommer snabbt igång och kan bygga upp ett gränsnitt. Vill du, kan du bygga egna bibliotek ifrån egna bilder. 

När det kommer till triggers kan du göra det mesta du kan tänka dig såsom tap, swipe, flick, läsa av när ett finger trycks ner eller släpps upp, ställa in tider som du vill att en longpush skall vara, etc. Du kan dessutom reagera på gyrot i telefonen. Events som kan utföras är också en lång lista, såsom animera och flytta saker, köra javascript, spela ljud, spara variabler och till och med skicka sms.

Det finns dessutom en timeline, där du kan göra keyframe animations, och du kan ha flera states på en vy som du kan animera i mellan.

Nästa vecka puliceras den sista delen i denna blogg-serie. Då kommer jag att lista tre kodverktyg.

Lämna en kommentar