In breve
- Il buon motion design si basa su cinque principi: dare uno scopo a ogni movimento, dargli i tempi giusti, usare l’easing, ordinarlo per importanza e usarne il meno possibile.
- I piccoli movimenti di interfaccia di solito sembrano giusti tra circa 150 e 300 millisecondi, mentre gli spostamenti più ampi e le entrate richiedono più tempo.
- Ciò che entra dovrebbe rallentare, ciò che esce dovrebbe accelerare, e i loop continui dovrebbero muoversi a ritmo costante.
- Quando si muovono più elementi, il più importante dovrebbe muoversi per primo, e solo una cosa alla volta dovrebbe guidare.
- Un piccolo sistema di movimento con tre durate e due o tre curve di easing mantiene coerente il movimento di un brand in ogni lavoro.
In questa pagina
I principi di motion design sono le regole pratiche che fanno sembrare il movimento naturale invece che casuale. L’animazione classica dei personaggi ha i suoi famosi dodici, fissati dagli animatori Disney Frank Thomas e Ollie Johnston in The Illusion of Life. Per il lavoro di design, come post, siti web, loghi e presentazioni, cinque fanno quasi tutto: scopo, tempi, easing, gerarchia e misura. Puoi usarli senza aprire mai un’app di animazione.
Scopo: ogni movimento deve avere un compito
Il movimento fa rumore. Tutto ciò che si muove attira l’occhio, quindi muovere qualcosa è dichiarare che conta adesso. Prima di animare, dai un nome al compito. Se non ci riesci, lascialo fermo.
Movimento con un compito
- Porta l’occhio sull’unica cosa da leggere per prima
- Mostra da dove è arrivato qualcosa o dove è andato
- Conferma un’azione: inviato, salvato, aggiunto
- Crea un’atmosfera con uno sfondo lento
Movimento fine a se stesso
- Ogni elemento che entra rimbalzando
- Testo che continua a muoversi mentre lo leggi
- Loghi che girano e pulsanti che pulsano
- Transizioni che ti fanno aspettare
Tempi: quanto deve durare un movimento
La durata è il principio su cui si sbaglia di più, di solito andando troppo lenti sulle cose piccole e troppo veloci su quelle grandi. Due regole aiutano. I movimenti piccoli e frequenti devono essere rapidi, perché le persone li vedono continuamente. I movimenti che percorrono più strada o cambiano di più devono durare di più, perché l’occhio ha bisogno di tempo per seguirli.
| Tipo di movimento | Durata tipica | Perché |
|---|---|---|
| Riscontro di pulsanti e interruttori | Circa da 100 a 200 ms | Sembra istantaneo, ma resta visibile |
| Piccoli cambi di interfaccia, menu | Circa da 200 a 300 ms | Abbastanza rapido da non far aspettare nessuno |
| Pannelli grandi, cambi di pagina | Circa da 300 a 500 ms | Più distanza richiede più tempo |
| Testo che entra in un post o in un video | Circa da 0,4 a 1 s | Abbastanza lungo da registrarsi come un’entrata |
| Sfondo che scorre in loop | Molti secondi per ciclo | Atmosfera, non informazione: deve notarsi appena |
Un test utile: se le persone notano l’animazione in sé invece di ciò che mostra, è troppo lenta o troppo ampia. Se non si accorgono affatto del cambiamento, è troppo veloce.
Easing: perché niente deve muoversi a velocità costante
Gli oggetti reali accelerano e rallentano. Un movimento a velocità costante, detto lineare, sembra meccanico perché niente al mondo si muove così. Le curve di easing aggiungono accelerazione e decelerazione, e scegliere quella giusta è semplice una volta che conosci tre casi.
- In entrata: ease out. Arriva veloce e si posa dolcemente, come un’auto che accosta. La maggior parte delle entrate usa questa.
- In uscita: ease in. Parte dolcemente e si allontana veloce. Le uscite possono anche essere più brevi delle entrate.
- Spostamenti dentro l’inquadratura: ease in e out. Parte e si ferma dolcemente.
- Loop e rotazioni: lineare. Un movimento continuo deve mantenere un ritmo costante, altrimenti sembra esitare sul punto di giunzione.
.panel-enter {
transition: transform 300ms cubic-bezier(0, 0, 0.2, 1); /* ease out */
}
.panel-leave {
transition: transform 200ms cubic-bezier(0.4, 0, 1, 1); /* ease in, and shorter */
}
.background-drift {
animation: drift 20s linear infinite; /* steady loop */
}Gerarchia: muovi per prima la cosa importante
Il movimento crea un ordine di lettura, proprio come fanno dimensione e peso in un design statico. Ciò che si muove per primo si legge per primo. Quando più elementi si animano, scaglionali in ordine di importanza, con una breve pausa di circa 50 a 150 millisecondi tra uno e l’altro, e lascia che un solo elemento guidi alla volta. La gerarchia visiva spiega la versione statica della stessa idea.
In una versione animata di questa storia, il titolo arriva per primo, poi la data, poi i dettagli. Lo sfondo mantiene il suo ritmo lento sotto.
- 1
Lo sfondo si assesta
Il campo si sta già muovendo lentamente quando il post compare. Crea l’atmosfera senza chiedere di essere letto.
- 2
Entra il titolo
Un’unica entrata chiara, in ease out, in meno di un secondo.
- 3
Seguono le righe di supporto
L’etichetta e i dettagli arrivano subito dopo, in ordine di lettura, con un movimento più piccolo.
- 4
Tutto resta fermo
Le parole si fermano e restano immobili abbastanza a lungo da essere lette. Solo lo sfondo continua a muoversi.
Misura: usa meno movimento di quanto pensi
È l’immobilità a dare significato al movimento. Se tutto si muove, niente spicca, e il design sembra ansioso. Scegli un solo movimento principale per lavoro, tieni brevi le distanze e lascia ferme le parole una volta arrivate. La misura riguarda anche le persone: alcuni trovano il movimento fastidioso o persino nauseante, quindi ogni lavoro deve funzionare anche con il movimento disattivato. Il movimento ridotto spiega come prevederlo.
Coerenza: un piccolo sistema di movimento
I brand mantengono coerenti colori e font; il movimento merita la stessa cura. Scrivi un minuscolo sistema e riusalo: tre durate, due o tre curve di easing e un movimento di casa per gli sfondi. Impedisce a ogni nuovo lavoro di inventarsi la propria velocità, e rende riconoscibile il tuo movimento nel modo descritto da il movimento per i brand statici.
:root {
--motion-quick: 150ms;
--motion-base: 250ms;
--motion-slow: 400ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-quick: 1ms;
--motion-base: 1ms;
--motion-slow: 1ms;
}
}Applica gli stessi principi quando animi un logo, un post o la hero di un sito. I loghi animati e i post animati li mostrano all’opera.
Le domande più frequenti
Quali sono i principi base del motion design?
Per il lavoro di design, cinque coprono quasi tutto: dare uno scopo a ogni movimento, scegliere una durata sensata, usare l’easing, ordinare il movimento per importanza e usarne il meno possibile.
Quanto deve durare un’animazione?
I piccoli riscontri di interfaccia di solito funzionano tra circa 100 e 300 millisecondi, i movimenti più ampi tra circa 300 e 500 millisecondi, e le entrate del testo in post o video tra circa mezzo secondo e un secondo.
Quale easing devo usare?
Ease out per ciò che entra, ease in per ciò che esce, ease in e out per ciò che si sposta dentro l’inquadratura, e lineare per i loop continui.
Quali sono i 12 principi dell’animazione?
Sono principi dell’animazione dei personaggi descritti dagli animatori Disney Frank Thomas e Ollie Johnston in The Illusion of Life. Tempi ed easing, che loro chiamano slow in e slow out, sono quelli che passano più direttamente al motion design.
Scritto da Gradiently
Il team dietro Gradiently, uno strumento di design costruito attorno ai Mark: gradienti vivi che fanno sembrare tuo tutto ciò che progetti.
Vedi il nostro profilo
