Share
Framer.js og tilhørende økosystem Framer Studio er gode verktøy for å komponere, presentere og iterere på interaksjonsdesign. I dette innlegget går jeg gjennom konstruksjon av en interaktiv prototype for en fiktiv iOS Apps produkttur med Adobe Photoshop CC 2014 og Framer Studio 1.9.29. Vi antar at vi lager en nyhetsfeed-app, der oppdateringer fra brukerens nettverk vises i en tidslinje, mens innstillinger og tilleggsalternativer vises i en sidebjelke.
Spill med prototypen på demoversiden (webkitbaserte nettlesere - Chrome, Safari, etc - støttes).
Først opprett dine eiendeler i Photoshop. Produktturen består av fire trinn:
Når du arbeider med Framer, er det viktig å merke seg at bare grupperte, synlige Photoshop-lag blir importert til Framer Studio. Grupper lagene dine ved samhandling (dvs. ting som har samme samspill skal grupperes sammen), siden du får tilgang til ting etter gruppens navn når du jobber i Framer. For denne produktturen har jeg gruppert lagene mine etter deres funksjon:
Disse lagene vil være tilgjengelige i koden senere via myLayers.doneButton, myLayers.dots, etc.
Deretter importerer du dine eiendeler fra Photoshop til Framer Studio. Ditt Photoshop-dokument må være åpent og lagret når du foretar en import. Klikk på Importere knappen, og du vil se en dialog som ser noe ut som dette:
Framer vil flate gruppene dine til bilder ved import, og dine eiendeler vil være tilgjengelige i Framer etter at importen er fullført.
Det er best å endre dine importerte grupperte objekter i variabler når du har importert til Framer, da det vil gjøre det lettere for deg å manipulere prototypen senere hvis du trenger det.
For eksempel kan du på en senere dato bruke en annen Photoshop-fil med forskjellige navngitte grupper, men med de samme samspillene du allerede har opprettet. Dette vil bli mye lettere hvis du strukturerer interaksjonene dine rundt variable navn, da du bare kan bytte variabelenes referanse på en linje og få den reflektert gjennom resten av dokumentet:
# Dette importerer alle lagene for "tur" til turLayers ly = Framer.Importer.load "importert / tur" ## ------------------- VARIABLES ---- ----------------- velkommen = ly.welcome dots = ly.dots moveDot = ly.movingDot ferdig = ly.doneButton login = ly.login logo = ly.logo news = ly .newsFeed siderbar = ly.siderbar gradient = ly.gradient background = ly.background feedDescription. ly.feedDescription
Nå som vi har noen eiendeler å jobbe med, kan du begynne å skape samspillet som vil bringe prototypen til livs.
Hvis du har eiendeler som vil ha forskjellige samspill i samlingen din, er stater en kraftig måte å strukturere koden på. I denne prototypen vil de fire trinnene i turen hver bruke forskjellige eiendeler på forskjellige måter. Stater vil tillate oss fleksibiliteten til å definere hvert stykke av sammensetningen uavhengig, og øke kodens modularitet og lesbarhet.
For eksempel vil vår nyhetsmatingsskjerm ha fire stater:
Våre stater vil reflektere disse stillingene ved å sette forskjellige x verdier basert på hvor nyhetsmate skal være i en gitt del av turen:
news.states.add opprinnelse: x: 750 vist: x: news.originX sidebar: x: 655 skjult: x; -750
For produktturen, vil vi illustrere forskjellige områder av appen etter at en bruker har swiped igjen for å komme til neste del av produktturen. For å gjøre dette, må du først aktivere å trekke på lagene der du vil tillate det.
Lag en matrise:
dragLayers = [velkomst, gradient, gradient2]
Deretter oppretter du en til sløyfe for å iterere gjennom denne gruppen, og legger til trekkbare egenskaper til disse lagene:
for dra i dragLayers # Aktiver dra dra.draggable.enabled = true drag.draggable.speedY = 0 # Forhindre å dra venstre til høyre dra.draggable.maxDragFrame = drag.frame drag.draggable.maxDragFrame.width * = 2 drag.draggable. maxDragFrame.x = drag.x-drag.width
Accentsconagua
aktivert = sant lar laget bli trukketspeedY = 0 deaktiverer å dra langs Y-aksenmaxDragFrame = drag.frame setter rammen der en kan dra for å ligge innenfor laget selvmaxDragFrame.x = drag.x-drag.width lar rammen bli trukket langs x-aksen negativt (dvs. høyre til venstre)Etter at du har slått på lagene du ønsker, må du målrette lagene og endre statusene dine når de trekkes i en viss grad.
welcome.on Events.DragEnd, -> hvis welcome.screenFrame.x < -150
Når brukeren er ferdig med å dra Velkommen lag, hvis de har trukket den utover 150 piksler til venstre (screenFrame.x < -150), endrer deretter prototypens tilstander til nyhetsmatstatusen:
welcome.on EventsDragEnd, -> hvis velkommen.screenframe.x < -150 welcome.states.switch "hidden" news.states.switch "shown" moveDot.states.switch "second" gradient.states.switch "shown"
Statene til andre elementer må endres tilsvarende (skjul velkomsttilstanden, flytt prikken nederst for å gjenspeile trinn 2 i turen, etc.). Deretter gjentar vi for de andre trekkbare lagene (gradient, gradient2) og endrer tilstandene tilsvarende. Fortsatt på denne måten kan vi skape en fullverdig prototype for vår produkttur.
Ved å animere de enkelte statusoppdateringene i nyhetsflaten i stedet for hele gruppen, får prototypen en slankere følelse, som vist i det (veldig små) animerte gifet nedenfor:
Først opprett en rekke lagene du vil animere:
newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]
Deretter oppretter du en funksjon for å animere hvert lag til ønsket x plassering, legger til en forsinkelse på 0.1 mellom hver animasjon:
newsCurve = 'våren (50, 30, 30)' newsAnimation = -> for jeg i [0 ... newsLayers.length-1] newsLayers [i] .animate delay: i * 0,1 egenskaper: x: 0 kurve: newsCurve
Hvis du skal bruke visse samspill på forskjellige steder i hele prototypen, bør du vurdere å skape funksjoner slik at du kan bruke dem senere. Så i stedet for å skrive animasjonen flere ganger, skriv den en gang og bruk den om nødvendig. Lag en animasjon som kan brukes på nytt ved hjelp av en metode som:
Layer :: fadeOut = -> this.animate egenskaper: opacity: 0 kurve: 'easy-in-out' tid: 0.5
Deretter kan du "fadeOut" noe lag ved å ringe: myLayer.fadeOut ()
Framer er et godt verktøy for å lage moderne, silkeaktig, høyt interaktive prototyper raskt. Inkluderer den i arbeidsflyten din - oppretter layoutene dine i Photoshop (eller Sketch), og deretter manipulerer via Framer - lar deg lage raske prototyper mye raskere.
Du vil også kunne endre designene dine i ditt visuelle layoutverktøy og deretter importere direkte til Framer, slik at det blir mer effektiv iterasjon ettersom utviklingen utvikler seg. Hvis du har satt opp dokumentet ditt riktig med variabler, vil samhandlingene dine gjelde for de nylig importerte eiendelene, noe som muliggjør rask iterering ved samhandling og visuelle designideer. Hvis du skulle levere statisk interaksjonsdesign, må du oppdatere flere statiske komposisjoner med nye visuelle elementer. Ved å bruke denne arbeidsflyten, gjør du bare en endring i et enkeltstående dokument, reimport til Framer og Voila!
Hold deg oppdatert for flere opplæringsprogrammer på prototyping. Du er også velkommen til å kommentere under, og jeg kommer tilbake til deg så snart som mulig. Glad prototyping!
