Utilisez la recherche utilisateur pour créer le design UI parfait

Article original : Use User Research to Create the Perfect UI Design

Si vous souhaitez concevoir votre application de la meilleure manière possible, il est important de vraiment comprendre les besoins de vos utilisateurs. Cela peut être fait grâce à la recherche utilisateur.

Nous venons de publier un cours de design UI/UX sur la chaîne YouTube freeCodeCamp.org qui vous apprendra à utiliser Figma pour concevoir une application web basée sur les besoins des utilisateurs.

Joseph Brendan a développé ce cours. Joseph est un excellent instructeur qui a enseigné à des milliers de personnes sur sa chaîne YouTube.

Dans ce cours, vous apprendrez à utiliser le processus de pensée design de d.school et la gestion de processus personnel pour trouver des solutions de design. Vous développerez une application Fintech à partir de zéro.

Voici les sections de ce cours :

• Décomposition du plan
• Décomposition du flux de travail dans FigJam
• Empathie utilisateur (Empathiser)
• Création d'un sondage sur l'expérience utilisateur avec Google Forms
• Création de personas utilisateurs
• Création de l'énoncé du problème
• Idéation
• Analyse du prototype
• Objectifs et tâches des utilisateurs
• Architecture de l'information
• Prototypage de basse fidélité
• Prototypage de haute fidélité
• Création d'une bibliothèque de styles
• Création d'une bibliothèque de composants
• Présentation du prototype et devoirs

Regardez le cours complet ci-dessous ou sur la chaîne YouTube freeCodeCamp.org (2 heures de visionnage).

Transcription

(générée automatiquement)

Dans ce cours, vous améliorerez vos compétences en conception d'interface utilisateur et d'expérience utilisateur en créant une application mobile.

L'instructeur, Joseph Brendan, est un excellent designer et un excellent enseignant.

Salut les gars, je m'appelle Joseph, Brandon.

Et dans ce cours, je vais vous montrer comment concevoir une application mobile à partir de zéro.

Maintenant, cette application mobile sera une application mobile d'investissement en actions que les utilisateurs pourront utiliser pour investir dans les actions des entreprises dans lesquelles ils souhaitent investir.

Alors voici une démonstration de l'application que nous allons concevoir.

Maintenant, ici, nous avons l'écran de démarrage de l'application, qui est ce qui va s'afficher lorsque vous lancerez l'application.

Maintenant, passons à la page suivante ici.

Maintenant, c'est la page où l'utilisateur devra sélectionner son prochaine action, qui est soit de se connecter en tant qu'utilisateur existant, soit de commencer en tant que nouvel utilisateur.

Alors je vais cliquer sur commencer, comme le ferait un nouvel utilisateur.

Et ici, sur cette page, le nouvel utilisateur devra s'inscrire à cette application avec une adresse e-mail, un numéro de téléphone et un mot de passe.

Maintenant, lorsque le nouvel utilisateur remplit ces informations, le nouvel utilisateur sera redirigé vers cette page, où le nouvel utilisateur devra entrer un code de vérification qui a été envoyé au numéro de téléphone de ce nouvel utilisateur.

Maintenant, lorsque le numéro de téléphone du nouvel utilisateur est vérifié, cela signifie que le nouvel utilisateur est maintenant un utilisateur enregistré sur cette application, et la prochaine chose que l'utilisateur va faire est de cliquer sur le bouton Continuer ici.

Et lorsque l'utilisateur le fait, l'utilisateur sera redirigé vers la page d'accueil de l'application, qui est cette page ici.

Et ici, sur la page d'accueil de cette application.

Ici, le solde du compte de l'utilisateur sera affiché ici.

De plus, l'utilisateur aura un bouton ici qui peut être utilisé pour financer le compte sur cette application.

Et juste ici, l'utilisateur aura une liste des transactions récentes qu'il a effectuées sur cette application.

Maintenant, en descendant ici, l'utilisateur verra une bannière ici sur laquelle il peut cliquer pour obtenir un lien de parrainage qui peut être utilisé pour inviter des amis à avoir un compte sur cette application.

Maintenant, en bas ici, nous avons la section de navigation de cette application.

Actuellement, nous sommes sur la page d'accueil de l'application.

Maintenant, naviguons vers la page InVEST, qui est la page où l'utilisateur aura les fonctionnalités qu'il peut utiliser pour investir en actions.

Alors je viens ici, et je clique sur investir.

Lorsque je le fais, je serai redirigé vers la page InVEST, qui est celle-ci.

Et ici, sur la page InVEST, vous pouvez voir que nous avons un affichage de l'argent et des actifs détenus par l'utilisateur.

Et juste après cela, ici, nous avons une liste des principales actions dans lesquelles l'utilisateur peut investir.

Et aussi, nous avons le portefeuille d'investissement de cet utilisateur ici, qui est une liste de tous les investissements que l'utilisateur a faits sur cette application.

Maintenant, disons que l'utilisateur essaie d'investir dans l'une des actions listées ici, disons celle-ci, oui.

Maintenant, si l'utilisateur clique dessus, l'utilisateur sera redirigé vers la page de détails de cette action sur laquelle il a cliqué.

Et sur cette page de détails, nous allons avoir des informations sur l'action et l'entreprise qui possède l'action.

Maintenant, si l'utilisateur aime ce qu'il voit ici, l'utilisateur cliquera sur le bouton InVEST ici.

Et lorsque l'utilisateur clique sur ce bouton, l'utilisateur devra entrer le montant qu'il souhaite investir dans ces actions.

Maintenant, lorsque l'utilisateur entre le montant et que l'utilisateur clique sur le bouton Continuer ici, l'utilisateur verra un résumé de l'investissement qu'il est sur le point de faire.

Et lorsque l'utilisateur est d'accord avec ce qu'il voit ici dans le résumé.

L'utilisateur devra entrer son code PIN secret ici, puis cliquer sur le bouton InVEST ici.

Et lorsque l'utilisateur le fait, cela signifie que l'investissement a été réussi.

Donc cette application que je viens de démontrer ici est ce que nous allons concevoir dans ce cours à partir de zéro.

Maintenant, avant de commencer à concevoir cette application, j'aimerais décomposer les étapes de notre flux de travail pour ce projet, afin que vous puissiez comprendre le processus d'exécution de la conception de produits qui sont des solutions commerciales réelles.

Donc voici les étapes de notre flux de travail.

Tout d'abord, les parties prenantes de ce projet, qui sont le propriétaire du projet ou l'entreprise pour laquelle nous travaillons, nous présenteront un problème qu'elles souhaiteraient que nous concevions.

Maintenant, lorsqu'elles nous présentent ces problèmes, elles vont également nous parler des utilisateurs, qui sont les personnes confrontées au problème qu'elles veulent que nous concevions.

Maintenant, après cela, les parties prenantes énonceront leurs objectifs attendus pour le projet.

Maintenant, après que les parties prenantes ont présenté un problème et énoncé leurs objectifs attendus, la prochaine étape de notre flux de travail sera pour nous, les designers UX, de nous mettre à la place des utilisateurs.

Maintenant, après avoir fait preuve d'empathie avec les utilisateurs, nous allons créer ce que nous appelons un énoncé de problème.

Et après avoir créé cet énoncé de problème, la prochaine étape de notre flux de travail sera l'étape où nous devrons trouver des idées qui peuvent être les meilleures solutions commerciales aux problèmes mis en évidence dans l'énoncé de problème.

Maintenant, lorsque nous sommes en mesure de trouver une idée pour les problèmes dans l'énoncé de problème, la prochaine action sera pour nous de concevoir cette idée en un prototype testable.

Et après avoir conçu cette idée en un prototype testable, nous allons tester le design pour être sûr qu'il est capable de résoudre les problèmes dans l'énoncé de problème.

Alors commençons.

Maintenant, voici dans Figma.

Et j'utiliserai un fichier Fig Jam pour parcourir toutes les parties analytiques de notre flux de travail.

Alors créons un fichier Fig Jam.

Et pour cela, venez ici et cliquez sur le bouton Nouveau fichier Fig Jam.

Lorsque vous le faites, vous avez créé un fichier Fig Jam aussi facilement que cela.

Et j'aimerais mentionner que si vous êtes nouveau dans l'utilisation de Fig Jam, vous n'avez rien à craindre.

C'est un outil vraiment simple à utiliser.

Suivez simplement, et vous verrez qu'à la fin de ce cours, vous serez à l'aise avec l'utilisation de Figma.

Alors je vais fermer cela.

Et la prochaine chose que je vais faire après avoir créé un fichier Fig Jam est de donner un nom au fichier Fig Jam.

Alors je vais appeler cela stocks, big jam, vous pouvez l'appeler comme vous voulez.

Maintenant, après avoir donné ce nom à ce fichier Fig Jam.

La prochaine chose à faire est de décrire les étapes de notre flux de travail ici dans Fig Jam.

Alors faisons cela.

Alors tout d'abord, zoomez à 200% pour zoomer et dézoomer Sélectionnez Zoom à 200% ici.

Et lorsque je zoome à 200%, utilisez une forme carrée ici pour écrire un titre pour notre flux de travail.

Alors je vais garder cela ici, je vais sélectionner le texte maintenant pour pouvoir écrire mon texte.

Et je vais dire, étapes du flux de travail, puis ici, et je vais aligner le texte à gauche.

Et je vais changer la couleur du rectangle en celle-ci.

Et cela.

D'accord, donc la prochaine chose que je vais faire est d'avoir des notes autocollantes, où nous allons décrire les étapes du flux de travail.

Alors pour créer une note autocollante dans Fig Jam, je vais venir ici et maintenant sélectionner l'outil note autocollante ici.

Lorsque je le sélectionne, je viens ici et je clique sur le canevas Fig Jam pour avoir cela.

Maintenant, sélectionnons cela.

Et étendons la largeur pour l'aligner avec nos notes autocollantes.

Alors tout d'abord, je vais changer la couleur de mes notes autocollantes en celle-ci, puis je vais cliquer sur ce placeholder de texte ici.

Pour que je puisse écrire toutes ces étapes du flux de travail dont j'ai parlé.

Alors j'aimerais en faire une liste.

Et j'aimerais que ce soit une liste à puces.

Alors je vais venir ici et je vais sélectionner la propriété de liste à puces ici.

Ensuite, j'écrirai la première étape du flux de travail, qui est celle-ci, elle dit que les parties prenantes présentent le problème et les utilisateurs confrontés au problème.

Maintenant, je vais créer un autre élément de liste, qui sera la prochaine étape de notre flux de travail.

Et cela sera l'endroit où les parties prenantes définiront les objectifs de ce projet.

Alors je vais dire définir les objectifs.

Venez ici.

Créons un peu d'espace ici.

Maintenant, décrivons la prochaine étape de notre flux de travail.

Après que les objectifs soient définis, nous, les designers UX, allons faire preuve d'empathie avec les utilisateurs.

Alors venons ici.

Créons aussi de l'espace.

Maintenant, après que nous, les designers UX, avons fait preuve d'empathie avec les utilisateurs, la prochaine étape de notre flux de travail sera l'étape où nous devrons créer un énoncé de problème.

Alors je vais dire, crée des énoncés de problème.

Alors venons ici, créons de l'espace.

Maintenant, après avoir créé des énoncés de problème, la prochaine étape de notre flux de travail sera l'étape où nous devrons trouver une idée qui peut résoudre les problèmes listés dans l'énoncé de problème.

Maintenant, après avoir trouvé une meilleure idée qui peut résoudre les problèmes dans l'énoncé de problème, la prochaine étape de notre flux de travail sera l'étape où nous allons concevoir cette idée en un prototype testable.

Alors je vais dire concevoir un prototype ici.

Et après avoir conçu cette idée en un prototype testable, nous allons passer à la prochaine étape de notre flux de travail, qui sera l'étape où nous allons tester cette idée que nous avons conçue en un prototype.

Alors je vais simplement appeler cela test et avoir cet espace.

Maintenant, nous avons décrit nos étapes de flux de travail ici.

Alors juste pour améliorer cela, je vais sélectionner tout cela et je vais mettre tout le texte en gras.

Pour avoir ce résultat ici, je vais sélectionner ce texte, et je vais le mettre en gras aussi.

Maintenant, zoomez à 100%.

Pour voir ce que nous avons, et c'est bien, donc j'utiliserai l'outil main, qui est celui-ci, vous pouvez venir ici pour cliquer dessus pour le sélectionner ou simplement appuyer sur la touche H de votre clavier pour le sélectionner.

Et maintenant, attrapez et déplacez le canevas à ce point.

Donc maintenant, nous avons décrit nos étapes de flux de travail ici à droite.

Maintenant, la prochaine chose à faire est pour AWS de décrire toutes les actions qui seront entreprises à chacune de ces étapes de flux de travail.

Cela signifie que nous allons maintenant décomposer chacune de ces étapes une après l'autre, afin que nous sachions quelles actions entreprendre à chacune de ces étapes et comment optimiser nos résultats.

Alors je vais sélectionner l'outil Déplacer ici en cliquant dessus ou en appuyant sur la touche V de mon clavier pour le sélectionner.

Et je vais venir ici, je vais sélectionner l'outil carré là pour que je puisse créer cette forme comme ceci.

Et ici, je vais écrire un texte à l'intérieur de cette forme.

Et ce texte sera cette première étape, sélectionnez tout ce texte ici, puis j'utiliserai CTRL.

C, si vous utilisez un Mac, c'est commande C, je vais utiliser cela pour copier ce texte.

Et je vais le coller à l'intérieur de cette question comme ceci.

Maintenant, étendez cela à ce point.

Maintenant, c'est la première étape de notre flux de travail, résultat ici maintenant.

Et j'aurai une note autocollante ici, juste en dessous de cela.

Maintenant, dans cette note autocollante, je vais écrire ce qui va se passer à cette étape, qui est la première étape de notre flux de travail.

Maintenant, cette étape est l'étape où les parties prenantes nous présenteront le problème.

Et nous informeront également des utilisateurs qu'elles veulent que nous concevions pour eux.

Alors dans ce cours, j'aimerais que nous supposions que nous avons une partie prenante quelque part ou que nous avons une entreprise quelque part qui veut que nous concevions une application qu'ils peuvent utiliser pour investir en actions pour eux, n'est-ce pas.

Alors je vais coller cela ici dans cette note autocollante, qui dit que les utilisateurs trouvent vraiment difficile d'investir en actions en utilisant les applications d'investissement existantes en raison de la surcharge d'informations et de la présentation complexe des informations sur les applications.

Maintenant, qui sont les utilisateurs, les utilisateurs sont des investisseurs en actions au Nigeria.

Alors cela signifie que les parties prenantes nous ont présenté un problème et les utilisateurs confrontés au problème.

Cela est résolu.

Alors changeons la couleur des notes autocollantes.

Quelque chose comme ceci pour le différencier de celui-ci.

Et venons ici.

Changeons cela, en cela pour le différencier aussi.

Donc c'est la première étape de notre flux de travail.

Et nous avons vu ce qui va se passer ici à cette étape.

Alors regardons la prochaine étape ici, qui est l'étape où les parties prenantes définiront les objectifs du projet.

Alors je vais venir ici, je vais sélectionner cela et maintenant le dupliquer pour dupliquer est Ctrl D.

Si vous utilisez un Mac, c'est commande D.

Alors je vais dupliquer cela et nos habitudes à ici.

Je vais enlever ce texte à l'intérieur de cette forme.

Et écrire définir les objectifs là.

Je peux avoir entre parenthèses sauvegardé par les parties prenantes.

Alors je vais garder cela ici.

Maintenant, résultat ici aussi, dupliquer cela et habituer, ils sont à droite sur la forme de plat, qui est une forme carrée, n'est-ce pas.

Alors à l'intérieur des notes autocollantes, je vais enlever tout cela et enlever.

aussi supposer que nous avons des parties prenantes quelque part qui nous ont envoyé les objectifs.

Ce sont ceux pour ce projet.

Alors supposons que les parties prenantes nous ont envoyé cela comme leur objectif.

Et cela dit, rechercher et nous aider à simplifier chaque tâche nécessaire pour faire un investissement en actions.

Donc ce que nous avons ici jusqu'à présent est ceci, les parties prenantes nous ont présenté un problème et B utilisateurs confrontés au problème.

Et ils ont continué à définir leur objectif attendu pour ce projet.

Et l'objectif attendu est qu'ils veulent que nous recherchions et aidions les utilisateurs à simplifier chaque tâche nécessaire pour faire un investissement en actions.

Alors passons à la prochaine étape de notre flux de travail, qui est l'étape où nous, les designers UX, devrons faire preuve d'empathie avec les utilisateurs confrontés au problème.

Alors je vais venir ici, je vais dupliquer cela, je vais avoir cela ici.

Et je vais dire empathiser.

Maintenant, j'ai cela ici aussi.

Et je vais enlever tout ce que nous avons ici.

Et à cette étape d'empathie, c'est en fait l'étape où nous, les designers UX, allons maintenant commencer à travailler.

Alors que faisons-nous à cette étape ? Quelles sont les actions que nous devons entreprendre à cette étape, afin que nous puissions dire que nous avons correctement fait preuve d'empathie avec les utilisateurs confrontés au problème.

Alors ce que nous allons faire est d'interviewer les utilisateurs en face à face ou d'envoyer des enquêtes numériquement aux utilisateurs.

Le but de cela est que nous puissions comprendre les problèmes du point de vue des personnes confrontées au problème.

Maintenant, après cela, nous allons créer ce que nous appelons des personas utilisateurs, tout cela sous cette étape d'empathie.

Alors, faites de cela une liste, comme ceci, pour que cela soit organisé correctement.

Et lorsque nous avons terminé l'étape d'empathie, en entreprenant ces deux actions ici, la prochaine chose que nous allons faire est de passer à la prochaine étape de notre flux de travail, qui est l'étape où nous devrons créer des énoncés de problème.

Alors je vais venir ici, je vais avoir cela ici.

Et je vais changer cela pour créer des énoncés de problème, et avoir cela rester ici.

Alors à cette étape, où vous, le designer UX, serez nécessaire pour créer des énoncés de problème, ce que vous faites pour créer des énoncés de problème, c'est facile, énoncer simplement le problème des utilisateurs avec tout ce que vous avez recueilli de l'étape précédente, qui est l'étape d'empathie.

Alors après avoir interviewé les utilisateurs pour comprendre les problèmes de leur point de vue, et que vous avez créé des personas utilisateurs pour chacun des utilisateurs, ce que vous faites est que vous utiliserez toutes ces données pour énoncer correctement le problème auquel les utilisateurs sont confrontés.

Maintenant, lorsque vous créez l'énoncé du problème, qui est vous énonçant correctement le problème, la prochaine chose que vous faites est de passer à la prochaine étape de notre flux de travail, qui est l'étape de l'idée.

Maintenant, lorsque vous arrivez à l'étape de l'idée, ayons cela ici.

Lorsque nous arrivons à l'étape de l'idée, les actions que vous entreprenez à l'étape de l'idée sont des actions simples.

Tout ce que vous aurez à faire avec cela, lancer une session de brainstorming, puis pendant la session de brainstorming, voter pour la meilleure idée, lorsque vous votez pour la meilleure idée, sélectionner l'idée avec le plus de votes.

Et là, vous avez obtenu une idée que vous pouvez ensuite prendre à la prochaine étape de notre flux de travail, qui est l'étape où vous devrez concevoir cette idée en un prototype testable.

Alors avant de passer à cette étape ici, j'aimerais venir ici et aussi souligner que cette étape est l'étape de l'idée.

C'est l'étape de l'idée.

Et comme cela va être une étape de session de brainstorming, et évidemment je ne peux pas avoir une session de brainstorming ici dans cette leçon, cela va être quelque chose que vous allez mettre en place avec les personnes avec lesquelles vous voulez le mettre en place, battre sur Zoom discord, battre dans la vraie vie, peu importe comment vous voulez le mettre en place, c'est bien.

Alors je vais juste souligner cette étape ici.

Et ce que je vais faire, c'est que je vais supposer que j'ai mené une session de brainstorming hors ligne, juste pour que nous puissions apprendre mieux.

Et je vais aussi supposer que pendant cette session de brainstorming, nous sommes arrivés à une idée.

Alors j'aurai cela ici sélectionné idée.

Et je vais coller cela comme notre idée sélectionnée.

Maintenant, c'est l'idée sélectionnée pour ce cours, elle dit Créer une application d'investissement où les graphiques sont représentés avec du texte, où les utilisateurs auront l'option de financer le compte et le portefeuille via virement bancaire ou leurs cartes de débit, où l'historique des transactions récentes sera facilement accessible.

Et où un anglais simple et facile à comprendre sera principalement utilisé.

Maintenant, si vous regardez cette idée, vous verrez que cette idée résout les problèmes que nous avons dans cet énoncé de problème.

Et cet énoncé de problème a été obtenu de tout ce que nous avons appris pendant l'étape d'empathie.

Et nous avons pu apprendre tout ce que nous avons appris pendant cette étape parce que nous avons créé un formulaire de sondage et envoyé le sondage aux utilisateurs, vous pouvez donc voir comment tout est connecté.

Donc maintenant que nous avons une idée que nous pouvons utiliser pour résoudre le problème, la prochaine étape ici est l'étape de conception du prototype.

Et à cette étape, les actions que nous devons entreprendre sont toutes celles-ci. Tout d'abord, nous devons créer une architecture de l'information pour cette meilleure idée qui a été sélectionnée pendant l'étape de l'idée.

Alors je vais venir ici, je vais faire défiler jusqu'à ce point.

Et je vais avoir cela ici, je vais dire architecture de l'information.

Avant de créer l'architecture de l'information, comprenons ce qu'est une architecture de l'information et pourquoi il est important d'en créer une.

Donc l'architecture de l'information d'une application mobile est la manière dont vous organisez et arrangez les informations sur l'application mobile qui aidera les utilisateurs à utiliser cette application mobile pour accomplir leur tâche sur cette application mobile sans une mauvaise expérience.

C'est dans l'architecture de l'information que vous déciderez quelles fonctionnalités et quelles informations existent sur chaque page de l'application et à chaque étape de l'application.

Alors allons-y.

Et créons une architecture de l'information pour cette idée.

Maintenant, la manière de commencer à créer votre architecture de l'information est tout d'abord de définir les objectifs des utilisateurs qui utiliseront l'application, puis de définir la tâche que les utilisateurs doivent accomplir pour atteindre leurs objectifs sur l'application.

Alors voici, et j'aurai cela ici.

Donc voici l'objectif de l'utilisateur d'investir avec une bonne expérience.

Maintenant, les tâches de l'utilisateur ici sont les actions que l'utilisateur devra entreprendre pour atteindre cet objectif.

Maintenant, quelles sont les tâches, l'utilisateur devra s'inscrire à l'application en tant que nouvel utilisateur ou se connecter en tant qu'utilisateur existant, puis financer leur compte ou leur portefeuille, puis utiliser le fonds qu'ils ont dans leur compte ou portefeuille pour investir dans n'importe quelle action de leur choix.

Donc s'ils peuvent accomplir cette tâche, cette tâche et cette tâche, cela signifie qu'ils ont atteint cet objectif sur cette application.

Après avoir défini les objectifs de l'utilisateur et énoncé la tâche que l'utilisateur doit accomplir pour atteindre cet objectif, nous allons créer notre flux d'architecture de l'information, et pour gagner du temps, accélérons ce processus, et je vais l'expliquer pour que vous puissiez comprendre.

Donc ce que nous avons ici est notre flux d'architecture de l'information.

Et zoomons pour que je puisse décomposer ce flux un après l'autre et aussi vous montrer comment venir avec un flux comme celui-ci.

C'est le point de départ du flux.

C'est là que l'utilisateur lance l'application.

Donc lorsque l'utilisateur lance l'application, l'utilisateur aura deux options, une pour s'inscrire et une pour se connecter.

Alors suivons le flux d'inscription ici.

Maintenant, si l'utilisateur essaie de s'inscrire, l'utilisateur devra s'inscrire avec son adresse e-mail, son numéro de téléphone et son mot de passe.

Et après cette étape, l'utilisateur devra vérifier son numéro de téléphone.

Maintenant, après que le numéro de téléphone est vérifié, l'utilisateur sera redirigé vers la page d'accueil de l'application.

Lorsque l'utilisateur arrive à la page d'accueil de l'application, l'utilisateur aura toutes ces options ici.

Et la première route ou la première option ici sera l'icône de menu, qui sera sur la page d'accueil.

L'utilisateur aura également le solde du compte affiché sur la page d'accueil, l'utilisateur aura une option de financement du compte qu'il peut utiliser pour financer le compte toujours sur la page d'accueil.

Et toujours sur la page d'accueil.

Les transactions récentes de l'utilisateur seront affichées là sur la page d'accueil.

Maintenant, toujours sur la page d'accueil, nous allons avoir une bannière de parrainage.

Toujours sur la page d'accueil, nous allons avoir une route d'investissement que les utilisateurs peuvent prendre s'ils souhaitent investir en actions.

Maintenant, toujours sur la page d'accueil, nous allons avoir une option de transaction, au cas où l'utilisateur souhaiterait déposer ou retirer.

Donc tout cela est sur la page d'accueil.

Maintenant, regardons le flux du premier élément ici, qui est l'icône de menu.

Maintenant, si l'utilisateur clique sur l'icône de menu, qui est sur la page d'accueil, l'utilisateur verra toutes ces options, transactions récentes, gestion des cartes, portefeuille d'investissement, demande de relevés et paramètres.

Maintenant, juste pour ceux qui ne savent pas ce qu'est une icône de menu, si vous allez sur une application ou un site web, en utilisant votre téléphone mobile, vous aurez toujours cette icône ici en haut qui, lorsque vous cliquez dessus, vous aurez un menu déroulant ou vous aurez une barre de menu glissant de la gauche ou de la droite, c'est ce que nous appelons l'icône de menu.

Et la plupart des applications mobiles ont cela.

Donc c'est tout ce que nous allons afficher lorsque l'utilisateur accède à la route de l'icône de menu maintenant pour le solde du compte, ou cela va afficher un solde disponible de base.

Et c'est tout.

Maintenant, pour l'option de financement des comptes.

C'est le flux, l'utilisateur devra choisir une méthode.

Et c'est important pour l'expérience.

Parce que d'après notre recherche utilisateur, il était clair pour nous que les utilisateurs veulent en fait une expérience où ils auraient l'option de financer leur compte avec plus d'une option.

Donc lorsqu'ils choisissent une méthode, ils iront de l'avant pour financer le compte avec cette méthode qu'ils ont choisie.

Donc c'est ce que fait la route de financement des comptes maintenant pour la route des transactions récentes.

Tout ce que l'utilisateur aura lorsqu'il accédera à une transaction récente sera les détails de la transaction.

Et c'est bien.

Maintenant, nous avons l'option de bannière de parrainage ici.

Et lorsque l'utilisateur accède à la route, ils auront un code promo de parrainage qu'ils peuvent copier et envoyer à un ami pour rejoindre l'application pour tout cela et tout cela.

Et c'est bien.

Maintenant, nous avons la route InVEST ici.

Lorsque l'utilisateur accède à cette route, l'utilisateur verra une liste d'actions dans lesquelles il peut investir et verra également son portefeuille d'actions dans lequel il a investi.

Donc si l'utilisateur accède à l'une des actions qui ont été listées, l'utilisateur verra les détails de cette action.

Et s'ils aiment ce qu'ils voient dans les détails, ils iront de l'avant pour investir.

Et c'est un bon flux.

Donc si vous venez ici, nous avons cette route ici, qui est la route de transaction.

Lorsque l'utilisateur accède à cette route, l'utilisateur aura l'option de faire un dépôt, ce qui est aussi comme financer le compte que vous obtenez.

Et l'utilisateur aura également l'option de faire un retrait du compte.

Donc c'est juste le flux d'architecture de l'information de base pour cette application.

Et il est toujours important pour vous de créer cette architecture de l'information, afin que vous compreniez et organisiez les étapes que l'utilisateur entreprendra sur l'application.

Il est également important afin que vous puissiez également rationaliser les fonctionnalités principales que chaque page de votre application aura.

Maintenant, si vous vous souvenez, c'était le flux d'inscription, le flux de connexion est toujours le même, car tout ce que vous avez à faire ici pour vous connecter est simplement d'entrer votre adresse e-mail et votre mot de passe, puis vous serez redirigé vers la page d'accueil.

Toujours, lorsque vous arrivez à la page d'accueil, tous les autres thèmes sont les mêmes.

Donc c'est ça si vous avez des questions sur l'architecture de l'information ici, attirez mon attention.

Et je suis là pour aider.

Donc si vous venez ici maintenant, dans notre décomposition de flux, vous verrez que sous l'étape de conception de prototype, nous avons créé notre architecture de l'information.

La prochaine action à cette étape est de créer un prototype de basse fidélité de la meilleure idée en utilisant l'architecture de l'information.

Avant de faire cela, j'aimerais expliquer ce qu'est un prototype de basse fidélité.

Donc un prototype de basse fidélité est une version factice de votre design final pour une application.

Maintenant, la question que vous pouvez vous poser est la suivante : pourquoi avons-nous besoin de concevoir une version factice ? Maintenant, voici la réponse.

Concevoir une version factice est important car à ce stade de tentative de comprendre tout, votre design et votre processus de design peuvent être sujets à de nombreux changements et commentaires des parties prenantes.

Maintenant, c'est comme construire une maison factice d'abord, avant de construire la maison principale.

Maintenant, si vous utilisez du papier pour construire une maison factice d'abord, avant de construire la maison principale, cela sera beaucoup plus facile lorsque le propriétaire de la maison viendra faire une correction ou viendra faire un changement.

Puisque c'est du papier, vous n'avez pas grand-chose à perdre, tout ce que vous avez à faire est de le déchirer et de le remettre en place en quelques secondes.

Mais si vous allez de l'avant pour construire la maison principale d'abord, et que le propriétaire de la maison vient et dit, OK, je ne veux pas ce design ici, je ne veux pas cela là, cela signifie que vous devrez décomposer cette partie de la maison et reconstruire cette partie de la maison avec toutes les ressources que vous avez mises dans la construction de cette partie de la maison.

Et cela va être beaucoup plus fastidieux par rapport à vous utiliser du papier pour simplement construire un prototype ou un modèle de la maison.

Donc c'est essentiellement ce qu'est un prototype de basse fidélité.

Et c'est pourquoi il est important pour vous d'avoir un prototype de basse fidélité, puis de le prendre aux parties prenantes pour des corrections et des changements et des commentaires et tout cela.

Maintenant, lorsque le prototype de basse fidélité a été accepté et convenu, alors vous pouvez aller de l'avant pour concevoir l'application réelle elle-même, qui est le prototype de haute fidélité.

Alors allons-y et voyons comment créer un prototype de basse fidélité de notre meilleure idée.

Donc nous allons le faire en utilisant un fichier de design Figma.

Alors je vais venir ici, je vais aller à Figma.

Et je vais créer un nouveau fichier de design.

Et je vais appeler cela application d'investissement en actions.

Et venir ici et renommer la page un en basse fidélité.

Et cette page va contenir tous nos écrans de basse fidélité.

Alors allons-y et commençons.

Donc concevoir des écrans de basse fidélité est facile.

Et c'est facile parce que vous n'avez pas besoin d'un système de design pour cela.

Comme vous n'avez pas besoin d'une bibliothèque de styles.

Pour faire cela.

Vous n'avez pas besoin d'une bibliothèque de composants.

Pour faire cela.

Vous n'avez pas besoin de tout cela, tout ce que vous avez à faire est de vous concentrer sur la tâche de l'utilisateur.

Donc si vous venez ici, vous verrez que notre tâche utilisateur sur cette application est de s'inscrire, de se connecter sur votre compte ou portefeuille et d'investir.

Et si un utilisateur accomplit toutes ces tâches, cela signifie que l'utilisateur atteindra son objectif sur cette application, qui est d'investir en actions.

Donc nous allons concevoir des écrans de basse fidélité autour de ces tâches utilisateur.

Donc revenons ici et j'ai choisi mon fichier de design.

Et voyons ce qu'il en est de créer des écrans de basse fidélité, tout ce que vous avez à faire est de sélectionner l'outil de cadre, puis d'aller avec n'importe quel modèle de votre choix, je vais opter pour iPhone 13 Promax, et ne pas avoir cela.

Donc la prochaine chose que je vais faire est de venir ici.

Et puisque cela va être l'écran de démarrage, je vais simplement avoir ce logo rester ici, l'aligner au centre, horizontalement et au centre verticalement, puis je vais créer l'écran de connexion, l'écran d'inscription et tout cela.

Et en fait, la manière dont j'aime le faire est celle-ci, j'aime segmenter les écrans en catégories en utilisant la tâche de l'utilisateur.

Cette section ou ce segment devrait être pour les écrans d'authentification.

Donc je vais continuer, accélérer ce processus et avoir d'autres écrans ici.

Ensuite, je vais expliquer comment j'ai obtenu tout cela.

Maintenant, avant de faire cela, j'ai peut-être manqué quelque chose ici.

Je connais certaines personnes qui sont nouvelles dans Figma et qui ne comprennent peut-être pas comment ces connecteurs sont créés.

Maintenant, tout ce que vous avez à faire est d'utiliser le connecteur pour le sélectionner, cliquer sur le point, puis vous le connectez comme vous voulez le connecter, vous pouvez prendre votre connecteur n'importe où, connecter n'importe quelle forme que vous essayez de connecter, et c'est bien.

Et lorsque votre connecteur est créé, vous pouvez en fait jouer avec, vous pouvez cliquer dessus pour le sélectionner, attraper les points, le prendre en haut, le prendre en bas, comme vous voulez jouer avec, c'est bien.

Maintenant, vous pouvez également sélectionner le connecteur et changer la couleur du connecteur, comme ceci.

Donc toutes ces lignes de connexion ont été créées en utilisant l'outil de connecteur ici.

Donc retournons à notre fichier de design Figma.

Et mettons en pause cette vidéo ici et revenons avec tous nos écrans de basse fidélité, puis j'expliquerai davantage.

Donc ce que nous avons ici sont des écrans de basse fidélité pour la tâche d'authentification.

Alors zoomons.

Comme vous pouvez le voir, ici, nous avons l'écran de démarrage, qui est celui-ci.

Maintenant, après l'écran de démarrage, nous avons cet écran où l'utilisateur devra choisir cette action d'authentification, qui est soit de se connecter, soit de s'inscrire.

Maintenant, pour créer ce bouton ici, vous n'avez pas besoin d'utiliser une disposition automatique ou autre, tout ce que vous avez à faire est de sélectionner le rectangle comme ceci, créé n'importe comment vous voulez le créer, puis venir ici, sélectionner l'outil de texte et vous pouvez simplement dire connexion ou inscription ou ce que vous voulez avoir.

Ils sont comme ceci.

C'est ainsi que je l'ai créé.

Et je n'ai pas eu à choisir une couleur.

Et il est conseillé de ne pas utiliser de couleurs lors de la création de vos écrans de basse fidélité.

Et c'est parce que si vous avez des couleurs choisies, cela peut distraire les parties prenantes lorsque vous présentez les écrans de basse fidélité à cette étape, vous devez vous concentrer uniquement sur l'expérience utilisateur.

Donc avoir des couleurs ou rendre les écrans de basse fidélité beaux peut distraire les parties prenantes de l'expérience utilisateur.

C'est ainsi que j'ai créé les boutons là.

Et ici aussi, ces champs d'entrée, j'ai simplement utilisé le rectangle, le rectangle pour créer une forme rectangulaire là, j'ai ajouté un trait.

Et j'ai retiré la couleur de champ et j'ai eu cela puis j'ai mis un texte à l'intérieur disant email comme ceci.

Et ce bouton, nous savons comment faire cela.

J'ai dupliqué tout cela.

Et j'ai eu un champ supplémentaire ici pour le numéro de téléphone.

Et mon bouton est toujours ici.

Ensuite, ici, nous avons ce champ pour un code de vérification.

Et ici, j'ai le bouton Vérifier qui est correct, donc tous les écrans ici sont pour la tâche d'authentification.

Maintenant, faisons défiler vers le bas jusqu'à la tâche suivante, qui sera la tâche de financement des portefeuilles.

Et cette tâche se produira en fait à partir de la page d'accueil.

C'est pourquoi j'ai créé une version basse fidélité de notre page d'accueil.

Donc vous pouvez voir que nous n'avons pas trop d'informations ici.

Donc si je fais défiler vers le bas, vous verrez que j'ai l'action de pop-up de financement des comptes ici.

Maintenant, cet élément va s'afficher lorsqu'un utilisateur clique sur financement des comptes ici.

Lorsque ils le font, ce pop-up s'affichera pour qu'ils choisissent la méthode avec laquelle ils veulent financer le compte.

Et c'est bien, donc c'est facile à créer, il suffit d'avoir un rectangle comme ceci et d'avoir votre texte à l'intérieur.

Ensuite, l'arrière-plan de cette section de navigation est également un rectangle que j'ai eu à travers l'écran comme ceci, et j'ai changé la couleur en quelque chose comme ceci, juste comme cela.

C'est facile.

Donc ici, c'est aussi un rectangle avec un texte dessus.

Et j'ai un rectangle ici avec un rayon de coin de 16 px.

Et c'est bien ici, nous savons comment créer un bouton.

Et ceci est juste du texte.

Maintenant, pour cette icône ici, je l'ai obtenue à partir d'un plugin d'icônes, j'ai utilisé le plugin d'icônes de plumes pour avoir cela résolu.

Donc cette tâche est complète, nous avons le bouton de financement des comptes ici, qui, si un utilisateur clique dessus, vous aurez ce pop-up s'afficher comme ceci.

Maintenant, passons à la tâche suivante de notre application.

Et la tâche suivante ici est d'investir.

Donc si je viens ici, et que je fais défiler vers le bas, vous verrez que j'ai ces écrans pour la tâche InVEST.

Maintenant, cette section pour laquelle nous avons cette page ici, nous avons cette icône, nous avons ce texte ici.

Maintenant, j'ai cette section qui est comme la liste des actions à investir.

J'ai cette barre de recherche ici.

J'ai ce champ de recherche ici qui est également facile à créer.

Tout ce que vous avez à faire est de créer un rectangle, lui donner un rayon de coin réduit de, disons, 16 ou disons 8, 16 est beaucoup.

Ensuite, venez ici, retirez la couleur de remplissage et donnez-lui une bordure, et vous avez cela, puis vous avez un texte à l'intérieur, c'est vraiment facile à créer, puis j'ai la liste des actions ici.

Donc je viens d'avoir un rectangle ici aussi avec ce texte au-dessus.

Donc c'est aussi facile à créer, tout ce que vous avez à faire est d'avoir quelque chose comme ceci, puis lui donner un rayon de coin de 16, puis prendre la couleur jusqu'aux battements à ce point, puis avoir votre texte écrit au-dessus de son emplacement, puis garder cela ici, puis avoir ce plus 234 pour cent.

Ils sont tous les nombres avec lesquels vous êtes à l'aise.

Donc c'est ainsi que je l'ai créé.

Et si vous faites défiler vers le bas, vous verrez que nous avons la section de votre portefeuille d'actions, qui a également cela, nous savons comment créer cela.

Et ici, nous avons la section de navigation.

Et c'est bien.

Donc la page suivante ici, zoomons un peu.

La page suivante ici est la page des détails de l'action.

Maintenant, cela suppose que l'utilisateur est intéressé par cette action ici, vous pouvez voir où se trouve le curseur de ma souris.

Donc si un utilisateur est intéressé par cette action, et que l'utilisateur clique dessus, cette page de détails s'affichera pour l'action, montrant les détails de cette action et de l'entreprise qui possède l'action, vous aurez le logo de l'entreprise ici.

Et vous aurez le pourcentage de l'action et tout cela, vous aurez l'intérêt pour cette action, le capital minimum, le volume, à propos de l'entreprise, le rang de valorisation et tout cela, puis vous aurez un bouton d'investissement ici.

Et je pense qu'à présent, nous savons comment créer tous les éléments ici.

Maintenant, si un utilisateur clique sur le bouton InVEST, il sera redirigé vers cette page où il devra entrer le montant qu'il souhaite investir dans ces actions.

Et je crois que sur cette page ici, nous savons comment créer tous les éléments que nous avons ici.

Maintenant, si un utilisateur clique sur le bouton Suivant ici, après avoir entré le montant qu'il souhaite investir dans ces actions, l'utilisateur sera redirigé vers cette page ici où il verra un résumé de l'investissement qu'il est sur le point de faire.

Ici, il verra le montant qu'il a tapé ici, affiché ici, le capital minimum, la valeur de l'intérêt, et tant d'autres détails, et tant d'autres détails qui ne sont pas listés ici.

Maintenant, si l'utilisateur est d'accord avec cela, il clique sur le bouton Continuer, et l'investissement, qui est la tâche, sera terminé.

Donc pour que nous puissions présenter correctement des écrans de basse fidélité comme celui-ci pour des tests et des commentaires et des opinions.

Et pour tout cela.

Pour que nous puissions le faire correctement, cela signifie que nous devons faire un prototype de ces écrans de basse fidélité, afin que nous puissions les présenter correctement pour des tests et des commentaires des parties prenantes.

Alors allons-y et faisons cela.

Je vais cliquer sur l'option prototype ici.

Alors commençons par l'écran de démarrage.

Alors sélectionnons l'écran de démarrage.

Lorsque l'écran de démarrage est sélectionné, vous aurez ce point ici, tout ce que vous avez à faire est de cliquer dessus, de le maintenir et de le faire glisser vers l'écran de destination.

Alors je voudrais que les utilisateurs aillent de l'écran de démarrage à cet écran ici.

Maintenant, lorsque je connecte cet écran de démarrage à cet autre écran ici, vous verrez que Figma va faire apparaître cette carte de détails d'interaction pour nous.

Pour que nous puissions définir le mode de notre interaction.

Donc ici, j'ai l'événement On Click.

Et l'action pour cet événement onclick est une action de navigation vers.

Donc ce que cela signifie, c'est que lorsque l'écran de démarrage est cliqué, nous allons naviguer vers cet écran ici, qui est iPhone 13 Promax deux, c'est le nom ici en fait, vous pouvez en fait, il est conseillé de renommer tous vos écrans, c'est la meilleure façon de le faire.

Donc cela signifie pratiquement que lorsque l'écran de démarrage est cliqué, naviguer vers cet autre écran, qui est celui-ci.

Maintenant, nous avons une section d'animation ici que nous pouvons définir l'animation de cette transition ou l'animation de cette navigation.

Donc actuellement, pour définir l'instance, je peux venir ici et définir cela sur smart animate, puis définir cela sur ease in et out et out.

Définir le temps de délai d'animation à 800 millisecondes, tapez simplement 800 là et appuyez sur la touche Entrée de votre clavier et Figma ajoutera les millisecondes pour vous.

Maintenant, ce paramètre d'animation est facultatif.

La chose la plus importante ici est que nous avons défini l'événement et l'action qui sera déclenchée par cet événement, puis nous avons défini le cadre de destination pour cette action.

Et c'est bien.

Donc c'est réglé.

Maintenant, voici, je vais cliquer sur ce bouton.

Et je vais dire, d'accord, lorsque l'utilisateur clique sur ce bouton de connexion, il doit aller à l'écran de connexion, qui est celui-ci.

Maintenant, pour les détails de l'interaction, je vais les définir comme ceci.

C'est le paramètre que nous avions avant.

Donc je vais le laisser défini comme cela.

Maintenant, pour le bouton d'inscription.

Lorsque l'utilisateur clique sur le bouton d'inscription, cela signifie que l'utilisateur est un nouvel utilisateur.

Donc j'aimerais que cet utilisateur soit redirigé vers la page d'inscription, qui est celle-ci.

Maintenant, lorsque l'utilisateur se rend sur la page de connexion et entre son email et son mot de passe, cela signifie qu'il devra cliquer sur le bouton de connexion.

Et lorsqu'il clique sur le bouton de connexion, j'aimerais qu'il aille directement à la page d'accueil, qui est celle-ci.

Maintenant, rappelez-vous, pour qu'un utilisateur se connecte, cela signifie que l'utilisateur est un utilisateur existant.

Maintenant, lorsque l'utilisateur sélectionne l'option S'inscrire ici, cela signifie que l'utilisateur est un nouvel utilisateur, et l'utilisateur devra entrer son adresse e-mail, son numéro de téléphone et son mot de passe, n'est-ce pas.

Maintenant, lorsqu'il le fait, cela signifie qu'il devra d'abord faire vérifier son numéro de téléphone.

Donc lorsque l'utilisateur clique sur s'inscrire, l'utilisateur sera redirigé vers la page de code de vérification.

Et lorsque le numéro de téléphone de l'utilisateur est vérifié, l'utilisateur sera alors redirigé vers la page d'accueil.

Et c'est bien.

Donc vous avez vu que nous avons créé le flux d'authentification.

Donc venons ici sur la page d'accueil, travaillons sur la tâche suivante.

Maintenant, la tâche suivante est de financer les comptes, n'est-ce pas.

Et pour financer les comptes, l'utilisateur devra cliquer sur le bouton de financement des comptes.

Maintenant, lorsqu'il le fait, nous allons vouloir qu'une fenêtre contextuelle s'affiche à l'écran.

Et cette fenêtre contextuelle devrait afficher cette carte ici qui exigera de l'utilisateur qu'il choisisse la méthode avec laquelle il souhaite financer ses comptes.

Venons ici dans nos détails d'interaction.

Ici, c'est un événement On Click.

C'est bien.

Maintenant, ici, nous avons l'option Naviguer vers.

Et ce n'est pas ce que nous voulons, nous voulons qu'une fenêtre contextuelle s'affiche sur cet écran, nous ne voulons pas que l'utilisateur quitte la page sur laquelle il se trouve, nous voulons que l'utilisateur reste sur cette page, mais qu'une fenêtre contextuelle s'affiche.

Alors comment faisons-nous cela, nous allons changer cela de naviguer vers à ouvrir le calque.

Lorsque nous le changeons en ouvrir le calque, nous allons venir ici et sélectionner l'option centre, car j'aimerais que cette fenêtre contextuelle reste au centre de l'écran ici.

Donc ici, je vais garder cela sélectionné, ce qui est fermé en cliquant à l'extérieur et en dehors.

Garder également cette option d'ajouter un arrière-plan derrière le calque sélectionnée, puis pour l'opacité de l'arrière-plan du calque, la garder définie à 25%.

Maintenant, pour l'animation, vous pouvez toujours la garder définie en instance ou venir ici et sélectionner une autre option de votre choix.

Donc c'est bien.

Et nous sommes d'accord avec cela.

Maintenant, si un utilisateur sélectionne un virement bancaire ou une carte de débit, il sera redirigé vers une autre page où il devra traiter cette méthode de transaction.

Donc vous pouvez également venir ici, si cela ne vous dérange pas, cliquez sur Design, vous pouvez venir ici et dupliquer cette page et créer un écran de basse fidélité pour cela, vous pouvez appeler cela virement bancaire.

Et vous pouvez avoir n'importe quel élément que vous voulez avoir ici.

Et vous pouvez continuer à avoir la page de carte de débit également où l'utilisateur ira lorsqu'il sélectionnera l'option de carte de débit ici.

Mais ce n'est pas le point ici.

Donc je vais enlever cela.

Maintenant, nous avons terminé avec la tâche de financement du portefeuille.

Donc la tâche suivante est la tâche d'investissement.

Et cette tâche se produira à partir de la page d'accueil.

C'est lorsque les utilisateurs vont à la page d'accueil qu'ils cliqueront sur cette option d'investissement ici pour qu'ils aillent à la page d'investissement afin qu'ils puissent investir en actions.

Donc à partir de cette page d'accueil ici, maintenez le clic sur le prototype.

À partir de cette page d'accueil ici, je vais sélectionner ce bouton d'investissement ici.

Et je vais créer une connexion à cette page.

Et c'est bien.

Donc lorsque l'utilisateur clique sur ce bouton d'investissement dans la section de navigation là sur la page d'accueil, cet utilisateur sera redirigé vers cette page ici, qui est la page d'investissement où l'utilisateur verra la liste des actions dans lesquelles il peut investir et son portefeuille d'actions.

Donc si un utilisateur vient à cette page d'investissement, la tâche que nous voulons qu'il accomplisse est d'investir. Donc disons que l'utilisateur est intéressé par cette action ici et que l'utilisateur souhaite investir dans cette action, je vais la sélectionner, puis je vais créer une connexion comme ceci.

Cela signifie que lorsque l'utilisateur clique sur cette action, l'utilisateur ira à la page de détails de l'action pour cette action.

Et lorsque l'utilisateur est d'accord avec les détails de l'action qu'il voit ici, l'utilisateur cliquera sur le bouton InVEST ici.

Et l'utilisateur ira ici à cette autre page, où l'utilisateur devra entrer le montant qu'il souhaite investir dans ces actions.

Et lorsque l'utilisateur entre le montant qu'il souhaite investir, l'utilisateur cliquera sur le bouton Suivant, qui amènera l'utilisateur à cette page ici où l'utilisateur verra un résumé de l'investissement que l'utilisateur est sur le point de faire.

Et lorsque l'utilisateur est d'accord avec tout ce que l'utilisateur voit ici, l'utilisateur cliquera sur Continuer et l'investissement, qui est la tâche, sera terminé.

Donc ce que nous avons ici, c'est que nous avons terminé la création d'écrans de basse fidélité.

Et nous pouvons présenter des écrans de basse fidélité pour des tests maintenant.

Alors comment faisons-nous cela, je vais venir ici, je vais sélectionner l'écran de démarrage, car c'est là que tout le voyage commence, n'est-ce pas ? Lorsque je le sélectionne, je vais venir ici, et je vais cliquer sur ce bouton de présentation ici pour avoir cela présenté, un nouvel onglet sera lancé pour cela.

Donc je vais venir ici, et je vais cliquer sur l'option Plein écran ici, vous pouvez voir où se trouve le curseur de ma souris.

Maintenant, c'est la présentation que je vais présenter aux parties prenantes, qui sont mes employeurs ou les propriétaires de l'application.

Donc je vais prendre cette présentation à eux pour démontrer l'expérience utilisateur que j'ai conçue qui permettra aux utilisateurs d'accomplir leur tâche sur cette application.

Donc je vais partir d'ici, je vais cliquer sur cet écran.

Et je vais expliquer aux parties prenantes à ce stade que les utilisateurs existants peuvent cliquer sur se connecter.

Et les nouveaux utilisateurs peuvent cliquer sur s'inscrire.

Donc je vais démontrer cela en tant que nouvel utilisateur, je vais dire d'accord, lorsqu'ils cliquent sur s'inscrire, ils viendront ici, entreront leur email, leur numéro de téléphone et leur mot de passe.

Lorsque ils cliquent sur le bouton S'inscrire, ils devront entrer un code de vérification.

Et lorsqu'ils sont vérifiés, ils iront à la page d'accueil.

Maintenant, s'ils veulent investir, cela signifie qu'ils doivent financer le compte.

Donc je vais cliquer sur le bouton de financement du compte pour leur démontrer que dans ce cas, nous avons maintenant une méthode de virement bancaire et une méthode de carte de débit, je vais dire d'accord, si les utilisateurs continuent à financer pour financer les comptes, alors cela signifie que les utilisateurs sont prêts à investir.

Donc pour qu'ils investissent, ils viendront ici et cliqueront sur le bouton InVEST là.

Lorsque nous utilisons ces utilisateurs, l'utilisateur verra la liste des actions dans lesquelles il peut investir.

Et si l'utilisateur choisit d'investir dans l'une des actions, utilisons celle-ci par exemple, il cliquera dessus, lorsqu'il cliquera dessus, l'utilisateur sera redirigé vers la page de détails de l'action pour cette action.

Et lorsque l'utilisateur est satisfait des détails de l'action, l'utilisateur cliquera sur le bouton InVEST ici, puis l'utilisateur devra entrer le montant qu'il souhaite investir dans ces actions, lorsque l'utilisateur le fait, l'utilisateur cliquera sur le bouton Suivant ici.

Et lorsque l'utilisateur clique sur ce bouton suivant, l'utilisateur verra un résumé de l'investissement qu'il est sur le point de faire.

Et si l'utilisateur est satisfait, l'utilisateur clique sur le bouton Continuer ici et l'investissement sera réussi.

Et lorsque l'utilisateur a terminé, l'utilisateur clique sur retour à l'accueil, et l'utilisateur sera redirigé vers la page d'accueil.

Donc une présentation comme celle-ci révélera vraiment l'expérience que l'utilisateur aura en utilisant ce produit.

Donc si votre prototype de basse fidélité a été accepté par les parties prenantes, cela signifie qu'il est maintenant temps pour vous d'aller de l'avant et de commencer le processus de conception de votre prototype de haute fidélité, qui sera comme la version de design réelle de votre application, ou la version de design finale de votre application.

Et c'est à ce stade que vous vous concentrerez sur des thèmes comme les couleurs, la typographie, les effets, les composants, la bibliothèque de styles, et tout cela.

Donc dans ce cours, supposons que nos parties prenantes nous ont donné un laisser-passer pour ces écrans de basse fidélité et qu'elles sont d'accord avec cela.

Supposons que nos parties prenantes veulent maintenant que nous allions de l'avant pour concevoir la version réelle de l'application.

Alors que faisons-nous ? Cliquons sur Design.

Venez ici.

Créez une nouvelle page et appelez cela Hi Fi deleting.

Donc à ce stade, j'aimerais souhaiter la bienvenue à tout le monde dans la partie la plus intéressante, qui est la partie où nous commençons à construire nos designs à partir de zéro.

Donc tout d'abord, je vais créer ma bibliothèque de styles.

Et je vais commencer par créer mes styles de typographie.

Donc je vais le faire en utilisant la version Material Design pour me guider.

Donc je vais venir ici, je vais aller sur material.io.

Et lorsque je viens ici, je clique sur Design.

Lorsque je clique sur Design, je viens ici sur le côté gauche, et je vais cliquer sur typographie, puis je vais sélectionner le système de types.

Et lorsque je fais cela, je vais venir ici.

Donc la première chose que je vais définir est la police ou la famille de polices que je veux utiliser pour ce projet.

Pour ce projet, j'aimerais utiliser la famille de polices rubric.

Donc je vais venir ici, et je vais la sélectionner ici pour les titres et les sous-titres, puis je vais la sélectionner ici pour le corps et les légendes, comme ceci.

Maintenant, je vais utiliser les données ici dans cette échelle de types pour créer mes styles de typographie.

Maintenant, commençons par créer des textiles de titre pour ce projet.

Maintenant, puisque c'est un projet d'application mobile, je ne vois pas la nécessité d'avoir un texte de titre un, même pour le texte de titre deux.

Donc je vais opter pour le textile de titre quatre comme mon propre textile de titre un, juste parce que c'est un design d'application mobile et que cette taille de texte va paraître trop grande pour une application mobile.

Donc je vais venir ici et cliquer sur titre quatre et je vais utiliser ces détails ici.

Donc je vais venir ici, je vais créer un cadre ici où mes textiles vont rester, donc je vais dire titre un, dupliquer cela, dire titre un gras.

Donc dire titre deux maintenant, c'est moi qui prépare tout avant de commencer à appliquer les détails que j'ai obtenus ici à partir du générateur d'échelle de types.

Donc je vais venir ici, dupliquer cela et voir titre deux gras et venir ici, avoir cela, voir un titre trois.

Et cela va être titre trois gras, et cela va être cela pour mes textiles de titre pour ce projet.

Maintenant, je vais créer mes textiles de corps.

Donc je vais venir ici, préparer cela pour corps grand.

Et je vais avoir cela comme un textile corps grand gras, puis je vais opter pour corps petit ici.

Et je vais avoir cela comme Bodhi petit gras.

Maintenant, c'est mon propre style.

Et c'est mon propre modèle.

Je ne dis pas que c'est la norme.

Je fais simplement cela parce que c'est ce que je ressens qui me donnera le meilleur design.

Maintenant, venez ici.

Cela sera pour mon texte de bouton et j'aurai un texte de légende.

Donc après avoir tout cela, venez ici, sélectionnez le texte de titre un ici.

Et je vais utiliser le textile de titre quatre ici dans Material Design.

Comme je l'ai dit, je vais utiliser cela pour mon textile de titre un.

Donc la famille de polices est définie sur Rubik, la largeur est définie sur Normal, qui est régulière, la taille est définie sur 35.

Et l'espacement des lettres est défini sur 0,25 px.

Donc je vais de l'avant et je vais avoir tout cela défini.

Donc je vais venir ici, garder cela sélectionné, comment définir cela sur Rubik et comment définir cela sur régulier et pour l'espacement des lettres, venir ici et définir cela sur 0,25 px, et pour la taille, définir cela sur 35 px.

Maintenant, je vais utiliser ces mêmes paramètres pour ce texte de titre un pour le texte de titre un gras, la seule différence sera que cela va être un texte en gras et cela va être un texte régulier.

Donc je vais sélectionner cela.

Maintenant, pour définir cela sur 35.

Je vais définir cela sur Rubik et je vais le garder défini sur gras comme je l'ai dit, et je vais faire 0,25 px et c'est bien, donc je vais de l'avant et faire de même pour le titre deux, le titre trois, le corps grand, le corps grand courbé jusqu'à la légende.

Maintenant, pour le texte de titre deux ici, je vais venir ici dans Material Design et je vais utiliser le textile de titre cinq pour mon propre textile de titre deux.

Donc la famille de polices est Rubik, le poids est normal, la taille est 24.

Donc je vais définir la taille sur 24.

Et pour les poids, je vais le garder défini sur régulier et pour la famille de polices.

Je vais le garder défini sur Rubik.

Maintenant, les affaires de lettres zéro px, donc je peux simplement le garder défini à 0% ou simplement venir ici et taper zéro px, et c'est bien.

Je vais utiliser le même paramètre pour le titre deux gras, mais la différence sera que cela va être un texte en gras, donc je vais venir ici, je vais définir cela sur 24.

Envoyer cela à Rubik.

Garder cela défini à zéro, garder l'espacement des lettres défini à zéro, puis garder cela défini en gras.

Donc je peux avoir cela.

Maintenant, pour mon texte de titre trois.

Si je viens ici, j'utiliserai le textile de titre six ici pour mon propre texte de titre trois.

Donc je vais garder cela défini sur Rubik, cela défini sur moyen, la taille définie sur 20.

Donc je vais garder la taille définie sur 20.

Et pour cela, je vais le garder défini sur moyen et à l'extérieur de cela sur Rubik.

Ensuite, pour l'espacement des lettres, il est défini sur 0,15 px.

Donc je vais venir ici, je vais dire 0,15 px.

Et cela va être bien.

Ensuite, pour le titre trois gras, j'aurai la même phrase là.

Mais la seule différence, comme d'habitude, sera que cela va être un texte en gras.

Donc je vais venir ici, à l'extérieur de cela sur rubik cube assets board.

Et pour la taille, je pense que c'est 20 px, et pour l'espacement des lettres, c'est 0,15 px.

Donc je vais taper cela.

Et je vais garder cela défini sur 20, comme ceci.

Et c'est bien.

Donc pour le texte de corps grand, venez ici et utilisez le textile de corps un ici, vous pouvez voir que la taille est de 16 px, la largeur est normale, et l'espacement des lettres est de 0,5 px.

Donc je vais venir ici, garder cela ici, je vais définir l'espacement des lettres sur 0,5 px, définir les poids sur régulier et définir cela sur 16.

Et définir cela sur Rubik et c'est bien, pour le corps grand, vous savez déjà quoi faire, comment définir cela sur 16, définir cela sur 0,5 px, définir cela sur gras, puis définir cela sur Rubik.

Et c'est tout.

Donc je vais de l'avant et je vais avoir mon texte de corps petit ici.

Et si je viens ici et dans le design matériel, j'utilise le textile de corps deux ici pour le design matériel.

Donc je vais le garder défini sur normal, définir la taille sur 14 et l'espacement des lettres sur 0,25 px.

Donc je vais avoir cela défini sur 0,25 px, je vais définir cela sur 14, définir cela sur Rubik, et je vais définir cela sur régulier.

Donc je vais avoir cela ici.

Et cela va être 14 0,25.

Et cela va être Rubik.

Et c'est trié.

Maintenant, pour le texte du bouton.

Je vais garder cela ici.

Si vous venez ici, vous verrez que le texte du bouton ici a une taille de 14 px et une valeur d'espacement des lettres de 1,25 px avec un poids défini sur moyen.

Maintenant, ici, le design matériel pour le texte du bouton est tout en majuscules.

Mais dans mon cas, je ne veux pas que mon texte reste en majuscules.

Et je pense que dans la version trois du design matériel, le texte du bouton n'est pas représenté en majuscules.

Donc je vais de l'avant et je vais avoir cela défini sur 14.

Et l'espacement des lettres est assez grand.

Donc je vais avoir cela défini sur 1,25 px.

Et cela sera défini sur moyen avec la famille de polices définie sur Rubik.

Et c'est ce que nous avons ici.

Maintenant, pour le texte de légende, il sera défini sur 12 px avec une valeur d'espacement des lettres de zéro points pour PX et un poids normal.

Donc je vais venir ici, je vais garder cela ici.

Et maintenant, j'ai cela défini sur régulier, cela sera 0,4 px.

Et cela sera défini sur 12, comme ceci.

Et la famille de polices sera définie sur Rubik.

Donc cela va être un texte de légende.

Donc à ce stade, ce que je vais faire, c'est que je vais de l'avant et je vais enregistrer tous ces styles que j'ai créés dans ma bibliothèque de styles.

Et je pense que nous savons tous comment faire cela maintenant.

Donc je vais accélérer ce processus, je vais sélectionner cette colonne ici, et je vais l'appeler titre un, je vais accélérer cette partie du cours et revenir.

Donc c'est tout, j'ai créé et enregistré le textile dont j'aurai besoin pour ce projet.

Donc je vais venir ici et je vais renommer ce cadre styles de typographie, juste pour une meilleure documentation, vous savez, maintenant lorsque je clique sur ma toile vide, vous verrez que j'ai tous mes textiles enregistrés ici.

Maintenant, allons-y et créons des styles de couleur.

Nous allons nommer ce cadre styles de couleur.

Je vais enregistrer cela maintenant et créer mes styles de couleur en fonction de ma viande.

Je veux utiliser le Guide de Design Matériel pour créer mes styles de couleur.

Et c'est parce que vous pouvez en fait faire cela.

Vous pouvez créer vos styles de couleur, vos textiles, vous pouvez créer n'importe lequel de vos styles sans utiliser le Guide de Design Matériel, et vous pouvez en fait les mélanger, vous pouvez créer vos textiles avec le Guide de Design Matériel et avoir vos styles de couleur créés à partir de votre propre inspiration.

Donc, voici, j'aimerais avoir une couleur de fond ici.

Donc je vais utiliser cette couleur de fond, ou avoir un texte rester en haut ici pour indiquer que c'est pour ma couleur de fond, je vais sélectionner ce texte et je vais utiliser l'un de mes textiles enregistrés.

Donc je vais opter pour le texte de corps grand.

Donc pour mon style de couleur de fond, j'aimerais utiliser cette couleur.

Et c'est bien.

Zoomez sur ce point.

Pour que nous puissions voir clairement, et après avoir une couleur de fond, je vais dupliquer cela et utiliser cela ici, j'aimerais avoir une couleur de surface.

Et pour ma couleur de surface, j'aimerais que ce soit cette couleur ici, vous pouvez utiliser n'importe quelle couleur de votre choix, c'est mon propre choix.

Donc je vais dupliquer cela, et avoir cela ici.

Et cette fois, j'aimerais avoir une colonne de texte de surface, vous pouvez appeler cela une couleur sur surface, en fait.

Donc j'aimerais avoir une couleur de texte de surface, qui sera la couleur que j'utiliserai pour écrire du texte sur la couleur de surface.

Donc j'aimerais que ce soit blanc.

En fait, je sais que cela peut ne pas être visible.

Mais j'aimerais que ce soit blanc comme ceci.

Donc je vais dupliquer cela.

Maintenant, pour que cela soit visible, sélectionnez-le et ajoutez un effet d'ombre.

La couleur suivante que nous allons utiliser s'appelle la colonne de texte hors ligne.

Et c'est mon propre choix, j'aimerais avoir une autre couleur pour mon texte.

Donc j'utiliserais cette nuance pour ma couleur de texte hors ligne.

Et dupliquez cela.

Et j'aurai une autre couleur ici, qui sera ma colonne d'erreur.

Et évidemment, cela sera une couleur rouge.

Donc j'utiliserai cette nuance de rouge pour cela, puis j'aurai cela ici.

Et j'aimerais avoir une deuxième couleur de surface.

Et j'aimerais que cette couleur soit comme ceci.

Et c'est bien.

Donc j'ai sélectionné tous les styles de couleur que je voudrais pour ce projet.

Donc je vais de l'avant et je vais enregistrer tous ces styles dans ma bibliothèque de styles.

Et je pense que nous savons tous comment faire cela.

Donc je vais sélectionner cette colonne ici.

Et je vais appeler cela couleur de fond, je vais accélérer ce processus et je vais revenir.

Donc comme vous pouvez le voir, j'ai terminé la création et l'enregistrement de mes styles de couleur.

Et ce sont mes styles de couleur ici.

Donc c'est réglé.

La prochaine chose que je voudrais que nous fassions est d'aller de l'avant et de créer le style de grille que nous allons utiliser pour ce projet.

Pour ce faire, je vais utiliser une disposition mobile, je vais utiliser la disposition iPhone pattern Promax, donc je vais avoir la disposition iPhone 10 Promax ici, je vais la renommer en style de grille mobile, zoom sur ce point, je vais la garder sélectionnée, puis je vais ajouter une propriété de grille de disposition à celle-ci, comme ceci, puis j'aurai cette grande grille de colonnes.

Maintenant, j'ai le compte avant que je vais avoir la marge être 16, avoir la gotta être 16.

Et pour la couleur, je vais opter pour quelque chose comme ceci.

Maintenant, nous sommes réglés pour la grille de colonnes.

Donc je vais de l'avant et ajouter une propriété de grille de lignes à celle-ci.

Je vais la garder sélectionnée, venir ici.

Maintenant, pour ajouter une autre propriété de grille, je vais la définir comme une propriété de grille de lignes, comme ceci, définir le compte à 800.

Et définir l'étirement à centre, définir la propriété de gouttière à zéro, venir ici, je vais définir la propriété de hauteur à huit.

Et c'est parce que je veux que l'espace entre les lignes soit de huit px, puis venir ici maintenant changer la couleur en quelque chose comme ceci.

Et cela va être bien pour moi.

Donc je vais garder cela sélectionné.

Venez ici.

Et je vais enregistrer ce style de grille comme mon style de grille pour ce projet.

Donc je vais cliquer sur style là.

Et je vais appeler cela style de grille mobile.

Vous pouvez l'appeler comme vous voulez.

Maintenant, nous avons trois styles enregistrés dans notre bibliothèque de styles, nous avons nos textiles, nous avons nos styles de couleur, et nous avons des styles de grille.

Donc j'aimerais que nous allions de l'avant et créions des styles d'ombre pour ce projet.

Pour ce faire, je vais venir ici et avoir un cadre ici.

Puis je vais renommer cela en styles d'ombre, lorsque je l'ai renommé en styles d'ombre, j'aurai quelques rectangles à l'intérieur de ce cadre.

Et le rectangle est juste pour afficher les effets d'ombre et comment cela va ressembler.

Donc je vais le garder sélectionné.

Je vais faire en sorte que le rayon de coin ait une valeur de huit.

Je vais lui donner cette colonne.

Et je vais dupliquer cela et avoir cela ici.

Je vais juste avoir trois styles d'effet d'ombre.

Donc je vais garder cela là et venir ici dans le design matériel.

Maintenant, allez à la page d'accueil, cliquez sur l'icône de recherche là et je vais taper ombre.

Lorsque j'appuie sur la touche entrée, j'ai ces résultats qui s'affichent.

Donc je vais venir ici, je vais cliquer sur ce lien ici, qui va me mener à la version un du design matériel, ours, utiliser les recommandations qu'ils ont là pour créer des styles d'ombre.

Donc je vais cliquer sur ce lien.

Maintenant, venez ici, et je vais utiliser ces recommandations d'ombre qui sont sous la section sketch.

Donc je veux opter pour le tableau d'élévation 1 DP ici, je vais faire défiler vers le bas, et je vais utiliser le tableau d'élévation 16 DP.

Donc je vais utiliser ces valeurs ici pour créer mes styles d'ombre.

Donc je vais créer une ombre clé et une ombre ambiante.

Maintenant, sur cette ombre clé, vous pouvez voir que nous avons deux types de styles d'ombre clé.

Nous avons le style d'ombre clé Umbra et le style d'ombre clé Penumbra.

Donc je vais créer un style d'ombre clé Umbra d'abord, et pour cela, la valeur d'opacité est définie à 14.

Donc je vais venir ici, garder cela sélectionné, je vais ajouter une propriété d'effet, et je vais définir la valeur d'opacité ici à 14, et la propriété X est définie à zéro avec la propriété Y définie à 16.

Donc venir ici pour la propriété Y, définir cela à 16, la propriété X est déjà définie à zéro.

Maintenant, les propriétés de bloc 24, et les propriétés de propagation deux.

Donc pour la propriété de bloc, définir cela à 24.

Et pour la propriété de propagation, définir cela à.

Et ici, nous avons notre effet d'ombre clé Umbra.

Donc je vais de l'avant et créer pour le style d'ombre clé Penumbra et les effets d'ombre MPs.

Donc je vais accélérer ce processus aussi, et je vais revenir quand j'aurai terminé.

Donc ce sont les styles d'ombre que j'ai créés.

Donc je vais de l'avant et je vais les enregistrer dans ma bibliothèque de styles, la façon de faire est assez facile.

Sélectionnez ce rectangle là, puis venez ici dans la section Effets, cliquez sur cette icône de style là.

Et vous pouvez l'appeler comme vous voulez, l'appeler ombre légère, l'appeler ombre moyenne, et l'appeler ombre de pointe et c'est bien.

Jusqu'à présent, j'ai créé mes textiles, j'ai créé mes styles de couleur, j'ai créé mes styles d'effets et j'ai créé mes styles de grille.

Maintenant, à ce stade, nous sommes prêts à commencer à concevoir les composants de notre application.

Donc j'aimerais que nous allions de l'avant et commencions cela.

Donc la méthode que j'aimerais utiliser dans la conception de nos composants sera la suivante, j'aimerais que nous concevions nos composants en fonction de la tâche de l'utilisateur de cette application.

Maintenant, la première tâche que j'aimerais que nous examinions est la tâche d'authentification.

Donc pour cette tâche, j'aimerais que nous concevions tous les composants qui seront nécessaires pour accomplir cette tâche.

Donc venons ici, ayons un texte ici, je vais zoomer à 200.

Et j'aurai un texte ici, ce sera la section où j'aurai tous mes composants d'authentification.

Donc je vais venir ici, je vais sélectionner ce textile pour avoir cela là.

Donc pour la tâche d'authentification, nous avons le formulaire de connexion et le formulaire d'inscription.

Donc pour le formulaire de connexion, quels composants avons-nous là, nous avons le champ de saisie, et nous avons le bouton.

Donc je vais de l'avant pour concevoir le champ de saisie.

Donc je vais venir ici, je vais simplement dire, entrées.

Maintenant, cela va être mon espace réservé.

Donc je vais venir ici et je vais utiliser le texte de corps petit pour cela.

Et je vais le garder sélectionné, puis créer une disposition automatique dessus.

Maintenant, lorsque je crée une disposition automatique, et que je la définis, ajoutez la couleur de remplissage, comme ceci, puis je vais simplement l'étirer à ce point.

Maintenant, je vais toujours garder cette disposition automatique sélectionnée, venir ici et m'assurer que le contenu de la disposition automatique est aligné à gauche.

Et c'est bien.

Maintenant, pour la propriété de rayon de coin, je vais lui donner une valeur de rayon de coin de huit pour avoir cela maintenant, venir ici et je vais renommer cela en champ de saisie.

Maintenant, pendant que cela est ici, je vais sélectionner la couleur de fond pour le champ de saisie lui-même, puis le texte ici, je vais lui donner cette couleur de texte hors ligne ici.

Et j'aimerais que ce champ de saisie ait une couleur de trait, qui va être la couleur du texte hors ligne également.

Donc je peux avoir cela.

Maintenant, c'est réglé, nous avons terminé la création d'un champ de saisie.

Ce champ de saisie est ce que nous allons réutiliser pour la collecte des emails, des mots de passe, des numéros de téléphone, donc je vais de l'avant, le garder sélectionné et venir ici et cliquer sur Créer des composants.

Maintenant, la prochaine chose à créer sera nos composants de bouton.

Donc je vais venir ici et j'aurai ce texte ici et pour ce texte, je vais venir ici maintenant pour sélectionner le texte du bouton pour cela. Maintenant, je vais garder le texte sélectionné et je vais créer une disposition automatique sur le texte.

Maintenant, pour la disposition automatique du bouton, assurez-vous que la valeur de rembourrage autour des éléments est définie à 16.

Maintenant, même chose pour cela, la valeur de rembourrage autour des éléments pour ce champ de saisie est également 16.

Donc prenez note de cela.

Maintenant, pour ce composant de bouton, je vais venir ici maintenant et lui donner cette couleur, qui est la couleur de surface.

Maintenant, pour le texte, je vais venir ici et lui donner la couleur de texte de surface, qui est blanche.

Maintenant, je vais venir ici, je vais sélectionner la disposition automatique du bouton, venir ici, maintenant aligner le contenu de cette disposition automatique pour rester au centre.

Toujours le garder sélectionné, venir ici et lui donner un rayon de coin de huit.

Et voici nos composants de bouton créés.

Donc je vais venir ici, renommer cela en bouton, puis venir ici et cliquer sur Créer des composants.

Et voici nos composants de bouton créés.

Maintenant, le prochain composant que j'aimerais que nous créions ici sous la tâche d'authentification sera le champ de saisie, mais les utilisateurs devront saisir leur code de vérification, ce champ de saisie ne ressemblera pas à cela, il sera différent.

Donc j'aimerais que nous allions de l'avant et fassions cela.

Donc je vais venir ici, avoir ce texte ici, disons simplement zéro.

Et je vais garder le nombre sélectionné, puis aller de l'avant et créer une disposition automatique sur ce nombre.

Maintenant, je vais garder la disposition automatique que je viens de créer sélectionnée, venir ici et aligner le contenu de la disposition automatique pour rester au centre de la disposition automatique, puis je vais venir ici et ajouter la couleur de remplissage à cette disposition automatique.

Maintenant, je vais venir ici, je vais sélectionner le crayon.

Et je vais simplement dessiner une ligne horizontalement, puis je vais cliquer sur Terminé.

Et cette ligne que je viens de créer ici sera attrapée et prise dans cette disposition automatique qui a ce nombre zéro.

Et vous pouvez voir que la ligne est placée ici.

Maintenant, ce que je vais faire est ceci, je vais venir ici, à l'intérieur de cette disposition automatique, maintenant je vais sélectionner cette ligne droite que j'ai créée, qui est appelée vecteur un ici, lorsque je la sélectionne, je vais venir ici et maintenant changer sa valeur de redimensionnement horizontal de largeur fixe à remplir le conteneur.

Pour que je puisse avoir cela maintenant, j'ai un problème ici, la valeur de remplissage autour de la valeur pour cette disposition automatique est vraiment grande.

Donc je vais sélectionner la disposition automatique et je vais la définir à huit.

Lorsque je la définis à huit, elle va ressembler à ceci.

Maintenant, j'aimerais qu'elle soit comme ceci, car si je place ces composants sur mon écran, je vais probablement augmenter la largeur.

Et comme vous pouvez le voir, lorsque j'augmente la largeur, le nombre zéro reste simplement comme il est.

Mais la ligne elle-même s'étend à travers le conteneur, ce qui est en fait ce que je veux.

Donc c'est bien, maintenant, maintenant, puisque le code de vérification sera un code de vérification à quatre chiffres, j'aimerais que ce composant aille à quatre endroits.

Je vais de l'avant et je vais faire cela.

Donc je vais garder ce composant sélectionné.

Et je vais créer une autre disposition automatique par-dessus, comme ceci.

Maintenant, cette disposition automatique que je viens de créer s'appelle prim à out, la garder sélectionnée, venir ici et maintenant définir sa propriété de direction à direction horizontale.

Lorsque je définis cela à direction horizontale, je vais venir ici et je vais définir la valeur de remplissage autour des éléments à zéro, comme ceci.

Maintenant, venir ici et maintenant étendre le cadre à la disposition automatique.

Juste pour que je puisse accéder au cadre un Auto Layout à l'intérieur.

Maintenant, lorsque je sélectionne ce cadre un Auto Layout à l'intérieur, je vais le dupliquer.

Et vous pouvez voir que je l'ai dupliqué à quatre endroits.

Maintenant, je vais revenir ici et sélectionner le cadre deux Auto Layout, et maintenant définir la valeur d'espacement entre les éléments à zéro, juste pour avoir cela maintenant, vérifions pour voir si cette Auto Layout elle-même est une Auto Layout réactive.

Donc je vais la garder sélectionnée et venir ici et essayer de l'étendre.

Et comme vous pouvez le voir, si je l'étend horizontalement, la disposition elle-même ne répond pas à cette extension.

Donc je vais Ctrl Z pour revenir à ce que nous étions avant.

Et à ce stade, ce que je vais faire est ceci, je vais sélectionner l'Auto Layout individuelle à l'intérieur de cette Auto Layout principale, je vais sélectionner celle-ci, qui est le cadre un, venir ici maintenant pour définir sa valeur de redimensionnement horizontal à remplir le conteneur.

Et je vais faire cela pour tous, comme ceci.

Maintenant, lorsque je sélectionne le cadre deux Auto Layout maintenant, vous verrez que c'est une Auto Layout réactive, ce qui est ce que je veux.

Donc je vais garder cela ici, je vais renommer cela en entrées de vérification, le garder sélectionné, venir ici et cliquer sur Créer un composant et c'est trié.

Donc à ce stade, j'aimerais que nous allions de l'avant et créions nos écrans d'authentification.

Donc créons une section pour cela.

Pas une page en fait.

Je vais dire des écrans d'authentification, des écrans Hi Fi d'authentification comme ceci.

Donc je vais venir ici, j'aurai un écran iPhone 13 Promax ici, et je vais renommer cela, assurez-vous de renommer votre mise en page à ce stade.

Donc je vais renommer cela en splash.

Et nous savons tous ce qu'est l'écran de démarrage.

Oui, c'est l'écran que vous voyez lorsque vous lancez une application, venez ici, je vais changer la couleur de l'écran de démarrage en celle-ci.

Et sur l'écran de démarrage, j'aimerais que nous ayons le logo de la marque.

Et le logo de cette marque est vraiment facile.

C'est juste VXS t, comme ceci.

Donc je vais garder le texte sélectionné, venir ici, maintenant opter pour le titre deux gras, et je vais travailler avec cela.

Donc je vais garder ce texte sélectionné, venir ici et l'aligner horizontalement et l'aligner verticalement.

Et c'est bien.

Donc c'est notre écran de démarrage.

Donc après l'écran de démarrage, l'écran suivant à créer sera l'écran où l'utilisateur devra sélectionner l'action d'authentification.

Donc je vais dupliquer l'écran de démarrage, je vais enlever cela.

Et je vais changer la couleur de cet écran maintenant en celle-ci, puis venir ici et le renommer en sélection.

Vous pouvez l'appeler comme vous voulez.

Maintenant, ici, apportez le composant bouton, allez dans mon panneau Assets, apportez cela et alignez-le au centre horizontalement, maintenant étendez-le à ce point.

Maintenant, pour que je l'étende correctement, j'aurai besoin d'appliquer mon style de grille sur cette mise en page.

Donc je vais venir ici et maintenant appliquer mon style de grille mobile ici.

Pour que je puisse utiliser cela comme mon guide pour étendre correctement ces boutons.

Donc j'aimerais que le bouton prenne deux grilles de colonnes.

Et c'est ce que j'ai ici.

Donc je vais venir ici, je vais changer le texte en connexion.

Et je vais apporter un autre composant bouton ici.

Et je vais changer cela en commencer.

Maintenant, je vais venir ici, sélectionner ce composant bouton et changer sa couleur en celle-ci pour faire une différence.

Donc je vais garder cela ici.

Et je vais garder cela ici.

Et c'est bien.

Donc je vais sélectionner cela, et maintenant l'aligner au centre verticalement.

Et je vais placer ce bouton Commencer juste sous ce bouton de connexion.

Mais je vais utiliser la grille de lignes pour déterminer la valeur de l'espace, j'ai 1234 lignes ici, et en quatre endroits, cela fait 32.

Donc j'ai un espace de marge inférieure de 32 px entre ce bouton de connexion et le bouton Commencer.

Maintenant, je pense que la grille de lignes n'est pas vraiment visible.

Donc je vais venir ici, je vais aller à mon style de grille de lignes enregistré, je vais cliquer sur Modifier le style, sélectionner les lignes et augmenter l'opacité de cette couleur à 20.

Donc c'est trié, cet écran est trié.

Maintenant, si l'utilisateur clique sur le bouton de connexion ici, cela signifie que l'utilisateur ira à la page de connexion, n'est-ce pas.

Donc je vais la créer maintenant.

Donc zoomons.

Prenons cela.

Et cliquons sur les calques et changeons le nom de ce cadre en page de connexion.

Et si vous venez ici, la seule différence que nous allons avoir ici est le fait que nous allons avoir un champ de saisie supplémentaire pour collecter le numéro de téléphone de l'utilisateur.

Donc cela signifie que je vais enlever cela pour l'instant, enlever cela pour l'instant.

Et j'aurai un autre espace réservé ici, qui va avoir un espace de marge supérieur de 32 px, qui est 1234.

Je vais apporter cela ici et apporter un champ de saisie, qui va rester ici, puis étirer le champ de saisie à ce point.

Maintenant, j'utiliserai ce deuxième champ de saisie pour collecter le numéro de téléphone de l'utilisateur.

Et je vais changer l'espace réservé ici en numéro de téléphone, puis j'utiliserai ce champ de saisie pour collecter le mot de passe de l'utilisateur, comme ceci.

Maintenant, je vais de l'avant et je vais apporter un bouton ici.

Et ce bouton va avoir un espace de marge supérieur de 48 px, il va être 123456.

Je vais apporter cela ici.

Et je vais changer le texte ici en s'inscrire.

Donc je vais zoomer, je vais garder cela sélectionné, étirer cela à ce point et étirer cela à ce point.

Et c'est trié, donc nous avons créé un écran de connexion et notre écran d'inscription.

Maintenant, lorsque les utilisateurs cliquent sur le bouton S'inscrire ici, les utilisateurs seront redirigés vers cette page où ils devront entrer le code de vérification qui a été envoyé à leur numéro de téléphone.

Donc nous allons de l'avant pour créer cette page.

Donc je vais venir ici et renommer cela en page de vérification.

Et je vais enlever tout cela.

Après le logo, j'aurai un rectangle qui va être aussi grand que cela.

J'aimerais que le rectangle soit un rectangle de 48 px de haut, comme ceci, zoomer, ou avoir cela ici et étirer le rectangle à ce point.

Et j'aimerais que le rectangle ait cette couleur de fond.

Maintenant, sur ce rectangle, j'aurai un texte qui dit qu'un code de vérification a été envoyé à, comme ceci.

Donc je vais garder ce texte ici.

Et je vais utiliser un texte de corps petit pour cela, puis aligner le texte au centre horizontalement, puis je vais garder ce texte aligné au centre horizontal de la page, comme ceci.

Et c'est bien.

Et c'est bien.

Donc je vais de l'avant et apporter ce composant d'entrée pour le code de vérification.

Mais avant de faire cela, changeons la couleur de ce texte.

Donc je vais venir ici, et je vais lui donner cette couleur.

Ensuite, je vais cliquer sur le panneau Assets maintenant et je vais apporter ce composant.

Maintenant, pour ce composant, je vais le garder sélectionné. Tout d'abord, je vais changer la couleur de ce composant, sélectionner les éléments individuels à l'intérieur du composant.

Et maintenant, changer ceux-ci en la couleur de fond que nous avons.

Comme ceci.

Et c'est bien.

Maintenant, pour les lignes que nous avons, je vais changer la couleur de toutes ces lignes en celle-ci.

Et pour les nombres.

Je vais changer la couleur des nombres en celle-ci.

Et c'est bien.

Donc je vais le garder sélectionné.

Maintenant, augmenter la largeur à ce point.

Donc zoomons.

Donc maintenant, nous pouvons organiser cela correctement.

Donc je vais garder cela ici et comment faire pour que ces points s'alignent.

Comme ceci.

Donc j'aurai un texte de remplacement ici.

Qui va dire entrer le code de vérification, comme ceci.

Et maintenant, changer la couleur de ce texte en celle-ci.

Donc allons-y, et changeons la couleur de ce texte de libellé que nous avons ici en celle-ci, changeons cela en celle-ci, venons ici, changeons cela en celle-ci et changeons cela en celle-ci.

Maintenant, pour le texte Entrer le mot de passe ici, je vais changer cela aussi.

Et pour le texte Mot de passe oublié, je vais changer cela.

Et c'est bien.

Maintenant, revenons à notre page de code de vérification.

Et faisons en sorte que ce bouton arrive à ce point.

Donc cela va être 123456.

Je vais garder cela ici, et j'ai juste un texte vérifié, comme ceci.

Donc à ce stade, nous avons créé une page de vérification pour notre tâche d'authentification.

Maintenant, lorsque les utilisateurs cliquent sur le bouton Vérifier, nous allons avoir besoin d'une fenêtre contextuelle qui s'affichera à l'écran pour informer les utilisateurs que leur vérification a été réussie.

Maintenant, comment créons-nous cette fenêtre contextuelle ? C'est simple, je vais venir ici, je vais sélectionner le cadre deux maintenant pour créer une fenêtre contextuelle comme ceci.

Maintenant, la raison pour laquelle je crée cela ici est pour que je puisse utiliser la largeur de cette mise en page pour définir la largeur de cette fenêtre contextuelle.

Maintenant, la manière définitive de faire cela est la suivante, si vous venez ici et que vous sélectionnez cette page, vous verrez que la largeur est de 428.

Maintenant, l'espace de marge sur cette mise en page est de 16.

Ici et 16 ici, ce qui fait 32, n'est-ce pas, donc pour obtenir l'espace du conteneur ici, et utiliser la largeur de l'espace du conteneur pour cela, ma fenêtre contextuelle sera de soustraire 32 de 428.

Donc je vais simplement sélectionner cela, venir ici, je vais dire quatre cent vingt-huit moins trente-deux.

Et cela va être la largeur pour ma fenêtre contextuelle.

Et c'est tout aussi simple que cela.

Donc je vais venir ici et je vais lui donner un rayon de coin de huit, puis je vais de l'avant et je vais lui donner cette couleur de fond, lorsque je lui donne cette couleur de fond, alors je vais avoir un texte à l'intérieur de cette mise en page qui va dire, numéro de téléphone vérifié, ou ce que vous voulez dire.

Donc je vais venir ici et je vais sélectionner un meilleur textile.

Pour cela, je vais opter pour le textile de corps grand comme ceci, aligner cela au centre horizontalement, maintenant apporter le composant bouton ici et avoir un bouton Continuer ici que l'utilisateur cliquera pour aller à la page d'accueil.

Et nous avons terminé la création de cela.

Donc je vais sélectionner cela, aller à l'onglet Calques et appeler cela vérifier la fenêtre contextuelle comme ceci.

Donc cette fenêtre contextuelle va s'afficher lorsque l'utilisateur entre son code de vérification ici et clique sur le bouton Vérifier.

Donc je vais attraper cela maintenant.

Et je vais le placer ici.

Et c'est bien.

Donc à ce stade, j'aimerais dire que nous avons terminé la création de tous les écrans dont nous avons besoin pour notre tâche d'authentification.

Donc cela va nous amener à la tâche suivante de notre application.

Et cette tâche est en fait la tâche de financement où les utilisateurs devront financer leurs portefeuilles ou leurs comptes afin qu'ils puissent investir.

Donc je vais venir ici, et j'aurai cela ici.

Je vais changer cela en comptes de financement.

Donc tous les composants que nous allons avoir seront les composants qui aideront l'utilisateur à financer leurs comptes sur cette application.

Donc allons-y et faisons cela.

Maintenant, ce que vous devez noter est ceci, pour qu'un utilisateur finance le compte, l'utilisateur devra d'abord aller à la page d'accueil de l'application, n'est-ce pas ? Parce que c'est à partir de la page d'accueil que l'utilisateur voit le bouton de financement du compte.

Donc que signifie cela ? Cela signifie que nous devons créer des composants pour la page d'accueil et avoir notre page d'accueil triée d'abord, avant de gérer les différentes routes de compte.

Donc allons-y et faisons cela.

Sur la page d'accueil, le premier composant que nous allons avoir sera un composant de carte qui affichera le solde que nous avons dans notre compte.

Et c'est encore sur ce composant de carte que nous allons avoir le bouton de financement du compte.

Donc allons-y et créons cela.

Donc j'aurai un texte ici qui va dire comptes primaires, je vais garder ce texte sélectionné.

Et je vais définir le style de typographie sur corps petit gras.

Maintenant, zoomons à 200.

Donc c'est tout.

Maintenant, je vais venir ici et je vais créer un autre texte, qui va être comme le numéro de compte ou l'ID du compte, je vais dire cela et je vais le garder sélectionné aussi.

Maintenant, je vais le définir sur corps petit.

Donc maintenant, je vais sélectionner les deux et je vais créer une disposition automatique sur les deux.

Maintenant, lorsque cette disposition automatique est créée, assurez-vous que la valeur de remplissage autour des éléments est définie à zéro pour l'instant.

Maintenant, je vais venir ici, sélectionner ce texte et définir sa valeur de redimensionnement horizontal à remplir le conteneur, puis sélectionner cela ici, et définir sa valeur de redimensionnement horizontal à remplir le conteneur.

Et pour la hauteur, je vais venir ici et définir la propriété de hauteur ici à hauteur automatique pour l'équilibrer.

Maintenant, nous avons cela créé, je vais ajouter une couleur de remplissage à cela.

Maintenant, je vais dupliquer cela, je vais l'apporter ici.

Et je vais changer ce texte en solde du compte, ou disons simplement solde disponible.

En fait, ce n'est pas le solde du compte, je vais dire solde disponible, et ici je vais écrire le solde disponible, c'est bien.

Donc je vais garder cela ici aussi.

Maintenant, ce que je vais faire, c'est sélectionner ces deux dispositions automatiques, et maintenant ajouter une disposition automatique sur les deux pour cette nouvelle disposition automatique que j'ai créée, je vais venir ici et je vais définir la valeur d'espacement entre les éléments à 24.

Et sélectionner cette disposition automatique à l'intérieur de cette nouvelle disposition automatique, et définir sa valeur de redimensionnement horizontal à remplir le conteneur.

Et je vais faire cela pour cela aussi.

Maintenant, je vais sélectionner cette nouvelle disposition automatique et ajouter une couleur de remplissage blanche à celle-ci pour avoir cela maintenant, vous pouvez voir que cela est en fait réactif.

Et c'est bien.

Maintenant, j'aimerais apporter un composant de bouton et le placer à l'intérieur de cette disposition automatique afin que ce bouton soit utilisé pour l'action de financement des comptes.

Donc je vais venir ici et apporter un composant de bouton ici, puis sélectionner ce composant de bouton dans l'arborescence de conception ici, le maintenir et le faire glisser dans cette disposition automatique de cadre sept, qui est notre disposition automatique.

Et vous pouvez voir que le composant de bouton est placé à l'intérieur de cette disposition automatique.

Maintenant, j'aimerais que ce composant de bouton ait un aspect différent.

Donc je vais le garder sélectionné.

Venez ici et je vais définir sa valeur de rembourrage supérieur à huit et sa valeur de rembourrage inférieur à huit.

Donc je peux avoir cela maintenant, changer ce texte en financement des comptes, comme ceci.

Et c'est bien.

Maintenant, je vais aller au plugin d'icônes de plumes.

Et je vais chercher une icône que je vais placer sur le côté droit pour rendre le composant simplement meilleur.

Venez ici, tapez simplement maison.

Je vais apporter cela, en fait, apportez cela ici et remplacez-le ici.

Maintenant, je vais sélectionner tout cela et je vais créer une disposition automatique sur tout cela.

Maintenant, une nouvelle disposition automatique appelée cadre huit a été créée.

Maintenant, à l'intérieur de cette disposition automatique de cadre huit, nous avons cette disposition automatique ici et cette icône.

Donc je vais sélectionner cette disposition automatique maintenant qui est à l'intérieur du cadre.

C'est une disposition automatique.

Et maintenant, définir la valeur de sa propriété de redimensionnement horizontal à remplir le conteneur.

Et je vais laisser cela défini à une largeur fixe, nous savons comment sélectionner le cadre.

C'est une disposition automatique maintenant, qui est une disposition automatique principale maintenant, et je vais venir ici et je vais définir la valeur d'espacement entre les éléments à 24.

Lorsque je fais cela, je vais venir ici et ajouter une couleur de remplissage à cela.

Maintenant, ajoutez la couleur de remplissage à la disposition automatique pour avoir cela.

Et la dernière chose que je vais faire ici est de venir ici et de définir la valeur de remplissage autour des éléments à 16.

Lorsque c'est fait, je vais lui donner un rayon de coin de huit.

Pour avoir cela maintenant, je peux l'étendre à ce point comme ceci.

Et vous pouvez voir que ce composant est réactif.

Et c'est tout.

Donc allons-y et jouons avec les couleurs des éléments sur ce composant.

Donc je vais sélectionner ce texte ici, et je vais lui donner cette couleur, je vais sélectionner cela maintenant et lui donner cette couleur, faire de même pour cela et faire de même pour cela, puis pour cela, je vais sélectionner l'icône elle-même, et c'est bien.

Donc je vais renommer cela en carte de solde, ou comme vous voulez l'appeler.

Je vais le garder sélectionné et maintenant cliquer sur Créer des composants.

Et voici nos composants créés.

Donc sur la page d'accueil, j'aimerais afficher une liste des transactions récentes qui ont été effectuées sur l'application.

Donc allons-y et créons un composant qui servira à cette fin.

Donc je vais venir ici et créer un texte, je vais simplement dire dépôt, venir ici maintenant pour sélectionner le texte de corps grand gras, puis je vais venir ici maintenant pour créer un autre texte et j'aurai cela qui sera une date à laquelle ce dépôt a eu lieu.

Donc comment sélectionner ces deux textes et comment créer une disposition automatique sur les deux.

Maintenant comment sélectionner ce texte à l'intérieur de la disposition automatique et comment définir sa valeur de redimensionnement horizontal à remplir le conteneur.

Maintenant faire cela pour cela aussi.

Maintenant, sélectionner la disposition automatique et comment définir sa valeur d'espacement entre les éléments à quatre.

Et c'est bien.

Maintenant pour ce texte de dépôt.

Je vais changer la couleur en celle-ci.

Et pour la date ici.

Je vais changer sa couleur en celle-ci, et c'est bien.

Donc je vais garder cela ici.

Et la prochaine chose que je vais faire est d'avoir un cadre ici, qui sera de 48 par 48.

Je vais le garder sélectionné et lui donner un rayon de coin de 100.

Pour le rendre rond, puis je vais aller au plugin d'icônes de plumes et avoir une icône là, qui signifie entrant, qui est celle-ci, je vais sélectionner cette icône maintenant, et je vais la placer sur ce cadre de 48 par 48 px que j'ai créé.

Lorsque je l'ai placée là, je vais venir ici maintenant pour définir sa valeur de contraintes à centre pour l'axe horizontal et centre pour l'axe vertical.

Et c'est bien.

Maintenant, sélectionnez ce cadre, qui est maintenant un cercle et définissez sa couleur, définissez-la en vert comme ceci.

Et pour l'icône, définissez sa couleur à celle-ci et c'est bien.

Maintenant, pour ce cadre, maintenant que je l'ai créé, je vais vous l'apporter ici, et comment sélectionner tout cela et comment créer une disposition automatique sur les deux.

Maintenant, pour cette nouvelle disposition automatique, je vais venir ici et je vais définir sa valeur d'espacement entre les éléments à 16.

Et je vais venir ici maintenant pour définir sa valeur d'alignement à centre comme ceci.

Maintenant, gardez-le sélectionné pour venir ici et ajouter une couleur de remplissage à celui-ci comme ceci.

Maintenant, je vais venir ici maintenant et je vais créer ce texte.

Et ce texte va être un texte de corps grand gras, je vais venir ici et créer un autre texte, qui va simplement afficher le solde, le garder sélectionné et le rendre en texte de légende, comme ceci.

Maintenant, sélectionnez les deux, créez une disposition automatique sur les deux et définissez la valeur d'espacement entre les éléments à quatre pour l'instant, sélectionnez le texte à l'intérieur de la disposition automatique maintenant et définissez sa valeur de redimensionnement horizontal à remplir le conteneur pour avoir cela et c'est trié.

Donc je vais sélectionner cela maintenant et je vais lui donner une couleur de remplissage blanche.

Maintenant, pour la couleur du texte, définissez cela en quelque chose de clair comme ceci.

Et cela sera quelque chose comme cela.

Maintenant, ce que je vais faire, c'est que je vais sélectionner tout cela et je vais créer une disposition automatique sur tout cela.

Tout d'abord, aligner le contenu de la disposition automatique pour rester au centre, puis je vais ajouter une couleur de remplissage à la disposition automatique pour avoir cela maintenant pour la valeur d'espacement entre les éléments de cette nouvelle disposition automatique.

Maintenant, j'aimerais la définir à 76.

Et c'est bien.

Maintenant, pour la valeur de remplissage autour des éléments, j'aimerais la définir à huit.

Et c'est bien.

Maintenant, vérifions si cette disposition automatique est réactive.

Comme vous pouvez le voir, ce n'est pas le cas.

Donc corrigeons cela.

Et pour corriger cela, c'est vraiment facile.

Je vais sélectionner ce cadre ici, cette disposition automatique ici, je vais sélectionner cette disposition automatique ici.

Et je vais définir sa valeur de redimensionnement horizontal à remplir le conteneur.

Maintenant, lorsque je définis cela à remplir le conteneur, je vais sélectionner la disposition automatique qui est à l'intérieur, qui est le cadre huit et je vais définir sa valeur de redimensionnement horizontal à remplir le conteneur aussi, maintenant je vais m'assurer que tous ceux-ci sont définis à remplir le conteneur, donc je vais sélectionner les éléments pour être sûr qu'ils sont aussi définis à remplir le conteneur.

Maintenant, lorsque je sélectionne le cadre 12 maintenant, qui est notre cadre principal, vous verrez que cela est maintenant réactif.

Et c'est bien, donc je vais le garder sélectionné, venir ici et maintenant définir la valeur du rayon de coin à huit.

Et avec cela, j'aimerais le dupliquer pour avoir un composant de retrait où le cercle sera rouge et l'icône sera différente.

Donc je vais définir la position de cette icône à, disons, 180.

C'est la position de l'angle.

C'est ce que je définis ici.

Ou vous pouvez l'appeler la propriété de rotation de cette icône.

Donc je la définis à 180 degrés.

Et je vais changer cela avec un rouleau.

Ensuite, vous pouvez changer tous ces détails.

Si vous voulez les changer, sélectionnez le cercle lui-même, qui est ce cadre, et je vais changer la couleur en celle-ci et c'est bien.

Donc, je vais venir ici, sélectionner cela, renommer cela en carte de retrait, le garder sélectionné, en faire un composant, d'accord, cela devrait être une carte de dépôt.

Donc, je vais sélectionner cette colonne ici et renommer cela en carte de dépôt.

Le garder sélectionné.

Venez ici et cliquez sur Créer des composants.

Ensuite, sélectionnez cela.

Renommez cela en carte de retrait, le garder sélectionné et en faire un composant et c'est trié.

Toujours sur la page d'accueil.

Nous allons avoir une bannière qui sera utilisée pour copier des liens de parrainage.

Donc je vais de l'avant et je vais créer cela.

Donc j'aurai ce texte ici.

qui va dire invitez vos amis, le garder sélectionné.

Et je vais opter pour ce textile ici, qui est le textile de corps grand gras.

Et j'aurai un autre texte ici, qui va être invitez vos amis avec ce code de parrainage.

Et je vais opter pour le textile de légende ici.

Et c'est bien.

Donc je vais sélectionner cela, lorsque je le sélectionne, je vais créer une disposition automatique, et je vais définir la valeur d'espacement entre les éléments à huit, puis je vais sélectionner les éléments de texte à l'intérieur de cette disposition automatique et définir ceux-ci à remplir le conteneur.

Et je vais faire cela pour cela aussi.

Maintenant, la prochaine chose que j'aimerais faire est d'avoir une disposition de cadre ici, qui va être de 48 par 48.

Et je vais la garder sélectionnée, venir ici et lui donner une valeur de réduction de coin de 100, puis venir ici et lui donner cette couleur.

Maintenant, je vais aller au plugin d'icônes de plumes et je vais en chercher une que je peux utiliser sur celle-ci.

Donc j'aimerais utiliser cette icône ici, je vais la sélectionner, ou l'apporter ici et la placer sur cette disposition de cadre.

Maintenant, lorsque je la place là, je vais m'assurer qu'elle est au centre, puis je vais venir ici maintenant pour définir sa valeur de contraintes horizontales à centre et sa valeur de contraintes verticales à centre.

Et c'est bien, maintenant sélectionnez cette icône, puis je vais définir sa couleur à celle-ci.

Et c'est bien maintenant pour sélectionner tout cela, créer une disposition automatique dessus.

Donc je vais venir ici et je vais aligner le contenu de cette disposition automatique pour qu'il reste toujours au centre.

Maintenant, je vais garder cette disposition automatique sélectionnée, et je vais lui donner une couleur de remplissage qui va être la couleur de fond comme ceci.

Maintenant, je vais sélectionner cette disposition automatique qui est à l'intérieur de cette disposition automatique principale.

Comme vous pouvez le voir, c'est la disposition automatique brim 12 qui a ce texte, lorsque je la sélectionne, je vais venir ici, et je vais la définir à remplir le conteneur.

Et lorsque je sélectionne la disposition automatique principale, maintenant vous verrez que c'est une disposition automatique réactive, ce qui signifie que nous sommes prêts à partir.

Maintenant, pour la valeur d'espacement entre les éléments de cette disposition automatique, j'aimerais la définir à 24.

Et pour la valeur de remplissage autour des éléments, j'aimerais la définir à 16.

Pour avoir cela, puis venir ici et définir la valeur de réduction de coin à huit.

Et voici un composant.

Donc je vais le garder sélectionné.

Maintenant, renommez cela en bannière de référence, puis venez ici et cliquez sur Créer un composant pour en faire un composant.

Et c'est bien.

Maintenant, sur notre page d'accueil, nous avons un dernier composant, qui va être un composant très intéressant à créer.

Et cela va être le composant de navigation sur notre page d'accueil, qui sera en bas.

Donc voyons comment nous pouvons créer ce composant avant de mettre ensemble notre écran de page d'accueil.

Donc je vais venir ici et je vais obtenir l'icône de maison à partir du plugin d'icônes de plumes.

Je vais taper maison là, je vais l'apporter ici.

Maintenant, j'aimerais zoomer à ce point pour que vous puissiez voir clairement, lorsque je place cette icône ici, je vais venir ici et je vais créer un texte.

Et je vais l'appeler maison.

Maintenant, pour ce texte maison, je vais créer une disposition automatique dessus.

Et je vais définir la valeur de remplissage autour des éléments pour cette disposition automatique à zéro, puis définir sa valeur d'alignement à centre.

Maintenant, sélectionnez le texte Maison qui est à l'intérieur de cette disposition automatique.

Et maintenant, définissez sa valeur de redimensionnement horizontal à remplir le conteneur.

Maintenant, gardez cette disposition automatique de texte ici, puis je vais sélectionner l'icône Maison et cette disposition automatique de texte.

Et je vais créer une disposition automatique sur les deux.

Maintenant, cette disposition automatique est le cadre 15.

Ce que je vais faire maintenant, c'est que je vais venir ici et je vais définir la valeur d'espacement entre les éléments pour cette disposition automatique à quatre, lorsque je fais cela, je vais venir ici maintenant pour définir les alignements du contenu dans cette disposition automatique pour qu'ils soient toujours au centre.

Maintenant, je vais venir ici et comment sélectionner la disposition automatique de la maison et comment définir sa valeur de redimensionnement horizontal à remplir le conteneur.

Et c'est bien, il suffit de l'étirer et cela va être trié.

Maintenant, à ce stade.

Ce que je vais faire, c'est que je vais avoir une disposition de cadre ici.

Qui va être de 48 par 48.

Et je vais attraper cette disposition automatique de préemption maintenant et je vais la placer sur cette disposition de cadre de 48 par 48 px, assurez-vous qu'elle est au centre.

Lorsque je la place au centre, je vais sélectionner les dispositions de cadre 16, qui est notre 48 par 40.

C'est des dispositions maintenant et je vais en faire une disposition automatique.

Maintenant, lorsque je la transforme en disposition automatique, je vais l'apporter ici et je vais la renommer en Lien Maison.

Maintenant, après l'avoir renommée en Lien Maison, je vais venir ici et maintenant définir son alignement au centre afin que le contenu de cette disposition automatique soit toujours au centre.

Maintenant, la valeur de remplissage supérieur est définie à trois, je vais la définir à quatre, juste pour que nous ayons des nombres pairs tout autour, je vais définir cela à quatre aussi, et cela à quatre, et cela à quatre, juste pour avoir cela.

Donc à ce stade, ce que j'aimerais faire maintenant, c'est d'avoir d'autres liens de navigation.

Donc je vais garder cette disposition automatique Lien Maison sélectionnée, et je vais créer une autre disposition automatique par-dessus.

Maintenant, cette disposition automatique que je viens de créer a une valeur de remplissage autour des éléments de 16.

Oui, je vais la laisser définie à 16.

Parce qu'en fait, c'est ce qu'elle est censée être maintenant, je vais venir ici et étendre cette nouvelle disposition automatique, et comment sélectionner le Lien Maison ou la disposition automatique et je vais la dupliquer comme ceci à trois endroits.

Et c'est parce que je veux avoir juste trois éléments là.

Maintenant, je vais venir ici, je vais changer cela de maison à investir.

Et je vais changer cela de maison à transiger.

Sélectionnons notre cadre 16.

Et ajoutons la couleur de remplissage à celui-ci pour avoir cela.

Donc si j'étends le cadre 16, vous verrez que l'icône et le texte sont simplement que ce n'est pas réactif.

Donc j'aimerais changer cela.

Donc pour changer cela, je vais sélectionner cela, définir cela à remplir le conteneur, sélectionner cela, faire cela aussi, sélectionner cela et faire cela aussi.

Maintenant, lorsque je sélectionne le cadre 16 et que j'augmente la largeur horizontalement, vous verrez que ce texte s'enroule dans la ligne suivante est en fait fixe.

Donc pour ces icônes, allons-y et changeons cette icône en une meilleure icône et ces deux en une meilleure icône.

Donc je vais venir ici, je vais aller au plugin d'icônes de plumes.

Et j'aimerais avoir cette icône.

Donc je vais l'apporter ici.

Et je vais venir ici et je vais tracer la disposition automatique qui a cela, vous pouvez voir qu'elle s'appelle toujours Lien Maison, je vais changer cela en Lien Investir, lorsque je le change en Lien Investir, vous verrez que pour avoir l'icône de maison à l'intérieur ici.

Donc je vais venir ici maintenant, je vais sélectionner cette icône de graphique à barres maintenant.

Et je vais la prendre à l'intérieur de la disposition automatique Lien Investir.

Maintenant, placez-la à l'intérieur ici.

Et vous pouvez voir qu'elle est ici en bas.

Donc je vais sélectionner l'icône Maison et la supprimer avec la touche Suppr de mon clavier, puis venir ici, attraper cette icône d'investissement, la maintenir et la prendre vers le haut comme ceci.

Donc je vais de l'avant et je vais faire de même pour le lien de transaction ici.

Donc je vais le garder sélectionné.

Venez ici, renommez cela en navigation inférieure, gardez-le sélectionné et cliquez sur Créer des composants et ce composant a été créé.

Donc à ce stade, nous pouvons aller de l'avant et utiliser tous ces composants dans la conception de notre page d'accueil.

Donc pour concevoir notre page d'accueil, venez ici, sélectionnez le cadre deux et je vais apporter un cadre iPhone fatin Promax ici.

Maintenant, zoomons sur ce point, maintenant je vais sélectionner ce cadre iPhone 13 Pro Max, renommez cela en maison.

Lorsque je fais cela, je vais venir ici et appliquer le style de grille sur celui-ci.

Et lorsque je fais cela, zoomons à 200.

Je vais de l'avant et je vais apporter l'icône de menu en utilisant le plugin d'icônes de plumes.

Donc je vais utiliser celle-ci.

Maintenant, chaque fois que vous apportez une icône et que vous voulez la placer dans une mise en page, assurez-vous que l'icône est à l'intérieur de cette mise en page ici dans l'arborescence de conception.

Comme vous pouvez le voir, actuellement, cette icône qui est alignée justifiée n'est pas placée à l'intérieur de cette mise en page, qui est notre page d'accueil.

Donc ce que je vais faire, c'est que je vais venir ici dans l'arborescence de conception, cliquer dessus pour le sélectionner, le maintenir et le faire glisser dans la mise en page de la maison.

Et comme vous pouvez le voir, il est maintenant à l'intérieur de la mise en page de la maison.

Donc je vais venir ici, et je vais placer cela ici.

Donc je vais compter les espaces de ligne à partir du haut 1234567 et huit.

Et c'est bien.

Donc j'aurai un texte ici.

Donc je peux venir ici et je peux dire bonjour et pour la chance.

Maintenant, j'aimerais attirer votre attention sur quelque chose d'important.

Et c'est le fait que, comme vous pouvez le voir ici, j'ai le nom de l'utilisateur écrit ici, qui est N pour chanceux.

Maintenant, la question que vous devriez vous poser est la suivante : comment suis-je arrivé à afficher le nom de l'utilisateur ici alors que dans le formulaire d'inscription, je n'ai pas collecté le nom de l'utilisateur.

Si vous vous souvenez, dans mon formulaire d'inscription, j'ai seulement collecté l'adresse e-mail, le numéro de téléphone et le mot de passe de l'utilisateur, ce qui signifie que l'application elle-même n'a pas d'enregistrement du nom de l'utilisateur.

Donc la question que vous vous poserez, qui est sans malice.

Comment suis-je arrivé à afficher le nom de l'utilisateur ici ? Maintenant, cela va être votre première mission dans ce cours, car j'aimerais que vous veniez ici dans la section d'authentification ici et que vous refactorisiez le flux d'authentification ici.

Pour collecter le nom de tout utilisateur qui s'inscrit à cette application.

Maintenant, je vais laisser cela ouvert sans vous donner de guide sur la façon de le faire.

J'aimerais voir votre processus de réflexion sur la façon de refactoriser ce processus d'authentification avec la meilleure expérience.

Et aussi avec le fait que vous allez collecter le nom de tout utilisateur s'inscrivant à cette application.

Si vous pensez que venir ici et ajouter un autre champ pour la collecte du nom est bien, allez-y et faites-le.

Si vous avez une autre idée qui peut rendre l'expérience meilleure, allez-y et implémentez cela.

Maintenant, lorsque vous implémentez la collecte du nom dans la tâche d'authentification ici, allez-y et taggez-moi sur les réseaux sociaux pour mes commentaires.

C'est votre première mission dans ce cours, puis je peux avoir un autre texte ici.

Je vais apporter cela ici.

Maintenant, la prochaine chose que j'aimerais avoir ici est la carte de solde.

Donc je vais venir ici dans le panneau Assets, et je vais apporter ce composant comme ceci.

Maintenant, j'aimerais avoir quatre espaces de ligne entre ce texte et la carte de solde.

Mais avant de faire cela, j'aime garder cette carte de solde sélectionnée, puis venir ici et appliquer mon style d'ombre que j'ai enregistré.

Donc, je vais opter pour une ombre légère comme ceci.

Maintenant, zoomons sur ce point.

Et assurons-nous d'avoir quatre espaces de ligne.

Et c'est bien, zoomons.

Maintenant, ce que nous allons faire est d'étirer cela à ce point.

Et cela va être réussi parce que notre composant est un composant réactif.

Donc rien ne va se casser.

Et c'est bien.

Donc je vais venir ici en bas ici, je vais faire cliquer cela à cette ligne de rouleau.

Et c'est trié.

Donc la prochaine chose que je vais avoir ici est un texte qui va dire transactions récentes, je vais le garder sélectionné et je vais opter pour un texte de corps grand gras.

Donc je vais m'assurer d'avoir 1234 espaces de groupe ici.

Et c'est trié.

Donc j'aurai cela là.

Et je vais sélectionner une couleur différente pour cela.

Je vais opter pour celle-ci.

Maintenant, pour cela aussi, j'aurai cette couleur définie maintenant, au cas où j'oublierais de définir la couleur du texte au fur et à mesure que je progresse, vous allez de l'avant et faites cela.

Donc je vais sélectionner cette icône aussi maintenant, changer la couleur en celle-ci, c'est bien.

Maintenant, juste en dessous de ce texte de transactions envoyées, j'aurai ces cartes de transaction.

Donc je vais l'apporter ici, qui est la carte de dépôt, me donner le style d'ombre, venir ici.

Je vais lui donner un style d'ombre moyen.

Zoomez à ce point.

Et je vais simplement étirer cela à cette fin ici.

Et je vais m'assurer que cela s'aligne correctement aussi.

Et cela ne va pas être un problème parce que le composant est réactif.

Donc regardons l'espace entre cette carte et ce texte, zoomons, vous pouvez voir que nous avons 123, je vais en faire quatre.

Zoomez.

D'accord, cela est en fait trop loin.

Donc je vais apporter cela ici, je vais avoir deux espaces de ligne.

D'accord.

Donc j'aurai celui-ci ici.

Donc j'aurai deux espaces de ce texte à cette carte.

Et si je sélectionne le texte, vous verrez que j'ai un espace de ligne et deux espaces avant cette carte.

Et c'est bien.

Donc ce que je vais faire maintenant, c'est que je vais de l'avant, je vais dupliquer cela.

Et lorsque je l'aurai dupliqué, je vais m'assurer que j'ai juste un espace de ligne, qui est SPX, je vais apporter cet autre ici, qui est quatre, qui est pour un événement de retrait.

D'accord.

Oui, je vais lui donner une ombre moyenne, zoomer et faire cliquer cela à ces points.

Et je vais m'assurer qu'il y a juste un espace de 8 px.

Donc je vais apporter cela ici et c'est bien.

Maintenant, je vais avoir juste trois transactions récentes ici.

Donc je vais de l'avant et j'apporte cette bannière de référence et je la télécharge ici.

Donc je vais faire cliquer cela à la fin aussi, juste l'autre point, maintenant zoomons, et je vais m'assurer d'avoir un espace cohérent ici.

Donc je vais avoir un espace de marge de 48 px ici, qui va être six espaces de ligne, n'est-ce pas.

Donc j'aurai 123456.

Donc je vais apporter cela en place ici.

Donc je vais zoomer, et à ce stade, ce que je vais apporter sera un composant de navigation inférieure.

Je l'apporte, voyons ici.

Zoomez et assurons-nous que cela est correctement placé.

Comme vous pouvez le voir, j'ai correctement placé cela, donc je vais le garder sélectionné.

Venez ici et je vais changer la couleur de remplissage en celle-ci, sélectionnez cela, changez la couleur de remplissage en celle-ci, sélectionnez cela, sélectionnez cela, je vais changer la couleur de remplissage en celle-ci maintenant, sélectionnez l'icône elle-même maintenant, changez la couleur de remplissage en celle-ci ou faites cela pour cela aussi.

Et je vais faire cela pour cela aussi.

Maintenant, pour la couleur du texte de ce lien de navigation.

J'aime que la couleur du texte soit en fait purement blanche pour qu'elle puisse être vraiment présente là.

Et je pense que c'est mieux.

Et c'est tout.

Donc nous venons de concevoir notre page d'accueil maintenant en utilisant les composants que nous avons créés.

Donc je vais également conseiller que lors de la conception, il est également bon la plupart du temps de tester ce que vous concevez, donc je vais sélectionner cette colonne ici, et je vais cliquer sur présenter pour voir comment cela va ressembler en réalité.

Donc cela ne ressemble pas à cela, j'aime présenter cela à l'intérieur d'un appareil iPhone.

Donc, voici, cliquez sur prototype, cliquez sur Paramètres du prototype et sélectionnez un appareil ici, qui est iPhone 13 produits.

Lorsque je fais cela, je vais sélectionner cette mise en page une fois de plus, et je vais cliquer sur présenter à nouveau, cela va le trier.

Et voici ce que nous avons, cela a l'air bien, vous pouvez venir ici et présenter cela en plein écran comme ceci, pour mieux le voir.

Donc allons-y et continuons à concevoir notre application.

Donc je vais appuyer sur la touche Échap de mon clavier pour sortir de cet affichage plein écran et ne pas revenir ici.

Donc la prochaine action que j'aimerais concevoir sera l'action de l'utilisateur cliquant sur le bouton de financement des comptes.

Donc lorsque l'utilisateur clique sur le bouton de financement des comptes, j'aimerais afficher une fenêtre contextuelle qui permettra à l'utilisateur de choisir la méthode avec laquelle il souhaite financer le compte et c'est facile, car nous avons en fait créé une fenêtre contextuelle auparavant.

Donc je vais venir ici, je vais dupliquer cette fenêtre contextuelle, et je vais avoir la fenêtre contextuelle rester ici.

Et à l'intérieur de cette fenêtre contextuelle ici, j'aurai un bouton ici, qui va dire virement bancaire.

Et j'aurai un autre bouton ici qui va présenter l'option de financer le compte avec une carte de débit.

Donc j'aurai cela ici et maintenant étendre cela à ce point.

Maintenant, étendre cela à ce point.

Je vais aussi garder cela ici et étendre cela à ce point.

Maintenant, pour étendre cela à ce point, je vais le garder sélectionné et l'aligner horizontalement au centre.

Donc, je vais venir ici, je vais descendre cela.

Et j'aurai un texte qui va dire sélectionner la méthode.

Donc je vais changer la couleur de ce texte en celle-ci.

Et cela va être bien.

Donc je vais sélectionner cette fenêtre contextuelle maintenant, et je vais la renommer de vérifier la fenêtre contextuelle à la fenêtre contextuelle de la méthode de liaison, la garder sélectionnée, et je vais en faire un composant.

Et cela va être tout.

Donc lorsque les utilisateurs cliquent sur le financement du compte ici, ils auront cette fenêtre contextuelle qui s'affichera, leur demandant de choisir la méthode avec laquelle ils souhaitent financer leur compte. Maintenant, disons qu'ils sélectionnent la méthode de virement bancaire, ils seront redirigés vers la page où ils pourront le faire.

Donc pour cela, créons cette page maintenant.

Donc je vais venir ici, je vais dupliquer cela, et je vais le renommer en virement bancaire, lorsque je le renomme en virement bancaire, je vais venir ici et je vais enlever tout cela.

Et je vais aussi enlever la navigation inférieure.

Donc ce que j'aurai ici est une icône qui dirigera les utilisateurs vers la page précédente.

Donc je vais aller aux icônes de plumes.

Lorsque je viens ici, je vais faire défiler vers le bas, et je vais sélectionner cette icône pour cela.

Donc je vais enlever cela.

Et je vais l'apporter ici.

Et comme vous pouvez le voir, cette icône n'est pas à l'intérieur de cette mise en page.

C'est pourquoi ce guide intelligent n'est pas actif.

Donc je vais venir ici, je vais sélectionner cette icône et je vais la mettre dans ces mises en page, comme ceci.

Maintenant, lorsque je la sélectionne et que je la déplace, vous verrez que le guide intelligent est actif.

Donc je vais m'assurer que j'ai des espaces du haut 12345678.

Et c'est correct.

Donc je vais garder cette icône sélectionnée et je vais changer la couleur du vecteur de l'icône en celle-ci.

Et c'est bien.

La prochaine chose que j'aurai ici est un titre pour cette page.

Qui va dire virement bancaire, vous pouvez l'appeler comme vous voulez.

Donc je vais utiliser le texte de titre trois gras pour cela.

Je vais garder cela là, comment centrer cela horizontalement, en fait, pour être sûr qu'il est au centre horizontalement.

Et c'est bien.

Maintenant, je vais venir ici, et j'aurai des bits ici.

Donc j'aurai ces détails ici.

Donc ce que je vais faire, c'est m'assurer que j'ai 1234.

D'accord, j'aurai ses espaces de ligne là, j'aurai 12345678.

Donc ce que nous allons avoir ici, ce sont les détails du compte de destination où l'utilisateur doit effectuer le virement bancaire, donc voici le numéro de compte.

Voici le nom du compte et voici le nom de la banque.

Et c'est tout.

Donc je vais venir ici et j'aurai un composant de bouton ici, l'aligner au centre et je vais l'étirer à ce point et l'étirer à ce point aussi, j'aurai 123 456.

Donc j'ai sept, et huit.

Donc j'aurai un espace de deux lignes là.

Maintenant, ce que j'aurai sur ce bouton sera copier le numéro de compte.

Donc l'utilisateur peut simplement cliquer sur ce bouton pour copier le numéro de compte ici.

Donc j'ai trié les routes pour financer le compte sur cette application par virement bancaire.

Donc allons-y et créons la page où l'utilisateur utilisera pour financer le compte avec sa carte de débit.

Donc, je vais venir ici, je vais changer cela en carte de débit, aligner cela au centre, c'est bien, je vais enlever cela, puis je vais venir ici, je vais enlever cela aussi, puis j'aurai tout cela ici.

Donc j'aurai ses espaces de ligne à partir de cette icône aussi.

Donc zoomons pour que nous puissions compter mieux.

Donc j'aurai 12345678.

Je vais garder cela ici.

Et j'aurai un deux, je vais avoir cela là.

Zoomez.

Donc c'est la page qui permettra à l'utilisateur de financer leurs comptes sur cette application avec une carte de débit.

Donc ce que nous avons ici, c'est que l'utilisateur entrera le montant et aura l'option de sélectionner qu'il veut utiliser la carte existante qu'il a sur cette application, ou qu'il aimerait ajouter une autre carte.

Donc corrigeons quelques problèmes d'alignement ici.

Gardez cela ici, venez ici et gardez cela ici aussi, puis venez ici, équilibrez cela, gardez cela ici.

De plus, je vais aussi venir ici et m'assurer que cela est trié aussi ici.

Donc pour l'action d'ajout d'une autre carte, nous allons voir comment faire cela au fur et à mesure que nous avançons, pour l'instant, allons-y et ayons un composant de bouton ici, alignez cela au centre horizontalement, gardez cela ici, gardez cela ici, puis pour le texte, dites financement des comptes.

Et c'est tout.

Donc si les utilisateurs cliquent sur le bouton de financement des comptes, lorsqu'ils veulent financer le compte avec une carte de débit, l'utilisateur sera redirigé vers une autre page, qui va indiquer que le compte a été financé avec succès.

Donc je vais dupliquer cela pour avoir cela là.

Maintenant, avant de travailler sur cette page, j'aimerais changer le nom de cette page de virement bancaire à virement par carte de débit.

Maintenant, pour cette page ici, je vais la renommer en transfert réussi.

Venez ici, je vais enlever tout cela.

Je vais enlever cela aussi.

Et j'aurai un cadre ici, qui sera un cadre de 100 par 100, c'est ainsi qu'il va ressembler, c'est assez petit.

Donc je vais faire cela 240 par 240.

Et je vais simplement travailler avec cela.

Donc je vais lui donner cette couleur.

Et je vais lui donner un rayon de coin de 200 pour en faire un cercle.

Et je vais aller au plugin d'icônes de plumes.

Et ici, dans le plugin d'icônes de plumes, je vais apporter cette icône, et cette icône sera placée sur ce cadre.

Maintenant, allez de l'avant et utilisez l'outil d'échelle pour mettre à l'échelle cette icône à ce point, comme ceci.

Maintenant, lorsque vous mettez à l'échelle l'icône, assurez-vous que les contraintes de cette icône sont définies au centre horizontalement et au centre verticalement.

Donc je vais venir ici maintenant, je vais sélectionner cette icône et je vais changer la couleur de cette icône en celle-ci lorsque j'ai l'habitude de ce texte ici qui dirait compte financé avec succès, ou vous pouvez avoir n'importe quel texte que vous voulez avoir, c'est bien.

Donc je vais venir ici et je vais changer la couleur de cela en celle-ci.

Donc après cela, j'aurai un composant de bouton ici, qui redirigera l'utilisateur vers la page d'investissement.

Donc je vais dire investir.

Maintenant, lorsqu'ils obtiennent cette page, ils auront l'option de cliquer sur le bouton d'investissement ici pour aller directement à la page d'investissement où ils peuvent investir.

Donc c'est la page suivante que nous allons examiner, nous allons examiner la création de la page d'investissement où les utilisateurs peuvent investir en actions.

Donc pour créer cette page, cela signifie que nous devons créer les composants dont la page aura besoin.

Donc allons-y et voyons comment créer les composants pour cette page.

Donc pour la page d'investissement, le premier composant que j'aurai là sera une petite carte composant qui sera utilisée pour afficher le montant en espèces que l'utilisateur a.

Donc je vais venir ici et je vais créer cela.

C'est la section des composants de financement des comptes ici.

Donc j'aurai la section des composants d'investissement ici.

Et pour créer cette carte, j'aurai cela ici, je vais dire espèces.

Et je vais utiliser le textile de corps petit pour cela.

Et j'aurai un montant ici, n'importe quel montant.

D'accord, donc je vais utiliser le corps grand gras ici, puis je vais simplement sélectionner les deux, je vais créer une disposition automatique sur les deux, m'assurer que la valeur de remplissage autour des éléments est définie à zéro, puis je vais venir ici et je vais ajouter la couleur de remplissage à celle-ci.

Maintenant, sélectionnez le texte en espèces et définissez la valeur de redimensionnement horizontal à remplir le conteneur et faites cela pour ce texte ici, qui est le montant d'argent que l'utilisateur a.

Maintenant, lorsque cela est trié, sélectionnez la disposition automatique, puis venez ici et définissez la valeur d'espacement entre les éléments à quatre pour l'instant, je vais aller au plugin d'icônes de plumes, et je vais chercher une icône que je peux utiliser pour représenter l'argent là.

Donc je vais faire défiler vers le bas et je vais chercher l'une des icônes ici.

Donc je vais utiliser cette icône ici, je vais la sélectionner, je vais l'apporter ici, puis je vais sélectionner les deux et je vais créer une disposition automatique sur les deux, je vais venir ici.

Et je vais m'assurer que la valeur d'alignement pour cette disposition automatique est définie pour être le coin supérieur gauche de la disposition automatique.

Donc je vais garder cette disposition automatique sélectionnée, je vais ajouter une couleur de remplissage à celle-ci.

Et je vais définir la valeur d'espacement entre les éléments à huit, puis définir la valeur de remplissage autour des éléments à huit, puis venir ici, je vais avoir la valeur du rayon de coin définie aussi.

Donc ici, je vais sélectionner cette disposition automatique à l'intérieur de la disposition automatique principale maintenant.

Et je vais définir sa valeur de redimensionnement horizontal à remplir le conteneur.

Et lorsque je fais cela, vous verrez que ce composant sera un composant non réactif juste comme je veux qu'il soit.

Maintenant, allons-y et définissons les couleurs pour cela.

Donc je vais définir la couleur de cela à cela maintenant définir cela à cela maintenant pour cette icône définir la couleur de cette icône à cela.

Donc je vais garder cela ici, je vais le dupliquer, lorsque je le duplique, je vais de l'avant, changer ces deux actifs, puis je vais laisser la valeur ici comme ceci, ou vous pouvez la changer si vous voulez la changer.

Maintenant, la prochaine chose que j'aimerais faire est d'enlever cette icône et d'avoir une autre icône là.

Donc je vais aller aux icônes de plumes.

Et je vais avoir cela sélectionné pour cela.

Donc je vais l'apporter ici, allons à l'onglet Calques ici.

Et je vais sélectionner l'icône de mallette ici, qui est celle-ci, je vais la sélectionner ici.

Et je vais la prendre dans la disposition automatique du cadre 19, comme ceci.

Et vous pouvez voir qu'elle reste ici du côté droit de la disposition automatique, je vais l'attraper et la prendre du côté gauche.

Maintenant, je vais sélectionner celle-ci, et je vais la supprimer.

Et j'ai cela.

Donc je vais sélectionner cette icône maintenant et je vais changer la couleur de cette icône.

Et c'est trié.

Donc je vais renommer cela en carte de trésorerie, peu importe comment vous voulez l'appeler, c'est bien.

Et je vais renommer cela en carte d'actifs.

Et c'est bien.

Donc je vais sélectionner cela, en faire un composant, sélectionner cela, en faire un composant.

Donc allons-y et créons les autres composants dont nous allons avoir besoin sur la page d'investissement.

Donc le prochain composant dont nous aurons besoin sur la page d'investissement sera un composant de champ de saisie que l'utilisateur pourra utiliser pour rechercher les principales actions dans lesquelles il aimerait investir.

Donc nous avons un champ de saisie ici déjà créé, c'est déjà un composant.

Donc ce que je vais faire, c'est le dupliquer, je vais le descendre ici.

Et je vais le garder ici.

Maintenant, lorsque vous dupliquez les composants comme ceci, les duplications seront des composants enfants.

Maintenant, je n'aimerais pas travailler avec cela comme un composant enfant.

Donc ce que je vais faire, c'est le garder sélectionné, cliquer dessus avec le bouton droit de la souris et sélectionner détacher l'instance.

Maintenant, lorsque je sélectionne détacher l'instance, vous verrez que cela redevient une disposition automatique régulière.

Donc je vais venir ici, et je vais changer le nom en champ de saisie de recherche, puis ce que je vais faire, c'est aller aux icônes de plumes maintenant, apporter une icône de recherche, qui est celle-ci, l'attraper et la déposer dans cette disposition automatique, qui est la disposition automatique du champ de saisie de recherche.

Maintenant, le problème est le suivant.

Je veux que cette icône de recherche soit plus petite que cela, car elle est assez trop grande.

Et comme vous pouvez le voir, elle a augmenté la hauteur du champ de saisie.

Donc je vais garder l'icône sélectionnée.

Venez ici, et je vais définir cela sur 12.

Et je vais définir cela sur 12.

Et je pense que 12 est trop petit, je vais définir cela sur 16.

Et je vais définir cela sur 16.

Et c'est trié.

Donc la prochaine chose est la suivante, j'aimerais que cette icône reste du côté droit de ce champ de saisie.

Alors comment faisons-nous cela ? Il suffit de sélectionner la disposition automatique du champ de saisie de recherche.

Venez ici.

Cliquez sur la propriété d'alignement et de remplissage.

Puis changez cette propriété de compact à espace entre, et ce sera trié.

Maintenant, changeons la couleur de cette icône.

Je vais la changer de noir à cela.

Maintenant, je peux la sélectionner maintenant et en faire un composant.

Et comme vous pouvez le voir, elle peut être utilisée comme vous le souhaitez.

Donc allons-y et créons le prochain composant que nous allons avoir sur notre page d'investissement.

Donc le prochain composant sera le composant qui affichera la liste des actions disponibles pour investir dans cette application.

Donc venons ici, créons un peu d'espace ici, je vais utiliser le plugin de récupération de marque.

Pour récupérer le logo d'une marque, j'aurai cela, venez ici, je vais taper dangoty, ou appuyer sur la touche Entrée de mon clavier.

Et j'aurai cela ici.

Donc je vais sélectionner cela, cliquer dessus pour le sélectionner, et je l'aurai là dans ma toile.

Donc je vais apporter cela ici, et je vais en faire un logo de cadre de 24 par 24 comme ceci.

Maintenant, lorsque je le fais 24 par 24.

La prochaine chose que j'aimerais avoir est le prix de cette action, je vais avoir cela, je vais sélectionner le texte de légende pour cela, puis je vais avoir cela, puis je vais avoir cela, assurez-vous d'utiliser le texte de légende pour cela aussi, puis je vais créer une disposition automatique sur cela et je vais définir la valeur de remplissage autour des éléments à zéro.

Maintenant, je vais sélectionner le texte à l'intérieur de cette disposition automatique et définir sa valeur de redimensionnement horizontal à remplir le conteneur.

Maintenant, j'aimerais avoir une icône ici qui indiquera une baisse ou une augmentation.

Donc je vais aller au plugin d'icônes de plumes.

Et je vais apporter cette icône, et je la place ici.

Maintenant, je vais faire de cette icône une icône de 16 par 16 comme ceci, lorsque je clique ici, je vais sélectionner les deux.

Maintenant, créer une disposition automatique sur les deux.

Maintenant, pour l'espacement entre la disposition automatique, il sera défini à quatre.

Maintenant, sélectionnez cette disposition automatique qui est à l'intérieur de cette disposition automatique de cadre, je parle de la disposition automatique qui a ce nombre ici, je vais la sélectionner, lorsque je la sélectionne, je vais définir sa valeur de redimensionnement horizontal à remplir le conteneur, puis je vais sélectionner la disposition automatique de cadre 19 maintenant, et maintenant ajouter une couleur de remplissage à celle-ci.

Maintenant, allons-y et sélectionnons cette icône.

Et faisons en sorte que la couleur soit verte pour indiquer une progression.

Oui, donc je vais venir ici maintenant, je vais sélectionner les deux et créer une disposition automatique sur les deux.

Maintenant, pour cette disposition automatique ici, je vais définir la valeur d'espacement entre les éléments à huit, elle est déjà définie pour moi.

Donc je vais simplement la laisser définie à huit.

Puis je vais venir ici et je vais ajouter une couleur de remplissage.

Pour avoir cela, je vais venir ici.

Maintenant, sélectionnez ce texte qui est à l'intérieur de cette nouvelle disposition automatique et définissez sa valeur de redimensionnement horizontal à remplir le conteneur.

Et pour cela, définissez sa valeur de redimensionnement horizontal à remplir le conteneur.

Maintenant, lorsque je sélectionne cette disposition automatique de cadre 20, comme vous pouvez le voir ici, c'est une disposition automatique de cadre 20, lorsque je la sélectionne et que je la redimensionne, vous verrez que c'est une disposition automatique réactive, comme ceci.

Et c'est ce que je veux, en fait.

Donc je vais apporter cela ici.

Maintenant, je vais de l'avant pour créer un texte qui signifiera le titre de cette action, je vais simplement l'appeler dang.

Maintenant, je vais venir ici et définir cela sur corps grand gras, et j'aurai ce jour ici avec ce texte.

Maintenant, ce que je vais faire, c'est sélectionner cela et ce texte, et je vais créer une disposition automatique sur les deux.

Maintenant, je vais venir ici maintenant et ajouter la couleur de remplissage à cette disposition automatique d'abord, puis venir ici et aligner le contenu de cette disposition automatique au centre.

Après cela, je vais définir la valeur d'espacement entre les éléments de cette disposition automatique à huit pour avoir cela maintenant, apporter cela ici et j'aurai cela ici.

La prochaine chose à faire est de tout sélectionner, puis d'ajouter une disposition automatique sur tout cela.

Maintenant, pour cette nouvelle disposition automatique.

Maintenant, je vais définir la valeur d'espacement entre les éléments à huit, puis venir ici, sélectionner cette disposition automatique et définir sa valeur de redimensionnement horizontal à remplir le conteneur, puis comment sélectionner la disposition automatique maintenant et maintenant ajouter une couleur de remplissage à celle-ci pour avoir cela maintenant pour la valeur de remplissage autour des éléments, je vais la définir à huit et définir la valeur du rayon de coin à huit, comme ceci.

Maintenant, si je l'étend, vous verrez que j'ai ce composant qui ressemble à ceci.

Et c'est bien.

Donc je veux le sélectionner, nommer cela liste d'actions et en faire un composant.

C'est bien.

Maintenant, le prochain composant que j'aimerais avoir sur la page d'investissement sera un composant qui sera utilisé pour afficher la liste des actions dans lesquelles l'utilisateur a investi, littéralement le portefeuille d'actions de l'utilisateur.

Donc je vais venir ici, zoomons un peu, j'aurai un cadre de 48 par 48 px, je vais lui donner un rayon de coin de 100 pour le rendre rond, puis je vais lui donner cette couleur.

Maintenant, je vais aller au plugin de récupération de marque, et je vais chercher le logo de paystack, qui est celui-ci.

Maintenant, je vais venir ici, je vais faire un clic droit sur ce logo de paystack, j'aimerais enlever la couleur de fond.

Donc je vais utiliser le plugin Remove BG pour cela.

Je vais garder le logo sélectionné, et je vais en faire un logo de 24 par 24 px, comme ceci, et je vais le placer droit au centre de ce cadre circulaire que nous avons créé.

Maintenant, lorsque vous placez cela sur ce cadre circulaire, assurez-vous de définir la valeur de contraintes pour l'axe horizontal au centre et pour l'axe vertical au centre.

Donc la prochaine chose à faire est d'aller de l'avant et je vais dire paystack, je vais le garder sélectionné, venir ici.

Et je vais utiliser le texte de corps grand gras pour cela.

Et juste en dessous de ce texte, coller ce texte, je vais dire plus 345, juste pour représenter la valeur d'appréciation de cette action.

Donc je vais le garder sélectionné et venir ici.

Et je vais opter pour le texte de corps petit.

Maintenant, je vais faire en sorte que cela ait une couleur verte, comme ceci et pour le texte collé et le faire avoir cette couleur.

Donc je vais sélectionner les deux, tout d'abord, créer une disposition automatique, faire en sorte que cette valeur d'espacement entre les éléments soit définie à quatre, puis sélectionner ce texte, le définir à remplir le conteneur.

Et pour cela, le définir à remplir le conteneur aussi maintenant, étendre cela, et c'est bien.

Maintenant, la prochaine chose à faire est de tout sélectionner, créer une disposition automatique sur tout cela.

Lorsque je crée une disposition automatique sur cela, je vais venir ici et je vais définir la valeur d'espacement entre les éléments à huit, elle est déjà définie pour moi.

Donc je vais simplement la laisser définie à huit.

Puis je vais venir ici et je vais ajouter une couleur de remplissage.

Pour avoir cela, je vais venir ici.

Maintenant, sélectionnez ce texte maintenant, qui est à l'intérieur de cette nouvelle disposition automatique et définissez sa valeur de redimensionnement horizontal à remplir le conteneur.

Et pour cela, définissez sa valeur de redimensionnement horizontal à remplir le conteneur.

Maintenant, lorsque je sélectionne cette disposition automatique de cadre 20, comme vous pouvez le voir ici, c'est une disposition automatique de cadre 20, lorsque je la sélectionne, et que je la redimensionne, vous verrez que c'est une disposition automatique réactive, juste comme ceci.

Et c'est ce que je veux, en fait.

Donc je vais garder cela sélectionné, venir ici.

Maintenant, définissez la valeur du rayon de coin à huit.

Et puis nous avons notre composant de liste de portefeuille.

Donc je vais dire liste de portefeuille.

Et je vais cliquer sur Créer des composants.

Donc je pense que nous avons créé tous les composants dont nous allons avoir besoin sur notre page d'investissement.

Donc à ce stade, j'aimerais que nous allions de l'avant et créions notre page d'investissement.

Donc je vais venir ici maintenant, sélectionner cela, le dupliquer, renommer cela en investir.

Et je vais venir ici et enlever tout cela.

Et maintenant laisser le composant de navigation inférieure, cette fois-ci, je vais avoir d'abord cette carte de trésorerie.

Donc j'aurai 1234 espaces avant cela.

Mais pour voir la carte de trésorerie, je vais l'apporter ici.

Et pour cette carte de trésorerie, je vais changer la couleur de remplissage de cette carte de trésorerie en celle-ci, sélectionner cela et je vais changer cela aussi en celle-ci, je vais changer la couleur du texte ici en celle-ci.

Et pour cela, je vais changer cela en celle-ci.

Donc je vais de l'avant maintenant.

Et je vais apporter la carte d'actifs.

Et je vais faire de même pour cela aussi, venir ici, je vais changer la couleur de cela en celle-ci.

Et cela sera changé en celle-ci, changer cela en celle-ci et cela en celle-ci.

Et c'est bien.

Donc ce que je vais faire maintenant, c'est organiser tout cela pour rester organisé.

Donc j'aimerais que cela prenne deux colonnes.

Et j'aimerais que cela vienne ici et prenne deux colonnes.

Donc zoomons pour être sûr que cela est correctement organisé.

Donc cela n'est pas correctement organisé.

Et c'est parce que je veux quatre espaces de ligne avant cela.

Donc je vais apporter cela ici.

Lorsque je sélectionne cela, j'aurai 1234 et c'est bien.

Donc je vais apporter cela ici.

Et je vais descendre cela ici.

Donc c'est trié, nous avons cette section triée.

Donc la section suivante de cette page sera la section où j'écrirai un texte qui va dire les principales actions à investir.

Donc j'aimerais avoir huit espaces de ligne avant cela.

Donc je vais dire 12345678.

Je n'ai pas cela à entendre.

Maintenant, pour le texte ici.

J'aimerais que ce texte soit un texte de corps grand, pas un texte de corps grand gras.

Maintenant, après ce texte, j'aimerais avoir ce champ de recherche.

Donc je vais faire cliquer cela à ce point.

Et je vais simplement avoir un espace de huit px entre ce texte ici et le champ de saisie.

Donc je vais venir ici, étirer cela à ce point.

Et je vais changer le texte de recherche.

Donc changeons cela de stock à stocks.

Et c'est bien.

Donc le prochain composant que j'aimerais avoir est le composant de liste d'actions.

Donc je vais garder cela ici, et en fait lui donner un effet d'ombre afin que nous puissions le voir clairement.

Donc zoomons.

Donc je vais lui donner deux espaces, un, deux, et c'est bien.

Donc je vais faire cliquer cela parfaitement.

Et j'aimerais que cela s'arrête ici.

Et j'aimerais que cela s'arrête ici aussi.

Zoomez.

Donc je vais dupliquer cela et avoir cette maison.

Et dupliquons cela ici.

Dupliquons cela ici aussi.

Donc zoomons pour confirmer que tous nos composants sont parfaitement alignés.

Donc vous pouvez voir que cela est bien, cela est bien.

Cela est bien.

Et cela est bien.

Donc cela a l'air bien, maintenant avoir une section de portefeuille d'actions.

Maintenant, pour différencier les deux sections, je vais apporter le composant bouton, et je vais l'utiliser pour quelque chose de différent cette fois-ci.

Donc j'aurai 1-234-567-8910 1112 espaces.

Donc j'aurai 12 espaces de ligne ici, je vais zoomer, étirer cela à la fin comme ceci, je vais venir ici et aligner le contenu de ce bouton maintenant à gauche, puis je vais définir sa valeur de rembourrage supérieur à huit et la valeur de rembourrage inférieur à huit.

Maintenant, ce que j'ai ici sera le portefeuille d'actions.

Maintenant, pour que cela ait un aspect différent, je vais le garder sélectionné, venir ici maintenant pour définir la valeur de réduction de coin à zéro, comme ceci.

Maintenant, ce que nous allons avoir ici, ce sont les composants de la carte de dépôt.

Donc zoomons.

Et assurons-nous que cela est correctement organisé.

Donc j'aurai 1234 espaces avant cela.

Et c'est bien, je vais venir ici.

Maintenant, lui donner un effet d'ombre, comme ceci maintenant, le garder sélectionné, venir ici, maintenant changer la couleur.

Donc je vais venir ici, je vais changer la couleur en celle-ci.

Donc la couleur verte ici doit en fait être plus épaisse qu'elle ne l'est maintenant, comme ceci.

Donc je vais faire en sorte que cela ait deux colonnes, puis je vais le dupliquer et avoir cela aussi prendre deux colonnes.

Maintenant, vous pouvez aller de l'avant et avoir d'autres actions listées ici.

Cela si vous voulez avoir cela, et nous y sommes, nous avons terminé notre page d'investissement.

Maintenant, puisque nous ne pourrons pas afficher tout le portefeuille d'actions ici, j'aimerais avoir un texte voir tout ici.

Donc ce texte voir tout sera apporté ici, je vais copier ici.

Et je vais dupliquer ce texte voir tout.

Et je vais le garder ici aussi, et je vais changer la couleur de ce texte voir tout, ou changer cela et c'est bien.

Maintenant, le flux suivant sera le suivant.

Maintenant, supposons qu'un utilisateur aime cette action ici et que l'utilisateur veut investir dans cette action, cela signifie que l'utilisateur cliquera sur l'action et que l'utilisateur sera redirigé vers la page des détails de l'action.

Exact.

Donc faisons en sorte que cela se produise.

Je vais venir ici, sélectionner cette page, et je vais la dupliquer, venir ici et changer cela en détails de l'action.

Et c'est bien.

Donc pour la page des détails de l'action, je vais enlever tout cela et zoomer, puis aller au plugin d'icônes de plumes pour obtenir cette icône qui signifie revenir à la page précédente.

Et c'est tout.

Je vais l'obtenir.

Je vais l'apporter ici.

Et je vais m'assurer que cette icône est en fait à l'intérieur de la page des détails de l'action.

Et je vais prendre cela à ce point.

Et c'est trié, sélectionnez le vecteur de l'icône et je vais changer sa couleur en celle-ci.

Donc ce que nous avons ici, j'aimerais que nous ayons un titre ici qui va dire détails de l'action.

Et ce texte devrait avoir un textile de titre trois gras pour cela.

Donc je vais l'aligner au centre horizontalement.

Et c'est bien, maintenant changeons la couleur de cela et c'est bien.

Donc ce que j'aurai ici sera un composant que je vais créer, je vais simplement venir ici, je vais avoir ce cadre deux, le sélectionner et créer un cadre avec lui comme ceci, définir cela à huit, puis définir la couleur à cette vanne, définir la couleur à celle-ci, puis aller à brand fetch pour obtenir ce logo et placer le logo droit sur ces dispositions de cadre que je viens de créer.

Je vais l'attraper et le télécharger ici.

Maintenant, je vais le garder sélectionné et définir les contraintes horizontales à centre et les contraintes verticales à centre et c'est bien, donc ce que je vais faire maintenant, c'est garder ce cadre sélectionné, renommer cela en détail de l'action.

Et puis je vais venir ici et je vais en faire un composant.

Donc je vais aller à cette page maintenant.

Et ici, j'aurai ce composant de bannière de détails de l'action placé.

C'est tout ici.

Je vais le faire rester ici, étirer cela à ce point.

et étirer cela à ce point, c'est bien.

Donc je vais venir ici maintenant, faire cliquer cela.

Et aussi m'assurer que cela est cliqué parfaitement, comme ceci.

Donc ici, j'ai 123.

Faisons-en quatre.

Donc là, j'ai quatre espaces de ligne entre ce texte de détails de l'action et ce composant de bannière de détails de l'action.

Et c'est bien.

Donc zoomons.

La prochaine chose que j'aurai ici sera le prix de l'action.

Et la valeur d'appréciation, je vais m'assurer d'avoir 1234 espaces.

C'est bien.

Maintenant, je vais de l'avant pour créer un composant qui s'affiche ici et ce composant ira dans plus de détails sur l'action.

Donc allons-y et créons ce composant.

Donc pour créer ce composant, je vais venir ici, et maintenant sélectionner le cadre deux maintenant pour créer un cadre qui est de 42 px de haut, comme ceci.

Zoomez à ce point.

Lorsque je crée ce cadre ici, je vais venir ici et je vais créer un texte sur ce cadre, je vais dire ma position, je vais garder ce texte ici, comme ceci.

Et c'est bien.

Maintenant, pour ce texte, je vais utiliser le textile de corps petit que j'ai ici, qui est celui-ci.

Et c'est bien.

Maintenant, je vais de l'avant, je vais créer un autre texte ici, je vais en fait faire en sorte que cette boîte de texte soit de cette taille, je vais venir ici, maintenant taper 35.

Maintenant, je vais garder cette boîte de texte sélectionnée maintenant et aligner le contenu de cette boîte de texte pour rester à droite, sélectionner cette disposition de cadre maintenant, et puis en faire une disposition automatique.

Maintenant, je vais venir ici et je vais cliquer sur la valeur d'alignement et de remplissage, et définir le remplissage gauche à 16 et définir le remplissage droit à 16.

Puis définir le remplissage supérieur à 12 et le remplissage inférieur à 12.

Maintenant, j'aimerais que ce texte reste toujours ici et que ce texte reste toujours ici.

Donc je vais venir ici et maintenant changer cela de pact à espace entre.

Et c'est bien.

Donc si je viens ici maintenant, vous verrez que si je prends cela, cela reste toujours ici.

Et cela reste toujours ici.

La même chose se produit si je redimensionne le côté gauche ici, comme ceci.

Et c'est ce que je veux en fait.

Donc je vais le garder sélectionné, puis venir ici.

Maintenant, je vais sélectionner ce texte ici pour m'assurer que cela est défini à hog content, puis venir ici et sélectionner ce texte pour m'assurer que cela est défini à largeur fixe.

Et c'est bien.

Donc je vais sélectionner cela, et créer une disposition automatique sur cette disposition automatique maintenant, comme ceci, maintenant cette nouvelle disposition automatique est appelée brim 25.

Oui.

Donc à l'intérieur de cette nouvelle disposition automatique que je viens de créer, nous avons cette disposition automatique ici, qui est le cadre 24.

Je vais la sélectionner et la dupliquer verticalement comme ceci.

Maintenant, sélectionnez la disposition automatique du cadre 25, puis je vais définir l'espace entre les éléments à l'intérieur de la disposition automatique à quatre, lorsque je fais cela, je vais venir ici et maintenant changer la valeur de remplissage autour des éléments à zéro juste pour avoir cela maintenant, je vais venir ici et je vais définir la couleur pour cette disposition automatique du cadre 25 à celle-ci.

Maintenant, ce que je vais faire, c'est définir la valeur du rayon de coin pour cette disposition automatique à huit.

Maintenant, le rayon de coin ne sera pas visible.

Et c'est parce que cette disposition automatique ici reste au-dessus de cette disposition automatique.

Donc je vais sélectionner cette disposition automatique ici qui est en haut, et je vais venir ici, je vais cliquer sur les coins indépendants ici.

Et je vais définir la valeur du coin supérieur gauche à huit.

Et maintenant définir la valeur du coin supérieur droit à huit, comme ceci, venir ici, sélectionner cela, cliquer sur les coins indépendants et définir la valeur du coin inférieur droit à huit et je vais définir la valeur du coin inférieur gauche à huit.

Et c'est trié.

Maintenant, pour chacune de ces lignes ici, je vais sélectionner cela, puis venir ici et je vais changer sa valeur de redimensionnement horizontal à remplir le conteneur.

Je vais faire cela pour cela aussi.

Faire cela pour cela aussi.

Et faire cela pour cela.

Et c'est bien.

Maintenant, voyons si cela répond comme nous le voulions.

Et c'est le cas maintenant, éditons ces valeurs que nous avons ici.

Donc je vais venir ici et définir cela à ouvert et définir cela à précédent fermé et définir cela à capitalisation boursière.

Maintenant, pour cela, je vais changer la valeur à So, venir ici, précédent fermé, dire cela plus cela et ouvert, n'importe quelle valeur là, en fait, n'importe quelle valeur, là sera bien, en fait.

Avec cela, j'ai créé avec succès ces composants qui nous permettent de montrer plus de détails sur cette action.

Donc je vais venir ici et ne pas appeler cela tableau de détails.

En fait, je vais l'appeler tableau de détails des actions.

Et je vais l'enregistrer, puis venir ici et en faire un composant.

Et voici cela.

Donc je vais zoomer, et je vais aller à cette page, et apporter ce composant.

Donc venons ici, cliquons sur l'onglet Assets, venons ici, attrapons cela et plaçons-le ici.

Donc, gardez-le sélectionné, et je vais ajouter un effet d'ombre, comme ceci, puis zoomez pour que je puisse calculer les espaces de ligne mieux.

Donc à partir de cet élément ici, j'aimerais avoir 123 et quatre espaces de ligne avant cela, zoomons, et étirons cela à ce point.

Et c'est bien.

Donc je peux aller de l'avant, sélectionner ce texte, pour que je puisse changer les couleurs, sélectionner tout cela, venir ici et changer cela.

À cela, cela n'était pas sélectionné.

Donc je vais changer cela.

Pour cela aussi, je vais changer cela.

Maintenant, le prochain composant que j'aimerais avoir ici servira de liens au cas où l'utilisateur souhaiterait en savoir plus sur l'action et l'entreprise qui possède l'action.

Donc je vais de l'avant, et j'aurai cela, c'est moi qui crée cela de la même manière que j'ai créé ce composant de portefeuille d'actions ici.

La seule différence ici est que j'ai simplement changé la couleur de ce que j'ai ici à cela.

Donc zoomons pour être sûr que nous plaçons nos éléments correctement.

Donc je vais venir ici, je vais avoir 1234 espaces de ligne avant cela.

Et c'est bien.

En bas ici, j'aurai un composant de bouton juste au cas où l'utilisateur serait satisfait de ce qu'il voit ici sur cette page de détails de l'action.

Et ce bouton sera un bouton d'investissement.

Donc je vais zoomer pour calculer l'espace mieux.

Donc j'ai 123456 espaces de ligne ici.

Et j'aimerais m'arrêter au sixième espace de ligne.

Et c'est tout.

Donc si un utilisateur aime ce qu'il voit ici, sur la page de détails de l'action, l'utilisateur peut aller de l'avant et cliquer sur le bouton InVEST ici.

Si l'utilisateur n'est pas satisfait, l'utilisateur peut venir ici et cliquer sur ce bouton pour revenir à la page précédente où l'utilisateur devra encore voir toutes les actions listées ici.

Donc c'est tout.

Donc la page suivante ici sera la page à laquelle l'utilisateur ira lorsqu'il cliquera sur ce bouton d'investissement ici, j'aimerais que nous allions de l'avant et créions cette page.

Donc je vais dupliquer cela.

Donc je vais venir ici, je vais renommer cela en entrer le montant de l'action, peu importe comment vous voulez l'appeler, c'est bien.

Donc je vais venir ici, je vais changer cela en entrer le montant.

Et c'est bien.

Donc je vais de l'avant et j'aurai cela ici.

Maintenant, c'est moi qui utilise un champ de saisie et un bouton, aussi simple que cela.

Donc je vais zoomer à ce point et calculer l'espace mieux, je vais sélectionner cet élément et calculer l'espace à partir de cet élément, je vais dire 123456.

Donc j'aimerais six espaces de ligne là.

Donc je vais sélectionner cela.

Et je vais m'assurer que cela s'aligne parfaitement.

Et c'est tout.

Maintenant, l'espace entre ce champ de saisie et ce bouton est de 1234.

Et c'est bien.

Comment venir ici.

Maintenant, vérifiez ce bouton d'investissement.

Et cette page est triée.

Maintenant, lorsque l'utilisateur entre le montant qu'il souhaite investir dans l'action, l'utilisateur ira de l'avant et cliquera sur ce bouton Continuer.

Maintenant, lorsque l'utilisateur clique sur ce bouton Continuer, l'utilisateur sera redirigé vers une autre page.

Maintenant, cette page sera celle où l'utilisateur sera présenté avec un résumé de l'investissement que l'utilisateur est sur le point de faire.

Maintenant, je vais venir ici.

Je vais sélectionner cela et le dupliquer et le renommer en résumé des investissements.

Maintenant, je vais zoomer et venir ici.

Et maintenant, enlever tout cela.

Et j'aurai cela ici.

Maintenant, cela va être un résumé de l'investissement que l'utilisateur est sur le point de faire.

Et si l'utilisateur est d'accord avec le résumé qu'il voit ici, alors l'utilisateur ira de l'avant et entrera son code PIN secret ici, avant de cliquer sur le bouton InVEST pour finalement faire l'investissement.

Donc je vais venir ici, sélectionner tout cela, et calculer les espaces de ligne mieux.

Donc je vais venir ici, je vais garder cela ici, je vais m'assurer que j'ai 123456 espaces de ligne là.

Et c'est bien.

Donc je vais zoomer à ce point, et cette page est triée.

Donc c'est le flux jusqu'à présent.

Maintenant, lorsque l'utilisateur est sur la page d'accueil ici, et que l'utilisateur veut investir, l'utilisateur cliquera sur ce lien d'investissement ici dans le composant de navigation inférieure.

C'est ici dans le composant de navigation inférieure.

Lorsque l'utilisateur clique sur ce lien, l'utilisateur est redirigé vers la page d'investissement, qui est celle-ci.

Et si l'utilisateur parcourt la liste des actions que nous avons ici, et que l'utilisateur est intéressé à investir dans l'une de ces actions, disons celle-ci, l'utilisateur cliquera dessus.

Et lorsque l'utilisateur clique dessus, l'utilisateur est redirigé vers la page de détails de l'action ici, qui est celle-ci.

Maintenant, lorsque l'utilisateur est redirigé vers cette page, l'utilisateur lira à propos de l'action.

Si l'utilisateur aime ce qu'il voit ici, l'utilisateur cliquera sur le bouton InVEST ici.

Lorsque l'utilisateur le fait, l'utilisateur est redirigé vers cette page, où il devra entrer le montant qu'il souhaite investir dans cette action.

Maintenant, lorsque l'utilisateur entre le montant ici, l'utilisateur cliquera sur le bouton Continuer ici.

Lorsque l'utilisateur le fait, l'utilisateur est redirigé vers cette page où il verra un résumé de l'investissement qu'il est sur le point de faire.

Ensuite, si l'utilisateur est d'accord avec cela, l'utilisateur entrera son code PIN secret ici, puis cliquera sur le bouton InVEST ici pour que l'investissement soit réussi.

Donc avant de continuer, j'aimerais venir ici et changer cela en résumé.

Donc je vais le garder sélectionné et l'aligner au centre horizontalement, je vais aussi venir ici, sélectionner ceux-ci et m'assurer qu'ils sont alignés au centre horizontalement.

Maintenant, je vais venir à cette page, qui est la page d'investissement.

Et j'aimerais avoir un titre ici, je vais changer cela en investir une heure, l'aligner au centre horizontalement, comme ceci.

Maintenant, lorsque l'utilisateur clique sur ce bouton d'investissement ici, l'utilisateur verra une page qui dit investissement réussi ou investissement fait ou peu importe, juste un message de succès.

Donc je vais venir ici, je vais sélectionner cela, et je vais le dupliquer, et je vais le renommer en investissement réussi.

Et je vais l'enregistrer.

Donc ce que je vais avoir ici sera similaire à ce que j'ai ici.

Donc ce que je vais faire, c'est enlever tout ce que j'ai ici sur cette page, je vais enlever cela.

Aussi, j'étais censé enlever cela aussi, ce titre de carte de débit ici, je vais l'enlever.

Aussi, je vais simplement sélectionner tout cela, le dupliquer.

Et je vais l'apporter ici, comme ceci.

Et je vais zoomer.

Et je vais simplement changer cela en succès.

Je vais le garder sélectionné et l'aligner au centre horizontalement.

Maintenant, je vais venir ici, je vais dire retourner à la maison.

Et c'est tout.

C'est trié.

Donc jusqu'à présent.

Donc jusqu'à présent, nous avons accompli la tâche d'authentification, nous avons accompli la tâche de financement, et nous avons accompli la tâche d'investissement.

Maintenant, nous allons de l'avant pour créer plus d'écrans qui rendront en fait l'expérience utilisateur sur cette application meilleure.

Donc l'un de ces écrans sera la page des détails de la transaction.

Et c'est la page à laquelle l'utilisateur sera redirigé lorsqu'il cliquera sur l'une de ces cartes ici sous la section des transactions récentes.

Donc si l'utilisateur clique sur cette carte, par exemple, l'utilisateur sera redirigé vers une page où il verra tous les détails de cette transaction.

Donc allons-y et créons cette page.

Donc je vais venir ici, je vais sélectionner celle-ci ici, et je vais la dupliquer.

Et j'ai cela.

Donc je vais la garder sélectionnée, venir ici.

Et nous allons appeler cela détails de la transaction.

Et pour la page des détails de la transaction, je vais enlever cela.

Et je vais enlever cela.

Maintenant, c'est ce que j'aurai sur cette page de détails de la transaction.

C'est tout, c'est aussi simple que cela.

Donc tout d'abord, calculons notre espace de ligne pour être sûr qu'il est parfaitement défini.

Donc je vais avoir cela ici et calculer 123456.

Donc j'aime que cela commence ici 123456, je vais faire cliquer cela correctement, et faire cliquer cela correctement.

Et c'est bien.

Donc cela ici est pour afficher la date de la transaction à laquelle cette transaction a eu lieu.

Donc cela n'est pas complet, en fait, je peux donner un peu d'espace ici et dire 1603, comme ceci, pour que nous puissions dépeindre la date et l'heure de la transaction.

Et c'est bien.

Maintenant, ce que nous avons ici est le montant de la transaction.

Et ici, nous avons le montant en mots, ici nous avons le type de transaction, qui est un retrait, ici nous avons la remarque de la transaction, qui est pour Netflix, et le statut de cette transaction est réussi.

Donc je vais sélectionner tout cela, zoomer.

Et je vais m'assurer d'avoir 1234 espaces photo là.

Maintenant, pour le composant de bouton ici, comment sélectionner cela, et je vais m'assurer d'avoir 123456, je vais m'assurer d'avoir six espaces de ligne là.

Et c'est bien.

Donc si un utilisateur vient ici, et que l'utilisateur clique sur l'une de ces transactions, l'utilisateur ira à une page de détails de la transaction, où l'utilisateur verra plus de détails sur cette transaction.

Donc je vais de l'avant et je vais créer d'autres pages, qui vont rendre l'expérience sur cette application meilleure.

Maintenant, avant de faire cela, j'aimerais donner à cette page de détails de la transaction un titre de page.

Donc, dupliquer cela, et je vais l'apporter ici, l'appeler détails de la transaction, l'aligner au centre horizontalement, comme ceci.

Et c'est bien.

Donc le flux suivant que j'aimerais concevoir sera le flux auquel l'utilisateur ira lorsqu'il cliquera sur cette icône de menu ici.

Maintenant, lorsque l'utilisateur clique sur cette icône de menu, j'aimerais qu'une barre de menu glisse avec d'autres options que l'utilisateur peut utiliser pour améliorer son expérience sur cette application.

Donc comment faisons-nous cela ? C'est simple, donc je vais venir ici, j'aurai un iPhone 13 Promax, ici, je vais renommer cela en barre de menu de gestion, et je vais le garder sélectionné, venir ici, et je vais diviser la largeur par deux, comme ceci.

Et j'aurai cela.

Donc je pourrais décider d'aller de l'avant et d'augmenter cela davantage.

Et ce que je vais faire, c'est que je vais simplement avoir le logo ici.

Et je vais de l'avant pour avoir des éléments de liste de liens de menu.

Donc le premier lien de menu que j'aurai ici sera les transactions récentes.

Je vais le garder sélectionné ici.

Et je vais changer cela en un texte de corps petit comme ceci.

Maintenant, zoomons.

Gardez cela ici.

Je vais le garder sélectionné, et je vais créer une disposition automatique sur ce texte.

Maintenant, cette disposition automatique, j'aimerais que la disposition automatique ait une valeur de remplissage autour des éléments de 16.

Et j'aimerais aussi que la valeur d'alignement soit définie à gauche.

Donc je vais venir ici maintenant et je vais créer une autre disposition automatique par-dessus.

Maintenant, cette nouvelle disposition automatique que j'ai créée aura une valeur de remplissage autour des éléments de zéro, comme ceci.

Maintenant, je vais venir ici et étendre cette nouvelle disposition automatique ici dans l'arborescence de conception.

Lorsque je fais cela, je vais sélectionner la disposition automatique des transactions récentes, et je vais la dupliquer comme ceci.

Maintenant, allez de l'avant pour éditer tous ces deux autres liens.

Avant de faire cela, sélectionnez la disposition automatique principale maintenant, qui est le cadre 34.

Ici, et définissez la valeur d'espacement entre les éléments à deux, quatre, juste pour avoir cela.

Donc le lien suivant ici sera la gestion des cartes, j'aurai cela comme portefeuille d'investissement.

Je vais avoir cela comme demande de relevé.

Et j'aurai cela comme paramètres et c'est bien.

Mais je vais venir ici, je vais sélectionner tous ces textes.

Et je vais changer la couleur en celle-ci.

Et c'est ce que nous avons.

Donc chaque fois que l'utilisateur clique sur cette icône de menu, cela va glisser de la gauche.

Et c'est bien.

Donc allons-y pour créer les routes auxquelles les utilisateurs iront lorsqu'ils cliqueront sur ce lien de transaction ici dans la section de navigation inférieure.

Donc pour ce faire, je vais venir ici, je vais sélectionner cela ici, et je vais le dupliquer.

Je vais renommer cela en transaction, sans zoomer, venir ici.

Et je vais dire, transaction.

Le garder sélectionné et l'aligner au centre horizontalement, puis je vais enlever tout cela.

Maintenant, j'aimerais avoir deux composants de carte ici, un pour l'action de retrait, et un pour l'action de dépôt, aussi simple que cela.

Donc allons-y et créons ces composants de carte.

Donc je vais venir ici, créer un texte ici, je vais simplement dire dépôts.

Et je vais garder ce texte sélectionné.

Venez ici, et je vais opter pour le texte de titre trois gras, comme ceci.

Maintenant, je vais venir ici et j'aurai un cadre de 48 par 48 px, avec un rayon de coin réduit de 100, puis je vais venir ici et je vais lui donner une couleur, qui est verte, puis aller au slogan des icônes de plumes.

Et je vais obtenir une icône de flèche entrante là, qui est celle-ci, c'est notre icône de flèche entrante, je vais la prendre ici, puis venir ici et définir la valeur de contraintes à centre et centre.

Maintenant, je vais venir ici, sélectionner le vecteur de l'icône, et maintenant changer la couleur en celle-ci.

Donc je vais apporter cela ici, sélectionner cela, et puis créer une disposition automatique dessus.

Maintenant, pour cette disposition automatique, je vais venir ici et je vais définir la propriété d'alignement à centre.

Lorsque je fais cela, je vais venir ici et définir la valeur d'espacement entre les éléments à 16, puis aller de l'avant pour ajouter une couleur de remplissage.

Lorsque j'ajoute la couleur de remplissage, je vais venir ici et je vais définir la valeur de remplissage autour des éléments à huit.

Pour avoir cela, puis je vais de l'avant pour définir la valeur de réduction de coin à huit.

Maintenant, je vais venir ici maintenant, sélectionner le texte de dépôt et changer la valeur de redimensionnement horizontal de hog content à remplir le conteneur.

Donc c'est la carte d'action de dépôt que j'aurai sur cette page.

Je vais venir ici, sélectionner ce texte et changer la couleur en celle-ci.

Maintenant, je vais venir ici maintenant, je vais aller à cette page.

Et je vais apporter le composant VAT.

C'est tout.

Je vais le garder sélectionné.

Et je vais lui donner un effet d'ombre, zoomer à ce point.

Je vais apporter cela ici.

Et je vais m'assurer d'avoir 123456 espaces de ligne.

Et c'est bien.

Donc je vais étirer cela à ce point comme ceci.

Et je vais créer un composant ou un retrait.

Je vais dupliquer ce composant, qui est le composant maître, prendre des notes.

Et je vais détacher l'instance, lorsque je détache l'instance, je vais sélectionner le cadre circulaire là, je vais rendre cela rouge, je vais sélectionner le cadre de la flèche là, et je vais définir la valeur de rotation à 180 degrés.

Et c'est trié, aussi simple que cela.

Donc je vais venir ici, sélectionner cela, venir ici et aller à l'arborescence de conception et renommer cela en action de retrait.

Lorsque je fais cela, je vais le garder sélectionné.

Et je vais cliquer sur Créer des composants ici.

Et c'est bien.

Donc je vais venir ici maintenant, je vais l'apporter ici, lui donner un effet d'ombre, comme ceci, je vais avoir cela ici.

Et je vais étendre cela à ce point.

Et c'est bien.

Donc enfin, sur cette page, j'aimerais avoir un bouton ici qui peut être utilisé pour effectuer l'action d'ajout de carte.

Donc je vais garder cela ici, j'aurai un espace de marge de 16 px ici, qui est de deux espaces de ligne.

Un et deux sont garder le bas sélectionné.

Maintenant, définir la valeur de rembourrage supérieur à huit et la valeur de rembourrage inférieur à huit.

Puis je vais changer le contenu du texte là en ajouter une carte comme ceci.

Et c'est trié.

Donc c'est la page à laquelle les utilisateurs iront lorsqu'ils cliqueront sur ce lien de transaction ici dans le composant de navigation inférieure.

Donc c'est là que je vais m'arrêter pour ce projet en ce qui concerne la création d'écrans et je vais m'arrêter ici parce que nous avons accompli la tâche utilisateur réelle pour cette application.

Maintenant, j'aimerais que vous preniez cela comme vos propres missions et lorsque vous aurez terminé.

Vous pouvez me taguer sur Twitter, mon handle Twitter est, vous pouvez aller de l'avant et me taguer pour votre mission sur Twitter.

Maintenant, la mission est la suivante, j'aimerais que vous ayez une icône de notifications ici.

Et l'icône de notifications devrait amener les utilisateurs à une page de notifications lorsqu'ils cliquent dessus.

Et les notifications peuvent être n'importe quoi.

Cela peut être des newsletters, cela peut être des notifications de transaction, cela peut être n'importe quoi.

Maintenant, placez l'icône de notifications ici et créez une page de notifications à laquelle les utilisateurs iront lorsqu'ils cliqueront sur l'icône de notifications.

Maintenant, après cela, venez ici et créez une route ou créez une page à laquelle l'utilisateur ira lorsqu'il sélectionnera ajouter une autre carte, créez une page que l'utilisateur peut utiliser pour ajouter les détails de sa carte de débit à cette application.

La troisième mission sera la suivante, venez ici et créez une page que l'utilisateur peut utiliser pour demander son relevé.

Après cela, créez une page de paramètres, maintenant sur cette page de paramètres, laissez l'utilisateur pouvoir définir son code PIN secret là.

Maintenant, ici, qui est le lien de gestion des cartes, l'utilisateur devrait pouvoir supprimer une carte qu'il a ajoutée à cette application, ou ajouter une autre carte qu'il veut ajouter à cette application.

Donc cela devrait être possible lorsque l'utilisateur clique sur la gestion des cartes ici.

Cela devrait amener l'utilisateur à une page où il pourra voir toutes les cartes qu'il a sur cette application.

Et aussi, ils devraient avoir la capacité sur cette page d'ajouter et de supprimer des cartes.

Maintenant, prenez des notes, ce bouton Ajouter une carte ici devrait amener l'utilisateur à la même page que vous allez créer pour cet ajout d'une autre carte ici, comme ceci.

Et aussi, ce lien de transactions récentes ici devrait amener les utilisateurs à une page dédiée pour la liste de toutes les transactions récentes.

Ce lien de portefeuille d'investissement ici devrait amener l'utilisateur à une page dédiée de tous les investissements que l'utilisateur a faits sur cette application.

Donc allez-y et construisez toutes ces pages, afin que vous puissiez avoir une expérience utilisateur complète et complète.

Maintenant, enfin, pour la mission, juste avant que j'oublie, venez ici et créez une page de mot de passe oublié, créez une page ici que l'utilisateur peut utiliser pour réinitialiser son mot de passe au cas où l'utilisateur oublierait son mot de passe.

Et cela va être tout.

Donc à ce stade, ce que nous allons faire est de créer un prototype de tous ces designs que nous avons créés, nous allons les lier parfaitement et voir comment cela va fonctionner.

Donc pour ce faire, zoomons, venons ici, je vais commencer par l'écran de démarrage.

Donc je vais le sélectionner.

Venez ici, cliquez sur prototype.

Lorsque je clique sur prototype, je vais venir ici et je vais connecter l'écran de démarrage à cette page.

Maintenant, l'action sera une action de tapotement.

Et c'est parce que c'est une application mobile en fait.

Donc nous devons en fait tapoter cet écran avec nos doigts.

Maintenant, lorsque l'utilisateur tape sur l'écran, l'utilisateur doit se déplacer ou doit naviguer, vous pouvez voir l'action ici doit naviguer vers la page de sélection de l'auteur, qui est celle-ci.

Maintenant, l'animation de transition ou l'animation de navigation doit être une animation intelligente.

Donc ce sera une animation de fondu.

Et j'aimerais que cette animation de fondu soit de 800 millisecondes.

En fait, j'aimerais que ce soit une animation de fondu et de sortie, comme ceci.

Oui, c'est mieux pour moi.

Donc je vais venir ici maintenant.

Et je vais dire d'accord, lorsque l'utilisateur clique sur le bouton de connexion ici, l'utilisateur doit aller à la page de connexion.

Et je vais garder tous les réglages tels quels.

Maintenant, lorsque l'utilisateur clique sur le bouton commencer ici, l'utilisateur doit aller à la page d'inscription.

Donc je vais venir ici, cliquer sur ce bouton de connexion ici.

Et je vais dire lorsque l'utilisateur clique sur ce bouton de connexion après avoir entré son adresse e-mail et son mot de passe, l'utilisateur doit aller à la page d'accueil, qui est celle-ci.

Maintenant, lorsque l'utilisateur clique sur le bouton d'inscription, l'utilisateur doit aller à la page de vérification où il devra entrer le code de vérification envoyé à son numéro de téléphone.

Maintenant, lorsque l'utilisateur tape le code de vérification ici, l'utilisateur doit cliquer sur le bouton Vérifier.

Et lorsque l'utilisateur clique sur le bouton Vérifier, cela doit s'afficher comme une fenêtre contextuelle, donc je vais le connecter à cela.

Donc je vais connecter cela et je vais le garder comme sur le dessus, puis pour l'action, je vais la définir à ouvrir le calque, puis venir ici et je vais la garder définie à centrée, en fait, après avoir défini ces deux à centrée, je vais venir ici et je ne vais pas sélectionner cette option.

Et c'est parce que je ne veux pas que l'utilisateur ferme la fenêtre contextuelle.

S'il clique par erreur à l'extérieur de la fenêtre contextuelle, j'aimerais que l'utilisateur clique sur continuer ici.

Donc cette autre option ici, j'ai sélectionné, c'est la propriété d'ajouter un arrière-plan derrière le calque ou l'option d'ajouter un arrière-plan derrière le calque.

Lorsque je la sélectionne, cela signifie que lorsque la fenêtre contextuelle s'affiche, l'arrière-plan sera estompé.

Donc je vais définir la valeur d'opacité à 35%.

Et j'aimerais que l'animation soit une animation instantanée.

Et cela va être bien.

Maintenant, lorsque l'utilisateur clique sur ce bouton Continuer, l'utilisateur doit être redirigé vers la page d'accueil.

Maintenant, lorsque vous créez un prototype comme celui-ci, vous pouvez simplement prendre la connexion ici à n'importe quelle page, puis venir ici et la définir à la page que vous voulez définir.

Donc je vais venir ici et je vais sélectionner Accueil.

Et vous pouvez voir que la connexion est allée à la page d'accueil, comme ceci.

Donc l'authentification est définie.

Maintenant, lorsque les utilisateurs viennent à la page d'accueil, et que les utilisateurs cliquent sur cette icône de menu, l'utilisateur doit être redirigé vers le menu de la barre de menu, ici, c'est ce qui doit s'afficher lorsque l'utilisateur clique sur cette icône de menu.

Maintenant, j'aimerais que ce menu de la barre de menu ou que cette barre de menu glisse en fait de la gauche.

Donc je vais cliquer sur cette connexion ici pour faire apparaître la page des détails de l'interaction.

Maintenant, pour l'action ici, je vais la définir à ouvrir le calque, je vais venir ici et je vais la définir à manuelle.

Lorsque je la définis à manuelle, cela signifie que je vais être celui qui va définir comment l'interaction va se produire.

Donc je vais attraper cela, et je vais le placer ici, comme ceci.

C'est ainsi que cela va ressembler lorsque vous cliquez sur cette icône de menu.

Maintenant, je vais venir ici.

Et je vais dire fermer cette barre de menu glissante, lorsque l'utilisateur clique à l'extérieur de celle-ci, je vais sélectionner cela et ici, j'aurai une propriété d'arrière-plan derrière le calque sélectionnée, aussi une valeur d'opacité définie à 35%.

Maintenant, pour l'animation, je vais changer cela de l'instance, à déplacer comme ceci.

Et pour l'action de déplacement, j'aurai un déplacement de la gauche et j'aurai la vitesse de cette animation définie à 800 millisecondes.

Maintenant, je vais venir ici, je vais cliquer sur ce bouton de compte de financement ici.

Et je vais dire d'accord, lorsque l'utilisateur clique sur ce bouton, cela doit nous montrer une fenêtre contextuelle.

Donc nous savons tous comment définir une fenêtre contextuelle, n'est-ce pas.

Donc je vais changer cela en ouvrir le calque.

Le garder défini à centré, et ajouter une action d'arrière-plan derrière le calque.

Et aussi, si l'utilisateur décide de ne plus financer le compte, il peut simplement cliquer à l'extérieur de la fenêtre contextuelle et revenir à la page d'accueil.

Donc je vais sélectionner cela.

Je vais le garder défini à 35%.

Et pour l'animation ici, je vais la garder définie à l'instance.

Donc je vais fermer cela.

Maintenant, si l'utilisateur sélectionne l'option de virement bancaire, l'utilisateur doit venir ici, aussi simple que cela.

Et si l'utilisateur clique sur copier le numéro de compte, ce numéro de compte sera copié dans le presse-papiers de l'utilisateur.

Et lorsque cela se produit, l'utilisateur viendra ici et cliquera sur cette flèche ici pour revenir à la page d'accueil, je vais définir cela de l'instant à l'animation intelligente.

Et c'est bien.

Donc si l'utilisateur clique sur l'option de carte de débit ici, l'utilisateur sera redirigé vers cette page.

Si l'utilisateur est redirigé vers cette page, et que l'utilisateur tape les montants qu'il essaie en fait de financer le compte avec, alors l'utilisateur ira de l'avant pour taper ou cliquer sur le bouton de financement du compte ici.

Et lorsque l'utilisateur le fait, l'utilisateur viendra à cette page où l'utilisateur aura un message qui dit compte financé avec succès.

Maintenant, à ce stade, nous allons vouloir que l'utilisateur aille directement à la page d'investissement.

Donc je vais sélectionner ce bouton maintenant.

Et je vais prendre ce flux à la page d'investissement, qui est celle-ci.

Donc lorsque l'utilisateur arrive ici, je vais enlever l'icône de menu ici, en fait, lorsque l'utilisateur arrive ici, et qu'il veut investir dans l'une de ces actions listées, disons celle-ci, l'utilisateur cliquera dessus et l'utilisateur sera redirigé vers la page de détails de l'action.

Lorsque l'utilisateur arrive à la page de détails de l'action et qu'il est d'accord avec tous ces détails ici.

L'utilisateur cliquera sur le bouton InVEST ici.

Et lorsque l'utilisateur le fait, l'utilisateur viendra ici et devra entrer les montants qu'il souhaite investir dans ces actions.

Lorsque l'utilisateur entre le montant et que l'utilisateur clique sur le bouton Continuer, l'utilisateur sera redirigé vers cette page, qui est celle où l'utilisateur verra un résumé de l'investissement qu'il est sur le point de faire.

Maintenant, si l'utilisateur est satisfait de ce résumé, l'utilisateur ira de l'avant et tapera son code PIN secret ici, puis cliquera sur ce bouton d'investissement.

Et lorsque l'utilisateur le fait, l'utilisateur sera redirigé vers cette page, qui est une page de succès, qui va informer l'utilisateur que, hé, vous avez investi avec succès dans cette action.

Donc l'utilisateur viendra ici et cliquera sur le bouton Retour à l'accueil, et je vais le ramener à la page d'accueil, comment sélectionner l'accueil ici.

Donc venons ici, voyons les autres liens que nous n'avons pas créés.

Donc disons que l'utilisateur essaie de voir le détail de la transaction de l'une de ces transactions récentes ici, oui, voyons la transaction de retrait ici, vous verrez que je serai redirigé vers la page de détails de la transaction pour cette transaction.

Lorsque j'ai terminé de la parcourir, je vais cliquer sur Terminé.

Et je serai redirigé vers la page d'accueil.

Maintenant, que se passe-t-il si je viens ici et que je clique sur ce lien d'investissement ici dans le composant de navigation inférieure.

Je serai redirigé vers la page d'investissement.

Et je pourrai encore investir dans une action comme ceci.

Maintenant, que se passe-t-il si je viens ici et que je clique sur le lien de transaction ici, je serai redirigé vers cette page où j'aurai l'option de déposer des fonds ou de retirer des fonds.

Et j'aurai également l'option d'ajouter une carte.

Maintenant, si je suis d'accord avec cela, je vais venir ici, et je vais cliquer sur cette flèche pour revenir à la page d'accueil et cette flèche n'est pas active.

Donc je vais régler cela, venir ici et connecter cette flèche à la page d'accueil et ce sera un événement de tapotement.

Donc lorsque je reviens ici, lorsque je clique sur cette flèche maintenant, vous verrez que je suis redirigé vers la page d'accueil.

Donc allez-y, créez les autres liens et les autres routes comme votre mission, puis taggez-moi dessus sur Twitter.

Donc c'est tout pour ce cours.

Si vous avez trouvé ce cours utile, allez-y, cliquez sur le bouton s'abonner, laissez un commentaire dans la section des commentaires.

Et restez à l'écoute pour plus de contenu.

Merci et à bientôt dans un autre cours.