La prévisualisation du Retour est le résultat d'une opération de navigation par gestes au cours de laquelle un utilisateur a balayé l'écran vers l'arrière pour prévisualiser la destination du geste Retour avant de l'exécuter complètement. Cela permet à l'utilisateur de décider s'il veut continuer (en d'autres termes, valider le geste Retour) ou rester dans la vue actuelle.
La prévisualisation du Retour offre une expérience de navigation plus fluide et plus intuitive lorsque vous utilisez la navigation par gestes. Il exploite des animations intégrées pour indiquer aux utilisateurs où leurs actions les mèneront afin de réduire les résultats inattendus.
Suivez les conseils de conception de cette page si la conception de votre application nécessite de fournir un retour arrière pour des transitions et des animations personnalisées aux moments clés.
Compatibilité avec la prévisualisation du Retour
La prise en charge de la prévisualisation du Retour est disponible, que vous utilisiez un retour arrière par défaut ou personnalisé. Si vous utilisez le retour arrière par défaut, vous pouvez facilement l'activer. En savoir plus sur la prise en charge de la prévisualisation du Retour
Une fois que vous l'avez activée, votre application intègre des animations telles que le retour à l'écran d'accueil, les activités multi-activités et multitâches.
Vous pouvez également mettre à niveau la dépendance de votre composant Material vers la version 1.10.0-alpha02 ou une version ultérieure de MDC Android pour recevoir les animations de composant Material suivantes:
Vérifier que votre application offre une compatibilité bord à bord
Pour aider les utilisateurs, la navigation avec prévisualisation du Retour respecte les encarts de gestes définis dans les fonctionnalités bord à bord. Évitez d'ajouter des gestes tactiles ou des cibles de déplacement sous ces zones de gestes.
Surfaces en plein écran
Si votre application crée des transitions personnalisées dans l'application pour les surfaces plein écran, suivez ces conseils de conception.
Aperçu arrière
Lorsqu'un utilisateur effectue un geste de retour sur une surface en plein écran, la zone intérieure doit se réduire à mesure que le geste progresse. Dès que l'utilisateur franchit le seuil de commit, le contenu doit passer à l'état suivant à l'aide d'un fondu, indiquant à l'utilisateur où son action la mènera.
Interpolation
L'interpolateur utilisé garantit la sortie rapide de l'écran. Les paramètres sont (.1, .1, 0, 1) pour correspondre à l'interpolateur utilisé pour les animations SystemUI
Annuler l'action
Si l'utilisateur libère le geste sans effectuer de commit, le contenu revient rapidement et revient à son état et à sa taille d'origine avant le début du geste, annulant ainsi tout changement d'état.
Caractéristiques de mouvement
Paramètre |
Valeur initiale |
Valeur cible |
Le contexte |
|---|---|---|---|
Quitter la balance |
100 % |
90% |
|
Saisir une échelle |
110% |
100 % |
|
Quitter le fondu |
100 % |
0 % |
Fondu vers la valeur cible lorsque le seuil de progression de 35% est atteint |
Activer le fondu |
0 % |
100 % |
Début du fondu au seuil de progression de 35 % |
Transition d'élément partagé
Si votre application crée des transitions personnalisées dans l'application pour les transitions d'éléments partagés, suivez les conseils de conception suivants.
Lorsqu'un utilisateur effectue un geste Retour lors des transitions d'éléments partagés, la surface se détache entièrement du bord de l'écran lors de l'aperçu arrière, et l'utilisateur peut la manipuler directement. Cependant, la conception ne doit pas suggérer visuellement à l'utilisateur que l'exécution d'un geste Retour ignore un élément dans la direction de ce geste.
Par exemple, vous pouvez utiliser des transitions d'éléments partagés lorsque vous fermez les écrans détaillés dans des listes verticales pour indiquer visuellement à l'utilisateur qu'il annule l'action précédente. Dans la vidéo 3, un événement d'agenda s'affiche à nouveau dans la vue "Jour". Pour améliorer la tactilité, la conception ajoute un léger dépassement afin d'absorber une partie de la tension de ressort accumulée pendant le geste.
Aperçu arrière
Lorsque vous présentez des animations prédictives à l'utilisateur, un état de pré-commit maintenu par votre application est mesuré lorsque l'utilisateur a effectué un geste de retour bord à bord, mais ne s'est pas engagé à le relâcher. Vous devez fournir des paramètres qui s'appliquent à cet état de pré-commit.
La quantité de mouvement affichée est basée sur le point où l'utilisateur peut se déplacer le plus loin possible de l'emplacement où le geste a commencé.
Caractéristiques de mouvement
Les transitions d'éléments partagés sont directement affectées par le décalage x et y depuis le début du geste. Cette section décrit les spécifications et les valeurs qui régissent les mécanismes utilisés pour les commentaires à l'écran.
Les illustrations suivantes illustrent les spécifications de mouvement recommandées pour les animations de surface.
1 Marges: 5% de la largeur de chaque côté (par rapport à l'aire de la surface décrite à la section 3)
2 Décalage calculé si la fenêtre est ajustée au centre. Calculer la marge de 8 dp requise: ((largeur de l'écran / 20) - 8) dp
3 La surface s'ajuste jusqu'à 90 %, ce qui laisse 10% de marge disponibles (voir 1).
4 Conservez un espace de 8 dp par rapport au bord de l'écran.
Nous vous recommandons de conserver les paramètres répertoriés pour une expérience cohérente, mais vous pouvez modifier les spécifications pour créer une animation personnalisée.
Dans la figure précédente, la largeur de l'écran est de 1 280. Le décalage X est donc de 56 dp. La formule pour cela est la suivante:
((1 280/20)-8)= décalage x de 56 dp
1 Espace entre le bord et la marge de l'appareil disponible pour le décalage y
2 Si la surface se déplace en dehors de l'écran, réduisez-la de 50 % maximum.
2 La surface commence par être centrée verticalement. Le décalage y est défini comme suit:
- Limiter le décalage y pour que la surface ne dépasse jamais la marge de 8 dp de l'écran
- Pour éviter que la surface ne s'arrête brusquement, utilisez un interpolateur de ralentissement et mappez la limite du décalage y
3 Conserver la marge de 8 dp une fois que la surface est suffisamment courte
Pour une animation personnalisée, vous devez définir tous les paramètres suivants.
Paramètre |
Valeur |
Le contexte |
|---|---|---|
Décalage X |
((largeur de l'écran / 20) - 8) dp |
Décalage maximal, conserve une marge de 8 dp |
Décalage Y |
((hauteur d'écran disponible / 20) -8) dp |
Décalage maximal, conserve une marge de 8 dp |
Échelle |
90% |
Échelle minimale de la taille de la fenêtre |
Les développeurs qui implémentent l'animation personnalisée à l'aide des API de prévisualisation du Retour utilisent ces paramètres.
Interpolation de la progression des gestes
Une valeur de progression linéaire peut être dérivée du geste de l'utilisateur, mais elle ne doit pas être utilisée directement pour les animations d'aperçu. Au lieu de cela, le feedback devrait être adapté
à ce qui aide l'utilisateur lors de sa rétroaction. Fournissez la valeur de progression avec un jeton STANDARD_DECELERATE ou un PathInterpolator(0f, 0f, 0f, 1f) afin que le geste soit plus visible au début. Ce retour améliore la détection des mouvements au début du geste et utilise la décélération pour contrôler le retour de manière claire et visuellement agréable.
Engagement sur l'action
Lorsqu'un utilisateur dépasse le point de commit et le relâche, une animation s'affiche pour confirmer la fin de l'action.
Lorsque les utilisateurs effectuent des gestes rapidement, ceux-ci sont généralement interprétés comme des glissements d'un geste vif. Ce type d'interaction peut appliquer des vitesses élevées aux éléments à l'écran. Ainsi, dans le contexte des aperçus arrière, le système absorbe cette vitesse en animant momentanément la surface vers son état d'aperçu maximal avant d'exécuter l'animation de commit.
L'intensité du glissement d'un geste vif détermine la portion de l'animation d'aperçu qui s'affiche avant l'exécution de l'animation de commit. Le type d'animation affiché dépend du contenu ignoré, comme illustré dans la vidéo 2.
Annuler l'action
La vidéo 6 montre ce qui se passe lorsqu'un utilisateur quitte le seuil avant le seuil défini, et affiche une animation confirmant que l'action a été annulée. Pour les transitions d'éléments partagés, la fenêtre se déplace rapidement et revient à son état d'origine bord à bord avant le début du geste.