Share
Framer.js och dess medföljande ekosystem Framer Studio är bra verktyg för att komponera, presentera och iterera interaktionsdesign. I det här inlägget går jag igenom konstruktionen av en interaktiv prototyp för en fiktiv iOS Apps produkttur med hjälp av Adobe Photoshop CC 2014 och Framer Studio 1.9.29. Vi antar att vi skapar en nyhetsflödesapp, där uppdateringar från användarens nätverk visas på en tidslinje, medan inställningar och ytterligare alternativ visas i en sidofält.
Spela med prototypen på demoversidan (webbkitbaserade webbläsare-Chrome, Safari etc-stöds).
Skapa först dina tillgångar i Photoshop. Produktturen består av fyra steg:
När du arbetar med Framer är det viktigt att notera att endast grupperade synliga Photoshop-lager importeras till Framer Studio. Gruppera dina lager genom interaktion (dvs saker som har samma interaktion ska grupperas ihop), eftersom du får tillgång till saker med deras gruppnamn när du arbetar i Framer. För denna produktturné har jag grupperat mina lager genom sin funktion:
Dessa lager kommer att vara tillgängliga i koden senare via myLayers.doneButton, myLayers.dots, etc.
Importera sedan dina tillgångar från Photoshop till Framer Studio. Ditt Photoshop-dokument måste vara öppet och spara när du utför en import. Klicka på Importera knappen, och du kommer att se en dialogruta som ser något ut så här:
Framer kommer att platta dina grupper i bilder när de importeras, och dina tillgångar kommer att vara tillgängliga i Framer efter att importen är klar.
Det är bästa sättet att vända dina importerade grupperade objekt till variabler när du har importerat till Framer, eftersom det kommer att göra det enklare för dig att manipulera prototypen senare om du behöver.
Till exempel kan du vid ett senare tillfälle använda en annan Photoshop-fil med olika namngivna grupper, men med samma interaktioner som du redan har skapat. Det här blir mycket enklare om du strukturerar dina interaktioner runt variabla namn, eftersom du enkelt kan byta variabelns referens på en rad och få den reflekterad över resten av dokumentet:
# Detta importerar alla lager för "turné" till turnéLäsare ly = Framer.Importer.load "imported / tour" ## ------------------- VARIABLES ---- ----------------- välkommen = ly.welcome dots = ly.dots moveDot = ly.movingDot gjort = ly.doneButton login = ly.login logo = ly.logo news = ly .newsFeed siderbar = ly.siderbar gradient = ly.gradient background = ly.background feedDescription. ly.feedDescription
Nu när vi har några tillgångar att arbeta med, kan du börja skapa interaktioner som kommer att föra din prototyp till liv.
Om du har tillgångar som kommer att ha olika interaktioner i din sammansättning är stater ett kraftfullt sätt att strukturera din kod. I denna prototyp använder de fyra stegen i turnén vardera olika tillgångar på olika sätt. Staterna ger oss möjlighet att definiera varje del av kompositionen oberoende, vilket ökar kodens modularitet och läsbarhet.
Till exempel kommer vår nyhetsmatningsskärm att ha fyra tillstånd:
Våra stater kommer att reflektera dessa positioner genom att ange olika x värden baserade på var nyhetsflödet ska vara i en given del av turnén:
news.states.add ursprung: x: 750 visas: x: news.originX sidfält: x: 655 gömd: x; -750
För produktturnén vill vi illustrera olika delar av appen efter att en användare har swiped kvar för att komma till nästa del av produktturen. För att göra det här, aktivera först att dra på lagren där du vill tillåta det.
Skapa en array:
dragLayers = [välkommen, gradient, gradient2]
Skapa sedan en för loop för att iterera genom denna array, lägger till dragbara egenskaper för dessa lager:
för dra i dragLayers # Aktivera dra drag.draggable.enabled = true drag.draggable.speedY = 0 # Förhindra att dra åt vänster mot höger drag.draggable.maxDragFrame = drag.frame drag.draggable.maxDragFrame.width * = 2 drag.draggable. maxDragFrame.x = drag.x-drag.width
Accentsconagua
aktiverad = sant tillåter att skiktet släpasspeedY = 0 inaktiverar att dra längs Y-axelnmaxDragFrame = drag.frame ställer in ramen för vilken man kan dra för att stanna inom själva lagretmaxDragFrame.x = drag.x-drag.width låter ramen ramas längs x-axeln negativt (dvs höger till vänster)Efter att ha möjliggjort att dra på lagren som du önskar, rikta in lagen och ändra dina tillgångars tillstånd när de dras en viss grad.
welcome.on Events.DragEnd, -> om welcome.screenFrame.x < -150
När användaren har slutat dra Välkommen lagret om de har dragit det över 150 pixlar till vänster (screenFrame.x < -150), ändra sedan prototypens tillstånd till nyhetsmatningsstatus:
welcome.on EventsDragEnd, -> om welcome.screenframe.x < -150 welcome.states.switch "hidden" news.states.switch "shown" moveDot.states.switch "second" gradient.states.switch "shown"
Tillstånden till andra element måste ändras i enlighet därmed (göm välkomstläget, flytta pricken längst ner för att återspegla steg 2 i turnén etc.). Sedan upprepar vi för de andra dragerbara skikten (gradient, gradient2) och ändrar tillstånden i enlighet därmed. Fortsatt på detta sätt kan vi skapa en fullständigt fleshed-out prototyp för vår produktturné.
Att animera de enskilda statusuppdateringarna i nyhetsflödet i stället för hela gruppen ger prototypen en snyggare känsla, vilket visas i (mycket litet) animerat gif nedan:
Skapa först en mängd lag som du vill animera:
newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]
Skapa sedan en funktion för att animera varje lager till önskat x plats, lägger till en fördröjning av 0,1 mellan varje animering:
newsCurve = 'våren (50, 30, 30)' newsAnimation = -> för jag i [0 ... newsLayers.length-1] newsLayers [i] .animate fördröjning: i * 0,1 egenskaper: x: 0 kurva: newsCurve
Om du ska återanvända vissa interaktioner på olika ställen i hela din prototyp, överväg att skapa funktioner så att du kan använda dem senare. Så snarare än att skriva din animering flera gånger, skriv den en gång och använd den om nödvändigt igen. Skapa en animering som kan återanvändas med hjälp av en metod som:
Layer :: fadeOut = -> this.animate egenskaper: opacity: 0 curve: 'ease-in-out' tid: 0.5
Därefter kan du "fadeOut" något lager genom att ringa: myLayer.fadeOut ()
Framer är ett bra verktyg för att snabbt skapa en modern, silkeslen, mycket interaktiv prototyper. Genom att integrera det i ditt arbetsflöde - skapa dina layouter i Photoshop (eller skiss), sedan manipulera via Framer-kan du skapa robusta prototyper mycket snabbare.
Du kommer också att kunna ändra dina mönster i ditt visuella layoutverktyg och sedan importera direkt till Framer, vilket möjliggör effektivare iteration som utvecklingen fortskrider. Om du har konfigurerat ditt dokument korrekt med variabler, gäller dina interaktioner för de nyligen importerade tillgångarna, vilket möjliggör snabb iterering vid interaktion och visuella designidéer. Om du skulle leverera statisk interaktionsdesign, skulle du behöva uppdatera flera statiska comps med nya visuella element. Med hjälp av detta arbetsflöde ändrar du bara en enda förälderdokument, importerar till Framer och voila!
Håll dig uppdaterad för fler handledningar om prototyper. Också, gärna kommentera nedan, och jag kommer tillbaka till dig så snart som möjligt. Lycklig prototypning!
