Google Maps: Reproduire des animations avec Adobe Xd (Tutoriel)
Introduction
Lors de la conception d’un produit, il y une phase essentielle qui est le Prototypage. Le prototype va nous permettre de tester un concept / fonctionnalité / idée directement auprès d’utilisateurs. Grâce à celui-ci, nous allons pouvoir savoir si notre concept est compris, identifier des points bloquants et itérer rapidement pour corriger d’éventuels “painpoints ”. Il va également nous permettre de réduire les coûts et le temps de développement car tout le parcours de notre concept aura été validé en amont grâce au prototype.
Dans cet article, nous allons nous exercer à réaliser un prototype avec l’outil Adobe XD en reproduisant 2 animations de la célèbre application Google Maps.
Si vous ne possédez pas Adobe XD, vous pouvez le télécharger gratuitement ci dessous :
Et pour suivre le tutoriel plus facilement, je suis sympa je vous invite à télécharger ce fichier qui contient les éléments ainsi que le premier artboard pour se consacrer surtout aux transitions/animations 😉:
Si vous souhaitez voir le résultat final, je vous met également à disposition le fichier intégral ci dessous :
👀 Analyse des animations de l’application
Tout d’abord, en analysant la vidéo ci dessus, nous pouvons identifier 2 animations que nous allons reproduire :
- Animation “Swipe” : Lorsque nous « swipons » vers le haut le panneau du bas, celui ci se déplie partiellement puis dans un second temps occupe la totalité de l’écran et nous affiche différentes informations.
- Animation “Slider” : Une fois le panneau intégralement déplié, un slider nous permet de découvrir d’autres informations en « swipant » vers la droite.
🏗️ Création des composants
Sur l’outil Abode XD, en mode “design”, commençons par créer les composants qui vont nous être utile pour reproduire les 2 animations. Voici la liste des composants ci dessous :
1. Map → nom du calque : Map
Note : j’ai volontairement représenté la Map par un cadre bleu afin de ne se concentrer que sur les 2 animations identifiées dans le chapitre précédent.
2. Barre de recherche → nom du calque : Search Bar
Note : un rectangle blanc encapsule la barre pour réaliser un effet mais sera transparent (opacité 0%) au départ de notre prototype.
3. Bouton des calques → nom du calque : Button Layer
4. Boutons localisation / itinéraire → nom du calque : Button Itinerary / Location
5. Menu → nom du calque : Bottom Nav
6. Panneau → nom du calque : Card Full
7. Slider → nom du calque : Slider
Chacun de ces 7 éléments (calques) ont été groupés afin d’animer plus facilement notre prototype. Ils seront rangés dans l’ordre suivant dans chaque artboard.
🖼️ Création des Artboards
Allez c’est parti ! Nous pouvons maintenant travailler sur nos artboards (plans de travail) qui vont représenter chaque étape de notre futur prototype en plaçant les éléments créés précédemment.
Note : Il faut vraiment bien positionner les éléments sur ce premier artboard. Cela va être crucial pour la suite car nous allons le dupliquer (commande CTRL + D) au fur et à mesure du tutoriel pour bien comprendre comment réaliser les interactions.
1. Home Screen
Notre premier artboard va se nommer “home_screen” (celui ci est déjà créé dans le fichier mis à votre disposition → lien disponible dans l’introduction).
Une fois les éléments placés, nous allons appliquer sur les calques Search Bar, Button Layers et Bottom Nav la propriété “Fix position when scrolling”.
2. Home Screen - Step 1
Nous dupliquons l’artboard “home_screen” et nous le renommons “home_screen_step_1”. Sur cet artboard nous allons dans l’ordre :
- Sélectionner les calques Card Full + Button Itinerary / Location, et passer la valeur en Y de 489px à 319px.
- Ensuite, sélectionner uniquement le calque Button Itinerary / Location et lui appliquer la propriété “Fix position when scrolling”.
3. Home Screen - Step 2
Nous dupliquons l’artboard “home_screen_step_1” et nous le renommons “home_screen_step_2”. Sur cet artboard nous allons dans l’ordre :
- Sélectionner le calque Card Full et changer sa valeur en Y de 463px à 80px, puis sélectionner le sous calque Card background et changer son Border Radius à 0 et réduire l’opacité du Shadow à 0%.
- Toujours, dans le calque Card Full sélectionner le sous calque Button et réduire l’opacité de la couleur de fond à 0%.
- Ensuite, dans le calque Search Bar, sélectionner le sous calque Search → Background,changer l’opacité de la couleur de la Bordure à 100% et réduire l’opacité de la couleur du Shadow à 0%.
- Puis, toujours dans le calque Search Bar, sélectionner le sous calque Background animate et changer l’opacité du rectangle transparent (évoqué dans la section des composants) à 100%.
4. Home Screen - Slide 1
Nous dupliquons l’artboard « home_screen_step_2 » et nous le renommons “home_screen_slide_step_1”. Sur cet artboard nous allons :
- Dans le calque Card Full, sélectionner le sous calque Slider et changer sa valeur en X de 20px à -100px afin d’obtenir ce résultat.
Sur cette étape ainsi que sur les 3 suivantes, nous allons à chaque fois faire une translation au calque Slider de -120px sur l’axe X. Pourquoi -120px ? Pour avoir l’effet de slide « vignette par vignette » car une petite « vignette » mesure 112px de large et possède une marge de 8px sur la droite.
5. Home Screen - Slide 2
Nous dupliquons l’artboard “home_screen_slide_step_1” et nous le renommons “home_screen_slide_step_2”. Sur cet artboard nous allons :
- Sélectionner le calque Slider et changer sa valeur en X de -100px à -220px.
6. Home Screen - Slide 3
Nous dupliquons l’artboard “home_screen_slide_step_2” et nous le renommons “home_screen_slide_step_3”. Sur cet artboard nous allons :
- Sélectionner le calque Slider et changer sa valeur en X de -220px à -252px (la translation est plus petite sur cet écran car le slider se termine).
Parfait ! Nous avons créé tout nos écrans. Nous allons pouvoir passer à l’étape des transitions !
🎉 Transitions
Voila maintenant nous avons 6 artboards qui représentent l’intégralité du parcours de notre prototype. Nous allons passer à la dernière étape qui est de le rendre interactif (transitions, animations, …) et pouvoir le tester directement sur le desktop ou bien via l’application sur smartphone.
Vous allez voir que grâce à l’outil Adobe XD cette ultime étape va être facile à réaliser. Pour ce faire nous allons nous mettre en mode “Prototype” tout en haut à gauche de l’outil Adobe XD.
Nous allons passer à la dernière étape qui est surement la plus facile :), celle qui consiste à réaliser les transitions :
1. Transition numéro 1
Sur l’artboard “home_screen”, sélectionner le calque Card Full et étendre le curseur bleu vers l’artboard “home_screen_step_1”.
Trigger : Drag
Action : Auto-Animate
Destination : Home Screen - Step 1
Easing : Ease in-Out
2. Transition numéro 2
Sur l’artboard “home_screen_step_1”, sélectionner à nouveau le calque Card Full et étendre le curseur bleu vers l’artboard “home_screen_step_2”.
Trigger : Drag
Action : Auto-Animate
Destination : Home Screen - Step 2
Easing : Ease in-Out
3. Transition numéro 3
Sur l’artboard “home_screen_step_2”, sélectionner le calque Slider et étendre le curseur bleu vers l’artboard “home_screen_slide_step_1”.
Trigger : Drag
Action : Auto-Animate
Destination : Home Screen - Slide 1
Easing : Ease in-Out
4. Transition numéro 4
Sur l’artboard “home_screen_slide_step_1”, sélectionner à nouveau le calque Slider et étendre le curseur bleu vers l’artboard → “home_screen_slide_step_2”.
Trigger : Drag
Action : Auto-Animate
Destination : Home Screen - Slide 2
Easing : Ease in-Out
5. Transition numéro 5
Sur l’artboard “home_screen_slide_step_2”, sélectionner à nouveau le calque Slider et étendre le curseur bleu vers l’artboard → “home_screen_slide_step_3”.
Trigger : Drag
Action : Auto-Animate
Destination : Home Screen - Slide 3
Easing : Ease in-Out
6. Transition numéro 6
Sur l’artboard “home_screen_slide_step_3”, sélectionner le sous calque Nav Item Left dans le calque Bottom Nav et étendre le curseur bleu vers l’artboard “home_screen”.
Cette transition va nous permettre de revenir au premier artboard et éviter de devoir fermer puis relancer le prototype pour tester.
Trigger : Tap
Action : Transition
Destination : Home Screen - Step 1
Easing : Ease Out
Duration : 0.6s
🏁 Conclusion
Voici le prototype que nous obtenons à l’issu de ce tutoriel !
Donc en résumé, nous avons pu apprendre au cours de ce tutoriel à créer des composants, des artboards et les rendre interactifs grâce aux animations/transitions que nous permet de faire Adobe XD. Comme vous avez pu le constater, il faut être rigoureux dans la façon de placer les calques ainsi que les éléments. Ces derniers doivent être dès le départ à leur “états finaux” je m’explique :). Par exemple si on reprends l’exemple du composant du champ de recherche Search Bar, celui ci au départ possède un fond blanc, une bordure grise ayant une opacité à 0% et une ombre portée et a la fin de ce tutoriel, celui ci va toujours avoir son fond blanc mais nous allons réduire l’opacité de l’ombre portée à 0% et augmenter l’opacité de la bordure grise à 100%. Nous avons donc uniquement joué sur les opacités des éléments ce qui va rendre notre prototype beaucoup plus fluide et éviter des glitchs lors des tests utilisateurs !
J’espère que ce tutoriel a pu vous aider à comprendre comment concevoir un prototype prêt à être testé en quelques étapes. N’hésitez pas à mettre en commentaire de cet article vos avis / remarques 🙂
Si ce tutoriel vous a plu, dites le moi, je serai ravie d’en réaliser d’autres !
