Un guide étape par étape de l'animation de l'interface utilisateur avec principe et croquis

Concevoir une interface utilisateur avec des animations et des transitions à l'esprit est un excellent moyen de planifier une meilleure expérience utilisateur (UX) pour votre prochaine application. Les micro-interactions animées sont le moyen idéal pour stimuler l'engagement des utilisateurs, dans un monde où la durée d'attention est courte. C'est pourquoi Airbnb a récemment introduit Lottie - son "nouvel outil open source qui permet d'ajouter des animations aux applications natives en un clin d'œil".

Des projets comme Lottie montrent l'importance croissante de l'ajout de mouvement en tant que nouvel élément pour créer une UX améliorée pour les applications et les sites Web.

Dans ce didacticiel, vous apprendrez des techniques d'animation d'interface utilisateur efficaces à l'aide de Principle pour Mac. Après avoir parcouru ce guide, vous pourrez transformer des maquettes ternes et statiques en prototypes interactifs pour mieux présenter votre travail. Vous pouvez appliquer ce que vous apprendrez ici pour améliorer votre prochain pitch d'interface utilisateur et vos tirs Dribbble.

Commençons.

Téléchargez ces ressources gratuites pour suivre.

Vous n'aurez besoin que des applications Principle et Sketch pour suivre. Si vous ne les avez pas déjà, vous pouvez télécharger un essai gratuit en utilisant les liens ci-dessous.

• Téléchargez un essai gratuit de Principle ici.

• Téléchargez un essai gratuit de Sketch ici.

• Téléchargez le fichier source du tutoriel gratuit ici.

Un aperçu de l'interface principale

Si vous êtes habitué à Mac OS, l'interface de Principle vous semblera très familière. Il comporte trois sections principales : une barre latérale, une zone de conception qui affiche les plans de travail et la fenêtre d'aperçu que vous pouvez redimensionner et déplacer.

Comprendre les concepts de base de l'animation en principe

Il est relativement simple à animer avec Principle. Vous n'avez pas besoin d'avoir un arrière-plan d'animation pour commencer. En fait, la plupart des gros travaux sont automatisés par Principle, et vous n'avez qu'à vous concentrer sur ce qui démarre une animation (c'est-à-dire un bouton, un lien, un événement de défilement), comment l'animation commence et comment elle se termine.

Pour vous aider à mieux suivre, voici un bref lexique des termes que vous verrez tout au long du guide.

• Composant : un composant est une sorte de regroupement qui aide à contenir des éléments et même des animations. C'est l'équivalent d'un « objet intelligent » dans Photoshop ou d'un « symbole » dans Illustrator.
• Déclencheur : Une façon de démarrer une animation - c'est-à-dire en appuyant, en faisant défiler, en survolant, etc. En principe, un déclencheur peut être défini en sélectionnant n'importe quel élément à l'intérieur de Principe et en cliquant sur l'icône qui apparaît sur son côté droit avec une icône d'éclair.
• Transition : un changement d'état d'un plan de travail à un autre, c'est-à-dire un glissement vers la gauche ou vers la droite.
• Effet d'accélération : niveau de fluidité d'une transition en fonction du début et de la fin de l'animation.

A. Déclencheur et transition

La première étape pour animer avec le principe est de configurer un déclencheur (le comportement ou l'action qui démarre l'animation) sur un élément (c'est-à-dire un bouton ou un lien), et de modifier son état initial et/ou final (c'est-à-dire sa position ou son échelle du début à la fin de l'animation).

1. Définissez un état initial : à quoi ressemblent vos éléments d'interface utilisateur au début avant que l'animation n'ait lieu.
2. Définissez le déclencheur : en sélectionnant l'élément d'interaction et l'action qui active l'animation.
3. Définissez l'état final : comment les éléments sont affichés à la fin de l'animation.

Une fois que vous avez défini l'animation, vous pouvez la prévisualiser dans la fenêtre de prévisualisation.

B. Durée de l'animation et effet d'accélération

Par défaut, Principle crée une animation d'une demi-seconde. Parfois, cela ne suffit pas pour voir l'effet de transition en détail. Vous pouvez modifier la durée et l'effet "d'accélération" depuis le panneau d'animation en suivant ces trois étapes.

1. Ouvrez le panneau d'animation : sélectionnez les flèches noires entre deux plans de travail et cliquez sur le bouton "Animer" situé sur la barre supérieure.
2. Prolongez la durée de l'animation : déplacez les extrémités des lignes bleues.
3. Appliquer l'assouplissement : sélectionnez tous les points en forme de losanges et choisissez "Ease Both" dans la liste déroulante pour lisser les transitions.

Ce que vous obtiendrez

Cette vidéo vous montre ce que vous serez capable de créer une fois que vous aurez suivi ce didacticiel. L'application de démonstration présente la palette de couleurs Material Design de Google et vous donne plus de détails une fois que vous avez sélectionné une couleur. Vous allez créer une animation de chargement, des transitions de page avec un effet de parallaxe fluide et un curseur de menu.

Assurez-vous d'avoir téléchargé le fichier source du didacticiel gratuit ici.

Commençons.

Passer d'un fichier d'esquisse au principe

1. Déplacez les plans de travail pour préparer des transitions naturelles entre eux : par exemple, un écran glissant depuis la droite doit toucher le bord droit de l'écran qu'il remplace sur l'animation.
2. Une fois que votre fichier Sketch est défini, passez au principe, créez un document vierge correspondant au format 360x640 et cliquez sur le bouton "Importer".

Suppression des en-têtes d'écrans pour un défilement fluide

Pour créer une transition transparente entre les pages, vous pouvez supprimer chaque en-tête sauf le premier. Les en-têtes ont été initialement ajoutés uniquement pour mettre en valeur l'apparence de l'application. Vous ne conserverez que l'en-tête sur l'écran "Bienvenue", et il servira de barre collante avec le menu et le titre de l'application.

Création de l'animation de chargement - Les formes

1. Sélectionnez le groupe de formes de chargement et cliquez sur "Créer un composant" contenant les formes de chargement et le texte. Créez un composant pour le texte dans le premier symbole ; nous animerons le texte séparément juste après.
2. Sélectionnez les formes groupées. Choisissez le déclencheur "Appuyer" et faites un glisser-déposer sur le même plan de travail pour créer un doublon.
3. Le deuxième plan de travail représente l'état final de l'animation et vous pouvez faire pivoter le groupe à l'aide de la propriété angle. Donnez différentes valeurs d'angle au "remplissage" et au "contour" pour créer un effet plus intéressant.
4. Pour finir, sélectionnez les flèches entre les plans de travail, cliquez sur "Animer" pour ouvrir le "panneau d'animation", et modifiez la durée en faisant glisser les points de fin à environ 1,00 s.

Création de l'animation de chargement - Le texte

1. Tout d'abord, créez l'animation de diapositive. Sélectionnez la forme du bouton et appliquez l'événement déclencheur "Tap". Dans le nouveau plan de travail, déplacez tous les écrans vers le haut de 640 pixels (égal à la hauteur actuelle du plan de travail).
2. Maintenant, créons la parallaxe. Accédez au plan de travail précédent, sur l'écran d'accueil, déplacez les formes géométriques et le texte vers le bas à différentes valeurs Y.
3. Enfin, à l'intérieur du panneau d'animation, étendez la chronologie, disons à 1s. Appliquez un effet "Ease Both" à la timeline (assurez-vous d'avoir sélectionné tous les points en forme de losange et cliquez sur n'importe quelle ligne bleue pour appliquer l'effet à tous).
4. Prévisualisez votre animation et déplacez les formes jusqu'à ce que l'effet de parallaxe vous convienne.

Création de l'effet de parallaxe - Page d'accueil

1. Sélectionnez le composant de chargement et appliquez le déclencheur "Appuyer" en faisant glisser une flèche à partir de celui-ci n'importe où dans la planche graphique.
2. Sélectionnez tous les écrans (du groupe maître) et déplacez-le de 640px vers le haut. Cette étape affiche l'écran de bienvenue.
3. Revenez au plan de travail précédent et déplacez les formes sur l'écran "Bienvenue" vers le bas. Cela crée l'effet de glissement asynchrone appelé parallaxe.
4. Ajustez l'animation en ajoutant du temps à la transition dans le panneau d'animation : sélectionnez la flèche entre la planche graphique, puis faites glisser les extrémités sur les lignes bleues à environ 1 s.

Création de l'effet de parallaxe - À propos de la page

1. Sélectionnez le bouton flèche vers le bas (assurez-vous de sélectionner l'ensemble du groupe) et appliquez le déclencheur "Appuyer" en faisant glisser une flèche à partir de celui-ci n'importe où dans la planche graphique.
2. Sélectionnez tous les écrans (du groupe maître) et déplacez le tout de 640px vers le haut. Cette étape affiche l'écran À propos de.
3. Revenez au plan de travail précédent et déplacez les formes sur l'écran "À propos" vers le bas. Cela crée l'effet de glissement asynchrone appelé parallaxe.

Création de l'effet de parallaxe - Page Couleurs

1. Appliquez le déclencheur "Appuyez" sur le bouton fléché vers le bas (assurez-vous de sélectionner l'ensemble du groupe), et cela créera un nouveau plan de travail.
2. Sur le nouveau plan de travail, sélectionnez tous les écrans et déplacez-les de 640 pixels vers le haut.
3. Sur le plan de travail précédent, déplacez les couleurs et le texte vers le bas. Notez que plus vous déplacez un objet vers le bas, plus il faut de temps pour le faire glisser vers le haut, alors assurez-vous d'utiliser un placement différent pour créer un effet plus dynamique.
4. Enfin, prolongez l'animation et appliquez une "facilité à la fois" sur toutes les chronologies bleues à l'intérieur du panneau d'animation.

Faire glisser une page depuis le côté - Page de sélection des couleurs

1. Appliquez un déclencheur "Appuyez" sur le bouton "Charger plus" sur l'écran "Couleurs".
2. Dans le nouveau plan de travail, déplacez le contenu "Couleurs" et "Sélection" vers la gauche de 360px (largeur du plan de travail)
3. Revenez au plan de travail précédent et déplacez le contenu de l'écran dans la direction opposée - à droite.
4. Notez que vous pouvez également animer l'opacité de l'écran en passant de zéro à 100 %.
5. Jouez avec la durée de l'animation et l'effet d'accélération pour ajuster l'effet de transition.

Animer l'icône du menu

1. Notez que tout calque et toute forme ayant un effet (comme des ombres) à partir du fichier d'origine de Sketch sont importés dans Principle en tant qu'image. Si vous devez modifier des formes dans Principle, essayez de ne pas ajouter d'effet spécial avant l'importation.
2. Cela étant dit, en utilisant l'icône existante comme guide, dessinez trois rectangles fins et regroupez-les pour créer l'icône du menu hamburger. Maintenant, vous pouvez supprimer ou masquer l'icône de menu précédente.
3. Sélectionnez l'icône nouvellement créée et appliquez-lui un déclencheur "appuyez".
4. Dans le nouveau plan de travail, faites pivoter le rectangle supérieur et inférieur sur l'icône de menu, assurez-vous qu'ils sont alignés au centre et donnez une opacité de zéro pour cent à celui du milieu.
5. Pour voir l'animation que vous venez de créer, reliez l'icône de menu modifiée au plan de travail d'aperçu avec un déclencheur "Appuyez", et testez-la.

Création de l'effet de curseur de menu

1. Sur le plan de travail de l'état final, déplacez les écrans vers la droite jusqu'à ce que les liens du menu soient alignés à gauche de l'icône du menu de fermeture.
2. Sélectionnez tout ce qui se trouve dans le dossier "Couleurs", à l'exception du contenu du menu et de l'arrière-plan gris clair, et réduisez l'opacité à 25 %. L'animation fera disparaître le contenu de la page pour se concentrer sur le menu.
3. Prolongez la durée de l'animation et accédez au plan de travail précédent pour déplacer légèrement le contenu du menu afin de créer un effet fluide.

Passer à l'écran de contact

1. Dans le menu ouvert, appliquez un déclencheur "Appuyez" sur le bouton "Contactez-nous".
2. Sur le plan de travail nouvellement créé, déplacez tous les écrans de 640 px vers le haut.
3. Revenez ensuite au plan de travail des aperçus et déplacez les éléments de la page "Formulaire" vers le bas.
4. Déplacez les éléments à différentes valeurs Y pour créer l'effet de parallaxe.
5. Enfin, sélectionnez les flèches entre les plans de travail, prolongez la durée de l'animation et appliquez "Ease Both" aux lignes de temps bleues.

Terminer avec la page de remerciement

1. Appliquez un déclencheur "Appuyez" sur le bouton "envoyer un message".
2. Sur le nouveau plan de travail, déplacez tous les écrans de 640 px vers le haut.
3. Revenez ensuite au plan de travail des aperçus et déplacez les éléments de la page "Confirmation" vers le bas.
4. Jouez avec l'échelle et la rotation de l'icône colorée pour créer un effet plus dynamique.
5. Assurez-vous d'ajouter à la longueur de l'animation pour mieux percevoir l'effet de transition.

La simplicité d'ajouter des animations avec principe.

Principle est un outil fantastique pour donner vie à vos idées d'interaction avec l'interface utilisateur.

L'interface est compatible Mac et a été conçue pour fonctionner de manière transparente avec les fichiers Sketch.

Principle automatise la plupart des effets d'animation et de transition pour vous. Tout ce que vous avez à faire est d'appliquer un déclencheur à une forme sur un plan de travail et de modifier les propriétés des éléments que vous souhaitez animer sur le plan de travail final.

Veuillez laisser vos questions dans les commentaires ci-dessous. Je suis heureux d'y répondre.