Share
Dans ce tutoriel, je vais vous apprendre à créer un prototype animé de la conception de votre application mobile. Le prototype ressemblera à une application réelle sur votre téléphone. vous serez capable de naviguer et de faire défiler votre conception, en utilisant des gestes et des animations personnalisées.
À la fin de ce didacticiel, vous pourrez créer une version prototype animée de toute conception d’application à l’aide de Pixate. Commençons!
Pour ce tutoriel, vous aurez besoin de trois choses à suivre:
À mon avis, Pixate est le meilleur outil à la disposition des concepteurs pour créer des prototypes d’applications animées personnalisées entièrement fonctionnels, sans écrire une seule ligne de code..
Contrairement à d'autres outils de prototypage, tels que Flinto ou Marvel, Pixate vous permet de séparer des calques et d'intégrer des interactions, telles que Glisser, Taper, Taper deux fois, Défiler, Pincer, etc..
Le prototype lui-même existe sur le web. Au cours de ce tutoriel, nous utiliserons la version Web de Pixate, mais nous obtiendrons les résultats finaux dans une application native sur notre téléphone, qui offre une expérience fluide de grande qualité..
Avant de pouvoir créer notre premier prototype, nous devons configurer un nouveau projet dans Pixate..
Une fois connecté à votre compte, cliquez sur le bouton Nouveau projet bouton, puis sélectionnez le Nouveau prototype option.
Ici, nous pouvons sélectionner le type d’appareil pour lequel nous concevons. Dans ce cas, choisissons l'iPhone 6, car nous avons conçu l'application de mise en forme pour cet appareil particulier dans Sketch..
Remarque: nous pouvons également sélectionner des tailles d'écran smartwatch telles que l'Apple Watch, la LG G Watch ou encore le Moto 360.
Pixate nous permet d’animer chaque objet de notre prototype en fonction de divers événements et interactions, comme le chargement de l’écran, le toucher, le toucher deux fois ou le défilement. Cela signifie également que nous devons exporter séparément les éléments que nous voulons animer dans notre prototype..
Ouvrons notre fichier Sketch et commençons à exporter chaque élément un par un. Si vous regardez le prototype final, vous verrez que dans le cas de «l'écran GO», j'ai exporté séparément la barre de navigation, la barre d'onglets, chaque colonne de la prévision météorologique et les cercles d'objectifs..
Vous devriez exporter en PNG, car il est essentiel d'avoir des couches transparentes.
Pointe: toujours se concentrer sur un écran à la fois. À ce stade du processus, vous ne devez exporter que les couches de «l'écran GO». Il sera donc plus facile de travailler avec et de modifier les éléments à la volée si nécessaire..
Pour importer des ressources dans Pixate, il suffit de déplacer et de déposer les fichiers PNG exportés dans la fenêtre du navigateur:
Maintenant, il est temps de reconstruire notre écran en Pixate. Ce travail peut être fait beaucoup plus rapidement si nous faisons référence à la Panneau inspecteur à la fois dans Pixate et Sketch. Quand c'est le cas, il suffit de copier et coller les valeurs X et Y de chaque élément.
Remarque: N'oubliez pas que notre conception Sketch a été réalisée avec une résolution de 2x2, alors que dans Pixate, nous travaillons avec une résolution de 1x1. Cela signifie que nous devons diviser chaque nombre de Sketch par 2 avant de postuler chez Pixate..
Ouvrons l'application Pixate sur notre iPhone, où nous pouvons voir que notre conception a commencé à se mettre en place. À partir de maintenant, chaque fois que nous modifierons quelque chose sur l'application Web, celle-ci sera automatiquement synchronisée avec nos téléphones..
Après avoir sélectionné la première colonne des prévisions météo, nous pouvons voir les types d’animations disponibles sur le côté gauche de notre navigateur. Glissons et déposons le Fondu d'animation sur le côté opposé, la barre latérale droite.
Maintenant, nous devons spécifier quand nous souhaitons que cette animation apparaisse. Met le Basé sur valeurs à * ECRAN *, chargé.
Cela signifie que notre animation sera lue juste après le chargement du premier écran, ce qui se produit immédiatement lorsque nous exécutons le prototype..
Puisque notre objectif est d’avoir un effet de fondu, définissons l’opacité initiale sur 0% sur le Panneau de propriétés, et à 100% sur le Panneau d'animation.
Au bas de la Panneau d'animation nous pouvons également définir la courbe d'accélération, la durée et les valeurs de délai.
Vous devez définir la durée entre 0.2-0.4s, mais il n'y a pas officiel Je vous encourage donc à jouer avec ces valeurs jusqu'à ce que vous sentiez qu'elles sont tout à fait justes..
Remarque: dans mon prototype, j'ai préféré utiliser des animations un peu plus lentes pour que vous puissiez les voir plus clairement. Dans un vrai projet, je recommanderais un mouvement plus rapide et plus subtil.
Maintenant, sélectionnons la deuxième colonne des prévisions météorologiques et définissons exactement la même chose. Fondu d'animation comme nous l’avions fait auparavant, avec une seule différence: cette fois, délai d'animation être autour 0.1-0.3s. De cette façon, les animations seront lues dans une séquence.
Continuez avec exactement la même méthode pour tous les éléments auxquels vous souhaitez ajouter une animation en fondu, mais n'oubliez pas d'augmenter en permanence la valeur du délai d'animation.
Maintenant, configurons l’interaction entre les cercles dans la section des objectifs. Afin de pouvoir faire défiler horizontalement entre les anneaux d’objectif, nous devons les importer sous forme de trois fichiers PNG distincts..
Après les avoir placés dans la bonne position, créer un nouveau calque en Pixate; nécessaire pour activer le défilement horizontal. Sur le Panneau de propriétés assurez-vous de définir l'apparence Aucune image. Avant d’ajouter une interaction à cette couche, nous allons ajouter les fichiers PNG de la série d’objectifs à la nouvelle couche de la Couches panneau. En termes simples, cela ressemble à la Groupe outil dans Esquisse.
Maintenant nous pouvons ajouter un Interaction de glisser à cette nouvelle couche et définir Défilement horizontal avec position minimale: -255pt et position maximale: 120 pt sur le Panneau d'animation.
Pour le petit effet de rebondissement lors du défilement horizontal, j'ai créé une animation personnalisée avec des conditions spéciales. Pour commencer, ajoutez un Déplacer l'animation à la dernière couche, qui contient toutes les couches de l'anneau.
Maintenant, dans le Animations panneau défini le Basé sur valeur à Paramètres d'objectif et Déverrouiller.
Pour le premier SI condition J'ai utilisé la formule suivante: goal_settings.x> -255 && goal_settings.x < -67, ce qui signifie que si la position du calque du groupe de buts (ID de calque: buts_objectif) est supérieure à -255 pt et plus petit que -67 pt, il déplacera le côté gauche du calque vers le -67 pt point.
Pour l'animation j'ai utilisé un Courbe d'assouplissement du printemps avec un valeur de frottement de 25 et tension de600.
Ma deuxième condition IF est: goal_settings.x <= -67 && goal_settings.x > -255, puis déplacez le côté gauche de la couche pour -255 pt.
La troisième condition est: goal_settings.x> -67 && goal_settings.x < 150, puis déplacez le côté gauche de la couche pour 150 pt.
Dernier point, mais non le moindre, la dernière instruction IF est la suivante: goal_settings.x < 150 && goal_settings.x > -67, qui déplacera le côté gauche de la couche à -67 pt.
Remarque: Je sais que cela a l'air un peu compliqué pour la première fois, mais je vous encourage à copier / coller ma solution et à l'essayer, puis à changer quelque chose et à l'essayer à nouveau. Mes conditions ne sont en aucun cas parfaites, vous pouvez donc même les améliorer et les ajuster, jusqu'à ce qu'elles se sentent bien pour vous..
Comme nous l'avons fait avec les anneaux de buts, créons un nouveau calque et y insérons chaque calque. Nous ne faisons que regrouper les couches de «l'écran GO» pour le moment..
Avant de commencer à importer et à reconstruire l’écran «Défis» dans Pixate, nous devons créer un nouveau calque, qui fonctionnera en tant que groupe de couches pour chaque élément de cet écran. Plaçons ceci juste à côté de «l'écran GO» sans aucune marge ni espace entre eux.
Après avoir importé et reconstruit notre écran, couche par couche, nous devons définir le défilement vertical pour les cartes de défis..
Let's créer un nouveau calque sans fond d’image et y ajouter nos couches de cartes. Le défilement vertical est encore plus facile que le défilement horizontal, car la seule chose à faire est d’ajouter un Interaction de défilement à cette nouvelle couche.
Pour voir également «l'écran Challenges» sur notre iPhone, nous devons revenir à notre «écran GO» et ajouter un nouveau calque rectangulaire en haut du bouton Challenges de la barre d'onglets..
Définissez l'apparence sans remplissage d'image et ajoutez un Interaction du robinet à cela. Maintenant revenons en arrière, sélectionnez notre couche de groupe Challenges, qui contient tous les éléments de «l’écran Challenges» et ajoutez un Déplacer l'animation à cela.
La seule chose qui nous reste à faire est de définir le Basé sur événement au bouton que nous avons récemment ajouté à notre "écran GO" avec Interaction du robinet et mettre le Déménager à valeur à 0 pt. Ensuite, lorsque nous appuierons sur le bouton de défis de l’écran «GO», le groupe de groupes de défis se placera à sa place..
Pour animer les cartes de défis, nous allons utiliser deux animations, un fondu et un mouvement, en même temps. Assurez-vous que vous avez défini le Basé sur valeur au bouton Challenges.
Pour l’animation de fondu, nous utilisons la même technique que pour l’écran GO. Nous allons donc définir le Opacité à 0% sur le Propriétés panneau et le Fondu au valeurà 100% sur le Animations panneau. Pour la durée que j'ai utilisé 0.5s avec un 0.2s retard.
Remarque: n'oubliez pas d'augmenter continuellement la valeur du délai pour chaque carte.
Notre deuxième animation est un Déplacer l'animation. Comme dans le cas de l’animation de fondu, définissons la Basé sur valeur du bouton Challenges et utilisez exactement la même durée et le même délai d’animation que pour l’animation en fondu. Maintenant, réglez le Déplacer vers le haut valeur à 10px, qui déplacera notre carte de défi 10px vers le haut, lorsque l'animation commence.
Comme à la fin de l'animation, chaque carte challenge aura une résolution de 10 pixels, nous devons les déplacer de 10 pixels vers le bas sur notre toile Pixate..
Créons à nouveau un nouveau calque, qui contiendra la section Défis de navigation. Comme dans le cas de la section Mes défis, ajoutons un Interaction de défilement à cela.
Pour pouvoir basculer entre les sections Mes défis et Parcourir les défis, nous devons créer un nouveau calque en haut du titre Parcourir les défis, qui fonctionnera comme un bouton. Définissez le remplissage du calque sur Aucune image et ajouter un Interaction du robinet à cela.
Maintenant, si nous retournons à notre couche de groupe Parcourir les défis (créée à l’étape précédente), nous pouvons ajouter un Fondu d'animation à ce basé sur ce nouveau bouton. Donc, jusqu'à ce que nous appuyions sur le bouton Parcourir les défis, l'opacité de la section des défis de navigation est de 0%. Après le tapotement, ce sera 100%.
Enfin, j'ai ajouté un Animation d'échelle et de fondu aux barres de progression de la chronologie dans la section Parcourir les défis.
Remarque: n'oubliez pas d'utiliser exactement la même durée d'animation et les mêmes valeurs de délai pour les animations en fondu et en échelle.
Avant de commencer à animer «l’écran des activités», nous devons également répéter quelques étapes effectuées dans le cas de «l’écran des défis»..
Créons un nouveau calque juste à côté de l’écran «Défis» sans aucun bourrage. Cette couche sera la couche de groupe pour les éléments sur l’écran «Activités».
Revenons maintenant à notre écran «GO» et créons un nouveau calque en haut de l'écran. Activités bouton sur la barre d'onglets. Ajouter un Interaction du robinet à cette nouvelle couche.
Retournez à la couche de groupe Activités et ajoutez un Interaction de déplacement à cela basé sur notre nouveau bouton.
Maintenant, ajoutez un Fondu d'animation à chaque résultat sur l'écran Activités avec un 0.4s durée de l'animation et un 0.1s délai d'animation entre les résultats.
Remarque: n'oubliez pas de régler le Basé sur valeur au «bouton Activités», que nous avons placé sur l’écran «GO».
Créez un autre groupe de couches et placez-y chaque séance d'entraînement, à l'exception de la première. Nous aurons besoin de cela pour la Descendre l'animation, car descendre d'une seule couche est beaucoup plus facile que de descendre six ou sept couches à la fois.
Maintenant, ajoutez un Interaction du robinet à la première séance d'entraînement, puis ajoutez un Déplacer l'animation au groupe de couches que nous venons de créer. Dans le panneau Animations, définissez le Basé sur valeur à la première séance d'entraînement et ajouter un Déplacer vers le haut valeur autour 277 pt. Lorsque nous tapotons sur la première séance d’entraînement, tout le reste s’affiche à l’écran..
Pour la vue détaillée de l'entraînement, j'ai seulement utilisé Fondu et mouvement animations basées sur la première séance d'entraînement.
Au début, fondez-vous et déplacez-vous en arrière-plan, puis le graphique et enfin les numéros et détails spécifiques de l'entraînement.
Vous devriez jouer ici un peu avec les durées d’animation et les délais.
Vous êtes génial! Vous venez de créer votre premier prototype Pixate animé, entièrement fonctionnel et personnalisé. Après avoir suivi ce tutoriel, j'espère que vous serez plus confiant dans l'utilisation de Pixate pour les prototypes d'applications mobiles..
Je suis curieux d'entendre ce que vous pensez de ce tutoriel et n'hésitez pas à poser des questions dans les commentaires. Je serai ici pour vous aider et y répondre..
Accentsconagua