Recommandations en matière d’animations de transition entre les pages

Applies to Windows and Windows Phone

Utilisez les animations de transition entre les pages pour afficher la première page d’une application récemment lancée ou pour effectuer la transition entre les pages au sein d’une application.

Remarque  Lorsqu’une seule partie du contenu de l’écran change, utilisez des animations de transition de contenu plutôt que des animations de transition entre les pages.

Pratiques conseillées et déconseillées

  • Fractionnez votre page le long des bordures ou des frontières naturelles en un ensemble de deux à cinq régions. Appliquez des synchronisations étalées aux régions de sorte qu’elles apparaissent de manière séquentielle plutôt que toutes ensemble, et décalez les régions de 100 pixels pour une large disposition des applications. Vous pouvez utiliser un plus petit décalage si votre application présente une disposition spéciale pour l’état étroit. Pour plus d’informations sur les divisions de page les plus courantes et sur l’ordre dans lequel elles doivent apparaître, voir Indications d’utilisation supplémentaires.
  • Assurez-vous que tout contenu commun aux pages entrantes et sortantes reste en place, sans qu’aucune animation ne lui soit appliquée. Par exemple, si un bouton Retour est présent à la fois sur la page entrante et sortante, il ne doit pas être inclus dans l’animation de transition.
  • Si la page sortante n’est pas munie d’un bouton Retour (comme sur la première page de l’application) contrairement à la page entrante qui en est dotée, le bouton Retour doit être spécifié comme une région distincte et cette région doit s’animer dans la vue avant les autres.
  • Si vos pages sortantes et entrantes ont des arrière-plans différents, utilisez l’animation en fondu pour afficher le nouvel arrière-plan. Commencez l’animation en fondu en même temps que l’animation de transition entre les pages.
  • Si une partie du contenu de la page entrante n’est pas prêt à être affiché immédiatement, utilisez l’animation de transition entre les pages pour afficher tout le contenu qui l’est à cet instant. Pendant ce temps, si nécessaire, affichez un contrôle de progression tandis que vous préparez le contenu supplémentaire. Une fois ce dernier prêt à être affiché, animez-le en place en fonction de sa zone de contenu. Dans le cas d’une zone de contenu étendue, utilisez l’animation de transition de contenu. Dans le cas d’une petite zone de contenu ou de contenu discontinu, utilisez l’animation en fondu.
  • Insérez la page dans la vue en la faisant glisser dans le sens contraire de l’ordre général ou l’ordre de lecture de la page. Par exemple, si le contenu de la page entrante se fait de gauche à droite, la page entrante doit venir s’insérer de droite à gauche. Dans les applications dont le sens de lecture est de droite à gauche, la page entrante doit s’insérer de gauche à droite. De même, lorsque vous fractionnez une page en sections comme décrit dans les illustrations ci-dessous, l’ordre d’apparition de ces sections doit être l’opposé du sens de lecture.
  • N’exécutez pas d’animations de transition entre les pages quand un utilisateur redimensionne une fenêtre d’application. Les animations de transition entre les pages sont uniquement destinées à la navigation d’une page à l’autre dans une vue spécifique. Le système gère l’animation entre l’ancienne et la nouvelle disposition lorsque la vue change.

Indications d’utilisation supplémentaires

Les divisions de page les plus courantes, y compris l’ordre dans lequel elles doivent apparaître, sont indiquées ici :

Divisions de page courantes

Les divisions de page les plus courantes, avec des boutons de retour, sont illustrées ici. Si la page sortante n’a pas de bouton Précédent (comme sur la première page de l’application) contrairement à la page entrante, le bouton Précédent doit être spécifié comme une région distincte et cette région doit s’animer dans la vue avant les autres.

Divisions de page courantes

Les divisions de page les plus courantes utilisées avec une application affichée dans une largeur étroite ou une vue portrait, y compris l’ordre dans lequel les divisions doivent apparaître, sont illustrées ici. Si le bouton Retour est déjà présent sur la page sortante, il doit rester en place et ne pas être inclus dans l’animation.

Divisions de page courantes en vue redimensionnée ou en mode portrait

Rubriques connexes

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 de glissement
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 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 (applications Windows Runtime en JavaScript et HTML)
Exemple de bibliothèque d’animations HTML
Animation de votre interface utilisateur
Animation de transitions entre les pages
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
Pour les développeurs (applications Windows Runtime en C#/VB/C++ et XAML)
Animation de votre interface utilisateur
Animation des transitions de contenu et d’entrée
Démarrage rapide : animation de votre interface utilisateur avec des animations de la bibliothèque
EntranceThemeTransition class

 

 

Afficher:
© 2014 Microsoft