Advertisement
  1. Web Design
  2. Prototyping

Prototyper une application de fitness avec Pixate

by
Read Time:12 minsLanguages:

French (Français) translation by Henri Lotin (you can also view the original English article)

Dans ce tutoriel, je vais vous apprendre comment créer un prototype animé du design de votre application mobile. Le prototype aura l'apparence et se comportera comme une vraie application sur votre téléphone ; vous serez en mesure de naviguer et de faire défiler votre design, en utilisant des gestes et des animations personnalisées.

À la fin de ce tutoriel, vous serez en mesure de faire une version prototype animé de n'importe quel design d'application à l'aide de Pixate. Commençons !

Éléments du tutoriel

Pour ce tutoriel vous aurez besoin de trois choses pour suivre :

Pourquoi utiliser Pixate ?

À mon avis, Pixate est le meilleur outil à la disposition des designers pour créer des prototypes animés d'application mobile complètement fonctionnels et personnalisés, sans écrire une seule ligne de code.

Contrairement aux autres outils de prototypage, comme Flinto ou Marvel, Pixate vous permet de séparer les calsues et incorporer des interactions, comme glisser, cliquer, double taper, défiler, pincer et plus.

Le prototype lui-même existe sur le web. Au cours de ce didacticiel, nous utiliserons la version web de Pixate, mais nous aurons les résultats dans une application native sur notre téléphone, qui fournit une excellente expérience fluide.

1. Nouveau projet Pixate

Avant que nous puissions commencer à créer notre premier prototype, nous devons mettre en place un nouveau projet dans Pixate.

Étape 1

Après que vous vous soyez connecté à votre compte, cliquez sur le bouton Nouveau projet, puis sélectionnez l'option Nouveau prototype.

Create a new prototypeCreate a new prototypeCreate a new prototype

Étape 2

Ici, nous pouvons sélectionner le type d'appareil spécifique pour lequel nous allons concevoir. Dans ce cas, choisissons le iPhone 6, étant donné que nous avons conçu l'application de remise en forme pour cet appareil particulier dans Sketch.

Select the target deviceSelect the target deviceSelect the target device

Note : nous pouvons également sélectionner des tailles d'écran smartwatch comme la Apple Watch, la LG G Watch ou la Moto 360.

2. Importation d'éléments vers Pixate

Pixate nous permet d'animer chaque objet unique dans notre prototype, basé sur divers événements et interactions, comme l'écran de chargement, le tap, le double-tap ou le scroll. Cela signifie également que nous devons exporter séparément les éléments que nous voulons animer dans notre prototype.

Étape 1

Nous allons ouvrir notre fichier Sketch et commencer à exporter tous les éléments un par un. Si vous regardez le prototype final, vous pouvez voir 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 météo et les cercles de l'objectif.

Exporting the assets in SketchExporting the assets in SketchExporting the assets in Sketch

Vous devez exporter en PNG, car il est indispensable d'avoir des calques transparents.

Astuce : Toujours mettre l'accent sur un seul écran à la fois. À ce stade du processus, vous devez exporter seulement les calques de « l'écran GO », ainsi il sera plus facile de travailler avec et de modifier des choses à la volée si nécessaire.

Étape 2

L'importation d'éléments dans Pixate consiste à glisser-déposer les fichiers PNG exportés dans la fenêtre du navigateur :

Importing the assets in PixateImporting the assets in PixateImporting the assets in Pixate

Étape 3

Maintenant, il est temps de reconstruire notre écran dans Pixate. Ce travail peut être fait beaucoup plus rapidement si nous nous référons au Panneau inspecteur à la fois dans Pixate et Sketch. Lorsque c'est le cas, il suffit de copier et coller la valeur X et Y de chaque élément.

Inspector panel for perfect aligningInspector panel for perfect aligningInspector panel for perfect aligning

Note : n'oubliez pas que notre design dans Sketch a été réalisé à une résolution @2x, tandis que dans Pixate nous travaillons avec une résolution @1x. Cela signifie que nous devons diviser chaque chiffre de Sketch par 2 avant de l'appliquer à Pixate.

3. Animation de l'écran GO

Ouvrons l'application Pixate sur notre iPhone, où nous pouvons voir que notre design a commencé à s'assembler. Par la suite, chaque fois que nous changeons quelque chose sur l'application web, cela est automatiquement synchronisé sur nos téléphones.

Étape 1

Après avoir sélectionné la première colonne de la météo, nous pouvons voir les types d'animations disponibles sur le côté gauche dans notre navigateur. Nous allons glisser-déposer l'animation Fade vers le côté opposé, la barre latérale droite.

Fade animationFade animationFade animation

Étape 2

Maintenant, il faut spécifier quand nous voulons voir cette animation apparaître. Définissons les valeurs Based on sur * SCREEN*, Loaded.

Based on rulesBased on rulesBased on rules

Cela signifie que notre animation se jouera juste après que le premier écran soit chargé, ce qui arrive immédiatement lorsque nous exécutons le prototype.

Étape 3

Puisque notre objectif est d'avoir un effet de fondu apparent, nous allons définir l'opacité initiale à 0% dans le panneau Propriétés et à 100% dans le panneau d'Animations.

Opactiy tipsOpactiy tipsOpactiy tips

Étape 4

Au bas du panneau Animations, nous pouvons également définir la courbe d'accélération, la durée et les valeurs de délai.

Définissez la durée entre 0,2-0,4 s, mais il n'y a aucune méthode officielle ici, donc je vous encourage à jouer avec ces valeurs, jusqu'à ce qu'elles soient juste comme il faut.

Different easing curvesDifferent easing curvesDifferent easing curves

Note : dans mon prototype, j'ai préféré utiliser des animations un peu plus lentes, ainsi vous pouvez les voir plus clairement. Dans un projet réel, je recommanderais un mouvement plus rapide et plus subtil.

Étape 5

Maintenant, nous allons sélectionner la deuxième colonne de la prévision météo et définir exactement la même animation Fade comme nous l'avons fait auparavant, avec une seule différence : cette fois la valeur du retard de l'animation réglée à environ 0,1-0,3 s. De cette façon les animations se dérouleront en séquence.

Animation delay for sequence playingAnimation delay for sequence playingAnimation delay for sequence playing

Continuez avec exactement la même méthode pour tous les éléments pour lesquels vous souhaitez ajouter une animation Fade, mais n'oubliez pas de continuellement augmenter la valeur du délai d'animation.

Étape 6

Maintenant nous allons mettre en place l'interaction entre les cercles dans la section objectif. Pour pouvoir défiler horizontalement entre les anneaux de l'objectif, il faut les importer sous la forme de trois fichiers distincts en PNG.

Creating a new layer in PixateCreating a new layer in PixateCreating a new layer in Pixate

Après les avoir placé dans leur position correcte, nous allons créer un nouveau calque dans Pixate ; nécessaire pour permettre le défilement horizontal. Dans le panneau Propriétés assurez-vous de que vous avez défini l'apparence sur aucun ensemble d'images. Avant d'ajouter une quelconque interaction à ce calque, nous allons ajouter les fichiers PNG des anneaux d'objectif au nouveau calque dans le panneau Calques. En termes simples, c'est semblable à l'outil Groupe dans Sketch.

Group layers in PixateGroup layers in PixateGroup layers in Pixate
Drag interactionDrag interactionDrag interaction

Maintenant, nous pouvons ajouter une interaction Drag dans ce nouveau calque et définir un défilement Horizontal avec position minimum : -255 pt et position maximum : 120 pt sur le panneau Animations.

Setting up horizontal scrollingSetting up horizontal scrollingSetting up horizontal scrolling

Étape 7

Pour le petit effet de rebond pendant le défilement horizontal, j'ai créé une animation personnalisée avec des conditions particulières. Pour commencer, ajoutez une animation Move au calque le plus récent qui contient tous les calques de l'anneau.

Maintenant, dans le panneau Animations définissez la valeur Based on sur Goal settings et Drag Release.

Drag on releaseDrag on releaseDrag on release

Pour la première condition IF, j'ai utilisé la formule suivante : goal_settings.x > -255 && goal_settings.x < -67, ce qui signifie que si la position du calque de groupe objectif (calque ID: goal_settings) est supérieure à -255 pt et inférieure à -67 pt, il se déplacera du côté gauche de la couche sur le point -67 pt.

Custom if conditionsCustom if conditionsCustom if conditions

Pour l'animation, j'ai utilisé une courbe accélération Spring avec une valeur de friction de 25 et une tension de 600.

Mon deuxième condition IF est : goal_settings.x <= -67 && goal_settings.x > -255, puis déplace le côté gauche du calque à -255 pt.

Spring easing curveSpring easing curveSpring easing curve

La troisième condition est : goal_settings.x > -67 && goal_settings.x < 150, puis déplace le côté gauche du calque à 150 pt.

Enfin, et surtout, la dernière instruction IF est : goal_settings.x < 150 && goal_settings.x > -67, qui déplacera le côté gauche du calque à -67 pt.

Note : Je sais que cela semble un peu compliqué pour la première fois, mais je vous encourage à copier et coller ma solution et à l'essayer, puis changer quelque chose et essayer à nouveau. Mes conditions ne sont en aucune façon parfaites, donc vous pouvez encore les améliorer et les peaufiner jusqu'à ce qu'elles vous arrangent.

Étape 8

Comme nous l'avons fait avec les anneaux de l'objectif, nous allons créez un autre calque et y placer chacun des calques que nous avons jusqu'à présent. Nous sommes juste en train de regrouper les calques de « l'écran GO » maintenant.

Challenges screenChallenges screenChallenges screen

4. Animation de l'écran Challenges

Avant de commencer à importer et à reconstruire « l'écran Challenges » dans Pixate, nous devons créer un nouveau calque, qui fonctionnera comme calque de groupe pour chaque élément dans cet écran. Nous allons le placer juste à côté de « l'écran GO » sans marge interne ou écart entre eux.

Étape 1

Après que nous avons importé et reconstruit notre écran, calque par calque, nous devons définir le défilement vertical pour les cartes de challenges.

Vertical scrollingVertical scrollingVertical scrolling

Nous allons créer un nouveau calque sans image de fond et y ajouter nos calques de cartes. Le défilement vertical est encore plus facile que le défilement horizontal, car la seule chose que nous avons à faire est d'ajouter une interaction de défilement à ce nouveau calque.

Étape 2

Afin de voir « l'écran Challenges » sur notre iPhone aussi, nous devons revenir à notre « écran GO » et ajouter un nouveau calque de rectangle en haut du bouton Challenges sur la barre d'onglets.

Navigating between different screensNavigating between different screensNavigating between different screens

Définissons l'apparence à no image fill et ajoutons-y une interaction Tap. Maintenant revenons en arrière, sélectionnons notre groupe de calque Challenges, qui contient tous les éléments sur « l'écran Challenges » et ajoutons-y une animation Move.

Move animation in navigationMove animation in navigationMove animation in navigation

Les seules choses qu'il nous reste à faire, c'est de régler les événements Based on pour le bouton que nous avons récemment ajouté à notre « écran GO » avec une interaction Tap et régler la valeur Move to à 0 pt. Ainsi quand on presse le bouton challenges sur « l'écran GO », le calque de groupe Challenges se déplacera pour se mettre à sa place.

Étape 3

Pour animer les cartes challenges, nous allons utiliser deux animations, un Fade et un Move, en même temps. Assurez-vous que vous avez défini la valeur Based on sur le bouton Challenges.

Animating the challenges cardsAnimating the challenges cardsAnimating the challenges cards

Pour l'animation Fade, nous utiliserons la même technique que celle de l'écran GO, nous allons donc définir Opacité à 0% sur le panneau de Propriétés et la valeur du Fade to à 100% sur le panneau Animations. Pour la durée, j'ai utilisé 0,5 s avec un délai de 0, 2 s.

Note : n'oubliez pas d'augmenter en permanence la valeur du délai pour chaque carte.

Notre deuxième animation est une animation Move. Tout comme dans le cas de l'animation Fade, définissons la valeur Based on sur le bouton Challenges et utilisons exactement la même durée d'animation et de délai comme dans le cas de l'animation Fade. Maintenant, la valeur Move To Top à 10 px, déplacera notre carte challenge de 10 px vers le haut, au démarrage de l'animation.

Move to top animationMove to top animationMove to top animation

Car à la fin de l'animation, chaque carte challenge sera 10 px vers le haut, nous devons les déplacer de 10 px vers le bas sur notre toile dans Pixate.

5. La section Browse Challenges

Étape 1

Nous allons créer un nouveau calque une fois de plus, qui contiendra la section de Browse Challenges. Comme dans le cas de ma section Challenges, nous allons y ajouter une interaction de défilement.

Browse challenges scroll interactionBrowse challenges scroll interactionBrowse challenges scroll interaction

Étape 2

Pour être en mesure de basculer entre les sections My challenges et Browse Challenges, nous devons créer un nouveau calque au dessus du titre Browse Challenges, qui fonctionnera comme un bouton. Réglez le remplissage du calque à No image set et ajoutez-y une interaction Tap.

Tap interaction for navigation on the screenTap interaction for navigation on the screenTap interaction for navigation on the screen

Maintenant, si nous revenons à notre calque de groupe de Browse Challenges (créé à l'étape précédente), nous pouvons ajouter une animation Fade en fonction de ce nouveau bouton. Donc jusqu'à ce que nous appuyons sur le bouton Browse Challenges, l'opacité de la section Parcourir les défis est de 0% et après l'interaction Tap elle sera à 100%.

Étape 3

Comme dernière étape, j'ai ajouté une animation Scale and Fade à la barre de progression de la timeline dans la section Browse Challenges.

Scale and Fade animationScale and Fade animationScale and Fade animation

Note : n'oubliez pas d'utiliser exactement les mêmes valeurs de durée d'animation et de délai pour les animations Fade et Scale.

6. Animation de l'écran Activities

Avant de commencer à animer « l'écran Activities » nous devons répéter quelques étapes exécutées dans le cas de « l'écran Challenges ».

Étape 1

Nous allons créer un nouveau calque juste à côté de « l'écran Challenges » sans marge intérieure. Ce calque sera le calque de groupe pour les éléments de « l'écran Activities ».

Activities screenActivities screenActivities screen

Étape 2

Maintenant, retournons à notre « écran GO » et créons un nouveau calque au dessus du bouton Activities sur la barre d'onglet. Ajoutons une interaction Tap à ce nouveau calque.

Activities buttonActivities buttonActivities button

Retournons à notre calque de groupe Activities et ajoutons-y une interaction Move basée sur le nouveau bouton.

Étape 3

Ajoutons maintenant une animation Fade à chaque résultat sur l'écran Activities avec une durée d'animation de 0,4 s et un délai d'animation de 0,1 s entre les résultats.

Displaying the resultsDisplaying the resultsDisplaying the results

Note : n'oubliez pas de définir la valeur Based on sur le « bouton Activities », que nous avons placé sur « l'écran GO ».

Étape 4

Créons un autre calque de groupe et plaçons y chaque séance d'entraînement, sauf la première. Nous en aurons besoin pour l'animation Move down, car déplacer un seul calque vers le bas est beaucoup plus facile, que le faire pour six ou sept calques à la fois.

Move down animation of a groupMove down animation of a groupMove down animation of a group

Maintenant ajoutons une interaction Tap à la première session d'entraînement, puis ajoutons une animation Move au calque de groupe que nous avons juste créé. Dans le panneau Animations définissons la valeur Based on sur la première session d'entraînement et ajoutons une valeur Move to Top d'environ 277 pt. Quand on tape sur la première séance d'entraînement, tout le reste se déplace vers le bas sur l'écran.

Based on valuesBased on valuesBased on values

Étape 5

Pour la vue de détail d'entraînement, je n'ai utilisé que des animations Fade et Move issues des interactions de la première séance d'entraînement.

Detailed activites veiwDetailed activites veiwDetailed activites veiw

Au début, juste fade et move dans l'arrière-plan, puis le graphique et enfin les numéros spécifiques et les détails de la séance d'entraînement.

Graph animationGraph animationGraph animation

Vous devriez jouer ici un peu la durée de l'animation et les délais.

Félicitations !

Vous êtes génial ! Vous venez de créer votre premier prototype Pixate entièrement fonctionnel, personnalisé dans l'animation. Après avoir suivi ce tutoriel, j'espère que vous êtes plus confiant dans l'utilisation de Pixate pour les prototypes d'application mobile.

Je suis curieux d'entendre vos points de vue sur ce tutoriel et n'hésitez pas à poser toutes les questions dans les commentaires, je serai ici pour aider, et y répondre.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.