Share
Le prototypage devrait être un moyen rapide et facile de prendre confiance en vos conceptions. Le prototypage n'est plus considéré comme un moyen de saupoudrer de la magie du mouvement ou de polir des conceptions, le prototypage est un outil de communication. Qu'il s'agisse de communiquer avec les parties prenantes, les responsables de la conception ou les utilisateurs, un bon prototype aide à communiquer les décisions de conception et les idées de test..
Dans ce tutoriel, nous allons créer un prototype de base «carte d'embarquement» dans Atomic, que vous pouvez prévisualiser ici. Le prototype commence par un état de chargement avant de vous permettre de parcourir vos prochains vols et de prévisualiser votre code d'embarquement. Pour créer ce prototype, nous utiliserons des composants interactifs, des données, des variables et des transitions de page. Ne pas s'inquiéter! Je vais vous aider à chaque étape.
Voici une démo de ce que nous allons créer:
Il y a quelques choses dont vous aurez besoin pour suivre:
atomic.ioSi vous avez une question à quelque moment que ce soit dans le didacticiel, n'hésitez pas à me contacter (@femkesvs) ou à l'équipe de support Atomic (@we_are_atomic) sur Twitter..
Allons-y!
J'ai créé un exemple de fichier avec les actifs dont vous aurez besoin pour créer votre prototype. Cet exemple de fichier est complet avec les actifs que nous allons utiliser, ainsi que des composants prédéfinis..
Vous pouvez accéder aux actifs ici. Pour utiliser les actifs, vous devez copier le prototype dans votre compte. Vous pouvez le faire en cliquant sur Copier et éditer en bas à droite, puis sélectionnez un projet dans lequel vous souhaitez le copier. Je suggère de créer un nouveau projet pour ce tutoriel.
Avant de commencer à créer notre prototype, nous devons d'abord ajouter la source de données à Atomic. J'ai mis en place une feuille Google avec des données de base que nous utiliserons dans notre prototype..
Vous pouvez accéder aux données ici. Avec la source de données ouverte, dirigez-vous vers Fichier> Ajouter à mon lecteur (vous aurez besoin d'un compte Google pour cela).
Ensuite, avec votre projet ouvert dans Atomic, sélectionnez le Les données languette. À partir d'ici cliquez Importer des données, et localisez la source de données via la recherche. Une fois localisé, sélectionnez la source de données. Vous verrez Atomic charger les données dans votre projet. Cette source de données est maintenant accessible et utilisable dans n’importe quel prototype du projet..
Nous sommes prêts!
Commençons à assembler notre prototype en créant l'état de chargement. Pour ce faire, nous allons créer à la fois une transition personnalisée et une action de page temporisée..
Commencez par sélectionner le composant de chargement de la page Actifs pour le copier (CMD-C et le coller (CMD-V) dans la page 1. Il sera volumineux et, plutôt que de le redimensionner, placez-le à sa position de départ..
Copiez ensuite l'élément de chargement que vous venez de placer sur la page 1, en le collant cette fois sur la page 2. Repositionnez-le dans son état final (pivoté de 75 ° dans le sens des aiguilles d'une montre pour que le plan soit positionné du côté droit de la toile)..
Pour créer notre transition, retournez à la page 1. Dans le panneau de propriétés de droite, vous verrez une section Actions de page. Cliquez sur le bouton plus, puis définissez les éléments suivants:
Voyons un aperçu et voyons notre transition en action - vous devriez voir l'avion glisser de gauche à droite en l'espace de deux secondes. Soigné!
Pour aller plus loin, vous pouvez également copier et coller le logo Fly sur les pages 1 et 2 (sous le composant de chargement dans le panneau des pages et placé derrière). Assurez-vous de suivre la même technique en le plaçant dans ses positions de début et de fin sur chaque page. Vous devez probablement ajuster l'ordre de vos calques pour le faire apparaître par derrière.
Enfin, nous devrons créer une action qui amène automatiquement l'utilisateur à la page 3 à partir de la page 2. À la page 2, ajoutez une autre action de page chronométrée. Cette fois, nous utiliserons les paramètres suivants:
Pointe: si vous souhaitez décaler le timing des deux éléments animants, vous pouvez le faire en utilisant le Chronologie avancée des mouvements.
Ensuite, copiez les éléments nécessaires à la page 3 et collez-les sur la page 3. Vous devrez procéder à quelques réarrangements et ajustements pour ajuster les éléments de la page selon vos besoins..
Presque tous les éléments nécessaires à cette page sont des composants.
Les composants dans Atomic sont comme des symboles. Tout composant peut être édité et réutilisé dans un projet. Toute modification apportée à un composant sera mise à jour dans chaque cas. Les composants peuvent également être interactifs et contenir plusieurs états d'un symbole. Cela facilite vraiment la structuration de votre prototype.
Ajoutons de l'interactivité au composant boardingPasses. Pour ouvrir le composant, double-cliquez sur l'icône du composant dans le panneau Calques en regard du nom du calque. Une fois ouvert, vous verrez trois pages. un représentant chaque vol. Pour l'instant ces passes sont identiques, bientôt nous allons changer cela.
Nous savons que l’utilisateur a trois vols et nous aimerions qu’ils puissent les parcourir. Il y a aussi une icône de code QR qui, lorsqu’il ya interaction, devrait afficher son code d’embarquement..
Si vous regardez dans le panneau des calques, vous remarquerez que chaque page est une instance d'un composant appelé «carte de visite». Ouvrons maintenant le composant boardingCard pour voir comment les données ont été appliquées..
Le composant boardingCard est un composant intégré à un composant. Cela nous permet de créer un symbole de carte d'embarquement pouvant être réutilisé tout en affichant différents ensembles de données..
Avec le composant boardingCard ouvert, vous verrez deux pages; le recto et le verso de la passe. C’est là que les données sont affectées aux éléments de texte individuels..
Données héritées du parentSélectionnez le texte ABC et regardez le Propriétés du texte. Vous remarquerez ce qui suit:
Par la suite, si vous consultez la feuille Google à partir de laquelle ces données sont extraites, vous verrez une colonne intitulée "code de départ". Cela signifie que l'élément de texte ABC affichera toutes les données figurant dans la colonne «code de départ»..
Tout le texte dynamique de ce composant a été défini sur Hériter du parent. Cela nous permet de créer un lien vers la feuille de données au niveau du groupe et donc d’afficher et de trier les données ligne par ligne. Nous y arriverons bientôt.
Ensuite, nous allons configurer une transition basée sur la page pour basculer entre le code de passe et le code QR. Sur la page de garde du composant de carte de visite, appuyez sur H pour faire apparaître l'outil Hotspot. Ensuite, tracez un point d’accès sur l’icône du code QR sur la page de couverture..
Les hotspots vous permettent de définir des zones interactives de votre prototype. Avec votre hotspot sélectionné, sous le panneau d'interactions, définissez les éléments suivants:
Ensuite, sur la dernière page, créez un autre point chaud (H) qui nous ramènera à la première page. Cette fois, dessinez sur le Fermer icône et définissez les éléments suivants:
Il est temps de tester votre interaction! Dans le coin inférieur droit, appuyez sur le bouton Aperçu bouton. Le mode Aperçu vous permet de tester vos transitions et d’interagir avec votre prototype via des points chauds. Essayez de cliquer sur la carte QR ou l'icône de fermeture. la carte doit basculer entre les deux états. Vous pouvez fermer l'aperçu en appuyant sur X.
Le fait d’avoir cette carte d’embarquement comme composant interactif nous permet de sélectionner les données à afficher de manière dynamique, sans avoir à créer plusieurs états et interactions..
Pour revenir, cliquez sur le violet retour bouton en haut à gauche. Vous devriez maintenant être de retour dans le composant boardingPasses. Dans cette composante, nous avons trois passes affichant actuellement les mêmes données. Mettons à jour ceci maintenant.
Rappelez-vous comment dans le composant boardingCard, les données ont été définies sur Hériter du parent? Dans ce cas, le parent est l'instance du composant..
Sur la page du vol 1, sélectionnez l'instance BoardingCard. dans le propriétés du composant laisser Etat tel quel. Sous Les données, sélectionnez la source de données et assurez-vous que Rangée est défini sur la ligne 1. L'instance doit maintenant afficher les données de la première ligne de la feuille de données..
Si vous basculez la ligne, vous remarquerez que les données affichées sont mises à jour. Gardons-le sur la rangée 1 pour le moment, mais pour les vols 2 et 3, définissez ceci pour afficher les données des rangées 2 et 3 respectivement..
Pour permettre aux utilisateurs de parcourir leurs cartes d'embarquement, nous devons configurer certaines interactions..
Créez et tracez un point chaud (H) sur le côté droit de la page 1 du vol (assurez-vous de laisser un espace en haut pour le point chaud au-dessus de l'icône de fermeture sur la dernière page du composant de carte d'embarquement, et qu'elle ne ne couvrez pas le code QR sur la page de couverture). Pour créer le geste de balayage, utilisez les paramètres suivants:
Faites la même chose sur la page du vol 2 et ajoutez un deuxième point chaud sur le côté gauche du vol 2 et les pages du vol 3 réglées sur Pousser à droite et Pousser à gauche au lieu. N'hésitez pas à appuyer sur Aperçu pour tester et interagir avec le composant et ajuster les paramètres de balayage en conséquence.
Pour terminer la construction du prototype, nous devrons créer et utiliser une variable. Cette variable permettra à nos composants de se parler tout en influençant leur état.
La variable que nous allons créer sera utilisée pour mettre à jour les points de progression en fonction de la carte d'embarquement affichée..
Pour créer une variable, appuyez sur V ouvrir le Variables modales. Ici cliquez Créer une nouvelle variable et tapez "flightDisplayed" dans le menu prénom champ. Laissez la valeur par défaut vide.
Génial, vous avez votre variable configurée! Fermez les variables modales en appuyant sur la touche X ou échapper sur votre clavier.
Revenez au prototype. Si nous visionnons maintenant à partir de la page d'accueil, vous devriez pouvoir glisser entre les cartes et également interagir avec le code QR..
Bien que nous puissions maintenant parcourir les passes, il reste encore quelques choses à configurer pour influencer les points de progression à mettre à jour en fonction de la progression des passes d'embarquement..
Pour ce faire, ouvrez le composant boardingPasses. Sur la page 1, créons l'action de page suivante:
Répétez cette opération aux pages 2 et 3 en vous assurant que la valeur est définie sur 2 ou 3 pour refléter la page que vous consultez..
Nous avons effectivement demandé au composant boardingPass de mettre à jour la valeur de la variable flightDisplayed, en fonction du vol (page) affiché. Nous pouvons maintenant utiliser cette valeur pour influencer l'état des points de progression.
Voici comment procéder: retournez au prototype et ouvrez le composant progressDots.
Vous remarquerez trois pages (états) nommées 1, 2 et 3. Cette désignation correspond aux valeurs définies dans la variable flightDisplayed. Il est important que ces noms de page correspondent aux valeurs définies.
Retournez au prototype, sélectionnez le composant progressDots et:
Nous avons maintenant connecté le composant progressDots à la variable flightDisplayed. Cela signifie que lorsque la valeur de la variable devient une valeur, le composant progressDots affichera la page qui correspond à la valeur de la variable..
Essayez de prévisualiser votre prototype maintenant, en interagissant avec les cartes d’embarquement en balayant et en vérifiant si les points de progression sont mis à jour..
Enfin, vous pouvez supprimer ou déplacer la page Actifs pour vous assurer que votre aperçu partagé s'ouvre sur la page de démarrage correcte. Pour supprimer la page, sélectionnez le menu hamburger sur la vignette de la page et cliquez sur supprimer la page.
Pointe: Voyez si vous pouvez trouver comment obtenir que le composant promoCard mette à jour son état en fonction du vol affiché. Vous voudrez créer une nouvelle variable appelée cardDisplayed.
Voilà! Votre propre application de carte d'embarquement. Si vous avez téléchargé l'application iOS, essayez d'ouvrir le prototype et d'interagir avec ce dernier sur votre iPhone. il devrait se sentir comme la vraie chose.
Bravo pour avoir suivi ce tutoriel jusqu'à la fin. Vous devez maintenant bien comprendre comment créer votre propre prototype dans Atomic. Si vous avez des ressources existantes dans Sketch, vous pouvez les importer à l'aide du plug-in Atomic pour Sketch ou les créer de manière native dans Atomic si vous le souhaitez..
Des questions? Commentaires? Laissez-les ci-dessous ou contactez-moi sur Twitter (@femkesvs).
Accentsconagua