UI / UX d'application Web de mode Figma - Concevoir une application Web complète UI / UX - Apprendre des fonctionnalités avancées de Figma

1. Introduction: Bienvenue dans cette application Web Figma, cours de conception UI UX. Je m'appelle Danny Chelsea et je serai votre instructeur dans ce cours. Dans ce cours, vous allez concevoir une application web de mode complète, UI UX. Il s'agit donc de l'application complète que vous allez concevoir dans ce cours. Pendant que vous concevez cette application Web, l' interface utilisateur utilisateur peut alarmer et différents types de techniques et meilleures pratiques de Figma. Je vais vous montrer comment préparer votre projet ? Comment faire de la conception du système, de la conception de systèmes de couleurs, du système de grille, de créer un composant , de créer un groupe, etc. Jetons un coup d'œil à l'application que vous allez concevoir dans ce cours. Il s'agit donc de l'application complète que vous allez concevoir ici. En plus, nous avons notre objet de navigation, puis nous avons nos gentils hétérosexuels. Et après cela, nous avons nos articles de mode femme, des articles de mode pour hommes. Nous avons notre pigeon est montré, puis la catégorie abonnement sexuel et notre pied de page. Ici, dans la section principale, nous pouvons voir que nous avons ce bouton de défilement horizontal. Donc, si je clique sur l'Horrigan cette chromatide va faire défiler horizontalement. Je vais cliquer ici. Il va revenir à la première position. Même en faisant cela, nous pouvons également vous distribuer horizontalement. Nous allons également apprendre comment faire ce type d' options de défilement dans Figma. Et à partir de là, si je clique sur cet article, nous pouvons voir un mannequin fonctionne avec nos informations sur les articles de mode dans la boîte du modèle. Nous avons également ce renflement sur les options esco. Vous pouvez donc faire vos articles de cette façon, ou simplement cliquer sur le bouton et ensuite nous avons nos informations, et après cela, nous avons cette icône de fermeture. Si je clique ici, il va être supprimé. Et si je l'ouvre à nouveau, et si je clique sur notre côté, il va également se retirer d'ici. Et deuxièmement, pendant que vous concevez cette section de catégorie, vous allez apprendre à travailler avec des images. Dans Figma, vous pouvez voir différents types de formes que j'ai ajoutées dans ces images dans cette section de catégorie jus. Je vais donc vous montrer comment sélectionner des images, comment utiliser des images dans Figma. Ensuite, nous avons nos sections d'abonnement et nos sections de pied de page. Vous allez également apprendre beaucoup de choses sur les plugins Figma. Vous pouvez voir toutes ces icônes que nous avons dans cette application Web que j'utilise depuis le plugin. Vous allez donc également apprendre à utiliser un autre type de plug-ins pour les icônes et autres arrêts. Et nous avons également nos fonctionnalités d' inscription. Donc, si je clique sur le bouton S'inscrire, cela va afficher notre fenêtre contextuelle modale. Et ce formulaire d'inscription. Si je clique sur l'inscription, je peux accéder à la page de connexion. Et à partir de la connexion, j'ai basé sur ODP. Et après avoir vérifié ce RTP, nous pourrons accéder à notre domicile. Et une chose est remarquable ici, c'est que pendant que nous montrons l'inscription, nous pouvons voir un peu d' animation et de transition à partir de différents sites. Donc, ce que vous allez faire de ce type de prototype, vous allez apprendre à utiliser l'animation, superposition et explorer différents types de prototypes, de fonctionnalités, par exemple. Donc, si je clique dessus, nous pouvons voir que la connexion vient du côté droit. Et si je clique sur la connexion, elle vient du haut. Et si je clique sur la périphérie, c'est parti. Et maintenant, nous pouvons voir notre page d'accueil. Il en va de même ici. Vous pouvez donc voir peu d'animation au moment de l'offre. Vous allez également apprendre à faire du prototypage dans ce cours. Ce cours vous aidera beaucoup à améliorer vos compétences. Et surtout, après avoir terminé ce cours, vous aurez un projet complet que vous pourrez ajouter à votre portefeuille. Par conséquent, je vais vous cacher, vous encourager à profiter de ce cours. On se voit dans la classe. 2. Conception de grille de mise en page et de système de couleur: Bienvenue dans cette conférence. Dans cette partie, nous allons commencer à travailler sur notre application de mode ou web, UI UX. Dès que vous vous connectez à votre compte Figma, ce type d'interface utilisateur s'affiche. À partir de là, nous avons un nouveau fichier de conception si rapide que nous devons créer, que nous devons ouvrir le fichier InDesign. Et après cela, nous devons sélectionner nos amis. Ici, sur la barre supérieure, vous voyez généralement tous les outils ou Figma. À partir de là, nous devons sélectionner un cadre. Je vais donc sélectionner le cadre ici dans l'éruption de ce coin. Cela va vous donner quelques options. Donc, sous cet arrêt de deck, je vais sélectionner cette option indexée. Maintenant, il nous donne un seul cadre, non ? Nous allons donc concevoir ce genre de mode nulle part, mais pas exactement la même, car nous allons ajouter quelques fonctionnalités supplémentaires et quelques changements, pas seulement pour à des fins de référence, sorte que nous puissions simplement examiner la section que nous avons. Très bien, alors passons aux projets si rapidement avant de commencer n'importe quelle conception, il est toujours judicieux de préférer conception de votre système afin de savoir quel type de couleur, quel type de pont, n'importe quel type de pont. style que vous souhaitez utiliser. Et ensuite, vous pouvez le réutiliser de cette façon. Vous pouvez rendre votre design identique pour chaque page. Il va organiser votre projet et il aura l'air parfait au pixel. Très bien, si vite. Et nous devrons créer une grille de mise en page. Je vais donc créer une grille de mise en page ici, et cela va nous donner ce genre de grille, mais je veux n'avoir que des colonnes. Par conséquent, je vais sélectionner la colonne et ensuite j'en aurai 15. Ensuite, nous pourrons commencer à travailler de ce côté à ce côté-ci. Je veux dire, quelles que soient les données que nous ajouterons, nous ajouterons de ce côté à ce côté-ci. Maintenant, je vais le faire R. Maintenant, je vais en faire une grille de mise en page de style est des jetons flagrant. Donc je sélectionne la grille, puis je clique sur cette icône, puis je clique sur ce plus, et je peux dire la colonne principale de la grille. D'accord ? Maintenant, il va économiser ici. Mais si je l'ai maintenant dit que j'ai créé un cadre de plus, alors je peux simplement sélectionner ce cadre à partir d'ici, à partir de la grille et ensuite je peux simplement le réutiliser. Très bien, c'est ainsi que nous pouvons maintenir une distance entre le côté gauche et le côté droit. Et nous pouvons le week-end, nous savons que d'où nous devons commencer notre conception. Maintenant, créons-en un de plus. Le design est un système de design destiné à la couleur. J'ai donc sélectionné quelques codes couleur pour cela. Pour ajouter ce code couleur, j'ajoute simplement un rectangle aléatoire et c'est mon code couleur que je veux avoir. Vous pouvez donc simplement écrire ce code couleur ou utiliser votre propre code couleur, peu importe. Maintenant, ce rectangle est sélectionné, et c'est le code couleur. Je vais donc simplement remplacer ce code couleur par mon code couleur, puis cliquer sur. Ce processus est presque le même. Et puis ici, nous pouvons voir quelques couleurs prédéfinies que figma a ajoutées. Mais nous n' utiliserons aucun de ces éléments. Je vais donc cliquer dessus. C'est ce qu'on appelle, maintenant que cet article est sélectionné et que j'ai ajouté cette couleur, nous pouvons voir cette couleur. Et ici, je peux dire couleur primaire. Dès que je créerai un style, il restera ici. Créez maintenant un autre rectangle. Maintenant, nous avons ce champ, nous avons cette couleur. Maintenant, si je clique sur ce style, vous pouvez voir que c' est notre couleur principale que nous venons de créer. Bon, maintenant, ça va de même. Pour celui-là. Je veux avoir un code couleur différent. Et j'ai ce code couleur, qui est là-dedans. Je vais donc choisir celui-ci ici. Et je vais dire que c' est pour le pied de page. Et puis je vais créer un rectangle de plus ici. Et puis j'ai encore un code couleur. Vous pouvez donc ajouter autant de couleurs que vous le souhaitez pour votre projet, puis ajouter simplement votre style. Ensuite, je peux dire bouton S'abonner. Après cela, nous en avons encore un. Et maintenant celui-là, je vais changer celle-ci par cette couleur. Et je peux dire que c'est une grille orientale pour l'arrière-plan des catégories. Je peux juste essayer d'ajouter ou n'importe quel laboratoire significatif pour que cela soit logique. Et plus tard, si vous devez changer quoi que ce soit, vous pouvez facilement le comprendre. Et avons-nous un code couleur de plus, qui va être le suivant ? Et celui-ci est utilisé pour notre bouton Ajouter au panier. Maintenant, dès que j'ai tout maintenant, je peux supprimer ça. Maintenant, je n'ai plus besoin d'objets car notre couleur est déjà enregistrée dans notre style de couleur. Donc, d'abord et avant tout, nous avons ce contexte sur la tête. Permettez-moi d'ajouter un arrière-plan, donc il semble que nous en ayons encore un. Je vais donc l'enlever. Donc, maintenant, nous avons celui-là. Je vais donc sélectionner un rectangle à partir d'ici, et je vais concevoir ce rectangle pour notre en-tête. Et puis nous avons que notre couleur est toujours juste que nous venons de créer. Et vous pouvez voir que tout le code couleur est ici. Je vais choisir ce style de couleur unique. Maintenant, si je l'exécute, si je l'exécute, sélectionnez cette image, je suis désolé, nous devons sélectionner cette image pour l'exécuter. Ok, donc la connexion est interrompue, donc c'est la raison. Le cadre est donc sélectionné. Et puis si je clique dessus, il va s'ouvrir. Et pour travailler, il n'y a rien à craindre. Nous venons d'ajouter un rectangle et je vais l'ajouter. Pour que nous puissions voir notre cadre, nous pouvons voir notre disposition. Je pense que nous pouvons garder cette hauteur. Je voulais juste voir la hauteur si elle est plus grande ou plus petite. Permettez-moi de le réorganiser et de le faire correspondre à celui-ci. Appelez. C'est vraiment joli. Et nous pouvons garder cette hauteur pour notre rectangle. Je vais donc arrêter cette vidéo ici. Et lors de notre prochaine conférence nous allons concevoir tout ce thème. se voit donc lors de la prochaine conférence. Au revoir. 3. Conception de barre de navigation et d'en-tête: Bonjour, Bienvenue dans cette conférence. Dans cette partie, nous allons concevoir cette section d'en-tête afin que nous puissions voir que nous avons un EMS, puis nous avons ces Dido et Barto et un peu de raison ici. Je vais donc d'abord ajouter l' image ici aussi vite, je vais devoir sélectionner ce rectangle ici. Je vais sélectionner ce rectangle ici. Et puis je vais double-cliquer dessus pour pouvoir faire un peu de design ici. Alors, que puis-je faire ici ? Il suffit de double-cliquer ici. Ensuite, je dois choisir celui-ci. Et vous y voilà. Je veux donc avoir de cette étagère ici. Et après cela, je dois cliquer sur le bouton Terminé. À partir de là, je dois sélectionner cet endroit, MS, afin de pouvoir sélectionner l'image ici. Je vais donc coller l'image ici. Maintenant, nous pouvons voir ce SME et je vais l'ajouter ici. Maintenant. C'est joli. Alors, que puis-je faire maintenant ? Je pense que je peux juste ajuster cela de cette façon. Et après cela, nous l'avons fait, donc nous pouvons également changer le nom de celui-ci. Je vais donc renommer ce nom. Je vais dire l'une ou l'autre des images. Il est donc toujours recommandé d'ajouter le nom de votre article ou de votre rainure afin que vous puissiez facilement vous identifier ultérieurement. Et maintenant, nous devons ajouter ce genre de design. Pour ça, ce que je vais faire, je vais créer et sélectionner notre ellipse ici. Et il devrait être de la même taille et du même poids, peut-être 25 par 25. Ensuite, je vais ajouter une couleur. Ajoutons donc la même couleur. Je vais donc ajouter cette couleur ici. Mais ce que je vais faire, je vais le faire, ce que je vais faire. Ok, il faut donc ajouter de la couleur pour celle-ci. Donc c'est la couleur que nous avons après avoir sélectionné ici, nous pouvons simplement changer le contraste de cette couleur pour que je puisse dire 50%. Ensuite, ça va ressembler à ça, mais il va falloir utiliser une couleur différente. Je vais donc sélectionner cette couleur et je devrai cliquer dessus. Passons à 50 %. Oui, peut-être 40 %. Mais nous n'avons pas besoin d' avoir cet effet. Je vais supprimer cet effet ici et voyons à quoi il ressemble. C'est donc en dehors de celui-ci. Cela ressemble donc à cette couleur. Et maintenant ce que je vais faire, je vais le faire, je vais le dupliquer plusieurs fois. Et je vais le dessiner ici. Donc, pour faire un double, vous suffit d'appuyer sur sélectionner celui-ci et de contrôler D, ou dans le clic droit et copier-coller. Et maintenant, je vais le dupliquer plusieurs fois. Control D, Control D. Maintenant, nous avons toute cette ellipse. Donc, ce que je vais faire, je vais faire d'eux un groupe pour que nous puissions le faire, je vais appuyer sur Control G ou à partir de là, vous pouvez dire sélection de groupe. Ensuite, je vais en faire un autre, maintenant je sais que je vais dupliquer ce groupe pour que nous ayons un peu de design ici. Nous avons maintenant deux groupes, le groupe un et le groupe deux. Et combiné dans ce groupe, je peux dire les feuilles chauffantes. Nous avons donc cette chose maintenant ici. Je vais le faire glisser ici. Je vais faire un double de celui-ci et le mettre ici. Mais cette fois, nous devons manger verticalement, donc je vais le faire pivoter de cette façon. Et puis je vais le mettre de ce côté. Et nous y voilà. Voyons maintenant à quoi ça ressemble. C'est joli. Et je vais le mettre dans la même taille. Très bien, nous avons maintenant un texte et des boutons. Nous allons donc ajouter ce titre rapidement. Alors, quel est le texte ici ? Trouvez votre robe ici. Nous pouvons ajouter différents textes. Et c'est un autre problème. Donc, je vais le faire, d'accord. Donc maintenant, nous pouvons à nouveau activer notre nous allons recommencer, je suis désolé, je vais d'abord supprimer ce texte d'ici. Nous n'avons pas besoin d' avoir ce texte ici. Et je vais ajouter cette grille à nouveau et nous allons commencer notre, commencerons à ajouter notre texte à partir de ceux-ci. Super, donc je vais ajouter ce texte ici et je vais dire, je vais dire, je vais dire, très bien à la mode ici. Je peux dire, oh, tout le rend capital. Très bien pour vous. Ici. Et maintenant, je vais augmenter la taille de police de celle-ci à 48. C'est joli, je pense que 4848, peut-être 36, donc on peut choisir. Et je vais changer la couleur de ce texte. Changez donc la couleur de celle-ci. On peut peut-être choisir la couleur blanche. Quelle couleur ne va pas bien paraître. Nous pouvons donc essayer le bloc 1, je suppose que le noir est bon ici. Ce n'est pas un problème. Nous pouvons donc choisir cette couleur noire, mais la rate n'est pas bonne, donc j'aurai de la variété. Je vais donc devoir écrire pour trouver votre mode ici. Et ici, ça va si bien à la mode. Et après cela, nous avons un autre texte. Je vais donc commencer à partir d'ici. Et le texte est sélectionner votre robe dans laquelle la collection permet. Nous pouvons donc simplement flotter ici. Esclave de votre robe en ligne. Mais cette fois-ci, nous aurons besoin d'une taille de texte plus petite, donc nous n'avons pas besoin d' avoir la même taille. Peut-être que nous pouvons sélectionner le maximum à D6 et pas 20 exactement. Je vais le sélectionner 20. Et après cela, nous allons ajouter notre bouton ici. Alors maintenant, je vais l'ajouter, le dire de cette façon. Donc, si vous le faites de cette façon, vous pouvez voir que cette ligne de points va entraver, qui signifie que les deux sont de la même taille à partir du même point de départ. Maintenant, nous devrons concevoir notre bouton. Je vais donc concevoir notre bouton ici. Et le nom du bas va être très net maintenant. Je vais donc commencer à partir d'ici. Ce sera donc notre bouton. Et ici d'abord, je vais ajouter ce rayon de bordure pour ajouter le rayon de frontière 20. Et ensuite, je devrai ajouter un texte ici. Je vais donc dire « Shop Now ». Et encore une fois, nous devrons modifier la taille de la police de celle-ci. Il n'est pas très serré six va avoir 16 ans. Et je vais le mettre au centre. Et vous y voilà. Nous avons ce texte Shop Now et maintenant rapidement, faites-en un groupe. Donc, cet outil va être groupé et nous pouvons enregistrer le bouton pointu maintenant. À partir de là, nous devrons changer la couleur d'arrière-plan. Nous devrons donc changer la couleur d'arrière-plan. Alors, que pouvons-nous faire ? Nous pouvons ajouter notre couleur. Pour ce texte, nous pouvons ajouter une couleur blanche. Maintenant, nous avons ce bouton Acheter maintenant et trouver votre mode ici. Qu'est-ce qu'on a laissé d'autre ? Nous avons un bouton. Et puis une chose que je peux faire, je peux diminuer la taille du bouton. Et puis je peux juste le mettre ici. Et nous avons ici le texte que nous pouvons mettre. Nous pouvons mettre le texte ici. Et je peux, je pense que nous avons besoin que nous puissions faire traîner ça. Vous pouvez le voir pour que nous puissions ajouter notre élément de navigation ici. Je vais donc choisir celui-ci et le mettre ici. Nous pouvons également ajouter un peu de rayon de bordure ici. Et voyons à quoi ça ressemble maintenant. Maintenant, c'est mieux. En haut, nous pouvons maintenant ajouter notre texte de nos éléments de menu. Je vais donc commencer à partir d'ici, et je vais avoir notre maison. Et après cela, je vais le dupliquer. Alors, à la maison. Et puis on peut dire, on peut dire « T-shirt ». Ensuite, nous pouvons dire, ou plutôt, nous pouvons dire, d'accord, nous pouvons le faire. On peut dire t-shirt et ensuite on peut dire des chaussures. Ensuite, on peut dire mode homme. Et puis je vais le dupliquer. Donc je vais avoir, on peut dire ici, au lieu de manifester, que l' on peut dire fabrication. Ensuite, nous aurons un autre offshore, ce qui sera notre connexion et notre inscription. Pour le, pour la connexion, je vais sélectionner notre rayon de frontière ici. Donc je ne vais pas faire de rayon limite, je vais ajouter un rectangle ici. Je vais ajouter ceci ou ceci, cette taille. Donc, ce que je vais faire, je vais ajouter un rayon de frontière ici, 20 pixels. Et puis, ici, je peux dire « connexion ». Je peux dire signer ici. Et je dois changer la taille à 12. J'ai besoin de la taille 12 ici. Nous avons donc le bouton d'inscription et après cela, je vais me laisser regrouper rapidement le groupe McDermott et je vais dire m'inscrire. Et nous avons également besoin d' un texte supplémentaire pour notre bouton de connexion, pour notre option de connexion. Nous pouvons donc le dire ici. Nous pouvons donc dire « connectez-vous ». Et je vais changer la couleur du bas. Nous avons déjà notre couleur, ce qui va être que nous pourrons dire cette couleur. Voyons à quoi ça ressemble. Cela a l'air bien, mais je préférerais avoir un bouton d'inscription et de connexion. Nous avons maintenant celui-là. Je vais donc appuyer sur Commande D. Et au lieu de signer ce texte va être, au lieu de signer, ce texte va être connecté. Donc, au lieu de signer, je vais dire « connectez-vous ». Maintenant, si j'ouvre celui-ci, on peut voir signer et se connecter. Mais je préférerais avoir une couleur différente. Je vais donc ajouter une couleur différente, celle-ci. Et pour celui-là, je vais aussi choisir celui-là. Et pour l'occasion, le chat, d'accord, donc pour changer la couleur du texte ici. Alors, nous verrons ici que c'est où est le bon ? C'est donc le signe. Vous pouvez donc constater que lorsque vous sélectionnez un groupe ou que vous créez un groupe, vous voyez tous les éléments du groupe. Ainsi, dans le groupe, nous avons un rectangle et un texte. Et il y a une raison pour laquelle on peut voir deux couleurs. L'un est pour celui-ci, qui est notre texte. Maintenant, je vais changer celui-ci blanc et ça va de même pour celui-là. Ce bloc va être blanc. Maintenant, nous avons ce design. Je pense que c'est bon. Mais avant cela, ce que je dois faire. Je dois donc vérifier si tout est du même côté, à la même distance. Nous avons donc montré ce poisson aux amandes, je vais sélectionner tout ça. Et dès que vous sélectionnez toutes ces choses, il y a une propriété appelée données tidy. Vous pouvez voir dans le, j'ai dit si votre article ne l'a pas pour les articles et n'a pas exactement une largeur ou une hauteur. Ensuite, celui-ci sera dans un bol et si vous cliquez dessus, il va l'ajuster. Maintenant. Maintenant, nous verrons qu'il a la même taille, d'accord ? Et une autre chose que nous devons faire, qu'ils forment un groupe. Appuyez sur Commande G. Maintenant, nous pouvons renommer le nom. On peut dire bar de navigation, et maintenant nous n' avons rien ici. Vous pouvez voir maintenant que celui-ci n'est pas visible car nous l'avons déjà, nous l'avons déjà, cet article exactement à la même distance. Maintenant, je vois que c' est vraiment joli. Nous avons le texte d' inscription, de connexion, et nous avons également ces parties de navigation. Donc pour la barre de navigation, si je sélectionne celle-ci, nous en avons 16, ou chaque article, nous en avons 16. Maintenant, nous avons celui-là. Très bien, maintenant si je le veux, je peux aussi faire glisser le tout et je peux simplement glisser-déposer car nous connaissons toutes nos données maintenant dans un groupe. Mais une autre chose que j'ai remarquée ici, on peut juste faire glisser un peu au centre. Et il en va de même pour celui-là. Voyons à quoi ça ressemble maintenant. Maintenant, c'est mieux. Encore une fois, laissez-moi vérifier si c'est le cas. Ok, nous avons le bon format maintenant, nous avons terminé avec succès notre section d'en-tête. Et dans la deuxième partie suivante, nous allons commencer à travailler sur cette partie. voit lors de la prochaine conférence. 4. Conception de cartes pour montrer un article de mode: Bon, bienvenue encore une fois. Dans cette partie, nous commencerons à concevoir notre carte. Pour ça. Tout d'abord, ce que je vais devoir faire pour nous ayons une étoile MS puis Dido, puis quand l'icône, puis le texte. Tellement plus vite, nous devrons créer un rectangle ici. Nous avons donc un titre également, et nous avons deux icônes ici que nous devrons concevoir. Très vite, je vais ajouter à un rectangle pour la carte. Nous allons donc commencer à travailler à partir de cette grille. Et ici aussi, à partir de cette grille, nous allons prendre un espace de cette ombre blanche puis rouge, de cette ombre blanche, puis de cette ombre rouge. Nous allons commencer à partir d'ici. Notre rectangle. Nous pouvons prendre la taille. Nous pouvons prendre cette rangée d'arbres. Ok, donc nous avons ce rectangle et je vais ajouter le petit déplacement de rayon de frontière de peut-être cinq. Laissez-moi voir à quoi ça ressemble maintenant. On dirait ça. D'accord, nous aurons donc besoin d'un peu d' espace par le haut car nous devrons mettre notre titre ici. Nous avons donc maintenant cet article et nous devrons le faire. Je vais donc ajouter cet effet ici et l'effet d'ombre portée. Et je vais aussi changer la couleur. Cette couleur va être la couleur blanche ici. C'est donc la couleur blanche. Et maintenant, en haut , à l'intérieur de la carte, nous devrons prendre un autre rectangle, le rectangle de notre image. Je vais donc porter cette taille à ce niveau et faire en sorte que l'emprunteur ait cinq pixels. Et nous devrons le mettre exactement de la même taille. Très bien, donc voyons voir. Nous avons donc celui-ci et ici nous allons coller nos émus. Et maintenant, qu'est-ce que nous avons d'autre ? Nous avons, d'accord, donc je pense que nous devons agrandir notre rectangle un peu parce que nous avons du texte bon marché. Le premier va donc pouvoir nommer. Alors, que pouvons-nous dire ? Nous pouvons dire que nous pouvons dire cette option ici. Nous avons un titre puis une étoile. Je vais donc ajouter un texte ici. Et ce texte va être, on peut dire, je peux dire une robe de mariée, juste un exemple. Et les textes doivent être de 16 pixels. Donc, j'attends seulement 16 pixels. Et puis nous avons 16 pixels pour cette icône. Ensuite, nous avons une étoile, ainsi de suite. En utilisant une étoile, je vais prendre aide du plugin appelé icônes du chargeur. Si vous ne savez pas comment installer le plugin, accédez simplement à ce module et parcourez les plug-ins dans la communauté. Et ici, vous pouvez simplement rechercher l'icône dans n'importe quel plug-in. Ensuite, vous pouvez simplement l'utiliser. Vous pouvez voir que ni le plug-in dont ils ont beaucoup de plug-in, suffit de cliquer sur Installer, puis il va ajouter. Et à partir d'ici, vous pouvez simplement l'explorer d'ici. Donc maintenant, je vais prendre l' aide d'icônes de remplissage. Vous pouvez également installer ce plugin. Donc, dans les icônes de remplissage, je pense, et nous avons cette icône d'étoile. Nous allons donc simplement nous ouvrir, sortir ici, et ici nous pourrons voir toutes les icônes. Je vais dire une star. Vous pouvez voir que nous avons ce début ici. Je vais donc sélectionner cette étoile où elle se trouve. Maintenant, il a choisi de cette façon. Et je vais le mettre ici. Mais avant cela, vous pouvez voir qu'il va sélectionner en dehors du cadre, mais vous devez vous assurer qu'il se trouve à l'intérieur du cadre, sinon vous ne pourrez pas le voir. Donc maintenant, si j' ouvre cette vue, nous pouvons maintenant voir que c' est une étoile ici, mais elle devrait commencer par le point de départ de ce texte. Bon, donc nous avons maintenant cet espace. Et je ne vais pas modifier la hauteur car elle est déjà en bonne position, 24 sur 24. Donc, ce que je vais faire, je vais faire un double. Appuyez donc sur Commande D. Et je vais avoir un peu moins d' espace entre ça. Et je vais le dupliquer 345. Maintenant, ça a l'air bien. Je vais donc choisir, faire d'eux un groupe. Je vais dire « star ». Et maintenant, nous avons cette étoile. Alors, que pouvons-nous faire maintenant, nous devons ajouter ce que nous avons ici. Nous avons une icône, puis nous devons changer la couleur de celle-ci. Vous pouvez donc voir que la couleur de sélection est actuellement noire. Donc aussi une chose que vous devez remarquer que ce n'est pas votre couleur de remplissage principale et principale est principalement la couleur de votre trait parce qu'elle l'est. Un trait, vous pouvez voir ce genre de trait qu'il ajoute. Mais si vous voulez changer l'arrière-plan de celui-ci, vous devez le faire de cette façon. Ensuite, vous devez le faire de cette façon. Donc, maintenant, ça va ressembler à ça. Nous pouvons également certainement le faire. Alors, que puis-je faire ? Je vais, pour celui-là, je vais sélectionner ce 14 ici pour le coup, je vais sélectionner le bloc. Ensuite, ça ressemblera à ça. Mais je ne veux pas avoir celui-là. Je veux juste avoir la couleur noire noire. Nous n'avons donc pas besoin d' avoir ce contexte. Nous n'avons pas non plus besoin de l'avoir. Habituellement, cela ne va pas montrer maintenant que nous avons cette couleur noire et maintenant nous devons en ajouter une de plus. prend. Ce texte va être ici. Je vais donc ajouter un texte ici. Et je peux dire peut-être 50 lectures, juste un certain nombre d' écrits à montrer. Et de cette façon, nous pouvons prendre la taille à 16, mais elle devrait être au centre pour que nous puissions la faire glisser un peu de cette façon. Très bien, ça a l'air bien, mais si on veut, je pense qu'on peut changer la couleur et me laisser essayer à quoi elle ressemble. Si nous sélectionnons une couleur différente et qu'elle a l'air, elle n'a pas l'air bien, mais nous pouvons simplement rester avec une couleur noire, mais nous pouvons simplement dire que c'est une couleur audacieuse. C'est donc un boulon pour que nous puissions voir que nous avons un certain nombre de lectures. Nous avons donc le titre, nous adoptons le script montré. Ensuite, je voudrais ajouter un texte supplémentaire, qui sera notre prix. On peut donc dire le symbole du dollar et ils peuvent dire à 50$. Et assurez-vous que le point de départ est le même. Et il vient de 19 à 19. Très bien, donc nous avons notre prix, nous avons cette image. Et une autre chose que nous devons maintenant avoir, nous devons montrer notre besoin de coller notre image ici que nous n'avons pas. Avant cela, avant d'aller plus loin, ce que je vais faire en premier, je vais faire d'eux un groupe dans ces trois articles. Et puis je vais faire le rangement pour que nous puissions, nous connaissons cette étoile. Ensuite, nous avons ce titre. Alors, faites-en un groupe d'abord. Et je vais le renommer pour sauver le signe texte de garde. Maintenant, si je vais ici, nous voyons déjà que celui-ci est visible. Cela signifie que nous avons la même distance. Maintenant, une autre chose que nous devons ajouter ici, nous avons un bouton supplémentaire que nous devons ajouter. Je vais donc prendre la moitié de ce rectangle de cet outil ellipse, pas le rectangle. D'accord ? Je souhaite sélectionner l'outil ellipse. Nous avons donc l'outil Ellipse ici. Et je vais sélectionner l'outil ellipse. Et pour le rendre plus sombre, vous devez toujours vous assurer que cachez dans un endroit humide exactement la même. Donc, ça ressemble à ça. Je pense que nous pouvons prendre un peu plus de poids, peut-être 32 par 32. Et nous pouvons le mettre à la même distance. De cette façon, nous pouvons le mettre ici. Nous allons mettre notre icône, sorte que nous puissions placer notre icône ici. Donc avant cela, je veux changer la couleur d'arrière-plan. Je veux donc avoir cette couleur ici. Ensuite, nous sélectionnerons notre icône de blog ici, l'icône du cœur. Et je peux le dire, donc ici je peux dire cette icône du cœur. Et puis je vais d'abord le mettre à l'intérieur du cadre, puis j'ai tiré l'icône du cœur à l'intérieur de celui-ci et rendre le trait de couleur blanche. Et je peux juste le centrer un peu. Et nous y voilà. Très bien, donc c'est vraiment joli. Je vais arrêter cette vidéo ici et nous continuerons à partir de la prochaine conférence. 5. Sélectionner et afficher plusieurs images dans une carte: Bienvenue encore une fois. Dans cette partie, nous allons essayer mettre en œuvre le reste de la conception. Nous avons donc cette option. Maintenant, nous avons cette carte. Nous voulons maintenant en faire un groupe, la partie entière, afin que nous sachions que cette partie nous permet simplement de dupliquer pour créer plusieurs éléments. Nous avons donc ce cœur ici. Ensuite, cela va d'abord faire d' eux un groupe. Je vais donc faire d'eux un groupe et le renommer. Et je vais dire ici, comme du beurre. Ensuite, nous avons notre cortex, qui est un autre design. Nous avons ce rectangle pour le texte , puis nous avons le rectangle principal du panier. Je peux donc changer le nom de celui-ci. On peut dire chariot principal. Et puis notre carte EMS, qui est celle-ci, qui va être une carte humoristique. Maintenant, nous avons notre carte principale, nous avons notre carte MS, nous avons notre bouton J'aime. Et je peux en faire un groupe et je peux dire mode, carte de mode. Très bien, maintenant je peux le faire dupliquer. Je vais appuyer sur Duplicate jusqu'à ce qu'il soit de cette carte. Et puis je vais le dupliquer quelques fois. Donc quatre. Et puis Phi six. Pour l'instant, peut-être six. Et nous avons cette carte, n'est-ce pas ? Bon, nous avons donc ce nombre d'éléments maintenant, mais nous voulons avoir une option Scroll View ici pour pouvoir l'installer. Il est maintenant temps de coller notre image ici. Alors, comment pouvons-nous le faire pour faire aussi vite, qu'est-ce que je vais devoir faire ? C'est donc notre panier, c'est notre carte. Je vais donc étendre tous ces éléments afin que nous puissions sélectionner notre garde d'image. Parce que je vais avoir plusieurs, plusieurs IMS au total. Je vais maintenant sélectionner l'image. Cliquez donc sur Placer le désordre. Maintenant, je vais sélectionner trois à six ou sept cartes. Je vais donc sélectionner les images ici. Donc 12, puis 34567. D'accord, puis je vais l'ouvrir. Ainsi, dès qu'il charge toutes les images, vous pouvez voir ajouter de l'immense. Ce que je vais devoir faire, alors je n' aurai qu'à cliquer un par un. Ensuite, je peux juste poster, vous pouvez voir que sept images ont été sélectionnées. Alors, que puis-je faire maintenant ? Je peux simplement cliquer dessus. Un EMS a été sélectionné, puis 10mers. Ok, je vais le désélectionner. Ok, laissez-moi l'enlever. Je vais donc refaire deux fois parce que je voulais vous montrer quelque chose qui est ensuite le numéro de position de l'image. Nous allons donc sélectionner l'image ici. Je vais donc sélectionner cette image. Je vais donc sélectionner cette image, cette image. Ceux-ci, ceux-ci, ceux-ci, pas celui-là, celui-là , et celui-là. Cliquez maintenant sur Ouvrir. Et dès que nous l'avons sélectionné, il émet trois sites. Nous devons attendre quelques instants car il faut du temps pour télécharger la MS Dès que notre image sera prête, nous pourrons la voir dans nos kilomètres. Et voilà. Vous pouvez voir que 80 mess, le dernier que vous avez sélectionné sera en première position. Vous pouvez donc commencer à faire des choses distinctes. Maintenant, je peux simplement cliquer un par un, ceci. Et ça. On y va. Et nous aurons une autre image ici, ce qui sera notre dernier élément. Alors, laissez-moi voir ce que nous pouvons voir ici ? Nous avons donc deux images ici. Nous avons cinq femmes, mais nous ne sommes pas sûrs de cet article ici. Et maintenant. Nous pouvons simplement le sauvegarder. Alors, que puis-je faire ? Je peux juste appuyer dessus. Je vais juste le supprimer maintenant je vais supprimer ces images. Maintenant, ce que je veux que vous voyiez ici, si nous avons cette image, c'est ainsi que vous pouvez ajouter plusieurs limites parce que nous avons une autre carte ici qui est peut-être celle-ci. Au lieu de cela, nous avons ici pour un texte. Nous avons donc fait une erreur ici. Nous avons retiré notre article quand j'ai fait cette chose. Maintenant, nous avons celui-là, MS ici, mais nous avons une autre mode ici dans celle-ci. Nous avons donc cette carte, qui est cette carte et cette carte. Bien que nous puissions le voir ici. Je vais faire glisser celui-ci pour voir si nous avons un MAC ou non. Nous n'avons donc pas de SP ici. Nous pouvons donc devoir appuyer sur une image pour cet article ici. Je vais donc faire glisser l'EMS, sélectionner un qui vous manque. Une fois encore. Je peux peut-être rejoindre sa gauche. Nous avons donc celui-ci, cet article, et je vais sélectionner celui-ci. Et maintenant, je dois appuyer sur cette image ici. Le fait est que si notre cadre est en dehors de quatre, si nos images sont en quelque sorte un cadre, alors dans ce cas, nous devrons le faire ou vous parce que nous ne savons pas nous avons cet article ou non. Nous pouvons donc ajouter quelques autres articles ici. Donc, peut-être deux. Mais dès que je l' ai mis à l'intérieur du cadre, j'ai la même distance. Dans ce cas, nous devrons préparer notre carte plus rapidement et ensuite nous pourrons travailler et ensuite je fixerai la position de cet article. Donc, d'accord. Je ne l'ai donc pas dupliqué. Il faut donc faire un double. Nous avons donc un article ici. Nous avons un autre article ici. Il s'agit donc d'une carte différente. Je vais donc ajouter pour nous défendre ici. Nous avons maintenant une autre image ici, qui est la suivante. Nous avons déjà une photo ici. Je vais donc ajouter deux autres images pour cet article. Je vais donc envoyer des courriels à partir d'ici. Je vais dire celui-là pour cet objet et une autre, une autre image pour celui-là. Je vais donc sélectionner l'image Place. Et puis je peux dire, ajoutons celui-ci. Et voilà. Ok, donc maintenant notre travail consiste à placer tous ces courriels en dehors de ça. Alors ici, maintenant nous avons vite, mettons-le ici. Et plus tard, nous pourrons réarranger dès que nous avons été distincts. Ces deux articles sont donc en dehors de notre cadre. Maintenant, ce que je vais faire, je vais le mettre en déflation, c'est que le cadre et celui-ci sont un cadre incitatif. Maintenant, nous avons notre, celui-ci, qui est celui-ci. Nous avons celui-là, et nous l'avons. Alors, faisons-le. Maintenant. Nous avons vu que la distance est de 20. Et celui-ci est également nécessaire de sélectionner la distance 20. OK ? Donc, si vous voyez que cette ligne rouge est dans la même position, cela signifie que votre position est la même. OK ? Donc maintenant, si je viens ici, nous pouvons voir toutes les images, mais nous pouvons voir le bon côté, sorte que maintenant ce que je vais faire, je devrai ajouter une vue horizontale de défilement pour cette carte de mode. présent, nous avons conçu nos articles. Et dans la partie suivante, nous allons apprendre comment faire un défilement horizontal. Ne soyez donc pas confus. Ce que nous avons fait, nous venons de créer une carte, ajouter plusieurs images MS, puis d'ajouter plusieurs cartes pour que nous puissions faire horizontalement s'appelle View for right ? Je vais arrêter cette vidéo ici, et nous continuerons à partir de la prochaine conférence. 6. Sélection de images et défiler horizontale: Bienvenue encore une fois. Dans cette partie, nous allons essayer d'ajouter une vue de défilement horizontal lorsque vous double-cliquez dessus, sur cette icône. Et en guise de leçon, ils vont suivre cela. Nous devrons convertir chaque groupe en cadre. Alors, nous seuls pouvons le faire. Nous avons donc la conception de notre voiture et chaque carte est notre groupe. Vous pouvez donc voir que cette carte est un groupe, rejeter est un groupe. Cette carte est un groupe. Discard est un groupe, et discard est un groupe. Je peux aussi le faire glisser ici. Je pense que cette carte est la groove. Cette carte est une rainure. Ceci, ceci, ceci, ceci et ceci. Donc maintenant, ce que je vais devoir faire, je vais devoir faire en groupe un cadre, chaque carte. Ok, si vite, fais-en un cadre. Donc, ce chariot, nous devrons faire un cadre, est-ce pas ? Sélectionnez la carte. Et puis une sélection de cadres, celle-ci sera notre cadre. Et donc je vais annuler ou contrôler Z pour l'annuler si rapidement Commençons à partir d' ici pour que nous puissions, nous savons que notre cadre est notre premier élément. D'accord ? Il s'agit donc de notre premier article. Je vais donc cliquer avec le bouton droit et je vais dire sélection de cadres. Et puis celui-ci va être notre cadre. Et celui-ci va aussi être notre cadre. Je vais donc dire sélection de cadres. Todd va être une conférence Frames car cela va être ceci, notre sélection de cadres. Et cet article est, ce sont ces articles. Je vais donc dire que je vais annuler celle-ci parce que celle-ci sera notre cinquième position. Donc quatre, et je vais cliquer avec le bouton droit de la souris et dire phase de sélection de cadre. Et puis celui-ci sera notre sixième position numéro. Donc la sélection du cadre est supérieure à sept de la sélection. Et le dernier est la sélection de cadres. Laissez-moi voir lequel est le dernier. Le dernier élément est donc le numéro huit, numéro sept, le numéro six, le numéro cinq, le numéro quatre. Très bien. Maintenant, sélectionnez tout le cadre que nous venons de créer. Nous devons créer, nous devons créer un seul cadre maintenant. Alors cadrez-les, ceux-ci , ceux-ci, puis sélectionnez tout le cadre que vous avez. Ensuite, cliquez avec le bouton droit de la souris et faites une sélection de cadre. Vous avez maintenant une image unique et à l'intérieur ce cadre, vous pouvez le renommer. Vous pouvez définir ce mainframe à l'intérieur de votre cadre principal. Vous avez votre cadre multiple, qui correspond à chaque article. Maintenant. Vous devez sélectionner votre ordinateur central puis vous appuyez sur le côté droit, vous pourrez voir le contenu de Cliff. Vous devez vérifier celui-là. Dès que vous aurez fait du contenu Cliff, ce que vous aurez à faire, vous pourrez voir ce genre de choses. Ensuite, vous devez la faire glisser jusqu'à l'endroit où vous voulez afficher, que vous souhaitez afficher, nous voulons afficher cette grille sans faire défiler. Nous voulons le montrer jusqu'à cette grille. Parce que nous, au début nous avons décidé d'y arriver. Nous laisserons ce dégradé d' espace blanc le plus large et le côté gauche et droit cet espace large et levé. Maintenant, si je viens ici, je pourrai voir que notre article provient uniquement de cela. Nous pouvons également faire une chose. Nous pouvons simplement montrer ces trois éléments. Mais nous le ferons plus tard. Mais maintenant, nous avons notre cadre ici et nous passons ensuite au prototype. Ici, vous pouvez voir que le débordement attire le bruit. Vous devez sélectionner ce défilement horizontal. D'accord ? Maintenant, si je viens ici , je peux faire défiler nos données horizontalement. Mais maintenant, nous pouvons voir que nous avons ce petit problème de conception et nous devrons maintenant le résoudre. D'accord ? Nous pouvons maintenant faire défiler notre article horizontalement. Mais avant cela, laissez-moi réparer celui-ci. Revenez au design et je vais ouvrir celui-ci. Nous avons donc cet article ici, qui est notre numéro, c'est notre cinquième numéro. Nous avons des problèmes avec nos six numéros. Donc, six numéros se chevauchent avec notre cinquième numéro. Nous avons notre numéro d'article cinquième, puis nous avons notre cadre numéro six. Donc, le cadre numéro six. Je devrais avoir ça. Bon, donc maintenant, nous avons ça. Donc, ça devrait commencer comme ça, non ? Cela devrait donc fonctionner maintenant. Essayons à nouveau, faisons ce contenu de clip, puis je vais ajuster à nouveau la taille ici. Je vais donc ajuster la taille à ici. Très bien, maintenant, nous avons cette option. Ok, il semble que nous ayons besoin d'ajouter seulement nos deux autres parties avec celle-ci. Je vais donc ouvrir cette falaise à nouveau. Nous avons donc nos six maintenant, nos sept sont superposés à celui-ci. Vous pouvez voir. Nous devons donc maintenant sélectionner R7 et ensuite nous assurer qu'avec un sept, nous avons cette distance. Nous avons cette distance de 28. Maintenant. Nous avons nos six, nous en avons 07, mais maintenant nous avons nos huit qui se chevauchent. Maintenant, nous avons la même taille. C'est donc notre A, c'est notre sondage, et c'est six, c'est notre quatre. C'est trois, c'est nos cinq, c'est notre 678. D'accord ? Encore une fois, je vais sélectionner la mini falaise , puis l'ajuster avec notre grille. Maintenant, je pense, OK, cool. Maintenant, nous n'avons aucun chevauchement. Mais vous pouvez voir qu'en bas, nous avons peu de problèmes ici. Nous devons donc modifier notre hauteur du contenu de ce clip pour que je puisse simplement le faire glisser un peu de cette façon afin que nous puissions obtenir l'ombre. Nous pouvons maintenant faire défiler notre article. Parfait. Cela ne nous pose aucun problème. Nous pouvons donc le faire défiler. Nous allons le faire défiler et nous pourrons le faire défiler. Ensuite, une autre chose est perceptible que je pense que nous avons un peu plus d'espace d' ici et d'ici. Alors, que puis-je faire maintenant ? Je peux simplement y aller. Bon, je vais donc ouvrir à nouveau cet article pour ajouter ce problème ici. Nous l'avons donc, nous avons ceci, je pense que nous avons ce 14420, mais d'ici, de T, à partir de quatre. Nous devons donc nous assurer que nous avons notre distance 20 entre toutes les cartes. Nous en avons donc six. Donc si nous en sélectionnons six, alors nous pouvons voir si un T seulement 277 va également en avoir 20. Et puis à partir de huit ans, nous allons également arriver en Inde. Très bien, alors sélectionnez le mainframe puis ajusté avec la grille que nous voulons afficher. Je vais donc l'ajouter ici. On y va. Maintenant, nous pouvons voir que nous avons exactement le même aspect. Et c'est vraiment joli. Nous pouvons faire un défilement de cette façon. Maintenant, nous voulons avoir un autre point ici, sénateur fix, que je veux montrer ici. Nous voulons montrer uniquement pour la voiture. Nous ne voulons pas montrer ce petit ici. Je vais l' ajuster avec cette grille. Et alors, que puis-je faire ? Le tout maintenant, je ne peux en ajouter qu'un. Et je peux l'ajuster de cette façon. Nous pouvons l'ajuster. La moitié de celui-ci vient d'ici, la moitié de celle-ci ici. Ou bien, que pouvons-nous faire ? Nous pouvons également modifier notre grille. Donc, au lieu de 1015, nous pouvons peut-être en ajouter 20. Ensuite, nous pouvons décider, puis nous pouvons le sélectionner de cette façon. Oui, d'accord, donc maintenant nous avons cette émission, donc nous pouvons simplement dire avec une vingtaine. Allons en faire 18. Désolé, je vais au lieu de 20 maintenant en 1919 exactement. Nous devons en faire 21. Ok, donc on a cette grille et dans le côté droit on prend son visage là-dedans et on a besoin du côté gauche. Nous prenons un blanc, un rouge, un blanc, un rouge, un blanc , cent, cent, cent. C'est donc notre principale chose ici. Et maintenant, nous avons cette carte principale. Et pour la falaise, je veux avoir un peu plus d'espace ici. Pourquoi est-ce que c'est ? Pour que nous puissions voir toute la carte ? Vous pouvez voir que la carte n' est pas visible. Je dois donc ajouter un peu plus d'espace ici. On y va. Nous avons donc cette carte, puis nous avons ce design, nous avons cette carte, et nous pouvons faire défiler notre article. Parfait. Et dans la partie suivante, nous allons implémenter ce bouton vers , puis nous ferons un défilement. 7. Défiler horizontal en appuyant sur le bouton Scroll: Bienvenue encore une fois. Dans cette partie, nous allons essayer de l'ajouter à notre bouton puis à des données, puis cela prend, puis après cela, nous ajouterons cela horizontalement. Appelons l'option en cliquant maintenant que nous pouvons faire c'est appeler ce genre de chose d'échange , quelque chose de glisser-déposer. Mais nous voulons avoir deux boutons ici. Et quand ils cliqueront dessus, nous allons montrer cette origine aux listicles trop rapidement. Ajoutons le texte ici. Je vais donc ajouter du texte ici et je vais dire ici, je peux dire ici une fissure d'amande. Donc cette mode femme dorée. Assurez-vous donc que c'est le cas, le point de départ est le même avec cet article. Donc, les hommes sont faciaux et nous ne voulons pas l'avoir audacieux. On peut dire que c'est un boulon moyen , puis on peut dire ces choses. Donc je suis au visage et je vais, on peut faire une chose, je suppose. D'accord. Nous avons donc souligné cela ici. Je ne veux pas ajouter ce soulignement. Je veux donc le laisser de cette façon, puis ajouter ça au bouton ici. Commençons par ajouter un bouton. Je vais donc utiliser cet outil ellipse et ensuite je vais dessiner nos vies ici. Assurez-vous donc qu'il a la même taille et le même poids. 46 à 46 vite, je vais devoir regarder là-dessus. quoi ça ressemble, il est plus grand ou plus petit. Donc maintenant 4243. Ensuite, je devrai d'abord ajouter un effet , puis changer la couleur d' arrière-plan de celui-ci. Et ce sera cette couleur de fond blanc. Et ici, nous devons ajouter une icône. Je vais donc reprendre la moitié de ce plug-in appelé icônes de chargeur. Je vais dire, d'accord, donc nous avons cette flèche droite et gauche. Je vais donc dire sélectionner cette icône. Ensuite, je vais sélectionner cette icône, puis la faire glisser ici. Je vais le faire glisser ici. Et le centre, nous ne serions pas, d'accord, donc c'est à l'intérieur de celui-ci. Nous avons donc cette icône. Et maintenant, que puis-je faire ? Ce que je vais faire, je vais en faire un groove. Je peux dire groupe puis dire icône droite. Et ensuite, nous pourrons le faire dupliquer. Appuyez sur Commande D. Ensuite, nous avons besoin d'une icône de plus, qui sera l'icône de gauche. Je vais donc supprimer cette icône d'ici. Ensuite, je vais sélectionner cette icône de gauche. Cette icône de gauche va apparaître ici. Et je vais le mettre ici. La même chose. Maintenant, nous avons notre icône gauche et notre icône de route. C'est notre flèche à gauche. Il s'agit d'une icône droite. C'est donc notre bonne icône. Ce sera notre icône de gauche. Je vais donc changer le nom en icône de gauche. Icône gauche. Et je vais mettre cette flèche à gauche à l'intérieur de cette rainure. Nous avons cette icône gauche et droite, puis je vais en faire un groupe. Donc, cette icône gauche et droite, nous en avons sélectionné deux. Je peux nommer celui-ci et celui-ci, en faire un groupe. Disons, on peut dire le bouton Scroll. Bon, donc maintenant ces deux choses, nous pouvons simplement ajouter un point de départ à partir de ce groupe. Vous pouvez voir la ligne dans la partie gauche du texte et dans la ligne dans une grille. D'accord ? Cela signifie donc qu'il est dans la position parfaite ici. Il ne reste plus qu'à ajouter des options d'appel. Ainsi, lorsque l'utilisateur choisira celui-ci, nous voulons montrer la dernière image qui est décente. De cette façon, nous pourrons le faire s'appelle. Lorsqu'un utilisateur clique sur cet élément, nous voulons lui montrer le premier. C'est ainsi que nous pouvons faire un défilement. Et ce qui est bien, c'est que dans notre partie précédente, nous avons déjà créé notre cadre. Nous ne pouvons donc le faire facilement que si nous avons une sélection de trame, car le prototype de prototypage est toujours à la recherche du cadre. Maintenant, nous avons tous ces cadres sont le premier cadre est celui-ci. Et notre dernière image est l'image huit, qui est la dernière. Par conséquent, lorsqu'un utilisateur clique sur ce côté droit, nous allons sélectionner l'aide au cadre. Lorsque vous cliquez sur le côté gauche, nous allons les sélectionner ainsi que le cadre numéro un. C'est donc la logique principale ici. Maintenant, cliquons sur le prototypage et maintenant cliquez sur les éléments de droite. Donc, quand nous l'avons fait, quand nous avons cela. Vous pouvez maintenant voir que par défaut, il va sélectionner l'ensemble du groupe, mais nous devons sélectionner exactement ce bouton. Celle-ci, bouton d'icône droite, vous pouvez voir. Je vais donc cliquer dessus. Et maintenant, dans le prototype où vous devez cliquer sur ces interactions et cliquez ici sur Aucune. Donc, au lieu de le faire. Donc, lorsque l'utilisateur fera surclic, nous voulons afficher, nous voulons afficher, nous voulons également faire défiler. Ok, pas de la marine. Normalement, nous utilisons naviguer vers, pour passer d'un endroit à un autre. Mais cette fois, nous devons également sélectionner un parchemin, car nous voulons faire défiler là où nous voulons aller. Nous voulons faire défiler jusqu'à notre, vous pouvez le voir. Notre cadre où nous voulons faire défiler, nous voulons faire défiler le cadre Columba numéro huit, qui est le dernier élément. Une fois encore. Avant de choisir, permettez-moi de le clarifier. Vous allez donc dans la section des prototypes. Vous sélectionnez le bouton que vous souhaitez afficher. Après avoir sélectionné la matraque, vous ajoutez une interaction. Vous ajoutez ces émissions indirectes. Ici. Vous le sélectionnez, cliquez dessus, vous sélectionnez un onclick, puis cliquez sur faire défiler et après l'école jusqu'à l'endroit où vous voulez faire défiler, vous voulez aller au cadre huit, qui est le dernier élément à droite côté. Et vous devez vous assurer qu'il s'agit d'un cadre que nous avons fait lors de notre précédente conférence. Je vais donc cliquer sur ce cadre huit. Et après cela, vous pourrez voir n'importe quel type d' animation que vous voulez avoir, animer et ensuite vous avez cette animation ici. Vous pouvez simplement dire facile d'entrer et de sortir, puis de déguiser ou d'entendre parler de vous, vous pouvez simplement le faire de cette façon. Alors peut-être que tu veux avoir du rebondissement, peut-être que tu veux être lent. Gardez le lent. Maintenant, si je reviens ici et qu'ils peuvent voir que nous avons cette icône maintenant. Donc, si je clique dessus, on y va, dans la dernière image. Cool. Maintenant, si je clique sur la gauche , cela ne fonctionnera pas parce que nous n'avons pas entré le modèle prototype. Notre écouvillon est l'appel fait toujours partie intégrante parce que nous l'avons fait plus tôt. Et si je clique dessus, ça va aller dans le grand côté. Bon, alors que pouvons-nous faire ici ? Nous pouvons simplement ajouter, nous pouvons simplement ajouter un autre prototype. Sélectionnez donc à nouveau cet article et cliquez dessus. Accédez à cette section de clic, sélectionnez un outil de défilement. Et alors ce terme va être notre cadre. Cool. Et encore une fois, nous voulons avoir des rencontres et des intimes. Ça va être lent. Qu'en est-il de la douce ? Qu'entendent-ils par « doux » ? Zen ? Bon, alors choisissons celui-ci. Maintenant. Nous sommes au rythme rapide. Nous sommes dans le dernier article. Maintenant, si je clique dessus, nous sommes dans la première image. Celui-ci fonctionne donc. Celui-ci fonctionne, et celui-ci fonctionne. Vous avez donc appris comment le faire. Donc je pense que doux signifie que ça va vous donner un peu d'animation. Il n'y a qu'un nom de l'animation. Vous pouvez simplement jouer avec celui-ci. Vous pouvez simplement jouer avec ce genre d'animation. Comme s'ils avaient deux options. Lequel ? Hormone ou quoi que ce soit que vous préférez, il vous suffit de sélectionner n'importe lequel de celui-ci, puis cela va s'ajouter à votre projet. Nous avons donc ajouté avec succès cette conception. Nous avons cette petite icône qui va dessiner ici et ensuite cette mode. Et nous pouvons suivre celle-ci de cette façon. Nous pouvons également faire glisser celui-ci. Notre bouton fonctionne également. Très bien, donc je vais arrêter cette vidéo ici et nous continuerons avec la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 8. Conception de cartes de mode pour hommes: Bienvenue encore une fois. Dans cette partie, nous allons essayer d'ajouter une autre section pour la mode masculine. Pour cela avant tout, je devrai augmenter la taille du mainframe. Je vais donc simplement sélectionner celui-ci, puis le faire glisser. Et maintenant, nous devrons ajouter une texture de plus. Je vais donc dupliquer ce texte ici. Je vais donc dire Commande D, puis je vais ajouter celle-ci ici. Vous pouvez donc voir que vous devez toujours suivre la ligne rouge qu' elle vous montrera afin que vous puissiez comprendre qu' elle part de la même taille, de la même taille, du même point de départ. Maintenant, je vais le dire à la mode masculine. Et après cela, nous aurons type similaire de conception de voiture avec une image différente mais une dérive. Et cette fois-ci, nous n' allons pas afficher cette option de défilement. Au contraire, il va falloir faire une colonne, d' accord, donc d'abord je vais en faire un double. Donc, pas cette monture. Nous n'avons pas besoin de sélectionner le cadre, mais je vais plutôt sélectionner cette carte. D'accord. Ensuite, je vais en faire un double de groupe. Et puis je vais en traîner un autre ici. Et depuis le même point de départ que nous avons ici. OK, c'est cool. Maintenant, vous pouvez voir que nous avons une distance de 37 par rapport au haut du titre. Et maintenant, nous pouvons voir que nous avons des hommes qui pêchent. Et donc ce que je veux, c'est que je veux avoir. Nous pouvons donc encore lire cette image, mais plus tard, nous allons la modifier. Donc je vais, ce que je vais faire, je vais le faire dupliquer. Nous voulons montrer car nous en avons quatre ici. Ensuite, je vais appuyer sur la commande D, puis sur quatre. D'accord ? Très bien, il y a donc une erreur que j'ai commise ici. Au lieu de sélectionner l'ensemble du groupe, je ne faisais que sélectionner. Que puis-je faire maintenant ? Je vais dire que nous allons le changer pour lui. Je dirai une carte de mode pour hommes. Maintenant, je vais faire un double. Maintenant, je peux dupliquer la carte entière. Ensuite, nous avons ce point de départ. Alors, faites et faites. Très bien, alors je vais d'abord faire d'eux un groupe. Faites-les donc grandir plus rapidement. Toutes ces cartes de mode pour hommes. Et avant ça, d'accord, donc nous avons bien rangé. Cela signifie qu'il se trouve à la même distance. Vous pouvez voir cela 202020. Nous n'avons donc aucun sens ou quoi que ce soit. Je vais donc en faire un groupe. On peut dire que les hommes font une rangée. Et puis je vais en faire un double. Ce sera donc notre deuxième rangée. Je suis désolée, nous devons avoir ce point de départ à partir d'ici. Le voilà. Nous avons donc cette chose, 202020. Et maintenant, on peut dire que ces hommes sont à la mode. Nous avons ici ce design de mode, qui va être la mode masculine. Donc, d'accord, donc maintenant une chose que je veux ajouter, je veux faire ces deux rangées dans un groupe et nous pouvons maintenant leur donner un esclave africain. La mode masculine. On peut dire la section mode masculine. Et maintenant, permettez-moi de voir si nous avons bien rangé. Ok, donc nous avons ce bien rangé, nous avons 37 distances. Nous avons notre distance pour celle-ci. Ok, donc nous n'avons pas de problème avec ça. Très bien, maintenant, ça a l'air vraiment joli. Nous l'avons ajouté. Il est maintenant temps d'ajouter plusieurs images pour ces quatre éléments. Pour cela, je vais sélectionner à nouveau Placer l'image. Et puis, au lieu d'un visage homme ou femme, la tige, je vais choisir le visage des hommes. Nous avons donc 448 images, donc je vais sélectionner huit, MS ici, 2334567, puis huit. Maintenant, ce que je vais devoir faire, il va donc ajouter nos e-mails ici et à l'instant présent. Il faut donc un certain temps pour charger tous les MS en fonction de votre vitesse Internet et de la taille de l'image. Dès que nos images seront prêtes, nous devrions pouvoir les voir dans notre souris. Vous y voilà. Maintenant, nous avons huit images, donc je vais sélectionner, je vais remplacer cette image par celle-ci. Remplacez donc cette image par celle-ci. Et pour remplacer cette image par celle-ci, celle-ci, celle-ci, celle-ci et celle-ci. Maintenant, nous devrions pouvoir voir nos e-mails ici. Cela prendra du temps ou nous pouvons simplement faire Rafraîchir là-bas. Il va remplacer notre MS par cette image principale ou minimiser. Maintenant, nous avons des hommes, poissons faciaux et des femmes prêts. Ce que je veux avoir, je veux avoir une pagination ici en bas pour cette mode masculine. Nous avons donc ce design, nous avons ce design et nous l'avons, donc je n'aime pas cette photo, donc je vais remplacer cette image. Je vais choisir une autre photo. Je vais donc dire que je vais choisir celui-là. Je pense que nous avons ajouté celui-ci. Et je vais remplacer cette photo par celle-ci. Mais il n'a pas de visage. Cependant, est-ce que c'est toujours mieux. Ok, donc nous avons ce truc ici maintenant. Maintenant, je veux avoir notre pagination ici, donc nous l'ajouterons dans notre prochaine partie. Je vais arrêter cette vidéo ici pour voir quelle est la prochaine conférence. 9. Conception de pagination: Bienvenue encore une fois. Dans cette partie, nous allons essayer d'ajouter notre pagination. Jusqu'à présent, nous avons réalisé ce design et notre application est vraiment belle maintenant. Nous avons donc cette carte, nous avons cette option ici. Et maintenant, il est temps d'ajouter notre pagination ici. Donc, pour ajouter une pagination, nous allons essayer de prendre de la santé à partir de notre outil ellipse. Et puis je vais commencer à concevoir à partir de ce milieu de deux objets. Je vais donc prendre L et partir de là, je vais commencer à concevoir ça. Nous devons donc nous assurer que nous avons la même taille et le même poids. On peut donc dire 35 ou peut-être 40, je suppose. Nous le changerons plus tard, ne vous inquiétez pas. Donc 40 par 40. Maintenant, laissez-moi voir à quoi ça ressemble. On dirait ça. Je pense que c'est la taille parfaite, donc nous pouvons rester avec celui-ci. Je vais ajouter de l'effet ici. Et puis je vais changer la couleur en blanc. Et maintenant, nous devons ajouter la position exactement. Je voulais avoir ce poste. Bon, donc on peut commencer par ça. Nous allons partir de, nous allons commencer par celui-ci, qui est notre sous-shell d, cette grille. Et puis on peut dire 123456, puis 123456 jusqu'à ce que nous puissions ajouter notre pagination. Très bien, nous allons le faire. Ce n'est pas un problème. Donc maintenant, je vais ajouter, et ici, nous devrons ajouter une icône. Nous avons donc déjà notre icône, qui est cette icône, icône flèche gauche. Je vais donc, d'accord, donc nous pouvons directement obtenir cette icône de notre plugin que nous avons déjà. Donc des icônes de remplissage, donc nous allons ajouter cette icône ici. Il va donc s'ajouter ici. Et on va le mettre au centre. Et puis je vais le mettre au centre. Et maintenant, nous avons cette icône. Fastow, nous devrons en faire un groupe. Donc, cette ellipse. Avant d'en faire un groupe, je vais dupliquer cette ellipse car nous avons besoin d' une ellipse pour nos autres options. Le problème est que je pourrais, j' ai choisi l'ellipse plus tôt. Bon, maintenant, nous avons ces ascenseurs. Très bien, nous avons donc ce texte, nous avons cette icône, puis nous avons cette ellipse ici. Et voilà. Neige ici. À l'intérieur de l'ellipse, nous devrons ajouter un texte, et ce texte sera un texte. Et nous devrons ajouter plusieurs textes. Mais laissez-moi d'abord le mettre au centre. Dans la même taille. Il devrait être au milieu. Donc, ce que je vais faire, je vais le mettre de cette façon. Nous devons quand même le faire. Donc, au lieu de 16, faites 18. Fais-le 18. Très bien, maintenant c'est au milieu, donc je vais en faire un groupe aussi. Donc, pas celui-là. J'ai juste besoin de faire du groupe cette ellipse et cet outil. Je vais donc faire le groupe Make. Je peux dire article de pagination. Article de pagination. Maintenant, nous avons notre article, nous avons notre bouton suivant, le bouton Précédent, puis nous avons notre article. Maintenant, je vais dupliquer ce groupe afin que nous puissions ajouter quelques boutons, quelques éléments de pagination, 123 et quatre. Et celui-ci va être un point. Donc, pour un ok, nous aurons donc besoin de plus en fait, de quatre, puis de cinq, puis de 67, puis du 81. Et puis cela va être nos deux et cela va être C. Et ça va être quatre, et ça va être cinq. Il faut donc ajouter ci dot ici, pas cinq. Nous allons avoir ce point quatre. Et alors 54, c' est que celui-ci aura cinq ans. Et puis celui-ci va avoir six ans. Et Seven et ici, nous devrons le faire, ici nous n'avons pas besoin d'avoir ce texte. Nous voulons avoir cette icône correcte. Maintenant, je vais prendre la santé de cette ellipse, désolé, pas les ascenseurs. Nous devons donc prendre soin de ce plug-in pour pouvoir ajouter notre icône. Cette fois-ci, nous devrons ajouter cette icône droite. Je vais le mettre au centre. Et puis ce que je vais devoir faire, mettez-le d'abord à l'intérieur. Et c'est la bonne icône. Et quelle est la pagination ? Nous avons quelques éléments de pagination. Donc 4321. Nous pouvons donc voir de cette façon, mais nous devrions avoir une autre ellipse ici pour méchante. Nous pouvons donc voir de cette façon, Nous devons avoir cette ellipse ici. Où est cette ellipse ? Donc, celui-là et cette ellipse. Regardez-le ici. Nous n'avons pas besoin d'avoir ces ascenseurs si je supprime celui-ci. Bon, donc nous ne devrions pas supprimer celui-ci. Nous avons notre façon de faire cet objet de pagination, ce sont ces éléments de pagination. Nous avons donc cet objet, mais maintenant nous n'avons plus, d'accord, donc c'est notre article de pagination, donc c'est notre icône droite. Je vais donc le mettre à l'intérieur de celui-ci. Maintenant, nous avons ceci et cette flèche gauche devrait être à l'intérieur de cette pagination. Nous avons donc cette pagination et sept contre un. Je suis donc à la recherche de cet objet de pagination. Oh, d'accord. Ces deux choses ne font donc pas partie d'un groupe, alors faites-en un groupe. D'accord ? Donc maintenant, nous pouvons également dire article de pagination. Bon, je vais maintenant sélectionner tous ces éléments de pagination ici. Et ensuite, je vais devoir faire ça de façon à ce que nous puissions voir que nous pouvons avoir la même distance. Et puis nous pouvons voir que c'est toujours, nos données ne sont pas distribuées horizontalement l'espacement vertical. Ensuite, nous avons distribué le défilement horizontal. Alors, nous allons bien, mais nous devons le faire dans la même taille car vous pouvez voir que celui-ci n' est pas de la même taille. Vous n'avez pas besoin d'avoir cette chose de cette façon. Vous n'avez pas besoin d'avoir cette chose de cette façon. Nous ne voulons pas l' avoir de cette façon. Alors, que doit-on faire ? Nous devons nous assurer qu'il a la même couche. Nous pouvons également augmenter l'espace, mais c'est maintenant acceptable si nous prenons ceci, mais nous devons quand même nous assurer que chaque élément est sélectionné à la même distance. Et de cette façon, nous pouvons l'ajuster. Mais plus tard, nous pourrons refaire le rangement. Mais maintenant, je me concentre sur la même hauteur et le même point de départ du haut et du bas. Vous pouvez voir maintenant que c'est le même. Et de cette façon, nous le pouvons. Laissez-moi le mettre ici pour qu'il ne pose aucun problème ici. Eh bien, nous allons le faire. Nous pouvons donc maintenant mettre l'article un par un ici. Ensuite, nous pouvons nous assurer que tout est parfaitement aligné. Six, sept. Et puis ça. Nous pouvons donc maintenant sélectionner toutes ces paginations ensemble. Et je peux dire DF, parfait. Maintenant, nous avons tout, de la même taille. Vous pouvez voir que le démarrage en haut et en bas et à partir de chaque article, nous avons la même distance. Tout va bien. Nous avons maintenant notre origine. Maintenant, je veux apporter des changements ici. Donc, cet élément, je veux changer cet arrière-plan, cette couleur d' arrière-plan, cette nouvelle couleur verte, sorte que celle-ci soit marquée et que celle-ci est sélectionnée. Et maintenant, nous avons tout d'ici. Pour vérifier celui-ci, que pouvons-nous faire ? En gros, nous pouvons sélectionner notre autre grille. Nous avons nos options de grille, n'est-ce pas ? Nous avons notre colonne de grille principale. Nous pouvons donc choisir, dire juste à des fins de test. Nous pouvons sélectionner et saluer, puis je peux choisir tardy. Ensuite, nous pouvons, ici, simplement jeter un coup d'œil là-dessus, que tout part de cette façon, du milieu de la ligne. Ok, donc de cette façon, vous pouvez également vérifier votre grille pour que nous en ayons toujours, donc c'est ce que nous avons maintenant. Autre droit ? Notre pagination est donc terminée. Nous avons mis en œuvre avec succès notre pigeon est montré ainsi que notre horizontal s' appelle View, et c'est notre en-tête. Et dans la partie suivante, nous allons essayer de concevoir notre section catégorie. voit lors de la prochaine conférence. Au revoir. 10. Conception de catégorie de mode: Bienvenue encore une fois. Dans cette partie, nous ajouterons notre section catégories pour notre application de design de mode. Donc, avant tout, ce que nous faisons essentiellement, nous allons essayer de concevoir ainsi afin que vous puissiez savoir comment travailler avec le contraste de l'image. Je vais donc vous montrer cette chose. Nous devrons donc d'abord prendre la moitié de cet outil rectangulaire. Je vais donc ajouter cet outil rectangle. Et avant cela, nous devrons ajouter notre texte ici. Je vais d'abord dupliquer ce texte ici, ce titre. Je vais dupliquer celle-ci, et je vais le suivre ici. Donc exactement le même point de départ que nous voulons avoir. Peut-être ici. Et je peux dire celui-là, d'accord ? Ou nous pouvons prendre un peu plus de place par le haut. Je peux dire choisir une catégorie. Nous pouvons donc dire Choose Category. Et ensuite, nous aurons le même design. Choisissez donc la catégorie. Ensuite, nous voulons avoir un rectangle ici. Je vais donc ajouter ce rectangle ici et ajouter, désolé, nous avons besoin de cette taille, de taille normale. Et ensuite, nous avons cette catégorie. Nous pouvons donc en suivre un peu plus. Et ensuite, nous voulons avoir cette catégorie, celles-ci dans ce rectangle. Et nous y voilà. Nous avons donc cette option maintenant, mais nous étions prêts à une couleur pour celle-ci, c' est-à-dire cette couleur. Je veux donc ajouter cette couleur pour cette catégorie d'arrière-plan. Et après cela, nous devrons ajouter notre rectangle pour ajouter notre image de catégorie. Je vais donc ajouter cette taille et m'assurer que, d' accord, laissez-moi d'abord ajouter, laissez-moi ajouter une marge ici. Donc, le rayon de la frontière ici, donc cinq. Et voyons à quoi ça ressemble. On peut peut-être essayer d'en ajouter dix. Vous y voilà. Ensuite, nous pouvons simplement sélectionner la carte à partir d'ici. Et c'est la carte. Maintenant, nous voulons ajouter. Donc je vais dire, je vais le faire, pour que je puisse renommer celui-ci. Je peux dire Catégorie, Catégorie moyenne carte. Disons ensuite la carte d'article de catégorie. Et maintenant, je veux dupliquer celle-ci. Nous voulons que nous voulions avoir ce genre de choses et nous assurer d'avoir les mêmes points de départ et de fin. Ce sera donc notre point de départ et de fin. Ensuite, nous pourrons faire 43. Bon, donc nous avons maintenant quarante trois, quarante trois, quarante trois. Et notre départ et notre fin du côté gauche sont les mêmes. Nous avons donc ce point. Donc, si je sélectionne celui-ci, je peux voir que ce symbole rouge est connecté à celui-ci. Et celle-ci est également connectée. Bon, donc maintenant ce que je vais faire, je vais sélectionner toute cette carte rectangulaire, pas la jeter. Je vais faire d'eux un groupe, et ensuite je vais le faire pour que nous n'ayons pas besoin de ranger, car c'est déjà qu'il a déjà la même distance. Je vais donc le dupliquer. Et puis je vais ajouter, je vais ajouter une ligne de plus ici. Et laissez-moi y arriver, c'est pareil. Donc, si vous voyez ce symbole rouge, il est identique de haut et de bas. D'accord ? Maintenant, ces deux-là, je vais faire d'eux un groupe. Ensuite, je peux simplement le réarranger. OK, c'est cool. Parfait. J'en ai donc besoin au centre de cet article. Jusqu'à présent, nous avons ces 44 ou quatre articles. Maintenant, ce que je vais faire, je vais sélectionner MAS pour ces quatre objets afin de placer des images. Et puis, au lieu de celui-ci, je vais dire catégorie mode. Nous en avons 36. Nous allons le sélectionner. Nous allons tous les sélectionner. Et nous en ajouterons deux différentes, j'ai deux âmes célèbres différentes. Il va falloir un certain temps pour l'ajouter. Il est toujours en cours de chargement. Et maintenant, nous en avons six. Je veux donc appuyer sur celui-ci ici. Je veux appuyer sur celui-ci ici. Je veux ajouter celui-ci ici. Je veux ajouter celui-ci ici. Celui-là, ici, quelqu'un ici. Très bien, donc nous avons encore besoin d'images, donc je vais placer l'image. Je vais aller dans ce dossier. Je vais ajouter. Je vais choisir ça. Et je vais choisir ça. Et puis je vais le presser ici. Donc ceci, et ceci. Cool. Nous devrions donc maintenant pouvoir voir nos quatre images. Maintenant, en plus des images, je veux ajouter du texte. Donc, pour cela, ce que je veux avoir, c'est notre groupe, et c'est notre ancien groupe, est-ce pas ? Quatre ont donc grandi. Nous l'avons fait, et nous avons ce groupe. Et nous avons ces courriels. D'accord ? Maintenant, nous avons cette image. Ensuite, nous avons cette image, cette image. Par conséquent, si vous sélectionnez cette image et qu'elle aura possibilité de modifier le contraste MS. Ok, donc vous l'avez, comme si elle a beaucoup de fonctionnalités vous pouvez simplement essayer en fonction de votre, vous pouvez simplement modifier l'association d'exposition. deux autres options. De cette façon, vous pouvez simplement risquer le design principal de l'EMS ajoute une couleur d'arrière-plan ou quoi que ce soit. Vous pouvez le faire de cette façon. Je vais donc augmenter le contraste. Et pour celui-là, je vais aussi changer le contraste. Je dois changer. Ok, donc pour une raison quelconque, celle-ci n'est pas sélectionnée. Je vais donc sélectionner cette image ici et modifier le contraste de celle-ci de cette façon. Ensuite, sélectionnez-le ici. Et je vais changer le contraste de celui-ci et de cette exposition pour qu'il soit un peu sombre. Et nous allons mettre notre texte ici. Donc, celui-là va être ainsi. Et voilà, nous avons celui-là. Notre contraste va donc ressembler à ceci. Et ce sont les quatre. Et ici, nous avons un autre MA. Et pour cette image, je vais choisir ce contraste comme ça. Ces images. Nous devons ajouter cela, pas ce mois-ci. Et ensuite, nous avons cette image. Et puis, nous avons ces chaussures. Très bien, donc nous avons tout ça maintenant. Nous pouvons donc simplement ajouter le texte ici. Je vais donc appuyer sur le texte ici au-dessus de celui-ci. Je peux dire robe de mariée. Maintenant, ce n'est pas le cas. Celui-ci n'est pas du tout visible. Alors, que doit-on faire ? Nous devrons changer la couleur en blanc pour celle-ci. Mais c'est tout de même que cela n' est pas réalisable. Alors, que pouvons-nous faire maintenant ? Nous pouvons simplement modifier le contraste de l'image de cet article pour qu'il soit visible. Maintenant, vous pouvez le voir. On peut donc dire une robe de mariée. Et ensuite, pour celui-ci, nous aurons besoin d'un autre texte. Alors, en fait, que puis-je faire ? Nous pouvons essentiellement dupliquer ce texte. Et puis je vais le mettre ici. Je peux dire veste d'hiver. Je peux donc dire veste d'hiver et elle est visible. Et puis je peux dire « chaussures ». Et puis nous avons celui-là. Nous devons donc changer cela en chaussures. Je vais donc dire chaussures. Et je devrais le mettre au centre. Et au centre, nous avons des spectacles mais il n'est pas visible. Je vais donc ajouter un peu plus de contraste et le peu sombre pour que ce soit un symbole vivant. Donc, des chaussures. Et puis pour celui-là, je peux dire, oh, je pense que je dois le rendre plus sombre. Je vais donc dupliquer ce texte ici. Je vais donc le faire glisser ici et m'assurer que c'est le cas. Je peux dire une veste d'hiver. Très bien, alors nous avons notre t-shirt pour cet art de plat. Je vais dupliquer ce texte, puis il faut ajouter, je vais dire un t-shirt. Mais ça n'a pas l'air bien ici, nous en avons deux. Encore une fois, nous devons changer ce contraste par rapport à celui-ci juste pour le rendre un peu sombre. Cool. C'est le contraste, puis il s'agit du graphique normal. Je pense que nous avons besoin de gènes ici. Et nous y voilà, nous avons cette humeur. Et je vais changer ce double. Et puis, nous avons celui-là, Shard. Et ensuite, nous avons une autre catégorie ici. Mais je n'ai pas changé le contraste, je suppose plus. Je vais donc devoir Mecque ça. Et puis je peux dire, dupliquer celle-ci. Je peux l'ajouter à notre t-shirt d'hiver. J'ajoute juste un nom aléatoire. Et puis nous en avons un autre qui va pouvoir faire des chaussures. Et puis on peut dire chaussures thermiques. Nous devons faire un peu de contraste. voilà. Nous avons donc maintenant nos catégories prêtes. Très bien, vous avez donc appris à ajouter des images sur les courriels. Comment pouvons-nous envoyer des textos ? Et alors vous savez que comment ajouter le contraste ? C'était donc le but principal de vous montrer comment ajouter celui-ci ? Je vais donc arrêter cette vidéo ici et nous continuerons à partir de la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 11. Conception de section de la newsletter: Bienvenue encore une fois. Dans cette partie, nous allons essayer d'ajouter un abonnement que j'ai montré dans notre design similaire à celui-ci. Résolvez ça. Alors, qu'avons-nous ? En gros, nous avons celui-ci ici. Très bien, donc tout d'abord, je vais augmenter la taille du cadre ou horizontalement pour que nous ajoutions, nous puissions ajouter d'autres options ici. Nous devons maintenant prendre la moitié de ce rectangle ici. Je vais dessiner un rectangle ici. Et c'est le rectangle que je veux dessiner ici. Et puis voyons à quoi ça ressemble. Nous avons donc cette taille de rectangle. Je peux le diminuer un peu , puis nous avons ce problème ici. Je vais donc également sélectionner cette couleur. Et après cela, nous devons ajouter à une image ici. Pour cela, je voudrais ajouter je veux dessiner un rectangle ici pour mettre nos e-mails ici. Je veux donc ajouter à un rectangle ici. Et ce que je veux avoir, je veux ajouter un peu de design ici. Double-cliquez donc. Je veux donc avoir ça. Nous devons sélectionner celui-ci ici de cette façon, et ici aussi de cette façon. Et au milieu. Et ici aussi de cette façon. Et après cela, je veux ajouter un peu de rayon d'eau de 20 pixels. Et des alcalis. Faites-le. Ajoutez donc ce que c'est, 20 pixels. Voyons à quoi ça ressemble. On dirait ça. Maintenant, je veux coller nos e-mails ici. S'il vous plaît, une image. Et nous voyons le gâchis que je veux coller ici, je peux coller celui-ci. Et dès que nous aurons celui-ci. Et nous devrions pouvoir voir notre image ici. Très bien, nous avons également un champ de saisie ici, puis un titre. Nous avons donc celui-là. Je vais donc ajouter rapidement un texte ici. Et je peux dire s'abonner à la lettre d'information. Nous avons donc ce problème ici. Nous pouvons dire s'abonner à notre newsletter. Je vais donc augmenter la taille de police de celle-ci. Il devrait être de 30 à un peu plus gros. Et je vais changer la police, mettre en valeur celle-ci. Pas celui-là. Je vais ajouter quelque chose comme celui-ci. Pas exactement celui-là. C'est joli, mais ce n'est pas totalement réalisable. Nous allons donc sélectionner autre chose jusqu'à ce que nous puissions choisir celle-ci, en indice deux bulletins d'information. Et ici, nous avons deux autres designs, qui sont ces deux modèles que nous avions auparavant. Donc, qu'est-ce que c'est fondamentalement touché notre conception d'ellipse que nous avions. Je vais donc dupliquer celle-ci. Alors, où est la conception de cette ellipse d' en-tête ? Ce design d'ellipse d'en-tête est donc là. Il faut donc monter. Nous devons donc monter et descendre. C'est donc notre illustration principale que nous avons conçue précédemment. Donc, ce que je vais faire en gros, je vais en faire un composant. Cliquez avec le bouton droit de la souris, puis créez un composant, OK, afin que nous puissions le réutiliser. Il est donc maintenant à l'intérieur de notre atout. Il est à l'intérieur de notre atout. Ok, donc on a ce truc. Donc ce que je vais faire, je vais juste dupliquer, je vais juste le faire glisser ici. Je vais juste le faire glisser ici. Et encore une fois, je vais juste le faire glisser ici. Et nous avons notre bulletin d'information et juste ici. Ensuite, je vais ajouter un rectangle ici pour ajouter le texte ici. Je vais donc ajouter le texte ici pour notre abonnement, pour notre bouton. Il devrait donc ressembler à ça. Puis à 20 ans. Et puis je vais choisir celui-là. Je vais ajouter cette craie. Alors, qu'est-ce que nous avons essentiellement ici, nous avons ce résultat. Nous n'avons aucun accident vasculaire cérébral ici. Nous n'avons donc pas besoin d' avoir un accident vasculaire cérébral ici. Nous en avons donc 20, je pense. Au lieu de 20, ajoutons la fête. Maintenant, nous avons ce design tardif. Et je vais dupliquer celle-ci. Et je vais tenter la taille du deuxième bouton. Et je vais le fusionner avec celui-ci. Si vite, changez l' arrière-plan de celui-ci afin que nous sachions fondamentalement ce que nous concevons. Il s'agit donc de tous les boutons suivants. C'est donc à quoi ressemble notre deuxième bouton que je viens de le dupliquer. Il suffit donc de dupliquer le même bouton ici, puis de le plier sur le dessus. Maintenant, nous avons celui-ci ici. Je pense que nous devons augmenter, nous devons augmenter notre besoin d' augmenter notre côté inférieur. Vous pouvez donc simplement augmenter un peu de cette taille et de ce côté. Et ici, nous avons un texte qui sera notre texte réservé. Et celui-ci va faire 12 pixels. Bien plus que ça. Je vais le mettre ici. Par conséquent, e-mail. Et puis je veux ajouter à une icône de notre icône qui s'appelle r. On peut dire icône de centime. Et c'est juste sous le choc ici. Mettez-le ici. Ajoutez également uniquement le texte et le centre. Et laissez-moi qu'il soit à l'extérieur du cadre, donc il devrait être à l'intérieur du cadre. Nous avons maintenant notre icône et nous avons nos textes. Je peux donc ajouter un peu plus près de celui-ci. On y va. Nous avons cet e-mail, nous l'avons. Nous avons maintenant ce texte ici. Nous devrons ajouter le bouton S'abonner. Et je vais le sélectionner à 16 ans. On peut le sélectionner 20, je suppose que 20 ans ou descendre la taille de police pour ce type de bouton. On peut donc dire s'abonner ici. Cool, nous avons ceci, ceci, et pourquoi avons-nous besoin de résoudre ce problème ici ? Nous devons donc l' ajouter de cette façon. Ensuite, nous avons notre image, nous avons notre design, notre abonnement, puis ce texte que je veux ajouter ici. Et nous pouvons ajouter. Et je vais dupliquer ce texte ici. Et pour celui-là, je vais faire en sorte que la taille de police soit 216. Et ici, je vais ajouter un autre texte. Je peux le dire. Vous obtiendrez une promotion loin et rabais par e-mail. Vous bénéficierez donc d' une offre à prix réduit par e-mail. Il y en a huit pour celui-là. Nous avons donc notre abonnement, nous obtiendrons les quatre et une promotion par e-mail. C'est notre bulletin d'information. C'est juste la lettre d'information de base. Très bien, nous avons donc conçu notre partie abonnement jusqu'à présent. Et lors de la prochaine conférence, nous allons essayer de faire autre chose. se voit donc lors de la prochaine conférence. Au revoir. 12. Conception de section du pied de page: Bienvenue encore une fois. Dans cette partie, nous allons concevoir notre section photo pour cela, je vais devoir augmenter un peu plus la taille du cadre. Très bien, donc dans notre pied de page, nous avons ce genre de design. Nous avons donc notre, nous avons nos deux articles, donc le produit et ensuite des informations sur peu d'informations et ensuite l'icône sociale. Tellement vite, je vais concevoir ce rectangle ici. Et puis je vais dessiner ce rectangle car nous avons besoin d'un rectangle pour ajouter notre objet ici. Et voyons à quoi ça ressemble. À quoi ressemble fondamentalement le blanc. Il devrait donc en être ainsi. Donc ces zones blanches, d'accord, je vais donc ajouter la couleur de l'arrière-plan. Je suis juste un dossier. Donc, ça ressemble à ça. C'est donc notre pied de page. Maintenant, nous allons ajouter notre élément, nous allons ajouter notre élément dans un dossier. Nous allons donc d'abord ajouter notre titre et nous pouvons dire que nous pouvons voir qu'il s'agit de l'application efficace. Et vous pouvez dire que tous les hommes s'habillent. Juste un nom aléatoire que je viens d'ajouter. Il ne doit pas être significatif. L'objectif principal est de montrer ce texte. Nous allons donc commencer notre article à partir d'ici, les oranges. Et puis je vais, je vais le dupliquer. Et pour ce texte va être de 16 pixels, ou peut-être 15 pixels. Je peux le dire ici. Je peux dire robe de mariée. Ensuite, on peut dire robe de soirée, DJ. Et puis je peux dire qu' on peut dire une collection d'hiver, une collection fenêtres. Et puis je vais ajouter un autre texte ici et je vais dire les chaussures de quelqu'un. Très bien, donc nous avons ce truc. Je vais donc jeter un coup d'œil là-dessus. Si vite, sélectionnez toutes ces choses, faites-en un groupe. Et vous y voilà. Nous n'avons donc pas besoin d'une bonne idée car c'est déjà à la même distance que nous avons. Alors maintenant, que puis-je faire ici ? En gros, nous pouvons en faire un groupe. Et puis je vais dupliquer celle-ci. Ensuite, je devrai le dupliquer pour cet article. Et puis je peux dire « robe d'enfant ». Ensuite, nous avons une autre information, le texte et le bon côté. Je vais donc sélectionner le texte ici, et je vais ajouter le texte dont nous pouvons parler ici. Et nous y voilà. Nous pouvons ajouter ces informations à partir d'ici. Et cette taille va être de ce côté-ci est de 20, non ? Donc, celui-ci a également 20 ans. Et ici, vous voulez ajouter quelques secondes d'information, disons Loren Ipsum. Je veux juste ajouter un texte fictif ici. Donc, pour ajouter du texte fictif. Et nous pouvons prendre, vous pouvez simplement ajouter ce texte fictif ici. Donc ceci et ceci. Nous avons donc ce texte ici. Et puis je vais dessiner, vous suffit donc de sélectionner l'outil Texte, puis de dessiner cette inflammation de cette façon. Pour que ce côté, sorte que tout ce que vous collez ici, APR à l' intérieur de cette option. Mais au lieu de 15, donc 20 nous ajoutons la 12e sélection. Et puis seulement cela fonctionnera. Ou nous pouvons faire une chose, nous pouvons faire un pas en arrière ici, puis je peux le faire faire ici. Nous avons donc notre sujet, nous avons nos informations, mais nous devons tout de même ajouter ce petit peu. Je pense qu'à partir de là, nous pouvons l'ajuster. Cool. Nous avons donc celui-là et en bas, nous avons l' icône Shri pour celle-ci. Je veux donc concevoir cette icône de cette façon. Donc je ne vais pas rectangle, je vais prendre l'outil ellipse. Je vais donc ajouter cet outil ellipse de cette façon, puis définir l'outil Ellipse 40 par 4040, puis 40. Et voyons à quoi ça ressemble. Donc, ça ressemble à ça. Donc nous avons ces 40 et je vais le dupliquer. Sélection en double. Combien d'icônes avons-nous ? Nous avons nos quatre icônes. Nous avons quatre icônes. Je vais donc le dupliquer quatre fois trois et quatre et en faire un groupe. Tout cela, la croissance économique. On peut dire, on peut dire que c'est comme s'en aller. Et laissez-moi voir, d'accord, donc nous avons la même distance et maintenant je vais changer la couleur de fond de celle-ci. Nous pouvons sélectionner cette couleur. Et maintenant à l'intérieur de cela, nous devrons ajouter notre police d'icônes sociales que je vais prendre des icônes de l'icône du chargeur. Et je vais dire que je vais dire Facebook. Je vais dire Facebook. Je vais donc devoir sélectionner tout ce Facebook. Je dois sélectionner celui-ci à l'intérieur. Et je vais l'emmener à l'intérieur. Notre Facebook est donc là. Et puis il faut ajouter une étoile. Je vais donc sélectionner cet instar, placer dans ce cadre, puis faire glisser l' icône Instagram à l'intérieur. Nous avons maintenant notre icône Instagram, mais nous pensons que nous devons la placer au centre de cette façon. Oui. Maintenant, nous avons notre LinkedIn. Nous avons donc notre LinkedIn de cette façon. Et puis je dois le mettre à l'intérieur du cadre. Ensuite, nous avons l'icône Twitter. Je vais donc voir Twitter. Twitter va donc apparaître ici, puis le mettre à l'intérieur. Avant cela, mettez-le ici. Et puis nous y voilà. Nous avons donc toute notre icône. Nous avons donc conçu avec succès notre pied de page n'est qu'un aliment ou un article de base. Et je vais arrêter cette vidéo ici. Et lors de la prochaine conférence, nous tenterons de concevoir notre inscription et notre connexion. voit lors de la prochaine conférence. Au revoir. 13. Conception de page: Bienvenue encore une fois. présent, nous avons conçu notre page d'accueil principale. Nous avons conçu notre pied de page, notre section newsletter d'abonnement, notre section catégorie sur la pagination, la section mode, cette origine vers la vue défilement. Et maintenant, nous allons devoir faire deux autres choses. L'une concerne la page d'inscription et de connexion. Et une autre chose est que lorsque vous double-cliquez dessus, nous leur afficherons une boîte modale contextuelle comme ce type de carte. Et nous allons également mettre en œuvre ce type de vision horizontale que nous avons fait plus tôt. Et puis nous le ferons, nous devrons aussi concevoir cette chose. Pour cela, je vais d'abord compléter cette page d' inscription et de connexion. Ensuite, nous allons le regarder. Et maintenant, nous avons notre section design ici. Donc, pour ajouter des fonctionnalités d'inscription et de connexion, nous devrons créer notre cadre différent pour notre connexion à l'inscription. Et je vais essayer de montrer un autre design d'écran. C'est donc notre matériel de pont. Maintenant, je vais sélectionner un cadre de plus. Nous allons donc définir le bureau. Je vais changer de nom, je vais le dire chez moi. La pièce principale. Je vais maintenant sélectionner un cadre. Et maintenant, cette fois, je vais dessiner notre cadre personnalisé. Je vais donc dessiner un cadre personnalisé. Vous pouvez donc dessiner un cadre personnalisé. Je vais le dessiner dans cette taille. Nous ajouterons donc un EMS, puis nous ajouterons nos informations. Je vais donc y arriver dans cette taille. Oui. Donc, je vais dire signer. Je vais ajouter un rayon de bordure en pixel. Et n'essayant pas de résoudre ça, je suppose que je peux réparer que ce pixel est suffisant pour celui-ci. Et ici, je vais ajouter un rectangle de plus. Ici, ou un angle indirect. Nous allons montrer notre SEP Donc je le veux, je vais en faire un rectangle afin que nous puissions l'ajuster avec les côtés gauche. Et maintenant, à partir d'ici, que pouvons-nous faire ? Donc, je vais faire ça un peu comme ça. Et maintenant, je vais devoir ajouter le MS dans cette partie. Alors, que puis-je faire ? Essayons d'ajouter cette MS. Sélectionnons cette image. Et maintenant, je vais donc coller cette image ici. D'accord, qu'est-ce que nous avons d'autre ? Nous avons d'autres stupéfaits de shopping ? On peut peut-être essayer ce système EMS et voyons voir. Oh, pas celui-là. Je vais garder le précédent. Et ici, nous devons ajouter un texte et ce texte va être un sinus de la signature. Donc, et ensuite, nous devrons ajouter cela à 20 ou peut-être 24. Et puis je vais changer la couleur en, je vais ajouter une couleur que nous avons, toutes, la couleur sombre que nous avons. Je pense donc qu'il y a une couleur vert foncé et préconstruite. Je vais donc garder celui-là. Et là, nous devons aussi, nous pouvons maintenant trancher notre grille pour que nous le sachions exactement à partir de là où nous avons commencé. Nous avons donc notre réseau préconstruit. Je peux le faire maintenant ? C'est donc notre texte. Je vais donc le mettre ici. Nous allons donc commencer à concevoir nos articles à partir de là. Super, d'accord, donc je vais sélectionner notre rectangle ici, et ici, nous devrons dessiner notre champ de saisie. Je vais ajouter un rayon de bordure en deux pixels. Et nous devons ajouter notre frontière ici. Donc, à la bordure d'un pixel. Et avant cela, laissez-moi exécuter celui-ci et voyons à quoi il ressemble pour savoir exactement où nous devons apporter des modifications. Nous avons donc celui-là et il faut du temps pour le faire. Très bien, donc nous avons ce design, donc je vais changer le fond de celui-ci. Je vais le rendre blanc. Et puis, nous avons ce blanc. Et à l'intérieur, je vais mettre un nom. Je vais dire, mettez un texte ici. Je vais dire mon nom. Le nom va être ce nom. Et au lieu de 24 et ce sera 12 ans, il sera 12e. Nous devons ajuster celui-ci. Donc ce nom et ce rectangle, je vais créer un groupe. Et puis je vais faire un double. Nous devons donc avoir deux articles, deux autres articles. L'un est donc pour le courrier électronique, l'autre pour le mot de passe, et nous en avons également besoin pour notre bouton. Et avant le bouton, nous avons besoin d'un autre article. Je vais donc dire nom et je vais maintenant changer le texte, donc le nom. Et puis ce sera notre E-mail, ce sera notre e-mail, et ce sera notre mot de passe. Tous ces éléments sont des espaces réservés et des espaces réservés. Donc le mot de passe et celui-ci sera notre texte, mais ce texte va être ici. Je vais donc, je vais changer, enlever ces prises d'ici. Et pour celui-là, nous n'avons pas besoin d' avoir de frontière. Nous devons donc avoir notre couleur d'arrière-plan, c' est-à-dire cette couleur. Et maintenant, je dois mettre ce texte ici. Et ici, on peut dire « déconnecter ». Très bien, et je peux le mettre ici. Je souhaite donc augmenter la taille de la police de ce texte. Je vais donc l'ajouter, je suppose, et ensuite je peux m' assurer qu' il est au centre. Nous avons maintenant notre signature et nous pouvons ajouter notre icône ici. Je vais donc sélectionner l'icône Filtre ici. Je vais ajouter cette icône. Je vais donc juste traîner celui-ci ici. Et je vais changer cette couleur blanc et la mettre dans le cadre. Très bien, donc nous avons notre approbation, nous avons notre page d'inscription. Et ici, je veux ajouter à un bouton Accepter que nous voyons souvent avec les termes et conditions. Nous avons donc ce terme et cette condition. Et nous y voilà. Et on peut ajouter un petit rayon de bordure. Je peux donc ajouter à ce rayon de bordure 1010. Je peux ajouter ce rayon de bordure cinq. Et c'est à ça que ça va ressembler. Le bon. Nous avons donc cette pagination et je pense que nous pouvons ajouter une icône ici, qui sera notre icône Don ou notre icône de sélection. Il n'y a donc pas d' icône pour celle-ci. Il n'y a donc pas d' icône pour cela. D'accord. Il y a donc une icône. Je cherchais celui-ci qui s'appelle Check icon. Oui. Très bien. C'est le nom de celui-ci. Et je vais mettre cette icône dans cette boîte. Très bien, notre page d' inscription est prête, et maintenant nous devons ajouter un autre texte ici. Je vais donc sélectionner un texte ici. Je peux écrire ici par SMS, je peux dire que j'ai déjà un compte, puis connectez-vous ici. Vous avez déjà une connexion à votre compte ici. Donc, si vous avez déjà un compte, ils peuvent se connecter en cliquant ici. Et s'ils n'en ont pas dix, nous pouvons les envoyer à un rythme de déconnexion. Donc maintenant je vais, euh, ok, donc notre base d'inscription est terminée, et je vais arrêter cette vidéo ici, et nous allons continuer avec la prochaine conférence. voit lors de la prochaine conférence. Au revoir. 14. Conception de page OTP: Bienvenue encore une fois. Dans cette partie, nous allons concevoir notre pâte de connexion et notre conception basée sur ODP. Nous avons donc besoin d'un design similaire pour notre page de connexion. Donc, ce que je vais faire, je vais sélectionner ce cadre. Et puis je vais dupliquer cette image. Bon, je vais maintenant créer une page de connexion. D'accord. Je vais donc vous obliger à vous connecter. Et je vais également modifier le texte pour me connecter. Et ensuite, je vais changer ça. Enlevez plutôt celui-ci. Je vais ajouter cette chose ici. Et je vais aussi ajouter cette chose ici. Et nous n'avons pas besoin de l' avoir ici. Nous n'avons pas besoin de l' avoir ici. Donc, d'accord, donc nous avons celui-ci ici, pour que nous puissions le suivre ici. Nous pouvons commencer à partir d'ici. Je pense que nous pouvons simplement réorganiser celui-ci. Vous pouvez également faire glisser celui-ci ici. Maintenez donc 34. Et je vais mettre ce texte ici. Je peux donc dire ici que je n'ai pas de compte. Je peux dire que je n' ai pas de compte. Ensuite, je peux dire que je peux dire signer ici. Et celle-ci va être sinusoïdale. Très bien, nous avons donc fini avec notre base de connexion, et nous avons maintenant besoin d'un autre design pour notre OTP. Je vais donc le dupliquer. Nous avons donc notre phase de connexion et nous avons notre connexion. Maintenant, tout va être notre RTP, ODP. Ici, nous n'avons pas besoin de l'avoir. Nous n'avons pas besoin de l'avoir. Mais c'est tout de même que nous avons besoin d'un bouton ici au lieu de ce texte. On peut, d'accord, je pense que nous pouvons garder ce texte ici. Vous pouvez, je peux simplement écrire ici ou le p qui va bien se passer. Donc, tous les P ici. C'est donc là que le BTP paie. Ici. Je vais changer ce qui passe à la vérification. Je peux dire « vérifier ». Je vais donc dire « vérifier ». Ce sera ce qui va être le texte. Ici, je veux ajouter pour la boîte rectangulaire pour notre OTP que nous devons mettre. Je vais donc dire cette taille. Et je vais ajouter cette couleur blanche. Et puis je vais faire de l'ombre. Et puis un seul coup. Oui, un peu de rayon de bordure, peut-être dix pixels, pas dix pixels, cinq pixels. Et lançons ça et voyons à quoi ça ressemble. Jusqu'à présent. Nous avons notre page d'inscription. C'est donc notre OTP paie et ça ressemble à ça. C'est bon. Nous n'avons pas besoin d' avoir ce texte ici. Maintenant, je dois juste dupliquer celle-ci quelques fois. Je vais donc l'ajouter. Bon, il faut donc faire un double. Et ensuite 23456. Nous en avons 61 et ensuite nous pouvons voir la vérification, d'accord. Dès que nous le vérifions, nous les enverrons sur la page d'accueil. Très bien, nous avons donc conçu notre rythme d'inscription, notre connexion paie, notre rythme de conception. présent, nous avons conçu tant de choses. Nous avons donc les joueurs de l' OTP qui s' inscrivent sur la page d'inscription, le rythme et la base d'accueil. Et ensuite, dans la partie suivante, nous allons essayer de concevoir cette boîte de modèle et nous devrons également ajouter notre prototypage. voit lors de la prochaine conférence. Au revoir. 15. Conception de boîte modale d'article: Bienvenue encore une fois. Dans cette partie, nous allons essayer de concevoir notre boîte de modèle pour notre article. Pour cela, je vais créer une première fois, je dois créer notre cadre personnalisé ici. Je vais donc sélectionner un cadre ici. Et je peux dire que c'est notre cadre. Oui, on peut faire cette taille et ensuite je vais ajouter un rayon de bordure dix. Et ce nom de cadre va être, je peux dire ce que je peux dire. Je peux dire des ampoules de modèle d'article. Très bien, je veux maintenant ajouter une image. Pour ça. Je dois d'abord ajouter un rectangle. Et c'est notre rectangle que je veux ajouter dix. Ok, donc nous avons ce rectangle et je vais le dupliquer. Je vais en ajouter un autre ici. Je vais donc en ajouter deux. Bon, laissez-nous le mettre dans la même taille. Maintenant, je suis rapide, je veux ajouter deux images ici. Donc, ce que je vais ajouter, je vais devoir ajouter à EMS ici. Je vais choisir celui-là et celui-là. Et mettons tout d'abord ici. Celui-ci est ici et celui-ci. Voici donc les deux EMS. Et comme je vous ai déjà dit comment faire cela, faisant défiler, vous le savez déjà. Donc, ce que nous allons appliquer les mêmes techniques si rapidement. Je veux en faire un fragment, un fragment, en faire un cadre. Ce sera donc un cadre neuf. Et ce sera notre cadre, le cadre numéro dix. Mais si vous le souhaitez, vous pouvez également modifier le nom car ce numéro provient de l'ensemble du projet. Ou dans notre autre, notre page d'accueil, nous avons réalisé huit images. Par conséquent, il va commencer à neuf, puis à dix. Bon, maintenant, je vais devoir faire d'eux un groupe. Je vais donc combiner, désolé, nous devons les faire en un seul groupe, qui sera à nouveau notre groupe, éléphant. Ok, donc maintenant ce que nous devons faire essentiellement, donc nous devons cliquer sur ce contenu de clip et ensuite nous devons le dimensionner jusqu'à ce petit espace ici. OK ? Nous avons donc ces choses et d'accord, donc une autre chose que j'ai oublié d'ajouter, laissez-moi l'ajouter rapidement. Tellement vite, choisissons celui-ci. J'ai oublié d'ajouter cet effet, alors ajoutons cet effet ici d'abord. Et si nous l' exécutons, nous pouvons également exécuter celui-ci de cette façon afin que nous puissions le voir. Nous avons donc notre cadre. Et je le ferai, nous avons combiné tous ces éléments en un seul cadre. Et puis, d'accord, donc ça a l'air bien. Bon, il y a donc un problème ici. Celui-là n'a pas de frontière pour celle-ci, je veux dire, pour celui-là. Donc, si nous regardons ici, si je regarde ce cadre numéro dix, et que celui-ci est le cadre numéro dix, mais que ce cadre n'a pas de bordures, nous devons donc ajouter de l'eau à ce cadre pour que nous ayons exactement la même chose. Bon, alors sélectionnez le cadre et ajoutez le rayon de bordure ici, pas la bordure. Nous avons donc ces deux rayons frontaliers. Très bien, nous pouvons maintenant sélectionner notre mainframe pour ces deux-là. Cliquez ensuite sur le presse-papiers , puis faites-le de cette façon. Maintenant, passez à ce prototypage. Et ici, au défilement horizontal, maintenant, nous devrions être en mesure de voir, nous devrions pouvoir faire défiler notre article maintenant, nous devons les mettre ici pour faire l'objet, pour cliquer ici. Nous avons donc déjà notre bouton prêt. Nous pouvons donc simplement le réutiliser. Réutilisez-le. Que pouvons-nous faire ? Où sont nos boutons ? Nous avons donc notre maison. Laissez-moi minimiser cela pour que nous sachions où se trouve notre bouton. Nous avons donc notre article de pagination, nous avons notre carte mode cadre, et nous avons notre section principale, rectangle de pagination de section. Donc la section principale. Ce sont les deux choses que nous avons. Nous avons l'icône droite, nous avons une icône de gauche. Alors, que pouvons-nous faire ici ? Nous pouvons donc le dupliquer et ensuite faire glisser une icône. On peut le faire glisser à partir d'ici. En fait, je vais défaire celui-là. Je vais défaire celui-là. J'espère que nous n'avons rien cassé. J'espère que nous n'avons rien cassé. OK. Tout va bien ici. Donc, ce que je vais faire en gros, je vais le faire là où il se trouve. Je vais donc en faire un composant afin que nous puissions le réutiliser. Créez donc un composant et l'icône de gauche va être créée. composant. Très bien, maintenant, nous n'avons pas besoin de le faire glisser et de le déposer d'ici. Nous pouvons le faire directement à partir de notre composant, à partir de notre actif. Nous avons donc notre icône de gauche, donc je vais la faire glisser vers la droite. Je vais le faire glisser ici. Ensuite, nous avons notre icône de gauche. Je vais donc le faire glisser ici. Comme c'est facile, donc nous n'avons pas besoin de faire la même chose encore et encore. Et maintenant, une autre chose est que nous devons le mettre dans notre boîte. Ok, donc nous pouvons nous assurer que nous avons exactement la même distance ici. Et nous devons également ajouter celui-ci à partir de cette taille. Nous pouvons donc le faire de cette taille. Et laissez-moi voir à quoi ça ressemble. On dirait donc ça. Bon, donc nous devons nous excuser. Je pense que nous avons fait une erreur ici, alors je vais la mettre ici. Ok, donc nous avons maintenant la même distance par rapport à cette taille et le point de départ est le même. Assurez-vous que nous ayons cette chose. Nous avons donc un point de départ. Maintenant, si je passe à ce prototypage, donc pour ce bouton, nous l'avons déjà fait, nous avons déjà un prototype. Il vient de la précédente, donc je vais supprimer celle-ci. Maintenant, nous n'avons pas de prototype pour ce bouton. Et au fur et à mesure que nous avons rencontré le composant, il a pris toutes les fonctionnalités et fonctionnalités de notre modèle précédent. Il vous suffit donc de sélectionner celui-ci ici. Et à partir de là, il suffit de retirer le prototype. Dans ce cas, nous n'avons plus de prototypage dans ce modèle. Et nous pouvons faire le prototypage à partir d'ici. Je vais maintenant ajouter des interactions. Ici. Cliquez dessus, cliquez sur Onclick. Et à partir de là, nous devons ajouter un parchemin à l'endroit où nous voulons faire défiler. Nous voulons faire défiler. Nous voulons faire défiler jusqu' à ce que celui-ci soit le cadre neuf. Et je dois vérifier lequel est exactement le cadre neuf et lequel est coupé dix. Celui-ci est donc le cadre neuf et celui-ci est encadré en août. Nous sommes maintenant à neuf ans. Il va falloir passer au cadre dix. Bon, donc nous devons maintenant, nous sommes censés passer à la trame numéro dix. Ensuite, nous devons avoir une animation intime. Et puis, au lieu de sortir facilement, nous devons nous mettre en douceur. Bon, donc nous devons dire doucement d'ici à ici. Ok, donc ça va ressembler ce genre d'innovation. Et à partir de celui-ci, si nous cliquons dessus lors des interactions, sélectionnez un défilement parmi aucun pour faire défiler pour ajouter le cadre neuf. C'est notre cadre neuf. Et en animation. Et puis sélectionnez-le doucement. Ok, donc j'espère que nous pourrons voir que nous pouvons, nous pouvons faire défiler de gauche à droite et de gauche à droite. Nous avons donc appris comment le faire. Bon, maintenant, qu'est-ce que nous avons d'autre ? Nous devons ajouter un texte puis ajouter du texte normal. Et maintenant, quelques autres options. Je vais donc ajouter R. Donc maintenant je vais revenir à la section design ici. Et ici. abord, ajoutons cette grille de mise en page pour savoir par où commencer. Nous pouvons commencer par celui-ci. Je vais donc ajouter un texte. Je vais donc modifier le texte ici. Je vais dire que nous allons dire que nous allons commencer à partir d'ici. On peut dire le visage d'été, la robe d'été, ou je peux dire t-shirt d'été. Juste du texte aléatoire. Ok, donc on a ça au lieu de 15, je vais le sélectionner à 20 pour qu'il soit plus grand. Donc, T Some est un t-shirt. On y va. Et ensuite, je veux le faire, donc je vais copier ce texte de Loren ipsum. Encore une fois, je vais ajouter ce texte ici. Et je vais dessiner un texte. Et je vais le coller ici, mais nous n'avons pas besoin d'avoir des jumeaux. Nous devons avoir un 12e. Cool, c'est joli pour que nous puissions réduire la distance entre ces deux articles. Et puis je peux aussi réduire cette hauteur de ce texte. Nous avons donc cette information maintenant. Et après cela, nous voulons avoir une icône « One Plus ». Une icône de prix, puis des boutons plus et moins. Je vais donc dire un dollar pour 5450 et la taille sera de 20. Très bien, c'est joli et c'est toujours le cas, faut ajouter quelques options ici. Donc, ici, nous devons également avoir un plus, puis le numéro, puis le bouton moins. Pour cela, je vais ajouter un rectangle ici. Je vais dessiner rect, petite taille de rectangle, ajouter le rayon de bordure cinq, puis changer la couleur en blanc. Ensuite, nous pourrons ajouter notre trait et voyons à quoi il ressemble. On dirait ça. Ensuite, je vais au commandement D. et au D de ce que je vais devoir faire. Je vais donc ajouter ici l'icône moins, qui prend comme moins. Mais vous pouvez certainement le dessiner. Et puis je devrai ajouter varier car la taille de et ici nous pouvons le mettre au centre. Sur la droite, on peut le placer au centre. Ensuite, nous devons ajouter un numéro ici. Je peux en dire cinq, mais nous allons changer la taille de la police en taille normale, peut-être 20, puis nous la mettrons dans le texte. Le nombre est donc cinq. Ensuite, nous allons ajouter un texte supplémentaire, ce qui sera notre icône plus. Donc cette icône plus. Et encore une fois, je l'ajouterai en raison de la taille de la police. Donc je vais dire que 40 n'ont pas 44 ans, celui-là , je pense que 36 ou 24 ans. Je dois le mettre au centre. Maintenant, nous avons ce moins et ensuite nous avons cette icône plus. Je vais écrire. C'est joli, mais que devons-nous avoir maintenant ? Nous avons d'autres choses à ajouter. Nous avons cette accise LMS, puis celle-ci et ce bouton. Je vais donc ajouter ce que je peux faire ici. Nous pouvons donc créer tous ces éléments dans un groupe, ceci, ceci et ceci, et aussi ceci, faire un groupe. Je sais qu'on peut dire le nombre d'articles. Et ici, nous devrons ajouter notre taille. Et je vais ajouter les effets de celui-ci. Et voyons voir. Nous avons donc ceci et je veux avoir un rayon de bordure de cinq pixels, puis je peux le dupliquer quatre fois. Je vais donc dire Control D. Donc, au lieu de faire directement cette chose en premier, ajoutons du texte ici. Et je peux dire grand, et celui-ci n'y va pas. Il va donc être 20 pixels. Et ensuite, nous pourrons le mettre ici. Nous pouvons le mettre ici, ne sont pas du bon côté, mais du côté rare. Donc, maintenant, nous avons ceci et nous avons cela. Je vais appuyer sur Commande G. et maintenant je peux faire un double de cet objet. Je pense pour les grands. Alors celui-ci va être moyen. Celui-ci sera petit, et celui-ci sera très grand, très grand. Ces textes, je pense que je dois les ajuster. Et j'ai cette chose ici. Mais il n'est pas de la même taille, il faut donc ajuster celui-ci ici. Très bien, maintenant, c'est pareil. Et bien que nous puissions également le vérifier de cette façon, nous pouvons sélectionner tout ce groupe. Ensuite, nous pourrons vérifier notre ordre. Il y a donc un tout off. Nous avons donc cette chose ici. Et voilà. Nous avons cette chose, je pense qu'elle n'est toujours pas au centre. Je veux donc m'assurer qu'il se trouve au centre. Oui, il a l'air central. Mais revoyons ça. En ce moment. Il est au centre. Et c'est vrai, je dois maintenant ajouter un bouton ici. Et ce bouton va être un bouton et trois couleurs. Je veux donc ajouter l'outil ellipse ici. Donc, l'outil Ellipse. Et puis, ici, je veux ajouter 45. Voici nos 45 ascenseurs. Et ici, je veux ajouter des objets T. Et maintenant, je peux choisir ce numéro et celui-ci, ainsi que celui-ci. Nous avons l'icône T. Et maintenant, nous devons ajouter un bouton supplémentaire. Pour ça. Nous devons dessiner un rectangle ici. Ensuite, nous pourrons ajouter cette 25e cellule. Et nous y voilà. Nous devons tendre notre couleur. Et je vais ajouter un plugin. Nous devons donc sélectionner notre icône de panier. C'est donc l'icône de notre panier. Je vais le mettre ici. Et ce que je veux avoir, alors je dois d'abord le mettre dans la boîte, dans le cadre, puis changer la couleur en blanc. Ensuite, je devrai modifier du texte. Je vais donc dire que je vais dire « Ajouter au panier ». Pour x égal, nous avons Ajouter au panier. Très bien, nous avons donc notre design de boutons maintenant. Mais pour la taille de la police, je pense, pour les polices, je pense pouvoir la changer à 14. Et avons-nous cela ? Nous pouvons le rapprocher un peu plus de cette icône. Nous avons donc notre bouton, nous avons notre design. Mais ici, je veux avoir une icône, qui sera cette icône, qui est notre icône de vêtements. Je vais donc le mettre ici. Je vais donc changer la largeur et la hauteur à 35 par 35. Et faites-le glisser ici. Et voyons à quoi ça ressemble. Il est à l'extérieur du cadre maintenant, alors faites-le glisser à l'intérieur du cadre, alors seuls nous pouvons le voir. Maintenant que nous avons notre icône, nous avons notre design et nous pouvons faire appel. Très bien, donc enfin, nous avons cette fin, celle-ci. Dans la partie suivante, nous allons essayer de connecter ce boîtier modèle à notre mainframe, là où nous en avons, où nous avons notre article. Ainsi, lorsque l'utilisateur clique sur cet élément, nous ouvrons cette boîte de modèle. Je vais donc arrêter cette vidéo ici et nous continuerons avec la prochaine conférence. voit lors de la prochaine conférence. 16. Superposition de prototypes pour montrer une boîte modale: Bienvenue encore une fois. Dans cette partie, nous ajouterons notre boîte de modèle, notre boîte de modèle d'article avec notre carte. Si vite, laissez-moi diriger cette maison. Ce que nous pouvons voir chez nous. C'est donc notre boîtier modèle que nous devons connecter. Ok, donc pour cela, disons que lorsque l'utilisateur cliquera sur cet article, nous voulons montrer cette boîte de modèle, qui est notre modèle d'article fonctionne. Maintenant, c'est notre page d'accueil principale et c'est notre conception principale. Et le week-end horizontalement Skoll, nous pouvons particulièrement faire défiler de cette façon. Ensuite, nous avons notre conception de pagination. Nous avons notre section, nous avons notre pagination. Nous avons notre pied de page. Alors maintenant, je le veux, et je clique dessus. Cette carte, je veux montrer notre boîte modèle que nous venons de concevoir ici. Bon, maintenant je vais cliquer sur ce mode prototype ici, puis sélectionner cette image. Seulement cette monture. Maintenant, lorsque vous sélectionnez ce cadre, vous pouvez voir que ce cadre, d'accord ? Je vais donc devoir ajouter cette interaction. Donc, cliquez dessus, cliquez et nous avons besoin d'une option rapide. Et puis ici, au lieu de naviguer vers, nous devons sélectionner Ouvrir. Ouverte signifie la boîte de modèle que nous allons montrer où nous voulons montrer. Nous voulons montrer avec ce que nous voulons vous montrer et montrer le fonctionnement de notre modèle d'article. Maintenant, vous verrez ici quelques options. Celui-ci est donc déjà connecté. D'accord ? Donc maintenant si je viens ici, si je clique ici, je peux voir dans cette boîte de modèle. D'accord ? Mais nous devons quand même ajouter quelques options et celle-ci fonctionne également. Nous avons donc deux options. L'un est proche quand un clic à l'extérieur, cela signifie que si je clique en dehors de la boîte modale, nous voulons fermer notre horriblement ne sont pas. Actuellement, il ne fonctionne pas. Nous allons donc choisir celui-ci. Et voyons, maintenant il va supprimer si je clique sur RC maintenant, en fait, il n'a pas l' air superposé. Je suis dans les livres de modèles parce que lorsque nous ouvrons la boîte modale, que nous voyons généralement une sorte d'ombre, comme l'arrière-plan allait devenir un peu flou, de sorte qu'ils ont cette option pour ajouter un arrière-plan derrière la superposition. Sélectionnez celui-ci. Que pouvons-nous voir maintenant ? Maintenant, nous pouvons le voir maintenant. C'est vraiment joli. On dirait que le modèle original fonctionne maintenant, genre de choses que nous voyons habituellement. Et maintenant, voici une option. Donc, combien de couleur vous voulez, comme si vous ajoutez 100%, cela va vous donner tout le fond noir. Si nous les ajoutons, alors vous obtenez ce genre de sol, donnez-lui une fête. Et maintenant comment vous souhaitez montrer votre option. Je veux dire, comment ajouter votre modèle fonctionne. Nous avons donc ce genre d'antécédents maintenant. Maintenant, si je clique, notre site va être supprimé. Maintenant, nous pouvons voir que notre modèle vient du côté gauche, mais nous pouvons également choisir du côté droit, du côté gauche. Maintenant, si je clique dessus, il va venir du côté gauche. Nous pouvons également choisir parmi TAF. Maintenant, il va venir du haut. Je vais donc garder celui-ci n. Maintenant, encore une fois, nous devons travailler sur cette icône. Maintenant, si je clique dessus, ça devrait continuer, mais ça ne fonctionne pas maintenant, ainsi de suite. Ce que je vais devoir faire, je vais devoir aller dans ce cadre, qui est ce cadre. Et ici, je vais devoir choisir celui-ci. Et maintenant, je dois ajouter l'interaction ici. Donc, ce que je veux dire ici, quand OnClick, ce que je veux, je veux dire une superposition proche. Bon, maintenant je vais juste le relier ici. Maintenant, si je clique dessus, il va fermer, ouvrir celui-ci, puis fermer. Je peux donc également ajouter la dimension ici. Fermez la superposition. La superposition va revenir directement en arrière. Il va donc automatiquement rappeler de l'officier du hors-jeu. Et je pense que j'ai besoin d'ajuster un peu ce design. Revenons donc au design. Je suis désolé. J'ai besoin, vous vouliez le mettre ici dans cette taille. C'est notre sinus. Et faites-le. Et nous pouvons simplement l'appeler, nous pouvons cliquer sur notre côté. Il va continuer, Supprimer, puis cliquer dessus. Très bien, parfait. Nous avons donc tout notre design et dans la partie suivante, nous ajouterons ce prototypage pour l'inscription et la connexion paye. On se voit lors de la prochaine conférence. 17. Prototype pour s'inscrire et se connecter: Bienvenue encore une fois. Dans cette partie, nous allons essayer d' ajouter du prototypage à notre base d' inscription et de connexion. Très bien, passez rapidement à l'option prototype. Et maintenant, à partir d'ici, nous devons cliquer sur le bouton S'inscrire, cliquer sur le bouton S'inscrire, puis ajouter une indirection. Et cliquez ici. Et au lieu de naviguer pour cliquer sur Ouvrir la superposition parce que nous voulons montrer notre, que voulons-nous afficher en superposition ? Nous voulons montrer la base d'inscription. Alors ici, sélectionnez toute cette option et également celle-ci. Donc, au lieu d'un instant que je veux avoir, je veux dire emménager et ajouter ensuite passer du dur. Ensuite, vous pouvez sélectionner, vous pouvez sélectionner la poignée. Bon, maintenant, laissez-moi essayer. Donc, si je clique sur la signature , nous avons ce beau design. Nous devons donc ajouter un fond similaire à 40% car nous avons un fond blanc. Il semble maintenant que nous avons ce problème, peut-être 50 %. Maintenant, c'est joli. Par conséquent, lorsque l'utilisateur clique sur la page d'inscription, nous voulons les envoyer sur la page d'accueil. D'accord, maintenant, d'abord sur une image, d'abord au prototype de connexion. Cliquez donc sur la connexion. Cliquez donc sur la connexion, puis ajoutez des interactions, cliquez dessus. Et ici, vous devez cliquer à nouveau sur ouvrir la superposition. Et à partir de cette superposition ouverte, nous devons cette fois sélectionner notre page de connexion. Cliquez sur cet article, sélectionnez le contraste de couleur à 50 %. Et à l'animation morphing, ce que vous voulez. Et puis doux. Maintenant, voyons voir. Si je clique sur la connexion. Nous sommes donc en phase de signature, mais il y a un problème. Je ne l'ai pas remarqué. Nous avons donc une autre image de fond, une autre image ici. Laissez-moi résoudre ce problème rapidement. Nous avons donc notre face de connexion ici. Donc, d'où vient cette chose. Je vais donc retirer celle-ci, et maintenant elle a disparu. Notre connexion est donc terminée. Maintenant, lorsque l'utilisateur clique dessus, la connexion, nous voulons les afficher sur la page d'accueil. Bon, je vais donc revenir au prototype. Lorsque l'utilisateur clique sur le bouton de connexion, nous voulons les envoyer à la base d'accueil. , cliquez sur, puis accédez à l'endroit où nous voulons accéder à notre page d'accueil. Et puis, au lieu d'un instant, je veux dire que je viens d'entrer et de sortir. Bon, essayons donc. Ok, donc on est sur la page d'accueil, on clique dessus, on se connecte à la page d'accueil. Et lorsque l'utilisateur clique sur la page d'inscription, nous les enverrons en phase de connexion. Après leur approbation, nous les enverrons sur la page de connexion. Je vais donc ajouter de l' indirection, cliquer dessus, puis je peux dire naviguer où que vous alliez. Nous allons les envoyer à un rythme de connexion. Au lieu d'un exemple, on finit par dire morphine, puis cette chose. Alors, signez, puis signez. Bon, il y a donc un problème ici. Maintenant, en pensant logiquement que nous avons notre boîte modèle. Nous pouvons dire que si vous y arrivez, nous devrons nous asseoir en superposition ouverte. OK. Ouvrez donc la superposition pour la phase de connexion. Bon, je vais y retourner maintenant. Maintenant, si je clique sur l'inscription c'est que nous avons ceci. Maintenant, si je clique sur la phase d'inscription, nous sommes maintenant dans la page de connexion, et si je clique sur la page de connexion, nous sommes sur notre page d'accueil. Et une autre chose que nous devons ajouter a déjà une connexion au compte ici. Encore une fois, il est adressé à nos pairs de connexion. Cliquez ensuite dessus, puis cliquez sur Ouvrir la superposition. Et à partir d'ici, nous devons cliquer sur Connexion ici, puis ajouter 50 versements. Et au lieu d'un exemple, ajoutez des mouvements difficiles. Vous avez déjà un compte, vous avez déjà un compte connecté ici. Alors connectez-vous et si vous vous connectez, puis lorsque vous êtes à la maison et qu'il y a un autre problème, alors nous avons fait une erreur ici parce que j'irai vite ajouté ici. Vous n'avez donc pas de compte pour vous inscrire ici. J'ai donc besoin d'ajouter un texte ici, ce qui va être N est une erreur. Alors, signez ici. Si vous n'avez pas de compte, cliquez dessus et nous devons les envoyer. Nous devons les envoyer pour s' inscrire en superposition ouverte. Nous voulons nous inscrire au rythme, puis nous rendre instantanément sur le site. Bon, donc on a ajouté ça. Je vais retirer ce prototype de la conception de paires. Donc, si vous cliquez sur la connexion, nous les enverrons à la phase RDB car nous avons nos joueurs OTP. Bon, maintenant, alors cliquez dessus. Donc, OnClick non ouvert superposition. Et celui-ci va être OTP et ajouter. Toutes ces choses. Déplacez-vous des orteils et cela va être de 50 %. Alors, connectez-vous à partir d'ici, vous n'avez pas de compte pour vous inscrire ici. Déjà. Vous devez vous connecter à un compte ici. Et puis cliquez sur la connexion était dans l'ordre auquel nous sommes confrontés, mais nous avons perdu notre image. Je vais donc arranger celui-ci ici. Nous avons donc cette image. Donc je vais le faire, je vais rapidement dupliquer, je vais rapidement dupliquer ce EMS à partir d'ici. Et je vais traîner celui-ci. Très bien, nous avons donc notre image ici. Et maintenant, lorsque vous double-cliquez sur la vérification, nous les enverrons à la page d'accueil et reviendrons au prototype. Quand ils cliquent sur ce bouton, nous ajoutons une direction et ce sera notre onclick, naviguez vers l'endroit où nous voulons aller, nous voulons rentrer à la maison. Et ça va être un exemple. Bon, maintenant si je clique sur la vérification, nous sommes là. Maintenant, cliquez sur la connexion et ils se connecteront seront nos paires OTP à partir du collage OTP. Si je clique dessus, nous passons à celui-ci. Nous sommes donc dans notre base d'inscription. Je vais donc devoir corriger ce texte. Déjà. Vous avez un compte. Nous sommes donc sur une page de connexion. Je n'ai pas de compte déconnecté ici, puis signez-le. Déconnectez-vous, puis signez et vérifiez. Ok, et si je clique dessus, nous pouvons voir notre boîte de modèle et ensuite nous avons ajouté l'option d' appel des artistes. Très bien, nous avons donc ajouté toutes sortes de prototypage. 18. Conception d'exportation et de partage: Bienvenue dans cette conférence. Dans cette partie, nous allons apprendre comment exporter notre design. Jusqu'à présent, nous avons créé pour le cadre. L'un d'eux est l'inscription, la connexion, la conception d'objets d' accueil et l' art si vous encadrez. Disons donc que je veux exporter cette maison rapidement. Pour cela, il suffit de sélectionner le cadre que je veux exporter. Et puis, dans le bas, il y a une option appelée Exporter. Cliquez sur l'icône Plus. Ici, il y a un certain nombre d'articles. Combien d'articles souhaitez-vous exporter ? 12 ou trois, ce que vous voulez. Comme, je suis pauvre, comme comment un X0 à X. Puis le format. Je veux avoir un format JPEG et inclure cette chose. Maintenant, vous pouvez simplement explorer la quantité, exporter, elle va exporter votre design. Ainsi, en fonction de la taille et des MA ou de tout ce que vous avez ajouté, cela prendra du temps en fonction de celle-ci. Maintenant, il est en train d'exporter. Cela prendra du temps, il vous faudra temps pour exporter du papier. De cette façon, vous devrez sélectionner votre cadre, puis cliquer sur le bouton Exporter. Ensuite, il va le faire. Vous pouvez également sélectionner le format que vous souhaitez utiliser pour l'exportation. Et puis vous pouvez aussi notre visage et vous ne pouvez pas attendre qu'ils deviennent moins moulés, vous asseoir sur l'espace. Je vais donc cliquer sur L1 pour vous puissiez voir qu' il a été téléchargé. Maintenant, si je clique dessus, nous devrions pouvoir voir notre page d'accueil. C'est donc notre page d'accueil que nous venons de concevoir. Ici, vous pouvez voir que tout est ici. Tout est ici. C'est notre image. C'est vraiment joli. Très bien, alors allons maintenant exporter notre base d'inscription. Il suffit donc de sélectionner le cadre, puis d'ici les exportations, puis de sélectionner JPEG, puis d'exporter la pièce de connexion. Ensuite, je cliquerai dessus pour le vérifier. Il s'agit donc de notre inscription ou de notre cadre, puis c'est notre connexion. Donc, si je veux importer, exportez notre côté en ce sens que je vais ajouter cette connexion et ensuite je vais cliquer dessus. C'est notre connexion, puis notre OTP. Alors cliquez dessus et je vais tout explorer. Et puis la dernière fois, nous avons nos modèles d'articles. C'est donc notre OTP et nous avons notre modèle d'article ici. Nous avons donc notre exportation. Et c'est ainsi que nous pouvons voir. Il s'agit de notre modèle d'article. Très bien ? Et à partir de là, vous pouvez également partager. Il suffit donc de cliquer sur Partager. Et vous pouvez sélectionner, voir ou modifier, ils peuvent, simplement, voir le gâchis. Ensuite, vous pouvez simplement saisir l'adresse e-mail du membre de votre équipe , puis envoyer une invitation. Vous pouvez également simplement copier le lien, puis le partager. D'accord ? Cela va également fonctionner. Donc, copiez le lien et, par exemple, vous pouvez simplement le partager ici. Et laissez-moi l'ouvrir dans une autre fenêtre. Maintenant, je vais le coller. Et nous ne devrions pas pouvoir voir notre design ici. Donc, il va charger deux va prendre du temps quelques instants. Je veux donc dire quelques choses ici et ici. Vous pouvez également obtenir du code intégré. Vous pouvez ajouter. Vous pouvez également, si vous le souhaitez, vous pouvez également publier dans la communauté. Il y a tellement d'options ici. voilà. C'est donc notre design. Maintenant, il demande de connexion, mais pour voir celui-ci, n'est pas nécessaire de se connecter. Nous pouvons accéder à notre design ici. Et selon le nombre de fichiers dont vous disposez, le chargement prend du temps. Nous pouvons voir tout notre cadre maintenant ici, mais il faudra encore du temps pour charger notre MS et parce que nous avons beaucoup d'images, s'agit maintenant de notre page d'accueil. C'est ainsi que vous pourrez partager cette chose avec les membres de votre équipe. Je vois que c'est juste que ça te manque. Dites à n'importe qui peut voir. Mais si vous avez accès à la connexion et que vous le serez, vous pourrez voir d'autres fonctionnalités. Très bien, donc je vais arrêter cette vidéo ici.