{"id":444,"date":"2014-03-19T18:19:14","date_gmt":"2014-03-19T17:19:14","guid":{"rendered":"https:\/\/alistapart.com\/it\/article\/ui-animation-e-ux-un-amicizia-malcelata\/"},"modified":"2014-03-19T18:19:14","modified_gmt":"2014-03-19T17:19:14","slug":"ui-animation-e-ux-un-amicizia-malcelata","status":"publish","type":"article","link":"https:\/\/alistapart.com\/it\/article\/ui-animation-e-ux-un-amicizia-malcelata\/","title":{"rendered":"UI Animation e UX: un’amicizia malcelata"},"content":{"rendered":"
\n

Usare insieme le parole “animazione” e “web” rievoca in molti di noi ricordi di ricerche frenetiche del pulsante “skip intro” per risparmiarci un terribile assalto sensoriale. L’animazione sul web ha toccato livelli piuttosto bassi, su questo non si discute, ma aggiungere delle animazioni al nostro lavoro pu\u00f2<\/em> essere utile e funzionale, se troviamo le circostanze appropriate.<\/p>\n

Se usate come pi\u00f9 di un semplice dettaglio del design, le animazioni possono dare dei suggerimenti, guidare l’occhio e ammorbidire quelli che a volte sono dei tratti spigolosi delle interazioni web. Possono migliorare la user experience e possiamo ottenere tutto questo usando semplicemente CSS.<\/p>\n<\/div>\n

\n

Un ripasso delle animazioni CSS<\/h2>\n

Questo articolo usa le animation e le transition CSS negli esempi collegati. Se \u00e8 passato un po’ di tempo dall’ultima volta che le avete usate, ecco cosa state guardando:<\/p>\n

Le animazioni CSS sono quelle che associamo pi\u00f9 da vicino alle animazioni tradizionali. Ogni cambiamento in uno stato (come il movimento) in un’animazione viene definito da una lista di keyframe identificata da un nome all’interno della regola CSS @keyframes<\/code>. Fate riferimento a un insieme di keyframe, assegnate una durata, una funzione di timing e qualche altra propriet\u00e0 opzionale et voil\u00e0! Avete un’animazione CSS.<\/p>\n

.animation {\n\t\u2026\n\tanimation: bounceAround 1.1s ease-in-out infinite;\n}\n\n@keyframes bounceAround {\n\t0% {transform:translateY(0);}\n\t20% {transform:translateY(-60px) rotate(0deg);}\n\t25%{transform:translateY(20px) rotate(0deg);}\n\t35%, 55%{transform:translateY(0px) rotate(0deg);}\n\t60% {transform: translateY(-20px) rotate(0deg);}\n\t100%{transform: translateY(-20px) rotate(360deg);}\n}<\/code><\/pre>\n
In CSS ci sono anche le transition, che possono essere usate, come in effetti avviene, per far muovere degli oggetti. (Giusto per non<\/em> creare confusione). Per creare una transition, si contrassegna una propriet\u00e0 (o pi\u00f9 propriet\u00e0) che si vogliono veder cambiare in maniera morbida nel tempo, si imposta una durata e altri parametri per tale cambiamento e poi si cambia la propriet\u00e0 per far partire la transizione tra i due stati.<\/p>\n
.transition{\n\t\u2026\n\ttransition: .4s background ease-out;\n}\n\n.transition:hover {\n\tbackground:#e65445;\n}<\/code><\/pre>\n
In pratica, le animazioni e le transizioni vengono spesso usate insieme, quindi user\u00f2 il termine animazione in senso generale per indicarle entrambe. Questo esempio<\/a> mostra una semplice versione di ciascuna per un rapido ripasso del codice.<\/p>\n<\/div>\n
\n
Smussare gli angoli<\/h2>\n
I posti pi\u00f9 adatti in cui aggiungere le animazioni nel nostro lavoro sono i momenti di cambiamento. Di default i cambi di stato sul web implicano tagli netti, che possono renderli difficili da seguire. Questi momenti di cambiamento hanno il potenziale per essere ammorbiditi, ma anche di essere migliorati, aggiungendo delle animazioni alle UI.<\/p>\n
Molti di questi momenti sono centrati sull’aiutare una persona ad orientarsi nell’interfaccia, a trovare la propria strada o a stabilire una relazione visuale. Eccone alcuni esempi comuni:<\/p>\n
1. Da dove siete venuti? Dove siete andati?<\/h3>\n
Il nostro cervello e i nostri occhi sono programmati per prestare attenzione agli oggetti in movimento: si tratta quasi di un riflesso. I maghi utilizzano i movimenti per fare i loro trucchi di prestigio, i concessionari d’auto lavorano per catturare il vostro sguardo con uomini gonfiabili che danzano all’aria. Possiamo usare questa cosa per richiamare l’attenzione sui cambiamenti che nascondono o rivelano l’informazione, come l’apertura di cassetti di contenuto o l’esposizione di un sotto menu.<\/p>\n
L’animazione pu\u00f2 aiutare l’occhio a vedere da dove arriva un nuovo oggetto quando viene mostrato o dove va un oggetto nascosto (e dove probabilmente lo si potr\u00e0 ritrovare). E, ovviamente, possiamo usare entrambe per un potente “uno-due”.<\/p>\n
See the demo: Esempio di mostra\/nascondi<\/a><\/p>\n