Share
Framer.js și ecosistemul său asociat Framer Studio sunt instrumente excelente pentru compunerea, prezentarea și iterarea după designul interacțiunii. În acest post, vă voi conduce prin construirea unui prototip interactiv pentru un produs fiabil al iOS App's Tour folosind Adobe Photoshop CC 2014 și Framer Studio 1.9.29. Vom presupune că creăm o aplicație pentru fluxuri de știri, în care sunt afișate actualizări din rețeaua utilizatorului într-o cronologie, în timp ce setările și opțiunile suplimentare sunt afișate într-o bară laterală.
Redă-te cu prototipul de pe pagina demo (browsere webkit-Chrome, Safari etc.).
Mai întâi, creați-vă activele în Photoshop. Turul produselor va consta din patru etape:
Când lucrați cu Framer, este important să rețineți că numai straturile grupate, vizibile Photoshop vor fi importate în Framer Studio. Grupează straturile după interacțiune (adică lucrurile care au aceeași interacțiune ar trebui grupate împreună), pe măsură ce veți accesa lucrurile după numele grupului atunci când lucrați la Framer. Pentru acest tur de produs, mi-am grupat straturile după funcția lor:
Aceste straturi vor fi accesibile ulterior în cod prin myLayers.doneButton, myLayers.dots, etc.
Apoi, importați activele dvs. din Photoshop în Studio Framer. Documentul Photoshop trebuie să fie deschis și salvat când efectuați o importă. Apasă pe Import buton, și veți vedea un dialog care arată astfel:
Framer vă va alinia grupurile în imagini atunci când le importați și activele dvs. vor fi accesibile în Framer după finalizarea importului.
Este cea mai bună practică să transformați obiectele grupate importate în variabile odată ce le-ați importat în Framer, deoarece vă va ușura mai ușor manipularea prototipului mai târziu dacă aveți nevoie.
De exemplu, la o dată ulterioară, poate doriți să utilizați un fișier Photoshop diferit cu grupuri diferite, dar cu aceleași interacțiuni pe care le-ați creat deja. Acest lucru va fi mult mai ușor dacă structurați interacțiunile în jurul numelor de variabile, deoarece puteți pur și simplu să comutați referința variabilei pe o singură linie și să o reflectați în tot restul documentului:
# Aceasta importă toate straturile pentru "tur" în turLayers ly = Framer.Importer.load "import / tour" ## ------------------- VARIABILE ---- ----------------- bun venit = ly.welcome dots = ly.dots moveDot = ly.movingDot terminat = ly.doneButton login = ly.login logo = ly.logo news = ly .newsFeed siderbar = ly.siderbar gradient = ly.gradient fundal = ly.background feedDescription. ly.feedDescription
Acum, când avem anumite lucruri cu care să lucrăm, puteți începe să creați interacțiunile care vă vor aduce la viață prototipul.
Dacă aveți active care vor avea interacțiuni diferite în cadrul compoziției dvs., statele reprezintă o modalitate puternică de a vă structura codul. În acest prototip, cei patru pași ai turului vor utiliza fiecare diferite active în moduri diferite. Statele vor permite flexibilitatea de a defini fiecare piesă a compoziției în mod independent, mărind modularitatea și lizibilitatea codului.
De exemplu, ecranul feed-urilor noastre de știri va avea patru stări:
Stările noastre vor reflecta aceste poziții prin stabilirea unor situații diferite X valori bazate pe locul în care hrana pentru știri ar trebui să se afle într-o anumită parte a turului:
news.states.add origine: x: 750 afișat: x: news.originX bara laterală: x: 655 ascunsă: x; -750
Pentru turul de produse, dorim să ilustrăm diferite zone ale aplicației după ce un utilizator le-a scos din stânga pentru a ajunge la următoarea parte a turului produsului. Pentru a face acest lucru, activați întâi tragerea pe straturile în care doriți să le permiteți.
Creați o matrice:
dragLayers = [bun venit, gradient, gradient2]
Apoi creați o pentru buclă pentru a itera prin această matrice, adăugând proprietăți draggable la aceste straturi:
pentru a trage în dragLayers # Activați tragerea drag.draggable.enabled = true drag.draggable.speedY = 0 # Preveniți să trageți din stânga spre dreapta drag.draggable.maxDragFrame = drag.frame drag.draggable.maxDragFrame.width * = 2 drag.draggable. maxDragFrame.x = drag.x-drag.width
Accentsconagua
activat = adevărat permite ca stratul să fie trasviteza = 0 dezactivează tragerea de-a lungul axei YmaxDragFrame = drag.frame stabilește cadrul în care se poate trage să rămână în interiorul stratului propriu-zismaxDragFrame.x = drag.x-drag.width permite ca cadrul să fie târât de-a lungul axei x negativ (adică de la dreapta la stânga)După ce permiteți tragerea pe straturile pe care le doriți, direcționați straturile și schimbați stările materialelor atunci când acestea sunt trase într-o anumită măsură.
welcome.on Events.DragEnd, -> if welcome.screenFrame.x < -150
Când utilizatorul a terminat să gliseze Bine ati venit strat, dacă l-au târât peste 150 de pixeli spre stânga (screenFrame.x < -150), apoi modificați stările prototipului la starea alimentării cu știri:
welcome.on EvenimenteDragEnd, -> if welcome.screenframe.x < -150 welcome.states.switch "hidden" news.states.switch "shown" moveDot.states.switch "second" gradient.states.switch "shown"
Stările altor elemente vor trebui să se schimbe în consecință (ascundeți starea de bun venit, mutați punctul din partea de jos pentru a reflecta pasul 2 al turului etc.). Apoi vom repeta pentru celelalte straturi draggable (gradient, gradient2) și vom schimba stările în consecință. Continuând în acest mod, putem crea un prototip pe deplin dezvoltat pentru turul nostru de produse.
Animarea actualizărilor de stare individuale în News Feed, mai degrabă decât întregul grup, va conferi prototipului o senzație mai subțire, așa cum este demonstrat în giful animat (foarte mic) de mai jos:
Mai întâi, creați o serie de straturi pe care doriți să le animați:
newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]
Apoi, creați o funcție pentru animarea fiecărui strat la cel dorit X locație, adăugând o întârziere de 0.1 între fiecare animație:
NewsCurve = 'primăvara (50, 30, 30)' newsAnimation = - pentru i în [0 ... newsLayers.length-1] newsLayers [i] .inimate delay: i * 0.1 properties: x: 0 curve:
Dacă intenționați să re-utilizați anumite interacțiuni în diferite locuri din întregul prototip, vă recomandăm să creați funcții astfel încât să le puteți reutiliza mai târziu. Deci, mai degrabă decât să scrieți animația de mai multe ori, scrieți-o o dată și reutilizați-o acolo unde este necesar. Creați o animație care poate fi reutilizată utilizând o metodă, cum ar fi:
Layer :: fadeOut = -> this.animate proprietăți: opacitate: 0 curbă: timp de "ușurință în afara": 0.5
Apoi, după aceea, puteți "fadeOut" orice strat apelând: myLayer.fadeOut ()
Framer este un instrument excelent pentru crearea rapidă a prototipurilor moderne, matasoase și extrem de interactive. Încadrarea în fluxul de lucru - crearea layout-urilor în Photoshop (sau Sketch), apoi manipularea prin intermediul Framer - vă va permite să creați prototipuri robuste mult mai repede.
Veți putea, de asemenea, să modificați desenele dvs. în instrumentul dvs. de vizualizare și apoi să le importați direct în Framer, permițând o repetare mai eficientă pe măsură ce evoluția progresează. Dacă ați configurat corect documentul cu variabile, atunci interacțiunile se vor aplica la activele nou importate, permițând repetarea rapidă a interacțiunii și a ideilor de design vizual. Dacă doriți să furnizați design interactiv static, va trebui să actualizați mai multe componente statice cu noi elemente vizuale. Folosind acest flux de lucru, totuși, faceți o modificare într-un singur document părinte, reimportați la Framer și voila!
Rămâi acordat pentru mai multe tutoriale despre prototipuri. De asemenea, nu ezitați să comentați mai jos și vă voi întoarce cât mai curând posibil. Prostipii fericiti!
