Recommandations en matière d’animations de glissement

Applies to Windows and Windows Phone

Utilisez les animations pour les actions de glisser-déplacer quand les utilisateurs déplacent des objets, par exemple le déplacement d’un élément dans une liste ou le positionnement d’un élément au-dessus d’un autre.

Pratiques conseillées et déconseillées

Animation de début du glissement

  • Utilisez l’animation de début du glissement quand l’utilisateur commence à déplacer un objet.
  • Insérez les objets affectés dans l’animation seulement si d’autres objets peuvent être affectés par l’opération de glisser-déplacer.
  • Autorisez l’utilisateur à déplacer légèrement l’objet avant que vous ne déclenchiez l’animation de début de glissement. Cela empêchera l’utilisateur de déplacer accidentellement un objet sur lequel il voulait seulement appuyer ou qu’il voulait sélectionner. Le seuil recommandé est de 20 TIP (Touch Independent Pixels).
  • Utilisez l’animation de fin du glissement pour terminer toute séquence d’animation qui a commencé par l’animation de début du glissement. Le changement de taille provoqué par l’animation de début du glissement dans l’objet déplacé est alors inversé.

Animation de fin du glissement

  • Utilisez l’animation de fin du glissement quand l’utilisateur dépose un élément déplacé.
  • Lorsque l’utilisateur dépose un objet pour réorganiser une liste, vous devez souvent replacer les autres éléments dans la liste pour faire de la place à l’objet déposé. Pour ce faire, une fois l’animation de fin du glissement terminée, utilisez l’animation de liste pour ajouter un élément mais sans élément ajouté, car l’élément en cours d’ajout est déjà présent. Tous les éléments seront ainsi animés dans leur propre emplacement.
  • Si la source du glissement disparaît après avoir été déposée (par exemple, quand l’utilisateur dépose un fichier sur une icône de dossier pour stocker le fichier dans ce dernier), utilisez l’animation de disparition en fondu sur la source du glissement.
  • Incluez les objets affectés dans l’animation de fin du glissement si et seulement si vous avez inclus ces mêmes objets affectés dans l’animation de début du glissement.
  • N’utilisez pas l’animation de fin du glissement si vous n’avez pas utilisé l’animation de début du glissement. Vous devez utiliser les deux animations pour que tous les objets retrouvent leur taille d’origine une fois la séquence de glissement terminée.

Animation de glissement entre les objets

  • Utilisez l’animation de glissement entre les objets quand l’utilisateur fait glisser la source du glissement dans une zone de dépôt où elle peut être placée entre deux objets.
  • Choisissez un emplacement où il est possible de déposer l’objet. Cet emplacement ne doit pas être trop petit, sinon l’utilisateur rencontrera des difficultés pour déposer la source du glissement.
  • La distance recommandée pour déplacer les objets affectés afin d’afficher la zone de dépôt est de 40 pixels.
  • La direction recommandée pour déplacer les objets affectés afin d’afficher la zone de dépôt est l’étirement direct les uns des autres. Qu’il s’agisse d’un mouvement vertical ou horizontal dépend de l’orientation des objets affectés les uns par rapport aux autres.
  • N’utilisez pas l’animation de glissement entre les objets, s’il n’est pas possible de déposer la source du glissement dans une zone. L’animation de glissement entre les objets indique à l’utilisateur que la source du glissement peut être déposée entre les objets affectés.

Animation de glissement entre les objets par éloignement

  • Utilisez l’animation de glissement entre les objets par éloignement quand l’utilisateur éloigne un objet d’une zone où il aurait pu être placé entre deux autres objets.
  • N’utilisez pas l’animation de glissement entre les objets par éloignement si vous n’avez pas d’abord utilisé l’animation de glissement entre les objets.

Rubriques associées

Pour les concepteurs
Recommandations en matière d’ajout et de suppression
Recommandations en matière d’animations de transition de contenu
Recommandations en matière d’animations latérales de l’interface utilisateur
Recommandations en matière d’animations en fondu
Recommandations en matière d’animations de transition de page
Recommandations en matière d’animations de clic de pointeur
Recommandations en matière d’animations de repositionnement
Recommandations en matière d’animations contextuelles de l’interface utilisateur
Recommandations en matière d’animations de balayage
Pour les développeurs (HTML)
Exemple de bibliothèque d’animations HTML
Animation de votre interface utilisateur
Animation de séquences de glisser-déplacer
dragSourceEnd
dragSourceStart
dragBetweenLeave
dragBetweenEnter
Pour les développeurs (XAML)
Animation de votre interface utilisateur
Animation de séquences de glisser-déplacer
Démarrage rapide : animation de votre interface utilisateur avec des animations de la bibliothèque
DragItemThemeAnimation
DropTargetItemThemeAnimation
DragOverThemeAnimation

 

 

Afficher:
© 2014 Microsoft