Tutorial Framer: 7 semplici microinterazioni per migliorare i tuoi prototipi

Benvenuti alla seconda puntata della nostra serie di tutorial Framer. Nell'ultimo articolo, abbiamo appreso le basi dell'utilizzo di Framer in modalità Progettazione, nonché come scrivere del codice semplice per dare vita ai nostri progetti. In questo pezzo, ci concentreremo sull'utilizzo di Framer per creare microinterazioni e transizioni animate. Illustreremo come creare sette interazioni utili per i tuoi prototipi.

Perché dovresti creare un prototipo di piccole interazioni?

Il movimento fluido, i cambiamenti di stato e le transizioni sottili aiutano l'utente a capire come utilizzare l'interfaccia fornendo un feedback su determinate azioni. Spesso, queste transizioni riecheggiano analoghi del mondo reale (come lo scorrimento di un controllo interruttore) o utilizzano schemi di interazione del dispositivo comuni (come toccare per espandere). In questo tutorial, ci concentreremo sulle interazioni che aggiungono un tocco finale all'interfaccia per guidare la comprensione e suscitare gioia nell'utente.

Dai un'occhiata agli esempi qui sotto. I designer di tutto il mondo stanno creando queste microinterazioni in vari prodotti.

I 7 prototipi

In questo tutorial, ti fornirò una panoramica di ogni microinterazione e alcuni frammenti di codice. Utilizzeremo diverse tecniche diverse, quindi potrai scegliere quella più adatta al tuo prodotto. Non esiste un modo "giusto" per creare qualcosa all'interno di Framer Studio: come ho detto nel mio articolo precedente, Framer ti dà molta libertà di creare come desideri.

Hai mai visto interazioni come queste prima? Certo, ce l'hai! Li vedi tutti i giorni sul tuo smartphone. È tempo di crearne uno tuo.

1. Pulsante di azione

Il pulsante di azione rappresenta spesso l'azione principale della schermata corrente. A volte contiene diverse azioni all'interno. Creeremo un'interazione per il secondo caso. Scarica il prototipo funzionante qui: https://framer.cloud/ShBnH

Passaggio 1: crea tre pulsanti a forma di cerchio

Per iniziare, crea un pulsante principale a forma di cerchio con un'icona all'interno e due pulsanti più piccoli posizionati sotto il pulsante principale. Non dimenticare di contrassegnare tutti questi livelli come interattivi nella modalità di progettazione (con l'indicatore di destinazione).

Passaggio 2: progetta due stati per tutti i livelli

Crea due stati diversi per i livelli. Usa il codice qui sotto per far muovere i pulsanti più piccoli sopra quello principale e per ruotare l'icona di 45°:

 button_1.states.a = y: 427 x: 246 width: 64 height: 64 button_2.states.a = y: 330 x: 246 width: 64 height: 64 icon.states.a = rotation: 45

Passaggio 3: aggiungi un evento

Per rendere animato questo prototipo, dobbiamo aggiungere un evento. Dopo aver toccato il pulsante di azione, cambia gli stati di tutti i livelli:

 button.onTap -> button_1.stateCycle() button_2.stateCycle() icon.stateCycle()

Passaggio 4: animazione primaverile

A questo punto, l'animazione sembra molto meccanica. Per aggiungere un tocco umano, aggiungeremo un'animazione primaverile per tutti i livelli:

 button_1.animationOptions = curve: Spring(tension: 170, friction: 12) button_2.animationOptions = delay: 0.05 curve: Spring(tension: 170, friction: 12) icon.animationOptions = curve: Spring(tension: 250, friction: 5)

Il pulsante di azione è pronto per l'uso!

2. Interruttori interattivi

I passaggi seguenti ti consentiranno di creare la tua interazione di commutazione. Scarica il prototipo funzionante qui: https://framer.cloud/ieypV

Passaggio 1: progettare un parco giochi per interruttori

Avrai bisogno solo di due cose: l'interruttore stesso, che contiene almeno due livelli (sfondo e punto) e alcuni livelli da animare dopo aver usato l'interruttore.

Passaggio 2: crea stati

Vi ricordate dal primo articolo come progettare stati direttamente in Framer Studio? Progetta i tuoi stati come preferisci o usa le mie impostazioni:

 dot.states.a = x: 50 backgroundColor: "rgba(5,106,161,1)" switch_bg.states.a = backgroundColor: "rgba(0,136,205,1)" icon.states.a = opacity: 0 circle.states.a = x: 37 y: 183 width: 301 height: 301 circle_1.states.a = x: 20 y: 166 width: 337 height: 337

Passaggio 3: aggiungi un evento

Per far funzionare il prototipo, dobbiamo aggiungere un evento allo switch. Dopo aver toccato l'interruttore, cambieremo lo stato di tutti i livelli:

 switch_1.onTap (event, layer) -> dot.stateCycle() switch_bg.stateCycle() circle.stateCycle() circle_1.stateCycle() icon.stateCycle()

Passaggio 4: regola i tempi

Per rendere tutto più naturale, regola il tempo e il ritardo di tutti gli stati:

 dot.animationOptions = time: 0.2 switch_bg.animationOptions = time: 0.2 circle_1.animationOptions = time: 0.5 curve: Spring circle.animationOptions = time: 0.5 delay: 0.05 curve: Spring icon.animationOptions = time: 0.5 curve: Spring

Ora il nostro prototipo è fatto!

3. Azione di scorrimento dell'elemento dell'elenco

Questa è un'interazione tipica per la rimozione, l'archiviazione o il salvataggio di elementi da un elenco. Scorri verso sinistra o verso destra e un elemento verrà cancellato. Scarica il prototipo qui: https://framer.cloud/rzMWP

Passaggio 1: crea un prototipo in modalità Progettazione

Puoi usare il tuo design, se lo desideri. Devi solo mantenere la stessa struttura dei livelli. Come puoi vedere nell'immagine sopra, tutti gli elementi dell'elenco hanno un pulsante "annulla" sotto di essi.

Passaggio 2: rendi gli oggetti trascinabili

Per semplificare, creeremo un'interazione solo per il primo elemento dell'elenco. Innanzitutto, rendi trascinabile l'elemento dell'elenco: item.draggable = true .

Quindi blocca l'asse verticale: item.draggable.vertical = false .

Imposta i vincoli dell'area trascinabile: item.draggable.constraints

E infine imposta la taglia sulla taglia dell'articolo: size: item .

Ecco come appare l'intero codice:

 item.draggable = true item.draggable.vertical = false item.draggable.constraints = size: item

Ora puoi scorrere a sinistra e a destra e l'elemento tornerà sempre nella sua posizione originale.

Passaggio 3: crea lo stato

Quindi, crea lo stato per l'elemento dell'elenco quando viene rimosso. L'ho semplicemente spostato fuori dallo schermo usando l'asse x.

 item.states.a = x: -360

Passaggio 4: cambia stato dopo lo scorrimento

Infine, dobbiamo creare un trigger per avviare l'interazione. Quando trasciniamo l'elemento sul lato sinistro dello schermo, dovrebbe essere rimosso. Il codice sarà simile a questo:

 item.onMove -> if item.x < -70 item.stateCycle("a")

In questo caso, stiamo usando un'istruzione "se". Il codice sopra dice fondamentalmente, quando spostiamo il livello dell'elemento più di 70 px, quindi cambia lo stato dell'elemento in "a". Puoi leggere le istruzioni if ​​nella documentazione di Framer Studio: https://framer.com/getstarted/programming/#conditional

Passaggio 5: annulla l'azione dopo il tocco

Abbiamo quasi finito con questa interazione. L'unica cosa rimasta è annullare questa azione:

 item_bg.onTap -> item.stateCycle("default")

Dovresti avere familiarità con questo codice del tutorial precedente.

Passaggio 6 (opzionale): regola i tempi dell'animazione

Se lo desideri, puoi regolare i tempi dell'animazione:

 item.animationOptions = time: 0.75 curve: Spring

4. Caricatore di pulsanti

Questa è un'interazione molto utile per le azioni che richiedono tempi di caricamento o di attesa per l'utente. Quando creiamo questa interazione, imparerai come gestire molte animazioni che si verificano una per una. Scarica il prototipo qui: https://framer.cloud/FxmHN

Passaggio 1: crea un prototipo in modalità Progettazione

Crea un semplice pulsante con quattro sottolivelli: una barra di avanzamento e tre icone per stati diversi. Ho progettato il mio pulsante con un'icona di caricamento visibile, una barra di avanzamento in basso con una larghezza di 0 e altre due icone nascoste.

Passaggio 2: aggiungi un evento

L'intero prototipo può essere realizzato senza scrivere una singola riga di codice, semplicemente utilizzando le funzionalità di autocode di Framer.

Innanzitutto, aggiungi un evento. Innescherà l'intera interazione con un tocco sul livello del pulsante:

Questo è il codice che Framer ha scritto per te:

 button.onTap (event, layer) ->

Passaggio 3: Progetta animazioni

Utilizzeremo le funzionalità di autocode di Framer per progettare tutte le animazioni:

Ho progettato quattro animazioni con tempistiche diverse:

• La prima animazione sta cambiando la larghezza della barra di avanzamento.
• Il secondo nasconde l'icona di caricamento con opacità.
• Il terzo ruota e mostra l'icona del caricatore.
• L'ultimo mostra e ridimensiona l'icona di controllo.

Ecco il codice che Framer ha scritto per ciascuna di queste animazioni:

 # change progress bar width progress.animate width: 247 options: time: 1.4 curve: Bezier.ease # hide upload icon upload.animate opacity: 0.00 y: 39 options: time: 0.2 curve: Bezier.ease # show and rotate loader icon load.animate opacity: 1.00 rotation: 360 options: time: 1 curve: Bezier.ease # show and scale check icon done.animate opacity: 1.00 scale: 1.4 options: time: 0.2 curve: Bezier.ease delay: 1.00

Passaggio 4: ripristina l'animazione di caricamento

Come avrai notato, non abbiamo nascosto l'icona del caricatore al termine dell'animazione. Per completare questo prototipo, attiva un'altra animazione utilizzando questo evento: load.onAnimationEnd ->

 load.animate opacity: 0.00 options: time: 0.2 curve: Bezier.ease

5. Tirare per aggiornare

Quasi ogni singolo prodotto con un elenco al suo interno utilizza questo tipo di interazione. L'utente tira giù l'intero elenco per aggiornarlo. È molto facile da creare. Scarica il prototipo qui: https://framer.cloud/DgMDw

Passaggio 1: progetta un elenco semplice con l'icona di aggiornamento

Possiamo passare direttamente alla modalità di progettazione. Abbiamo bisogno di due cose: un elenco e un'icona di aggiornamento. La cosa cruciale qui è nascondere l'icona di aggiornamento con opacità e inserirla nel nostro elenco:

Passaggio 2: crea un componente di scorrimento

Vogliamo rendere la nostra lista scorrevole. Per fare ciò, usa un componente di scorrimento e aggiungi un livello elenco ad esso:

 scroll = new ScrollComponent size: Screen scrollHorizontal: false list.parent = scroll.content

Passaggio 3: rendi visibile l'icona di aggiornamento

Crea uno stato semplice per l'icona:

 icon.states.a = opacity: 1

Passaggio 4: aggiungi un evento dopo averlo tirato verso il basso

La nostra lista è scorrevole in questo momento. Ciò significa che quando scorriamo verso l'alto o verso il basso, l'intero contenuto dello scorrimento si sposta sull'asse "y". Con questa conoscenza, possiamo creare un evento:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a")

Ancora una volta stiamo usando un'istruzione "se". Se l'elenco viene tirato verso il basso (spostato sull'asse y) per più di 180 px, attiveremo un'azione. In questo caso, animeremo due livelli: l'elenco e l'icona di aggiornamento.

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1

Stiamo usando "animate" per spostare l'elenco verso il basso di 210 pixel e ruotare l'icona di aggiornamento di 360°.

Passaggio 5: ripristina tutti gli stati

Il prototipo sta quasi funzionando, ma dobbiamo ripristinare tutti i livelli dopo l'animazione di aggiornamento. Per fare ciò, utilizzeremo un evento al termine dell'animazione:

 icon.onAnimationEnd ->

Stiamo animando la rotazione dell'icona di aggiornamento nella sua posizione originale e, utilizzando il ciclo di stato, stiamo ripristinando l'elenco e lo stato di sfondo dell'icona:

 scroll.content.onMove -> if scroll.content.y > 180 icon.stateCycle("a") list.animate y: 210 options: time: 1 curve: Bezier.ease refresh.animate rotation: 360 options: time: 1 icon.onAnimationEnd -> refresh.animate rotation: 0 list.stateCycle("default") icon.stateCycle("default")

Questo è tutto!

6. Interazione di trascinamento

Hai mai notato che mentre trascini un elemento all'interno di un'app, succede sempre qualcosa con l'elemento stesso? A volte l'elemento si restringe, forse altri elementi sono sfocati o l'opacità cambia. Impariamo a creare questo tipo di interazione. Scarica il prototipo funzionante qui: https://framer.cloud/YstiW

Passaggio 1: progetta una semplice griglia con le tessere

Crea una griglia di riquadri e assicurati che si trovino all'interno dell'elemento padre.

Passaggio 2: usa il ciclo "for" per indirizzare tutte le tessere

" for loop" potrebbe sembrare spaventoso, ma è davvero semplice. Se non hai familiarità con for , puoi prima leggere un po' di background: https://framer.com/getstarted/programming/#loops-and-arrays

Useremo il ciclo for per indirizzare tutte le tessere all'interno della nostra griglia:

 for item in grid.subLayers

Con questa semplice riga di codice, hai preso di mira tutti i livelli all'interno del livello della griglia.

Passaggio 3: rendi le tessere trascinabili

Rendi trascinabile ogni elemento all'interno della griglia:

 for item in grid.subLayers item.draggable = true

Passaggio 4: progettare uno stato di trascinamento

Tutti gli elementi dovrebbero avere uno stato mentre vengono trascinati. Devi iniziare dal codice, ma in seguito sarai in grado di modificare questo stato nel Layer Editor:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)'

Passaggio 5: trascina gli eventi

Dobbiamo creare eventi per attivare diversi stati mentre l'elemento viene trascinato. Il primo evento attiverà un'azione mentre iniziamo a trascinare:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a")

Ho usato this.bringToFront() per assicurarmi che l'elemento sia sempre sopra gli altri livelli.

Il secondo trigger ripristinerà lo stato dell'elemento:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default")

A questo punto abbiamo un prototipo funzionante.

Passaggio 6 (opzionale): gioca con il tempismo

L'interazione avviene sempre lungo una linea temporale. È bene regolare la sequenza temporale per ottenere un effetto perfetto:

 for item in grid.subLayers item.draggable = true item.states.a = scale: 1.1 shadowBlur: 50 shadowColor: 'rgba(0,0,0,0.5)' item.onDragStart -> this.bringToFront() this.stateCycle("a") item.onDragEnd -> this.sendToBack() this.stateCycle("default") item.animationOptions = time: 0.3 curve: Spring

7. Più pulsanti "mi piace" (avanzati)

In questo prototipo, utilizzeremo tecniche più avanzate per mostrarti un modo diverso di indirizzare i livelli in Framer Studio, che creerà interazioni più reattive con meno tempo. Se non hai familiarità con la codifica di base, ti incoraggio a leggere prima questo articolo: https://blog.framer.com/code-less-achieve-more-with-arrays-in-framer-c43594d13d59

Per questa interazione, salteremo la parte di progettazione e utilizzeremo un prototipo che ho creato appositamente per questo articolo: https://framer.cloud/SZMCH

Passaggio 1: crea array

Dai un'occhiata alla struttura dei livelli all'interno di Framer Studio:

Abbiamo un "pulsante" all'interno di una "riga" nel gruppo "elenco". Creeremo un'interazione sui livelli dei pulsanti, quindi dobbiamo mirarli. Ma prima, dobbiamo trovare tutti i livelli di riga e inserirli all'interno di un array:

 rows = list.children buttons = []

Ho anche creato un array vuoto per tutti i livelli "pulsante": buttons = [] .

Passaggio 2: aggiungi un sottolivello all'array

Partiamo dal “ciclo for”:

 for i in rows buttons.push(i.children[0])

Per aggiungere livelli all'array, useremo: buttons.push() . Ciò significa che stiamo inserendo il primo livello di ogni gruppo di "righe" all'interno di un array.

Passaggio 3: crea stato ed evento

Ora creeremo uno stato per i nostri pulsanti "Mi piace" e aggiungeremo un evento ad essi toccando:

 for i in buttons i.states.a = scale: 1.2 hueRotate: -80 i.onTap -> this.stateCycle() i.animationOptions = time: 0.3 curve: Spring

Puoi usare questa tecnica per ricreare tutti i prototipi precedenti e renderli più complessi.

Nota finale

Quando crei microinterazioni, ti concentri sui minimi dettagli. Puoi creare animazioni innescate da qualsiasi tipo di azione e renderle assolutamente perfette. Tieni presente che ci sono centinaia di modi per creare lo stesso prototipo e dovresti usare il metodo che si adatta alle tue capacità e alle esigenze dei progetti dei tuoi prodotti.

• • •

Ulteriori letture sul blog di Toptal Design:

• eCommerce UX: una panoramica delle migliori pratiche (con infografica)
• L'importanza del design incentrato sull'uomo nel design del prodotto
• I migliori portfolio di designer UX: casi di studio ed esempi stimolanti
• Principi euristici per interfacce mobili
• Design anticipatorio: come creare esperienze utente magiche