L'animazione è uno dei sogni di tutta la vita dell'umanità (se alcuni storici devono essere creduti). La teoria inizia con le pitture rupestri: in alcune pitture rupestri, è comune vedere creature disegnate con troppi arti.
Ci sono un paio di teorie dietro questo. Alcuni suggeriscono che questo fosse semplicemente perché gli artisti non avevano mezzi per cancellare le membra, lasciando i loro errori sulle pareti per i posteri. Altri credono che questi siano stati i primi tentativi di catturare l'idea del movimento in un'immagine statica. Ho scelto di credere alla seconda teoria.
E cosa c'è di più naturale del desiderio di catturare il movimento? Tutto in natura si muove. La gente cammina, l'acqua scorre, le piante si dispiegano, l'unica cosa che è veramente costante nella natura è il cambiamento, nella forma del movimento. Alcuni di essi si verificano in una sfocatura, e alcuni sono troppo lenti per essere percepiti, ma succede sempre.
L'animazione non è più una novità per i web designer ... sta diventando la base per un efficace design dell'interazione.
L'animazione è cambiamento e movimento. È il più vicino possibile per catturare la vita nella nostra arte. Questo è il motivo per cui le persone dicono sempre cose come "l'animazione rende vivi i nostri siti web (o presentazioni o qualsiasi altra cosa)". Potrebbe essere abusato, ma è una frase che cattura elegantemente lo scopo dell'animazione nel web design.
Quell'illusione del movimento, se applicata correttamente, è ciò che dice agli utenti che hanno effettivamente fatto qualcosa. Hanno interagito con successo con l'interfaccia e hanno fatto cambiare qualcosa.
Ciò fa scattare gli stessi sentimenti (o almeno sentimenti molto simili) in essi come quelli che sperimentano quando interagiscono con oggetti fisici. In un certo senso, l'animazione è skeuomorphic. Esatto, ho detto la parola "s".
Se usato correttamente, l'animazione è progettata per imitare le interazioni del mondo reale. In un certo senso, siamo arrivati al punto di partenza. Potremmo non usare più troppe texture in pelle, ma stiamo ancora cercando di imitare il mondo reale.
Prima di addentrarci in aspetti più pratici, diamo un'occhiata a come l'animazione su Internet è arrivata al suo stato attuale (e molto bello). Praticamente tutto è iniziato con gif ...
I file .gif sono, a quanto pare, più vecchi di me di circa due anni. Sono stati introdotti nel 1987, giusto in tempo per i primi giorni di Internet come lo conosciamo (più o meno). Iniziò così l'era della danza dei bambini e di altri orrori meglio dimenticati.
Tuttavia, se la popolarità delle gif ci ha mostrato qualcosa, era che le persone volevano portare l'animazione nelle loro pagine web. Intendiamoci, la maggior parte probabilmente non aveva ancora considerato i modi in cui l'animazione poteva migliorare l'usabilità. Si trattava di portare un po 'di stile e un po' di vita nel regno altrimenti statico della pagina web.
Non c'è mai stato un momento migliore per concentrarsi sull'animazione in relazione a interfacce e app basate sul web.
Quando le funzionalità dei file .gif erano esaurite, le persone volevano nuovi e migliori modi per aggiungere animazioni ai propri siti. E suono! Oh, bel suono. Quanto sarebbe fantastico se le persone aprissero la tua pagina web e suonasse la tua canzone preferita? E, come, la canzone vera ... nessuna di quelle merda MIDI, giusto?
Era Flash che ci permetteva di imparare quella lezione nel modo più duro. Non dimentichiamo però che Flash è stato davvero sorprendente per il suo giorno. In effetti, era un'innovazione. E 'stato un progresso. E 'stato bello
Non importa quanto sia stato maltrattato in seguito, bisogna riconoscere che Flash ci ha permesso di fare cose con Internet che non avevamo mai conosciuto prima. Ha ampliato gli orizzonti creativi, creato posti di lavoro per le persone in un settore nuovo di zecca, ci ha dato "cartoni animati" e la cosa più bella che sia mai accaduta negli anni '90 (oltre ai Nirvana): i giochi Flash. Anche ora, trovo queste cose molto avvincenti.
Col passare del tempo, molti progettisti passarono all'animazione basata su JavaScript per le cose più piccole, come i menu a discesa e altri elementi di navigazione. Dopo tutto, era più SEO-friendly, se lo facevi nel modo giusto. Altri hanno usato solo JavaScript perché è così che FrontPage e DreamWeaver hanno scambiato le immagini dei pulsanti, ma i progressi lenti sono ancora in corso.
Verso la metà dell'ultimo decennio, tuttavia, il W3C stava già lavorando per includere l'animazione nelle specifiche CSS. Nel 2009 è stata pubblicata la prima bozza pubblica delle specifiche di animazione CSS.
E adesso? Ora stiamo cercando modi per forzare il rendering hardware, combinare le animazioni CSS con i file SVG, le librerie JavaScript per estendere le funzionalità di animazione di base e altro ancora.
Ora stiamo cercando modi per fare di più che aggiungere stile ai siti web. Ora stiamo cercando di aumentare l'usabilità, informare ed educare gli utenti e rendere più facile per loro capire cosa stanno facendo.
L'animazione non è più una novità per i web designer. Nel film, è diventato la base per un nuovo tipo di narrazione. Per noi sta diventando la base per un design efficace dell'interazione.
Non c'è mai stato un momento migliore per concentrarsi sull'animazione in relazione a interfacce e app basate sul web. La tecnologia non è ancora completamente formata (quando mai?) O completamente supportata (quando mai?) Ma stiamo trovando nuovi modi per consegnarla alle persone senza utilizzare plug-in o codice proprietario.
Più basiamo la nostra animazione su standard aperti, più persone saranno effettivamente in grado di vederlo in primo luogo. E con questa recente attenzione a usarlo per guidare l'interazione, questa è una cosa molto, molto buona.
È tempo di essere un early adopter.
Andiamo al sodo. Di che tipo di animazione stiamo parlando? Voglio dire, ho detto molto sull'uso dell'animazione per migliorare le nostre interfacce utente; ma cosa significa quello esattamente?
Ovviamente non è sufficiente lanciare animazioni sugli elementi della nostra pagina web e sperare che migliori il nostro tasso di conversione. Sarebbe sciocco. Come ogni altro aspetto del design, quali tipi di animazione usi e quando li usi, devono essere attentamente considerati.
Allo stesso modo devono essere considerati i dettagli reali dell'implementazione. Se le tue animazioni sono così pesanti per le risorse che pesano sui dispositivi mobili dei tuoi utenti o, peggio, sui loro desktop, avrai un problema. O cinque.
Iniziamo esaminando i diversi tipi di animazione tipicamente utilizzati sul web:
Non so se questo è il tipo più comune di animazione, anche se, probabilmente, lo è. E così dovrebbe essere. Questo è, a mio avviso, il tipo di animazione più utile che abbiamo a nostra disposizione.
Come ho detto nell'introduzione, questa è l'animazione che consente agli utenti di sapere che la loro azione (cliccando, per esempio) è stata registrata. Il loro clic è stato il catalizzatore necessario per far accadere qualcosa, sia che si tratti di navigare verso un'altra pagina, di aprire una barra laterale o una finestra modale, o di inviare una e-mail dal modulo di contatto.
Quel feedback non è solo bello da avere, è essenziale ora, in questo mondo di design piatto. Le persone devono conoscere la differenza tra interfaccia e decorazione. Animare i nostri elementi in modo semplice e sottile attraverso l'interazione dà loro il feedback di cui hanno bisogno.
Può essere semplice come cambiare gli sfondi dei pulsanti o farli rimbalzare. Questa categoria copre anche le animazioni che fanno "scorrere" le barre laterali sulla pagina e quelle che fanno sì che le finestre modali si gonfino.
E ancora una volta, si tratta di fornire feedback all'utente. Queste sono le animazioni che mostrerai all'utente quando qualcosa sta accadendo in background, e non vuoi che si facciano impazzire.
L'utilità di queste animazioni è stata dimostrata molto tempo fa, quando le interfacce utente grafiche sono state inventate per la prima volta. È iniziato con il modo in cui il cursore del mouse si trasformava in una clessidra e anche le barre di avanzamento. Apple ha introdotto la "palla da spiaggia spinning della morte", ad un certo punto, e le finestre hanno mostrato file che volavano con grazia da una cartella all'altra.
Queste convenzioni sono state adottate sul Web non appena possibile, e a ragione. Quando le persone iniziano a chiedersi cosa sta succedendo, continuano a cliccare o a toccare. Potrebbe essere un'espressione di frustrazione. Potrebbero credere che in realtà le cose vadano più velocemente.
Ad ogni modo, dire al tuo utente che cosa sta succedendo, anche attraverso una semplice barra di progresso, può alleggerire la mente considerevolmente ... anche per quelli di noi che hanno utilizzato i computer da molto tempo.
Beegit, l'app di scrittura che ho usato per scrivere e modificare questo articolo mi dà un utile "cerchio di progresso" per dirmi quando le mie immagini verranno caricate, come puoi vedere nella parte in alto a sinistra della finestra modale:
Ora il raccontare storie con l'animazione va oltre i cartoni animati. In effetti, non sto parlando di quelli. Piuttosto, alcune persone progettano siti Web in modo che quando un utente interagisce con loro (ad esempio: scorrendo la pagina verso il basso), vengono attivate animazioni che raccontano una storia.
Alcuni esempi comuni sono quelle pagine che mostreranno un nuovo prodotto "assemblandolo" davanti ai vostri occhi. Altri giocano più come un cartone animato, con piccoli personaggi che ti seguono lungo la pagina e tutto.
L'efficacia di queste animazioni è ... discutibile. In genere, non hanno lo scopo di migliorare l'usabilità, ma di impressionare l'utente e fornire loro un contesto per l'oggetto della pagina. Potrebbero provare a mostrare l'artigianalità di un prodotto o condividere le esperienze che hanno portato alla creazione di un'azienda.
Il fatto che ottengano o meno queste cose dipenderà probabilmente dalla qualità delle animazioni stesse, indipendentemente dal loro impatto negativo sul rendimento del sito e dal contenuto della pagina stessa. Se un utente non trova ciò che sta cercando sul tuo sito web, tutte le animazioni del mondo non possono risolverlo.
Due esempi che mi piacciono, molto, provengono da marchi che hanno molta esperienza con questo genere di cose: Apple e Sony.
La pagina dedicata a Mac Pro ti mostra esattamente cosa c'è sotto il cofano mentre scorri verso il basso:
Nel frattempo, alla Sony, mostrano diversi dispositivi diversi, beh, non tanto "assemblati" come se le loro parti fossero sfondate insieme, complete di effetti di fuoco.
Nel bene o nel male, alcune persone mettono l'animazione sul loro sito che non ha altro scopo se non quello di essere visto. Ne vale la pena?
Sì e no…
Normalmente lo evito perché è fonte di distrazione. Vuoi che gli occhi della gente siano attratti dai motivi per cui dovrebbero comprare qualunque cosa tu stia vendendo e dai tuoi inviti all'azione. Vuoi che ottengano quello per cui sono venuti. Se il tuo sito web non ha alcuno scopo per l'utente, o se si distraggono troppo nel tentativo di determinare il suo scopo, potrebbero non tornare indietro.
L'animazione decorativa dovrebbe essere nascosta, interamente. Mostralo dopo che le persone completano il tuo invito all'azione. Puoi anche includere animazioni sottili che vengono attivate solo quando l'utente fa qualcosa di molto specifico, come passare il mouse sopra qualcosa di piccolo nell'intestazione / nel piè di pagina.
Qui su WDD, il passaggio del mouse sul logo lo anima, anche se si potrebbe sostenere che poiché il logo è un collegamento, non è puramente decorativo, ma è comunque un buon esempio. Una semplice ricerca su Google rivelerà che ci sono diversi siti in cui l'uso del codice konami farà accadere qualcosa (come far apparire Godzilla e ruggire ... Non sto scherzando).
Altri esempi includono molti di Google conosciuti uova di Pasqua e questo da photojojo.com:
Scorri fino in fondo a qualsiasi pagina e un dinosauro amichevole ti "scatta la foto". Inoltre, nelle pagine che lo contengono, il fumetto visualizzato nello screenshot fluttuerà sottilmente da un lato all'altro.
Pubblicità. Per alcuni, è il loro reddito ( tosse e tosse ), e per gli altri, un flagello. Aggiungi animazione ad un annuncio e boom! Gli occhi sono attirati contro la loro volontà. È un'azione riflessa.
Aggiungi suono e sentiranno un intenso odio ... anche un'azione riflessa.
Ma è quasi inevitabile. Se vuoi che le persone guardino i tuoi annunci, animarli è un ottimo modo per andare. Ciò potrebbe renderti sgradito su alcune reti pubblicitarie moderne che si vantano di "pubblicità non invadenti", ma se le pubblicità animate non funzionassero, non le avremmo ancora.
Ma quell'animazione arriva con lo stesso problema posto dall'animazione decorativa: distrae l'utente dal suo compito. Nel mondo delle vendite online, la distrazione può essere la morte.
In definitiva, spetterà a te valutare i pro ei contro. Nessun annuncio, pubblicità non appariscente o annunci animati, è tutto un compromesso.
Si può notare che da nessuna parte in questa lista ho menzionato le animazioni della schermata iniziale. Questo perché mi aspetto che tutti conoscano meglio.
Gli aspetti tecnici dell'implementazione sono importanti, ma che tu stia utilizzando .gifs, video, CSS, SVG o anche Flash (shudder), ci sono alcuni principi che contano di più. Dimentica, per un momento, la tecnologia o le tecniche che prevedi di utilizzare e preparati per un po 'più di teoria. I tuoi utenti ti ringrazieranno.
Potresti pensare: "Ok, questo sembra ovvio. Le animazioni dovrebbero essere veloci, non lente. "Hai ragione, è ovvio, in teoria. Il problema è che trovo ancora siti web, costruiti con tutte le ultime tecnologie, con un'animazione increspata.
Ho una scheda video Nvidia GTX 750 TI che mi è costata circa $ 200. Le tue animazioni non dovrebbero essere mosse. Recentemente sono stato su alcuni siti Web che mi hanno fatto pensare: "Skyrim corre più veloce di così". E non stavo scherzando o esagerando.
Ora immagina come sarebbe navigare su quegli stessi siti Web su un tablet o uno smartphone di bassa qualità. Da un lato, sarebbe un ottimo modo per testare veramente il personaggio di qualcuno, ma d'altro canto, non otterrà più quei siti web lenti. Se le tue uniche opzioni sono animazioni lente o nessuna animazione, stai meglio con un'interfaccia che si trova lì.
Questo per non dire niente dei siti web creati con tanta animazione e tanti effetti speciali che hanno bisogno di caricare schermate con barre di avanzamento. Nessuno dovrebbe aspettare che le animazioni vengano caricate prima di poter vedere le informazioni che desiderano o di cui hanno bisogno. Mai. Fare aspettare le persone è come perdere affari.
Rompiamo tutto ciò in punti elenco:
Ed ecco dove ho intenzione di dare solo un piccolo consiglio tecnico: per quanto riguarda l'accelerazione e le prestazioni dell'hardware, il CSS lo è quasi sempre meglio di JavaScript. Ogni volta che hai una scelta, usa l'animazione basata su CSS e usa JS come riserva.
Quando si considera l'animazione come uno strumento di progettazione, piuttosto che una scelta stilistica, è meglio iniziare in piccolo. Per una, l'animazione piccola e discreta si comporta meglio (vedi la sezione precedente). In secondo luogo, un'animazione grande e appariscente deve avere uno scopo che va oltre il semplice "bell'aspetto" per essere utile.
La maggior parte dei siti web non ha bisogno di animazioni oltre al tipo usato per rendere l'uso degli elementi dell'interfaccia utente "reale" e semi-naturale. Prima di iniziare a lanciare la parallasse come riso ad un matrimonio, chiediti se effettivamente migliorerà l'esperienza per i tuoi utenti. Cose grandi e appariscenti che si muovono sullo schermo informano e indirizzano i tuoi utenti meglio del solito testo e delle belle foto?
Nella maggior parte dei casi, la risposta è probabilmente "no". Ovviamente ci saranno delle eccezioni. Ce ne sono quasi sempre. La maggior parte delle volte, tuttavia, potrebbe essere preferibile animare semplicemente i pulsanti, far scorrere la barra di navigazione nascosta e animare l'inferno del messaggio di successo che appare dopo che qualcuno ha utilizzato il modulo di contatto.
La sottigliezza è la chiave per un buon design, eppure spesso sottovalutata. Inizia lì. E poi, se diventa chiaro che fare qualcosa di più grande e più luminoso servirebbe il tuo scopo da un punto di vista dell'esperienza utente, fai di tutto!
Le animazioni dovrebbero essere veloci, o meglio, dovrebbero accadere velocemente. Non sto parlando di performance qui, ma piuttosto del tempo reale in cui un oggetto trascorre in movimento.
Pensa a come interagiamo con oggetti reali. A volte ci muoviamo più velocemente, a volte più lentamente. La velocità con cui interagiamo con un oggetto può dipendere dalle sue dimensioni, dal compito da svolgere o dal fatto che sia pieno di un liquido che non vogliamo versare; ma generalmente, raccogliamo le cose e le spostiamo abbastanza velocemente. I movimenti individuali possono accadere in millisecondi.
"Millisecondi" è generalmente la quantità di tempo in cui vogliamo misurare l'animazione dell'interfaccia utente. Più a lungo, e le persone iniziano a perdere la pazienza con la loro macchina, o il tuo prodotto, o entrambi. Devi tenerlo corto o le cose sembrano lente.
Questo è particolarmente vero per i prodotti che le persone sono tenuti a usare ripetutamente. Anche se l'animazione è super divertente e divertente, perderà il suo fascino entro la decima volta che qualcuno dovrà vederlo. È un pulsante che rimbalza o un menu scorrevole, non l'introduzione al tuo programma TV preferito. Nessuno canta, qui.
Gli oggetti fisici rimbalzano. Alcuni di loro non lo fanno molto bene, ma fondamentalmente tutti gli oggetti rimbalzano un po ', se li lasci cadere abbastanza su una superficie dura, e se non c'è troppa resistenza all'aria e ... ottieni il mio punto.
Interagire con gli elementi dell'interfaccia utente è come interagire con oggetti piccoli e duri. Li lanci da un lato, rimbalzano un po '. Li lasci cadere, rimbalzano un po '.
Pertanto, se necessario, può essere utile "far rimbalzare" le animazioni, specialmente se si muovono verticalmente. Si tratta di mantenere l'illusione.
Le cose in movimento di solito richiedono un po 'di tempo per fermarsi. Gli oggetti fissi messi in movimento di solito impiegano un po 'di tempo per accelerare. Yay fisica!
Quindi, quando stai facendo muovere oggetti, o smetti di muoverti, ricorda di dare loro un po 'di tempo (in millisecondi) per rallentare o accelerare. Questo è chiamato "easing" e c'è funzionalità per esso incorporato direttamente nel CSS.
Nessun articolo di Ultimate Guide sarebbe completo senza almeno una sezione piena di link. Quindi qui vai. Abbiamo link ad articoli che trattano la teoria di base dietro l'animazione nel web design, tutorial per iniziare e un sacco di esempi. Godere.
Vuoi maggiori informazioni prima di iniziare ad animare le cose? Nessun problema. Ecco un sacco di consigli di persone molto intelligenti e alcune speculazioni generali sul futuro dell'animazione su Internet.
Principi di animazione per il Web
Questo articolo su cssanimation.rocks delinea i principi più basilari dietro l'animazione degli oggetti in generale. Assicurati di controllare il resto del loro sito Web per esempi, esercitazioni e un corso di posta elettronica. (Il corso e-mail costa, però.)
Animazione invisibile
Steven Fabre ci dice come l'animazione, come il design stesso, dovrebbe essere fondamentalmente invisibile. Sembra solo paradossale finché non lo leggi. Vai a farlo.
L'animazione sarà la grande tendenza UI del 2015?
Un pezzo speculativo con una buona, seppur breve, spiegazione di alcuni dei principi guida dell'animazione.
Il ruolo dell'animazione nel web design
Un altro pezzo con un consiglio semplice e basilare. È breve e semplice, ma forse vale la pena rileggere ogni volta che devi prendere una decisione importante legata all'animazione. Pensa a un foglio di trucchi per mantenere la prospettiva.
Lo stato dell'animazione 2014
Un'ottima panoramica di come l'animazione web (più o meno) viene attualmente eseguita da Rachel Nabors. Vedrai il suo nome qui alcune volte, poiché è una specie di esperto sull'argomento.
Cinque modi per animare responsabilmente
Un altro fantastico articolo di Rachel Nabors (ti ho detto che avresti visto più cose di lei ...). In questo, lei ha più di cinque modi per aggiungere animazioni al tuo lavoro senza alienare i tuoi utenti.
Ottieni qui i tuoi fotogrammi chiave! Ulteriori informazioni sulle proprietà CSS di quanto tu abbia mai pensato possibile / necessario. Scopri la differenza tra easeIn e easeOut : so che ho dovuto cercarlo.
4 semplici tutorial di animazione CSS3
Salta l'introduzione e vai dritto alle cose buone, se è così che lavori. Di seguito ho incluso alcuni tutorial introduttivi. Se preferisci ottenere direttamente un codice di base, inizia da qui.
Introduzione di un principiante all'animazione CSS
Esattamente quello che dice nel titolo. Finché avrai una conoscenza di base di HTML e CSS, sarai in grado di seguire questo tutorial e acquisire una conoscenza pratica dell'animazione basata su CSS.
La guida all'animazione CSS: principi ed esempi
Smashing Magazine porta i suoi lettori attraverso una serie di animazioni di base. È semplice, ma preziosa conoscenza.
Animazione senza flash
Un'altra grande introduzione all'animazione CSS, scritta dalla sempre fantastica Rachel Nabors. Sì, è del 2012, ma l'unica differenza tra allora e ora è che la tecnica che fornisce ha più supporto per il browser.
Esercizi di Codrops
Non posso, e lo dico sul serio, non posso raccomandare abbastanza i ragazzi di Codrops. Hanno fatto tonnellate di esempi, prove di concetti, collezioni di idee e sì, tutorial. Amano l'animazione e fanno molto per condividere questo amore.
Ecco alcune delle esercitazioni relative all'animazione che hanno creato:
Transizioni CSS3, Trasformazioni, Animazione, Filtri e altro!
Un tutorial interattivo e approfondito con molti esempi dal vivo. Vieni qui quando hai finito con i tutorial di base. Ti dà molte idee per esercitarti.
Transizioni e animazioni
Una guida alla semplice animazione CSS con particolare attenzione alle transizioni e alle proprietà di transizione.
Scuotere il Web con CSS3 (Come fare collegamenti Scuotere)
Un tutorial con un'enfasi per scuotere le cose. Voglio dire, ci vai.
Animazioni ad alte prestazioni
Questo tutorial, co-autore del tanto amato Paul Lewis e Paul Irish, si concentra su come animare le cose in un modo che non rallenti il browser. Dato che questo può essere particolarmente importante sui dispositivi mobili, vale la pena leggerlo.
Esercitazione: utilizzo della modalità di animazione-riempimento nelle animazioni CSS
Dopo aver imparato così tanto su come far muovere le cose, potrebbe essere una buona idea conoscere il comportamento degli oggetti che non si sono ancora spostati, o che hanno appena finito la loro animazione. A volte lo stile può diventare complicato, ed è qui che entra in gioco la modalità di riempimento dell'animazione .
Sintassi dell'animazione di fotogrammi chiave
Uno snippet fornito dal sempre utile css-tricks.com. Non ti ricordi come fare in modo che quei keyframe facciano ciò che vuoi? Contrassegna questo e smetti di preoccupartene.
A Look Into: Cubic-Bezier nella transizione CSS3
Questo è tutto sul tempo. Voglio dire, il tempo letterale della tua animazione. In particolare, si tratta di utilizzare la curva di Bezier per ottenere il giusto tempismo dell'animazione.
Flip roba!
Ho trovato due tutorial diversi e fantastici su come creare animazioni flipping. Ognuno porta un approccio diverso alla tabella e alcuni extra che l'altro non ha. Quindi, invece di prendere una decisione, li ho inclusi entrambi.
Crea un'animazione flipping CSS
Transizioni CSS, Trasformazioni e animazioni - Flipping Card
Animazione di gradienti CSS3
La maggior parte delle esercitazioni di animazione presuppone che si desideri animare la geometria o la posizione di un oggetto sulla pagina. Questo ti insegnerà come animare ciò che è dentro di loro ... in questo caso, un gradiente.
Immagine in evidenza, immagine di animazione via Shutterstock.