Flux d'utilisateurs pour la conception d'UI / UX dans Adobe Xd

1. Introduction du cours: flux utilisateur des diagrammes de flux sont vraiment importants dans le processus de conception car à l'intérieur des flux utilisateur, vous allez définir comment vos utilisateurs vont se déplacer à travers votre application ou site Web et quelles sont les étapes qui vont prendre pour atteindre les objectifs que vous ou vos clients vous avez fixés, vous pouvez définir une partie à l'intérieur de votre application ou site Web que vos utilisateurs vont prendre. Vous pouvez également définir plusieurs chemins que plusieurs utilisateurs vont prendre en même temps. Et ce faisant, vous allez déterminer le nombre d'écrans ou de pages dont vous aurez besoin dans votre projet et le temps dont vous aurez réellement besoin pour mener à bien ce projet. Hey designer, je m'appelle Alex et dans cette classe Skillshare, nous allons parler des flux utilisateurs, pourquoi ils sont importants, comment les créer à l'aide d'Adobe XD. Quelles sont les différences entre les différents flux utilisateur et comment les utiliser dans vos projets ? Je suis un créateur de produits numériques et jusqu'à présent j'ai créé ou un 500 produits de design. Je suis aussi un créateur de cours et jusqu'à présent, j'ai créé ou 30 cours différents avec plus de 50 mille étudiants inscrits à l'intérieur. Dans cette classe, nous allons discuter de ce que nos utilisateurs flux, différents types de flux utilisateur. Quand sont-ils utilisés ? Création de flux de tâches à l'aide d'Adobe XD, utilisation de flux filaires dans Adobe XD et utilisation de différents modèles plus complexes. Et enfin, comment partager vos flux avec vos clients et développeurs. Votre projet de classe pour cette classe consiste à créer un flux de tâches en utilisant le modèle que j'ai fourni. Il suffit d'ouvrir le modèle dans Adobe XD ajusté , mais vous voulez n simplement télécharger cette image à nos projets de classe. J' ai hâte de voir ce que vous pouvez créer. En utilisant les flux utilisateur, vous allez déterminer le nombre total d' écrans ou de pages nécessaires à ce projet particulier. Et vous allez également créer des itinéraires optimaux pour vos utilisateurs qu'ils peuvent prendre. En outre, ce que vous pouvez faire est d'améliorer la convivialité de la conversion car vous allez optimiser votre expérience utilisateur avant arriver aux étapes de conception de votre projet. Vous pouvez les utiliser avec de nouveaux produits pour définir les chemins que vos utilisateurs vont emprunter. Ou vous pouvez les utiliser avec des produits existants pour affiner ces pains et pour créer des graisses idéales. Donc, j'ai vraiment hâte de vous voir en classe et créons des flux d'utilisateurs. 2. Qu'est-ce que les flux d'utilisateurs: Flux utilisateur, tous les organigrammes comme on les appelle parfois nos parties. Vos utilisateurs jouent lors de l'utilisation d'un produit, ils affichent une partie complète que votre utilisateur prend du point d'entrée , à droite, jusqu'au point final lorsqu'ils terminent leur parcours. Il y a beaucoup de parties différentes que vos utilisateurs peuvent prendre en fonction de la façon dont ils sont arrivés à votre produit. Par exemple, si ce site Web ou une page de destination ou quelque chose comme ça, peut-être qu'ils sont arrivés à cette page de destination quand ils ont cliqué à l'intérieur du lien dans votre e-mail ou si c'est la page Shoppe peut être une page de produit ou quelque chose comme ça, peut-être qu'ils ont obtenu en visitant notre campagne que vous aviez sur Facebook ou Instagram ou quelque chose comme ça. Peut-être qu'ils ont cliqué sur un lien à l'intérieur d'une vidéo YouTube et des tripes vers cette page de boutique. Ou s'il s'agit d'une application, peut-être qu'ils l'ont installée à l'aide d'un lien ou d'un téléchargement direct à partir d'un magasin. Et puis quand ils ont installé dans cette application, et peut-être qu'ils l'ont ouverte et sont arrivés à l'écran de démarrage. Ainsi, les flux d'utilisateurs ont notre simple tâche de diriger tous ces chemins de manière à ce qu'il soit logique pour vos utilisateurs et super facile à comprendre et à les optimiser de manière à ce qu' ils aient le moins de clics possible pour atteindre ces selon qui est votre client et ce que votre produit essaie de faire. Ces objectifs peuvent être soit d'acheter un produit, de réserver un service, télécharger, un freebie, s'inscrire à une newsletter électronique et bien plus encore. Donc, votre objectif en tant que concepteur en utilisant ces flux utilisateur est de créer ces flux optimaux et les chemins optimaux que vos utilisateurs peuvent prendre pour effectuer ces tâches de manière à ce qu'ils soient simples à comprendre et aussi rapidement que possible pour eux de résoudre les tripes N2 à leur objectif final, votre objectif client est d'augmenter la conversion, par exemple. Ainsi, en utilisant ces flux utilisateur, vous allez vous rapprocher cette conversion améliorée en réduisant le nombre de clics, par exemple, que vos utilisateurs doivent effectuer pour atteindre ces objectifs. En utilisant les flux utilisateur, vous allez déterminer le nombre total d'écrans ou de pages dont vous aurez besoin à cette étape du projet. Et cela va vous faire gagner beaucoup de temps plus tard lorsque vous arrivez aux étapes de conception de votre projet, car cela va améliorer votre compréhension de ce projet ou de ce rôle. Et par conséquent, cela va vous accélérer encore plus à cette étape du projet, vous pouvez même faire savoir aux développeurs ce qui se passe. Et vous pouvez même les montrer et ces organigrammes, et nous allons en parler dans les dernières étapes de ce cours. Mais c'est tout le but de ce processus, est de comprendre que ce projet est beaucoup mieux que de simplement commencer avec la conception parce que c'est une approche vraiment mauvaise. Parce que vous devez vraiment commencer avec ces flux utilisateur afin de comprendre combien d'écrans, combien de pages vous allez avoir besoin plus tard lorsque vous arrivez à cette partie de conception de votre projet. Dans la vidéo suivante, nous allons discuter certains types différents de ces flux utilisateurs et comment ils sont utilisés. Alors je te verrai là-bas. 3. Différents types de flux d'utilisateur: Il existe de nombreux types de flux utilisateur différents en fonction de ce que vous essayez de résoudre dans votre projet et de ce que vous essayez d'accomplir. Mais fondamentalement, il y a trois types principaux qui sont utilisés dans l'ensemble. Et puis à partir de ces trois types principaux, il y a beaucoup de types différents que vous allez rencontrer au cours de votre carrière de design. Et ce sont des flux de tâches via des flux et des flux utilisateur. Les flux de bureau sont ce que le nom suggère et ils montrent comment l'utilisateur interagit avec une certaine tâche en cliquant sur le même point d'entrée pour accéder au même point d'entrée et au même point final, tous vos utilisateurs vont faire la même chose voyage. Et donc, ce voyage va montrer une tâche simple. Par exemple, vous inscrire à notre newsletter par e-mail ou acheter le produit, ou réserver un service avec vous ou quelque chose du genre. Tous ces utilisateurs doivent effectuer la même tâche. Cette tâche comporte de nombreuses étapes différentes selon la complexité de la tâche. Et donc ces flux de tâches sont utilisés pour cela. Ils ne sont pas utilisés pour d'autres choses complexes. Par exemple, différents points d'entrée, différents points de sortie. Mais tout le point des flux de tâches est de se concentrer sur une seule tâche et d'optimiser cette partie utilisateur de manière à ce qu'ils aient le moins d'étapes possible pour accomplir cette tâche, alors nous avons des flux de fil. Et ces flux de travail sont en fait une combinaison de ces flux de tâches et de filaires de base, et c'est pourquoi ils sont appelés flux de fil. Et tout le but d'eux est de montrer différents parcours utilisateur tout au long votre produit et différents points d'entrée dans différents points de sortie. Cependant, ils ne sont pas trop de détails à l'intérieur. Ils sont juste là pour montrer toutes ces différentes parties que vos utilisateurs peuvent prendre. Donc, le but ici n'est pas d'être trop détaillé, mais de montrer à vos clients, à vos coéquipiers et aux développeurs aussi. De nombreuses parties différentes que vos utilisateurs peuvent prendre. Mais pour utiliser au moins quelques détails pour montrer à quoi ces écrans ou pages peuvent ressembler. Et puis pour utiliser des flèches, par exemple, juste pour montrer quelles sont les différentes parties que vos utilisateurs peuvent prendre. Et puis enfin, nous avons des flux utilisateurs eux-mêmes. Ils sont en fait une combinaison de flux de tâches et de flux de fil. Et les flux utilisateur montrent en fait tous les flux différents que vos utilisateurs peuvent prendre, toutes les différentes parties qu'ils peuvent prendre. Et ils sont en fait une combinaison de flux de tâches et via des flux. Ce que je veux dire par là, c'est qu'ils sont la combinaison de ces deux éléments. Et je vais vous le montrer dans les étapes ultérieures de ce cours. Et en gros, ils montrent tout. Ils montrent tous les points d'entrée, ils montrent tous les points de sortie. Ils montrent toutes les parties multiples de ce que vos utilisateurs peuvent prendre les bonnes et les mauvaises parties. Ils montrent des chemins alternatifs et toutes ces choses, donc ils sont aussi détaillés que possible. Donc, selon ce dont vous avez réellement besoin sur ce projet et selon l'endroit où vous en êtes aux étapes de conception de ce projet, vous allez utiliser l'un ou l'autre. Parfois, les flux utilisateur sont en fait votre meilleur pari parce que selon la façon dont votre projet se déroule, selon la façon dont les commentaires se déroulent, la façon dont la recherche se déroule, elle, ils sont beaucoup plus simples à changer, ils sont beaucoup plus simples à modifier. Ensuite, si vous commencez simplement avec des flux de tâches et là, ils ajoutent flux de fil plus tard, puis utilisent des flux utilisateur à la fin. Donc, peut-être que User Flows est la meilleure façon de le faire. Et quand utilisons-nous réellement ces flux utilisateur ? Nous allons en discuter dans la prochaine vidéo. Alors je te verrai là-bas. 4. Quand sont-ils utilisés: Les flux d'utilisateurs sont utilisés dès le début d'un projet juste après que toutes les recherches et les personnes d'utilisateurs ont été terminées. Comme il l'a dit précédemment, ils sont utilisés pour déterminer la quantité d'écrans dont vous allez avoir besoin et l'ordre logique de ces écrans ou pages de doses ordonnées et comment vos utilisateurs vont réellement interagir et déplacer à travers toutes ces différentes pages. Ensuite, vous pouvez discuter de cet ordre et de tous ces flux avec vos clients et avec vos développeurs ou vos coéquipiers pour obtenir le meilleur résultat possible et la meilleure optimisation possible avant de passer à les étapes de conception de ce projet, ils sont utilisés pour créer une interface intuitive et agréable afin que nos utilisateurs trouvent notre produit, notre joie d'utiliser, et ils sont également utilisés pour augmenter le taux de conversion, comme je l'ai mentionné précédemment, parce qu'en utilisant ces flux utilisateur, vous allez déterminer au début de ce processus de conception, quand vos utilisateurs vont cliquer, acheter ou acheter certaines choses à l'intérieur de ce processus plutôt que plus tard dans le processus de conception, qui à son tour va rendre le processus de conception sont beaucoup plus faciles à faire, beaucoup plus facile à créer. Parce que vous avez déterminé tous ces éléments dans vos flux utilisateur. Vous pouvez les utiliser pour créer de nouveaux produits, ou vous pouvez les utiliser avec des produits existants pour affiner les pièces que vos utilisateurs peuvent prendre à l'intérieur de ce produit et pour augmenter l'optimisation ou la conversion, ou partout où le objectif de ce projet est. Donc, comme je l'ai dit, ils peuvent être créés pour des produits nouveaux ou existants. Et ils sont vraiment utiles lorsque vous créez composants que vous allez utiliser plus tard dans vos étapes de conception de ce projet de conception parce que certains composants sont principalement utilisés, comme la navigation, comme les pieds de page et à l'intérieur de cette étape de votre projet, vous pouvez facilement déterminer ce qui va être situé dans la navigation de la dette ou le pied de page. Vous pouvez également les utiliser pour créer quelque chose appelé des images de héros par exemple, ou des curseurs ou des composants différents comme DOS. Ensuite, vous pouvez facilement mettre à l'échelle ou redimensionner ces composants, que vous en ayez besoin ou non plus tard dans votre projet. Enfin, il y a vraiment un excellent moyen de montrer à vos coéquipiers, clients et développeurs vos idées sur ce projet. Tous ces chemins différents que vos utilisateurs peuvent emprunter. Parce que la validation dans cette partie du projet est vraiment importante parce que comme je l'ai mentionné plusieurs fois déjà, cela va accélérer votre partie de conception de ce projet sont beaucoup plus parce que dans cette partie avec ces flux utilisateur, vous allez déterminer tous ces détails importants. Et puis plus tard, le design va juste être beaucoup plus facile et beaucoup plus agréable à faire parce que c'est juste une exploration de la créativité plutôt que de traiter toutes ces tâches complexes que les utilisateurs doivent résoudre . En parlant des flux utilisateur dans la prochaine vidéo, nous allons réellement créer des flux utilisateur en utilisant Adobe XD. Alors je te verrai là-bas. 5. Créer des flux d'utilisateurs dans Adobe Xd: Il existe de nombreuses routes différentes que vos flux utilisateur peuvent emprunter. Il y a beaucoup de formes différentes que vous pouvez utiliser, mais il y a quelques formes de base que chaque concepteur est là devrait comprendre. Ils sont fondamentalement la norme dans l'industrie depuis des décennies maintenant. Et ils sont très importants à savoir, surtout si vous travaillez avec des équipes distantes. Si vous rejoignez une agence plus tard dans la ligne ou si vous travaillez déjà dans une agence et que vous avez essayé d'établir sont certaines langues que tout le monde peut comprendre. Donc, dans cette vidéo, je vais vous montrer un modèle. Vous allez être en mesure de télécharger ce modèle et de l' explorer plus avant de construire sur ce modèle. Et plus tard dans la classe, je vais vous montrer quelques modèles plus complexes que vous pouvez réellement obtenir si vous le souhaitez, puis développer ces modèles de base et simplement construire sur eux. Voici donc ce modèle. Il s'appelle des éléments de flux de tâches. Et si vous voulez obtenir ce modèle simplement téléchargé à partir des fichiers de classe, puis vous pouvez l'ouvrir dans Adobe XD. Donc, ce que nous avons ici sont tous les éléments, tous les composants. Nous avons donc entrée, action, processus, flèche de décision et flèche négative, et ce sont vos couleurs. Donc, la couleur du point d'entrée, la couleur blanche, qui est fondamentalement la couleur du texte partout, et la couleur des étapes. Si vous souhaitez modifier ces couleurs pour la marque de votre client, par exemple, vous pouvez simplement cliquer avec le bouton droit de la souris. Vous pouvez copier ceci ou vous pouvez modifier puis simplement changer cette couleur comme vous le souhaitez. Comme vous pouvez le voir, ils vont se mettre à jour en temps réel. Vous pouvez baser votre code hexadécimal ici. Si nous voulons terminer, alors il va mettre à jour la couleur hexadécimale que vous avez choisie. Laisse-moi revenir un peu en arrière. Donc, comme je l'ai dit, c'est le modèle nus vraiment basique et vous pouvez ensuite construire sur ce modèle. Donc, si nous zoomons un peu trop, tous ces éléments différents, je vais vous montrer ce qu'ils sont tous et ce qu'ils font tous. Donc, tout d'abord, nous avons l'entrée, et c'est le cercle d'entrée, ou le point d'entrée est généralement affiché sous la forme d'un cercle, mais vous pouvez le montrer de nombreuses façons différentes que vous voulez. Rien de tout cela n'est en fait normaliser. Ce n'est que des concepteurs dans l'industrie utilisant tous ces éléments et modèles depuis des décennies. Et puis venez simplement avec toutes ces solutions différentes. Donc, nous avons un point d'entrée et cela peut aussi être le point de sortie. Donc, le point d'entrée, si vous vous souvenez des quelques vidéos précédentes que j'ai mentionnées, peut être , par exemple, une page de destination de votre site Web ou écran de connexion de votre application ou autre. Le point d'entrée où les utilisateurs saisissent réellement votre design, votre produit, votre application mobile, votre site Web, quel qu'il soit. Et après ça, nous avons de l'action. Ainsi, les utilisateurs peuvent cliquer, les utilisateurs peuvent parcourir, les utilisateurs peuvent affirmer, les utilisateurs peuvent taper toutes ces choses différentes sont des actions. Les actions peuvent également être, si vous cliquez sur le bouton suivant à l'intérieur de votre application, par exemple, pour passer entre différents écrans. Ou si vous avez cliqué sur une certaine icône, par exemple, Flèche pour aller à gauche et à droite, ou si vous faites glisser pour utiliser le cercle d'action de pagination est juste là. Et je vais le montrer en une seconde avec ce modèle vraiment basique que que j'ai trouvé en ligne et juste recréé en utilisant ces éléments. Donc, tous ces éléments sont, ont créé pour vous les gars et vous pouvez simplement télécharger et utiliser ce modèle. Comme je l'ai dit. Ensuite, nous avons un processus. Alors qu'est-ce qui s'est passé après que nous ayons terminé l'action ? On est allés à une page spécifique ? Avons-nous passé de, par exemple, petite image à pleine largeur image difficile à la diapositive suivante, avons-nous acheté le produit ? Vous êtes allé à la page de paiement ? Toutes ces choses comptent vraiment dans le processus. Donc, vous devez écrire cela pour que vous puissiez comprendre en tant que concepteur, ou si vous travaillez avec un coéquipier, avec des développeurs ou avec un client, vous devez leur montrer ce processus. Ensuite, nous avons dans cette forme de diamant, qui est la décision. Donc, fondamentalement, cela signifie que l'utilisateur s'est engagé à dire oui ou non à un certain processus ou à une certaine action. Ce que je veux dire par là, c'est quand vous arrivez à notre page de paiement, par exemple, et que vous voulez acheter un produit, cela peut être oui ou non décision. Donc oui, je veux acheter le produit et puis vous allez à la page de paiement, vous allez sur les pages de paiement, ainsi de suite ou si non, si je clique sur Non, Où est-ce que ça me prend ? C' est pourquoi ce diamant est vraiment important et il est généralement appelé diamant de décision. Et je vais vous montrer comment nouveau éditer tous ces éléments en une seconde. Mais ensuite, nous avons des flèches. Maintenant, ces flèches remplies, comme vous pouvez le voir, nous avons deux types. Donc, ces flèches remplies sont fondamentalement des flèches de pas. Ils déplacent donc les utilisateurs d'une étape à l'autre. Et puis ces flèches sont essentiellement ce que je les ai étiquetées ici. Les flèches négatives sont lorsque l'utilisateur dit, dit non, ou lorsque l'utilisateur ne peut pas effectuer une certaine tâche. Par exemple, si la recherche mais ne peut pas trouver quoi que ce soit, alors cette flèche n'apparaît pas et il les amène à une étape suivante ou à l'étape précédente ou quelque chose comme ça. Donc, fondamentalement, c'est pourquoi ces flèches sont utilisées. Maintenant, si je dézoom juste un peu, vous pouvez voir ce flux. Et fondamentalement, j'ai pris l'inspiration en ligne et injuste recréé en utilisant ces éléments. Comme l'utilisateur entre ici, ils sont accueillis par une page d'accueil ou un écran d'accueil, par exemple. Ensuite, ils peuvent sélectionner une tâche. La tâche est sélectionnée, puis ils peuvent aller de l'avant. Si c'est correct, ils peuvent aller de l'avant à la page de détails. Si ce n'est pas correct, alors ceci, s'ils cliquent sur non, par exemple, il va les ramener aux tâches sélectionnées. Donc, ce nœud peut être un bouton concret quand ils cliquent sur non, ou ils peuvent l'être, qui peut être un X. Par exemple. Ils veulent fermer la fenêtre contextuelle ou quelle que soit la structure de votre mise en page. Fondamentalement, le point est le même. Ils peuvent aller de l'avant, donc oui, ou ils peuvent reculer. Donc non, c'est pourquoi ils sont utilisés. Ensuite, nous allons à cette page de détails, par exemple. Et à partir de la page de détails, je peux cliquer sur la recherche klutzy pour aller trouver quelque chose. Et puis quand un commit pour la recherche, je peux rechercher des éléments. Si je n'ai pas trouvé d'objets, il va le faire, il ne montrera aucun élément trouvé. Donc, dans ce cas, j'ai imaginé que c'était une icône suivante. Ainsi, par exemple, aucun élément n'est trouvé, puis vous pouvez fermer pour terminer une recherche une fois de plus ou Pour l'élément est trouvé, objectif est terminé dans ce cas particulier car c'est l'objectif de cet élément. Ensuite, vous pouvez cliquer sur Commande. Et c'est votre point de sortie, donc ordonné. Ou si je ne veux pas commander, peut-être que je peux cliquer sur non ou annuler ou quelque chose comme ça. Et ça va me ramener à cette page de détails. Donc, vous pouvez juste voir à partir de cet exemple très rapide et facile à quel point ces organigrammes sont utiles. C' est essentiellement un flux de tâches que j'ai mentionné précédemment parce qu'il ne montre qu'une seule tâche. Dans la vidéo suivante, nous allons discuter des modèles plus avancés et des étapes plus avancées que vous pouvez suivre lors de la création de ces flux. Mais fondamentalement, c'est juste un modèle nus vraiment basique. Encore une fois, vous pouvez le télécharger, l'utiliser dans Adobe XD et exploité. Et je vous encourage vraiment à construire sur ce modèle, à ajouter plus de pages, à ajouter plus d'écrans et ainsi de suite. Et une chose que je ne vous ai pas montrée est, par exemple, sur cette tâche ici, je veux zoomer et disons au lieu de sélectionner la tâche, je veux faire autre chose. Vous pouvez voir que c'est Open Sans, donc c'est la police Google gratuite. Vous pouvez maintenant le charger gratuitement sur les polices Google et Adobe, quelle que soit votre utilisation. Donc ce que j'ai fait ici, c'est que j'ai inclus le rembourrage. Ce que je veux dire par là, c'est que si je clique juste là, vous pouvez voir que le remplissage est activé sur ce composant. Donc, si je double-clique ici, je peux taper quelque chose, par exemple, rendre cela plus visible et vous pouvez voir comment la dépense de la boîte. Donc fondamentalement dans ce cas, je, si je retourne en arrière, j'ai utilisé 20, comme vous pouvez le voir ici, espacement entre tous mes éléments. Mais vous pouvez utiliser bronzage, vous pouvez utiliser cinq. Vous pouvez même chevaucher ces flèches. Donc, si une position est juste ici, vous pouvez voir à quel point elle chevauche bien avec cette étape. Donc tu peux vraiment faire ce que tu veux. En outre, lorsque vous faites glisser ces composants, faites-les simplement glisser ici. Je veux changer votre double-clic à l'intérieur, par exemple, point d' entrée ou quelque chose comme ça, ou le point de sortie, peu importe. Vous pouvez le positionner ici, vous pouvez le rendre dans un centre en sélectionnant ces deux éléments, positionnez-le comme ceci. Ou vous pouvez simplement le supprimer. Vous pouvez le faire pour tous ces autres éléments qui vous sont montrés. Et enfin, pour ces flèches, parce que celles-ci sont assez simples, vous pouvez double-cliquer à l'intérieur. Vous pouvez maintenir la position de la touche Maj cette flèche ici. Ensuite, vous pouvez cliquer et positionner cette forme ici si vous voulez raccourcir cette flèche, par exemple, si vous ne voulez pas qu'elle soit aussi longue pour quelque raison que ce soit. Et aussi pour ces flèches, si je vais à mon panneau Calques et les ouvre, vous pouvez voir une flèche si négative, nous avons l'étiquette, qui est ce pas d'étiquette à l'intérieur de laquelle vous pouvez également changer si vous le souhaitez. Par exemple, négatif OU aucune option, ou ce n'est pas une option ou ce que vous voulez écrire. Et puis nous avons des flèches à gauche et nous avons cette ligne de flèche au milieu. Alors, qu'est-ce que tu peux faire avec ça ? Vous pouvez cliquer sur la flèche gauche, par exemple, maintenir la touche Maj enfoncée et la rapprocher. Vous pouvez faire la même chose avec celui-ci, ou si vous le voulez, vous pouvez même les éloigner plus loin. Donc disons comme ça. Et puis vous pouvez cliquer sur ce centre et simplement étendu comme ça. Si vous ne voulez pas que ce soit comme ça, alors vous pouvez simplement cliquer sur la flèche et vous pouvez ajuster afin que vous puissiez voir que nous avons la couleur de bordure, qui est cette couleur. Et puis nous avons la largeur du trait, nous avons la largeur du tiret. Donc, fondamentalement, la largeur entre tous ces différents tirets, vous pouvez ajuster ce que vous voulez pour obtenir un certain style que vous recherchez. Et fondamentalement cela, tout le point de ce modèle pour vous aider dans ce processus d'exploration. Donc, comme je l'ai mentionné dans la prochaine vidéo, nous allons discuter un peu plus de modèles complexes. Je vais vous montrer où vous pouvez obtenir ces modèles, qui sont en fait les miens, et ensuite ce que vous pouvez faire avec eux. Alors je te verrai là-bas. 6. Travailler avec des flowcharts dans Adobe Xd: Dans cette vidéo, je vais vous montrer quelques modèles plus complexes. Ces modèles ont pris des mois à créer. Et ces modèles sont en fait quelques-uns que mon équipe et moi avons créé dans le passé. Et vous pouvez obtenir ces modèles, des liens qui vont être dans le PDF avec des remises parce que ce sont des modèles premium. Et je vais vous montrer comment ils sont tous créés. Tenez-les ressembler à Adobe XD. Tu peux les avoir si tu veux. Si ce n'est pas le cas, vous pouvez créer le vôtre comme vous le souhaitez. Donc voici mon site web appel donateur web, dotnet. Une fois de plus, le lien va être dans un PDF et c'est le premier modèle qui va voir appelé flowy. Et vous pouvez voir que vous avez 108 écrans, 128 éléments dans différents papiers. Vous pouvez donc utiliser ces papiers si vous souhaitez aligner votre organigramme , puis imprimer ultérieurement pour le montrer à vos coéquipiers, clients ou développeurs. Donc, si un sclérotique juste un peu, vous pouvez voir à quoi ressemblent certains de ces éléments. Et nous allons les explorer en seulement une seconde à l'intérieur d'Adobe XD. Mais fondamentalement, c'est l'essentiel de tout ça. Il y a beaucoup de différents de ces éléments et ces papiers et nous avons des diagrammes de flux de fil et ceux-ci sont beaucoup plus grands. Nous avons donc HOT 100 composants au total. Donc 200 écrans à un 100 éléments et deux papiers une fois de plus, et cette fois, nous avons la version claire et sombre, sorte que vous pouvez même explorer cela. Et vous pouvez voir qu'ils sont adaptatifs ce qui est inclus. Vous avez donc trois types de fichiers différents, Photoshop, Sketch et XD. Alors que dans celui-ci, nous avons Photoshop et des fichiers de croquis. Mais puisque XD est créé par Adobe, vous pouvez simplement ouvrir un fichier Photoshop. Il va parfaitement fonctionner à l'intérieur de XD parce qu'il est intégré pour le faire, composants pixel-perfect, des polices Google gratuites sont utilisés partout où vous trouvez des polices. Et si vous achetez ces didacticiels vidéo directionnels pour les deux inclus à l'intérieur et la structure de couche organisée. Tu vas voir ça dans une seconde. Ce sont les papiers pour imprimer les formats US et A4 si vous le souhaitez. Variations illimitées et vous pouvez voir à quoi ressemblent certains de ces éléments. Maintenant, si je minimise cela et retourne à XD, c'est la tâche pour ROD. Montrez vous, vous pouvez voir à quel point c'est basique. Mais si je te montre, par exemple, flou, tu peux voir à quoi ça ressemble. Donc, en fait, je combine ces trois. Laisse-moi en faire un peu plus près. Donc ce sont des éléments web, ce sont des éléments mobiles, et ce sont tous les éléments supplémentaires. Donc, si vous achetez ces, ils vont venir en trois fichiers, mais vous pouvez les combiner dans un fichier dans XD, comme vous pouvez le voir ici, vous pouvez simplement double-cliquer pour changer cela. Ce sont donc des éléments mobiles, par exemple. Et que pouvez-vous faire réellement avec ces éléments ? Ainsi, vous pouvez facilement venir directement ici sur votre plan de travail et créer un plan de travail qui est 1920 par 1080 par exemple. Et disons que je veux commencer par un écran de connexion. Je peux le copier, je peux le coller ici. Et changeons en fait cela à cette couleur. Alors laissez-moi en fait, laissez-moi prendre notre belle couleur gris clair juste pour que vous puissiez voir un peu mieux ce que je fais. Et puis je peux commencer par cette flèche, par exemple, juste ici. Alors copiez-le, collez-le ici. Et peut-être que je peux le positionner ici. Donc, quand mes utilisateurs cliquent sur ce bouton, où va-t-il les emmener ? Parce qu'il s'agit d'un écran de connexion. Peut-être, comme vous pouvez le voir, nous avons différentes catégories ici. Peut-être que nous allons sauter dans le commerce électronique et peut-être que je vais aller à ça et ensuite à ça. Et puis voyons peut-être cet écran aussi, comme ça. Contrôle C sautant ici, contrôle V pour les coller tous. Et je vais le faire là-dedans. Donc, par exemple, ils vont venir à cet écran juste ici. Et puis je vais dupliquer ma flèche Contrôle C, ou Contrôle D, tout ce que vous voulez. Et puis, par exemple, s'ils cliquent sur un, positionnez-le sur le dessus. Si vous cliquez sur ce produit, par exemple, ou juste ici, et nous avons différentes flèches ici. Donc, si j'ai effectivement supprimé celui-ci, je peux utiliser cette flèche par exemple. Vous pouvez donc voir pourquoi ces modèles sont importants. Parce que tu peux travailler beaucoup plus vite quand tu fais ça. Donc, si un Control X, Control V position et juste ici, et quand le clic droit ici, disons que c'est un bouton. Et vous pouvez faire la même chose que j'ai montrée précédemment. Donc, vous pouvez les étendre si vous le souhaitez. Et laissez-moi réellement étendu à ici. Je peux en fait sauter à cet écran. Vous pouvez donc voir que ce n'est pas en ligne avec tous ces flux de tâches précédents car il s'agit d'un flux utilisateur beaucoup plus complexe car comme vous pouvez le voir, nous avons deux boutons, de sorte qu'ils peuvent cliquer sur Annuler, par exemple, et nous pouvons en fait dupliquer cette flèche. Je peux le retourner, par exemple, juste pour vous montrer à quoi ça pourrait ressembler. Alors peut-être que je peux le positionner ici. Peut-être que je peux pousser ces deux-là un peu vers le haut. Je peux positionner ça jusqu'ici. Peut-être qu'ils peuvent cliquer juste là. Et puis cette flèche va réellement les amener à ce premier écran, par exemple. Vous pouvez même le retourner. Et puis vous pouvez positionner ces éléments. Je vais te montrer ça dans une seconde. Donc le contrôle D sur celui-ci. Et vous pouvez le positionner ou juste ici, alors vous pouvez étendre cela. Et peut-être que cela pourrait sembler un peu ennuyeux, mais il est vraiment important de comprendre ce flux utilisateur. Et à partir d'ici, par exemple, s'ils cliquent réellement sur ce bouton bleu, où est-ce qu'il les prend ? Et prenons cela juste pour le rendre un peu plus simple de naviguer dans leur chemin. Donc je vais déplacer ça ici, peut-être comme ça, et ensuite positionner ça un peu vers l'intérieur. Je vais supprimer celui-là. Ainsi, vous pouvez voir à quelle vitesse cela est réellement de créer. Puis quand ils cliquent sur ce bouton bleu, ils peuvent peut-être venir à cet écran. Et à partir de Dan, laisse-moi positionner cette flèche jusqu'au sommet, juste ici. Positionnez-le ici. Et puis je peux effectivement cliquer ici et déplacer ceci comme ça et réorganiser ceci en juste un peu. Peut-être que c'est notre écran de confirmation ou quoi que ce soit, nous pouvons l'appeler comme ça. Et quand ils cliquent sur ce bouton bleu, ils peuvent réellement aller à la page d'achat et ils peuvent réellement terminer cette étape. Maintenant, ce que nous pouvons faire avec celui-ci, c'est que nous pouvons réellement les combiner avec les flux de tâches originaux que je vous ai montrés. Donc, par exemple, je peux utiliser ce cercle d'entrée. Et puis excusez-moi parce que j'ai beaucoup de ceux-là ouverts. Je peux le positionner ici et je peux le déplacer. Vous pouvez voir qu'il est lié car il s'agit en fait d'une instance d'un composant différent. Donc, je peux faire un clic droit ici et je peux le rendre local. Et puis ce que je peux faire est en fait sauter sélectionner les deux comme ça, et appuyer sur Maj contrôle et le réduire un peu. Je peux aussi réduire mes textes. Alors peut-être 10, quelque chose comme ça. Alors on peut l'utiliser comme un point d'entrée juste ici. Mais vous pouvez aussi faire est d'utiliser ces. Donc, par exemple, c'est notre maison, peut-être que c'est notre contrôle de point d'entrée C. Et puis je peux, au lieu de ce cercle d'entrée, je peux le rendre un peu intéressant en les positionnant. Donc je peux positionner ça comme mon cercle d'entrée. Et par exemple, je peux utiliser cette couleur si je veux. Je peux changer cette icône. Si je veux. Je peux même changer la couleur de l'icône. Il suffit de cliquer ici, vous pouvez faire ce que vous voulez avec ceux-ci. Aussi, ce que vous pouvez voir ici sont toutes ces différentes maquettes, qui sont fondamentalement osent comme des formes. Et puis vous pouvez utiliser ces maquettes pour montrer, par exemple, c'est une vue d'une application mobile et je peux utiliser cette maquette simple, peut-être le positionner juste ici sur le dessus, peut-être écrire quelques textes ici. Déplacez tous ces éléments un peu vers le bas, comme si peut-être, puis écrivez ici. Voici un aperçu de la façon dont la version mobile va ressembler sur, par exemple, Android ou iOS ou tout ce que vous voulez. Ou je peux utiliser tous ces autres. Donc navigateur, version d'ordinateur portable, version de bureau, peu importe. Ensuite, si l'étape est terminée, nous pouvons utiliser celle-ci par exemple. Alors positionnons-le ici. Et je peux en fait le placer au centre de ma flèche comme ça. Et puis je peux réellement utiliser ma couleur principale, par exemple, pour voir que l'étape est terminée. Ou je peux positionner ça juste ici, juste là, l'agrandir si je veux. Je peux même y inclure une bordure, tout ce que je peux utiliser une ombre portée sur ce fond. Comme si je peux me positionner là-dedans. Donc, quel que soit votre style pour ce flux utilisateur particulier, vous pouvez implémenter ce style en utilisant ces modèles. Et vous pouvez le voir en quelques minutes, si vous ne parlez pas comme moi, vous pouvez évidemment créer cela en beaucoup plus court. Donc ça coulait si on saute juste ici, juste pour vous montrer rapidement un Web Elements de flux de fil, organigramme. Et vous pouvez voir combien d'éléments différents nous avons ici. Et vous pouvez évidemment créer des composants à partir de ces éléments. Vous pouvez changer leurs couleurs. Donc, par exemple, je veux changer la couleur de cet en-tête. Je peux le positionner ici. Ou si je veux changer complètement la couleur de mon arrière-plan, vous pouvez le changer comme ceci. Et évidemment si vous avez des couleurs comme notre 3D vous montrer dans ce modèle par défaut comme celui-ci. Donc, si vous avez créé vos couleurs, vous pouvez simplement appliquer cette couleur à cet élément. Tu vas travailler beaucoup plus vite de cette façon. Mais si tu ne le fais pas, c'est très bien. Vous pouvez sauter ici et changer les couleurs même de cela. Donc, par exemple, ça peut être, je ne sais pas, un rouge vif ou quoi que ce soit. Et puis cela peut être de la même couleur, donc je peux le sélectionner comme ça et vous pouvez voir à quoi ça ressemble. Donc, évidemment, il y a beaucoup d'options incluses ici et tous ces éléments sont les mêmes. Vous pouvez voir que nous avons beaucoup de flèches différentes incluses à l'intérieur. D' un point d'entrée à plusieurs points de sortie. Tu peux faire ce que tu veux. Vous pouvez utiliser danger, vous pouvez utiliser une actualisation. Et je vous encourage vraiment à utiliser vos propres icônes. Vous pouvez utiliser ces icônes de gauche et de droite pour les étapes si vous le souhaitez. Mais fondamentalement, vous pouvez voir à quoi ils ressemblent. Ils ont beaucoup plus de détails inclus à l'intérieur. Plutôt que ceux qui vous sont montrés précédemment pour les flux de tâches. Donc, en gros, vous avez deux options. Vous pouvez utiliser cette version qui est extrêmement légère, ou vous pouvez utiliser cette version, qui est beaucoup plus complexe, mais ce ne sont pas la mise en page finale. Ce sont juste pour transmettre vos idées beaucoup mieux à vos coéquipiers, vos clients, vos développeurs. Et l'avantage de cela est parce que vous avez plusieurs points d'entrée et de sortie, plusieurs flux. Donc, par exemple, si je vais à celui que nous avons créé en utilisant le flux v, Donc comme ça, je peux créer, comme je l'ai mentionné ici. Donc nous avons ces deux flèches. Par exemple, nous avons un bouton de fermeture juste ici, par exemple, où est-ce que ce bouton de fermeture nous mène, il nous ramène à l'écran de connexion ou à cet écran. Donc, vous pouvez juste imaginer que vous pouvez créer ces flux multiples, des flux complexes et même comme un modèle que je vous donne gratuitement. Vous pouvez sauter ici. Et vous pouvez simplement ajuster tous ces éléments et les rendre plus petits. Si vous voulez appliquer une couleur différente, vous pouvez le faire aussi. Donc, vous pouvez utiliser la couleur que vous voulez sur ceux-ci. Et bien sûr, parce qu'il y a beaucoup, beaucoup, beaucoup de ces différents éléments divisés en catégories de témoignages promo, équipe, blog, e-commerce, et ainsi de suite. Pour les versions mobiles et bureautiques, votre flux de travail sera beaucoup plus rapide et votre délai de livraison sera beaucoup plus rapide. Et encore une fois, l'avantage de les utiliser est que vos clients vont comprendre vous êtes beaucoup mieux que si vous utilisez simplement quelque chose comme celui-ci. C' est un point de départ fantastique. Mais si les choses doivent être un peu plus complexes, par exemple, comme je vous montre ici. Donc, vous devez créer plusieurs flux, évidemment comme dans chaque application ici, alors je recommande vraiment d'utiliser notre modèle premium comme celui-ci parce que cela va vraiment améliorer votre flux de travail de façon spectaculaire. Et cela va vraiment vous permettre de travailler beaucoup plus vite et de montrer vos idées à vos coéquipiers, clients ou développeurs, ce qu'ils vont comprendre. Parce que surtout avec les clients qui leur montrent quelque chose comme ça ne va pas les rendre vraiment faciles à comprendre. Mais leur montrer quelque chose comme ça, par exemple, cela va leur faire comprendre beaucoup mieux parce qu'ils vont reconnaître au moins certains de ces éléments plutôt que de simplement les montrer et ces formes vides comme des cercles et des carrés, des diamants et des trucs comme ça. C' était donc un coup d'oeil très rapide dans ces modèles premium. Encore une fois, si vous voulez les obtenir avec un très gros rabais, les liens seront dans le PDF. Vous pouvez simplement cliquer sur ces liens et simplement entrer ce code de réduction que je vais vous fournir et ensuite les obtenir et les utiliser dans XD, vous pouvez voir comment quelque chose comme ça peut améliorer votre flux de travail de façon spectaculaire. Vous allez toujours obtenir ce flux de tâches de base gratuitement, bien sûr. Et vous pouvez le télécharger et l'utiliser. Mais si vous voulez améliorer votre jeu, si nous voulons montrer vos idées de la meilleure façon possible à vos clients, coéquipiers et développeurs. Ensuite, l'utilisation de ces modèles premium va améliorer massivement le flux de travail. Comme vous l'avez vu, vous pouvez changer n'importe quoi, vous pouvez les ajuster comme vous le souhaitez. Vous pouvez travailler aussi vite ou lentement que vous le souhaitez. Vous pouvez utiliser toutes sortes de couleurs différentes, toutes sortes de différentes formes et icônes et des choses comme ça. Donc, si vous voulez utiliser quelque chose comme ça, encore une fois, je vais vous donner les liens et les réductions dans un PDF et vous pouvez les consulter. Dans la prochaine vidéo, nous allons vous parler de la façon dont vous pouvez partager quelque chose comme ça avec vos coéquipiers, vos clients et vos développeurs. Alors je te verrai là-bas. 7. Partage de vos flux: Partager vos flux utilisateur est une partie importante de l'ensemble du processus, car cela permettra vraiment à vos clients, coéquipiers et vos développeurs de comprendre votre processus de pensée derrière tout cela. Et cela va vraiment rendre la discussion beaucoup plus simple que simplement le faire et ensuite simplement leur dire par des mots ou quelque chose comme ça. Donc, dans cette vidéo, je vais vous montrer quelques façons pratiques que vous pouvez utiliser pour les montrer à vos clients et développeurs. Donc, le premier est, et j'ai créé ceci pour mes modèles premium qui vous sont montrés. Donc bateau pour un fluide que vous voyez ici, et pour des diagrammes de flux de fil. Et vous pouvez les ouvrir si vous les achetez, ce que j'ai mentionné dans une vidéo précédente. Ce sont ces papiers. C' est donc la taille A4, c'est la taille de la lettre US. Et vous pouvez simplement les ouvrir au fur et à mesure que vous travaillez et aligner tous vos éléments ici, puis simplement les imprimer. Vous pouvez sélectionner cette option. Vous pouvez appuyer sur Contrôle ou Commande E à l'intérieur de XD, puis vous pouvez sélectionner PDF ici. Ensuite, vous pouvez appuyer sur Exporter et il va exporter ce PDF prêt à imprimer. Vous pouvez l'imprimer et ensuite vous pouvez le montrer à vos clients. Ou si vos clients travaillent à distance et que vous n'êtes pas à leur portée ou quelque chose comme ça, alors vous pouvez simplement partager ces fichiers PDF avec vos clients, puis ils peuvent imprimer cette vidéo vers le sud, puis laisser des notes sur ces fichiers PDF. Ou encore mieux, vous pouvez simplement les aligner ici, puis vous pouvez cliquer ici pour partager cela avec vos développeurs ou clients. Comment cela fonctionne est que vous pouvez simplement cliquer ici. Et ça va générer ce lien public. Et puis tu pourras lui donner un nom juste ici. Par exemple, disons un élément Webflow ou un flux de fil pour un site Web ou quelque chose comme ça. Et puis vous pouvez le montrer ici. C' est le nom du lien, puis vous pouvez simplement copier ce lien et ensuite vous pouvez le partager avec vos clients. Ils peuvent alors dans le navigateur, laisser vos commentaires ici, puis vous pouvez simplement changer comment ce flux utilisateur ressemble dans votre XD, puis revenir ici à l'intérieur de l'onglet Partager. Et puis il suffit de mettre à jour ce lien, puis revenez et partagez à nouveau ce lien avec votre client. nom du client, le nom du projet, la date limite, le nombre de pages du site Web et le nombre d'écrans d'application sont ce qui est vraiment important et ce qui va vraiment déterminer combien vous allez réellement facturer à la fin de ce projet, ou combien de temps le projet va prendre. Parce que généralement, en particulier les concepteurs indépendants sont chargés par l'ensemble du projet. Ainsi, ils savent, par exemple, à partir d'une conversation avec le client, si le client a un projet existant ou quelque chose comme ça, ils sauront vraiment combien ils vont facturer en recueillant toutes ces informations. Mais sinon, vous pouvez simplement travailler par étapes. Ainsi, vous pouvez facturer pour cette exploration et tests utilisateur, phase de recherche utilisateur. Et puis une fois cette opération terminée, vous saurez en utilisant simplement ces flux utilisateur, combien d'écrans vous allez concevoir plus tard, combien de pages de site Web vous allez concevoir. Et à partir du numéro de mort, vous pouvez alors faire une devine instruite et facturer le montant de la dette d'argent à votre client. C' est pourquoi le partage est vraiment important dans cette phase du projet. Parce que vous allez facilement savoir en utilisant ces flux utilisateur combien d'argent vous allez réellement facturer à vos clients. Maintenant, c'est l'une des méthodes et vous pouvez suivre ce modèle, surtout si vous achetez ces ou si non, vous pouvez simplement utiliser quelque chose comme ceci. Donc disons que vous avez créé ceci. Vous pouvez lui donner un nom ici, alors double-cliquez et appelez-le comme vous voulez. Ainsi, par exemple, un nouveau flux. Bien sûr, cela va être beaucoup plus propre quand vous le créez réellement. Vous pouvez appuyer sur Contrôle ou Commande E. Et puis au lieu de PDF, vous pouvez sélectionner un JPEG ou un PNG. Vous pouvez appuyer sur Exporter, puis vous pouvez l'envoyer à un client de cette façon. En outre, ce que vous pouvez faire est que vous pouvez connecter ces pages. Donc, disons que c'est le port numéro 1, c'est notre numéro de port 2. Vous pouvez passer en mode prototype, les connecter, puis vous pouvez simplement partager ce prototype, comme je l'ai mentionné ici, puis copier ce lien et le partager avec votre client. Maintenant, l'avantage d'utiliser quelque chose comme celui-ci directement dans Adobe XD est que vous ne gaspillez pas de papier. Tu ne perds pas ton temps. Tu ne perds pas leur temps. Vous pouvez simplement partager un lien. Ils peuvent accéder à ce lien, commenter ce lien, revenir vers vous avec leurs modifications. Vous pouvez le modifier à l'intérieur de XD, mettre à jour le lien, envoyer à nouveau, puis ils peuvent laisser les nouveaux commentaires jusqu'à ce que tout le monde soit satisfait. Et puis après cela, vous allez commencer le processus de conception avec des instructions claires de vos clients, avec une compréhension claire de leur part et des développeurs quant à ce qui doit être fait à l'intérieur de ce projet. 8. Projet de cours: Votre projet de classe pour cette classe est de créer un flux de tâches en utilisant ce modèle que j'ai fourni. Maintenant, vous pouvez positionner ces éléments comme vous le souhaitez, mais ce que je recommande est de les supprimer tous et ensuite simplement utiliser ces éléments principaux, ce que vous voulez, vous pouvez cliquer, faire glisser et déposer sur votre page, puis il suffit de les positionner de manière à ce que cela soit logique pour vous. Vous pouvez modifier tout le texte à l'intérieur. Et ce que je vous encourage vraiment à faire est de changer ces couleurs à l'intérieur , puis de les adapter à votre client idéal ou à deux clients imaginaires ou tout ce que vous voulez, puis simplement télécharger cela dans votre projet de classe. Ce que vous pouvez faire, c'est après avoir aligné tous ces éléments sur la page, vous pouvez le sélectionner, appuyer sur Contrôle ou Commande E exportée est soit PNG ou JPEG, tout ce que vous voulez, appuyez sur Exporter. Et cela télécharge simplement cette image dans notre projet de classe. J' ai vraiment hâte de ce que vous pouvez créer. Et c'est pourquoi je vous donne ce modèle afin de vous entraîner, il suffit d'ouvrir dans Adobe XD et de suivre ces instructions de cette classe. Et j'ai vraiment hâte de voir ce que vous pouvez créer. 9. Pour conclure: Alors voilà, vous avez atteint la fin de la classe. J' espère vraiment que cette classe vous a aidé à comprendre ce que sont les flux utilisateurs. Pourquoi sont-ils utiles et pourquoi la partie vraiment importante du processus de conception et comment l'utilisation ces flux utilisateur peut vous aider à terminer vos travaux de conception beaucoup plus rapidement et avec une meilleure intégrité, avec de meilleures capacités de planification, avec de meilleures compétences afin d'optimiser le flux de vos utilisateurs de la meilleure façon possible. Merci encore d'avoir regardé. J' espère vraiment que vous y trouverez une certaine valeur. Dans un espoir vraiment que vous allez appliquer certains de ces conseils et techniques sont utilisés, certains de ces modèles que je vais vous montrer dans votre futur travail. Merci encore d'avoir regardé et j'espère vraiment vous voir dans certains de mes autres cours. Prends soin de toi.