it-swarm-eu.dev

Come e quando usare l'animazione nella tua applicazione?

A volte le applicazioni possono beneficiare di animazioni nell'interfaccia utente.

  • Quali suggerimenti hai per determinare quando utilizzare l'animazione?
  • Come puoi massimizzare l'utilità delle animazioni ed evitare l'uso improprio?
12
Dair

Pensa a causa ed effetto. Se passo con il mouse sopra un pulsante, vorrei un feedback di qualche tipo. Se riesco a trascinare qualcosa, indicalo in qualche modo. Se c'è un avviso o una notifica, attira discretamente la mia attenzione su di esso. Oltre a ciò, a meno che tu non abbia un motivo molto specifico per l'animazione, non usarne uno. Cerca di evitare tutto ciò che può diventare fastidioso se continua. Se l'animazione non è importante e distrae dallo scopo principale della pagina, eliminala.

6
Virtuosi Media

Alcune posizioni in cui l'animazione può essere appropriata:

  • Riduzione a icona di un pannello in una posizione specifica: l'animazione aiuta a insegnare all'utente dove è andato il pannello a icona e come ripristinarlo.
  • Nascondersi automaticamente, ad esempio una barra di navigazione: l'animazione attira l'attenzione dell'utente sul fatto che qualcosa è appena scomparso e da dove può essere recuperato.
  • Aggiornamento di un'area non immediatamente vicino all'area in cui è avvenuta la modifica che l'ha provocata. Ad esempio, la modifica dei dati in un elenco/griglia che modifica la rappresentazione visiva di tali dati in un altro pannello.

L'animazione (cambiamento/movimento) attira l'attenzione più della maggior parte delle altre cose, quindi è eccezionale quando si desidera attirare l'attenzione su un'azione che altrimenti avrebbe potuto far scivolare l'attenzione dell'utente.

Tuttavia, anche per gli articoli sopra, potrebbe valere la pena farlo solo le prime volte - poiché l'occhio viene attirato automaticamente su di esso, funge da distrazione e quindi dovrebbe essere evitato dopo che la "guida" iniziale è stata completata .

6
Dan Barak

Dovresti sempre avere una sorta di animazione occupata/funzionante per impedire all'utente di pensare che l'app abbia smesso di funzionare (particolarmente importante per le app Ajax).

Le transizioni rapide semplici sono OK se si aggiungono all'esperienza utente complessiva, ma non mettono troppo.

Hai mai usato un'app in cui pensavi che "Vorrei che lo sviluppatore avesse dedicato tanto tempo alla pianificazione delle funzionalità effettive come ha pianificato i fantastici effetti dell'interfaccia utente"? Tienilo a mente quando aggiungi animazioni.

4
Sruly

Grande domanda . Come al solito, dipende dall'app (i giochi dovrebbero probabilmente usare molta più animazione dell'interfaccia utente rispetto alle app di produttività, ad esempio), ma ci sono alcuni principi generali.

Quando gli iThings erano nuovi e caldi, tutto doveva essere animato, ma è interessante guardare VS2010 e Office 2010 e vedere quanto è non animato. In particolare, in Office 2010 dissolvenza in dissolvenza/pulsante rollover (mentre Office 2007 ha fatto). IMO, sembra più reattivo. I menu continuano a sbiadire in/out (anche se vale la pena notare che i menu impiegano circa il doppio del tempo per svanire out come fanno per svanire in, che può aumentare la percezione reattività).

In generale, l'animazione dovrebbe essere usata quando i componenti dell'interfaccia utente si spostano senza che l'utente li trascini/scorri esplicitamente . Se l'utente sta trascinando un'icona in posizione, "scartare" altre icone di mezzo trasmette gli effetti dell'azione dell'utente (anche se a volte è sufficiente una linea di punti di inserimento). La "barra delle informazioni" su IE/Firefox spinge verso il basso le altre cose per ridurre la voluttuosità e attirare l'attenzione dell'utente. I menu a fisarmonica e ad albero sono stati testati meglio con l'animazione poiché l'utente vede dove vanno gli altri elementi.

Una volta ho visto uno studio che mostrava che gli utenti di tutti i livelli sono meno inclini a interagire con un elemento dell'interfaccia utente che sta animando (se trovo il link lo aggiorno). Quindi se accendi un pulsante per più di 2 secondi quando l'utente ci passa sopra, anche se il pulsante sarà funziona durante l'animazione, gli utenti aspetteranno inconsciamente che l'animazione finisca. Per avere un'idea di ciò, controlla l'esempio Temi WPF . Alcuni temi hanno animazioni più lunghe al passaggio del mouse rispetto ad altri e puoi determinare immediatamente quali si sentono lenti. Gli effetti di dissolvenza lenta possono anche aver contribuito agli utenti dicendo che Vista si sentiva lento - su Win7, ci sono tutte le stesse animazioni (quindi è altrettanto lenta sul processore/scheda grafica), ma molte sono più brevi.

OTOH, il nuovo google.com presenta elementi in dissolvenza e la ricerca di immagini di Google ora include lightbox. Quindi la tendenza sta andando in entrambe le direzioni.

3
Robert Fraser

Per riassumere, le animazioni hanno due forti effetti sul cervello che puoi usare:

  • Riduci il carico cognitivo: Consentono all'utente di vedere cosa è successo tra due stati, quindi il suo cervello non deve "colmare il divario". Questo fa sentire all'utente che tutto è più chiaro e facile da usare --> Fai un ampio uso delle animazioni per le transizioni (cf Apple)

  • Cattura l'attenzione dell'utente: Gli umani sono davvero bravi a rilevare i movimenti in un posto che non stanno guardando direttamente. Questo viene fatto grazie a le nostre cellule dell'asta , le cellule utilizzate per rilevare il movimento, che sono davvero dense ai bordi esterni della retina (devono avere qualcosa a che fare con la sopravvivenza in ambiente ostile) -> Usa l'animazione se è successo qualcosa di veramente importante in una posizione lontana.

Questo effetto è molto forte perché sono direttamente collegati al nostro cervello rettile. Potente e pericoloso allo stesso tempo.

3
user396

Quando realizzo animazioni per un'app Web/nativa, prendo sempre l'approccio github, quasi per "distrarre l'utente" per mezzo secondo, mentre il contenuto viene caricato. Trova le parti più lente dell'applicazione (in particolare le parti in cui si preme un pulsante e per un buon mezzo secondo, sembra che non stia succedendo nulla e trovare un modo per fare un'animazione, questo per ridurre al minimo la frustrazione per l'utente (" Ho premuto il pulsante ma non succede nulla "), tieni presente che non intendo una ruota di caricamento rotante, o una sorta di animazione di caricamento, intendo come un'animazione scorrevole o qualcosa del genere, per creare l'illusione di una chiazza di petrolio , UI veloce, (vedi: https://github.com/github/linguist ogni volta che fai clic su qualcosa c'è questa animazione di diapositiva che fa sembrare github super veloce e fluido), nota che non esagerare questo (usando questa tecnica su parti delle tue app che richiedono> 500 ms) Mi sento come 500 ms, è il numero magico, ma sperimenta e trova la tua.

2
David

Devi chiedere: questa animazione aiuta l'utente a capire cosa sta succedendo? Ho disattivato immediatamente l'effetto genio di OS X, ma apprezzo la semplice animazione minimizza/ripristina perché è veloce e fornisce un ulteriore indizio su ciò che è appena accaduto. Allo stesso modo con Spaces/Exposé. O forse è una transizione breve, semplice e morbida che fa apparire qualcosa di meno brusco e più umano.

Inoltre, un po 'di eleganza può essere il tuo marchio di fabbrica, come il' Lucas wipe 'di Star Wars.

2
John Ferguson

L'animazione ha uno scopo e quello scopo è visualizzare i cambiamenti di stato.

È più facile brontolare quando si pensa all'animazione dichiarativa come il tipo presente nei CSS moderni proposta da webkit. In questo contesto, si specifica l'aspetto degli elementi in un determinato stato, quindi si comunica ai CSS come appaiono in uno stato diverso. Come si specificano gli stati? Con regole CSS, come nomi di classi e ID. Quindi, per esempio (e perdonami per aver usato il codice qui!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

Quello che stiamo descrivendo qui è una finestra che si apre e stiamo dicendo al codice come animare tra le due regole CSS. Questo li rende stati e, quando te ne rendi conto, applicare l'animazione alla tua app diventa improvvisamente molto più logico. Invece di pensare a ciò che l'animazione va dove, vedi l'animazione come un sottoprodotto dei cambiamenti di stato; un indicatore del fatto che qualcosa è accaduto o un feedback all'utente che sta avvenendo un cambiamento.

Quando ho imparato a distinguere tra pura "animazione" (dal punto di vista della programmazione) e "cambio di stato" (dal punto di vista dichiarativo), ha reso tutti i miei progetti di interfaccia utente molto più solidi e logici.

1
Rahul