Rompere la simmetria conferisce contrasto e appeal ai tuoi progetti. Scopri quando e come applicare questa funzionalità ai tuoi progetti.
La temporizzazione asimmetrica delle animazioni migliora l'esperienza utente consentendoti di esprimere la tua personalità e, al contempo, di rispondere rapidamente alle interazioni degli utenti. Inoltre, offre un contrasto con l'aspetto, rendendo l'interfaccia più accattivante dal punto di vista visivo.
- Utilizza tempi di animazione asimmetrici per aggiungere personalità e contrasto al tuo lavoro.
- Favorisci sempre l'interazione dell'utente: utilizza durate più brevi per rispondere a tocchi o clic e riserva durate più lunghe per i momenti in cui non sei disponibile.
Come per la maggior parte delle "regole" dell'animazione, devi fare esperimenti per scoprire cosa funziona per la tua applicazione, ma quando si tratta dell'esperienza utente, gli utenti sono notoriamente impazienti. La regola generale è rispondere sempre rapidamente a un'interazione dell'utente. Detto questo, la maggior parte delle volte l'azione dell'utente è asimmetrica e, di conseguenza, lo può essere anche l'animazione.
Ad esempio, quando un utente tocca per visualizzare una barra laterale di navigazione, devi mostrarla il più rapidamente possibile, con una durata di circa 100 ms. Tuttavia, quando l'utente chiude il menu, puoi permetterti di animare la visualizzazione un po' più lentamente, ad esempio intorno ai 300 ms.
Al contrario, quando viene visualizzata una visualizzazione modale, in genere è per mostrare un errore o un altro messaggio critico. In questi casi, ti consigliamo di mostrare la visualizzazione un po' più lentamente, sempre intorno ai 300 ms, ma la chiusura, attivata dall'utente, deve avvenire molto rapidamente.
La regola empirica generale è la seguente:
- Per le animazioni dell'interfaccia utente attivate dall'interazione di un utente, ad esempio le transizioni tra le visualizzazioni o la visualizzazione di un elemento, utilizza un'introduzione rapida (durata breve) e un'uscita lenta (durata più lunga).
- Per le animazioni dell'interfaccia utente attivate dal codice, ad esempio errori o visualizzazioni modali, utilizza un'introduzione più lenta (durata maggiore), ma un'uscita rapida (durata breve).