Comparaison comportementale
Reflet de chargement vs Animation à ressort
Différence décisive
Reflet de chargement concerne une décoration facultative d’attente ; Animation à ressort concerne une réponse physique amortie. Les deux peuvent se combiner si le besoin le justifie.
Critères de choix, liens et sources
- Reflet de chargementChoisis Reflet de chargement si tu cherches une décoration facultative d’attente.Ouvrir la fiche Reflet de chargement
- Animation à ressortChoisis Animation à ressort si tu cherches une réponse physique amortie.Ouvrir la fiche Animation à ressort
Voir les neuf dimensionsVoir les sources
Mouvement et effets
Essayer
Le mouvement explique-t-il un changement, signale-t-il un état ou décore-t-il seulement ?
Reflet de chargement
Contexte commun aux essais
Un élément se déplace, change d’état ou attend un contenu. Quelle information doit rester sans mouvement ?
Reflet de chargement
Aperçu statique : l’état et le résultat restent lisibles sans mouvement. Active la démo pour comparer le paramètre, mettre en pause et essayer le repli.
Compare 1 200 et 2 400 ms par passage. La vitesse change la décoration, pas le chargement. Afficher le contenu termine cette simulation locale ; aucune requête réseau n’est lancée.
Animation à ressort
Aperçu statique : l’état et le résultat restent lisibles sans mouvement. Active la démo pour comparer le paramètre, mettre en pause et essayer le repli.
Passe l’amortissement de 10 à 20 avec une masse de 1 et une raideur de 100. Un faible amortissement dépasse la cible ; l’amortissement critique se stabilise sans oscillation. La démo échantillonne deux secondes puis rejoint la cible exacte.
Ce que cet essai montre
Le skeleton réserve la forme du contenu ; le shimmer est une décoration facultative sur cette forme. Contrairement à une barre de progression, aucun ne mesure l’avancement.
Lequel convient à ton besoin ?
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
Animation à ressort
Explique la stabilisation après un glissement ou un déplacement lorsque la réponse physique aide à se repérer.
Différence et sources
Le skeleton réserve la forme du contenu ; le shimmer est une décoration facultative sur cette forme. Contrairement à une barre de progression, aucun ne mesure l’avancement.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Déclencheur
Le contrôle qui ouvre ou révèle la surface.
Décision
Question de famille
Le mouvement explique-t-il un changement, signale-t-il un état ou décore-t-il seulement ?
Trois critères pour choisir
- Cas d’usage
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
Animation à ressort
Explique la stabilisation après un glissement ou un déplacement lorsque la réponse physique aide à se repérer.
- Interactivité
Reflet de chargement
Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique.
Animation à ressort
Règle un paramètre pour une réponse physique amortie ; mets en pause ou utilise un résultat statique.
- Comportement mobile
Reflet de chargement
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Animation à ressort
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Neuf dimensions
- Déclenchement
Reflet de chargement
Activation explicite pour démontrer une décoration facultative d’attente.
Animation à ressort
Activation explicite pour démontrer une réponse physique amortie.
- Modalité
Reflet de chargement
Non modal ; le contenu environnant reste utilisable.
Animation à ressort
Non modal ; le contenu environnant reste utilisable.
- Positionnement
Reflet de chargement
Dans un spécimen délimité ; aucune décoration globale.
Animation à ressort
Dans un spécimen délimité ; aucune décoration globale.
- Interactivité
Reflet de chargement
Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique.
Animation à ressort
Règle un paramètre pour une réponse physique amortie ; mets en pause ou utilise un résultat statique.
- Focus
Reflet de chargement
Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton.
Animation à ressort
Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton.
- Fermeture
Reflet de chargement
Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs.
Animation à ressort
Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs.
- Rôle accessible
Reflet de chargement
button + select + checkbox + status
Animation à ressort
button + select + checkbox + status
- Cas d’usage
Reflet de chargement
Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant.
Animation à ressort
Explique la stabilisation après un glissement ou un déplacement lorsque la réponse physique aide à se repérer.
- Comportement mobile
Reflet de chargement
Contrôles tactiles natifs ; la réduction système reste prioritaire.
Animation à ressort
Contrôles tactiles natifs ; la réduction système reste prioritaire.
| Dimension | Reflet de chargementSkeleton shimmer | Animation à ressortSpring animation |
|---|---|---|
| Déclenchement | Activation explicite pour démontrer une décoration facultative d’attente. | Activation explicite pour démontrer une réponse physique amortie. |
| Modalité | Non modal ; le contenu environnant reste utilisable. | Non modal ; le contenu environnant reste utilisable. |
| Positionnement | Dans un spécimen délimité ; aucune décoration globale. | Dans un spécimen délimité ; aucune décoration globale. |
| Interactivité | Règle un paramètre pour une décoration facultative d’attente ; mets en pause ou utilise un résultat statique. | Règle un paramètre pour une réponse physique amortie ; mets en pause ou utilise un résultat statique. |
| Focus | Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton. | Le focus reste sur le contrôle activé. Recommencer rend le focus à son bouton. |
| Fermeture | Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs. | Pause fige la lecture ; le repli statique l’annule. Quitter le spécimen annule son animation et retire les écouteurs. |
| Rôle accessible | button + select + checkbox + status | button + select + checkbox + status |
| Cas d’usage | Montre un espace réservé au chargement, accompagné d’un texte Chargement persistant. | Explique la stabilisation après un glissement ou un déplacement lorsque la réponse physique aide à se repérer. |
| Comportement mobile | Contrôles tactiles natifs ; la réduction système reste prioritaire. | Contrôles tactiles natifs ; la réduction système reste prioritaire. |