Share
Framer.js en het bijbehorende ecosysteem Framer Studio zijn geweldige hulpmiddelen voor het samenstellen, presenteren en herhalen van interactieontwerp. In dit bericht zal ik je helpen bij het bouwen van een interactief prototype voor een fictieve iOS-app-productrondleiding met Adobe Photoshop CC 2014 en Framer Studio 1.9.29. We gaan ervan uit dat we een nieuwsfeed-app maken waarin updates van het netwerk van de gebruiker worden weergegeven in een tijdlijn, terwijl de instellingen en aanvullende opties worden weergegeven in een zijbalk.
Speel met het prototype op de demopagina (webkit-gebaseerde browsers - Chrome, Safari, enz. - worden ondersteund).
Maak eerst uw bedrijfsmiddelen in Photoshop. De productrondleiding bestaat uit vier stappen:
Wanneer u met Framer werkt, is het belangrijk op te merken dat alleen gegroepeerde, zichtbare Photoshop-lagen in Framer Studio worden geïmporteerd. Groepeer uw lagen op basis van interactie (dat wil zeggen dat dingen met dezelfde interactie moeten worden gegroepeerd), omdat u items op hun groepsnaam kunt gebruiken wanneer u in Framer werkt. Voor deze productrondleiding heb ik mijn lagen gegroepeerd op basis van hun functie:
Deze lagen zullen later via de code toegankelijk zijn myLayers.doneButton, myLayers.dots, enz.
Importeer vervolgens uw activa van Photoshop in Framer Studio. Uw Photoshop-document moet geopend zijn en worden opgeslagen bij het importeren. Klik op de Importeren knop, en je ziet een dialoogvenster dat er ongeveer zo uitziet:
Framer maakt uw groepen tijdens het importeren af op afbeeldingen en uw items zijn toegankelijk in Framer nadat het importeren is voltooid.
Het is het beste om uw geïmporteerde gegroepeerde objecten in variabelen om te zetten als u eenmaal in Framer hebt geïmporteerd, omdat het het voor u gemakkelijker zal maken om het prototype later te manipuleren als u dat nodig hebt.
U kunt bijvoorbeeld op een later tijdstip een ander Photoshop-bestand gebruiken met groepen met verschillende namen, maar met dezelfde interacties die u al hebt gemaakt. Dit is veel eenvoudiger als u uw interacties rond variabelenamenstellingen structureert, omdat u eenvoudig de verwijzing van de variabele op één regel kunt schakelen en deze in de rest van het document kunt laten weerspiegelen:
# Dit importeert alle lagen voor "tour" naar tourLayers ly = Framer.Importer.load "geïmporteerd / tour" ## ------------------- VARIABELEN ---- ----------------- welcome = ly.welcome dots = ly.dots moveDot = ly.movingDot done = ly.doneButton login = ly.login logo = ly.logo news = ly .newsFeed siderbar = ly.siderbar gradient = ly.gradient background = ly.background feedDescription. ly.feedDescription
Nu we enkele troeven hebben om mee te werken, kunt u beginnen met het creëren van de interacties die uw prototype tot leven zullen brengen.
Als u over items beschikt met verschillende interacties binnen uw compositie, zijn statussen een krachtige manier om uw code te structureren. In dit prototype zullen de vier stappen van de tour elk verschillende items op verschillende manieren gebruiken. Staten zullen ons de flexibiliteit bieden om elk deel van de compositie onafhankelijk te definiëren, waardoor de modulariteit en leesbaarheid van de code toenemen.
Ons nieuwsfeedscherm heeft bijvoorbeeld vier toestanden:
Onze staten zullen deze posities weerspiegelen door anders te bepalen X waarden op basis van waar de nieuwsfeed zich in een bepaald deel van de tour zou moeten bevinden:
news.states.add herkomst: x: 750 getoond: x: news.originX zijbalk: x: 655 verborgen: x; -750
Voor de productrondleiding willen we verschillende delen van de app illustreren nadat een gebruiker naar links heeft geswit om naar het volgende deel van de productrondleiding te gaan. Om dit te doen, schakelt u eerst slepen in de lagen in waar u het wilt toestaan.
Maak een array:
dragLayers = [welkom, verloop, verloop2]
Maak vervolgens een voor lus om door deze array te itereren en versleepbare eigenschappen toe te voegen aan deze lagen:
voor slepen in dragLayers # Slepen inschakelen drag.draggable.enabled = true drag.draggable.speedY = 0 # Voorkomen dat slepen van links naar rechts drag.draggable.maxDragFrame = drag.frame drag.draggable.maxDragFrame.width * = 2 drag.draggable. maxDragFrame.x = drag.x-drag.width
Accentsconagua
enabled = true staat toe dat de laag wordt gesleeptspeedY = 0 deactiveert het slepen langs de Y-asmaxDragFrame = drag.frame Hiermee stelt u het frame in waarbinnen u kunt slepen om in de laag zelf te blijvenmaxDragFrame.x = drag.x-drag.width staat toe dat het frame negatief langs de x-as wordt gesleept (dat wil zeggen van rechts naar links)Nadat u het slepen op de gewenste lagen hebt ingeschakeld, target u de lagen en wijzigt u de status van uw items wanneer ze in een bepaalde mate worden versleept.
welcome.on Events.DragEnd, -> als welcome.screenFrame.x < -150
Wanneer de gebruiker klaar is met slepen Welkom laag, als ze het meer dan 150 pixels naar links hebben gesleept (screenFrame.x < -150), wijzig vervolgens de status van het prototype in de status van de nieuwsfeed:
welcome.on EventsDragEnd, -> if welcome.screenframe.x < -150 welcome.states.switch "hidden" news.states.switch "shown" moveDot.states.switch "second" gradient.states.switch "shown"
De toestanden van andere elementen zullen dienovereenkomstig moeten veranderen (verberg de welkomststatus, verplaats de stip onderaan om stap 2 van de tour weer te geven, enz.). Vervolgens herhalen we voor de andere sleepbare lagen (verloop, verloop2) en veranderen de toestanden dienovereenkomstig. Op deze manier blijven we een volledig uitgewerkt prototype creëren voor onze productrondleiding.
Het animeren van de individuele statusupdates in de nieuwsfeed in plaats van de hele groep geeft het prototype een slanker gevoel, zoals aangetoond in het (zeer kleine) geanimeerde gif hieronder:
Maak eerst een array met de lagen die u wilt animeren:
newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]
Maak vervolgens een functie om elke laag naar het gewenste te animeren X locatie, het toevoegen van een vertraging van 0.1 tussen elke animatie:
newsCurve = 'lente (50, 30, 30)' newsAnimation = -> voor i in [0 ... newsLayers.length-1] newsLayers [i] .animatievertraging: i * 0.1 properties: x: 0 curve: newsCurve
Als u bepaalde interacties op verschillende plaatsen in uw prototype gaat hergebruiken, overweeg dan om functies te maken zodat u ze later opnieuw kunt gebruiken. Dus in plaats van je animatie meerdere keren te schrijven, schrijf het een keer en hergebruik het waar nodig. Maak een animatie die opnieuw kan worden gebruikt met een methode zoals:
Laag :: fadeOut = -> this.animate eigenschappen: opacity: 0 curve: 'ease-in-out' tijd: 0.5
Daarna kunt u elke laag "fadeOut" door te bellen naar: myLayer.fadeOut ()
Framer is een geweldig hulpmiddel om snel moderne, zijdeachtige, zeer interactieve prototypen te maken. Door het op te nemen in uw workflow - door uw lay-outs te maken in Photoshop (of Sketch) en vervolgens te manipuleren via Framer - kunt u veel sneller robuuste prototypen maken.
U zult ook in staat zijn om uw ontwerpen aan te passen in uw visuele lay-outtool en vervolgens direct in Framer importeren, waardoor een efficiëntere iteratie mogelijk wordt naarmate de ontwikkeling vordert. Als u uw document correct hebt ingesteld met variabelen, zijn uw interacties van toepassing op de nieuw geïmporteerde items, waardoor een snelle iteratie mogelijk is bij interactie en visuele ontwerpideeën. Als u een statisch interactieontwerp zou leveren, zou u meerdere statische composities moeten bijwerken met nieuwe visuele elementen. Met deze workflow maakt u echter een wijziging in één enkel bovenliggend document, importeert u opnieuw naar Framer en voila!
Blijf op de hoogte voor meer tutorials over prototyping. Ook kunt u hieronder reageren en ik zal zo snel mogelijk contact met u opnemen. Happy prototyping!
