Lissage vs. Ressort
Le lissage suit une courbe de timing définie. Un ressort se déplace comme un vrai ressort et s'arrête de lui-même.
Utilisez lissage pour les fondus, les changements de couleur et les étapes temporisées. Utilisez un ressort pour les objets qui bougent ou suivent un glissement.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Lissage
L’easing est la courbe de temps qui règle la façon dont une animation accélère et ralentit.
cubic-bezier()Un panneau apparaît vite et s'arrête en douceur. Sa sortie est plus courte et plus directe.
- Utilisez-le lorsque
- Utilisez lissage lorsque la vitesse doit montrer le poids, la direction ou l’objectif.
- Ne l'utilisez pas lorsque
- N'utilisez jamais le même grand rebond pour chaque interaction.
- Nom utilisé dans le code
cubic-bezier()
Animation de printemps
L'animation de printemps suit un modèle physique. La rigidité, l'amortissement, la masse et la vitesse initiale contrôlent son mouvement.
stiffness / damping / massUne carte qu'on glisse va un peu trop loin, puis revient se placer correctement.
- Utilisez-le lorsque
- Utilisez-le pour les mouvements guidés par gestuelle qui peuvent être arrêtés et doivent conserver la vitesse de l’utilisateur.
- Ne l'utilisez pas lorsque
- N'ajoutez jamais trop de rebond aux contrôles courants ou aux tâches sensibles.
- Nom utilisé dans le code
stiffness / damping / mass
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| LissageEasing | Utilisez lissage lorsque la vitesse doit montrer le poids, la direction ou l’objectif. | N'utilisez jamais le même grand rebond pour chaque interaction. | cubic-bezier() |
| Animation de printempsSpring Animation | Utilisez-le pour les mouvements guidés par gestuelle qui peuvent être arrêtés et doivent conserver la vitesse de l’utilisateur. | N'ajoutez jamais trop de rebond aux contrôles courants ou aux tâches sensibles. | stiffness / damping / mass |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Lissage (Easing), Animation de printemps (Spring Animation) pour notre flux utilisateur réel. Utilisez cette règle : Le lissage suit une courbe de timing définie. Un ressort se déplace comme un vrai ressort et s'arrête de lui-même. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.