Facilità vs. Molla
La facilità segue una curva di temporizzazione prestabilita. Una molla si muove come una molla reale e si ferma da sola.
Usa easing per dissolvenze, cambiamenti di colore e passaggi temporizzati. Usa una molla per oggetti che si muovono o seguono un trascinamento.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Facilità
L’easing è la curva temporale che decide come un’animazione accelera e rallenta.
cubic-bezier()Un pannello entra in fretta e si ferma in modo dolce. La sua uscita è più breve e diretta.
- Usalo quando
- Usa easing quando la velocità dovrebbe mostrare peso, direzione o scopo.
- Non usarlo quando
- Non usare mai lo stesso grande rimbalzo per ogni interazione.
- Nome usato nel codice
cubic-bezier()
Animazione a molla
L'animazione a molla segue un modello fisico. La rigidità, l'ammortizzazione, la massa e la velocità iniziale controllano come si muove.
stiffness / damping / massUna carta trascinata si sposta un po' oltre il suo spazio, poi torna al suo posto.
- Usalo quando
- Usalo per movimenti guidati da gesti che possono essere fermati e dovrebbero mantenere la velocità dell’utente.
- Non usarlo quando
- Non aggiungere mai troppo rimbalzo ai controlli comuni o alle attività sensibili.
- Nome usato nel codice
stiffness / damping / mass
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| FacilitàEasing | Usa easing quando la velocità dovrebbe mostrare peso, direzione o scopo. | Non usare mai lo stesso grande rimbalzo per ogni interazione. | cubic-bezier() |
| Animazione a mollaSpring Animation | Usalo per movimenti guidati da gesti che possono essere fermati e dovrebbero mantenere la velocità dell’utente. | Non aggiungere mai troppo rimbalzo ai controlli comuni o alle attività sensibili. | stiffness / damping / mass |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Facilità (Easing), Animazione a molla (Spring Animation) per il nostro reale flusso utente. Usa questa regola: La facilità segue una curva di temporizzazione prestabilita. Una molla si muove come una molla reale e si ferma da sola. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.