Nelle parole della skill
Questa skill progetta e implementa microinterazioni, motion design, transizioni e pattern di feedback per l'utente per migliorare l'usabilità e coinvolgere gli utenti. Fornisce linee guida temporali specifiche: 100-150ms per micro-feedback come hover e click, 200-300ms per piccole transizioni come toggle e dropdown, 300-500ms per transizioni medie come modali e cambi di pagina, e 500ms+ per animazioni complesse e coreografate.
La skill copre gli stati di caricamento con skeleton screen e indicatori di progresso, interazioni basate su gesture come lo swipe-to-dismiss, transizioni di pagina e pattern di feedback come gli effetti ripple. Enfatizza un movimento intenzionale che comunica invece di decorare, utilizzando quattro principi: feedback per confermare le azioni, orientamento per mostrare il movimento degli elementi, focus per dirigere l'attenzione e continuità per mantenere il contesto durante le transizioni.
Che cosa produce
- Microinterazioni dei bottoni con animazioni hover, tap e spring
- Skeleton screen con animazione pulsante per gli stati di caricamento
- Componenti toggle con transizioni di stato fluide basate su spring
- Transizioni di pagina con opacità e movimento verticale usando AnimatePresence
Come funziona
- 01Seguire le linee guida temporali in base alla scala dell'interazione
Usare 100-150ms per micro-feedback come hover e click, 200-300ms per piccole transizioni come toggle, 300-500ms per transizioni medie come modali, e 500ms+ per animazioni complesse.
- 02Selezionare le funzioni di easing appropriate
Usare ease-out (decelerazione) per gli elementi in entrata, ease-in (accelerazione) per gli elementi in uscita, ease-in-out per il passaggio tra stati, e spring per effetti di overshoot giocosi.
- 03Rispettare le preferenze di accessibilità
Verificare la media query prefers-reduced-motion e ridurre la durata delle animazioni a 0.01ms quando l'utente ha richiesto una riduzione del movimento, garantendo che le animazioni non causino disagio.