Share
Framer.js e il suo ecosistema che accompagna Framer Studio sono ottimi strumenti per comporre, presentare e iterare sul design dell'interazione. In questo post, ti guiderò nella costruzione di un prototipo interattivo per un tour prodotto fittizio per le app iOS utilizzando Adobe Photoshop CC 2014 e Framer Studio 1.9.29. Supponiamo che stiamo creando un'app di news feed, in cui gli aggiornamenti della rete dell'utente vengono visualizzati in una timeline, mentre le impostazioni e le opzioni aggiuntive sono visualizzate in una barra laterale.
Gioca con il prototipo sulla pagina demo (i browser basati su webkit, Chrome, Safari, ecc. Sono supportati).
Innanzitutto, crea le tue risorse in Photoshop. Il tour del prodotto consisterà in quattro passaggi:
Quando si lavora con Framer, è importante notare che solo i livelli Photoshop raggruppati e visibili verranno importati in Framer Studio. Raggruppa i tuoi livelli per interazione (ad esempio, le cose che hanno la stessa interazione dovrebbero essere raggruppate insieme), dato che potrai accedere alle cose in base al loro nome di gruppo quando lavori in Framer. Per questo tour del prodotto, ho raggruppato i miei livelli in base alla loro funzione:
Questi livelli saranno accessibili nel codice in seguito tramite myLayers.doneButton, myLayers.dots, eccetera.
Successivamente, importa le tue risorse da Photoshop a Framer Studio. Il documento Photoshop deve essere aperto e salvato durante l'importazione. Clicca il Importare pulsante, e vedrai una finestra di dialogo simile a questa:
Framer appiattirà i tuoi gruppi in immagini durante l'importazione e le tue risorse saranno accessibili in Framer al termine dell'importazione.
È consigliabile trasformare gli oggetti raggruppati importati in variabili dopo averli importati in Framer, in quanto renderà più semplice la manipolazione del prototipo in un secondo momento, se necessario.
Ad esempio, in un secondo momento, potresti voler utilizzare un file Photoshop diverso con gruppi con nomi diversi, ma con le stesse interazioni che hai già creato. Ciò sarà molto più semplice se si strutturano le interazioni attorno ai nomi di variabili, poiché è sufficiente commutare il riferimento della variabile su una riga e farlo riflettere su tutto il resto del documento:
# Questo importa tutti i layer per "tour" in tourLayers ly = Framer.Importer.load "importati / tour" ## ------------------- VARIABILI ---- ----------------- welcome = ly.welcome punti = 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
Ora che abbiamo alcune risorse su cui lavorare, puoi iniziare a creare le interazioni che daranno vita al tuo prototipo.
Se disponi di risorse con interazioni diverse all'interno della composizione, gli stati rappresentano un modo efficace per strutturare il codice. In questo prototipo, i quattro passaggi del tour utilizzeranno diversi asset in modi diversi. Gli Stati ci permetteranno la flessibilità di definire ogni parte della composizione in modo indipendente, aumentando la modularità e la leggibilità del codice.
Ad esempio, la nostra schermata dei feed di notizie avrà quattro stati:
I nostri stati rifletteranno queste posizioni impostando diversi X valori basati su dove il feed delle notizie dovrebbe essere in una determinata parte del tour:
news.states.add origin: x: 750 mostrato: x: news.originX sidebar: x: 655 hidden: x; -750
Per il tour del prodotto, vogliamo illustrare diverse aree dell'app dopo che un utente ha fatto scorrere verso sinistra per passare alla parte successiva del tour del prodotto. Per fare ciò, abilitare innanzitutto il trascinamento sui livelli in cui si desidera consentire.
Crea un array:
dragLayers = [benvenuto, gradiente, gradiente2]
Quindi creare un per loop per scorrere questa matrice, aggiungendo proprietà trascinabili a questi livelli:
per trascinare in dragLayers # Abilita trascinamento drag.draggable.enabled = true drag.draggable.speedY = 0 # Impedisci il trascinamento da sinistra a destra drag.draggable.maxDragFrame = drag.frame drag.draggable.maxDragFrame.width * = 2 drag.draggable. maxDragFrame.x = drag.x-drag.width
Accentsconagua
abilitato = true consente al livello di essere trascinatospeedY = 0 disabilita il trascinamento lungo l'asse Y.maxDragFrame = drag.frame imposta la cornice entro cui si può trascinare per rimanere all'interno del livello stessomaxDragFrame.x = drag.x-drag.width consente al frame di essere trascinato lungo l'asse x negativamente (cioè da destra a sinistra)Dopo aver abilitato il trascinamento sui livelli desiderati, scegli come target i livelli e modifica gli stati delle risorse quando vengono trascinati di un certo grado.
welcome.on Events.DragEnd, -> if welcome.screenFrame.x < -150
Quando l'utente ha terminato il trascinamento di benvenuto livello, se lo hanno trascinato oltre 150 pixel a sinistra (screenFrame.x < -150), quindi modifica gli stati del prototipo nello stato del feed di notizie:
welcome.on EventsDragEnd, -> se welcome.screenframe.x < -150 welcome.states.switch "hidden" news.states.switch "shown" moveDot.states.switch "second" gradient.states.switch "shown"
Gli stati di altri elementi dovranno cambiare di conseguenza (nascondere lo stato di benvenuto, spostare il punto in basso per riflettere il passaggio 2 del tour, ecc.). Quindi ripetiamo gli altri layer trascinabili (gradiente, gradiente2) e modifichiamo gli stati di conseguenza. Continuando in questo modo, possiamo creare un prototipo completamente aggiornato per il nostro tour di prodotto.
L'animazione dei singoli aggiornamenti di stato nel feed di notizie anziché nell'intero gruppo conferirà al prototipo una sensazione più elegante, come dimostrato nella (molto piccola) gif animata di seguito:
Innanzitutto, crea una matrice dei livelli che desideri animare:
newsLayers = [ly.celeb1, ly.celeb2, ly.celeb3, ly.celeb4, ly.celeb5, ly.celeb6]
Quindi, crea una funzione per animare ciascun livello sul desiderato X posizione, aggiungendo un ritardo di 0.1 tra ogni animazione:
newsCurve = 'spring (50, 30, 30)' newsAnimation = -> per i in [0 ... newsLayers.length-1] newsLayers [i] .un ritardo temporale: i * 0.1 proprietà: x: 0 curva: newsCurve
Se stai riutilizzando determinate interazioni in vari punti del tuo prototipo, considera la creazione di funzioni in modo che tu possa riutilizzarle in seguito. Quindi, piuttosto che scrivere la tua animazione più volte, scriverla una volta e riutilizzarla dove necessario. Crea un'animazione che può essere riutilizzata usando un metodo come:
Layer :: fadeOut = -> this.animate properties: opacity: 0 curve: tempo 'ease-in-out': 0.5
Quindi, in seguito, puoi "dissolvenza" di qualsiasi livello chiamando: myLayer.fadeOut ()
Framer è un ottimo strumento per creare rapidamente prototipi moderni, setosi e altamente interattivi. Incorporandolo nel tuo flusso di lavoro, creare i tuoi layout in Photoshop (o Sketch), quindi manipolarlo tramite Framer, ti permetterà di creare prototipi robusti molto più rapidamente.
Sarai anche in grado di modificare i tuoi disegni nel tuo strumento di layout visivo e poi importarli direttamente in Framer, consentendo una iterazione più efficiente man mano che lo sviluppo avanza. Se hai impostato correttamente il tuo documento con variabili, le tue interazioni verranno applicate alle risorse appena importate, consentendo una rapida iterazione su interazione e idee di progettazione visiva. Se dovessi fornire un design di interazione statica, dovresti aggiornare più composizioni statiche con nuovi elementi visivi. Utilizzando questo flusso di lavoro, tuttavia, è sufficiente apportare una modifica a un documento genitore singolo, reimportarlo in Framer e voilà!
Resta sintonizzato per ulteriori tutorial sulla prototipazione. Inoltre, sentiti libero di commentare qui sotto, e ti ricontatterei il prima possibile. Felice prototipazione!
