Apprendre l'UX : wireframing et prototypage d'une application mobile

1. Introduction: Bonjour. Je m'appelle Gene Guy. Je suis concepteur et développeur de produits. Je travaille depuis plus de 15 ans à la conception et au développement de produits. Dans ce cours, je vais vous apprendre comment filer et prototyper avec Balsamiq et Adobe XD. Nous allons filer et prototyper un exemple d' application mobile basé sur certains exemples de documents UX comme personas, flux utilisateur que j'ai préparé pour la classe. Je vais vous montrer quelques conseils sur l'utilisation de Balsamiq et Adobe XD et mon processus de filature et de prototypage d'une application mobile. Cette classe s'adresse aux concepteurs UX débutants et intermédiaires qui souhaitent apprendre ou améliorer leurs compétences en matière de filature et de prototypage. À la fin de la classe, chaque étudiant aura un projet terminé qu'il pourra présenter dans son portefeuille. J' ai hâte de te voir en classe, qu'on puisse commencer à filer et à prototyper ensemble. 2. Qu'est-ce un Wireframe: Qu' est-ce qu'un filaire ? filaire est la partie essentielle du flux de travail d'un concepteur. C' est l'un des aspects importants du flux de travail d'un concepteur, car il permet de s'assurer qu'un site Web ou application mobile aura la cohérence et clarté nécessaires à une expérience utilisateur positive. Un filaire est une représentation simple et faible fidélité de votre application ou site Web. Considérez cela comme un plan pour votre site Web ou votre application. C' est là que les premières étapes du processus de pensée commencent à comprendre quels éléments seront disposés à l'écran. Pensez à une structure filaire comme semblable à un plan de construction ou à un plan d'étage d'une maison. Avant de commencer à concevoir une maison, vous devez avoir un plan ou un plan d'étage pour identifier où la cuisine ira, où les chambres iront, etc. Wireframes pour une application mobile ou un site Web servent le même but. Vous devez cartographier ce qui va se passer sur chaque écran, et vous allez placer des boîtes sur l'écran pour agir en tant que porte-places pour les éléments de la conception réelle ira. Où ira la navigation ? Y aura-t-il une image de héros sur l'écran, etc. trames filaires nous permettent de parcourir rapidement nos idées afin que nous puissions montrer et obtenir des commentaires des parties prenantes. Les filaires donnent la structure globale de la page et le déroulement de la navigation. Lors de la création de trames filaires, chaque aspect du site Web ou de l'application est représenté par une forme ou un simple graphique. boîtes avec ces lignes diagonales représentent des images, des lignes horizontales sont utilisées pour représenter le texte, et un cercle avec un L à l'intérieur est le plus souvent utilisé comme logo. Un bon filaire peut vous aider à créer la vision de l'ensemble de votre site Web ou de votre application mobile. Wireframe sert de première étape de la conception. Une fois les trames finalisées, vous allez créer des maquettes, puis des prototypes, mais filaires aide à vous assurer que vous êtes sur la bonne voie avec votre produit avant de commencer à perdre du temps avec un design qui, à la fin, ne semble pas fonctionner comme vous l'aviez prévu. 3. Pourquoi vous devriez de choisir de l'image et du prototype: Pourquoi devriez-vous filaire ? filage rapide et le prototypage sont des étapes importantes de votre processus de conception. Il permet aux concepteurs, aux développeurs et aux entrepreneurs de diffuser rapidement leurs idées. En rendant les filaires rapides, vous pourriez jeter les mauvaises idées et découvrir les meilleures solutions pour votre application web ou mobile. En utilisant Balsamic ou Adobe XD, par exemple, vous pouvez créer des filaires et des prototypes qui permettent à l'utilisateur de concentrer le contenu conversationnel dans les interactions et non des détails comme le jeu de couleurs, une certaine utilisation d'image au lieu d'une autre image, ou la taille des boutons et des trucs comme ça. Tout ça arrive plus tard dans le processus. La raison principale des filaires et éventuellement le prototype de faible fidélité de ces filaires est de s' assurer que tous les éléments nécessaires pour chaque écran ou page tout dedans et comment ces éléments interagissent les uns avec les autres. faible fidélité maintient la conversation centrée sur la compréhension du problème et la communication de la solution fonctionnelle. Wireframing vous aide à visualiser la mise en page de votre contenu, gagner du temps dans le processus de conception global en étant capable vider rapidement les conceptions filaires des écrans, de tester facilement les problèmes de convivialité, tester et d'affiner votre navigation, effectuez un prototypage rapide avec les utilisateurs et les parties prenantes, et évaluez si vos filaires respectent les meilleures pratiques UX. Les trames filaires aident à clarifier la façon dont les éléments seront organisés à l'écran. 4. À propos de Balsamiq: J' utilise Balsamiq depuis quelques années. C' est l'un des meilleurs outils disponibles pour le filage rapide et le prototypage. Il est très facile à apprendre, donc vous serez en mesure de sauter et de commencer à créer. Ce qui rend Balsamiq si bon à utiliser pour les trames à faible fidélité, c'est le fait qu'il reproduit l'expérience de l'esquisse sur un bloc-notes ou un tableau blanc, mais que vous utilisez un ordinateur à la place, donc vous allez faire glisser et déposer des composants de Balsamiq sur votre toile et tester rapidement les idées rapidement afin que vous puissiez vous débarrasser des mauvaises idées et ne pas perdre de temps. Comme vous pouvez le voir, il y a beaucoup de grandes entreprises qui utilisent Balsamiq, donc vous serez en bonne compagnie. Lorsque vous regardez les descriptions de poste pour de nombreux emplois de concepteur UX, vous constaterez que Balsamiq est généralement l'un des outils que les entreprises aimeront que vous sachiez utiliser. Vous voyez ici Balsamiq est disponible en trois versions : Balsamiq Cloud qui est l'application web, Balsamiq pour Desktop qui fonctionne sur Mac et Windows, et il y a Balsamiq Google Drive qui s'intègre avec Google Drive. Chaque version est livrée avec une période d'essai de 30 jours, sorte que vous pouvez télécharger l'une de ces versions et l'utiliser pour ce cours. 5. Panneau de navigateur dans Balsamiq: Vous auriez dû télécharger et installer l'une des versions d'essai gratuites de Balsamiq, si vous ne l'avez pas déjà. Maintenant, nous pouvons ouvrir Balsamiq et nous allons voir le tableau de bord, qui se compose de plusieurs zones différentes. À notre gauche, nous avons le panneau du navigateur. Dans la zone supérieure, nous avons la barre d'outils. Juste en dessous, nous avons la bibliothèque d'interface utilisateur, qui a tous les contrôles d'interface utilisateur que nous pouvons utiliser pour nos projets. Cette grande zone principale au milieu est la toile, c'est là que nous plaçons tous nos contrôles. À droite se trouve le panneau Propriétés. Dans cette leçon, nous allons passer sur le panneau Navigateur dans le canevas. Le panneau Navigateur est l'endroit où tous nos filaires, acides ou symboles vivront. Lorsque vous créez une nouvelle maquette filaire, elle apparaît dans cette zone, et les éléments sont déplacés dans la zone de canevas ici. Faisons une maquette filaire rapide et voyons comment cette zone fonctionne. Nous allons passer en revue les contrôles de la bibliothèque d'interface utilisateur dans la vidéo suivante, mais prenons quelques contrôles maintenant afin que nous puissions obtenir une maquette pour apparaître dans la zone de navigation. Nous avons notre première maquette filaire de base et comme vous pouvez le voir, elle apparaît dans le panneau du Navigateur. Si vous sélectionnez une maquette filaire en cliquant dessus, vous verrez apparaître une flèche en bas à droite. Si vous cliquez sur cette flèche, certaines options s'affichent : Renommer, Dupliquer, Déplacer vers la corbeille et Créer une autre version. Pour renommer votre maquette filaire, sélectionnez Renommer, puis une fenêtre modale apparaîtra, un champ de saisie à côté du nouveau libellé de nom. C' est là que vous devez taper le nouveau nom de la maquette, puis cliquer sur « Renommer ». L' option suivante est Dupliquer, si vous cliquez dessus, il va créer une version dupliquée de cette maquette et à la fin du nom, il ajoutera la copie texte, pour vous faire savoir qu'il s'agissait d'une version dupliquée. Vous pouvez également utiliser le raccourci clavier Commande D pour créer une version dupliquée. Ensuite, vous avez le Déplacer vers la corbeille. Sélectionnez la maquette filaire que vous souhaitez supprimer et sélectionnez Déplacer vers la corbeille, et cette maquette sera supprimée. Le dernier élément du menu est la création d'une autre version. Si vous sélectionnez cette option, une autre version sera créée qui s'affichera en bas à droite du tableau de bord dans la section Version alternative du panneau Propriétés. Ces versions seront nommées Version Officielle, qui est la Version Originale, et la Version Alternative que vous pouvez renommer en quelque chose d'un peu plus mémorable, au lieu du nom d'espace réservé qu'elles proposent. Si vous cliquez avec le bouton droit de la souris sur la version officielle, vous verrez une option pour rejeter tous les remplaçants. Si vous cliquez avec le bouton droit de la souris ou cliquez sur « Autre version » et cliquez sur la flèche qui s'affiche, vous verrez des options pour Renommer, Dupliquer, Dupliquer en tant que nouvelle maquette, Promouvoir en officiel, Fusionner avec officiel et Annuler. Sélectionner et Renommer est la même chose que nous avons vu auparavant, Sélectionner et Dupliquer, dupliquer cette autre version. Il va créer une version en double avec un nouveau nom, mais il ne créera pas de nouvelle image filaire. Si vous souhaitez créer une nouvelle maquette filaire, vous devez sélectionner l'option suivante qui est Dupliquer en tant que nouvelle image filaire. Ceci affiche une nouvelle image filaire. Si vous cliquez sur « Promouvoir vers Officiel », ce filaire deviendra la version officielle et fera la version officielle précédente, maintenant l'ancienne version officielle. Si vous sélectionnez Fusionner avec officiel. Il ajoutera cette alternative à côté de votre version officielle à l'écran, puis vous pouvez ajouter ou faire glisser ou tout ce qui est sur la version alternative vers la version officielle pour mettre à jour la version officielle. Enfin, vous pouvez sélectionner cette défausse pour chaque autre version pour les supprimer ou vous pouvez cliquer sur la flèche dans la version officielle et supprimer toutes les versions alternatives en même temps. 6. Panneau de propriétés de la bibliothèque d'UI dans Balsamiq: Parlons maintenant de la bibliothèque d'interface utilisateur dans le panneau Propriétés. La bibliothèque d'interface utilisateur est une liste de tous les types de contrôle d' interface utilisateur inclus, ainsi que des actifs, des icônes et des symboles. La bibliothèque classe les contrôles, sorte que vous pouvez cliquer sur l'un des boutons de catégorie comme « Tous » et voir tous les contrôles de l'interface utilisateur dans la bibliothèque. Ou vous pouvez cliquer sur « Conteneurs » et voir tous les contrôles de l'interface utilisateur du conteneur tels qu'un iPhone, une fenêtre de navigateur, un iPad, etc. Pour ajouter un contrôle d'interface utilisateur au canevas, vous pouvez soit le faire glisser sur le canevas, soit double-cliquer dessus. La bibliothèque d'interface utilisateur inclut également les ressources que vous avez importées dans votre projet, ainsi que les symboles que vous avez créés pour votre projet. En sélectionnant l'un des contrôles de l'interface utilisateur, cela me permet de vous montrer comment fonctionne également le panneau Propriétés. Prenons un bouton de contrôle. Si je l'ajoute au canevas, il reste sélectionné, et à droite sur le tableau de bord, vous verrez les propriétés de ce contrôle de bouton dans le panneau Propriétés. Vous pouvez voir les champs de saisie de position et de taille qui me permet d'entrer un nouvel ensemble de nombres, et lorsque je clique sur « Entrée », le bouton sera mis à jour. Il y a une section de superposition où je peux amener le bouton à l'avant, le ramener, l'envoyer à l'arrière ou le renvoyer. Il y a une section Taille automatique et une section Couleur qui me permet de changer la couleur d'arrière-plan du bouton en cliquant sur cette icône « Couleur d'arrière-plan » et en sélectionnant une nouvelle couleur. Je peux également ajouter une icône au bouton. Je peux rechercher une icône en tapant ce que je cherche dans la zone de recherche d'icônes, ou je peux cliquer sur l'icône « Ouvrir la bibliothèque d'icônes » pour voir toutes les icônes disponibles. Il s'agit de l'ensemble d'icônes Font Awesome qui vient pré-installé. Si je recherche le logo Apple, je le verrai apparaître, puis je peux double-cliquer dessus pour qu'il puisse être ajouté à mon bouton. Ensuite, je peux cliquer sur l'icône « Rotate 90 degrés » pour faire pivoter l'icône dans le bouton, ou je peux cliquer sur le bouton « Supprimer l'icône » pour le supprimer complètement du bouton. Sous la boîte de recherche d'icône se trouve un curseur qui me permet de mettre à l'échelle l'icône de extra small à double extra large. Il y a aussi une section de lien où je peux rendre le bouton cliquable afin qu'il me conduise à un autre marqueur, cette fonctionnalité est ce qui vous permet de définir vos filaires pour devenir un prototype cliquable. Ensuite, il y a une section Menu, qui lorsque je clique sur la flèche vers le bas, il devient ajouté au bouton. Il y a aussi une section State afin que je puisse sélectionner l'état du bouton. Je peux le rendre normal, je peux le faire sélectionné qui va le rendre bleu Je peux mettre au point qui met une fine ligne bleue autour du bouton, ou je peux le faire désactiver, cela donne l'effet que le bouton est grisé. Ensuite, tout en bas, il y a une section Texte où je peux gras, italique, souligner ou modifier la taille de la police ou l'alignement du texte. Si plusieurs contrôles sont sélectionnés, les options d'alignement et de distribution de ces contrôles s'affichent. Je suggère de passer par certains de ces contrôles et de jouer avec leurs propriétés pour voir ce que chacun d'eux fait. Je vais passer en revue beaucoup de ces contrôles dans la section suivante, et je vais vous montrer comment je crée filaire. Lorsqu' aucun contrôle n'est sélectionné, l'Inspecteur des propriétés affiche des notes pour le filaire sélectionné. En cliquant sur le bouton « Infos sur le projet » dans la barre d'outils, le panneau Informations sur le projet s'affiche et vous permet de définir les paramètres à l'échelle du projet pour l'habillage, la police, le lien et la couleur de sélection. Ces paramètres seront appliqués à toutes vos trames filaires du projet. La section Skin vous donne deux skins, ce qui vous permet de travailler sur vos premières idées à l'aide d'un aspect rugueux. Ensuite, en cliquant sur « Wireframe », mettez-les à jour pour un look plus net et plus poli lorsqu'ils sont prêts à être présentés. 7. Balsamiq bar: Parlons maintenant de la barre d'outils en haut du tableau de bord. haut à gauche, il y a une icône surlignée en bleu qui vous permet de masquer et d'afficher le panneau du navigateur. À côté de cela, vous avez une icône qui vous permet d' afficher vos filaires dans un format de grille miniature, et le signe plus qui vous permet d'ajouter un nouveau filaire. Dans la section centrale supérieure, vous avez des boutons pour annuler et rétablir vos actions, une loupe, des icônes pour zoomer, zoomer arrière et zoomer pour s'adapter, etc. Si vous sélectionnez un élément sur le canevas, vous avez des icônes qui deviennent actifs, où vous pouvez regrouper les éléments sélectionnés. Vous avez une icône qui change la position d'un élément, amenant à l'avant, envoyant à l'arrière, etc. Ensuite, aussi, une icône pour verrouiller un élément afin qu'il ne puisse pas être déplacé pendant que vous travaillez. À droite de ce groupe d'icônes, vous avez une zone de recherche dans laquelle vous pouvez rapidement rechercher le contrôle de l'interface utilisateur. À côté de cela est un bouton pour masquer et afficher la bibliothèque de l'interface utilisateur et après cela, il y a une icône pour ajouter un commentaire. Si vous cliquez dans la zone Ajouter des commentaires, il vous demandera d'abord votre e-mail et un nom, puis vous pouvez ajouter des commentaires, supprimer des commentaires et modifier des commentaires. L' outil suivant vous permet de masquer et d'afficher l'inspecteur. Après cela, une icône qui cache et affiche les informations du projet, et la dernière icône est l'icône de lecture, sur laquelle vous cliquez pour prévisualiser un prototype de votre ensemble de filaires. 8. Commençons de choisir dans Balsamiq: Basé sur tout ce que nous avons fait jusqu'à présent dans les leçons précédentes, commençons à faire quelques filaires. Essentiellement ce que je fais quand je commence, j'aime avoir un processus avant de commencer à esquisser un filaire. Ce que j'ai fait ici étaient quelques modèles, juste pour vous donner une idée de mon processus de pensée lorsque je commence à créer des filaires. L' application que je vais faire dans cette série de filaires rapides, je vais probablement faire environ cinq d'entre eux, est une application d'entraînement. Ce que j'ai fait, c'est que j'ai rapidement fait quelques personas, personas étant des gens qui utiliseraient l'application. Pourquoi utilisent-ils l'application, quel est leur objectif d'utiliser l'application ? Je pourrais avoir l'utilisateur à l'esprit alors que je suis en train de dessiner des idées. Cette première personne s'appelle Jennifer. Son but est, elle a besoin d'un plan d'entraînement à domicile parce qu'elle n'a pas le temps d'aller à la gym. Elle aime faire des exercices de poids corporel et cardio, et elle préfère ne pas utiliser de poids quand elle s'entraîne. C' est la première personne. La deuxième personne créée était David. Voici ses détails. Il est directeur des ventes, 44 ans, a un MBA, voyage beaucoup pour travailler. Il a besoin d'un plan d'entraînement à domicile parce qu'il n'a pas le temps d'aller à la gym. Il aime faire des exercices de poids corporel, des poids et des cardio. Il a besoin que ses séances d'entraînement soient courtes, mais à impact élevé parce qu'il n'a pas beaucoup de temps pour s'entraîner. Ce sont mes deux premières personnes que je vais utiliser pour cet exercice de filature de cette application d'entraînement. Vous pouvez également avoir accès à ce modèle. Je vais le mettre dans les notes comme un lien téléchargeable et vous pouvez utiliser ce fichier comme point de départ pour votre application de projet. Après cela, je viens rapidement de créer ce que je pense devrait être sur l'écran ou ce que l'écran devrait être sur, cinq écrans que je vais filer. Cela devrait être la création de l'écran de compte, puis après avoir créé votre compte, vous prenez votre écran où vous ajoutez vos informations et vos objectifs pour votre profil, et sélectionnez vos préférences d'entraînement. Après cela, l'écran suivant sera vous choisissez une séance d'entraînement dans une liste d'entraînements. Une fois que vous aurez ces listes d'entraînement, vous serez redirigé vers un écran. Une fois que vous avez sélectionné une séance d'entraînement, vous serez redirigé vers un écran de détails d'entraînement expliquant l'entraînement. Ensuite, lorsque vous cliquez sur la vidéo, il commencera à lire la vidéo de l'entraînement, puis vous commencez à travailler avec la vidéo. Je veux juste obtenir quelques notes rapides sur quelques notes ce que chaque écran devrait avoir, permettez-moi juste que je l'esquisse. J' ai aussi fait un flux rapide. Lorsque vous accédez à l'application pour la première fois, avez-vous un compte ? Si oui, vous vous connectez, je ne créerai aucun écran de connexion. Ce sera strictement pour les personnes qui n'ont pas de compte que je vais faire le flux des fils pour ce flux. Avez-vous un compte ? Non. Vous créez un compte. Une fois que vous avez créé un compte, configurez un profil. Choisissez parmi une liste de séances d'entraînement. Tu as l'écran des détails de l'entraînement. Une fois que vous avez sélectionné une séance d'entraînement, vous affichez l'entraînement, et c'est la fin du flux. 9. Filtre l'écran Créer un compte: Commençons à créer notre Wireframe. Une des premières choses que je fais lors de la création de Wireframes mobiles dans Balsamiq, est de m'assurer que l'écran pour lequel je crée le Wireframe est la même taille d'écran que le téléphone mobile pour lequel je vais concevoir. Nous allons créer un nouveau Wireframe, cliquez sur le signe plus, il ajoute notre nouveau Wireframe, et allons sur iOS puisque nous allons créer une application iOS mobile. Allez sur iOS, double-cliquez sur iPhone pour l'ajouter au canevas. Maintenant, si vous sélectionnez ce contrôle d'interface utilisateur, vous pouvez voir à droite dans le panneau des propriétés, c'est l'iPhone 10. Ce que je veux faire est de créer ces ensembles de Wireframes pour l'iPhone 8. Cliquez sur iPhone 8. Maintenant, nous allons nous assurer que notre taille d'écran est de la même taille qu'un iPhone 8 réel. La taille réelle de l'iPhone 8 est 375 par 667. Prenons un rectangle, ajoutez-le à la toile, et donnons-lui une taille de 375 par 667. Maintenant, le cadre de l'iPhone derrière il devrait être 429 par 848. Comme vous pouvez le voir, je ne fais que taper ces dimensions dans la section taille ici dans le panneau des propriétés. Alignons ça pour nous assurer que notre rectangle est là, au centre là. Maintenant que nous avons créé la taille de l'écran de l'iPhone pour être exactement la même taille d'écran qu'un iPhone 8, créons un symbole afin que nous puissions utiliser le même contrôle de l'interface utilisateur Wireframe dans tous nos balises. Prenons le cadre de l'iPhone à l'arrière, saisissons le rectangle que nous venons de créer et regroupez-les. Avant de créer un symbole, nous devons les regrouper. Vous pouvez soit faire la commande G pour les regrouper, soit avec les deux sélectionnés, vous pouvez cliquer sur ce bouton ici, le bouton Grouper. Une fois que vous le groupez, vous voyez qu'il devient de couleur violacée. Maintenant, à droite, vous verrez que vous avez la possibilité de le convertir en symbole. Prénommons notre nouveau symbole, appelons-le iPhone 8, et convertisons-le en symbole. Maintenant, nous l'avons comme un symbole que nous pouvons utiliser dans toutes nos balises pour ce projet. Comment pouvons-nous le savoir ? Si nous allons à Symboles, nous verrons maintenant notre iPhone 8 comme l'un des contrôles de l'interface utilisateur. Commençons à créer un écran de compte. Ce que nous voulons à l'écran est une image pour un logo, vous voulez un titre, et vous voulez des champs de saisie, des conditions de service case à cocher que les gens peuvent sélectionner pour accepter les conditions de service. Nous allons vouloir créer un bouton de compte et ce genre de chose. Commençons par le logo, nous allons juste prendre une image pour cela. Allons à Ajouter rapide ici en haut à droite, nous allons cliquer dans ce champ de saisie et tapons l'image, et vous voyez l'image arrive ici. Double-cliquez sur cela et cela l'ajoute, et ajoutons-le à notre écran. Vous voyez qu'il y a une ligne bleue, elle vous permet de savoir qu'elle est centrée. Maintenant, nous allons créer un titre pour notre écran. Nous pouvons soit aller en haut à droite ici et taper du texte ou de l'étiquette pour trouver ce que nous voulons, ou nous pouvons aller au texte, cliquez sur le bouton Texte ici et nous voyons nos contrôles de l'interface utilisateur concernant le texte. Ce que nous voulons, c'est une étiquette, alors faisons glisser ça dans l'écran sur la toile. Nommons le titre, Créer un compte, et nous allons le rendre un peu plus grand. Ici, à droite dans le panneau des propriétés, faisons 28. Centrons ça aussi. Maintenant, nous allons créer des champs de saisie pour que les utilisateurs puissent taper leur prénom, adresse e-mail et leur mot de passe pour créer leur compte. Revenez ici à Quick Add est ce que j'aime faire. Allons chercher une entrée, Entrée texte ici. Il suffit de saisir cela et tirons le long afin qu'il soit autour de la même largeur que le titre. Allons obtenir une autre étiquette au-dessus de ces champs de saisie. Double-cliquez sur ce texte ici, il y a une étiquette et appelons-le prénom. Maintenant, cette étiquette va avec ce champ de saisie ici. Ce que nous voulons faire, c'est que nous voulons les regrouper afin que nous puissions facilement les dupliquer, puis créer plus de champs d'entrée. Ça le rend beaucoup plus facile. Sélectionnons le prénom, sélectionnons le champ d'entrée, et nous allons les regrouper, et maintenant nous avons notre contrôle de l'interface utilisateur de groupe ici. Maintenant, dupliquons ça. Nous pouvons soit faire la commande D ou nous pouvons venir ici à ce bouton ici et cliquer sur « Dupliquer » et qui va dupliquer le champ d'entrée. Appelons celui-là un e-mail. C' est à l'utilisateur d'entrer son e-mail ici. Faisons un de plus, appelons celui-ci un mot de passe pour configurer leur mot de passe. Double-cliquez là, puis tapez le mot de passe, et pour sortir, nous cliquons sur cette petite icône d'accueil ici qui le fait sortir de la toile. Nous avons nos champs de saisie pour que l'utilisateur crée son compte. Maintenant, ajoutons des conditions de service. Ce que nous voulons est une case à cocher, alors passons à cette case à cocher Ajout rapide, nous allons taper dans. Ici, nous l'avons ici, nous allons double-cliquer dessus, il va l'ajouter, et modifions ce texte ici pour dire les conditions d'utilisation. Voilà, tu y vas. Maintenant, nous avons besoin d'un bouton pour qu'une fois que l'utilisateur remplit toutes ces informations, il puisse cliquer sur un bouton qui les mènera à l'écran suivant. Allons à Boutons, et ici nous avons ce premier bouton et nous pouvons simplement double-cliquer dessus pour l'ajouter, et nous allons le rendre un peu plus grand. Modifions ce texte pour créer un compte. Rendons notre bouton un peu plus grand et centrons-le. Cela ressemble à une assez bonne faible fidélité créer un écran de compte. Encore une chose, disons que nous avons quelqu'un qui a déjà un compte, qu'il n'a pas besoin d'un compte, donc il veut juste se connecter. Alors créons une option pour cela. Allons de haut en bas, trouvons du texte, double-cliquez dessus, faites tomber ça. Voyons, qu'est-ce qu'on veut qu'il dise ? Eh bien, disons-le, j'ai déjà un compte, et nous voulons que l'action qu'ils prennent est de cliquer sur un bouton de connexion. Dupliquons ce texte, puis changeons-le, mettons-le à côté de lui, et appelons cette connexion. Regroupez-les pour qu'on puisse les déplacer facilement. Double-cliquez sur cette connexion et changez sa couleur afin que nous sachions que c'est un lien qui est souligné. Créez un lien utilisateur souligné et changez la couleur pour dire bleu. Cliquez sur le « Accueil » pour revenir, et donc là vous l'avez. C' est notre création d'un écran de compte, où nous avons notre logo en haut, le titre de l'écran créant le compte. Nous avons nos trois champs de saisie pour que l'utilisateur saisisse son prénom, son e-mail et son mot de passe. Nous avons des conditions de service. Ils cliqueraient sur cette case à cocher, puis créeraient un compte. S' ils ont déjà un compte, ils cliqueraient sur une connexion, et ils iront à l'écran de connexion au lieu d'être ici sur l'écran de création d'un compte. Donnons un nom à ceci. Nommons notre Wireframe ici que nous venons de créer. Cliquez sur « Renommer » et appelez cela créer un compte, et là vous allez. Commençons à créer notre prochain écran qui est l'écran de configuration du profil, et nous le ferons dans la prochaine vidéo. 10. Le cadre de la configuration de profil: Maintenant, nous allons créer notre écran de configuration de profil. Dans la vidéo précédente, nous avons créé l'écran Créer un compte, alors nous allons maintenant passer à ce qui arrive à l'utilisateur une fois qu'il a cliqué sur le bouton Créer un compte. Nous allons faire un nouveau filaire. Permet de dupliquer ce filaire, et nous allons le renommer et l'appeler Profile Setup. Supprimons tout ce que nous avons sur cet écran pour pouvoir recommencer. Pour la configuration de notre profil, l'utilisateur saisit son prénom ici sur l'écran Créer un compte. Cela s'affichera sur l'écran Configuration du profil. Cherchons une étiquette, double-cliquez. Mettons-le sur la toile. Disons que dans l'écran Créer un compte, il s'appelait Joe. Rendons ça un peu plus grand. Faisons ça 28. C' est centré ? Oui. Ce que nous voulons que l'utilisateur fasse, c'est de remplir des informations dans différentes sections, afin que nous ayons une section sur le genre, quelle taille ils sont, leur niveau de forme physique et quel type d'entraînement ils aiment. De cette façon, vous pouvez obtenir toutes ces informations d'eux, et il va remplir cela dans leur profil et permettre à l'application d'afficher une liste d'entraînements en fonction de leurs préférences d'entraînement. Créons l'écran de genre. On veut obtenir un autre label. En fait, on peut juste dupliquer celui-là. Rallons-le un peu plus petit. Retournons en arrière. Appelons ça le genre. Rendons ça un peu plus petit. C' est encore trop grand. Genre. Cherchons des boutons radio. Tapons la radio. Ici, on y va, double-cliquez. Ajoutons ceci et changeons ceci pour dire Homme, cette option, puis dupliquons cela et appelons la suivante Femme. C' est notre section genre. Regrouperons ceci pour que nous puissions facilement les déplacer et ensuite le centrer. Eh bien, non, alignons ça à gauche. La section suivante que nous voulons est la hauteur. Allons ici. Copions ça. Eh bien, non, voyons juste ça. C' était à 20 ans. Retournons en arrière. Prenons une étiquette, double-cliquez, et appelons cette section Hauteur. Faisons 20 similaire à la même taille que Genre, et prenons quelques champs de saisie de texte afin qu'ils puissent entrer leur hauteur en pieds et en pouces. Tapons l'entrée, saisie de texte, double-cliquez dessus. Mettons-le à l'écran. Diminçons-le, puis prenons quelques textes. Je suppose qu'on peut aussi faire un label pour ça. Double-cliquez dessus. Disons que ce premier, c' est les pieds. Ajoutons quelques deux-points ici. Regrouperons ces. Le champ de saisie et le texte des pieds, Commande G. Dupliquons cela, Commande D, ou vous pouvez également aller vers le haut comme nous l'avons fait précédemment. Donnons un nom à ce pouce. Retournons en arrière. C'est notre section de hauteur. Prenons tout ça. Regroupez-les pour qu'on puisse facilement les déplacer. C' est la hauteur. Maintenant, créons la section niveau de remise en forme. Allons encore chercher une étiquette. Je pense qu'on doit inclure l'étiquette du bouton texte. Double-cliquez dessus et tapons. Faites ce texte au niveau de remise en forme. Encore une fois, faisons ce 20. Trouvons quelques boutons radio. Ajoutez également ce deux-points à nouveau. Bouton radio. Ce que nous voulons savoir, c'est s'ils ont le niveau débutant, expérimenté ou avancé. Ce premier sera Débutant. Dupliquons ça. Ensuite, nous dirons Avancé. Dupliquez encore ça. Cela dira Expérimenté. Encore une fois, regrouperons ces. Maintenant, créons une section pour eux afin de sélectionner le type d'entraînement qu'ils aiment. Encore une fois, prenons une étiquette. Tapons l'étiquette, double-cliquez. Je dirais des séances d'entraînement que tu aimes. Encore une fois, faisons ce 20. Allons avoir ce qui serait des images de ces séances d'entraînement. Il aura une image de cardio qu'ils peuvent sélectionner, poids qu'ils peuvent sélectionner, frapper l'entraînement qu'ils peuvent sélectionner, ou l'entraînement de poids corporel. Cherchons une image. Double-cliquez dessus. Voyons voir très vite. C'est trop grand. Oui, un peu trop gros. Allons l'emménager. Ajoutons une étiquette à cela, et appelons-ça Cardio. Regroupez-les pour que nous puissions facilement les dupliquer. Déplaçons ça vers le haut. Cliquez sur le bouton arrière. Maintenant, dupliquons ceci. Appelons celui-là Poids. Centrons ça. Dupliquons celui-ci à nouveau pour créer une autre ligne. On dirait qu'on va manquer d'espace. Essayons de tout déplacer parce que nous avons besoin d'un espace pour notre bouton en bas. Déplaçons ça vers le haut. Déplacez celui-ci légèrement vers le bas. Appelons ce texte ici Hit. Vous pouvez cliquer sur le bouton d'accueil ou vous pouvez double-cliquer sur Canvas pour revenir. Dupliquons ceci. Appelons ça Bodyweight, donc ils aiment faire de l'entraînement de poids corporel. Ça a l'air bien. Cherchons notre bouton. Double-cliquez dessus. Disons que le bouton devrait dire Continuer. Rendons le bouton un peu plus grand et centrons le. C' est notre écran de configuration de profil. Sur le film précédent, nous avons créé l'écran Créer un compte. L' utilisateur remplit ceci, tapez son prénom, son prénom apparaîtra dans la configuration du profil, puis il sélectionne ses choix pour continuer à configurer son profil, qui sera sélectionner son sexe, ajouter leur taille, quel niveau de remise en forme ils sont, et le type d'entraînement qu'ils aiment, puis ils cliquent sur « Continuer ». À partir de là, une fois qu'ils cliquent sur « Continuer », ils seront redirigés vers l'écran suivant que nous ferons dans la vidéo suivante, qui sera un écran Liste des entraînements. Commençons à créer cet écran dans la vidéo suivante. 11. L'engrenage de la liste de l'écran d'entraînement: Commençons à créer une liste d'écran d'entraînement. Cet écran sera l'endroit où les utilisateurs peuvent afficher une liste d'entraînements par catégorie. Ils peuvent rechercher des séances d'entraînement ou des exercices spécifiques qu'ils souhaitent compléter, comme des burpees ou peut-être des exercices de jambe. Il y aura une barre d'onglets de navigation Bodman qui permettra aux utilisateurs de naviguer vers l'écran d'accueil, l'écran d'entraînement, qui est ce que nous créons en ce moment, et un écran de profil. Commençons à créer un ajout d'éléments pour ce nouvel écran. La première chose que nous ferons est d'ajouter un nouveau filaire. Appelons ça la liste des séances d'entraînement. Prenons notre symbole iPhone 8, alors cliquez sur le bouton « Symboles » et nous pouvons double-cliquer sur le symbole « iPhone 8" pour ajouter cela à notre toile. Maintenant, commençons à ajouter quelques éléments. Au départ, la première chose que nous voulons est la barre de recherche. Disons que nous recherchons une boîte de recherche, voici, double-cliquez. Ajoutons cela en haut de l'écran et déplacons cela sur toute la largeur. L' élément suivant que nous voulons est une barre de boutons, où les utilisateurs peuvent utiliser cette barre pour naviguer vers différentes catégories. Barre de boutons, apportons cela sur cette toile, et répandons également cela sur l'écran. Donnons-lui quelques catégories, donc disons poids corporel, HIIT, cardio, et poids. Si vous séparez chacun de ces mots ici avec une virgule, lorsque vous cliquez dessus, il ajoutera une barre de boutons, donc nous avons notre barre de boutons. Maintenant, nous allons créer une liste d'images qui montrera une liste d' entraînements en fonction de la catégorie sur laquelle l'utilisateur a cliqué en haut. S' ils cliquent sur le poids corporel, il affichera une liste d'exercices de poids corporel, HIIT, il montrera une liste d'exercices HIIT, et ainsi de suite. Créons une image. Disons que nous sommes dans la catégorie du poids corporel puisque cela est sélectionné. Créons-le, trouvons une image. Allons faire tomber ça, et faisons ça un 130 par 80. Au lieu d'essayer de comprendre ce que chaque séance d'entraînement devrait dire, ajoutons simplement une ligne de texte. Cherchons du texte. Faisons un bloc de texte. Ensuite, nous pouvons facilement changer ça ici, comme ça, centrons-le, et nous allons le grouper. Vous avez maintenant l'image et le nom de cette séance d'entraînement ou de cet exercice. Regrouperons ça. Maintenant, nous dupliquons ça. Voici un autre exercice. Je vais laisser dire que c'est peut-être des burpees et c'est des tractions par exemple. Prenons ça et dupliquons, commande D, maintenez le bouton haut que nous avons utilisé, et espacons ceux. Faisons ça encore une fois, commande D. Déplaçons ça un peu. C' est notre liste d'images centrées. Lorsque l'utilisateur clique sur HIIT, l'idée est que ces images soient remplies avec tous les exercices ou entraînements qui sont marqués avec HIIT, même avec cardio, et poids. Ceux-ci seront remplis en fonction des catégories sur lesquelles vous avez cliqué. Enfin, nous allons créer une navigation par onglet. Navigation par onglet, prenons un rectangle comme arrière-plan pour notre navigation par onglet. Prenons quelques icônes. Nous voulons icône avec étiquette, nous tapons l'icône, permet d'obtenir l'icône avec étiquette. Ajoutons cela et recherchons, donc dans le panneau des propriétés ici et dans la section de l'icône, si vous recherchez une icône et dites la maison, il ajoutera l'icône d'accueil. Nous voulons que ce soit petit. Disons que la maison pour cette icône, dupliquons cela. Changons cela pour dire, des séances d'entraînement. Pour cela, changeons l'icône, peut-être une icône en étoile. Dupliquons encore ça. Appelons ce profil, ou appelons-le mon profil. C' est peut-être une personne pour ça. Voilà, tu y vas. Nous avons notre barre d'onglets avec nos différentes sections. Nous avons nos images, qui seront remplies en fonction de la catégorie sélectionnée, et nous avons notre barre de boutons, que les utilisateurs peuvent cliquer sur différentes catégories, et nous avons notre barre de recherche en haut. Dans l'écran suivant, nous allons créer l'écran des détails de l'entraînement. Disons qu'un utilisateur est sur le poids corporel, ils cliquent sur cette image, disent qu'il s'agit d'une séance d'entraînement burpee, ils cliquent dessus et il les emmènera au détail burpees, cet exercice spécifique ou l'écran de détails d'entraînement. Nous allons créer cet écran dans la prochaine vidéo. 12. L'écran de détails de l'entraînement: Commençons à créer notre écran de détails d'entraînement. Cette page affiche les détails de l' exercice ou de l'entraînement sélectionné que vous avez choisi. Par exemple, si vous avez sélectionné des burpees sur la liste précédente de l'écran d'entraînement, il affichera cette séance d'entraînement et des détails sur cette séance d'entraînement, tels que la description de l'entraînement, etc. Commençons à créer et à ajouter des éléments pour cet écran. allons d'abord dupliquer notre liste d' écran d' entraînement afin que nous ayons déjà notre barre d'onglets en bas, dont nous aurons besoin pour cet écran de détails d'entraînement. Sélectionnons ceci et cliquez sur le bouton « Dupliquer » en haut, ce qui va créer notre nouvel écran. Renommez-le et appelons-le les détails de l'entraînement. Nous avons notre barre d'onglets. Supprimons tous les autres éléments. Ce dont nous aurons besoin pour cet écran au départ sera le bouton fléché arrière. Cherchons des icônes. Allons à ajouter rapidement et nous allons cliquer sur « Icône ». Nous n'avons pas besoin d'une icône avec une étiquette, nous voulons juste l'icône alors nous allons double-cliquer dessus. Ajoutez-le à la toile. Cherchons la flèche. Nous voulons une flèche arrière, utilisons cette flèche. On a une flèche ici. Cherchons maintenant un titre pour notre écran. Appelons ces détails de classe. C' est très grand, alors faisons-le beaucoup plus petit. Faisons en 16 pixels, et centrons-le. Dupliquons ceci et avons un titre pour notre séance d'entraînement ou d'exercice. Appelons ce titre d'entraînement. Rendons ça un peu plus grand. Doublons-le en taille, faites-le 32 pixels et centrons cela. Ensuite, avons une image, l'image principale pour l'entraînement. Retournons ici encore. Ici, boîte d'image, étirez ça à travers. Maintenant, nous allons vouloir une description pour informer les gens de ce qu'est cette séance d'entraînement. Dupliquons celui-ci. Tailles jusqu'à 18. Appelons cette description et centrons ça. Allons chercher un texto. On ne sait pas ce qu'on veut dire. Nous allons juste obtenir un bloc de texte juste pour laisser les utilisateurs et les parties prenantes savoir que c'est là que va aller notre description de l'entraînement. Nous ne savons pas ce que le texte final dira juste passer commande pour l'instant. Centrons ça. Sous cela, nous voulons un bouton. Nous cliquons simplement sur « Boutons » ici et faisons glisser cela dans. Nous voulons que ce bouton dise commencer. En cliquant sur ce bouton, cela démarrera la vidéo. Vous mènera à l'écran vidéo d'entraînement qui est l'endroit où vous pouvez commencer à lire la vidéo, commencer à jouer l'entraînement réel. Là, vous l'avez. Une fois que vous allez à la liste des séances d'entraînement, vous cliquez sur une séance d'entraînement, vous emmenez aux détails de l'entraînement. Vous avez une flèche pour revenir en arrière, vous avez un détail de classe pour vous indiquer où vous êtes dans l'application, le titre de l'entraînement, une image, vous avez une description, un titre de description. En fait, juste pour être sûr que nous avons quitté l'alignement, alignons cela à gauche. Nous avons un titre de description et nous aurons sous cela la description réelle de l'entraînement ou de l'exercice, puis nous avons notre bouton de démarrage. Sur la vidéo suivante, nous allons travailler sur l'écran vidéo d'entraînement, qui est l'endroit où vous allez réellement lire la vidéo, vous pouvez terminer la vidéo. Il montrera la durée de la vidéo, combien de temps reste dans cette séance d'entraînement. Commençons à travailler sur cet écran. 13. Réglage vidéo de l'écran d'entraînement: Commençons à créer un écran vidéo d'entraînement. Cet écran affiche une vidéo de l'entraînement ou de l'exercice que vous avez choisi. Il affichera la durée de la vidéo, et nous avons un bouton pour que vous terminiez l'entraînement. Commençons à créer et à ajouter des éléments pour cet écran. Créons un nouveau filaire, et appelons-le écran vidéo d'entraînement, et cherchons un symbole iOS, iPhone 8 que nous avons créé plus tôt. Commençons à ajouter nos éléments à cet écran. Il s'agit d'un écran vidéo d'entraînement sur l'écran précédent. L' écran de détail de l'entraînement est l'endroit où vous pouvez démarrer la vidéo. Donc, lorsque vous cliquez sur le bouton « Démarrer », il vous mènera à cet écran ici qui va lire la vidéo réelle. Cherchons un lecteur vidéo, ajoutez-le. Rendons-le un peu plus grand. Centrez et ajoutons un titre, et cela affichera la durée, je veux dire combien de temps reste dans la vidéo pendant que vous travaillez. Disons huit minutes et 34 secondes. Rendons ça un peu plus grand. Faisons ça 72, et remontons un peu la vidéo. Faisons ça 14. Créons un bouton qui nous donnera la possibilité de mettre fin à l'entraînement. Cherchons un bouton. Double-cliquez dessus, et appelons cette End Workout. Faisons un peu plus grand, et centrons ça, et là tu l'as. Nous devons ajouter une image. Ajoutons une image dans cette vidéo. Cela affichera notre image. Supposons que vous vouliez ajouter une image réelle dans cette zone d'image. Vous pouvez le faire en cliquant sur le signe plus, et sur votre ordinateur, trouver une vidéo. J' ai ça. J' ai quelques vidéos ici. Ajoutons celui-là. J'ai dû l'avoir téléchargé avant, alors disons existant, ou utilisons un nom. Ici, nous allons avec notre image, et nous voulons garder cette faible fidélité. Donc, ce que nous pouvons faire est de cliquer sur le « Sketch it » et ça donnera le champ sommaire, et maintenant nous avons notre vidéo là-bas. Si vous voulez recadrer cette image, disons simplement cliquer sur ce bouton « Recadrer », et vous pouvez la recadrer comme ça. Tu veux le rendre plus petit, tu veux plus grand, ce genre de chose. C' est ainsi que vous pouvez ajouter des images tout en conservant une faible fidélité. Nous cliquons sur le bouton « Play » vidéo afin de jouer, la durée ici en bas, et si nous devons terminer notre séance d'entraînement tôt, nous terminons l'entraînement. Terminez l'entraînement, il vous ramènera à l'écran des détails de l'entraînement. C' est notre écran vidéo d'entraînement. Ce que nous ferons ensuite, c'est de créer un prototype de faible fidélité à l'aide tous ces écrans afin que nous puissions le transmettre aux parties prenantes ou aux utilisateurs pour les tester et voir s'ils aiment le flux. On y travaillera dans la prochaine vidéo. 14. Liaison et présentation dans Balsamiq: Nous y voilà. Après avoir créé notre série de filaires ou de maquettes, nous sommes maintenant prêts à les relier pour créer un prototype. Dans cette vidéo, nous allons parler de lier nos fils filaires et après les avoir liés, créer un prototype et de les présenter aux membres de votre équipe de conception, vos utilisateurs de tests ou à vos parties prenantes du projet. Commençons. Dans les vidéos précédentes, nous avons créé un filaire de création de compte, un filaire de configuration de profil, un filaire de liste d'entraînements, un filaire de détails d'entraînement et un filaire de vidéo d'entraînement. Commençons à les relier ensemble pour que nous puissions créer notre prototype de faible fidélité. Sur notre écran Créer un compte, nous avons le titre, le prénom, l'e-mail, les entrées de texte de mot de passe, conditions d'utilisation sur lesquelles l'utilisateur va cliquer, puis ils cliqueront sur le bouton « Créer un compte », qui les mènera à l'écran de configuration du profil. Pour lier cela à l'écran Configuration du profil, nous allons à la section Lien du panneau Propriétés. Une fois que le bouton est sélectionné et que vous verrez nous avons une liste de maquettes filaires que nous avons créées, avec leurs noms que vous voyez également ici sur la gauche, également dans cette zone. Nous cliquons sur Configuration du profil. Il va maintenant créer un lien vers l'écran Configuration du profil. Vous avez également ces autres options ci-dessous, Lien vers une adresse Web, Lien vers un nouveau filaire, Lien vers un doublon de ce filaire. Retour en arrière (en plein écran), Aucun lien. Nous ne allons pas nous inquiéter de ces options de fond ici. Nous allons juste utiliser les meilleures options ici. Maintenant, allons à l'écran Configuration du profil. Ici, nous avons notre nom que nous avons mis dans l'écran Créer un compte, la section sexe, la taille, que vous remplissez, leur niveau de forme physique et les séances d'entraînement que vous pouvez aimer. Ils sélectionnent le type d'entraînement qu'ils aiment généralement , puis ils cliqueront sur le bouton Continuer. Nous allons sélectionner le bouton Continuer, revenir à la section Lien dans le panneau Propriétés et nous allons lier cela à la liste des entraînements. Trouvons cela, Liste de l'écran d'entraînement. Ok, maintenant, on va à l'écran Liste des séances d'entraînement. Vous devez rechercher l'option. Vous avez vos catégories de séances d'entraînement que l'utilisateur peut cliquer pour voir une liste d'entraînements en fonction de cette catégorie et nous avons la barre d'onglets en bas. Lorsque l'utilisateur sélectionne une séance d'entraînement qu'il aime, il sera redirigé vers l'écran Détails de l'entraînement de cette séance d'entraînement. Nous sélectionnons une séance d'entraînement, revenons sur le panneau Propriétés et le lions à l'écran Détails de l'entraînement et vous voyez cette petite icône apparaît, pour nous faire savoir qu'elle est liée à un autre écran. Allons maintenant à notre écran Détails de l'entraînement. Une fois que l'utilisateur a cliqué sur l'entraînement qu'il a sélectionné, vous accédez à l'écran Détails de l'entraînement, qui a le titre de l'entraînement, une photo de l'entraînement, une description de l'entraînement et ils cliqueront sur « Démarrer », pour commencer à visionner la vidéo et pour commencer l'entraînement. Encore une fois, allons dans le panneau Propriétés et trouver le filaire à qui le lier, qui s'appellera l'écran Vidéo d'entraînement et maintenant, enfin, nous allons aussi utiliser le bouton « Précédent » et relier cela à l'écran Liste d'entraînement. Pendant que nous y sommes, faisons aussi nos onglets. Notre onglet peut aller à la liste des entraînements. Faisons la même chose sur l'écran Détails de l'entraînement, avec l'onglet, qui va revenir à la liste des entraînements et notre dernier écran est la vidéo d'entraînement. Une fois que l'utilisateur clique sur Démarrer, il va à l'écran Vidéo d'entraînement, affichera la vidéo, la durée de la vidéo et leur capacité à mettre fin à l'entraînement. Ici, nous allons simplement créer un lien vers Terminer l'entraînement, qui vous ramènera aux détails de l'entraînement. Ok, nous allons lier ceci, ça vous ramènera aux détails de l'entraînement, et là vous l'avez. Nous avons lié tous nos écrans. Maintenant que nous avons tous nos filaires reliés entre eux, ils deviendront maintenant un prototype cliquable, une fois que nous les exporterons. Maintenant, nous voulons les exporter en PDF et pour ce faire, vous voulez aller en haut et cliquez sur « Fichier » et sélectionnez « Exporter au PDF ». Cliquez dessus et vous voyez les options de la façon dont vous souhaitez exporter vos filaires. Souhaitez-vous sélectionner Toutes les trames filaires ? Voulez-vous simplement exporter le filaire actuel ? Ou voulez-vous simplement sélectionner un ensemble spécifique de filaires ? Maintenant, nous ne voulons pas exporter tous les filaires, car cela exporterait le Persona, le Storyboard et le flux utilisateur. Nous voulons simplement sélectionner l'option « A Set of Wireframes ». Nous cliquons dessus et maintenant nous allons sélectionner les filaires que nous voulons exporter. Nous voulons créer un compte, la configuration du profil, la liste des entraînements, les détails de l'entraînement et la vidéo d'entraînement. Après cela, je sélectionne normalement Optimiser pour l'affichage à l'écran. Après cela, je sélectionne Afficher les conseils de liaison et Ajouter des noms filaires. Ok, maintenant nous sommes prêts à exporter au format PDF. On clique juste sur ce bouton. Une autre option que nous avons, est non seulement d'exporter ces filaires vers un PDF, mais de présenter ces maquettes, résolution insoluble en plein écran. Si vous ne vouliez pas que les parties prenantes, les membres de l'équipe de conception ou les utilisateurs de test le testent eux-mêmes, mais que vous voulez plutôt démonter le prototype pour eux, vous cliquez sur le bouton « Présentation en plein écran » en haut à droite et qui affichera votre maquette en mode plein écran. Comme vous le voyez, lorsque vous roulez sur les zones cliquables, il nous montrera un indice en tournant cette nuance de rouge et que le bouton est cliquable. Cliquez sur l'actif des boutons pour cliquer sur le mode de démonstration et de présentation. Afin de sortir du mode plein écran, vous cliquez sur le bouton « Échap » et cela vous ramène à votre ensemble de filaires. Ce sont les deux façons de présenter vos images filaires, sous forme de présentation en plein écran ou de les exporter sous forme de PDF cliquable. Dans la leçon suivante, nous passerons en revue le prototype PDF que nous avons créé. 15. Présentation de prototypes PDF dans Balsamiq: Nous avons créé notre fichier PDF prototype dans la leçon précédente. Jetons un coup d'oeil à ce dossier. Ceci est le prototype de faible fidélité sous forme PDF que vous allez envoyer un test utilisateurs, les membres de votre équipe de conception, ou les parties prenantes de votre projet. En regardant ce fichier, nous sommes sur l'écran de création d'un compte. Herr les utilisateurs saisissent leur nom, leur adresse e-mail et leur mot de passe. Ensuite, ils cliqueraient sur le bouton « Créer un compte ». Maintenant, nous sommes sur l'écran de configuration du profil. Les utilisateurs indiqueront s'ils sont masculins ou féminins, leur taille, leur niveau de forme physique et le type d' entraînement qu'ils aiment, puis ils cliqueront sur « Continuer ». Ici, nous sommes sur la liste de l'écran d'entraînement. Cet écran décompose les séances d'entraînement dans l'application en catégories avec ces catégories étant le poids corporel, HIIT, cardio et poids. Quelle que soit la catégorie sélectionnée, une liste des séances d'entraînement correspondant à cette catégorie s'affiche dans la zone de contenu principale. Supposons que vous sélectionnez une séance d'entraînement et que vous serez redirigé vers l'écran initial de cette séance d'entraînement où vous verrez le titre de cette séance d'entraînement, une image de cette séance d'entraînement, une description de l'entraînement et un bouton « Démarrer » où si vous cliquez dessus, il commencera à lire la vidéo de l'entraînement. Au bas de l'écran, nous avons la barre d'onglets où les utilisateurs peuvent naviguer vers l'écran d'accueil, l'écran d' entraînement et afficher leur profil. En haut, il y a un bouton fléché où les utilisateurs peuvent revenir à l'écran précédent. Cliquez sur « Démarrer », et maintenant vous serez redirigé vers l'écran vidéo d'entraînement. Maintenant, vous êtes sur l'écran vidéo de travail, qui affiche un lecteur vidéo, le temps écoulé de la vidéo qui comptera rebours pendant la lecture de la vidéo pour montrer à l'utilisateur combien de temps reste dans l'entraînement, et une fin de la bouton d'entraînement pour que les utilisateurs cliquent juste au cas où ils ne peuvent pas terminer l'entraînement pour une raison quelconque. Voici le prototype PDF. C' est à quoi ressemblerait le prototype sous forme PDF si vous l'envoyiez aux utilisateurs de test, aux membres de votre équipe de conception ou aux parties prenantes du projet pour obtenir des commentaires de leur part. 16. À propos du projet dans Adobe XD: Pour ce projet, nous allons créer un ensemble de filaires autour de cinq. Ensuite, prenez ces filaires et faites un prototype de faible fidélité avec eux. Le projet peut être une application mobile de votre choix. J' ai un exemple de projet que j'ai créé pour le cours. Pendant le cours, je vais passer en revue les étapes que j'ai prises pour créer ces filaires et prototypes afin que vous puissiez voir comment je le fais. Vous pouvez l'utiliser comme modèle pour votre projet. Vous n'avez pas besoin d'une expérience préalable avec le logiciel Adobe XD, car je vais rapidement vous donner un aperçu de la façon de l'utiliser tout au long du cours. Le projet final est quelque chose que vous pouvez utiliser dans votre portefeuille pour montrer les clients, les membres de votre équipe de conception ou même les employeurs potentiels. Lorsque vous regardez les descriptions de travail de concepteur UX, être capable de filer et de prototype est très souvent dans ces descriptions. C' est une compétence qui vous aidera vraiment dans votre emploi actuel ou si vous êtes à la recherche de ce prochain emploi UX. Adobe XD est un outil très populaire que beaucoup du département UX à utiliser de nos jours. 17. Personnas et flux d'utilisateurs dans Adobe XD: Avant de commencer à créer nos filaires, j'ai créé un utilisateur averti personas et un flux utilisateur pour vous montrer un peu sur les documents qui font généralement partie du processus de conception. J' ai fait deux personnages, un homme et une femme. Ces deux personnages ont été développés de sorte que lorsque vous passez par le processus filaire, vous le faites avec des utilisateurs spécifiques à l'esprit. Ces personnages s'appellent Jennifer et Chris. Ces personnas seront disponibles au téléchargement afin que vous puissiez les utiliser comme modèle lorsque vous commencez à travailler sur votre projet filaire. Sous les personas, nous avons un exemple de flux utilisateur. Cela nous aide à comprendre le chemin parcouru par l'utilisateur lors de la création de notre ensemble de filaires. Dans ce parcours, l'utilisateur va créer un compte, configurer un profil d'utilisateur, choisir une liste d'entraînements ; il y aura un écran de détails d'entraînement, puis l'utilisateur affichera une vidéo de l'entraînement. C' est notre flux utilisateur et nous allons créer cinq écrans basés sur ce flux. Ensuite, nous allons les relier ensemble pour créer un prototype de faible fidélité qui peut être testé par les utilisateurs. 18. Aperçu d'Adobe XD: Dans cette vidéo, passons rapidement en revue les outils d'Adobe XD. La configuration est similaire à d'autres outils de conception tels que Sketch et Figma. Sur la gauche, vous avez les outils de conception. Nous avons l'outil de sélection, l'outil rectangle, l'outil ellipse et l'outil polygone où vous pouvez créer des formes sur le canevas. Nous avons l'outil de ligne ci-dessous avec l'outil de plume. En vertu de cela, nous avons l'outil de texte, qui nous permet d'ajouter du texte à nos conceptions. Sous cela, nous avons l'outil de plan de travail. Une fois sélectionné, nous voyons sur la droite tous les différents plans de travail que nous pouvons utiliser pour nos conceptions. Il existe des plans de travail pour les conceptions mobiles, les tablettes, les postes de travail Web et les réseaux sociaux pour créer des designs pour Instagram et Facebook, puis des plans de travail pour créer des designs pour l'Apple Watch. Sous cela, nous avons l'outil de zoom. En bas à gauche, nous avons des icônes qui représentent les bibliothèques, les couches et les plug-ins. Les bibliothèques sont l'endroit où vivent les couleurs, les styles de caractères et les composants de votre projet. Les calques montrent les différentes couches de nos conceptions et plugins est l'endroit où nous ajoutons de nouveaux plugins à notre projet ou voir les plugins que nous avons actuellement dans notre projet. Au centre supérieur, vous avez une liste déroulante où vous pouvez renommer votre projet. haut à gauche, il y a des sections pour la conception, le prototype et le partage. La section design affiche nos outils afin de créer nos designs. La section prototype nous permet de créer un prototype de nos conceptions. Donc, si vous sélectionnez un plan de travail, vous le verrez en surbrillance en bleu et une flèche apparaîtra. Cette flèche nous donne la possibilité de cliquer et de le faire glisser vers un autre plan de travail. Après avoir cliqué et fait glisser la flèche pour la lier à un autre plan de travail, le panneau des propriétés de droite devient actif. Eh bien, nous avons maintenant des options sur la façon dont le lien vers cet autre écran sera déclenché. Sera-t-il un robinet, un drag, temps, des touches et une manette, ou une voix ? Sous cela, vous pouvez sélectionner le type de transition que vous voulez. Vous avez l'animation automatique, la superposition, plan de travail précédent, la lecture audio et la lecture vocale. Sous cela, vous aviez la section de destination, qui est l'endroit où vous décidez quel plan de travail est le plan de travail de destination. Vous pouvez modifier le plan de travail qui sera lié à partir d'ici. En vertu de cela, nous avons les différents types d'animations que nous pouvons sélectionner, comme dissoudre, glisser ou pousser. La section partage nous permet de créer un lien pour que votre prototype soit partagé avec d'autres personnes. Vous pouvez sélectionner les paramètres d'affichage tels que la révision de la conception, le développement, la présentation, le test utilisateur ou personnalisé. En vertu de cela, vous pouvez accorder l'accès à toute personne avec le lien que les personnes invitées ou toute personne avec un mot de passe, et après avoir fait ces sélections, vous cliquez sur le bouton Créer un lien, qui va ensuite créer un lien qui peut être partagées. haut à droite, vous avez des icônes qui invitent les collaborateurs à accéder à votre document et à le modifier. Aperçu de l'appareil, où vous pouvez prévisualiser les conceptions sur un périphérique connecté par USB. Ensuite, vous avez le bouton de présentation du bureau où vous pouvez prévisualiser et interagir avec votre conception. À droite, nous avons le panneau des propriétés. Ainsi, lorsque vous sélectionnez un élément ou ajoutez un élément au canevas, le panneau des propriétés à droite devient actif. Comme vous pouvez le voir, vous pouvez aligner vos éléments dans la section supérieure ici. Sous cela, vous avez la possibilité de répéter grille et de créer des formes à l'aide d'outils booléens à droite de cela. Sous cela, vous avez une section où vous pouvez créer des composants pour votre projet. Ensuite, vous avez une section où vous pouvez transformer vos éléments de conception. Vous disposez d'une section de mise en page où vous pouvez rendre les éléments de votre conception réactifs. Vous avez une section pour votre texte où vous pouvez modifier la police, la couleur de la police, la taille de la police, etc. C'est mon aperçu rapide pour Adobe XD. C' est vraiment un excellent outil à utiliser pour la conception UX et de l'interface utilisateur. 19. Créer un écran de compte dans Adobe XD: Commençons à créer nos filaires. Avant de commencer, XD avec d'autres outils de conception vous donne la possibilité de créer vous-même des actifs filaires ou des éléments, ou vous pouvez télécharger un kit d'interface utilisateur filaire avec éléments préfabriqués et simplement les personnaliser à partir de là. Nous allons aller au téléchargement d'un kit d'interface utilisateur filaire dans ce cours. Cela rend la tâche de rendre les filaires beaucoup plus rapide et beaucoup plus facile. Afin de télécharger un kit filaire dans XD, vous allez dans le menu Fichier, puis allez dans Obtenir les kits d'interface utilisateur, et sélectionnez « Filaires ». De là, vous serez redirigé vers une page Web où vous pouvez télécharger le kit filaire. Cliquez sur le lien des kits de téléchargement, qui téléchargera à la fois les versions Web et mobiles du kit filaire. Une fois que vous les avez téléchargés, recherchez ces téléchargements sur votre ordinateur, puis double-cliquez sur le fichier XD version mobile. Une fois ouvert, vous verrez une grande variété d'éléments filaires qui peuvent être utilisés à partir d'exemples de formulaires d'inscription, d'écrans de profil, de filtres et de recherche, et bien plus encore. Avant de commencer à utiliser ceci, j'aimerais garder mes éléments filaires aussi faible fidélité que possible. Autrement dit, au lieu d'avoir ces couleurs bleues, j' aime garder tout en niveaux de gris afin que couleur ne soit pas une distraction lors de la conception des filaires, ou ce n'est pas une distraction aussi bien pour les utilisateurs quand ils sont tester notre prototype éventuel. Changons le schéma de couleurs de ce kit filaire en niveaux de gris. En bas à gauche, vous verrez un ensemble d'icônes pour les bibliothèques, les calques et les plugins. Cliquez sur l'icône de la bibliothèque et un nouveau panneau s'affiche. Ce panneau affiche les styles de caractères, les styles de couleurs du kit d'interface utilisateur, etc. Allons aux couleurs et s'il est fermé, vous pouvez l'ouvrir simplement en cliquant sur la flèche et vous verrez les styles de couleur du kit. Lorsque nous changeons les couleurs ici, il effectuera tous les changements de couleur nécessaires dans tout le document. Changeons la première couleur. Si vous cliquez avec le bouton droit de la souris sur la couleur, un menu apparaîtra avec l'option Modifier la couleur. Choisissons ça. Maintenant, nous tirons juste notre couleur que vous voyez actuellement est en bleu. Nous tirons cela vers l'équivalent en niveaux de gris, qui sera juste ici. Maintenant, nous avons notre couleur gris plus foncé ici, et il va commencer à faire les changements de couleur tout au long de notre document. Zoom arrière un peu pour que ces couleurs soient mises à jour, nous puissions les voir. Maintenant, prenons notre deuxième couleur bleue, faisons un clic droit, cliquez sur « Modifier », tirons celui-ci vers le bas à droite à propos d'ici. Comme vous le voyez, nos couleurs changent et changent. Prenons notre couleur bleu clair ici et ramenons ça jusqu'ici. Encore une fois, vous voyez nos fils sont en train de changer les niveaux de gris avec chaque changement dans cette dernière couleur bleu clair, nous pouvons changer et simplement ajouter cela ici. Nous avons notre palais en niveaux de gris. Certaines de ces couleurs devront être mises à jour manuellement et nous pouvons le faire plus tard si nous utilisons réellement quelque chose dans cette section de menu ou cette section de message ou même ces popovers. Commençons à créer notre écran de création de compte. Ce sera le premier écran que nous allons créer dans notre ensemble de filaires. Cliquez sur, revenons à notre document filaire, et ajoutons un plan de travail. Si vous appuyez sur « A » sur votre clavier, vous verrez le panneau sur la droite, vous montrer une variété de plans de travail que vous pouvez créer à partir de mobile, tablette, bureau Web, médias sociaux, etc. Faisons iPhone X pour nos filaires et faisons glisser ceci vers le bas ci-dessous notre flux utilisateur. Allons zoomer un peu. Ce sera notre créer un écran de compte que nous allons commencer avec, appelons réellement ce plan de travail, créer un compte. Commençons à saisir quelques éléments de notre kit filaire mobile que nous avons téléchargé. Revenons aux fils mobiles et prenons une section où notre logo serait logé. Nous avons une section d'inscription qui est ce que nous voulons, notre écran de création d'un compte sera sur l'inscription de l'utilisateur. On peut prendre cette section ici, copions-la. Retournez à nos fils et nous pouvons simplement le coller. Disons que c'est là que notre logo ira. Revenons aux fils, et cherchons à créer une section de compte. Zoom avant. Ça a l'air plutôt bien. Prenons cela créer un compte et sélectionnons ces boîtes de saisie ainsi. Revenons à nos fils, kit filaire et cherchons une section d'inscription où nous pouvons créer un compte, champs de saisie et créer un en-tête de compte. Prenons cet en-tête ici, eh bien, on peut juste saisir cet en-tête ici. Revenons à nos filaires et ajoutons simplement ce centre. Revenons aux fils et trouvons quelques champs d'entrée. Je pense que c'est bien ici. En fait, on pourrait juste saisir qui créer un compte. Revenons aux trames filaires et collons ces champs de saisie ici, et nous voulons le nom complet, l' e-mail et le mot de passe, et confirmer le mot de passe. C' est parfait. Revenons en arrière et cherchons des conditions de service et nous en avons une ici. Retournons et collons ça. Ajoutons cela ci-dessous et nous allons nous assurer que c'est bien centré, et cherchons un bouton où nous pouvons avoir un bouton Créer un compte sur lequel l'utilisateur cliquera une fois qu'il a rempli le formulaire. Laissez-moi juste saisir ce bouton Continuer ici et ajoutons cela. Changeons ceci pour créer un compte, et disons que nous voulons un bouton pour un utilisateur s'il a déjà un compte qu'il peut simplement se connecter. Allons avec cela, avons déjà un login de compte, et allons simplement saisir ces éléments et les coller dans notre document. Déplaçons des trucs ici. Déplaçons ça. Conditions d'utilisation, créez un compte. On y va. Voyez à quel point c'était rapide. Avec des éléments préfabriqués dans un kit d'interface filaire déjà fabriqué, il a rendu la création de notre premier écran filaire très facile. Il suffit de changer les couleurs à une faible fidélité si vous le souhaitez, revenir au kit d'interface utilisateur filaire et de copier et coller les éléments dont vous avez besoin de les coller sur votre toile filaire. C' est notre écran de création d'un compte. Nous avons le logo, créer un en-tête de compte. L' utilisateur saisira son nom complet, son adresse e-mail, un mot de passe et confirmera son mot de passe, puis il créera un compte. S' ils ont déjà un compte, déplaçons ça vers le bas. S' ils ont déjà un compte, ils cliqueront sur login et ils seront reconduits à un écran de connexion. Nous n'utiliserons pas ce flux. Le flux que nous allons faire maintenant est juste de créer un compte qui est ici où nous disons que nous commençons, avez-vous un compte ? Non. Créez un compte, configurez votre profil, choisissez dans une liste d'entraînements, travaillez des détails, etc. C'est le flux que nous allons avec ici et le premier écran de ce flux est de créer un compte, que nous avons ici. Notre prochain écran que nous allons créer est de configurer votre écran de profil. On le fera dans la prochaine vidéo. 20. Écran de configuration de profil dans Adobe XD: Créons notre prochain écran, qui sera l'écran de configuration du profil. Créons un nouvel écran, allons simplement dupliquer notre écran Créer un compte en appuyant sur la commande D, et renommons ceci en configuration de profil, et nous allons nous débarrasser de certains des éléments qui sont ici pour que nous puissions commencer à nouveau. Gardez-les pour l'instant parce que nous pourrions finir par avoir besoin d'eux. Ainsi, l'utilisateur va créer un compte en remplissant son nom, son e-mail et son mot de passe, puis créer un compte. Disons qu'ils ont créé un compte, leur propre configuration de profil et leur nom apparaîtra en haut. Disons que le nom est John Doe. Centrons ça. Dans les propriétés ici, vous verrez que vous pouvez aligner à gauche, au centre ou à droite, et aligner au centre John Doe, puis mettons-le ici. Comme vous pouvez le voir, lorsque vous cliquez sur un élément, vous avez ici le panneau des propriétés de cet élément à droite. On a ça ici. Voyons quelle est la taille de la police. Gardons-le à 20 ans, ça devrait aller. Ici, sur l'écran de configuration du profil, nous voulons une section permettant aux utilisateurs de sélectionner leur sexe, leur taille, leur niveau de condition physique, et ils peuvent sélectionner le type d'entraînement qu'ils aiment, puis ils cliqueront sur » Continuer ». Nous avons le nom de la personne ici. Ajoutons une section où ils peuvent sélectionner leur sexe. Revenons aux fils, fils mobiles et faisons défiler. Voyons si nous pouvons trouver quelque chose avec [inaudible] juste saisir ce bouton radio ici et collons ça. Disons que ça dit, mâle et puis dupliquons ça, Commandement D et disons que ça dit, femelle. Ok, attrapons les deux. Déplaçons un peu et dupliquons ce John Doe pour que nous puissions donner un titre à cette section. Appelons ce genre et nous allons le rendre un peu plus petit. Faisons en sorte que 18 points. On les déplace en arrière. Donnons à ceci un deux-points ici à la fin, et changeons la couleur de ceci parce que je ne veux pas que ces deux couleurs soient les mêmes. Rallongeons ça un peu plus léger. Revenons aux fils et nous verrons que nous avons toutes nos couleurs ici. Prenons une couleur. Nous pouvons copier cette couleur hex ici. Revenons en arrière et ajoutons cette couleur dans la section de remplissage. On y va. Maintenant, si nous allons aux couleurs de la bibliothèque, nous n'avons rien dans notre section de couleurs. Commençons à les ajouter dans les couleurs de nos documents. Double-cliquez sur ceci et ajoutons cette couleur, donc maintenant nous avons cette couleur ajoutée. Allons ici, et ajoutons cette couleur. Maintenant, nous pouvons simplement cliquer sur ces couleurs au fur et à mesure pour les ajouter quand nous en avons besoin. Ok, donc nous avons notre section genre. Regroupez-les, Commandement G. Nous allons regrouper. Ce n'est pas au centre, nous voulons qu'ils soient alignés à gauche, mais c'est notre section genre. Dupliquons ça. Déplacez ceci vers le bas, et cette section suivante sera la section de hauteur. Tapez en hauteur, et nous voulons que cela soit aligné à gauche, et ce que nous voulons ici sont des champs de saisie de texte, pas des boutons radio. Alors débarrassons-nous des boutons radio. Nous voulons que ce soit vraiment des pieds, et nous voulons que ce soit des pouces et puis prenons un champ de texte. Nous pouvons simplement saisir celui-ci ici sur l'écran « Créer un compte » et nous allons coller cela ici, écran « Créer un compte » et nous allons coller cela puis nous allons le dimensionner vers le bas et le rendre plus petit. Peut-être quelque chose comme ça ici. On peut ajouter ça à côté des pieds. Donc maintenant l'utilisateur va taper là la quantité de pieds qu'ils sont, cinq pieds, six pieds là-bas et nous allons dupliquer cela et lui donner un pour pouces aussi bien. Regardons et voyons où sont toutes nos couches. Ajoutons ces champs de saisie dans ce groupe. Donc maintenant que nous pouvons déplacer ça, donc nous avons notre section de hauteur. Espacons un peu ça. Bon, alors maintenant ajoutons un niveau de forme physique. Dupliquons le sexe à nouveau, et appelons ce niveau de forme physique. Il faut se rappeler de faire en sorte que ces choses soient alignées. Ce que nous voulons, c'est, nous voulons que l'utilisateur soit en mesure de choisir s'il est un débutant, expérimenté. Dupliquons cela à nouveau, Commande D et disons, « Cette option est avancée ». Donc, ils sont tous alignés. Déplaçons cela légèrement vers le bas. Bon, donc on a le nom, on a le genre qu'ils choisiraient, ils ajoutaient leur taille, six pieds, deux pouces, par exemple. Niveau de remise en forme, sélectionnez si vous êtes débutant, expérimenté ou avancé. Maintenant, nous voulons avoir une section où nous découvrons le type d'entraînement qu'ils aiment. Copions simplement ceci et collons-le et disons que cet en-tête sera des entraînements que vous aimez. Il nous faut des images. Déplaçons ça vers le bas. Nous aurons besoin de quelques images qui serviront de porte-places pour les séances d'entraînement de type. Par exemple, peut-être que nous aurons une section cardio, une section de poids, une section HIIT et une section de poids corporel, et ils choisiraient lequel de ces entraînements ils aiment. Revenons aux fils, au kit filaire et nous allons trouver des cartes peut-être. Voyons s'il y a des cartes qu'on peut prendre. Allons zoomer. Allons avoir une meilleure vue. Allons ici à cette section et prenons juste quelques cartes de notre section des éléments de l'interface utilisateur ici et copions cela. Revenons à notre filaire et collons ça. Débarrassez-vous de ce bas ici, texte du bas et appelons ce cardio. Changeons la couleur de ceci. Centrer le nom, cardio et dupliquons ceci. Déplacez cela, et ce sera une sélection pour les poids. Prenons les deux et le centre. Déplaçons un peu vers le haut. Déplaçons notre bouton Créer un compte vers le bas, et dupliquons cette ligne. Amenez-le ici, on dirait qu'on doit déplacer un tas de trucs. Déplaçons des choses pour qu'on ait de la place. Ok, appelons ça HIIT, et ce sera des exercices de poids corporel. S' ils les aiment, ils peuvent le sélectionner. Nous pouvons en fait rendre cet écran un peu plus long afin d'avoir plus d'espace. Si vous sélectionnez un cadre, puis saisissez le fond, vous pouvez modifier la hauteur du tableau d'art. Même chose avec la largeur. Vous pouvez changer la largeur, mais nous ne voulons pas le faire. Alors rendons ça un peu plus long. De cette façon, nous pouvons déplacer notre bouton vers le bas et les choses ne sont pas si secouées ensemble, donnez-lui un peu d'espace. Sélectionnez cette section et déplacez-la vers le bas, sélectionnez-la et déplacez-la vers le bas. Prends un peu d'espace ici. Ici, nous voudrions juste que notre bouton dise, « Continuer ». Voilà donc notre écran de configuration de profil. ce moment, nous avons deux écrans. Nous avons l'écran de création d'un compte. Ils créent un compte, il les conduira à leur configuration de profil où leur nom sera renseigné à partir du champ d'entrée de nom complet ici. Ensuite, ils choisiraient leur sexe, ajoutaient leurs informations sur la taille, leur niveau de forme physique et le type d'entraînement qu'ils aiment. Ensuite, ils cliqueront sur « Continuer » et ils iront à l'écran suivant, qui sera notre liste des écrans d'entraînement. Nous allons donc créer la liste de l'écran d'entraînement dans notre prochaine vidéo. Mais ce sont les deux premiers écrans que nous avons actuellement dans notre ensemble de maquettes filaires. Nous avons donc Créer un compte, et configurer votre profil. Encore une fois, nous allons créer la liste des écrans d'entraînement dans la prochaine vidéo. 21. Liste d'un d'un dans Adobe XD: Maintenant, créons notre écran Liste d'entraînement. Nous avons nos deux écrans que nous avons créés dans les vidéos précédentes, Créer un compte et Configuration du profil. Maintenant, nous allons créer notre troisième écran, la liste des entraînements. Dupliquons Créer un compte. Renommons le en Liste des entraînements. Débarrassez-vous de certains des éléments afin que nous puissions commencer à partir de zéro. Sur cet écran, nous avons l'écran Liste des séances d'entraînement. Nous voulons une barre de recherche, liste des types d'entraînement où les utilisateurs cliqueront sur l'un des boutons de catégorie, et maintenant il affichera une liste d'entraînements en fonction de cette catégorie. Par exemple, si vous cliquez sur « HIIT », la catégorie HIIT affiche une liste d'exercices HIIT. Si vous sélectionnez « Poids », il sélectionnera afficher un ensemble d'exercices affichant vos séances d'entraînement avec des poids. Si vous sélectionnez « Cardio », par exemple, cette catégorie affichera une liste de travail cardio. Sous cela, vous cliquez à nouveau sur « Continuer », et nous aurons une barre d'onglets en bas, que tous les utilisateurs peuvent retourner à l'écran d'accueil, ils peuvent aller à leur écran de profil, et ils peuvent aller à la liste d'entraînement écran. Nous allons simplement créer cet écran Liste d'entraînement maintenant. Le premier élément dont nous aurons besoin est un champ de recherche en haut, afin que l'utilisateur puisse rechercher, s'ils veulent un entraînement spécifique, exemple burpees, ils peuvent rechercher burpee. Mettez burpee dans la boîte de recherche, et cela remplira une liste d'entraînements qui comprend des exercices de burpee. Revenons à notre écran filaire. Allons aux filtres et à la recherche. Cherchons un champ de recherche. On peut attraper celui-là. Ça a l'air bien. Retournez à nos filaires, et ajoutons cela en haut. Ensuite, notre section suivante, cherchons un titre pour notre barre de catégorie. Allons aux éléments de l'interface utilisateur et voyons s'il y a quelque chose là-dedans. On peut probablement l'utiliser. Ajoutons ceci. Cherchons un en-tête d'une sorte que nous pourrions utiliser. Je pourrais juste copier ceci, le dupliquer, et juste le dimensionner. Fais le 14. Faisons en 16. Appelons ça le type d'entraînement. Faisons le type d'entraînement, et puis nous aurons une liste de boutons. Revenons à notre kit filaire. Allons aux éléments de l'interface utilisateur. Prenons quelques boutons. Prenons ce bouton normal ici. On va copier ça. Collez ça dans notre filaire. Laisse la taille vers le bas. Donc nous voulons trois d'entre eux, alors faites la largeur, disons, 100. Disons que ce premier bouton dira HIIT. Dupliquons cela, et cette deuxième séance d'entraînement dira Poids. Dupliquons cela encore, et celui-ci dira Cardio. En vertu de cela, nous allons afficher une liste d'entraînements en fonction de la catégorie. Vous sélectionnez HIIT, il affichera une liste des séances d'entraînement HIIT. Prenons une carte ici et ajoutons ça en tant que porte-place. Montrez les séances d'entraînement, montrons ça comme Burpees. Centrons ça. Dupliquons ceci. Disons Cardio. Dupliquons cette ligne vers le bas. Disons que c'est Core Cardio. Celui-ci dira Entraînement de force. Changeons les couleurs. Disons que le type d'entraînement HIIT est par défaut. Sélectionné par défaut, donc nous allons [inaudible] couleur de ceci. C' est la couleur active. Sous tous ces éléments, nous voulons avoir un bouton qui indique Continuer. Vous recherchez une séance d'entraînement, si vous avez une séance d'entraînement spécifique à l'esprit, disons push-ups. Affichez les pompes ici ou vous pouvez passer par type de catégorie. HIIT montrera, vous les entraînements HIIT. Cela affichera la même chose ici. Si Weights, il va changer à cette couleur, et il vous montrera une liste de séances d'entraînement avec des poids, et ainsi de suite avec Cardio. Tu vois ? Maintenant, nous voulons une barre d'onglets en bas. Revenons à l'écran de nos fils et voyons si nous avons un bar. Un bar ici. Quoi d'autre ? Utilisez ce bar ici. Ce sera notre barre d'onglets, et nous nous inquiéterons des sections qui seront là plus tard. Ce sera notre barre d'onglets que nous pouvons cliquer d'avant en arrière en fonction du lien dans les onglets. Nous pouvons naviguer vers différents écrans dans notre flux. Nous ne ferons pas nécessairement tous ces écrans, donc nous n'avons pas vraiment besoin de tous ces boutons en ce moment, mais nous pourrons corriger ça plus tard. Mais c'est notre liste d'entraînement. Donc, nous avons créé et Workout, Configuration du profil, et liste des entraînements, barre de recherche, boutons de catégorie de type d'entraînement. Ensuite, nous avons l'affichage de nos séances d'entraînement en fonction de cette catégorie, barre de poursuite et de notre barre d'onglets. Dans l'écran suivant, nous allons créer notre écran Détails d'entraînement. Disons que cette séance d'entraînement HIIT, vous sélectionnez burpees, et vous serez redirigé vers un écran de détails d'entraînement, qui montre cette séance d'entraînement burpee. 22. Les détails de l'entraînement dans Adobe XD: Dans cette vidéo, nous allons créer l'écran Détails de l'entraînement. Cet écran contient les détails sur la séance d'entraînement que l'utilisateur a sélectionnée dans l'écran précédent. Donc, nous aurons un titre d'entraînement, nous aurons une image de la place pour la vidéo, nous aurons une description de la vidéo, et un bouton de démarrage. Continuons et créons cet écran. Dupliquons l'écran de création d'un compte, alors débarrassons-nous de tous les éléments dont nous n'avons pas besoin. Commençons à créer cet écran. Nous aurons d'abord besoin d'un bouton de retour pour revenir à la liste de l'écran d'entraînement. Avant de le faire, nommons ce plan de travail ici, les détails de l'entraînement. Ok, donc nous aurons besoin d'un bouton de retour. Juste au cas où vous l'utilisateur, il veut récupérer la liste des séances d'entraînement écran. Allons chercher une flèche. Allons aux fils mobiles et regardons sous les éléments de l'interface utilisateur, cherchons une flèche, flèche arrière. Nous pouvons utiliser n'importe quelle flèche, mais utilisons ceci. Allons zoomer et nous prendrons cette flèche. Retournons à notre écran. Ajoutons cela et avons un titre pour cet écran. Dupliquons ceci, déplacons-le vers le haut et appelons cet écran de détails de classe et nous allons la taille vers le bas. Faisons en dire 14 et centrons ça et faisons un titre. Donc texte d'espace réservé pour le moment, nous allons juste l'appeler titre d'entraînement. Centrer ce texte. Maintenant, centre aligné et centre sur l'écran et maintenant nous avons besoin d'une image d'espace réservé juste ici. Revenons aux fils et voyons si on peut trouver une image de porte-place. Défilons et allons dans les éléments de l'interface utilisateur et voilà, voici une image que nous pouvons utiliser comme espace réservé. Mettons ça sur notre écran et centrons ça. Débarrassez-vous de ces éléments de connexion, nous n'en avons pas besoin. Déplaçons ça vers le bas. Changeons la couleur de ceci et ajoutons cette couleur. Si vous double-cliquez et que vous voyez la couleur de remplissage ici, vous pouvez simplement ajouter cela, afin d'ajouter une nouvelle couleur dans votre palette de couleurs. Maintenant, nous pouvons simplement cliquer dessus, cliquez sur la couleur du changement, les couleurs que nous en avons besoin. Bon, alors maintenant, allons trouver une description. Nous allons ajouter une description ici. Revenons aux fils et trouvons une description. On dirait qu'on a quelque chose ici. Choisissons cela, copions-le, revenons à nos cadres métalliques et collons ça. Débarrassez-vous de ce petit corps et attrapons ces poignées. Vous pouvez modifier la largeur du texte. Centrons ça. Maintenant, nous allons utiliser ce bouton, changeons-le pour dire commencer. Ainsi, l'utilisateur cliquerait sur ce bouton pour les amener à l'écran vidéo réel où ils peuvent commencer à lire la vidéo et commencer à faire leur entraînement. Ajoutons bien cette barre d'onglets à cet écran. Nous avons donc notre écran de détails d'entraînement. Donc, ici, dans la liste des entraînements, un utilisateur va cliquer sur une catégorie, disons HIIT, ils auront un affichage des entraînements à succès dans cette catégorie. Par exemple, disons que ce sont des burpees, HIIT séance d'entraînement. Vous cliquez dessus, vous allez à l'écran des détails de l'entraînement, que nous venons de créer. Qui aura un détenteur de place de cette image vidéo, qui aura une image d'espace réservé de la vidéo qui s'affichera, qui aura une description et nous allons changer cela pour dire titre de description et nous allons en gras cela. Nous avons donc un titre de description, un texte d'espace réservé que nous allons décrire ce que sera cette séance d'entraînement, et un bouton de démarrage. Vous cliquez sur le bouton Démarrer, il vous mènera à l'écran suivant, qui sera l'écran vidéo d'entraînement et nous allons créer cela dans la vidéo suivante. 23. Écran vidéo dans Adobe XD: Créons notre dernier écran, l'écran vidéo d'entraînement. Sur cet écran, nous aurons la vidéo que vous pouvez cliquer sur le bouton « Lecture », il va commencer à lire la vidéo et nous aurons un bouton Fin d'entraînement, qui permet à un utilisateur de mettre fin à l'entraînement s'il doit l'arrêter rapidement pour quelque raison que ce soit. Commençons à créer l'écran. Dupliquons le plan de travail ou nous pouvons simplement créer un autre plan de travail en cliquant sur cette icône ici. Faisons un autre iPhone 10. Appelons cette vidéo Artboard Workout et cherchons un espace réservé vidéo. Retournons au Wires-Mobile. Zoom arrière et faisons défiler vers le bas jusqu'aux photos et vidéos. Trouvons la vidéo, copions ceci. C' est une bonne chose. Retournez à nos Wireframes. Collons ça et c'est bien. Prenons un bouton, copiez-le à partir de notre écran de détails d'entraînement, collez-le ici et changeons le nom pour Terminer l'entraînement. Si l'utilisateur doit mettre fin à l'entraînement tôt, il peut simplement cliquer sur un bouton pour le faire. Trouvons comme une durée de temps vidéo. On peut trouver ça. Cela permet à l'utilisateur de savoir combien de temps il reste dans la vidéo, combien de temps s'est écoulé, etc. Revenons ici et copions cela et ajoutons cela à notre écran. Déplaçons ça vers le haut. On le regroupera. Si nous voulons grouper, nous commandons G. Maintenant, appelons ça la durée du temps ou quelque chose comme ça et maintenant nous pouvons déplacer ces éléments facilement. Je pense que c'est pour la plupart pour ça que nous sommes allés à l'écran. Vous accédez à cet écran par l'utilisateur à être aux détails de l'entraînement. Ils ont la description du titre de l'entraînement et ils cliquent sur « Démarrer ». Ensuite, cela les amène à l'écran Vidéo d'entraînement ici où ils peuvent lire la vidéo. La vidéo sera lue et ensuite, ils verront combien de temps s'est écoulé, combien de temps il reste. Ensuite, ils peuvent mettre fin à l'entraînement s'ils ont besoin d'y mettre fin tôt d'abord pour une raison quelconque. S' ils terminent l'entraînement tôt, ils cliquent sur le bouton, ce qui les ramènera à l'écran Détails de l'entraînement. Ce sont nos cinq écrans, nous avons créé les cinq : Créer un compte, Configuration du profil, Liste des entraînements, Détails de l'entraînement et Vidéo d'entraînement. Dans notre prochaine vidéo, nous commencerons à prototyper, où nous créerons un prototype de basse fidélité en reliant tous ces écrans ensemble de sorte que lorsque vous cliquez sur un bouton ou n'importe quelle action sur chaque écran, il vous amène à l'écran suivant. Cela permettra aux membres de notre équipe de conception ou à nos utilisateurs de test ou aux parties prenantes du projet tester rapidement notre prototype pour voir s'il va dans la bonne direction. Ce que vous ne voulez pas arriver, c'est que vous concevez tous ces écrans, commencez à construire l'application et réalisez, « Oh, nous avons oublié cet écran. Oh, on a oublié cet élément sur cet écran. » Vous devez revenir en arrière et faire tous ces changements dans la phase de développement. Alors que si vous venez de créer un prototype au début, vous pouvez obtenir une bonne poignée si le flux est bon pour l'utilisateur, s'il y a des points de douleur que vous devez corriger avant d'arriver à la phase de développement, le étape de codage de l'application. Dans la prochaine vidéo, nous allons créer notre prototype de basse fidélité. 24. Liaison et présentation dans Adobe XD: Commençons maintenant à relier nos écrans filaires afin que nous puissions produire un prototype pour les utilisateurs à tester. Dans le coin supérieur gauche de XD, cliquez sur l'onglet « Prototype ». Maintenant, sélectionnons notre premier tableau d'art afin que nous puissions commencer à le rendre interactif. Allons zoomer un peu. Ce que nous voulons faire, nous ne voulons pas lier l'ensemble de l'écran, nous voulons lier simplement le bouton « Créer un compte ». Ce qu'on va faire, c'est sélectionner ce bouton. Lorsque vous sélectionnez un élément, vous remarquerez qu'il deviendra bleu, et sur le côté droit une flèche apparaîtra. Cliquez sur cette flèche et faites-la glisser vers le tableau ou l'écran auquel vous souhaitez le lier. Donc, dans ce cas, nous voulons cliquer et faire glisser vers l'écran de configuration du profil. Vous relâchez la souris une fois que vous voyez une bordure bleue autour du tableau d'art auquel vous souhaitez la lier. Une fois qu'il est lié, vous verrez dans la colonne de droite ici les options pour personnaliser l'interaction. Vous avez ce qui déclenchera l'interaction, un clic, un glissement, le clavier ou le déclencheur vocal, quel type de transition, l'animation automatique, la superposition, le défilement vers, tableau d'art précédent, la lecture audio ou la parole lecture. Dans ce cas, nous voulons juste une transition. L' écran de destination que vous voulez aller, nous sélectionnons un profil mis en place. Donc, nous allons garder cela comme la même configuration de profil. Quel type d'animation, dissoudre ou vous avez des options de glissement, ou des options de poussée. Allons-y avec la diapositive à gauche. Ensuite, nous avons l'assouplissement et la durée, et nous les garderons par défaut. Nous voulions donc continuer ce même processus pour le reste de nos écrans. Nous voulons cliquer sur l'élément qui sera cliquable dans ce tableau d'art, et nous voulons le lier à l'écran où nous voulons emmener l'utilisateur. Je vais donc continuer à lier tous ces boutons. Cliquez sur « Continuer » sur l'écran des paramètres de profil, liez-le à la liste des séances d'entraînement. Cliquez sur « Continuer » dans la liste des écrans d'entraînement. Lions cela aux détails de l'entraînement. Cliquez sur le bouton « Démarrer » et associons cela à l'écran vidéo d'entraînement. Pour cette transition, essayons quelque chose d'un peu différent, glissons vers le haut. Maintenant, nous sommes prêts à prévisualiser notre prototype. Ce que nous devons faire est de cliquer sur notre tableau d'art initial, qui sera comme l'écran d'accueil, qui sera l'endroit où la présentation du prototype commencera. Donc, là où nous voulons commencer la présentation, nous allons commencer avec ce premier tableau d'art ici. Donc, nous cliquons dessus et puis nous cliquons sur « Aperçu ». Maintenant, nous pouvons commencer à cliquer sur notre prototype. Les utilisateurs viendront à l'écran « Créer un compte », ils rempliront leur nom, leur adresse e-mail, passe et confirment leur mot de passe, cliquez sur « Créer un compte » puis ils ont leur écran de configuration de profil avec leur nom John Doe, dire que cela a été entré dans l'écran précédent. Sélectionnez le sexe ou la taille, le niveau de forme physique et les séances d'entraînement qu'ils aiment. Cliquez sur « Continuer ». Maintenant, vous êtes sur la liste de l'écran d'entraînement. Vous avez les types d'entraînement, l'utilisateur sélectionne « Hit », vous voyez un tas de séances d'entraînement à succès, et ils cliquent sur « Continuer ». Maintenant, vous avez le titre d'entraînement. Supposons que vous avez sélectionné « Barbies » sur l'écran précédent. Donc maintenant ce sera le titre d'entraînement dire Barbies, une image de cette séance d'entraînement et la description. Vous pouvez cliquer sur « Démarrer », et comme vous le voyez, il pousse vers le haut, et vous pouvez commencer à lire votre vidéo pour commencer votre entraînement. Donc, ici, nous avons notre prototype fini en XD. Disons que vous voulez partager ce prototype. Pour partager, vous allez dans l'onglet Partager en haut à gauche de XD, et vous verrez à nouveau des options dans le côté droit vous donnant des options pour personnaliser la façon dont vous souhaitez partager ce lien. Qu' est-ce que vous voulez lier ? Eh bien, nous voulons lier l'introduction UX à wireframe qui est le nom de notre projet, réglage de la vue, la révision du design. Vous voulez le partager avec les développeurs. Mode de présentation, test utilisateur ou personnalisé, nous allons juste laisser comme revue de conception, et qui a accès au lien : toute personne avec le lien, seulement les personnes invitées, ou toute personne avec le mot de passe. Nous irons avec n'importe qui avec le lien, puis nous allons cliquer sur « Créer un lien » et XD va traiter et bientôt nous donner un lien que nous pouvons ensuite cliquer sur et nous pouvons partager ce lien avec nos utilisateurs, parties prenantes, autres concepteurs, équipe de développement afin qu'ils puissent prévisualiser le prototype et nous donner des commentaires. Cliquez sur le lien. Faisons simplement défiler ces écrans de personna initiaux, flux utilisateur et passons à notre premier tableau d'art. Ainsi, les utilisateurs, qui que vous voulez tester l'écran, vont maintenant cliquer sur ce lien et voir cela dans le navigateur, puis ils peuvent cliquer à travers le prototype. Ensuite, ils peuvent ajouter des commentaires, ils peuvent faire un commentaire, taper du texte, soumettre, ce genre de choses. Nous avons donc notre prototype dans XD, et nous avons eu la possibilité de le montrer à nos parties prenantes, collègues designers, développeurs, autres membres de l'équipe. Il n'est donc pas si difficile de créer un prototype dans XD ou de le partager avec les membres de votre équipe. J' espère donc que vous allez construire quelques écrans dans XD, entraîner à relier ces écrans et commencer à faire des prototypes par vous-même. 25. Réflexions finales: C' est la fin du cours. Dans ce cours, nous avons parlé de Balsamiq et Adobe XD et de son importance dans le filage et le prototypage. Nous avons examiné les outils de Balsamiq et Adobe XD, et nous avons filtré et prototypé un exemple d'application mobile afin que vous puissiez voir mon processus. C' est tout pour la classe. J' espère que vous avez appris quelque chose sur le filage et le prototypage à faible fidélité et j'ai hâte de voir ce que vous venez avec dans le projet de classe. Rappelez-vous, c'est une étape très importante dans le processus de conception, si heureux prototypage.