Rompi la simmetria crea contrasto e richiamo nei tuoi progetti. Scopri quando e come applicarla ai tuoi progetti.
La temporizzazione asimmetrica dell'animazione migliora l'esperienza utente consentendoti di esprimere personalità e allo stesso tempo di rispondere rapidamente alle interazioni dell'utente. Inoltre, contrasta la grafica e rende l'interfaccia visivamente più accattivante.
- Usa la sincronizzazione asimmetrica dell'animazione per aggiungere personalità e contrasto al tuo lavoro.
- Dai sempre la priorità all'interazione dell'utente; scegli periodi più brevi quando rispondi a tocchi o clic e riserva durate più lunghe per gli altri momenti in cui non lo sei.
Come la maggior parte delle "regole" di animazione, dovresti fare delle prove 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 e rapidamente alle interazioni di un utente. Detto questo, la maggior parte delle volte l'azione dell'utente è asimmetrica e quindi anche l'animazione.
Ad esempio, quando un utente tocca per visualizzare una barra di navigazione laterale, questa dovrebbe essere visualizzata il più rapidamente possibile, con una durata di circa 100 ms. Quando l'utente chiude il menu, tuttavia, puoi permetterti di animare la visualizzazione un po' più lentamente, ad esempio intorno ai 300 ms.
Al contrario, quando attivi una visualizzazione modale, di solito viene mostrato un errore o altri messaggi critici. In questi casi, ti consigliamo di visualizzare la visualizzazione un po' più lentamente, di nuovo intorno ai 300 ms, ma la chiusura, che viene attivata dall'utente, dovrebbe avvenire molto rapidamente.
La regola generale è quindi la seguente:
- Per le animazioni della UI attivate dall'interazione di un utente, come la visualizzazione delle transizioni o la visualizzazione di un elemento, hanno un'introduzione rapida (breve durata), ma una chiusura lenta (una durata maggiore).
- Per le animazioni dell'interfaccia utente attivate dal codice, come errori o visualizzazioni modali, l'introduzione è più lenta (durata più lunga), ma rapida (durata breve).