Conception De L'interface Utilisateur

Un guide étape par étape de l'animation d'interface utilisateur avec Principe et Sketch

Concevoir une interface utilisateur avec l'animation et les 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 de courte durée d'attention. C'est pourquoi Airbnb a récemment présenté Lottie - son 'Nouvel outil open source qui simplifie l'ajout d'animations aux applications natives.'

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

Dans ce tutoriel, vous apprendrez efficacement UI animation techniques en utilisant Principle pour Mac. Après avoir parcouru ce guide, vous serez en mesure de transformer des maquettes ternes et statiques en prototype interactif pour mieux présenter votre travail. Vous pouvez appliquer ce que vous apprendrez ici pour améliorer votre prochaine présentation de l'interface utilisateur et vos clichés de 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 possédez pas déjà, vous pouvez télécharger un essai gratuit en utilisant les liens ci-dessous.

principe gestalt d'organisation perceptive

Téléchargez un essai gratuit de Principle Ici .
Téléchargez un essai gratuit de Sketch Ici .
qu'est-ce que l'optimisation des requêtes dans le serveur SQL
Téléchargez le fichier source du didacticiel gratuit Ici .

Un aperçu de l'interface principale

Guide d

Si vous êtes habitué à Mac OS, l’interface de Principle vous paraîtra 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 d'animation de base en principe

Il est relativement simple d'animer avec Principle. Vous n'avez pas besoin d'avoir un arrière-plan d'animation pour commencer. En fait, la plupart des tâches lourdes sont automatisées 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 permet de 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 tapant, en faisant défiler, en survolant, etc. En principe, un déclencheur peut être défini en sélectionnant n'importe quel élément dans Principle et en cliquant sur l'icône qui apparaît sur son côté droit avec une icône en forme d'éclair.
Transition: Un changement d'état d'un plan de travail à un autre, c'est-à-dire un glissement vers la gauche ou la droite.
Effet de détente: Le niveau de fluidité d'une transition en fonction du début et de la fin de l'animation.

A. Déclenchement et transition

Guide d

comment créer un conseil consultatif

La première étape pour animer avec Principle 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).

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

Une fois que vous avez le jeu d'animation, vous pouvez le prévisualiser dans la fenêtre d'aperçu.

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

Un tutoriel pour animer l

pourquoi utiliser ruby sur des rails

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» du panneau d'animation en suivant ces trois étapes.

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.
Prolongez la durée de l'animation: Déplacez les extrémités des lignes bleues.
Appliquer l'assouplissement: Sélectionnez tous les points en forme de losange, 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 en mesure 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

Déplacez les plans de travail pour préparer des transitions naturelles entre eux: par exemple, un écran glissant à partir de la droite doit toucher le bord droit de l'écran qu'il remplace sur l'animation.
Une fois que votre fichier Sketch est complet, sautez dans Principle, créez un document vierge correspondant au ratio 360x640, et cliquez sur le bouton «Importer».

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

Pour créer une transition transparente entre les pages, vous pouvez supprimer chaque en-tête à l'exception du premier. Les en-têtes ont été initialement ajoutés uniquement pour mettre en valeur l'apparence de l'application. Vous ne conserverez l'en-tête que 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

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.
Sélectionnez les formes groupées. Choisissez le déclencheur «Tap» et faites glisser et déposez sur le même plan de travail pour créer un doublon.
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.
Pour terminer, 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

Commencez par créer l'animation de diapositives. 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).
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.
Enfin, à l'intérieur du panneau d'animation, prolongez la chronologie, disons à 1s. Appliquez un effet «Aplanir les deux» à la chronologie (assurez-vous d'avoir sélectionné tous les points en forme de losange et cliquez sur une ligne bleue pour appliquer l'effet à tous).
Prévisualisez votre animation et déplacez les formes jusqu'à ce que l'effet de parallaxe vous convienne.

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

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

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

Sélectionnez le bouton fléché vers le bas (assurez-vous de sélectionner tout le groupe) et appliquez le déclencheur «Tap» en faisant glisser une flèche à partir de celui-ci n'importe où dans le plan de travail.
Sélectionnez tous les écrans (du groupe maître) et déplacez tout vers le haut de 640 pixels. Cette étape fait apparaître l'écran À propos de la vue.
Revenez au plan de travail précédent et déplacez les formes de 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

Appliquez le déclencheur 'Tap' au bouton fléché vers le bas (assurez-vous de sélectionner tout le groupe), et cela créera un nouveau plan de travail.
Sur le nouveau plan de travail, sélectionnez tous les écrans et déplacez-les vers le haut de 640 pixels.
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 remonter, alors assurez-vous d'utiliser un placement différent pour créer un effet plus dynamique.
Enfin, prolongez l'animation et appliquez un «allégement à la fois» sur tous les timelines bleus à l'intérieur du panneau d'animation.

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

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

Notez que tout calque et toute forme ayant un effet (comme des ombres) à partir du fichier original de Sketch sont importés dans Principle en tant qu'image. Si vous avez besoin de modifier des formes dans Principle, essayez de ne pas ajouter d'effet spécial avant l'importation.
Cela étant dit, en utilisant l'icône existante comme guide, dessinez trois rectangles minces 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.
Sélectionnez l'icône nouvellement créée et appliquez-lui un déclencheur «tap».
Dans le nouveau plan de travail, faites pivoter le rectangle supérieur et inférieur de 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.
Pour voir l'animation que vous venez de créer, associez l'icône de menu modifiée au plan de travail d'aperçu avec un déclencheur 'Appuyez' et testez-la.

Sur le plan de travail de l'état final, déplacez les écrans vers la droite jusqu'à ce que les liens de menu soient alignés à gauche de l'icône du menu de fermeture.
Sélectionnez tout ce qui se trouve dans le dossier 'Couleurs', sauf le contenu du menu et l'arrière-plan gris clair, et réduisez l'opacité à 25 pour cent. L'animation fera disparaître le contenu de la page pour se concentrer sur le menu.
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

Dans le menu ouvert, appliquez un déclencheur «Tap» sur le bouton «Contactez-nous».
Sur le plan de travail nouvellement créé, déplacez tous les écrans vers le haut de 640 px.
Revenez ensuite au plan de travail des aperçus et déplacez les éléments de la page «Formulaire» vers le bas.
Déplacez les éléments à différentes valeurs Y pour créer l'effet de parallaxe.
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 scénario bleues.

Se terminant par la page de remerciement

Appliquez un déclencheur «Tap» sur le bouton «envoyer un message».
Sur le nouveau plan de travail, déplacez tous les écrans vers le haut de 640 px.
Revenez ensuite au plan de travail des aperçus et déplacez les éléments de la page «Confirmation» vers le bas.
Jouez avec l'échelle et la rotation pour l'icône colorée pour créer un effet plus dynamique.
Assurez-vous d'ajouter à la durée 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.