Design d'application d'interface utilisateur UX : maîtriser des maquettes et un prototype de haute fidélité

1. Bienvenue à l'atelier de création d'applications UX UI: Bonjour à tous. Si vous envisagez de démarrer UY UX Design Journey Impro UY UX design skills, ce cours est votre point de départ. m'appelle Akaanka et je suis une designer UY UX qui aime créer des applications et des sites Web centrés sur l'utilisateur Nous ne parlons pas seulement de la théorie du design UY UX, nous parlons ici de transformer votre vision en réalité, pixel by Fixel L'objectif principal de ce cours est d'apprendre à créer conceptions d'applications mobiles centrées sur l' utilisateur faciles à utiliser et superbes. Imaginez le choix des couleurs sans aucun problème d'accessibilité de l'application. Choisissez des téléphones qui améliorent la lisibilité et transmettent le ton approprié à votre application Explorez le monde des icônes et leur rôle dans la création d'interfaces utilisateur intuitives et visuellement attrayantes. En gardant tout organisé, comme boîte à outils bien étiquetée, appliquez principes de l' expérience utilisateur et perdez de vue les conceptions d'interface utilisateur Et créer des applications que Gus utilise et des solutions à ses problèmes. Nous ne nous contenterons pas de concevoir de belles interfaces utilisateur, nous nous concentrerons également sur la conception d'applications centrées sur l'utilisateur en appliquant U X à la conception de l'interface utilisateur. Nous ferons tout cela et bien plus encore. Nous utiliserons Freqma pour concevoir les annotations de nos applications , puis les transformer en prototypes fonctionnels. Je suis là pour vous guider pas à pas. Nous travaillerons donc ensemble pour créer une application de commande au pied de page et aborder principes et les meilleures pratiques de conception d'expérience utilisateur qui vous aideront à concevoir tout type d'application prête à améliorer votre cas de conception d' application UX. Allons-y. Je te verrai dans la classe. 2. Sélection de couleurs en utilisant la psychologie des couleurs: Il existe de nombreuses façons d'en apprendre davantage sur la psychologie des couleurs et de trouver la meilleure couleur pour votre application ou votre marque. Je vais commencer par manière la plus générique et je vais vous montrer la méthode personnelle que j'ai choisie pour sélectionner les couleurs. Tout d'abord, je vais aller sur Google et faire une recherche sur la psychologie des couleurs. Maintenant, je vais voir de nombreux articles. En suivant les directives de ces articles, je peux me faire une meilleure idée de la psychologie des couleurs et de la façon de l'appliquer pour trouver la bonne couleur de marque. Le bleu représente la confiance, loyauté, la sécurité, et il est lié au secteur bancaire. Si vous préférez les marques les plus populaires liées au secteur bancaire, vous verrez que le bleu est l'une des couleurs populaires utilisées par la plupart des marques. La première méthode consiste à lire ce type d'articles. La deuxième méthode consiste à utiliser un détail généré. Vous pouvez utiliser Google Brat et GPT pour poser des questions sur la psychologie des couleurs et trouver la meilleure Ma méthode préférée est de consulter le guide Color Emotion. Voici un article sur la psychologie de la couleur dans la conception de logos. J'aime suivre ce guide des émotions liées aux couleurs et sélectionner la couleur. j'utilise ce guide d'émotions par couleur, c'est parce que je peux consulter le groupe populaire et la couleur qu'il a utilisée pour créer ses logos. Dans notre cas, nous allons créer une application de livraison de nourriture, et c'est pour une boulangerie. L'émotion et le sens de la boulangerie sont la santé, l'enthousiasme et la rapidité de livraison. Donc, si nous vérifions les logos selon ou sous cette section consacrée à l'optimisme et à la clarté, nous verrons les logos liés à des marques de livraison et à des chaînes de passeports comme Mcdonalds et comme Mcdonalds De plus, si nous consultons cette section sur la croissance pacifique et la santé, nous pouvons également voir certains logos liés aux aliments. Dans cette application, j'aimerais utiliser cette couleur verte. Si vous, si votre application appartient à un créneau ou à une marque différente, vous pouvez suivre cette émotion de couleur, les guider pour vérifier ces logos et trouver le logo le plus apparenté que vous recherchez. La première partie est terminée maintenant, notre couleur est le vert, mais je n'ai pas de couleur verte spécifique, donc je dois trouver la couleur verte spécifique. Ensuite, je dois trouver la couleur secondaire et la couleur d'accent. Dans la leçon suivante, nous utiliserons la roue chromatique pour optimiser notre couleur primaire. Ensuite, nous découvrirons la règle 603010 et découvrirons la deuxième couleur et la couleur d' accent de notre chat 3. Sélection d'une couleur primaire: OK, maintenant nous avons sélectionné le vert pour notre marque. Et vous allez sélectionner la couleur de votre marque en fonction de votre application. Nous pouvons maintenant voir les options que nous pouvons utiliser dans notre application. Essayons donc de trouver la couleur qui correspond à notre application et à notre marque. Pour ce faire, je vais me rendre sur Coolers.com et je clique sur Explore Trending OK, maintenant dans la barre de recherche, je vais chercher en vert, ou je peux simplement cliquer sur cette étiquette de couleur. Et maintenant, nous avons différents types de palette de couleurs. Et en utilisant ces palettes de couleurs, nous pouvons trouver la meilleure couleur pour notre application. Découvrons la meilleure couleur verte ou la meilleure couleur pour votre application, la couleur principale. J'aime beaucoup cette couleur verte, suffit donc de cliquer dessus. Et quand je clique dessus, le code couleur sera copié. Ensuite, je vais aller sur la page d' accueil des refroidisseurs et cliquer sur Démarrer le générateur Maintenant, ici, je vais cliquer sur ce code couleur pour sélectionner la couleur. Je vais donc coller la couleur que j'ai sélectionnée. Et maintenant je vais cliquer sur cette icône locale. Nous avons maintenant la couleur primaire. Dans la prochaine leçon, je vais vous présenter la règle 603010 4. La règle 60-30-10: La règle 603010 est une directive de design d'intérieur que les concepteurs utilisent pour créer une palette de couleurs La règle 603010 est la meilleure méthode pour équilibrer les couleurs dans le design La règle 603010 comporte trois couleurs, chaque couleur occupant un pourcentage spécifique du design global Le 60 % est la couleur dominante, ce qui signifie qu'il utilisera 60 % du design global et 30 % est la couleur secondaire. Et cette couleur sera utilisée pour 30 % du dessin et 10 % pour la couleur Cent. Et ces 10 % seront utilisés pour mettre en valeur les parties les plus importantes de l'objet sur le design. En suivant cette règle 603010, nous pouvons créer des palettes de couleurs fois harmonieuses et visuellement attrayantes Même si les règles s'appliquent au design d'intérieur, nous pouvons les appliquer car I designed to. Lorsque nous parlons d'UX ou d'expérience utilisateur, il existe un principe appelé clés. OK, je double, ce qui veut dire que c'est simple, stupide. En suivant cette règle 163010, nous pouvons conserver la simplicité et mettre en valeur la partie la plus importante du design à l'aide de C'est pourquoi il est important d'utiliser cette règle des 60, 30 également en tant que débutant, c'est la meilleure méthode pour choisir la bonne couleur. Parce que si vous utilisez couleur contenant beaucoup de couleurs, cela ruinera votre design. Si vous n'êtes pas doué pour choisir les bonnes couleurs comme moi, cette règle 603010 vous aidera à y parvenir Découvrons quelques exemples de la règle 603010 utilisée dans le design d' intérieur Ensuite, je vais vous montrer deux sites Web qui utilisent la règle 603010 pour choisir leurs couleurs Voici donc le premier design. Ainsi, dans ce design, couleur dominante occupe 60 % de l'intérieur et nous avons cette couleur brune sur le sol et la couleur d'accent dans la décoration verte. Et voyons un autre exemple. D'accord ? Dans cet exemple, nous avons la lumière comme couleur, comme couleur dominante. Et c'est 60 %. Et nous avons une couleur secondaire comme ce vernis, la couleur du bois. Et nous avons 10 % de couleurs d'accent. Mais quand vous regardez ce design, vous verrez clairement que la couleur d'accent est supérieure à 10 %. Il y a donc plusieurs raisons à cela. Comme je l'ai déjà dit, le 603010 est une règle Ce n'est pas une loi de principe. Nous pouvons donc enfreindre ces règles. D'accord ? Je vais le dire encore une fois. Nous pouvons enfreindre la règle 603010, c' est-à-dire s'il y a quelque chose à changer ou à voir avec les couleurs, et c'est tout à fait normal d'enfreindre cette règle 603010 c' est-à-dire s'il y a quelque chose à changer ou à voir avec les couleurs, et c'est tout à fait normal d'enfreindre cette règle 603010. Ce n'est qu'une règle et nous utilisons cette règle pour garder notre design simple et trouver facilement les meilleures couleurs. Passons au design suivant. Dans cette conception, les couleurs du mur sont le blanc et la couleur du flux est le marron. Et nous avons cette couleur sombre pour les lumières et le chaos. Passons donc à la suivante. Et dans cette conception, vous pouvez voir la règle 603010 appliquée Et parfois, il n'est pas facile de comprendre les règles 603010 lorsque nous inspectons les intérieurs Même ils utilisent la règle 603010 pour le design d'intérieur. Ils peuvent utiliser différents types de couleurs, et comme je l'ai déjà dit, c'est une règle et nous pouvons enfreindre les règles. OK, passons maintenant à un exemple concret. Et maintenant je suis sur Netflix.com Sur Netflix, vous pouvez clairement voir 60 % de couleur foncée en arrière-plan Et derrière le fond, on peut voir les derniers films et séries télévisées, mais il fait toujours noir. Et nous pouvons clairement voir 30 % de couleur utilisés sur le texte et sur ce texte P. Maintenant c'est le fun bar. Vous pouvez clairement voir quels sont les appels à l'action. Chat. L'appel à l'action est l'élément actionnable sur lequel les utilisateurs peuvent cliquer pour passer à l'étape suivante Dans ce cas, le CTA est ce gros rouge. Cliquez sur le bouton de démarrage. Et le but de Netflix est donner des abonnements à Peebles, de les ajouter à leur base de données et de leur facturer de l'argent Ainsi, lorsque l'utilisateur accède à cette page, personne voit clairement le message qu'elle souhaite voir et l'appel à l' action qu'elle souhaite lancer. C'est donc un excellent exemple. De plus, si je fais défiler la page vers le bas, j'ai toujours une couleur plus foncée que 60 % et 30 % de blanc et il y a peu de couleurs différentes. Si nous vérifions le design général, nous pouvons clairement voir quelles sont les couleurs et quelles sont les couleurs 603010 Passons à l'exemple suivant et à E Slack.com Dans Slack, vous pouvez clairement voir le fond violet et c'est le 60 %. Ensuite, nous verrons 30 % du y. Et nous pouvons voir cette couleur orange comme les 10 %. Vous vous demandez peut-être quelle est la couleur bleue sur cette inscription avec Comme je l'ai déjà dit, 603010 est une règle que nous utilisons pour voir facilement une palette de couleurs et garder le design De plus, si je baisse maintenant, nous avons 60 % de cette couleur crème claire et 30 % de cette couleur noire, et nous avons ces liens en bleu. De plus, si je baisse, encore une fois, nous avons une couleur blanche sous forme de brun noir et c'est 60 % Ensuite, nous avons 30 % de couleur noire et 10 % de couleur violette. Ainsi, section par section, ils modifient la combinaison de couleurs qu'ils choisissent et ajoutent également d'autres couleurs. Telle est donc la réalité. Même si nous sélectionnons trois palettes de couleurs, les clients souhaitent peut-être ajouter des couleurs différentes au design. Dans ce cas, nous devons modifier nos exigences en fonction du client. Alors maintenant, vous connaissez la règle 603010. Et dans la prochaine leçon, nous allons créer notre palette de couleurs. Comme nous l'avons fait, nous avons déjà la couleur dominante ou primaire et nous devons maintenant sélectionner la couleur secondaire et la couleur d'accent. Rendez-vous dans la prochaine leçon. 5. Créer la palette de couleurs: Bonjour tout le monde. Maintenant, je suis sur Cools Point Go, et nous sommes prêts, sélectionnez ce vert pomme comme couleur dominante de notre couleur primaire Et maintenant, nous avons quatre autres couleurs, mais nous n'en avons besoin que de trois. Je vais donc supprimer ces couleurs inutiles. OK, maintenant j'ai ces trois couleurs et je verrouille cette couleur primaire, car il suffit de choisir la couleur secondaire et la couleur d'accent. Il existe donc plusieurs façons de sélectionner une couleur secondaire. La seule méthode, c'est de prendre des palettes de couleurs. Je vais dans les glacières, j'explore les palettes tendance et je tape le vert Et vous pouvez voir ce type de palette de couleurs. Et nous l'utilisons pour sélectionner la couleur. Et vous pouvez l'utiliser pour sélectionner les couleurs correspondantes. Mais il existe d'autres moyens de le faire, meilleurs moyens de le faire. Nous avons déjà notre couleur principale, et cette couleur est la couleur foncée. Maintenant, nous avons besoin de la couleur de la lumière. Pour vérifier la couleur qui correspond à cette couleur verte. Il suffit de cliquer ici et appuyer sur le bouton Espace du clavier, et vous verrez une couleur différente lorsque vous appuierez sur le bouton Espace. De cette façon, vous pouvez choisir la bonne couleur ou vous pouvez choisir la couleur que vous souhaitez utiliser. Dans ce cas, j'aimerais utiliser le blanc comme couleur secondaire. Ensuite, je clique sur ce verrou et je verrouille la couleur. Maintenant, nous devons trouver la couleur d'accent. Cette couleur d'accent sera la couleur que nous avons utilisée pour le texte. J'aime bien ce type de couleur foncée. Et si je veux, je peux juste vérifier plus, mais j'aime beaucoup cette couleur foncée. Maintenant, j'ai les trois couleurs. Je tiens donc à vous rappeler que selon la règle 603010, ces couleurs seront modifiées en fonction des sections qui signifie que si la couleur de fond de la section est blanche, nous pouvons utiliser cette couleur blanche 60 % et nous utiliserons cette couleur foncée 30 % et nous utiliserons cette couleur verte 10 %. Je vais vous la montrer sur le dessin. Je veux juste que vous sachiez que nous utiliserons ces couleurs selon les sections. Par exemple, si la couleur de fond d'une section est le pommier, nous utiliserons la couleur du texte comme Y. J'espère que vous comprenez maintenant que nous avons ces trois couleurs Mais nous n'avons toujours pas terminé, car nous devons tenir compte de l'accessibilité, ce qui signifie que nous devons vérifier le contraste de ces couleurs. Si vous ne connaissez pas l'accessibilité de U X, l'explication est simple : lorsque nous créons un design pour les utilisateurs, nous devons le créer de manière à ce que tout le monde puisse l'utiliser sans problème. Si vous êtes un produit utilisé par des personnes handicapées , comme Color Bind Less ou par des personnes malvoyantes, nous devons veiller à ce que tout le monde puisse utiliser cette application. Et nous ne nous contentons pas de créer une belle interface utilisateur, nous prenons également en compte l'UA. Et nous devons placer l'utilisateur au premier plan et créer le design pour les utilisateurs. Dans la prochaine leçon, je vais vous montrer comment vérifier le contraste. 6. Vérification de l'accessibilité des couleurs: Il est maintenant temps de procéder à l'accessibilité, nous devons donc vérifier le contraste. Pour ce faire, je vais colortadobby.com Lorsque vous allez sur le site Web d'Adobcolor, vous verrez ce type d'onglet et vous verrez des outils d'accessibilité sur colortadobby.com Lorsque vous allez sur le site Web d'Adobcolor, vous verrez ce type d'onglet et vous verrez des outils d'accessibilité. Je clique juste dessus. Et maintenant j'ai l'outil Contrast Checker. De plus, j'ai aussi un outil pour daltoniens. Dans ce cas, je clique sur Contrast Checker, puis je l'admets ici et je vérifie le taux de contraste Je sélectionne cette couleur et je vais ici, puis je colle la couleur ici. Ensuite, je sélectionnerai également cette couleur secondaire. Lorsque nous vérifions le contraste, le rapport de contraste est très faible et le test a échoué. Cela signifie que je dois utiliser la couleur de retour vers le bas, car si je crée un bouton avec ce composant graphique de bouton de couleur et que j'utilise la couleur de retour vers le bas, un blanc, ce sera un problème pour les agresseurs Changez la couleur du texte en blanc et en couleur de fond car cette couleur verte nous a tout de même obtenu le résultat correct. Passons maintenant à la palette de couleurs et voyons comment elle fonctionne avec la couleur d'accent. Je vais mettre le texte en couleur accentuée et maintenant il passe le texte. Changeons la couleur du texte et la couleur d'arrière-plan. Si la couleur de fond est noire, cela fonctionne bien. Mais dans notre cas, nous devons ajouter une couleur de texte en noir et une couleur d'arrière-plan en tant que couleur verte. Alors maintenant, ce que nous pouvons faire, c'est changer cette couleur brun noir. Je peux utiliser ce filtre pour le modifier, ou je peux appliquer cette suggestion de contraste comme ceci. OK, il semble que cette couleur fonctionne bien. Et changeons la couleur gustative en vert et la couleur d'arrière-plan en noir. Et ça marche bien. Et le contraste de Precio est vraiment bon et maintenant nous devons le vérifier avec cette couleur blanche, alors couvrons-le et ajoutons une couleur de fond à cette couleur blanche Et dans ce cas, nous échouons toujours. Donc, ce que nous devrions faire ici est ma suggestion, j'utilise la couleur de fond comme le noir. Je choisis la couleur principale ou la couleur primaire, la couleur notre marque étant le vert plus foncé. Je vais donc appliquer ce filtre. Et puis le blanc sera la couleur de fond. Vous pouvez donc ajuster ce blanc si vous le souhaitez. Passons ensuite de la couleur de fond à la couleur du texte. Et cela fonctionne bien dans mon application Les appels à des actions comme les boutons seront en vert et le texte de ce bouton en blanc. Et c'est la couleur verte que je dois sélectionner. Passons à la palette de couleurs et déverrouillons-la. Ensuite, je vais changer cette couleur. Copions maintenant cette couleur plus foncée. Et je vais utiliser cette couleur comme couleur de texte. Mais lorsque j'utilise cette couleur de texte, mes arrière-plans seront blancs comme ça. Donc, si nous utilisons cette méthode, nous n'aurons aucun problème de contraste de couleur. Et nous allons réussir notre test d'accessibilité. Jouez donc avec ces niveaux et obtenez le meilleur rapport de contraste. Bon, maintenant nous avons trouvé notre palette de couleurs. Dans la prochaine leçon, nous verrons comment trouver la typographie adaptée et optimale pour le site Web 7. Cours bonus - Moyens faciles de sélectionner des couleurs: D'accord, voyons le moyen le plus simple et le plus rapide de trouver les bonnes couleurs pour vous. Nous pouvons trouver des couleurs ou nous inspirer de nos concurrents afin de créer un moodboard et recueillir le design de nos Et inspirez-vous du design sur des sites Web tels que Dribble Bas et Painters Alors allons-y. Tout d'abord, je vais créer un cadre sur Figma et augmenter la taille du cadre. Ce sera mon mood board, je vais donc le renommer en mood board Mais si vous n'avez pas d'expérience à Fikma, ne vous inquiétez pas. Je vais vous montrer comment utiliser Sikma dans les prochaines leçons. Pour l'instant, regardez ce que je fais. Alors maintenant, je vais chercher mes concurrents. Mes concurrents sont donc d'autres applications de livraison de nourriture et de boulangerie. Donc, une chose que je peux faire est d'aller sur Place Stow et de rechercher une application de livraison de nourriture OK, maintenant c'est à moi de rendre des comptes. Je vais donc rechercher application de livraison de nourriture et je vais voir ce type de résultat. Cependant, vous devez trouver les applications liées à votre niche ou à votre application, ce qui signifie que vos concurrents consultent ensuite le compte d' évaluation et trouvent l'inspiration du design. Par exemple, si je vais sur Appliquer ceci, je peux vérifier l'écran de l'application. Je peux également l'installer sur mon mobile et vérifier l'écran de cette façon. La prochaine chose que nous pouvons faire est de vérifier les inspirations de design sur des sites Web tels que Dribble Maintenant, je suis sur Dribble.com et vous pouvez facilement créer un pré-compte sur Bleble, un site Web lequel les designers partagent leur travail Donc, si je vais ici et que je recherche une application de livraison de nourriture et que je sélectionne le mobile sur le terrain, je verrai ce type d'applications. Ouvrons-en quelques-uns. OK, après avoir ouvert ces applications, je vais obtenir une capture d'écran. Appuyez sur Chief Command et Poll Mac. Et sous Windows, vous pouvez utiliser l'outil Ni Pin. Je vais donc mettre la capture d'écran en haut de celle-ci. Mettons la capture d'écran ici. Nous avons la couleur que le créateur de l'application choisit pour concevoir l'application. Voyons donc ces détails. Lorsque nous trouvons des inspirations de design comme Dribble, la plupart du temps, nous obtenons des designs irréalistes, ce qui signifie que si nous créons des designs avec ces modèles tels quels, cela peut être une bonne interface utilisateur, utiliser une interface Mais parfois, la plupart de ces modèles sont compliqués et n'offrent pas une bonne expérience utilisateur. Cependant, dans ce cas, nous utilisons ces modèles pour inspirer des couleurs. Mais nous pouvons également utiliser ces designs pour trouver l'inspiration en matière de design. Mais lorsque nous essayons de trouver l'inspiration pour le design, nous devons vérifier la facilité d' utilisation et utiliser l'expérience de ces designs. C'est pourquoi nous devons effectuer une analyse de la concurrence, identifier les forces et faiblesses de nos concurrents et tirer des idées et de l'inspiration de nos concurrents. OK, maintenant je vais sur le compte Figma et je vais ajouter toutes ces captures d'écran dans Mood board. Il suffit de sélectionner Early Screenshot et de les regarder comme ça. Et maintenant je vais les mettre sur le cadre. Avant cela, je clique sur le cadre et je change la couleur du champ pour qu' il soit plus sombre. Nous trouverons facilement l' inspiration que nous récoltons. Ok, allons-y comme ça. Lorsque nous créons le moodboard, essayez toujours d'avoir au moins 20 inspirations de design Il sera donc facile de trouver les bonnes couleurs ou de s'inspirer du design lorsque nous les vérifierons. De plus, nous voyons clairement qu'il existe des couleurs comme l'orange, rouge clair et le vert pour les couleurs. Ce sont les couleurs de la marque. Et le noir est la couleur du texte, et la couleur de fond est le blanc. C'est donc le moyen le plus simple de s'inspirer des couleurs. Si vous n'avez aucune idée des couleurs, vous pouvez utiliser cette méthode pour sélectionner les couleurs. Mais je recommande vivement de préférer la psychologie des couleurs et de suivre cette voie. Cependant, une fois que vous avez sélectionné la couleur, lorsque vous avez terminé de sélectionner la couleur, créez un cadre comme celui-ci. Et appuyez dessus pour ouvrir le sélecteur de couleur et j' aimerais ajouter la couleur verte Cliquez donc sur la couleur verte. Et puis je voudrais ajouter la couleur marron du dos. C'est blanc. Je vais donc le dupliquer en appuyant sur Alt, en le faisant glisser vers la droite et en le sélectionnant. Appuyez ensuite et sélectionnez la couleur marron noir en blanc. D'accord, dupliquez-le et appuyez dessus pour trouver la couleur du texte. La couleur du texte sera la suivante. Bien, maintenant nous avons trois couleurs. 8. Principes de base de la typographie: Choisir la bonne typographie pour l'application est la partie la plus importante du design d'UY US comprendre les principes fondamentaux de comprendre les principes fondamentaux de la classification des caractères, Il est essentiel de comprendre les principes fondamentaux de la classification des caractères, des polices de caractères et des polices de caractères pour créer un design qui communique efficacement et engage les utilisateurs sans aucun problème Parlons donc de la classification des types. La classification des types comporte plusieurs catégories, des caractéristiques uniques. Il existe deux classifications de types les plus importantes, savoir Serif et San Serif Dans la classification par empattement, il comporte de petites lignes décoratives à la fin des caractères. Ces points véhiculent un champ plus traditionnel et formel. D'autre part, nous avons une classification de type sunserif Et la classification de type Sun Serif ne comporte pas de lignes à la fin des caractères. Ces téléphones sont propres et modernes, ce qui les rend populaires pour les interfaces numériques. Ensuite, nous devons choisir la police de caractères et la police. Découvrons la différence entre une police de caractères et une police de caractères. Une police de caractères est un dessin des caractères, tandis qu'une police correspond aux styles et à la taille spécifiques de ce dessin Par exemple, Aerial est la police de caractères. 42 fix bold est la police. Voyons un autre exemple. Dans ce cas, le type de face est Roboto et le recto est 50 weekel normal 9. Message et émotion dans la typographie: Découvrons comment sélectionner la bonne typographie pour votre application Dans cette leçon, je vais vous donner les informations de base. Dans la leçon suivante, nous utiliserons les connaissances acquises dans cette leçon pour sélectionner la typographie adaptée à notre application Et nous utiliserons un site Web tel que Google Phone pour trouver le meilleur téléphone pour tout type d'application ou de site Web. Chaque application ou site Web contient un message et des émotions spécifiques qui permettent aux utilisateurs idée de l'objectif du produit. Ces émotions et ces messages sont essentiels pour sélectionner une typographie efficace Lorsque nous examinons les messages, nous pouvons les reconnaître en trois parties. Ceux-ci sont sérieux, ludiques, modernes, le luxe le plus traditionnel était décontracté. Discutons de chacun de ces messages. Dans les messages sérieux, nous pouvons sélectionner des classifications. dans cet exemple pour le pool de jeux, nous pouvons sélectionner une classification de type sans serif Le chemin de fer est le meilleur exemple, comme je l'ai déjà dit. Dans la vidéo suivante, nous allons découvrir comment vérifier la phase de la typographie sur des sites web tels que Google Phone Ensuite, nous avons la catégorie traditionnelle moderne. La catégorie moderne a une classification minimaliste de type sanserifphont Dans le style traditionnel nous avons la classification par empattement , puis nous avons le luxe et le décontracté Dans les messages de luxe, nous pouvons obtenir élégantes polices de classification de type serif pour Cashewal, nous pouvons obtenir des points tels manuscrites ou de type script De plus, nous pouvons sélectionner la bonne typographie en fonction des émotions qui se dégagent de l'application Il existe principalement trois types d'émotions. Ces préjudices étaient graves , graves et formels, informels. Je partagerai la documentation laquelle vous pouvez vous référer et en apprendre davantage sur le type de classification que nous pouvons sélectionner en fonction des émotions. Ensuite, une fois que nous avons compris la classification des types de notre application ou de notre site Web, nous devons prioriser la lisibilité Quelle que soit la lisibilité de votre marque, photographiez, soyez toujours une priorité absolue Choisissez une police et une taille de police agréables à regarder, en particulier pour les textes longs La plupart du temps, les Sons Phone sont souvent privilégiés pour contenu numérique en raison de leur clarté et de leur facilité de lecture sur les écrans. Dans la leçon suivante, nous allons tirer parti de notre compréhension de la sélection de la typographie pour choisir le point idéal pour la conception de notre application 10. Comment utiliser le site Web de polices Google: Découvrons comment sélectionner une police pour notre projet. Il n'y a donc que deux moyens. La première méthode consiste à réfléchir à l'émotion et au message de la marque. Et sélectionnez une police en fonction du message. Et la deuxième méthode consiste à effectuer une analyse de la concurrence et à trouver les meilleurs concurrents directs et indirects. Vérifiez ensuite la typhographie qu'ils utilisent sur le dessin. Utilisons les deux méthodes. Et dans un premier temps, découvrons comment sélectionner une typhographie fonction de la marque Prenons donc notre exemple en tant que d'avocats, le message selon lequel le cabinet d' avocats est sérieux, ce qui signifie qu'il doit s' agir d'un point d'empattement Toujours dans le domaine de l'émotion, le message ou l'émotion doit être sérieux. Ce qui signifie que nous pouvons utiliser la typographie audacieuse de San Serif. Nous avons donc deux options. Découvrons d'abord la typographie de classification des types serif Je vais donc sur Font.Google.com et Font.dooogle.com ou Google Font ont une collection de polices que nous pouvons utiliser sur notre polices Dans la police Google, nous avons une barre de recherche. Si vous connaissez une police spécifique, vous pouvez rechercher Kitten ici comme ceci. Alors voyons voir. Nous voulons trouver la police de caractères, Core Roboto. Donc, quand j'ai fait une recherche, j'ai trouvé le téléphone Roboto OK, je le lance, puis ici nous pouvons taper quelque chose qui apparaît dans l'aperçu du texte Maintenant, ici, nous pouvons changer la taille du téléphone. Ensuite, nous avons des filtres. Dans notre exemple, nous devons trouver la classification de type Serif Je sélectionne donc Serif. Lorsque je sélectionne, j'ai obtenu ce type de points liés à la classification des serfs Lorsque nous vérifierons le téléphone, cela devrait être sérieux. Faites défiler les téléphones Google et trouvez le point. Dans ce cas, j'aimerais sélectionner ce type de pont. Cliquons sur le téléphone et il s'ouvre comme ça. Ici, nous avons le nom du téléphone. Nous avons ici les caractéristiques du téléphone. Maintenant, je peux passer au test de type. Dans le test de type, je peux voir l'aperçu du texte sur les lignes de titre et sur le texte du paragraphe. Pour l'en-tête, ce sera vraiment bien, mais pour le corps du texte ou du paragraphe, cela ne conviendra pas car la lisibilité n' est pas très bonne Mais nous pouvons ajuster la taille de la police et l'espacement des lettres, puis le tester, qu'il fonctionne ou non Si je réduis la taille de la police à 14 pixels et que je double la hauteur de la ligne, cela peut sembler plus beau, mais j'aimerais sélectionner cette tête de police et nous devons trouver une police différente pour le corps du texte. De plus, lorsque vous sélectionnez la police, lisez toujours le texte à propos et découvrez les détails de cette typographie Parce que la plupart du temps, ces polices ont des caractéristiques et le développeur de ces polices ou le concepteur de ces polices les mentionnent dans la section à propos. Trouvons donc une police pour le corps. Donc pour cela, je vais sur la page d'accueil. OK, maintenant je vais à nouveau sur la police Google pour la page. Et cette fois, nous allons trouver du texte pour le corps. Lorsque nous trouvons du texte pour le corps ou pour les paragraphes, nous devons prioriser la lisibilité La classification de type Sansi sera la meilleure pour le corps du texte. Je clique sur ce filtre sansori et j'obtiens ce type de police Maintenant, je vais réduire la taille à 21, disons. Et maintenant, découvrons la police qui convient design de Body of the law firm. Nous avons ici une typographie d' apparence professionnelle. Je vais cliquer dessus, puis je pourrai voir l' apparence de la typographie Passons donc au test de type. Et ici, nous avons un aperçu du texte du paragraphe et je vais le souligner. Réglons ensuite la hauteur de ligne à 1,25, puis nous pouvons modifier la largeur de la police Faisons le Was 300, d'accord. Il s'agit d'une police plus claire, nous avons donc maintenant deux polices. Pour sélectionner. La police, nous pouvons simplement trouver le téléphone que nous recherchons et voici la typographie Et c'est le téléphone qu'il utilise avec 300. Ensuite, je clique sur ce bouton de sélection, et nous avons ici tous les détails du téléphone. De plus, si je passe à la police sélectionnée auparavant pour le titre, et que nous passons au test de saisie. Et nous avons sélectionné la taille 40. En fait, 40 A , c'est vraiment trop pour l'application, alors faisons-en 40 et ce sera 400. Ensuite, nous avons les détails rapidement à ce sujet. Et maintenant, nous avons la police sélectionnée. Et sur Figma, nous pouvons taper ce texte dans la section police et sélectionner la typographie Dans les prochaines leçons, je vous montrerai comment utiliser ces polices dans Figma Design, et dans la leçon suivante, nous sélectionnerons la police pour notre application de livraison de nourriture 11. Sélection de polices pour une nouvelle application de livraison de nourriture: OK, sélectionnons la typographie pour notre application de livraison de nourriture. Le message de l'application de livraison de nourriture est donc lié à la modernité, ce qui signifie que nous devons sélectionner type san serif minimaliste Donc, si nous vérifions les émotions de cette application de livraison de nourriture, elle devrait être énergique. La classification du type énergétique est donc San Serif. Allons donc sur Google Phone et cliquons sur Filtrer. Sélectionnez ensuite Sanserif. Et ici, nous avons la police de caractères. Nous allons donc sélectionner la police pour notre application. Mon forfait est de sélectionner un téléphone ou de sélectionner une typographie pour l'ensemble de l'application Lorsque vous sélectionnez un point, souvenez-vous toujours d'en sélectionner un ou deux. Il faut rappeler les clés, le principe de l' UX design, c' est-à-dire rester simple. Design UF stupide, faible. J'aime bien ce téléphone Lish. Ouvrons-le dans une nouvelle fenêtre et faisons défiler la page vers le bas pour trouver d'autres choix. Je veux un téléphone look moderne. J'aime bien cette police M plus one, alors cliquons dessus deux. Et passons au testeur de type. Et lors du test de saisie, je vais changer la taille de la typographie de la tête à 32, et la taille du paragraphe sera de 16 pixels et la taille normale de 400 pixels Je pense que cela correspond. Sélectionnons-le donc. Et puis il le faut, nous sommes prêts à en sélectionner deux. Passons maintenant à cette police Molis et à ce test de frappe dans le testeur de caractères, changeons la taille de la police en 32, 16, le poids sera dépassé OK, sélectionnons-le aussi. Très bien, nous avons maintenant les polices que nous avons sélectionnées. Donc, pour découvrir ces polices, il suffit de cliquer sur ce Car Ton. Et ici, vous pouvez trouver la police de caractères. Accédez également à la section À propos, où vous pouvez voir les détails à propos. Cette police est une police à capteur minimaliste conçue à la fois pour l'affichage et la typographie de texte Et voici un détail. J'aime donc beaucoup ce téléphone et nous allons utiliser ce téléphone tester le texte de l'en-tête et du paragraphe sur notre application. C'est donc ainsi que je sélectionne le téléphone. Il existe des téléphones premium et sur les téléphones Google, vous pouvez trouver des téléphones gratuits et professionnels. Je dois dire qu'il n'y a pas de bonne ou de mauvaise façon de choisir un pont. La seule chose à prendre en compte est la lisibilité. Priorisez toujours la lisibilité et l'accessibilité. Même vous trouvez une bonne police et ajoutez-la à votre design. Le contraste ne correspond alors pas et les utilisateurs ne peuvent pas facilement reconnaître le message que vous dites, ils ne peuvent pas le lire. Ce qui signifie qu'il faut toujours essayer d' ajuster la police en fonction de l'application. Vous pouvez augmenter la taille de police, la largeur de police et l'espacement des lignes pour aider les utilisateurs à lire facilement la police, à lire le paragraphe et à comprendre le message 12. L'iconographie: Imaginez un monde sans barrières linguistiques. Un monde où tout le monde parle la même langue. Un langage de symboles. C'est le pouvoir de l'iconographie. Les icônes sont bien plus que de simples images. Il s'agit un outil puissant qui peut guider les utilisateurs, transmettre des informations et rendre votre design plus attrayant. En utilisant efficacement les icônes, vous pouvez améliorer la compréhension des utilisateurs. Clarté et cohérence. L'icône peut aider les utilisateurs à naviguer dans votre interface et à la comprendre Fonctionnalité, même s'ils ne parlent pas la même langue que celle du design. Augmentez l'engagement. icône bien conçue peut ajouter un intérêt visuel au design et encourager les utilisateurs à explorer différentes fonctionnalités, à économiser de l'espace. Les icônes peuvent transmettre de nombreuses informations dans un espace restreint , ce qui les rend idéales pour les sites Web et applications mobiles car l' espace sur l'écran est limité. Découvrons comment sélectionner les bonnes icônes. Il est essentiel d'utiliser les bonnes icônes pour optimiser leur efficacité. quelques points à prendre en compte lorsque vous sélectionnez l'icône de votre projet. Clarté, le facteur le plus important est que l'icône soit facilement comprise par votre public cible. Il doit être simple, familier et facilement interprétable Cohérence. Utilisez des icônes issues du même ensemble ou bibliothèque pour conserver un style visuel cohérent votre design. Cela aidera les utilisateurs à se sentir compatibles et à se familiariser avec le contexte de votre interface. Tenez compte du contexte dans lequel l'icône sera utilisée. La signification de l'icône peut changer en fonction des éléments qui l'entourent. Accessibilité, assurez-vous que vos icônes sont accessibles aux utilisateurs handicapés. Cela peut impliquer d'utiliser des couleurs rapides, fournir des descriptions en LT ou en texte alternatif et de s'assurer que les icônes sont suffisamment grandes pour être clairement visibles. Vous pensez peut-être que nous devons trouver des icônes. Il existe de nombreux endroits où vous pouvez trouver des icônes de haute qualité pour votre projet de design. Voici quelques promotions populaires, ce sont Pontosm, les icônes Google Material, le nom project. quelques versions payantes. Je peux trouver un site de photographie de stock comme Do Stock et Hutto Une fois que vous avez choisi vos icônes, il est important de les utiliser efficacement dans votre design. Voici quelques conseils. Ne surchargez pas votre design avec des icônes. Un trop grand nombre d'icônes peut être accablant et déroutant pour l'utilisateur. Associez l'icône au texte. Lorsque vous utilisez une icône inconnue, il est utile de l'associer à une étiquette de texte pour l'expliquer. C'est-à-dire, utilisez le statut du survol. Lorsque l'utilisateur passe le pointeur de la souris sur une icône, une infobulle peut apparaître pour expliquer sa fonction Icônes de test. Il est important de tester vos icônes auprès des utilisateurs pour vous assurer qu'elles sont claires et compréhensibles. En suivant ces conseils, vous pouvez utiliser une icône ou un graphique pour créer un design plus convivial et plus attrayant. 13. Concevoir des systèmes: Pensez à un système de conception comme à une boîte à outils pour votre conception UF. Il s'agit d'une collection de composants réutilisables, tels que des boutons, des icônes, une mise en page, ainsi que des directives de conception Tout ce dont vous avez besoin pour créer une expérience visuellement cohérente et conviviale. Alors pourquoi devriez-vous investir du temps dans l'apprentissage du système de conception ? Voici quelques raisons principales. Tout d'abord, cela améliore la cohérence Imaginez un site Web où le bouton a une apparence différente sur chaque page. C'est déroutant et frustrant pour les utilisateurs. Système de conception, assurez-vous que l'identité de votre marque reste cohérente sur tous les formulaires. Et le renforcement de la confiance et la reconnaissance en fin de compte est efficace. Plus besoin de préinventer le véritable système de conception pour économiser du temps et des efforts précieux en fournissant des composants prêts à l'emploi que vous pouvez facilement adapter et intégrer à votre projet Renforcez la collaboration, oubliez les problèmes de communication. Les systèmes de conception constituent une source unique de vérité. Favoriser une compréhension claire et une collaboration entre les concepteurs, les développeurs et les autres parties prenantes. Créez des interfaces familières aux États-Unis avec des composants individuels et une mise en page cohérente pour faciliter navigation et l' interaction des utilisateurs avec votre produit. Cela conduit finalement à une expérience utilisateur majeure, agréable et engageante. Vous songez peut-être maintenant créer votre propre système de conception à partir de zéro. Bien qu'il s'agisse d'une option, elle nécessite beaucoup de temps et de ressources. Envisagez plutôt d'explorer les nombreux systèmes de conception existants , chacun ayant sa propre force et ses propres caractéristiques. Voici quelques exemples populaires, Google Material Ce système de conception créé par le système Google Material Design propose un ensemble complet de composants et directives pour intégrer des interfaces modernes et esthétiques. La directive Apple Human Interface, Apples HIG, fournit des spécifications détaillées pour la conception applications adaptées à la maison au sein du système de conception Carbon de l'écosystème Apple système de conception en carbone d'IBM accent sur l'accessibilité et l'inclusivité, garantissant ainsi que vos produits sont utilisables par tous découvrant ces systèmes de conception existants et leur fonctionnement, vous approfondirez non seulement vos compétences en matière de X, mais vous obtiendrez également des informations précieuses sur les meilleures pratiques et les normes du secteur 14. Principes et lois UX: Pour créer une application mobile, il ne suffit pas de penser à son apparence et à ses fonctionnalités, il s'agit également de comprendre l'utilisateur. Et placez l'utilisateur au centre de nos préoccupations, ce qui signifie que nous devons prioriser les besoins des utilisateurs Et concevez notre application pour apporter des solutions aux problèmes des utilisateurs. ce faire, nous avons les principes Ux. Dans cette leçon, découvrons le principe X. Le premier principe est le design centré sur l'utilisateur. Imaginez un monde où les sites Web et les applications sont conçus en fonction de vos besoins et préférences spécifiques. C'est l'essence même du design centré sur l'utilisateur. Cette philosophie nous place au centre de chaque décision. Voici comment cela fonctionne. abord, nous devons faire preuve d'empathie envers l'utilisateur, ce qui signifie que nous devons travailler à place, comprendre ses besoins, ses objectifs, ses frustrations modèles mentaux grâce à la recherche et Ensuite, nous devons effectuer des recherches précoces et fréquentes auprès des utilisateurs. N'attendez donc pas la fin du projet. Obtenez des commentaires tout au long du processus de conception afin d'affiner et d'améliorer continuellement votre produit. Ensuite, nous devons créer des prototypes et les tester avec de vrais utilisateurs. Cette boucle de feedback nous aide à identifier et à résoudre les problèmes d'utilisabilité dès le début. Ensuite, nous devons nous concentrer sur l'ensemble du voyage. Chaque point de contact compte, conçu non seulement pour les fonctionnalités individuelles, mais aussi pour l'expérience globale des utilisateurs avec votre produit. Le deuxième principe est celui de la cohérence. Cela nous aide à renforcer la confiance et la familiarité de tous. Imaginez-vous entrer dans un restaurant dont l'aménagement change à chaque visite. Ce serait frustrant, non ? La cohérence en matière d'expérience utilisateur est comme une mise en page familière de votre restaurant préféré. Cela favorise un sentiment de confiance et de familiarité. Facilitez la navigation et l'interaction des utilisateurs avec votre produit. Ici, un aspect clé de la cohérence, le premier est le design visuel. Maintenez la cohérence des polices, des couleurs, mise en page et des icônes sur toutes les interfaces. Ensuite, nous devrions considérer la navigation. Veillez donc à ce que la structure de navigation soit cohérente entre les différentes pages et sections. Ensuite, la terminologie. Utilisez une terminologie et un jargon cohérents pour garantir clarté et compréhension. Nous avons maintenant principes d'accessibilité. L'accessibilité contribue à créer un design inclusif pour tous. Imaginez un monde dans lequel vous pouvez accéder au monde numérique et en profiter, quelles que soient vos limites. L'accessibilité en matière d'expérience utilisateur garantit que produit est utilisable et inclusif pour tous, y compris pour les personnes handicapées. Voici les aspects essentiels de l'accessibilité. Conformité aux WCAG Suivez le contenu Web. Les directives d'accessibilité ne concernent que le court terme. En utilisant les directives des WCAG, vous pouvez vous assurer que votre site Web ou votre application sont accessibles à des utilisateurs aux compétences diverses et dans un langage clair et cohérent Évitez le jargon et les termes techniques. Utilisez un langage simple et direct que tout le monde peut comprendre. Texte alternatif pour les images, fournissez un texte descriptif pour les images. Ensuite, nous avons le principe essentiel Imaginez un site Web où les informations sont fragmentées et désorganisées Il serait difficile comprendre pourquoi, en appliquant ces principes, vous pouvez créer visuellement attrayante et utiliser une interface conviviale. Dans le design américain, les Gita reposent sur trois principes clés Il s'agit de la similitude, de la proximité et de la région commune. La similitude signifie des éléments liés à un groupe qui partagent des caractéristiques telles que la couleur, la taille, les formes qui améliorent la clarté et l'organisation La proximité consiste à placer les éléments liés à proximité uns des autres pour les relier visuellement et attirer l'attention des utilisateurs. La région commune est entourée d'éléments connexes à l'intérieur d'une limite partagée afin de créer un groupe distinct et d'améliorer la concentration. En combinant une conception centrée sur l'utilisateur, la cohérence, l'accessibilité et les principes de Gstar, vous pouvez créer une expérience non seulement fonctionnelle et efficace, mais également agréable, engageante et inclusive pour tous N'oubliez pas que le but ultime de l'expérience utilisateur est de rendre la vie des utilisateurs plus facile et plus agréable. Dans les leçons à venir, nous appliquerons ces principes à notre conception et découvrirons comment ces principes nous aideront sur des projets du monde réel. 15. Architecture d'information (IA): Chaque difficulté à trouver des informations sur un site Web ou une bonne architecture d'information permet aux utilisateurs de trouver facilement ce dont ils ont besoin, de le comprendre et de l'utiliser. C'est une force visible qui sous-tend une expérience utilisateur exceptionnelle. Considérez l' architecture d'information AO comme une carte. Vous devez naviguer dans un nouvel endroit. Il doit être clair, conscient et facile à suivre. Sinon, vous allez vous perdre et vous frustrer. Voici pourquoi une bonne IA est importante. Retrouvabilité : les utilisateurs peuvent facilement trouver ce dont ils ont besoin, il s'agisse d'un produit, d'un article masqué ou d'un support client Les informations relatives à la compréhensibilité sont claires conscientes et organisées de manière logique. Utilisation dans le langage Tout le monde utilise des graphes utilisabilité, navigation intuitive. Permettre aux utilisateurs de se déplacer réellement et trouver des informations pertinentes sans frustration. Voici donc les principes clés du bien, c'est clair et simple. Utilisez uniquement un langage clair et évitez le jargon. Il s'agit d'une structure hyderarticale qui consiste à regrouper les informations de manière logique, partant d'une facilité d'utilisation et d'une trouvabilité d' Prioriser la recherche et le filtrage dans les outils. Cohérence et anticipation, ce qui signifie maintenir un style et une mise en page uniformes tout au long du design. Et voici le moyen de créer une architecture d' information efficace court-circuitant le contenu des groupes en fonction de la manière dont les utilisateurs le préservent. Avant le test, évaluez la manière dont les utilisateurs naviguent dans la structure d'information. Les plans du site fournissent un aperçu visuel de la structure du site des vagues. résonances des utilisateurs définissent votre public cible et ses besoins en informations. Audit du contenu, analyse du contenu existant pour en vérifier la pertinence, la précision et l'organisation. 16. Avantages et les avantages de Figma et créer un compte Figma: Bien, créons un compte sur Figma. Cliquez donc sur le lien Description, et vous arriverez sur le site Figma.com. Dans Figma, cliquez sur le bouton Commencer Et dans cette fenêtre contextuelle, vous pouvez utiliser votre e-mail et passer ou continuer à utiliser Google. Je vais cliquer sur Continuer avec Google. Ici, je vais sélectionner mon compte Gmail. OK. Je suis là, je peux ajouter le nom. Je vais donc ajouter mon nom, puis cliquer sur Continuer. Ici, je dois sélectionner le type de travail que je fais. Je clique donc sur Design, puis sur Continuer. Il vous suffit de sélectionner les options nécessaires et de continuer. Ici, je peux inviter d'autres membres ou des membres de mon équipe. Dans ce cas, je clique sur le bouton Ignorer. Maintenant, nous avons une question. Qu'est-ce qui t'amène à Fima aujourd'hui ? Je clique donc sur Autre, puis sur Continuer. Cliquez comme ceci, puis cliquez sur Continuer. Et ici, cliquez sur Démarrer , puis sur Continuer. Je vais sauter cette partie. Ici, nous créons notre compte Fima. Je vais maintenant créer un design. Pour ce faire, cliquez sur ce fichier de conception, puis sur Brouillon. Très bien, ici, nous pouvons créer le design que nous voulons. Tout d'abord, je vais nommer ce design. Pour cela, cliquez sur le nom de ce fichier. Actuellement, c'est Untitled. Je vais le renommer. Regardez d'abord, appuyez sur Entrée, et nous avons maintenant des options pour créer le design. Nous appelons donc cette partie le canevas, ou nous pouvons l'appeler plan de travail. Et ici, nous avons des options pour sélectionner et créer des éléments tels que des cadres, des formes et des lignes avec des crayons. Et ici, nous avons des textes. Et nous avons également un bouton de ressources. Et nous avons des outils manuels. Et ici, nous avons le bouton de commande. Créons donc un cadre. Il suffit de cliquer ici, et quand je clique dessus, j'obtiens les tailles de cadre prédéfinies. Donc dans ce cas, je vais sélectionner la taille comme iPhone 13.14 et voici le cadre. Ainsi, lorsque nous créons notre application, nous la construisons sur ce cadre. Je vais donc renommer ce cadre en home. Maintenant, je vais créer un rectangle. Pour ce faire, je clique ici, je gagne ceci. Lorsque je crée un rectangle ici, j'ai les propriétés du rectangle. Nous pouvons donc modifier la largeur ici et ici comme ceci. Et on peut changer la couleur de remplissage, boum ici. Nous pouvons donc ajouter un trait, et nous pouvons ajouter des ombres. Et il existe de nombreuses options. Maintenant, je crée un texte. Pour cela, cliquez sur cette icône et cliquez ici. Ensuite, ajoutons du texte comme un fou. OK, et maintenant je vais me concentrer comme ça. Ensuite, je peux changer la police ici. Je vais le changer comme des poppins et la fausse taille sera de 45. Ensuite, rendez-le semi-gras. Et placez le texte au centre, alignez-le au milieu. Et ici on peut changer de couleur. Nous pouvons donc sélectionner ici d'autres types de formes comme celle-ci. Et dans cette main, on peut vérifier la toile. Si ce canevas contient beaucoup de cadres, nous pouvons simplement le monter et le descendre et le vérifier comme nous le souhaitons. Nous avons donc maintenant cette option de commentaire. Fima est un outil collaboratif. Si vous avez une équipe et que vous souhaitez mentionner quelque chose, il vous suffit de cliquer sur ce commentaire et de le commenter. Je souhaite ajouter un commentaire ici. Je clique donc ici et j'ajoute le commentaire comme une boîte à échanger pour tester et entrer pour la première fois. Et lorsque vous le survolez, vous pouvez voir le commentaire que vous avez ajouté Et il peut également voir le membre de votre équipe. Vous pouvez également mentionner les membres de l'équipe de cette manière, cliquer dessus sur Signer et ajouter les utilisateurs au nom du membre de votre équipe. Dans ce cas, nous n' avons pas de membres de l'équipe, je vais me mentionner comme ça. Ensuite, nous pouvons ajouter des images et nous pouvons également télécharger des images, il suffit de jouer avec. Et sur le côté gauche, vous pouvez voir le cadre et les éléments créés. Nous avons donc ces panneaux d'affirmation, et dans les prochaines leçons, nous passerons revue un grand nombre de ces sections et détails. Maintenant, j'appuie sur le bouton « Plus », et ici vous avez un bouton « Présenter ». Si vous cliquez dessus, le design s'ouvrira comme ça dans Figma, nous pouvons également convertir ces marquages ou ces dessins en prototypes, et nous verrons comment ils fonctionnent dans les De plus, nous avons la possibilité de partager si je clique sur ce bouton Partager et je peux obtenir un lien partageable de ce design Ce sont donc les informations de base que vous devez savoir sur Figma Et dans le futur, vous maîtriserez la Figma et vous pourrez créer facilement un design Figma 17. Mise en page de grille: Bien, familiarisons-nous maintenant avec les grilles. Je vais donc supprimer ce cadre de formulaire et créer trois cadres. Je vais donc supprimer ces commentaires, les supprimer. Et maintenant je vais créer des cadres. Je clique donc d'abord sur le cadre et je crée un cadre de la taille du formulaire. Ensuite, je crée un autre cadre, sera de la taille d'une tablette. Dans une tablette, il s'agit de créer un cadre de cette taille et également de créer un cadre de la taille d'un bureau. Très bien, nous avons maintenant trois cadres. Lorsque nous concevons notre élément d'interface utilisateur, nous devons réfléchir à un moyen d'aligner ces objets afin de pouvoir utiliser une grille de mise en page pour effectuer l'alignement. Tout d'abord, je clique sur le cadre puis sur ce Layout Grid Plus. Et maintenant, nous avons ce type de disposition en grille. Augmentons la taille. Ici, je clique sur ce paramètre de mise en page de la grille. Ici, je clique dessus du haut vers le bas et je clique sur Colonne. Il s'agit d'une base téléphonique. Je vais sélectionner le nombre de colonnes comme cinq, et j'ajouterai une marge comme 20, ce qui signifie que nous aurons un espace de 20 pixels. OK. Et la gouttière est la taille entre deux éléments Je vais donc dire « gouttière jusqu'à 50 », comme ça. Et faisons-le avec l'iPad Mini. Et sélectionnez le cadre de la tablette iPad Mini. Et cliquez sur Grille de mise en page, puis cliquez ici. Sélectionnez ensuite Colonnes. Ici, je vais définir le nombre de colonnes à six, la marge à 30 et la gouttière à 15 OK. Vous pouvez modifier ces espaces en fonction de votre design. C'est ainsi que j'ai créé la mise en page. Passons à Desktop Frame. Cliquez sur Grille de mise en page. Cliquez ici, Définir la colonne. Ensuite, dans Layout of the Desktop, il y aura 12 colonnes et la marge sera de 140. Mais aura 20 ans. Voici donc le look du design. Donc, si je passe à la version de bureau, et maintenant si je crée un rectangle, je peux l'aligner en fonction de ces grilles comme celle-ci C'est pourquoi nous devrions envisager de créer une disposition en grille pour comprendre l'alignement de notre conception. Dans la leçon suivante, nous verrons comment utiliser mise en page automatique et créer facilement notre design. 18. Bases de la disposition automatique: Lorsque j'ai commencé à utiliser la mise en page automatique pour la première fois, cela m'a embrouillé. Mais l'utilisation de la mise en page automatique présente de nombreux avantages. Le plus grand avantage est que vous pouvez gagner temps en appliquant une mise en page automatique à votre conception. Parce que si nous n' utilisons pas la mise en page automatique, nous devons ajuster manuellement les positions. De plus, après avoir créé un design, si nous voulons ajouter du contenu ou plus d'éléments à une section du cadre, nous devons simplement le faire avec le cadre entier. Mais lorsque nous utilisons la mise en page automatique, nous pouvons simplement ajouter des éléments comme nous le souhaitons et la mise en page s'adaptera en fonction des éléments. En outre, nous pouvons créer un design réactif avec la mise en page automatique, qui s'étend sur. Lorsque nous modifions la taille de l'écran, les éléments se rétrécissent ou s'agrandissent en fonction du cadre. D'accord, commençons à créer un design avec mise en page automatique. Je vais donc supprimer ces cadres et créer un cadre pour téléphone. Je vais donc sélectionner ce cadre pour iPhone 15 Pro. Bien, ajoutons une grille de mise en page à ce cadre car cela nous permettra de vérifier facilement l'alignement. Créez une colonne : le nombre de colonnes sera de cinq, marge de 15 et la gouttière de 15 D'accord, comme première étape pour comprendre le pouvoir de la mise en page automatique, je vais créer deux boutons. Pour le premier bouton, je n'utiliserai pas l'option de mise en page automatique. Et le deuxième bouton j'utiliserai la mise en page automatique. Créons donc le premier bouton. Pour cela, je clique sur le rectangle et je crée une bouteille comme celle-ci. D'accord ? Et changeons la couleur de remplissage en rouge. Et ajoutons des coins, par exemple 15. Il s'agit de l'arrière-plan du bouton. Et maintenant, cliquez sur le texte. Et ajoutons le texte. Cliquez sur OK. Nous pouvons maintenant ajouter du texte comme Roboto. Dans Roboto Naked Medial, la taille sera de 30 OK, maintenant je mets ce texte sur le rectangle et changeons la couleur de remplissage. Pourquoi mettre en évidence ces deux textes ? Et appuyez sur la commande G pour le regrouper. Puis je clique sur ce texte et sur une ligne centrale. Et cliquez sur le texte, une ligne comme le clic au centre de la ligne horizontale. Et maintenant je clique sur le bouton. Et faisons-le comme ça. Et imaginons que nous devons ajouter le rembourrage supérieur 15 et le rembourrage inférieur Pour ce faire, je vais ajuster ce texte à 15, 15. Et puis imaginons que nous devons ajouter un rembourrage droit et gauche 50 Pour vérifier le rembourrage, vous pouvez cliquer sur l'élément que vous souhaitez vérifier Et appuyez sur tout comme ça ici. Nous devons porter ce chiffre à 50. Pour ce faire, nous devons l'ajuster manuellement de cette façon. Neuf. OK, en voici 15 et nous devons donc faire de même. OK, maintenant nous avons une bouteille. Créons donc la même bouteille avec une mise en page automatique. Pour ce faire, je clique sur le test et je crée un test appelé click Me, et maintenant je clique sur Shift A. Shift A est un raccourci permettant de créer une mise en page automatique. D'accord ? Le texte devient simplement une mise en page automatique. Si nous vérifions sur le côté droit, nous verrons cette section de mise en page automatique. Et dans cette mise en page automatique, nous pouvons modifier la position du texte comme nous le souhaitons. D'accord, dans la mise en page automatique, nous pouvons ajouter du rembourrage à notre guise Cliquez simplement sur ce rembourrage individuel et nous devons ajouter le rembourrage gauche et droit comme 15 Et le rembourrage supérieur, voyons voir, le rembourrage supérieur 15 Le rembourrage supérieur sera de 15. Avant de le faire, je dois le faire comme ça. Et maintenant, le rembourrage supérieur est rouge, 15, 15 OK, ajoutons maintenant la couleur de remplissage. La couleur de remplissage sera correcte et la couleur du texte sera le noir. OK, maintenant dans les virages, les virages seront donc 15. Voici les deux boutons, d'accord ? Ensuite, je clique sur le texte clique ici pour le mettre en forme. Et créez également ce contenu, qui signifie que la taille sera modifiée en fonction du texte. Nous allons donc remplacer ce texte par « like by one ». Obtenez-en un gratuitement un par un. Obtenez-en un gratuitement. D'accord. Maintenant, disons-le comme ça. Et si nous voulons faire de même ici, faisons comme par exemple, obtenons un C gratuit, nous devons ajuster manuellement le contenu de cette façon. C'est pourquoi je dis que la mise en page automatique est vraiment puissante et pas comme ça. Si nous voulons modifier le rembourrage et la marge. Faisons donc en sorte que ce rembourrage gauche soit de 30. Il suffit de cliquer ici et nous pouvons simplement l' ajuster comme ceci. Ou lorsque nous cliquons dessus, nous obtiendrons ce type de fenêtre contextuelle. Et ici, nous pouvons ajouter les tailles. Nous pouvons aller ici et l' ajouter à partir d'ici. D'accord ? D'accord. Dans ce cas, si nous voulons le faire, nous devons l' ajuster manuellement comme ceci. Il ne s'agit que d'un exemple simple. Mais à l'avenir, vous verrez le véritable pouvoir de la mise en page automatique. Ajoutons également une mise en page automatique à ce cadre. Pour ce faire, sélectionnez le cadre et vous pouvez directement sélectionner le bouton plus de la mise en page automatique. Vous pouvez également appuyer sur Shift. Dans ce cas, il suffit de cliquer sur le bouton plus. voyons voir, nous voulons rendre ces deux boutons horizontaux. Pour ce faire, il suffit de cliquer sur le bouton Disposition horizontale, et ces deux éléments deviennent horizontaux. Et si nous voulons Vertical, nous pouvons simplement cliquer sur Vertical. Et changeons la taille entre ces deux objets comme ceci. Faisons en sorte que 20  % pensent que nous voulons ajuster ces deux modèles en fonction du cadre. Pour ce faire, cliquez sur l'article, puis sur le récipient à peler redimensionné horizontalement Vous voyez maintenant que notre bouton dépasse la grille des marges. Pour y remédier, il suffit de changer le rembourrage à gauche et à droite. Cliquez ici, nous pouvons l' ajouter comme 15, et il devient automatiquement 15. Alors maintenant, si nous devons changer de position, nous pouvons cliquer sur la mise en page et changer la position comme ceci. C'est une méthode vraiment puissante pour créer, concevoir un bot et c'est l' avantage de la mise en page automatique. À l'avenir, nous en apprendrons plus sur mise en page automatique et nous créerons l'application de livraison de nourriture avec cette fonctionnalité de mise en page automatique. Et je vais passer en revue toutes ces options. En attendant, faites vos recherches ou jouez simplement avec ces options et découvrez comment elles fonctionnent. Comme je l'ai déjà dit, c'était vraiment compliqué pour moi quand j'ai commencé. Mais lorsque j'essaie d'ajuster les options de mise en page automatique, il devient facile de créer le design que je m' efforce de mettre en pratique. Créons une autre option. Il suffit donc de cliquer ici et de le changer en 60. Et pendant ce temps, créons un cadre et changeons la couleur du champ du cadre en bleu. Faisons 15 comme angles. Maintenant, je vais dupliquer ce cadre comme ceci. Donc, appuyez sur la touche C, désolée. Il suffit de sélectionner le cadre, de contrôler et de contrôler. OK, maintenant change les couleurs en vert et celle-ci sera jaune. OK, maintenant imaginons que nous voulons placer ces trois cases de manière horizontale. Pour ce faire, sélectionnez tous ces objets et appuyez sur Chef, et cela vient d'être ajouté à la mise en page automatique. Maintenant, je peux cliquer sur la mise en page horizontale et la rendre horizontale. Faisons en sorte que le rembourrage entre ces boutons soit 15, soit 30 Imaginons que nous devons changer la taille de ces boîtes. Pour ce faire, cliquez sur ces cases pour les mettre en page et modifiez-les pour les remplir. Et maintenant, sélectionnez tous ces cadres et faites-en un conteneur de remplissage. Vous voyez, maintenant nous pouvons l'ajuster en fonction du design. Maintenant, si nous voulons ajouter un autre rectangle comme celui-ci, nous pouvons simplement créer un rectangle carré Desn et le placer comme si nous pouvions simplement copier l'un de ces rectangles et le coller comme ceci Alors changeons de couleur pour combattre. Et c'est le pouvoir de la mise en page automatique. J'espère que vous comprenez les bases de la mise en page automatique. À l'avenir, vous en apprendrez beaucoup plus sur la pose automatique et nous vous verrons dans la prochaine leçon. Dans la leçon suivante, nous allons apprendre à créer une feuille d'autocollants. Et comprenez ce qu'est une feuille d' autocollants et comment nous utilisons la feuille d'autocollants pour donner vie à notre design. Rendez-vous dans la prochaine leçon. 19. Designer un logo de marque: Nous avons maintenant les couleurs et la typographie de notre choix. Nous n'avons donc pas de logo de marque, nous n'avons que ce texte appelé Sweet Food. Convertissons donc ce texte en logo de marque. Pour ce faire, je vais simplement en faire une copie et passer à la feuille d'autocollants. Dans une feuille d'autocollants, je le rythme, puis je duplique cette couleur et mettons cet espace comme 90. Et ici, je change cela en logo, et maintenant je peux changer le texte en titre. Ajoutons ensuite cette première couleur à couleur verte et la seconde partie à cette couleur foncée. Si nous le voulons, nous pouvons ajouter quelques petites icônes devant ce texte. Pour ce faire, nous devons trouver une icône. Je vais donc aller sur un site Web comme je peux le trouver pour trouver une icône gratuite. Maintenant, je suis sur Iconfinder. Ici, je vais chercher une boulangerie. Ensuite, nous avons ce type d'icône. Choisissons donc quelque chose de minimaliste qui donnera une belle apparence à ce design Dans ce filtre, je clique simplement sur Call Free et découvrons l'icône gratuite. Ajoutons un cupcake comme celui-ci. Je vais donc télécharger ce cupcake. C'est bon. Je passe maintenant au design, et je vais y placer l'icône du cupcake Ensuite, je diminuerai la taille du gâteau. Et sélectionnons ces deux textes. Et appuyez sur Shift lors de la mise en page automatique, puis placez-la au centre gauche. OK, alors laissons tomber cette icône. Il suffit de double-cliquer sur l'icône. Et vous verrez ce type de panneau ici, faites-le recadrer. Et maintenant on peut copier comme ça. OK, c'est plus grand, faisons-le un peu plus petit comme ça. Et maintenant, ajoutons une ligne de rembourrage ici. Il ne s'agit que d'une icône minimaliste. OK, voici le design. Je pense que je vais changer cette couleur Pka en vert Je vais donc changer cette couleur Cpk en cette couleur foncée ou en couleur verte Je pense que cette couleur foncée sera géniale. Je vais donc simplement cliquer sur l'icône. Et maintenant je clique sur cette bouteille de porto. Et ici, j'augmente la taille de deux œufs. Il s'agit donc de l'option de port. Et sélectionnez les icônes et le port G clk. Et maintenant je vais ouvrir Potoshop et juste changer la couleur. OK, il suffit de changer de couleur. Maintenant, je double-clique sur l'image et je clique sur cette petite icône en forme de flèche. Cliquez ensuite sur Placer une image vidéo. Et cela ouvrira mon éditeur de fichiers. Et ici, je vais voir l'icône, l'éditeur de cravates. OK, alors je clique ici pour le coller. Très bien, il colle et voici le globo que nous venons de créer Nous avons maintenant les couleurs, logo et la typographie Ici aussi, nous avons une plaque à ossature métallique. Et au niveau suivant, nous allons créer le balisage haute fidélité 20. Feuille d'autocollants: La feuille d'autocollants est une collection d' éléments d'interface utilisateur préconçus tels que des boutons, des menus, des icônes et d'autres composants La feuille d'autocollants est donc comme un aide-mémoire pour les designers. Il aide les concepteurs à créer et facilement des interfaces cohérentes et conviviales rapidement et facilement des interfaces cohérentes et conviviales. Découvrons donc comment créer une feuille d'autocollants et quels sont les avantages d' une feuille d'autocollants. Voici notre dossier Figma. Je vais aller à la page d'annotation. Et ici, je vais créer un nouveau cadre. Cliquez ici, puis augmentez la taille du cadre comme suit. Je vais maintenant changer le nom de ce cadre en Tika She. OK. Comme je l'ai déjà dit, Tika Sheet est une collection de modèles préfabriqués Actuellement, nous avons des couleurs pour nos designs et des polices pour nos designs. Nous pouvons donc définir les couleurs et la police sur la feuille Tika. Lorsque nous commençons à concevoir l'application, nous pouvons ajouter ces composants en fonction du design. Et lorsque nous créons de nouveaux composants et éléments, nous pouvons ajouter la copie de ces éléments sur la feuille d'autocollants. Commençons donc par ajouter des couleurs et de la typographie. Ici, j'appuie pour créer un texte. J'ai ajouté des couleurs similaires, puis j'ai augmenté la taille à 50. Changez la forme en poppins. J'aime beaucoup le Fpin want, c'est pourquoi j'utilise toujours Fpin Nous pouvons créer une disposition en grille simple de manière à ce qu'elle soit facilement alignée et que la marge soit de 60, la gouttière de 20 C'est bon. Maintenant, alignez-le comme ceci. Très bien, voyons maintenant la palette de couleurs. J'ai perdu un écran de la palette de couleurs. Je vais donc simplement faire glisser cette palette de couleurs ici. Voici donc la palette de couleurs. Maintenant, je vais créer trois rectangles parce que nous avons trois couleurs. Alors cliquez ici et faites un rectangle, la taille sera de 150 x 150. Maintenant, je clique sur le rectangle et je change la couleur de remplissage en cette couleur verte. Ensuite, j'oblige à utiliser ces rectangles. Alors, appuyez sur les dix. Dragon, déposez-le comme ça. OK, ajustons la position. Et maintenant ce sera blanc et ce sera la couleur foncée. OK ? Maintenant que le blanc n'apparaissait pas sur le dessin, changeons cette couleur de remplissage pour qu'elle soit un peu plus foncée comme celle-ci. D'accord, nous pouvons maintenant créer des variables pour les couleurs. Et nous pouvons utiliser ces variables dans notre conception et cela nous aidera à créer de la cohérence. Je clique donc sur ce rectangle, et là nous avons la couleur. Je clique donc sur cette icône de style. Maintenant, je clique sur cette icône plus, et cela créera une variable. Ici, je peux ajouter le nom, donc je vais ajouter du vert. Et ici, nous pouvons ajouter une description. Je le laisse vide. Ensuite, je clique sur Créer un style. Et maintenant je clique sur le deuxième rectangle et je fais le même nom. Et je le fais pour les 12 troisièmes. OK. Nous avons également sélectionné le point pour notre application Je vais donc dupliquer ce texte et le mettre ici. Faisons l'espace entre les deux, 260. Ensuite, je vais changer ce texte en typographie. Ensuite, je vais cliquer sur Contexte et créer un nouveau texte. Appelons ce texte un en-tête. Et je surligne le texte en appuyant sur la touche Ctrl ou Commande par Commande. Ensuite, je passe au texto, et le téléphone que nous avons sélectionné est plus un. Voici donc le téléphone dont j'ai sélectionné la police. Ensuite, je vais changer cette police en semibol. La taille de police sera 350, d'accord ? Ce sera l'en-tête, téléphone 5, faisons-en un centre de ligne. Et maintenant je vais ajouter les détails de ce téléphone. Les détails seront d' abord le nom de type A, c'est M plus un et entrez une barre oblique Ensuite, la largeur sera semi-audacieuse et le Si sera de 35 pixels OK, maintenant nous pouvons créer du texte, quatre paragraphes, je vous y oblige. Et faisons en sorte que le texte du paragraphe soit Si 16. Et alignons le texte. est parti comme ça. Et faisons du texte une ligne de ce texte d' en-tête comme à gauche. Pour ensuite changer le semi-monde en normal, ce sera le texte du paragraphe. Maintenant, changeons les détails, normal 16. D'accord, nous avons principalement besoin de deux polices pour notre application. Maintenant, la feuille d'autocollants a un contenu réutilisable, mais pour le moment, nous ne définissons que les détails que nous utilisons dans notre application pour réutiliser ces couleurs et ce texte. Nous pouvons créer des variables pour chacune des propriétés que nous utilisons sur les couleurs et le goût. Dans un premier temps, créons un style pour cette couleur principale. Nous pouvons l'appeler style ou variable. Pour le créer, je sélectionne le triangle rouge, puis je passe au remplissage, je clique dessus pour le point, puis je clique sur ce cycle plus. Ici, je peux ajouter le nom. Le nom sera vert. Puis je clique sur Créer une variable. Ensuite, je passe à cette couleur, c'est le blanc. Et fais de même. Cliquez ici, cliquez sur le cycle plus et créez-le. Pourquoi ? Cliquez ensuite sur la variable. En fait, j'ai déjà créé la variable, c'est pourquoi je ne peux pas la créer. Mais dans votre cas, vous pouvez le créer. Passez ensuite à cette couleur foncée et cliquez ici, cliquez sur plus, puis sur cycle. Ajoutez ensuite le nom et cliquez sur Créer une variable. OK, vous avez maintenant des variables pour toutes ces couleurs. Créons maintenant une variable pour la tybographie. Pour ce faire, il suffit de sélectionner la balise que vous souhaitez créer, Abs, et vous y verrez le texte. Cliquez sur ce style, puis sur ce style créatif plus Ck. Et ici, ajoutez le nom. Je vais donc ajouter des en-têtes de noms. Et si je le souhaite, je peux ajouter une description. Ensuite, je clique sur Créer un style. Ensuite, je clique sur le texte du paragraphe et je fais de même. Cliquez ici, cliquez sur ce plan et ajoutez un paragraphe. Cliquez ensuite sur Creative Style. Bien, nous avons maintenant des couleurs réutilisables et une tybographie. Laissez-moi vous montrer comment réutiliser ces trucs. Pour cela, je passe au wireframe et au prototype. Et ici, je vais juste créer un rectangle comme celui-ci. Et maintenant, si je veux changer couleur de ce rectangle couleur verte que nous utilisons dans l'application, je peux simplement cliquer ici et cliquer sur la couleur comme ceci. Et si je veux utiliser la couleur blanche, je peux simplement cliquer comme ceci ou cela. Créons ensuite le texte. Ajoutons donc du texte comme « bonjour ». OK, et mets-le au centre. Passons maintenant du texte au titre. Voici le texte de titre que nous avons créé. Donc, si nous voulons le changer en paragraphe, nous pouvons simplement cliquer ici et cliquer sur le paragraphe. Dans tous les cas, si vous devez modifier certains détails, vous pouvez cliquer sur cette icône de style détaché. Et maintenant, ici, vous pouvez modifier les propriétés que vous souhaitez modifier, comme ceci. C'est ainsi que vous pouvez créer une feuille d'autocollants et utiliser les détails de la feuille d'autocollants. Lorsque nous créons des composants tels que des boutons, des barres de recherche, des cartes et d'autres éléments, nous ajoutons les composants que nous créons sur le design et les convertissons en composants libres et utilisables. Dans les prochaines leçons, je vous montrerai comment procéder. 21. Ce que nous allons faire de la conception et où trouver des ressources: Nous allons concevoir une application de livraison de nourriture. Dans le cours de wireframes et de prototypage conçus par QY Ux, nous créons cet ensemble de filaires et Si vous n'avez pas regardé cette partie, vous pouvez la regarder sur le Skillshare Je mettrai ce lien dans la description. Je vous verrai dans la section de conception visuelle. 22. Designer de l'en-tête: Maintenant que nous avons un plan de travail épuré et que le filaire est défini, il est temps de créer du Maga haute fidélité Commençons par la page d'accueil. Je clique sur la page d'accueil et je copie le wireframe. Ensuite, je le colle sur la page Maga. Augmentons-le en appuyant sur commande et en choisissant la molette de la souris. Sur Mac, je vais maintenant créer une poussette, cliquer sur le cadre, puis sélectionner le Prey Mass iphone 13.14 OK, maintenant je renomme ce cadre Et maintenant je vais ajouter une grille. Ainsi, lorsque nous ajouterons une grille de mise en page, il sera facile de maintenir l'alignement dans la marge. Je vais l'ajouter à 15 et la gouttière à 50. Bien, commençons maintenant par cette tête. Nous avons donc d'abord ce menu de hamburgers. Pour créer un hamburger, il suffit de cliquer sur le rectriangle et d'utiliser le rectriangle, ou nous pouvons utiliser des icônes, mais dans ce cas, nous pouvons simplement créer un menu hamburger il suffit de cliquer sur le rectriangle et d'utiliser le rectriangle, ou nous pouvons utiliser des icônes, mais dans ce cas, nous pouvons simplement créer un menu hamburger avec le triangle. Je vais faire comme ça, puis ici j'ajouterai une largeur de 50 et une taxe A. Maintenant, c'est dans les coins 15. Voyons voir, c'est le design et les coins seront 15. Et changeons la couleur du champ par cette couleur verte. OK, maintenant je vais le dupliquer. Appuyez simplement sur Old Dragon sur un élément comme celui-ci. Je vais maintenant mettre en évidence ces deux rectangles. Appuyez sur Shift A, cliquez sur cette icône plus pour ajouter une mise en page automatique. Soulignez-le. Appuyez sur ce bouton plus C. OK, maintenant j'en fais une ligne en haut au centre, et la disposition verticale sera sélectionnée. Faisons des espaces trois. OK, maintenant cliquez sur le réangle et doublez-le en appuyant sur Ctrl et Control OK, le menu des hamburgers est créé. Ensuite, nous devons créer ce titre. Nous avons déjà créé le titre, créé le logo. J'utilise juste ce logo. Avant de l'utiliser, nous pouvons réellement convertir ce logo en composant. Dans les prochaines leçons, vous comprendrez clairement le composant. Pour l'instant, il me suffit de cliquer sur cette icône pour créer un composant. Dans les prochaines leçons, je vais montrer les avantages du composant et pourquoi devons-nous utiliser un composant. Je vais renommer ce composant en logo. OK, maintenant je viens ici et je sélectionne le cadre. Ensuite, je passe à ce menu***. Et dans le menu évalué, dans plus de tasse, nous avons ce composant. Je vais juste le glisser-déposer comme ça. Elle est plus grande, alors réduisons la taille. Pour réduire la taille, je vais simplement appuyer sur la touche Ctrl pour le couper, et entendre Ctrl pour le coller ici. De cette façon, nous pouvons facilement effectuer les modifications. premier temps, je vais simplement diminuer la taille de ce logo, peux le porter à 25, 25, d'accord. Ensuite, nous devons modifier la taille du texte. Pour le modifier, nous pouvons changer la variable de texte. Pour modifier la variable de texte, nous ajoutons une variable de texte d'en-tête ici. Il suffit de cliquer dessus et de cliquer ici. Lorsque nous créons les autocollants, je vous montre comment créer ce type de variable, et j'espère que vous vous en souvenez. Ajustons la taille du texte. Faisons en sorte que ce soit 30, mais entre 25 et 22. Je pense que cette taille est meilleure qu'avant. Pour le tester correctement, cliquez sur le cadre et cliquez sur cette icône actuelle, et une nouvelle fenêtre s'ouvrira. Ça ressemble à ça. Je pense que nous pouvons ajuster cela, juste ce texte à 25. 25 ce sera le cas, ça va bien sur le design. OK, maintenant nous avons un logo et ici je le découpe et je le colle à nouveau sur la feuille d'autocollants. Si vous ne l'avez pas compris, ne vous inquiétez pas. Je vais vous montrer comment créer des composants et vous donner une compréhension complète du composant. OK, maintenant nous pouvons ajouter ces deux logos, donc le car ton et l'icône Vata Pour ajouter des logos, nous pouvons utiliser Library Pontosum. Fontosum est une bibliothèque d'icônes. Nous pouvons donc utiliser le Google Material Design System et les icônes du Google Material Design System. Je pense que vous vous souviendrez de la leçon que nous avons tirée du système de conception. Cependant, dans ce cas, utilisons Fontosm. Sur Figma. Il y a une communauté dans cette communauté, d'autres designers ont mis leurs ressources à disposition, et des designers comme nous peuvent utiliser ces ressources. Pour utiliser ces ressources, il suffit de cliquer sur cette icône de ressources et de rechercher l'élément de ressources ici. Dans ce cas, il s'agit de plugins. Dans les plugins, je vais le rechercher. Polices de caractères. Voici l'icône du phontosum Cliquez dessus et il s' installera sur le compte Figma. Et il s'ouvrira comme ça. J'ai déjà installé l'icône du phontosum sur la Figma, je vais donc vous montrer comment installer Il suffit de cliquer ici et installons-en. Je peux brancher des icônes, par exemple, si vous n'avez pas installé le pontosum Lorsque vous survolez le pontosum, vous le verrez comme ceci et vous verrez ce Cliquez simplement sur ce bouton Exécuter et il sera chargé sur votre compte break ma sous forme de plugin. Pour trouver ces plugins, vous pouvez cliquer ici, et ici nous avons une section sur les plugins. Dans la section Drapeau ci-contre, nous avons tous les plug-ins que nous avons installés. Nous pouvons également cliquer ici, et ici nous pouvons cliquer sur les plugins. Et dans les plugins, nous avons le plug-in que nous installons. Cliquez sur le téléphone ou sur certaines icônes. Et ici nous devons trouver la carte, Ticon, je vais juste chercher la carte Et ici nous avons l'icône des cartes. Je vais donc cliquer sur cette carte pour l' ajouter à ce design J'en ai donc besoin sur la page d'accueil, donc je la glisse et je la vole vers la page d'accueil. Et nous avons également besoin d'une icône d'avatar. Trouvons donc l'icône de l'avatar. Utilisateur. OK, nous avons ici l'icône de l'utilisateur. Très bien, maintenant je vais augmenter cette taille à 30 x 30. Cliquez simplement sur cette propriété contenue et définissez-la comme 30. Et il sera automatiquement ajusté en fonction du poids lorsque nous ajouterons cette icône de contrainte de proportions Donc, dans ce cas, faisons en sorte que ce soit 30. OK, nous avons maintenant deux icônes. Je vais donc changer la couleur de cette icône en vert. Je pense que vous vous souviendrez de la règle 603010. Dans ce cas, nous utiliserons 60 comme fond blanc 30 comme couleur verte et dix comme icône de pied. D'accord, nous avons maintenant un design que nous devrions ajouter à l'en-tête. Maintenant, vous vous souviendrez de la mise en page automatique, ajoutons donc une mise en page automatique. Pour ajouter la mise en page automatique, je vais surligner toutes ces sections et appuyer sur Chef, puis appuyer sur cette icône plus dans la mise en page automatique comme ceci. Et maintenant, nous avons besoin que ce soit horizontal, comme ça. Pour le rendre horizontal, nous pouvons cliquer sur cette mise en page horizontale et elle devient horizontale. Je vais passer aux couches. OK, maintenant vous voyez qu'il y a un problème. Dans l'icône de la voiture, nous avons un cadre, mais dans l'icône de l'utilisateur, nous n'avons pas ce cadre. La raison en est qu'il se détache simplement avec le cadre. Créons donc un cadre en cliquant dessus avec le bouton droit de la souris et en cliquant sur Sélection du cadre. OK, maintenant cette mise en page automatique ne correspondait pas parfaitement au design. Adaptons-le au design. Donc, pour ce faire, nous devons d'abord ajouter une mise en page automatique au cadre. Pour ce faire, cliquez sur le cadre, puis sur Mise en page automatique. OK, dans le cadre, nous avons besoin d' disposition verticale, ce qui signifie que nous devons couper les pieds verticalement comme ceci. Ajustons maintenant les détails pour le moment. Ajoutons un écart vertical égal à dix. Et le schéma gauche et droit sera de 15. Parce que nous ajoutons la marge à 15, ce qui signifie que les éléments auront un rembourrage de 15 entre deux coins En haut, je vais en faire un rembourrage de dix. OK, maintenant dans cette section d'en-tête, je vais changer son nom en en-tête. Et puis ajoutons le contenu déjà rempli. Et la verticale est là, elle le sera, maintenant je vais en faire une ligne au centre gauche comme ça. Ajoutons maintenant un schéma de péage à ces deux boutons, car celui-ci comporte trois colonnes. La première colonne est le menu du hamburger, la deuxième colonne est le logo et la troisième colonne est le carton. Icône Avata Sélectionnez ces deux icônes, puis appuyez sur Shift, et ici je vais changer l'écart horizontal à 15. Comme ça. Réglez-le ensuite sur fill contain. OK, maintenant je clique sur le menu hamburger et je le change horizontalement, je le redimensionne dans un contenant de remplissage passe au logo et je fais de même Et allez sur les icônes de l'avatar et réglez-le sur le conteneur de terrain. Et maintenant, vous allez le voir comme ça. Alors maintenant, c'est vraiment facile à faire. Je clique d'abord sur le menu du hamburger et il doit être dans une ligne à gauche et une ligne au centre gauche Alors cette icône d'avatar devrait être au centre d'une ligne, non ? Et ce logo doit être au centre de la ligne. Nous avons donc maintenant le design correctement centré. Si vous le vérifiez sur le cadre, cela ressemblera à ceci. Il est loin, faiblement aligné Et là, l' icône de l'avatar, un peu plus grande. Redimensionnons-le donc et faisons-le ressembler à l'icône de la voiture. OK, maintenant ça ressemble à ça. Et ajoutons la marge supérieure à 15. Il y en a donc dix actuellement. Cliquez ici et passez à 15. Bien, dans la prochaine leçon, nous allons maintenant en apprendre davantage sur les composants , convertir cet en-tête en composant et poursuivre la conception. 23. Améliorer l'en-tête: Lorsque nous vérifions ce dessin, le titre n'est pas exactement au centre, alors mettons-le au centre. Pour cela, nous devons ajuster les paramètres de l'auto. Tout d'abord, nous allons cliquer sur l'Autoa principal. Réglez ensuite cet écart horizontal entre les éléments à zéro. Ensuite, nous cliquerons sur le logo. Et le logo sera content. Et cliquez également sur ce Car Ticon, et l' icône Avata en fera du contenu. Et dans le menu des hamburgers, faites-en un plat. Bien, maintenant le logo est parfaitement centré uniquement. Nous devons ajuster l'espace entre ces deux sections. Pour ce faire, sélectionnez l'en-tête et ajustez la taille comme suit. Augmentez également le design ici. Bien, maintenant, si nous le vérifions, le logo est centré avec précision, il existe donc de nombreuses façons d' apporter des modifications au design en utilisant la mise en page automatique Il est donc toujours recommandé de jouer avec les paramètres de la mise en page automatique. 24. Tout sur les composants: Bien, créons maintenant un composant. Avant de créer un composant, familiarisons-nous avec son nom afin que le composant soit un élément réutilisable que nous pouvons réutiliser tout au long de la conception. Convertissons donc cet en-tête en composant. Pour ce faire, il suffit de sélectionner l'en-tête. Et puis vous verrez une icône ici. Et c'est pour créer un composant, il suffit de cliquer dessus. OK, maintenant cet en-tête devient un composant. Lorsqu'il devient un composant, le nom de l'élément change et la couleur de l'élément passe au violet clair. D'accord, voyons maintenant les avantages de ce composant. Avant de faire quoi que ce soit, je vais simplement couper cette commande bipasin, un x et la coller sur la feuille d'autocollants La feuille d'autocollants et collez-la comme ça. Alors je vais le mettre ici. Nommons cette section en tant qu'éléments. Bon, maintenant voici le composant. Il s'agit du premier composant que nous avons créé. Nous appelons composant, ou que nous appelons ce premier composant un composant principal car nous pouvons créer de nombreuses instances à l'aide de ce composant principal. Créons un instantané ou créons une copie. Pour créer une copie, isolez la page d'accueil de notre application. Ensuite, je passe à *** dans le panneau des assertions, nous pouvons voir tous nos composants Vous souvenez-vous que nous avons déjà créé un composant pour notre logo ? Voici le nouveau composant et son nom est intitulé. Je clique dessus, et quand je clique dessus, il est indiqué, par exemple, que nous pouvons cliquer sur ce bouton Insérer une instance, ou nous pouvons simplement le faire glisser sur la page d'accueil. Il s'agit maintenant d'une instance du composant, ce qui signifie que si nous modifions ce composant principal, cela modifiera le design de cette instance. C'est l'un des avantages que nous avons lorsque nous créons des composants. Par exemple, il suffit cliquer sur ce menu de hamburgers et de changer la couleur Maintenant, j'ai cliqué sur le composant principal, alors changeons la couleur en noir Et lorsque je le modifie, l'instance de ce composant changera également. Lorsque nous sélectionnons le composant, ses propriétés sont répertoriées ici. Ici, nous avons les détails du composant Lorsque nous cliquons sur cette icône, nous aurons la possibilité de détacher l' instance lorsque nous le détacherons Et si nous changeons maintenant le design du composant principal, cela n'affectera pas le composant que nous détaillons. Nous pouvons également créer des variantes de ce composant. Par exemple, créons une page différente. Je vais simplement dupliquer cette page et supprimer cette instance du composant. Maintenant, si nous accédons à la page des wireframes et des phototypes de Search Foods, nous n'avons pas le logo dans Search Food, nous avons le titre Search Food . Copions donc la page Search Food et ici. Et maintenant, changeons ce titre en Search Food. Et maintenant, voici la page d'accueil et voici le Search Food. La différence est que nous avons ici un titre appelé Search Food, ce qui signifie que nous devons remplacer ce logo et ajouter un titre de pied de recherche. Page de recherche en pied de page. Si nous allons simplement dans asserts et ajoutons cet en-tête ici, ce ne sera pas l'en-tête que nous voulons ajouter Pour la page de bas de page de recherche, nous avons besoin du texte appelé search food. Faisons-le. C'est très simple car nous pouvons créer des variantes du composant principal. Créez une variante, sélectionnez le composant principal. Ici, vous verrez un bouton appelé variante. suffit de cliquer dessus et vous pourrez voir ce type de variante augmenter la taille de ce cadre de variante. Et je vais juste le mettre ici pour le tisser correctement. Passons au panneau des couches. Et je vais supprimer ce logo, car ici nous avons besoin du titre. Pour créer le titre, je clique sur Contexte et je clique ici. Maintenant, ici, je vais le nommer comme titre de page. D'accord, dans le titre de la page, nous utiliserons le texte comme en-tête. Nous devons donc maintenant ajouter un schéma de péage à ce titre. Je vais d'abord changer de poste A, puis je vais changer cela pour me sentir comme ça. Et maintenant, nous avons la variante de ce composant. Au lieu d'utiliser ce composant principal, nous pouvons maintenant utiliser cette variante avec les mêmes fonctionnalités que le composant principal. Dans ce cas, je vais simplement réduire les textiles du titre. Pour ce faire, je clique sur le titre et je détache les styles de l'entête Et mettons le texte du titre au 21, comme ceci, au centre et au centre du texte. OK, passons maintenant à notre page de recherche. Ici. Si nous passons aux assertions, nous verrons l'en-tête Cliquez donc sur l'en-tête. Et ici, nous avons la possibilité de sélectionner le composant principal ou variante comme nous voulons l' ajouter à la conception. Dans ce cas, nous voulons ajouter la variante. Il suffit donc de cliquer ici, de sélectionner la variante et de cliquer sur Insérer. Et maintenant nous allons voir ce type de design. Et voici la variante. Supprimez-le simplement. Si nous le disons ainsi, nous pouvons voir les propriétés de l'instance de cet en-tête. Et ici, nous pouvons sélectionner la variante et elle ressemblera à ceci. C'est le moyen de créer une variante et de l'ajouter aux pages séparées. Maintenant, je peux simplement appuyer sur le thé et modifier ce texte pour rechercher des aliments comme celui-ci. Il s'agit du composant « avantages d'utilisation ». Si nous n'avons pas utilisé de composants, nous devrons créer à plusieurs reprises les designs pour chaque section. C'est pourquoi nous devons utiliser des composants. Sur la face du prototype, nous pouvons utiliser ce composant pour créer facilement notre prototype. Je vais le montrer dans la section des prototypes. Ici, nous avons eu le même problème ce texte ne s'alignait pas correctement. Pour corriger ce tissu d'alignement, nous pouvons envoyer ce texte sur le côté gauche et ajouter l'espace entre le menu hamburger et le texte Pour ce faire, je vais passer au composant principal. dans cette variante, je vais sélectionner les textes qui ont une mise en page automatique et en faire une ligne à gauche. Et je vais sélectionner le texte et en faire une ligne à gauche ici. Le composant principal, je vais changer la disposition automatique, écart horizontal à 15, comme ça. Et maintenant, si nous vérifions son design, il ressemblera à ceci et nous serons en mesure de résoudre le problème du centre de texte. 25. Designer la zone de recherche: Bien, créons cette barre de recherche. Avant de le créer, je vais masquer ce cadre de recherche car nous avons du travail à faire sur la page d'accueil. Sélectionnez donc la page de recherche, et je la verrouillerai ici, ce qui signifie que je ne peux pas modifier le design. Puis je clique sur cette icône et elle disparaîtra. Et je ferai de même pour le cadre métallique. Bien, créons le carnet de recherche. Pour créer un carnet de recherche, je clique sur Conret Tangle à cet endroit Cliquez sur le cadre. Maintenant, je vais fixer la hauteur du triangle rouge à 45. Ensuite, je vais convertir cela en mise en page automatique, appuyer sur Shift et A. Ensuite, je définirai la taille en tant que conteneur de terrain. Je vais changer la taille du Trang en conteneur de terrain. OK, maintenant je vais changer la couleur de ce champ en blanc. Et ajoutons l'effet d'ombre. Pour ajouter les effets d'ombre, il suffit de cliquer sur le rectangle dans l'effet. Cliquez ici, cliquez sur le signe positif. Cliquez ensuite sur cette icône en forme de soleil. Maintenant, je vais faire en sorte que y soit zéro. Augmentons ce chiffre. Et maintenant je vais changer le flou en lumière 15. 15 c'est trop, passons en un et augmentons l'opacité à 50 D'accord ? Maintenant, je vais ajouter des coins. Ajoutons des coins à la lumière 25. D'accord ? Et les ombres sont trop noires, alors changeons l'opacité à 25 D'accord ? Maintenant, si nous le vérifions sur le design, cela ressemblera à ceci. Et si nous le voulons, nous pouvons ajouter un trait autour du champ de recherche, mais pour le moment, ce sera une bonne chose. Et en cas problème de contraste ou d'accessibilité, nous modifierons le design. D'accord, nous devons maintenant ajouter ce champ de recherche. Pour ce faire, je vais passer à la recherche fontosum et infontosal Ici, je viens d' ajouter le champ de recherche et nous devons l'ajouter dans ce conteneur. Pour ce faire, je sélectionne le champ de recherche et j'appuie sur la commande X pour le couper, et ici, j'appuie sur la commande nous pour le coller. OK, maintenant nous sélectionnons ce rectangle comme champ horizontal, n'y a donc pas d'espace pour ajouter ce champ de recherche. C'est pourquoi cette zone de recherche est placée sous la zone de texte. Donc, si je fais la mise en page sous forme de mise en page horizontale, elle ressemblera à ceci. Mais nous devons ajouter ce champ de recherche dans la barre de recherche. Pour ce faire, je vais sélectionner le champ de recherche, puis ici, je peux placer ce contenu en position absolue. qui signifie que nous pouvons placer cette icône de recherche n'importe où sur le design cette manière. Parce que cela ne dépend plus de cette mise en page automatique. Nous pouvons ajuster librement la position de ce champ de recherche. Mettons-le ici. Et comme ça, je vais changer la couleur en couleur de l'équipe. Donc, lorsque je clique dessus, il ne clique que sur la mise en page automatique. Si je veux seulement cliquer sur ce champ de recherche, je dois double-cliquer ici, mais il y a un raccourci, le raccourci est d' appuyer sur la touche commande et cliquer simplement sur l'icône que vous souhaitez sélectionner. Par exemple, si je souhaite sélectionner ce logo, si je le sélectionne comme ceci, toute la mise en page est sélectionnée. Mais si j'appuie sur Commande et que je le sélectionne, pour sélectionner l'élément inférieur de la commande Mac sous Windows, je pense que cela devrait être le contrôle Il suffit de jouer avec les touches. OK, maintenant je clique sur cette icône vectorielle et je sélectionne la couleur foncée comme ceci. D'accord ? Maintenant, en U x, l'espacement négatif est vraiment important car si nous avons un bon espacement négatif, cela aidera les utilisateurs à le lire correctement et à comprendre le pliatif du design Pour ajouter l'espacement négatif, nous pouvons l'ajouter directement à la mise en page home auto Je clique donc sur le cadre d'accueil. Et ici je vais ajouter un espacement négatif, ou j'ajouterai l'écart vertical 60 Maintenant, si je vérifie le balisage, il ressemblera à ceci. OK. 26. Conception de la section de catégorie - Partie 01: Nous devons maintenant créer cette section de catégorie pour mettre l'accent sur ce point et créer un texte appelé Catégories, puis sélectionné comme en-tête. Et la couleur sera la couleur foncée. Et maintenant, nous avons l'image et la description de l'image. La première image sera « Daily Special », la première catégorie sera « Daily Special », deuxième « Paste » et la troisième « Boissons ». Créons ces catégories. Pour les créer, nous devons d'abord créer l'image. Pour l'instant, je vais utiliser un rectangle comme celui-ci, puis nous aurons besoin d'un autre texte Créons donc un texte. Le texte sera composé d'émissions spéciales du jour. OK, maintenant changeons le texte en paragraphe. En fait, il vaut mieux avoir un téléphone plus grand. Créons donc une variante différente du téléphone pour dupliquer celle-ci et détacher le style Alors faisons en sorte que ce média clique ici, quick concrettyle. Appelons cela le sous-titre Style concret. Très bien, passons maintenant à notre design. Cliquez ici et remplacez le texte de ce style par un sous-titre OK, maintenant je vais sélectionner ces deux éléments et appuyer sur Shift A. Ensuite, je vais le placer au centre et l'espace sera de 15. Et maintenant, cliquez également sur ces deux sections. Appuyez sur Shift A pour le classer. Ici, nous ajouterons l'espace négatif comme 20 Ici, nous avons quatre sections. Pour créer quatre sections, nous devons sélectionner les éléments de la catégorie et appuyer sur la touche Shift A. Ensuite, je définirai la mise en page en tant que mise en page horizontale. Et maintenant, si je sélectionne une seule catégorie, appuyez sur les dupliquer. Il suffit de le glisser et de le corder comme ça. Maintenant, si vous le vérifiez, nous devons réduire la taille car nous avons besoin quatre articles pour réduire la taille avant de réduire la taille. Si nous créons un composant à utiliser dans l'élément d'une seule catégorie, il sera facile de modifier le design car lorsque nous modifierons le composant principal, cela affectera également l'instance du composant principal. Je vais supprimer le composant que nous n'allons pas utiliser, et ici je vais convertir un composant, et nommons ce composant comme élément de catégorie. Maintenant, nous pouvons ajuster la taille, ajustons cette taille à 72 x 72. Nous devons donc réduire la taille de ce texte. Pour ce faire, il me suffit de cliquer sur le texte et de le faire dans un style condétache Et réduisons la taille de police à, pour que l'espacement soit défini sur s. Bien, passons maintenant à Asserts et vérifions le composant que nous avons Et ajoutons-le ici. Et ajoutons-en quatre. Il s'agit du composant principal. Créez, par exemple. Et je mettrai le composant Master en haut. Et sélectionnez tous ces composants. Et appuyez sur Shift ici pour ajouter la mise en page. Et faisons-en une mise en page horizontale. Et ici, nous devons réduire un peu plus la taille. Faisons en sorte que ce soit 65 ans. Réduisons maintenant l'espace entre ces deux options. Faisons en sorte que ce soit 15. OK, réduisons l'espace à 12. Et maintenant, nous pouvons augmenter la taille de ce rectangle. Appuyez sur la touche Commande et sélectionnez l' enchevêtrement. Et augmentons sa taille à 80 et faisons-en 80. D'accord, nous avons maintenant quatre catégories. Et maintenant je vais couper le composant principal. Ensuite, ajoutez-le sur la feuille d' autocollants comme ceci. Ensuite, nous pouvons procéder à l'évaluation et ajouter un composant ici. Je vais changer cet espace en 15, d'accord. Si nous vérifions le Moca, il ressemblera à ceci Maintenant, nous devons trouver des images et les ajouter. Ensuite, nous devons modifier le texte de chaque article de catégorie. 27. Conception de la section de catégorie - Partie 02: OK, maintenant nous devons changer ces titres. Changeons-les donc. Le deuxième titre sera à coller. Je clique donc ici, puis j'appuie sur commande et je sélectionne ce texte pour le copier. Ensuite, je vais ici et je le colle comme ça. En fait, je dois le coller sans style. Je vais donc d'abord coller le texte ici. Ensuite, j'appuierai sur la touche Ctrl pour le couper et le coller dans notre catégorie. Ensuite, allez dans Boissons , appuyez sur commande et sélectionnez les éléments. Ensuite, copiez-le sur la barre d'URL, car lorsque nous plaçons strict sur la barre d'URL, nous serons en mesure de supprimer tout le style, comme les exemples de figures . Passez ici au texte différent, notre texte original est plus un. C'est pourquoi nous plaçons strict dans la barre d'URL et nous y plaçons le texte. OK, il est maintenant temps d'ajouter des images. Pour ce faire, j'appuie sur Commande et je sélectionne ce rectangle. Et nous allons remplacer ce rectangle par des images. Pour ce faire, je vais dans le Shape to, et je clique ici. Cliquez ensuite sur Placer des images et des vidéos. Nous avons maintenant les images. Je vais donc ajouter ces images à la description de la section des ressources. Et lorsque nous sélectionnons l'image, nous pouvons la placer comme ceci, et c'est sur l'image pâteuse, sur l'image des boissons et enfin sur l'image claire OK, maintenant, si nous vérifions le design, ces images n' ont pas de coins arrondis, alors réduisons les coins de ces Pour cela, nous pouvons utiliser notre composant principal. Cliquez donc sur le rectangle de l'image sur le composant principal. Et ajoutons des images arrondies sous forme de 15 coins arrondis à 15. Et si vous entendez les coins s'arrondir, c'est plus beau. Nous devons maintenant créer la section fofulaire du pied et la section de pied recommandée 28. Designing populaires - Partie 01: D'accord, créons la section populaire pour les pieds. Il faut d'abord ajouter le titre. J'appuie donc et crée ce titre sous le titre Popular Foods. Je vais maintenant sélectionner le style de texte comme Head. Maintenant, nous avons quatre produits alimentaires d'affilée. Mais si nous ajoutons quatre aliments à l'application, cela ne sera pas plus beau. Et nous aurons des problèmes d' accessibilité. Ajoutons donc deux aliments pour une rangée, et ajoutons-les deux par deux. Pour cette section alimentaire populaire, mon plan est de créer des éléments comportant une image plus grande du produit alimentaire, puis un nom. Ensuite, nous aurons le prix au-dessus du nom. Et pour le prix, nous aurons la note en chiffres. Essayons donc de le faire Tout d'abord, je vais créer un rectangle. Ce rétracteur sera une image de la nourriture. Pour l'instant, faisons-le comme ça. Ensuite, nous aurons le nom de l' aliment et son prix. Créons un nouveau texte et ajoutons-le comme nom en tant qu'étiquette. Ensuite, je vais dupliquer ce texte et faire de ce dollar deux dollars. OK, maintenant je vais ajouter une fonction automatique à ces deux éléments et créer une mise en page horizontale. Et je vais définir l' écart horizontal entre les articles 20. Ensuite, je vais sélectionner ce rectangle et créer une automatique. Ici, je vais changer cela, 62 15. Comme ça, d'accord. Nous devons maintenant placer le nom de ce pied sur le côté droit et le montant en dollars du côté laboratoire. Pour ce faire, je vais modifier le redimensionnement horizontal de ce contenu pour remplir le conteneur Ensuite, j'ajouterai un écart horizontal entre le point 22. OK, maintenant ça a changé comme ça. Et maintenant, nous pouvons ajouter le nom de l' aliment comme nous le souhaitons. Il y a donc d'autres ajustements. Nous le ferons une fois que nous aurons terminé la section complète. Donc, pour l'instant, créons la structure. Et au-dessus de ce pied, du titre et du prix, on peut ajouter le nombre d'étoiles. Pour ce faire, je vais simplement copier une étoile d'ici. Passons à Star à partir de notre connecteur. Passons donc aux polices de caractères et autres. Star, nous avons ici une étoile. Coupons-le donc et collons-le dans cette mise en page automatique. Il ira au-dessus comme ça. Redimensionnons-le ensuite à huit par huit. Ensuite, j'ajouterai la mise en page automatique. Et maintenant, je vais ajouter du texte dans cette mise en page automatique. Ce texto sera au nombre de cinq, d'accord ? Maintenant, je vais changer la couleur de remplissage en foncé. Passons maintenant à la couleur de remplissage foncée. Ensuite, je vais passer de la sortie automatique à la mise en page horizontale. Ici, nous devrons changer la taille du pont. Faisons-en un. Et d'abord, nous pouvons ajouter notre téléphone à ce texte. Et détachons le style et faisons-en un, faisons-le comme un médium Bien, maintenant nous avons ces deux objets entre les deux. Nous avons un écart de dix, mais je vais le réduire à deux. Ensuite, je vais le placer au centre comme ça. Mais nous ne l'avons toujours pas aligné correctement. Je vais donc cliquer sur ces paramètres de mise en page automatique avancés, puis sur cette ligne de base d'alignement du texte. Prends-le comme ça, maintenant on l'aligne correctement. OK, maintenant je vais réduire cet espace à six. Et maintenant, vérifions le design sur l'aperçu. Et ça ressemblera à ça. Je pense que nous devrions augmenter la taille de l' étoile et de ce texte, faisant en sorte qu'il soit 16. Et changeons ce texte en texte de sous-titre. Qu'en est-il de ça ? Elle est plus grande. Je pense donc que l'outil sera parfait. OK, chaque année, il y a un outil. Je pense que 13 serait parfait. Et maintenant, je vais ajouter Gap comme six et maintenant ça ressemblera à ça. D'accord, nous devons maintenant ajuster les paramètres de ce nom de pied. Pour ce faire, il suffit de cliquer sur le nom du pied de page et d'ajouter un style de texte sous forme de paragraphe. Ensuite, j'ajouterai cette taille, la taille du texte sous forme d'espacement. OK, maintenant si on vérifie que le design est égal, ça ressemble à ça. Alors maintenant, je vais faire une copie de ce dessin. Et ajoutons les deux mises en page automatiques, rendons-la horizontale comme ceci. Ensuite, si nous ajoutons les deux. Automatique. Et maintenant, je vais ajouter la taille de l'image de 180 x 180. Supprimez-le, puis dupliquez-le. OK, maintenant nous avons un problème. Si je duplique les produits alimentaires, les transformons en disposition automatique et que nous ajoutons une mise en page automatique horizontale, nous ne serons pas en mesure de comprendre la bonne taille à ajouter au design. Pour y remédier, je vais simplement créer un rectangle comme celui-ci et augmenter le nombre de sites comme celui-ci. Ou je peux simplement cliquer sur Fill Container. Et il en va de même avec cette 360. Il s'agit maintenant de la largeur des éléments en taille réelle, mais nous devons vérifier la demi-taille de ce rectangle. Pour cela, je vais cliquer sur le rectangle. Dans la largeur, je vais diviser la largeur par deux. Ensuite, j'ai obtenu la demi-taille de l'élément. Mais nous avons toujours un problème. Laisse-moi te le montrer. Avant cela, j'augmente simplement la taille du cadre. Cliquez simplement sur le cadre et appuyez sur Commande sur Mac et sur Windows. Faites-le ensuite glisser comme ceci. D'accord, maintenant je vais le dupliquer et ajouter une mise en page automatique. Et ajoutez-le comme ça. Réduisez ensuite cet écart horizontal à zéro. Maintenant, nous n'avons plus d'espacement intermédiaire. Si nous utilisons simplement cette taille d'élément comme la moitié de l'élément pour le réparer, nous devons ajouter un écart de 15 % entre ces deux éléments. Nous pouvons le faire facilement en ajoutant cet écart au-delà de 15. Et cliquez sur Dirrangle, faites-le remplir le conteneur. Et cliquez sur ce rectangle et faites-le remplir le conteneur. De cette façon, nous obtenons la bonne taille. Faisons de même pour cela. Pour cela, il faut d'abord sélectionner le cadre. Dans le cadre, j'ajouterai le conteneur ts field et j'ajouterai également ce conteneur de remplissage. Ensuite, je clique ici et créons cet espace entre 215. Et maintenant, il ne nous reste plus qu'à augmenter la taille de l' enchevêtrement de sectes. Pour ce faire, nous pouvons simplement sélectionner le rectriangle et le faire tomber dans le conteneur et nous pouvons faire de même OK. De cette façon, nous obtenons simplement une taille parfaite. Maintenant, je vais supprimer cette partie, alors nous aurons d'autres modifications à faire. Tout d'abord, je vais augmenter la hauteur de cette image alimentaire à 200, et maintenant je peux la convertir en composant et apporter d'autres modifications. Pour ce faire, je clique sur le dessin puis sur Composant en béton. Ici, je le renomme « produit alimentaire ». OK. 29. Designing populaires - Partie 02: Apportons maintenant les modifications. Tout d'abord, je vais remplacer cette étoile par la couleur de notre marque. La couleur de la marque est le vert. Désolé, je surligne l' étoile et le texte, puis j'ajoute de la couleur sous forme de vert comme ceci. Et maintenant imaginons que si nous avons un nom plus grand, essayons d'en ajouter un plus grand. Et lorsque nous ajoutons un nom plus grand, il ne s'alignera pas parfaitement. Pour y remédier, nous pouvons simplement créer ce conteneur de remplissage et maintenant il s'ajustera fonction du nombre de textes. Comme ça. Si nous augmentons le montant du prix, il aura également des bords, car nous pourrons ajouter du rembourrage à gauche à ce texte De cette façon, nous aurons un espace entre ces deux sections. Pour ce faire, j'appuie sur Commande et je sélectionne le texte. Et appuyez sur Shift pour le convertir en mise en page automatique. Ensuite, j'ajouterai un rembourrage laissé comme un malade, câlin et je le rendrai malade Ensuite, si nous ajoutons le nom comme celui-ci, il sera directement vivant. Maintenant, je vais définir cela comme corrigé avec. Ensuite, j'appuierai sur la commande X pour le couper et le coller sur une feuille d' autocollants comme celle-ci. D'accord, je vais également supprimer celui-ci. Je vais maintenant évaluer, traîner et voler cet objet en forme de pied. Ensuite, j'appuierai sur commande pour le dupliquer. Ensuite, je vais surligner ces deux objets et appuyer sur Shift to lors de la mise en page automatique. Ensuite, faites-en une mise en page horizontale. Changez ensuite cet écart à 15. Que se passera-t-il si elle mange ? OK, maintenant ça ressemblerait à ça. Maintenant, nous avons également le design de base . Nous devons également changer les coins. Pour modifier les coins, je vais accéder au composant principal et ajouter des coins. Diapositive 50. Cela n'a pas marché. D'accord, cela ne fonctionne pas pour le réparer, passons au composant principal et ajoutons la couleur du champ. Maintenant, nous pouvons voir les coins. De plus, nous devons ajouter des rembourrages avant d'ajouter des rembourrages Si nous réduisons les coins de ce rectangle, nous serons en mesure de résoudre le problème. Nous devons seulement réduire les coins en haut à gauche et en haut à droite. Alors faisons-en 15 comme ça. Très bien, puis nous devrons ajouter du rembourrage pour ajouter des rembourrages Je vais faire un rembourrage inférieur à 15. Et nous n'avons pas besoin de rembourrages supérieurs, mais nous avons besoin d'un rembourrage gauche et droit Il suffit donc de cliquer ici et de l' ajouter comme 15 ou plus. Et celui-ci en avait 15. En fait, il suffit d' ajouter du rembourrage pour ces deux sections Pour l'ajouter, nous pouvons encapsuler cette section, une autre mise en page automatique et maintenant nous pouvons ajouter un pad dans cette mise en page automatique comme ceci. Je pense que 15 c'est trop. Ajoutons-en six. Et c'est parti. Si nous le vérifions sur le design, cela ressemblera à ceci. Et maintenant, nous pouvons ajouter un effet d' ombre. Pour améliorer l' ajout d'un effet d'ombre, allez dans Effet. Et maintenant, cliquez sur l'icône en forme de soleil. Faisons en deux et le flou sera de deux. OK, alors nous pouvons enregistrer cette ombre en cliquant ici. Et cliquez sur cette première icône. Et ajoutons-le nom en tant qu'effet du produit alimentaire. OK, maintenant si nous vérifions le design, cela ressemblera à ceci. Il ne nous reste plus qu'à ajouter quelques images et remplir les détails originaux. Nous devons également fixer l'espace entre ces deux sections entre les aliments populaires et cet aliment. Pour ce faire, je vais sélectionner ces deux éléments et appuyer sur le bouton Chef A. Ensuite, nous pourrons ajuster la taille. Voyons voir, la taille que nous utilisons ici est 15. Et changeons cela en 50. OK, maintenant ça va ressembler à ça. Nous pouvons donc simplement sélectionner ce cadre et appuyer sur la commande pour le dupliquer. Dans la prochaine leçon, nous ajouterons de vrais détails à l'aliment. 30. Designing populaires - Partie 03: OK, maintenant nous devons ajouter des détails pour chaque produit alimentaire. Je prends donc des noms de produits alimentaires contenant des frites. J'ai donc un ensemble d'images, donc maintenant j'ai tout ce dont j'ai besoin pour créer de vrais produits alimentaires. Commençons par celui-ci. Tout d'abord, je vais changer le nom du pied. Passons à ce document Google. Vous pouvez trouver les noms et les images des pieds dans la description ou dans la section des ressources. Je vais copier le nom, appuyer sur Commande et sélectionner le texte pour surligner le texte et coller le nom du pied ici. Lorsque je le colle, vous pouvez clairement voir que nous aurons un problème d'alignement, ce qui signifie que nous devons augmenter ce produit de deuxième pied lorsque le premier aliment grossit. Alors, comment y remédier Tout d'abord, nous allons essayer d'ajuster cette instance. Je pense que vous vous souvenez qu'il s'agit du composant principal des produits alimentaires et que ce sont des exemples de ce composant. Ajustons celui-ci. Et lorsque nous résolvons ce problème, nous pouvons appliquer les modifications au composant principal. J'appuie sur commande et je sélectionne le produit alimentaire. Ensuite, nous avons un problème avec la hauteur actuellement, la hauteur, le redimensionnement vertical. Définissez la tâche. Essayons de le définir comme Feel Container Data, c'est juste corrigé. Et essayons d'augmenter le nom du produit alimentaire. Appuyez sur la touche Commande et sélectionnez le texte en haut en rouge. Appuyez ensuite sur la commande C et sur Coller. Quelques fois comme ça. OK, maintenant le produit alimentaire s'ajuste en fonction de l'autre aliment. Commençons par les détails. Je vais copier les détails d' ici et passer la commande et sélectionner le texte. Appuyez ensuite sur la commande Coller Control. Nous copions ensuite le prix. Cliquez comme ceci et collez-le comme ça. Passons au suivant comme ça. Collez, copiez le prix. Collez le prix. Passez donc à la ligne suivante et faites de même. OK, maintenant nous devons augmenter la taille du cadre. Pour cela, il suffit de cliquer sur cet outil de déplacement et de sélectionner le cadre. Appuyez ensuite sur Commande sur Mac et sur Contrôle sous Windows. Ensuite, nous pouvons ajuster la hauteur du cadre sans modifier le co-design. Ajoutons d'autres détails. OK, j'appuie sur Moto, maintenant nous avons les détails. Et ici, nous devons également ajuster la taille de congélation verticale dans le conteneur de OK, maintenant ça a l'air bien. Il est donc temps d'ajouter les images. L'ajout d'images est très facile à faire That face command et Flak Fang Image Fanger Ici, nous pouvons cliquer sur cette petite icône déroulante et cliquer sur les images plates et slash video Et passons au dossier des images. OK, ici, sélectionnez l'image et cliquez sur le rectangle. Cela devient une image, puis faites de même pour le dessin. OK, nous avons terminé cette partie avec succès. Prévisualisons donc le design. Passons au présent. Allons-y. Il s'agit du design actuel. Et maintenant, nous pouvons modifier le nombre d' étoiles comme bon nous semble. À l'étape suivante, nous devons ajouter la deuxième section, la section des aliments recommandés. Dans la prochaine vidéo, nous allons découvrir comment procéder. 31. Conception d'une section d'aliments recommandés: Nous devons maintenant créer la section de pied recommandée. C'est vraiment facile. Il suffit de surligner la section alimentaire ofulaire et d'appuyer sur la commande C ou les commandes, et d'appuyer simplement sur Commande ou Ctrl, et vous obtiendrez le double de l'aliment ofulaire Je clique sur le cadre et j' augmente la taille de la poussette en appuyant sur Commande sur Mac ou sur Ctrl sur Windows comme ceci Faisons en sorte que ça se passe comme ça. D'accord. Maintenant, je peux changer le titre. Il suffit d'aller ici et de double-cliquer ici, appuyer sur la commande C pour le copier et cliquer ici et d'appuyer sur Commande pour le coller comme ceci. C'est vraiment simple. Nous avons donc maintenant les deux sections. Si vous le souhaitez, vous pouvez changer les aliments. Mais dans ce cas, nous nous concentrons principalement sur le design, et je ne vais donc pas changer les aliments. D'accord. Dans la prochaine leçon, nous allons concevoir la section de recherche d'aliments. 32. Designing d'une page de recherche - Partie 01: OK, nous devons maintenant concevoir cette page de recherche. Dans l'une de nos vidéos précédentes, nous avons déjà conçu la partie d'en-tête de la page de recherche. Mais partons de zéro. Tout d'abord, je vais déverrouiller ces deux cadres, et maintenant je vais sélectionner la page de recherche et la supprimer car je dois la créer à partir de zéro. Alors je peux obtenir ce cadre métallique d'ici. Maintenant, je vais créer un nouveau cadre pour ce faire, cliquez sur le cadre, et la taille du cadre que nous avons sélectionnée était iPhone 13 et 14, d'accord. Et ici, je vais changer le nom du cadre pour rechercher des forts OK, puis j'ajouterai avec la mise en page. Ce sera la cinquième colonne. La marge sera de 15 et la gouttière de 50. En fait, nous avons le réseau que nous avons déjà utilisé, et c'est le bon réseau. Maintenant, dans un premier temps, je vais ajouter une couche automatique à ce prame Simplement, je peux appuyer sur A ou appuyer sur ce cycle plus de la mise en page automatique. Maintenant, je dois changer le réglage. Le rembourrage horizontal sera donc 15 et le rembourrage vertical sera également Ensuite, je ne me souviens pas des propriétés de mise en page que j'ai utilisées à la maison. Je clique donc sur le cadre d' accueil, et ici, nous avons les détails. L'écart vertical entre les éléments sera donc de 60, alors faisons-le correctement. Il faut maintenant ajouter ce menu. Si vous vous souvenez de la vidéo dans laquelle nous créons une variante de notre composant principal, nous créons une variante pour cette section d'en-tête. Si je passe à la feuille d'autocollants, voici le composant principal de l'en-tête et voici la variante. OK. Maintenant, je peux accéder directement à ce composant en créant une instance. Pour ce faire, je clique sur le cadre et je passe à cette section d'affirmation. Ici, je peux voir la section d'en-tête. suffit de cliquer dessus et ici, je change la propriété en variante, et maintenant je clique sur cet insert inter et je vais le mettre ici. Dans cette section sur les composants, je peux également modifier le composant. Ou je peux changer de variante. OK. Maintenant, je vais appuyer sur T et copier ce texte, puis venir ici et coller le texte comme ceci. Maintenant, je clique sur l'outil M. Maintenant, notre partie d'en-tête est terminée, et nous devons maintenant ajouter la barre de recherche. Donc, dans la barre de recherche, nous avons un texte de recherche appelé burger. Donc, si nous convertissons cette barre de recherche composant et créons une variante créée pour l' en-tête, nous pouvons utiliser ce composant directement. Alors allons-y. Tout d'abord, je vais aller dans le panneau des couches et sélectionner le composant de la barre oblique, puis j'appuierai sur la commande x pour appuyer sur ti Ensuite, je le mettrai sur la feuille d' autocollants. Disons-le. Ici, maintenant je le convertit en composant. Il suffit de sélectionner l'élément et de cliquer sur créer un composant. Ici, je vais changer son nom en barre de recherche. OK. Maintenant que je peux créer une variante de ce composant, et ajouter les critères de recherche pour ce faire, je vais sélectionner le composant principal et cliquer sur le bouton de cette variante, et maintenant si je le souhaite, je peux renommer la variante. Dans ce cas, je vais ajouter un terme comme celui-ci. Et maintenant je peux ajouter un tel texte ici. Copions un texte et ajoutons-le ici. Mettons un texte au carré, et le nom du texte sera burger. OK. Nous pouvons maintenant ajouter des tuiles. Nous avons donc le texte précédent, et dans ce cas, j'ajouterai le texte Parag, puis je le mettrai Je dois donc maintenant appliquer une position absolue à ce texte. Je clique donc ici. Maintenant, je peux le mettre où je veux. Dans ce cas, je vais le dire comme ça. Maintenant, je vais aller sur la page de recherche d' aliments et cliquer sur Call Act. Ici, notre barre de recherche laisse simplement tomber la barre de recherche comme ceci. OK. Maintenant, j'ai un problème parce que lorsque j'essaie de prendre la variante, la variante n'est pas répertoriée ici. La raison en est que je renomme la variante. Lorsque je le renomme, je supprime simplement nos propriétés Pour résoudre ce problème, je peux cliquer ici et cliquer sur Ajouter un nouveau, puis je peux renommer la variante Dans ce cas, renommons-le avec le terme. OK. Voyons maintenant ce qui va se passer. Cliquez sur l'instant, et voici la variante. Très bien, nous avons créé la barre de recherche. Dans la leçon suivante, nous devons créer la liste des articles. Toujours au début de cette vidéo, je supprime simplement la barre de recherche et j'en fais un composant. Créons donc une instance de cette barre de recherche et ajoutons-la à la page d'accueil. Je vais sur la page Asarch et là, je cambriole la barre de recherche comme ça 33. Designing d'une page de recherche - Partie 02: OK, continuons le design. Ici, nous devrions avoir un texte appelé Résultat de recherche pour Burger. Le texte de ce burger sera donc modifié en fonction du système que nous recherchons ici. Créons donc texte et saisissons quelque chose comme les résultats de recherche pour Et nous allons ajouter un double code. Et ici, dans ce cas, nous utiliserons le texte comme mot. OK, maintenant je vais surligner le texte et passer au style du texte. Ici, je vais dire un sous-titre de test comme celui-ci. Et maintenant, je vais mettre en évidence le système. Et changeons-le en vert comme ça. Bien, nous devons maintenant créer ce système de cartes ou le système de résultats. Dans le wireframe de recherche alimentaire, nous avons trois aliments Mais comme je l'ai dit précédemment, si nous créons trois produits alimentaires dans le résultat de la recherche, cela n'améliorera pas l'accessibilité. Créons donc ce type de design. Maintenant, nous avons déjà le composant alimentaire, ce qui signifie que nous pouvons passer à l'évaluation et simplement sélectionner le produit alimentaire et l'inclure ainsi. Maintenant, je vais sélectionner le texte et le produit alimentaire. Ensuite, j'appuierai sur Shift pour créer une mise en page automatique. OK, il y a un problème lorsque j'ajoute le produit alimentaire , il n'a pas été ajouté au cadre de recherche. Alors, retirons-le. Et je vais également ajouter ce texte au cadre de recherche comme ceci. Et nous allons retirer ce cadre. OK, maintenant recommençons. Je passe d'abord aux assertions et je les fais simplement glisser déposer comme ça Ensuite, je mettrai en évidence le produit alimentaire et le texte. Ensuite, j'appuie sur Chief. OK, et ici je dois réduire la taille intermédiaire à 15. Je crois que c'est 15. Oui, il en est 15. OK, maintenant je vais ajouter un autre aliment comme celui-ci. Ensuite, je sélectionnerai ces deux aliments, j'appuierai sur Shift A pour les mettre en page horizontale. OK, il semblerait que nous ayons un problème. J'ai donc dit que le rembourrage de ce cadre était de 15, mais sur la grille principale, c'est différent Essayons donc de vérifier les paramètres de la grille principale. Oh, il faut le changer à 15. Fais-moi voir ça ici. Oui, ici c'est 15, alors changeons-le en 15. Oh, j'ai le problème. Nous utilisons cette disposition de grille principale pour le fil Pm, et sur le Y haute fidélité, nous avons une grille de disposition différente. Sauvegardons donc ce système de grille et ensuite nous pourrons l'ajouter à la recherche Ford. Pour ce faire, je vais cliquer ici et cliquer sur Plus Cycle. Ensuite, j' ajouterai ici High Five Hi Fi, ce qui signifie un design haute fidélité à court terme. Ensuite, je clique sur Créer ce style. Maintenant, si je clique sur le bouton Rechercher Ford, supprimons celui-ci et cliquons ici. Ensuite, nous avons le système Hi-Fi comme celui-ci. Donc, si vous ne vous souvenez pas du système de grille, vous pouvez consulter la vidéo précédente sur le système de grille. Maintenant, je dois dupliquer ce cadre comme ceci. Dans ce cas, je peux utiliser les mêmes aliments pour le résultat de la recherche d'aliments. Ce qui signifie que je n'ai pas besoin de refaire le travail parce que je l'ai déjà fait Je vais copier ce cadre et ajouter des données ici. Je vais d'abord copier celui-ci. Ensuite, j'appuie sur le contrôle de commande C pour copier. Il suffit de cliquer sur ce cadre et c'est comme ça. OK ? Ensuite, je sélectionne le cadre de recherche appuie sur Commande pour augmenter la taille du cadre comme suit. OK ? Maintenant, je peux simplement retirer cet aliment vide. Maintenant, si nous vérifions l'espace entre la barre de recherche et les résultats de recherche, il est plus grand et selon la loi des régions communes, les éléments similaires seront regroupés. qui signifie que nous pouvons former ces deux sections en une seule section. Pour ce faire, je vais cliquer sur ce cadre principal du résultat de recherche cliquer sur la barre de recherche et appuyer sur Chef pour le mettre en page automatiquement. Ensuite, je réduirai cet espace à 15. Il devrait y en avoir 15 comme ça. Et maintenant, nous avons une page de recherche. Diminuez la taille du cadre. OK, maintenant nous pouvons vérifier l'aperçu. Cela ressemblera à ça. Et maintenant, nous avons un problème. Réglons ce problème. Voyons si ce problème est sur la page d'accueil, si le mouchoir ne se trouve pas sur la page d'accueil, c' est-à-dire uniquement sur la page de recherche. Cela se produit lorsque je crée une mise en page automatique avec toute la section pour la corriger. Faisons quelques ajustements. Tout d'abord, je vais sélectionner ce cadre et faire en sorte que We feel okay. C'est juste réparé. Revoyons voir. OK, maintenant qu'il n'y a plus de mouchoirs, dans la prochaine leçon, nous passerons à la prochaine interface utilisateur haute fidélité, qui signifie page alimentaire unique. 34. Conseil de pro: Voici un prototype pour améliorer vos compétences en conception d' interface utilisateur et vous inspirer en matière de design Donc, si vous n'avez aucune inspiration en matière de design, si vous ne savez pas quoi créer pour cette liste et comment l'en-tête doit se déformer ou si vous ne connaissez pas les meilleures pratiques et normes, vous pouvez toujours consulter les systèmes de conception tels que Google Material ou Apple Human par exemple Passons au Material Design. Il s'agit donc du système de design officiel de Google. Ici, nous pouvons vérifier les composants sur les composants. Passons aux boutons et vérifions les boutons courants. Et ici, ils vous fourniront tous les détails et directives que vous devez suivre pour créer un bouton. Ce sont donc des règles UY standard ou des modèles UY. C'est pourquoi vous devriez suivre ce type de système de design si vous n' avez aucune idée de design, si vous êtes débutant. Par exemple, si nous passons aux directives et que nous y trouverons les détails avec l'écran hors d'un bouton. C'est une façon d'ajouter à notre design. Ici, nous ne faisons pas de section et lorsque nous suivons ce type de système de conception, même si vous n'avez aucune compétence en design UX, vous pouvez naturellement obtenir une interface conviviale. Donc dans ce cas, nous avons les clés du principe U x, restez simple. Stupide principe Ux. C'est pourquoi vous devez suivre des directives de conception comme celles-ci. Dans un autre exemple, si nous examinons les cartes et que nous avons déjà créé la liste des cartes, alors si nous allons ici, nous pouvons vérifier les directives, et ici nous avons ce que nous devons suivre. Dans cette série, je ne compléterai peut-être pas tous les éléments de l'interface utilisateur, mais vous pouvez toujours vérifier ce type de système de conception et comprendre comment créer un design parfait. Dans ce cas, si vous créez l'application différente, vous pouvez suivre les directives du système de conception et créer des composants en fonction de vos besoins. 35. Designer d'une page unique d'aliments - Partie 1: Nous avons conçu avec succès la page d'accueil et la page de recherche. Nous devons maintenant concevoir la page de bas de page unique. Tout d'abord, je vais copier ce cadre métallique et le coller sur la page de maquette OK, maintenant je vais créer un nouveau cadre. La taille du cadre sera donc l'iphone 13.14 Maintenant, renommons le nom du cadre. OK, maintenant Layout Grid et moi. Il suffit de cliquer ici et voici la grille de mise en page enregistrée, ce style. D'accord. Maintenant, nous devons accéder à cette section d'en-tête pour le faire, nous pouvons simplement aller à Act, et ici nous avons la section d'en-tête. C'est juste que ça peut l'accrocher ici. Et changeons la propriété en variante deux. J'ai oublié d'ajouter la mise en page automatique à ce cadre. Ajoutons donc le, il suffit de cliquer sur le cadre et cliquer sur le signe plus sinusoïdal sur Auto Layout. Et vérifions les valeurs. OK, les valeurs seront les suivantes : en haut, en bas à gauche, à droite, les rembourrages sont de 15 à 50 et l'écart vertical entre les éléments est de 50 OK, maintenant le titre de l'espace doit être remplacé par le titre du produit alimentaire. Dans ce cas, je vais sélectionner mon plat comme celui-ci. Appuyez sur la touche Commande et sélectionnez le texte directement. Appuyez sur le bouton « Sélectionner » et sur la commande « café » dans le titre de la page. Je vais juste passer le nom du pied. Lorsque je le colle comme ça, le style de police change. Je vais d'abord le coller dans la barre d'URL , puis le coller comme ceci. OK, maintenant je sélectionne Motto. Nous devons maintenant concevoir ce carozel. Voici le Rocrozel. Concevons-le. Tout d'abord, je vais créer un rectangle et augmenter la taille du rectangle. Ça, faisons-en 300, d'accord, 200, d'accord. Ensuite, je doublerai ce rectangle, je sélectionnerai ces deux rectangles et j'appuierai sur Chit Ensuite, il crée une mise en page automatique, puis une mise en page horizontale. D'accord ? Maintenant, ce deuxième rectangle n' est pas visible. Pour le rendre visible, je peux cliquer sur ce cadre à un pied. Et lorsque je clique dessus, nous pouvons voir cette case à cocher pour le contenu du clip. Et si c'est coché, si je le décoche, les éléments extérieurs au cadre seront visibles D'accord ? Maintenant, c'est un carrousel, ce qui signifie qu'il défiler horizontalement, d' Je vais maintenant réduire cet écart à 15, ce qui signifie qu'il s'agit du premier élément du carrousel et du deuxième élément du D'accord ? Maintenant, je vais réduire cet écart intermédiaire à 15 comme ça. Ensuite, je peux ajouter autant d'articles de carrousel, mais je ne le ferai pas. Ajoutons-en quatre. Peut-être qu'il y aura du travail ici. Cliquons sur ce premier rectangle et remplaçons-le par l'image. Pour ce faire, je vais aller sur Place Image, et j'ai ici trois images. Ajoutons-les à ces triangles, ceux comme celui-ci. OK, maintenant nous pouvons commencer le design. Je vais d'abord réduire les angles à 15. Maintenant, il faut ajouter le titre. Ajoutez le titre. Je vais simplement appuyer dessus et appuyer ici. Puis, graduez, ajoutez du texte comme celui-ci. En fait, nous pouvons copier le texte d'ici. Copiez-le ici. Et maintenant, nous pouvons acquérir le style du texte. Je vais maintenant sélectionner le titre de ce produit alimentaire et ce carrousel zéro et ajouter la mise en page automatique Appuyez sur Shift puis sur Shift. OK, maintenant je vais le changer entre le rythme à 15. Après cela, je vais cliquer sur celui-ci et ajouter un rayon d' angle égal à 15. Nous le ferons aussi pour celui-ci. OK, maintenant ce que je fais, c'est simplement appuyer sur cette mise en page automatique et appuyer sur Commande. Sous Windows, il doit s' agir d'un ancien contrôle. Ensuite, je réduirai la taille jusqu'ici. Maintenant, je dois appuyer sur Single Food et cliquer sur Clip Content. Cliquez ensuite ici et cliquez sur Contenu du clip. Très bien, maintenant je change ce correctif avec Fill Container. Commençons maintenant à ajouter ce montant en dollars et le nombre d'étoiles. 36. Designer d'une page unique d'aliments - Partie 2: Commençons par ajouter ce montant en dollars et le nombre d'étoiles. Je vais donc ajouter le montant en dollars ici et le nombre d'étoiles sous le titre. Alors allons-y. Tout d'abord, je vais remplacer taille du titre par la taille de l'en-tête, et ici, ajoutons le prix. Pour ce faire, je vais simplement poursuivre et créer un prix de deux dollars. D'accord, alors faisons-en une mise en page automatique. Il doit s'agir d'une disposition horizontale et la largeur sera celle du conteneur de remplissage. Et ajoutons un espace horizontal à une photo comme celle-ci. Alors changeons cette couleur en vert. Ajoutons-le comme ça. Maintenant, nous devons ajouter le nombre d'étoiles. Pour ce faire, je peux copier ces étoiles depuis Single Food ou accéder aux plugins de Plug in. Accédez à Fonts On fonts. Ici, nous avons une étoile. Sélectionnons-la et doublons-la quelques fois Et mettez en valeur les étoiles d'ici. Et appuyez sur Shift A. Modifiez ensuite l'écart horizontal à 15. Réduisons la taille de ces étoiles. Cliquez sur Conc Strain Proportions et fixons-les à 14 en bon état. Et sélectionnez-les, l'écart horizontal sera correct. Et la moitié de l'étoile, cela fait passer la taille à 14. Placez-le dans la mise en page automatique. Et ça, d'accord, maintenant nous avons une étoile. Ajoutons-le sur la section à un pied comme ceci. Il suffit de le couper et de le coller comme ça. Ensuite, nous devons ajouter la note. Pour ce faire, je vais appuyer et créer une zone de texte. Alors, faisons-en quatre. Modifiez la taille du texte à 16 et dissociez-le. Modifions-le en, puis je pourrai ajouter ce texte dans la mise en page automatique. Ensuite, collez-le comme ça. Mettez ensuite en surbrillance la mise en page automatique pour l'aligner à gauche, au centre, puis passez au paramètre de mise en page automatique avancé. Et cliquez sur ce stick pour aligner la gamme Taste Base. OK, maintenant je vais changer cette couleur en couleur du thème. Très bien, maintenant nous pouvons le mettre dans cette mise en page automatique. Il suffit d'appuyer sur le contrôle X ou sur la commande X pour le couper. Dix commandes pour le coller. OK, nous pouvons donc réduire la taille intermédiaire sur les étoiles. Faisons en trois. Bien, maintenant, si vous le regardez dans la critique, cela ressemblera à ceci. En fait, nous pouvons le réduire entre le dimensionnement de ce texte et le début Cliquez simplement sur Starting Auto layout ten. Cliquez sur Mise en page automatique du texte, enveloppez-le avec une autre mise en page automatique dix. Réduisons ces deux points. OK, c'est mieux. Il est maintenant temps de concevoir ce bouton et ce manuel pour sélectionner le nombre d'articles Je pense que cela semble mieux sans ajouter de ligne, de ligne de base de texte. Supprimons une ligne, testons la base de référence. D'accord. 37. Designer d'une page unique d'aliments - Partie 3: Bien, créons le contrôleur de comptage et ajoutons le bouton à deux cartes. Tout d'abord, je vais créer ici un cadre comme celui-ci. Dans le cadre, ajustons sa taille comme si 50 x 14135 suffirait Eh bien, je vais réduire les angles d'environ 15. Permettez-moi d'ajouter un peu de couleur de remplissage pour le moment. OK, les 15 coins. Maintenant, je vais ajouter l'Est, cliquer sur Tron, remplacer la couleur du trait par cette couleur primaire. Et maintenant je vais supprimer la couleur de remplissage. OK, maintenant je dois ajouter le signe plus et le signe moins. Passons donc aux plugins de ressources, au tosum du téléphone, à l'ancien tosum du téléphone Nous pouvons obtenir ces icônes, Ole Search Plus. Très bien, ici nous avons le signe plus et aussi le signe moins. OK. Maintenant, je vais les ajouter plus dix, signe moins à l'intérieur du cadre. Ensuite, je vendrai, puis j'ajouterai des taxes. Ce texte en sera un. Et il y a Ajouter des tailles de texte. Sélectionnez la tête, elle ajoute la tête. C'est bon. Maintenant, je vais cliquer sur le cadre, puis sur Shift pour le mettre en page automatiquement. Après cela, je vais aligner le centre. Ensuite, j'ajouterai cet écart horizontal entre deux automobiles. Ajoutons maintenant un rembourrage horizontal de 15 et rembourrage vertical Très bien, maintenant je vais supprimer ces cadres. La hauteur a été modifiée, alors passons à une hauteur fixe et ajoutons une hauteur de 40. Ceci. OK, maintenant je peux changer la couleur de ce champ en vert. Et maintenant, nous avons le contrôleur de comptage. Il est donc temps de créer un bouton. Pour créer un bouton, je vais créer un autre cadre et il n'y a qu'une taille de cadre. La hauteur du cadre sera de 50 et le cadre de 135. Rayonnons les coins de 50. En fait, nous devons faire correspondre le rayonnement d'angle la barre de recherche, car nous devons maintenir la cohérence Ce sera donc 25, alors faisons-en un 25. Ensuite, j'ajouterai une couleur de champ comme celle-ci, le vert. Je vais donc réduire ce nombre de points de contrôle de la livre à 25. OK, maintenant ce que nous pouvons faire, c'est ajouter la zone de texte à ce cadre de boutons et le texte sera complet. Faisons maintenant de ce cadre mise en page automatique. Ajoutons maintenant rembourrage horizontal de 20 et un rembourrage vertical 15 c'est trop. Voyons la taille de cette barre de recherche. Faisons en sorte que le rembourrage vertical s'active automatiquement. Définissons cela comme une largeur fixe. Et faisons en sorte que la hauteur soit fixe. Et la taille sera correcte. Passons maintenant à la taille de cette étiquette pour qu'elle soit sous-rembourrée comme ceci. Alors faisons-en un centre de ligne. Nous avons maintenant ce bouton. Créons un composant. Et renommez le composant en bouton. OK, alors voiturez et passez à notre feuille d'autocollants. Dans une feuille d'autocollants, je vais simplement le coller comme ceci. OK, maintenant prenons l'instance de ce bouton comme ceci. Alors changeons l' étiquette pour deux voitures. OK, maintenant nous pouvons réduire la taille de ces détails sur le contrôleur de comptage, car lorsque nous le comparons au bouton, il fait deux fois plus gros. Alors changeons d'abord la taille de ce sous-titre numéro deux. Et les boutons plus et moins conviendront à ce type de design. Sélectionnons donc ces deux cadres, ajoutons-les mise en page automatique et rendons la mise en page horizontale. Après cela, modifions-le entre la taille 15. Et maintenant, nous avons un bouton parfait à utiliser pour créer une carte. Nous pouvons également ajouter ce bouton Ajouter à la carte à ce cadre principal. Sélectionnez la section À la carte et appuyez sur la commande X pour la couper, puis sur la commande V pour la coller. OK, je vais donc changer la hauteur de ce bouton à 50. OK, alors sélectionnez ce cadre et faites en sorte qu'il soit aligné au centre gauche comme ceci. Vérifions-le sur le design, cela ressemblera à ceci. Dans la leçon suivante, nous devons créer la section de description et de révision. 38. Designer d'une page unique d'aliments - Partie 4: Il est maintenant temps d' ajouter une description. Je vais donc obtenir la zone de texte, puis je vais taper quelque chose comme ça. Ensuite, j'irai sur le site de Hum, If pour y trouver un faux texte Je vais juste copier la ligne de texte à ce rythme, cette ligne de texte ici. Ensuite, je vais passer le texte au paragraphe suivant. faut le réduire comme ça et je ne garderai que quatre lignes. Ensuite, j'ajouterai un autre texte et ce ne sera qu'un appel par lien, savoir plus et modifier les détails pour arrêter le titre et changer la couleur de remplissage en cette couleur verte. Ensuite, définissons ces deux sections et appuyons sur Shift A. Réduisons ensuite cette taille intermédiaire à 15. OK, ici si nous voulons, nous pouvons ajouter du texte appelé description, mais je vais le garder comme ça. Après ce texte, j'ajouterai la ligne horizontale pour séparer ces deux sections, ce sera donc un diviseur Pour créer un diviseur, je vais cliquer sur Shape Tool puis sur Line Et faisons simplement glisser une ligne comme celle-ci et appuyons sur Shift pour en faire une ligne correctement. Maintenant, ici, je vais changer cette couleur en noir. Et faisons en sorte que cette taille soit zéro point A dans le design. Cela ressemblera à ça. Si nous le voulons, nous pouvons changer cette couleur plus foncée en gris foncé comme ceci. 39. Designer d'une page unique d'aliments - Partie 5: Maintenant, ce que nous devons faire, c'est créer un cadre révisable pour les créer Je vais augmenter la taille de ce cadre d'un pied Et ici, je vais créer un nouveau cadre. Et ajustons la taille du cadre en conséquence. Et faisons de la haute tâche 135. Nous pouvons maintenant ajouter de l'effet. En fait, nous ne pouvons pas directement ajouter des effets au cadre. Ce que nous devons faire, c'est créer un rectangle autour de ce cadre et le faire ainsi. Alors changeons sa couleur. Maintenant, ce que je peux faire, c'est créer une couche, puis ajoutons les détails. Nous devons d'abord ajouter les commentaires. Pour ce faire, je vais sélectionner cette section de révision et la convertir en composant, et la renommer Review the Stars Ensuite, je vais le couper à partir d'ici et le coller dans la section des éléments comme ceci. Ensuite, je peux modifier la taille du dessin ici. Mais avant de le modifier, je vais créer une variante. Et maintenant, nous pouvons modifier la taille de cette variante. Pour ce faire, je mettrai donc en avant toutes les étoiles. Et changeons qu'à 25 ans, 25 ans, c'est trop. Faisons en sorte que 2020 soit parfaite. Et cette taille de texte sera également de 16. Augmentons le nombre premier de la variante. OK, maintenant ce que nous pouvons faire, c'est accéder à notre design et cliquer ici. Accédez ensuite à Assets. Dans Assets, nous avons des étoiles d'évaluation. Il suffit de le mettre ici. En fait, ça devrait être dedans, comme ça, d'accord ? Maintenant, ce que nous pouvons faire, c'est aller ici et passer à ***** et à des assurances comme celle-ci OK. Nous allons maintenant sélectionner la deuxième variante de cette étoile d'évaluation. Et maintenant, résolvons ce problème. Pour le réparer, je vais cliquer sur le rectriangle et cliquer ici pour le mettre en position absolue Ce rectangle ne sera donc pas affecté à l'autre bout de cette section de révision. Mettons donc ce rectangle en haut de l'écran. Ensuite, je sélectionne le cadre et j' augmente la taille du cadre. En fait, nous devons augmenter cette largeur à 300, qui signifie que nous devons augmenter le rectangle de deux Après cela, je vais changer l'effet car ce serait génial si l'effet se produisait autour de l'élément, comme dans ce champ de recherche. Pour ce faire, je vais aller ici et cliquer sur le rectangle pour annuler ces effets Et cliquez ici. Ensuite, faites de y zéro et de huit. Et maintenant, ça a l'air bien. Maintenant, il ne me reste plus qu'à ajouter un rembourrage horizontal et vertical Ajoutons la masse 15 par 15. OK, maintenant nous avons l'aperçu. Ajoutons donc une zone de texte ici. Pour l'instant, ajoutons du loam is text comme celui-ci, diminuons la taille du texte Faisons en sorte que la tâche remplisse le conteneur. OK, maintenant changez la taille en paraga. Nous devons augmenter la hauteur de ce design. Portons-le à 200. Augmentez également ce chiffre. D'accord, fixons cet écart à 50. Il ne nous reste plus qu'à ajouter l'Avata et le nom. Pour ce faire, je vais créer une lèvre, réduire la taille de l' elif à 40 x 40 Maintenant, ce que nous devons faire est d' ajouter un autre manuel et les manuels seront alors créons-le comme sous-titre et disons-le comme ça Ensuite, surlignez ces deux sections et convertissez-les en mise en page automatique ou enveloppez-les avec la mise en page automatique, en décalant fréquemment A. Ensuite, créez une mise en page horizontale. Ici, nous devons changer de position. Le texte sera en dessous et l'icône Avata en haut. Faisons ensuite entre la taille deux. Et dessinons une ligne au centre gauche. Maintenant, nous pouvons augmenter la largeur. Ce cadre appuie sur la commande et augmentez-le comme ceci. Augmentons également celui-ci au sin des rectangles pour pouvoir réellement modifier le contenu des hauteurs Ici, nous avons 15 rembourrages en bas et en haut. Il s'ajustera en fonction de cet examen. Nous avons maintenant la boîte de révision, et ici nous pouvons ajouter le texte appelé Révision. ce faire, je vais cliquer sur et faire en sorte que je passe en revue l' en-tête de taille et que je le place au-dessus de ce cadre et en dessous de celui-ci Coupons-le d'abord comme ceci, puis sélectionnons ces deux éléments, et d'abord décalons A, puis fixons la taille à 50. OK, maintenant je vais convertir cette boîte de révision en composant, sélectionner et cliquer sur Créer un composant. Ensuite, je le renommerai en Review Box. Et maintenant je vais le couper, puis le coller sur la feuille d' autocollants comme ceci. OK, maintenant je peux cliquer sur le cadre et accéder à Asserts. Dans les assertions, nous avons la boîte de révision. Créons instantanément et ajoutons-le ici. Si je vais dans Layout et que je le coupe, nous pouvons le coller comme ça. Ensuite, créons la deuxième boîte de révision. Pour ce faire, je peux simplement dupliquer celui-ci. Et créons-en un troisième. Ensuite, je mettrai en évidence ces trois cases de révision et les intégrerai dans la mise en page automatique. Après cela, faisons-en une mise en page horizontale. Cliquez ensuite ici et cliquez sur Contenu du clip. Et ça ressemblera à ça. Donc, ce que nous pouvons faire, c'est cliquer sur le contenu du clip. Et ici, cette critique ne devrait pas apparaître dans le rembourrage Donc, si on va ici, ça ressemblera à ça. Donc, pour ce faire, je vais cliquer sur le cadre, appuyer sur la commande et ajuster le. On aime ça, puis il suffit de cliquer sur le contenu du clip. Très bien, nous avons maintenant la boîte de révision. Donc, lorsque je vérifie ce contenu, il y a un énorme espacement entre ces deux sections Vérifions-le donc en temps réel. Quand vous le voyez, il semble que cet espacement soit trop important car nous sommes déjà au niveau du diviseur, donc si nous diminuons cet espacement, cela n'affectera pas De plus, nous avons un problème avec l'ombre de la boîte de révision pour y remédier. Va ici, ici. Ça aura l'air bien. Mais oui, nous avons un problème. Je pense que nous devrions, oui, augmenter la taille de cette couche automatique. En fait, nous pouvons définir la hauteur sous forme de conteneur. Ajoutons ensuite le rembourrage 15. OK, c'est réparé. Nous devons également ajouter un rembourrage horizontal, par exemple 15. Je pense que 15 c'est trop sur le rembourrage horizontal, alors ça fait quatre. OK. Je pense que maintenant ce mouchoir a disparu. C'est bon. Je vais maintenant surligner ces trois sections et appuyer sur Shift A pour créer un cadre différent. Et maintenant, nous pouvons réduire la taille à 15 et vérifions-le. OK. Maintenant, c'est look. OK. Ici aussi, nous avons un autre problème. Comme j' ajoute déjà un rembourrage à 15, ce doit être zéro OK. Maintenant, ça a l'air bien. Maintenant, nous pouvons ajouter un nom et des avas. Pour ce faire, je peux cliquer sur ce cadre et supprimer le contenu du clic. Cliquez également sur Single Wood. Puis cliquez sur, cliquez sur, et ici maintenant j' appuie sur Commande et je ce rectangle, je cilie cette Cliquez ensuite sur Placer l'image. Ici, nous avons des avatars. Il suffit donc de cliquer sur ces avatars et de les ajouter. Nous ferons de même pour le reste du design. OK, maintenant ça va ressembler à ça. Cela carrousel soit les actions, soit le défilement horizontal Nous serons créés dans la section des prototypes. Pour l'instant, il suffit de créer l'UY, cliquer sur le cadre d'un pied et de cliquer sur le contenu du clip. Cliquez ensuite ici, cliquez sur «   Cliquez sur le contenu » et ajoutez la case à cocher. Et voici à quoi ressemble le design du canapé. Je vais maintenant réduire la taille de ce cadre d'un pied comme ceci. Maintenant, nous avons terminé trois images et nous devons créer ce panier et ces fenêtres contextuelles, faisons-les dans les prochaines vidéos. 40. Designing de page de panier - Partie 01: Nous devons maintenant concevoir la page du cœur. Commençons donc. Ensemble de cadres en fil de fer. Je vais copier le cadre du cœur. Et passons à la page Moka ici. Je vais le coller comme ça. Et maintenant, je vais créer un nouveau cadre. Désolé, je dois sélectionner la taille du cadre. C'est l'iPhone 13.14. Disons-le. D'accord, nous pouvons maintenant ajouter la mise en page rouge. OK, maintenant ce que nous devons faire c'est ajouter une tête. Alors allons-y, ajoutons l'en-tête. Et l'en-tête sera la variante 2. Ici, nous devons convertir ces deux éléments, ou nous devons ajouter une mise en page automatique à ce cadre. Pour ce faire, sélectionnez le cadre et cliquez sur Mise en page automatique. Et maintenant, définissons les tailles. L'écart vertical entre les articles sera 60 et le rembourrage horizontal de 15 De plus, le rembourrage vertical sera de 15. OK, maintenant nous pouvons remplacer ce texte par ma carte, copier le texte de ma carte et le coller ici. Il est maintenant temps de le créer. Pour le créer, créez un rectangle de première génération et ce rectangle sera l'image d'un produit alimentaire. Alors faisons-le 80 par 80. Je pense que 100 x 80, ce serait bien. OK, maintenant ces virages devraient être 15, non ? Oui, ils devraient être 15. Comme ça. Et maintenant, il faut ajouter le titre et le montant, puis ce type de contrôleur de comptage. Alors allons-y Tout d'abord, je vais créer un texte, ajoutons des textes comme celui-ci. Sélectionnez ensuite un style de texte d' en-tête. Et maintenant, copions le nom. Copions ce nom. Collez-le comme ça. En fait, nous devons simplement coller le texte, et maintenant nous devons ajouter ce contrôleur de comptage. Pour ce faire, je vais sélectionner le contrôleur de comptage. Passons à la mise en page. OK, je sélectionne simplement le contrôleur de comptage, puis nous pouvons le convertir en composant, cliquer sur composant et le renommer en contrôleur de comptage Très bien, maintenant je vais le découper d'ici et le coller sur notre feuille d'autocollants. Collons-le ici. OK, maintenant je vais reconstituer ce cadre, passer à Assist, récupérer la manette Hound et la mettre ici comme ça Il s'agit donc d'une instance de Count Controller. Maintenant, nous avons besoin de ce contrôleur de comptage. Alors allons-y pour vous aider. Et maintenant, glissez et déposez ce contrôleur de comptage comme ceci. Mais dans ce cas, nous devons le réduire. Pour cela, nous pouvons créer une variante. Avant cela, ajoutons la dernière section. Quatre articles du panier seront le prix. Ajoutons le prix comme ceci. OK, maintenant je vais sélectionner tous ces éléments et appuyer sur Shift pour les intégrer à la mise en page automatique. Alors faisons-en une mise en page horizontale. Cliquez ici et décochons cette case. Cliquez sur Contenu. Maintenant, nous pouvons voir le design. Réduisons cet espace entre les articles à 15. Faisons-en une ligne au centre gauche. Nous pouvons maintenant ajuster le design. Commençons d'abord par là. En fait, nous pouvons simplement le réduire à environ 75. Et maintenant, cliquez sur ce texte. Et adaptons ce texte à la taille du paragraphe. OK, maintenant créons une variante de ce contrôleur de comptage et réduisons un peu le kick. Voici donc notre composant principal du contrôleur de comptage. Cliquons sur le composant principal et cliquons dessus en bas de la variante. Et nous avons ici une variante. Il est maintenant temps de réduire la taille. Tout d'abord, je vais simplement réduire la taille comme ça. Faisons en sorte que ce soit 100 x 30. changeons la taille de ce signe plus. Cliquez sur cette proposition de contrainte puis sur la taille. Et faisons en sorte que ce soit 60. Réduisons-le à 14. 14 ont l'air bien ici. Nous pouvons faire de même. Bien, diminuons maintenant le rembourrage des côtés gauche et droit. Disons-le comme deux ici. Dis-le aussi comme deux. Nous n'avons pas besoin de modifier la taille du texte, mais si nous le voulons, nous pouvons cliquer sur le texte et le transformer en paragraphe, mais ce n'est pas nécessaire. OK, maintenant nous avons la taille différente du contrôleur de comptage, alors cliquez ici. Et ici, nous pouvons vérifier la variante et réduire la taille, mais elle semble quand même plus grande. Ce que nous pouvons faire, c'est produire une plus grande partie du contenu. Tout d'abord, réduisons cette taille entre les articles à environ, d'accord. Maintenant, nous pouvons simplement réduire ce texte à la taille de 125 maintenant. Ici, nous pouvons donc le réduire davantage. Si je passe au design et le vérifie réellement, si nous le réduisons davantage, il ne sera pas adapté à l'accessibilité. Il y a donc une chose que nous pouvons faire pour conserver cela, comme une seule ligne, qui est de réduire la taille de cette zone de texte. Essayons donc de le réduire. Faisons en sorte que ce soit 110. D'accord. Maintenant, sélectionnez-le. Essayons ensuite d'ajouter entre Gap Two Auto et OK. Essayons maintenant d' augmenter ce texte. OK, c'est bon. Essayons d'augmenter ce texte. En fait, lorsque nous l'augmentons, l'alignement disparaît. Nous devons résoudre ce problème de prédimensionnement. qui signifie que si nous ajoutons des chiffres à ce montant, cela augmentera la taille et le design disparaîtra. Réparons-le. Pour y remédier, je vais simplement augmenter sa taille à 60 comme largeur. Ensuite, si j'essaie d' ajouter plus de chiffres, cela n'aura aucun problème. C'est donc ainsi qu'il faut y remédier. Et maintenant, nous pouvons créer le composant du panier. Cliquons sur le composant. Et renommons-le en For Name. Et le prix sera le suivant. Cliquez ensuite ici et cliquez sur Créer un composant ici. Modifions-le en Pour l'article, d'accord, nous devons donc ajouter un diviseur entre les deux Alors maintenant, je vais couper celui-ci, et allons-y, collons-le dessus. Oui, comme ça. OK, maintenant je vais passer au cadre de mon chariot et passer à ***. Dans ***, nous avons le composant alimentaire. En fait, nous avons maintenant deux types de produits alimentaires. Nous pouvons le renommer comme «   chariot food items ». Faisons-le donc comme au premier jour. Allons-y et cliquons ici. Et renommons ce produit alimentaire à deux chariots. D'accord, lorsque nous avons peu de produits alimentaires, nous devons ajouter un séparateur. À l'aide d'un diviseur, nous pouvons séparer ces aliments de cette manière Alors allons-y. Je vais aller dans Shape Tools , cliquer sur Ligne, appuyer sur Shift et créer une ligne comme celle-ci. Ensuite, changeons sa couleur en une couleur plus foncée et définissons les coins arrondis, diminuons-le à 0,7. OK, maintenant je peux sélectionner ces deux objets et appuyer sur Shift pour accélérer la mise en page automatique. Et puis ici j' ajouterai paddinessi. OK, essayons maintenant d'ajouter d' autres produits alimentaires au panier comme celui-ci. Nous devons sûrement ajouter l'intérieur de ce cadre. D'accord ? Cliquez ensuite sur ce séparateur et collez-le comme ceci OK, maintenant ça a l'air bien. Et nous sommes les seuls à le dupliquer avec ceci, ceci. Maintenant, en bas, nous devons ajouter le sous-total et le total des produits alimentaires compte également le montant final de la commande Faisons-le donc dans la prochaine leçon. 41. Designing de page de panier - Partie 02: Nous devons changer le design de ma carte, en particulier celui des produits alimentaires. Parce que pour une page de carte standard, il devrait y avoir un moyen de supprimer des éléments de la carte. Dans ce cas, nous n'avons donc pas de bouton pour supprimer ces éléments. Nous pouvons également ajouter une note attribuée à ces articles ou à ces aliments dans la section Ma carte sous le nom de l'aliment. faisons-le d'abord. Je vais passer au composant principal, le découper feuille d'autocollants et le coller sur la page de la carte. Très bien, maintenant c' est vraiment facile. Tout d'abord, je vais augmenter ce montant sur l'objet de la carte, donc quand je l'augmente, cela affecte également ces instants. Je vais donc supprimer ces instantanés et maintenant ce sera parfait. Maintenant, je suis en train de cliquer ici et de cliquer sur une ligne pour OK. Ensuite, j'ajouterai Top Gap Pass 15, le rembourrage étant de 15. Ensuite, je clique sur le texte et appuie sur Shift 102 lors de la mise en page automatique. Et dans cette mise en page automatique, faites-en une mise en page verticale. Après cela, je peux simplement couper ce contrôleur de comptage et le placer sous cette disposition automatique comme ceci. Pour l'instant, changeons cet espace entre le décompte 15. Et maintenant, je dois ajouter le nombre d'avis pour cet article de pied. Pour ce faire, je peux utiliser ce type de nombre d'avis, donc je peux simplement le copier à partir d'ici. Créons-le pour la pratique. OK, allez ici et passons d' abord à l'icône des plugins et des polices ouvertes ici. Je vais chercher une étoile. Ajoutons cette étoile ici. Sélectionnez-le dans cette mise en page et coupez-le. Ensuite, mettez-le dans ce cadre. Il devrait sûrement être ici. Et maintenant, fixons-le à la taille 14. OK, maintenant je vais appuyer sur Shift et le convertir, ou le mettre dans une autre mise en page automatique. Et si j'appuie sur N ici, j' cinq. En fait, il devrait être 0,6 et maintenant changeons sa taille en A. Trouvons sa taille à partir d'ici. OK, quelle est la taille ? Ça devrait être 13 et c'est bon. Maintenant, allez ici, et cela devrait être 13 et les tailles moyennes. Cliquez ensuite sur ces deux objets. En fait, appuyez sur Shift A et définissez une disposition horizontale. Ici, la taille sera de six. Et cliquez sur cette mise en page automatique avancée définie sur une ligne de base de texte. OK, maintenant il faut changer de couleur. Bien, maintenant ce que nous pouvons faire c'est supprimer cet écart entre les deux. En fait, nous pouvons le vérifier à partir ici et appliquer le même paramètre. Je crois que nous l'ajoutons, oui. OK. Maintenant, ce que nous pouvons faire, c'est augmenter la taille de ce nom de pied de deux ici. Et en fait, nous pouvons augmenter l'ensemble de la mise en place automatique. Ça, OK. Maintenant, je peux appliquer Auto Lay. En fait, nous pouvons augmenter d'un point de plus. Maintenant c'est parfait. Et maintenant, nous devons ajouter une corbeille ou icône de fermeture pour supprimer cet élément de la carte. Passons donc aux plugins et aux icônes call fontosm ici Je vais fouiller les poubelles. Je vais sélectionner cette corbeille, et sélectionnons-la. Cliquez ici, en fait, nous pouvons convertir cela en mise en page automatique. Cliquez sur ce texte et appuyez sur Shift A. Maintenant, je vais placer cette corbeille directement dans la mise en page automatique. Cliquez maintenant sur la mise en page automatique et définissez-la comme disposition verticale. Je vais maintenant définir l'alignement et l' horizontalité entre les deux. La taille sera de. Ensuite, je vais configurer un contenant à pilules pour que les deux soient correctement alignés. Et changeons la couleur de ce bac en vert. D'accord, nous avons maintenant un composant alimentaire parfait pour les chariots. Remplaçons ce rembourrage supérieur et inférieur en 7,5 car nous allons ajouter le séparateur 7,5 car nous allons ajouter le séparateur. Et dans ce diviseur nous pouvons régler la grosseur horizontale En fait, graisse verticale 7.5 OK, ajoutons-le à. Je vais simplement cliquer sur cette ligne, appuyer sur Shift et la coller, Ensuite, changeons sa couleur en gris clair, arrondissons-le. Ajoutons 7.0 0.7 et cliquons dessus. Cliquez également sur cet élément de carte. Appuyez ensuite sur Shift 2 lors de la mise en page automatique, et cet écart entre les tailles sera 7,5. C'est donc notre composant principal. Mais nous pouvons également ajouter cette ligne à ce composant principal. Donc, pour ce faire, je dois encapsuler ce composant principal avec une autre mise en page automatique. Alors laisse-moi te le montrer. Cliquez sur le composant, puis sur cette ligne ou sur le diviseur Passons ensuite à un. Après cela, nous pouvons définir la taille sur 7,5. D'accord, il s'agit maintenant d'un cadre normal avec mise en page automatique et voici le composant. Mais en fait, si nous pouvons ajouter cette ligne à l'intérieur du composant, mais si nous l'ajoutons comme ça, elle ne vivra pas parfaitement. seul moyen de résoudre ce problème est de supprimer ce composant et d'en créer un nouveau en utilisant les mêmes détails. Pour ce faire, je vais d'abord copier le nom du composant, puis passer aux assertions. Dans les assertions, je vais créer un composant alimentaire. En fait, il faut le mettre en dehors du cadre. Alors maintenant, je vais affirmer. Dans les assertions, je vais sur la carte, et je vais simplement y déposer une instance comme celle-ci Ensuite, je clique sur l'instance et je clique ici. instance de détachement fréquente Maintenant, ce cadre ne fait pas partie de ce composant principal car nous le détachons Alors maintenant, je peux simplement supprimer le composant principal. Lorsque je le supprimerai, nous ne le verrons plus sur le panneau d'assertion car nous le supprimons simplement. Maintenant, je vais passer aux mises en page, et je peux directement mettre celle-ci dans le cadre comme ceci Ensuite, je peux sélectionner le composant principal et appuyer sur le bouton Créer un composant. renommons le produit alimentaire Frames Cart comme ceci Maintenant, si nous passons aux assertions, je peux voir le produit alimentaire ou le produit cartonné, composant principal ici D'accord ? Maintenant, je vais le découper à partir d'ici et passer à la feuille d'autocollants. Et collez-le à l'intérieur de la feuille d'autocollants. En fait, cliquez ici et collez-le comme ça. OK, passez le pot ici. Passons maintenant à la carte. Et dans Assertion, nous pouvons cliquer sur cette carte alimentaire et l'ajouter à notre design comme ceci. OK, quelque chose ne va pas. Passons à l'affirmation. OK, maintenant on va le faire. Très bien, maintenant, nous pouvons cliquer sur la carte Food Item Components, par exemple. Alors passons à A ici. Je vais le remplacer par 15. OK, maintenant nous pouvons simplement ajouter des éléments comme celui-ci. Il faut maintenant ajouter le total. Et ajoutez le bouton Passer la commande. Faisons-le donc dans la prochaine vidéo. 42. Designing de page de panier - Partie 03: OK, maintenant j'appuie ici et je crée une zone de texte. Cette zone de texte sera donc consacrée aux aliments. Ici, nous en avons deux, ou nous pouvons ajouter le nombre d'aliments, dans ce cas, chacun des quatre. Et changeons ce texte en sous-titre. Maintenant, de ce côté, nous pouvons ajouter un montant. Dupliquons donc ce texte et sélectionnons ces deux textes. Appuyez ensuite sur Shift A disposition horizontale et définissez le conteneur du champ Ta. Et maintenant, je vais ajouter cet écart horizontal entre deux et. OK. Maintenant, je vais simplement dupliquer celui-ci comme ceci et ici nous pouvons modifier les deux taxes. Ici, nous pouvons ajouter du texte pour le moment, ajoutons zéro. Nous pouvons faire la même chose ici. Maintenant, il me suffit de sélectionner ces deux sections et d'appuyer sur Shift pour faire une différence dans la mise en page. Et ajoutons le Ta. Ajoutez-le entre les tailles 15. Ensuite, j'ajouterai le diviseur ici. Cliquons sur la ligne. Ajoutons le diviseur comme ceci. Et maintenant, changeons sa couleur en couleur supérieure. OK, passons maintenant à la taille deux et cliquons sur ce paramètre de contour avancé. Et je vais ajouter ceci ici. OK, maintenant je vais couper ce séparateur et le coller à l'intérieur. Allumez ça. Ensuite, je vais simplement copier l'un des textes et le placer sous le diviseur ici Je vais ajouter ce montant comme montant total ici. Pour l'instant, nous allons ajouter un zéro. Et maintenant, ce que nous pouvons faire, c'est cliquer sur le texte et le changer en en-tête. Changez également ce texte en en-tête. Ici, je vais changer sa couleur pour notre couleur fine. OK, maintenant en dessous, je vais être sur le bouton qui appelle passer commande. Pour ce faire, augmentez la taille du cadre, puis passez à ***** en cliquant sur le bouton et sur une icône épaisse dans ce cas, et mettons-le dans un. Ensuite, modifiez cette étiquette pour passer commande Dans ce cas, nous pouvons faire ce bouton une bouteille pleine largeur. Pour cela, nous pouvons facilement aller ici et créer une variante. Cette variante ici, ils cliquent sur le bouton ou sur la deuxième variante. Maintenant, allez ici et cliquez sur celui-ci. Puis remplacez-le par la deuxième variante. Après cela, je peux d'abord modifier ses propriétés, changeons-le dans le conteneur de remplissage et il deviendra simplement un bouton pleine largeur. OK, maintenant je vais définir ces deux premières chances et appuyer sur Shift A. Ensuite, je vais changer cette taille à 30. Faisons en sorte que ce soit 40. Voilà, d'accord, maintenant nos pages ont l'air bien. Vérifions-le sur le design. Maintenant, ce que nous devons faire est d'ajouter un contenu, donc dans la prochaine vidéo, nous le ferons. 43. Designing de page de panier - Partie 04: OK, ajoutons du vrai contenu à la section « Ma carte ». Commençons donc par le premier élément. Faisons donc du premier produit cet aliment. Alors, café le texte et colle-le ici. En fait, je dois deviner le texte avant de l'écrire ici. Je peux augmenter la taille. Donc, pour augmenter la taille, je vais aller chez le parent. Et faisons-le de cette taille. Ou nous pouvons simplement cliquer ici et Pec est tombé sur le conteneur. D'accord, maintenant cela affectera tout le contenu. OK. Ajoutons d'abord ces aliments plus étroitement comme ceci OK. Nous pouvons maintenant ajouter les prix. Pour ajouter des prix, vous pouvez consulter ces prix ici. Et là, nous avons le problème. Ce texte doit être aligné sur le côté droit. Alors, réparons ça. Je vais cliquer sur le texte et corriger cet alignement à droite de la touche. Il doit être réparé comme il a été réparé. OK, ajoutons d'autres détails. OK, maintenant changeons ces montants en. Il ne nous reste plus qu'à ajouter les images. Pour ajouter des images, j'appuie sur Commande et je sélectionne le fanger. Et cliquez ici pour placer les images. Passez à la nourriture. Et dans les aliments d'ici, nous avons de la nourriture. OK, maintenant nous devons ajouter le nombre de nourriture. Il en est cinq. Et ajoutons le montant total. Le montant total est de 10$ et ici, nous devons changer ce montant parce que nous avons commandé deux T, donc il devrait être changé en 5$ OK. Maintenant, ajoutons les taxes comme trois. Et ici, nous voterons pour un total de 13$ OK. Maintenant, nous allons vérifier le design et il ressemblera à ceci. Nous avons donc terminé quatre demandes et nous devons maintenant créer la boîte de message contextuelle et convertir ces cadres en prototypes. 44. Popup Ajouter au panier: Il est temps de concevoir cette fenêtre contextuelle. Concevons-le donc. Je vais juste le copier. Passons à la page de balisage et mettons-la comme ici. Mettons-le ici. Bien, maintenant, dans un premier temps, créons le cadre. La taille du cadre sera l'iphone 13.14 Maintenant je vais réduire la taille de ce cadre car il s'agit d'une fenêtre contextuelle Il est donc préférable de réduire la taille horizontale gauche et droite d'environ 30 pixels. Alors allons-y. La principale raison de le faire est que si quelqu'un clique sur le bouton Ajouter deux cartes, la fenêtre contextuelle apparaîtra comme ceci. Pour réduire la taille, je vais cliquer sur le cadre. Et à Width In width, j'ajouterai -30. Et maintenant, la taille originale du cadre était de 319 Ensuite, nous réduisons 30 pixels, et maintenant nous en avons 360. Essayons donc d'ajouter cette disposition en grille, d'accord ? Et maintenant je vais appuyer sur commande et réduire la hauteur. Il suffit de faire un 360. Très bien, maintenant je vais changer le nom du cadre pour l' ajouter au panier pop. OK, maintenant ce que nous devons faire est de convertir cela en une mise en page automatique. Ajoutez en fait la mise en page automatique. Disons les propriétés, entre les tailles 15 dans celle-ci. OK ? Maintenant, faites en sorte qu'il soit aligné au centre. Créons maintenant l' aliment ajouté au texte du panier. OK ? Qu'est-ce qui vient de se passer en fait ? D'accord, lorsque j'ajoute le texte, il devient simplement plus petit car nous avons défini le redimensionnement horizontal et vertical Appuyons donc sur la touche Ctrl pour contrôler afin de le refaire. Et passons à la solution des tâches les plus exigeantes. Maintenant, je vais ajouter du texte et ajoutons ce texte ici. Accédez ensuite au style de texte et sélectionnez le style de texte d'en-tête. Nous devons maintenant ajouter ce bouton de carte. Pour ce faire, je vais aller sur Asserts. Dans les assertions, nous avons ce bouton. Dis-le, et publions ce texte. Collez-le ici, passez les prises sur le bouton. OK, maintenant nous avons le bouton principal. Mais il vaudrait mieux que ce bouton ait plus de rembourrage à gauche qu'à droite Essayons donc d'utiliser la variante. Et dans la variante, nous devons le remplacer par conteneur de remplissage. Je pense donc que ce look est meilleur que le précédent. OK, il ne nous reste plus qu'à créer ce bouton pour continuer les achats. Je vais donc simplement dupliquer ce bouton et c'est Ajouter les taxes. OK. Maintenant, ces deux boutons sont similaires, mais lorsque nous ajoutons deux boutons, nous ne devrions avoir qu' un bouton ardent et le second devrait être secondaire Dans ce cas, le bouton principal d'appel à l'action est Afficher la carte. Le bouton Afficher la carte ressemblera à ceci. Et faisons de ce bouton un bouton secondaire. C'est vraiment facile à faire. Je vais regarder la feuille d'autocollants pour trouver un peu d'espacement. Je pense que nous allons le mettre ci-dessous maintenant. Je vais sélectionner ce bouton de variante publicitaire et créer un bouton secondaire La création d' un bouton secondaire est simple. Renommons-le un secondaire. OK, maintenant changeons cela en secondaire. Et maintenant, nous pouvons changer le design. Changez d'abord le design, je vais ajouter un trait. La taille du trait sera de deux et la couleur sera verte. De plus, je vais le placer au centre. Ensuite, je vais supprimer la couleur du champ. La couleur du champ sera Y. Ensuite, la couleur de l'étiquette sera cette couleur verte OK, nous venons de créer la deuxième réfutation comme ça. Nous avons maintenant la première fenêtre contextuelle. À l'étape suivante, nous devons réduire les angles. Donc, pour ce faire, je vais juste en ajouter 25 aux coins de ce cadre et maintenant il ressemble à ceci. Ensuite, je vais simplement cliquer sur ces deux boutons et appuyer sur Shift pour en faire une mise en page automatique ou ajouter la mise en page automatique. Ensuite, je vais sélectionner la disposition automatique principale et changer cet écart vertical à 30. Essayons de l'ajouter comme 60. 60, c'est trop. Ajoutons-le comme 30. OK, maintenant nous avons une fenêtre contextuelle. Et cette fenêtre contextuelle sera intégrée à l'application lorsque nous convertirons les annotations en prototype Dans la prochaine leçon, nous allons donc créer cette deuxième fenêtre contextuelle. 45. Popup up de réussite de commande: OK, créons cette fenêtre contextuelle. Pour ce faire, je vais copier cette section sur le succès de la commande et accéder aux Smoke Up and 40 ici. OK, alors ce que je vais faire c'est créer un nouveau cadre. Cette taille de cadre sera celle de l'iPhone 13.14 et réduisons la taille comme 30 fixateurs Et ajoutons la disposition en grille Maintenant, je vais d'abord ajouter le texte. Ce texte sera le message de confirmation de la commande. OK, alors un style de texte. OK. Maintenant, je vais ajouter une mise en page automatique. La mise en page automatique sera donc corrigée. Et la hauteur doit également être fixée. Hauteur, et ici ça devrait être 365. OK, maintenant changeons ça par une ligne, en haut au centre. Le rembourrage sera de 15 et le rembourrage inférieur sera également Et le rembourrage latéral, ou rembourrage horizontal, sera Ajoutons l'écart 60. Maintenant, je vais ajouter une autre zone de texte. Cette zone de texte indiquera que votre commande a été passée avec succès ou que vous avez passé une commande avec succès. Définissons-le donc comme sous-titre et faisons-en un centre de ligne. Nous avons maintenant le numéro de commande. Dupliquons celui-ci et ajoutons ce texte comme ceci. Et changeons la couleur de remplissage en vert. Nous avons maintenant ce bouton de suivi de commande. Ajoutons-le. Accédez à ***, puis cliquez sur Boutons > Insérer un bouton. En fait, il devrait être là. Ensuite, changeons le texte en Trade Trade. Très bien, nous passons maintenant à la deuxième variante, et nous devrions être un conteneur de terrain comme celui-ci. Bon, maintenant nous devons réduire la taille du cadre. Il suffit d'appuyer sur Commande ou Ctrl et de sortir, disons As 400. OK, maintenant je vais sélectionner ces trois éléments et appuyer sur Shift pour créer une mise en page automatique. Ajoutez ensuite l'écart entre les tailles 15 et ici, ajoutons le Ta auto et voyons ce qui va se passer. Non, la voiture ne fonctionnera pas bien, nous devons donc la garder Tas 60. Et peut-être que nous pouvons réduire cette taille à 360. OK, maintenant nous devons ajouter le bouton de fermeture. Pour cela, nous pouvons accéder aux plugins et à Fontosum. Dans Fontosum, cherchons l'heure de fermeture. Oui, c'est le moment de chercher. Et voici le bouton. Il suffit donc d'aller dans Layout et de supprimer celui-ci. Cliquez ensuite sur le bouton et cliquez sur ces deux éléments. Changement rapide a et lors de la mise en page automatique. Ensuite, définissez-le comme disposition horizontale. Nous devons maintenant faire en sorte que cette commande soit réussie et que cette icône vectorielle figure sur la bouteille. Définissez ensuite le cadre et faites-en un centre de ligne. Et définissons-le comme conteneur de terrain et définissons-le comme automatique. OK, maintenant je vais changer la couleur de ce champ en vert. Bien, changeons maintenant la couleur de ce cadre pour que la commande soit réussie, faites ressortir et réduisez la bordure à 25. OK, c'est beaucoup mieux maintenant. Et peut-être pouvons-nous ajouter ce texte au centre. C'est très facile de créer ce centre. Cliquez simplement sur le texte et donnez-lui l'impression d'être un conteneur. Ajoutez ensuite du texte au centre d'une ligne comme ça. C'est le centre. Et maintenant, nous avons tous les cadres. Et dans les prochaines leçons, nous allons convertir cette application en un type de photo intuitif. 46. Correction de problèmes d'interface utilisateur/UX: Nous avons maintenant tout le design. J'ai donc constaté quelques problèmes de conception et dans cette leçon, résolvons tous ces problèmes. Comme premier numéro, ce menu de hamburgers est plus vaste Et si nous réduisons la taille de ce menu de hamburgers, il sera superbe Je vais donc passer au composant principal de notre section d'en-tête. Et ici, je vais simplement sélectionner le cadre. Et réduisons la hauteur de ces rectangles. Faisons en sorte qu'ils soient épais. OK ? Et maintenant, voyons le design. Maintenant, nous pouvons cliquer sur le cadre et augmenter la taille intermédiaire. Augmentons entre deux tailles, par exemple quatre. Et maintenant c'est bien mieux que les précédents. Nous pouvons donc diminuer la largeur de ces paillettes. Faisons en sorte qu'ils aient 40 ans. Et place le cadre sur une ligne, en fait ici. Réglons ça comme suit : OK. Maintenant, si on vérifie le design, c'est beaucoup mieux. Et maintenant, nous avons un autre problème. Alors, cliquons sur le cadre et passons à Prototype, mais ne vous inquiétez pas. Dans les prochaines leçons, je vais vous montrer comment convertir ce design en Phototype Pour l'instant, passons au paramètre Afficher les propriétés, et je vais sélectionner ici nos appareils, l' iPhone 40, car la taille de notre cadre est de 390. Ensuite, je vais cliquer sur Personne. Passons au design. OK, voici la page d'accueil. Dans cette page d'accueil, le logo était recouvert par cet appareil photo. Donc, ce que nous pouvons faire pour résoudre ce problème, c'est un rembourrage supérieur. Il est donc très facile d'ajouter un rembourrage supérieur Je vais donc passer au design et cliquer sur le cadre. Ici, je vais changer ce rembourrage supérieur de 60, et voyons à quoi il ressemble Maintenant, ça a l'air beaucoup mieux, mais on peut passer à 30. OK, 30 ans, ce sera du travail ici dans un vrai tour. Ce ne sera pas un gros problème car l'application s'ajustera en fonction de l'appareil. D'accord, maintenant je dois le faire pour tous non plus. Mais si j'ajoute du rembourrage au composant principal, je n'ai besoin de le faire qu'une seule fois Alors faisons-le très facilement. Sélectionnez le composant principal, puis ajoutez-le au rembourrage sous la forme 15, car nous avons déjà ajouté le rembourrage du cadre sous OK, voyons maintenant Clerk. Maintenant, le deuxième problème est que nous avons ce menu de hamburgers sur chaque page Mais cela ne devrait être que sur la page d'accueil. L'autre page doit avoir un bouton de retour. Alors, réglons le problème. Réparez-le. J'irai voir les tigres. Et voici la variante. Je vais donc simplement cliquer ici. Passons à Plugins et sélectionnons Ontos. Ensuite, je peux effectuer une recherche en arrière. En fait, nous avons l'icône ici, alors cliquons dessus. Et voici l' icône. Je l'ai copié. Et passez à la variante deux dans cadre cinq de ce menu de hamburgers. Je le colle simplement. Ensuite, je retirerai ces éléments en stick. Maintenant, je peux augmenter la taille de cette icône. En fait, je peux le retirer de ce cadre. Juste comme ça. Et retirez le cadre. Et maintenant, ce que je peux faire, c'est donner une impression, puis je peux simplement augmenter la taille comme ça pour contrôler et confirmer les propositions de contraintes ici. Faisons en sorte que le type 24 soit deux semaines, soit 18, 16, 14. Ok, 14 c'est bien mieux. Je vais maintenant remplacer la couleur du champ par cette couleur verte. Maintenant, si nous vérifions le design, il ressemblera à ceci. En fait, cela devrait être 30 parce que ceux-ci, parce que la hauteur de ces éléments est de 30. Copions donc 10 ce cadre et collons-le. Et maintenant, retirez cet ava et mettez-le dans le cadre. En fait, je vais augmenter la taille de ce vecteur à 20 car il devrait être similaire aux deux. OK, je les ai juste définis sur 17, puis je verrai la variante et le rembourrage supérieur sur 15 OK, je pense que maintenant ça a l'air bien. Nous avons donc maintenant un autre problème. Dans cette section, nous avons 60 comme écart entre les espacements, mais ici nous en avons environ 15 Nous devrions donc l'augmenter. Pour l'augmenter, il suffit de mettre la barre de recherche hors du cadre et elle changera comme ça. Voyons le look, d'accord, maintenant nous avons un look similaire sur la section. Ok, ici on peut aussi faire de cette ville maintenant. C'est bien mieux. OK, ce sont les problèmes que j'ai vus sur le design final. Je vais maintenant supprimer les cadres métalliques que j'ai obtenus sur la page du filaire et du prototype car nous avons déjà tout le design Ensuite, je vais leur faire une ligne comme celle-ci. En fait, nous devons changer cela une fois que nous aurons conçu le prototype. Mais pour l'instant, disons-les comme ça. Bien, dans la prochaine vidéo, nous allons créer un pied de page. 47. Designer un menu de pied de page: Bien, nous allons maintenant créer le menu de pied de page. Pour ce faire, je vais aller ici et cliquer sur Corner Frame. Et redimensionnons ce cadre comme suit. Et fabriquons le cadre avec le cadre le plus haut de 60. Maintenant, mon plan est de créer trois icônes. La première icône est la page d'accueil, la seconde représente mes commandes, et la troisième est mon avis. Dans ce cas, nous avons trois éléments principaux. Créons-en donc trois. Tout d'abord, je vais obtenir des icônes pour ces trois options. Alors, rentrez chez vous, soyez chez vous. Oui, je vais le faire cuire dans ce cadre, et ajoutons de l'otolea à ce OK, maintenant ce que nous avons c'est de l'ordre. Trouvons l'icône pour la commande. Je vais m'en servir. Tasse à thé, Pka, tasse à café Pika Alors ce qu'il nous faut, c'est Rebeca. Vérifions-le et recommandons peut-être Ticon. Eh bien, ajoutons donc cette commande Tica. OK, maintenant changeons cela pour remplir le conteneur et ajoutons celui-ci en tant que photo. Le rembourrage horizontal sera nul et le rembourrage vertical 15 OK, maintenant nous devrions avoir du texte pour chaque lien. Les utilisateurs doivent comprendre la signification de l'icône. Créons donc un texte. Et le premier texto sera à la maison. Changeons le style en Paca. Nous pouvons le rendre comme moyen et réduire la taille de police à deux. OK, puis surlignez ces deux sections et reposez la touche Shift pour créer une mise en page automatique. Et l'écart sera de 10 à 15, c'est trop. Ça pourrait le placer au centre comme ça. Ensuite, nous le serons, et faisons de même pour l'icône du café. Je vais donc simplement dupliquer celui-ci. Ensuite, coupez l'icône du café et mettez-la à l'intérieur de celle-ci. Ensuite, je vais modifier cela pour commander des commandes. Ensuite, je vais dupliquer celle-ci, remplacer l'image, et ici nous l'ajouterons sous forme de critiques. OK, maintenant je vais réduire cet ajout du haut à zéro, et donc réduire le rembourrage du bas. Maintenant je vais changer la couleur de remplissage en cette couleur verte Nous allons donc le faire pour cette commande. 1.12 OK, nous avons maintenant un menu de bas de page. Ce menu de pied de page devrait donc être collant lorsque nous faisons défiler le dessin dans la face du prototype, je vais vous montrer comment procéder Pour l'instant Je vais faire de ce pied de page une position absolue Ce qui signifie que nous pouvons placer ce pied de page n'importe où. Nous ne le ferons pas. En fait, nous devons ajouter de la couleur de remplissage. La couleur de remplissage sera le blanc. Et maintenant, nous pouvons l' ajouter où bon nous semble. Nous devons donc ajouter un peu de rembourrage en haut et en bas. Allons-y 6.6. OK. Et je vais sélectionner la section de pied de page, cliquer sur Créer un composant, et changer son nom en pied de Je vais le couper maintenant. Je vais le coller sur la feuille d' autocollants comme ceci. D'accord, nous avons maintenant tout le design que nous pouvons utiliser pour le convertir en prototype. Dans la prochaine leçon, nous allons connaître le phototypage et suivre les meilleures pratiques pour créer un prototype de manière professionnelle 48. Prototypage - Partie 1: La Fema a intégré des outils pour convertir nos autres gobelets en prototype Si vous accédez à votre design Fema, vous verrez une punaise appelée prototype sur votre panneau de droite Il suffit de cliquer dessus. Lorsque vous cliquez dessus, vous verrez ce type de fenêtre. Si vous ne le voyez pas, cliquez simplement sur le canevas et ne sélectionnez aucun cadre. Et ici, vous pouvez sélectionner l'appareil. Dans ce cas, je vais sélectionner l'appareil comme iPhone 14 à cause de mon cadre de 390 pixels. Donc, si nous allons dans Prototype, cliquons sur Canvas. Et voici l'iphone 14 avec ce 390. OK, alors ici, nous pouvons changer le modèle de l'iPhone 14. Je vais donc le fixer à minuit. Et si vous le souhaitez, vous pouvez le modifier comme bon vous semble. Nous pouvons également faire pivoter l'appareil, mais dans ce cas, je l'utiliserai par défaut. Nous pouvons donc également changer la couleur de fond de cette manière. Vérifions-le donc en action. Je vais donc cliquer sur ce bouton présent. Et ici, passons à notre page d'accueil. Ici, nous avons un cadre pour iPhone 14. Et nous pouvons changer cette couleur en, changeons-la comme le bleu. Et la couleur prime size passe simplement au bleu. Nous pouvons également changer l'arrière-plan. Changeons-le en couleur cendrée. Maintenant, c'est le moyen de sélectionner l'appareil pour votre design. Ensuite, je vais sélectionner le cadre d'accueil car c'est dans ce cadre que nous lançons le flux. Lorsque nous cliquons sur la page d'accueil, nous aurons un texte appelé Flow Starting Point. Ici, je vais cliquer sur le signe plus au point de départ. point de départ désigne l'endroit où nous commençons le flux ou où nous commençons à utiliser l'application. Dans ce cas, nous irons d' abord sur la page d'accueil, puis nous cliquerons sur cet élément de pied de page, puis nous passerons à la page de bas de page unique. Après cela, nous l'ajouterons au panier. C'est donc le premier point de départ. Nous pouvons également avoir un autre étage. étage suivant, nous cliquons sur le bouton de recherche pour accéder à la page de recherche. Après cela, nous cliquons sur cet élément de pied et il ira au pied unique. C'est donc le point de départ dont nous avons besoin . Même si vous ne sélectionnez pas de point de départ, la Fema ajoutera un point de départ par défaut Dans ce cas, je vais renommer ce flux Placeorder Place Order Dans ce flux, lorsque nous cliquons sur cet élément de pied de page, cela devrait nous rediriger vers la page de pied de page unique. Il existe deux manières de concevoir ce flux. Que vous soyez débutant ou non professionnel, ou que vous soyez une méthode difficile, il vous suffit de cliquer sur l'élément que vous souhaitez rediriger Dans ce cas, il s'agit du pied. lorsque vous survolez cet élément, vous verrez ce type de point Et lorsque nous cliquons sur ce point et que nous le faisons glisser comme ça, nous verrons une flèche. Et si nous voulons passer au pied unique, nous pouvons simplement le faire glisser et le déposer sur le cadre du pied unique. Nous appelons cette ligne une connexion. Il s'agit du point de départ et de fin de la connexion. Et c'est ce que nous appelons connexion. Notez que cette page est le point de terminaison de la connexion. Comportement de cette connexion. Lorsque l'utilisateur clique sur cet aliment, il est redirigé vers cette page d'un pied de page. Nous pouvons donc ajuster les options de la connexion. Cliquons sur la connexion, et ici se trouve la fenêtre contextuelle. Dans cette fenêtre contextuelle, nous pouvons définir l'action, dans ce cas sur le toucher, qui signifie que lorsque l'utilisateur appuie sur cet élément de pied de page, l'action doit se produire. Ici, nous le définissons. Accédez à Single Put. Voici le cadre à usage unique, dans lequel nous pouvons ajouter de l'animation. Ajoutons-le maintenant sous forme instantanée, et essayons cette action. Pour l'essayer, je vais cliquer sur le mode actuel. Et ici, si nous cliquons sur cet aliment, nous devrions être redirigés vers la page d'un pied de page. Alors essayons-le. Nous sommes donc maintenant sur la seule page. D'accord, c'est la façon de créer un prototype, et ici nous pouvons ajouter de l'animation. Dans ce cas, ajoutons cette animation push. Mais je n' utilise généralement pas ces animations pour les projets dans le cadre des tests d'utilisabilité, mais nous pouvons les essayer. Alors revenons ici. C'est de l'animation ? Maintenant, voici la vraie question. À l'heure actuelle, nous n'avons qu' un seul châssis pour pied. Ainsi, lorsque nous cliquons sur l'un de ces aliments sur la page d'accueil, nous devons rediriger cette page d'un pied de page lors de la connexion. Les comportements de connexion par défaut sont ceux du toucher et de naviguer vers le cadre de points. Essayons aussi comme ça. Faisons-le pour ce 12, d'accord ? Maintenant, si nous cliquons sur ces éléments, nous pouvons simplement accéder à la page de bas de page. Maintenant, imaginez que vous avez 100 articles, comme de la nourriture, ce qui signifie que nous devons créer 100 liens comme celui-ci. Cependant, si vous devez changer le cadre, dans ce cas lorsque nous cliquons sur cet aliment, si nous voulons qu'il passe un cadre différent, comme ce cadre pour carte, nous devons modifier ces connexions une par une. Et ce n'est pas une méthode professionnelle et cela prendra beaucoup de temps. Dans la vidéo suivante, je vais vous montrer comment le réparer à l' aide d'un composant. 49. Prototypage - Partie 3: Voyons comment utiliser des composants pour créer un prototype sans créer de nombreuses connexions de ce type. Je vais donc d'abord supprimer ces connexions, car si nous utilisons des composants pour créer cette connexion, nous n'avons qu'à la créer en une seule fois. Maintenant, je dois trouver le composant principal. Si vous vous en souvenez, il s'agit du composant principal que nous avons créé pour cet article de pied. Ce composant principal possède donc beaucoup d'instances, donc tous ces éléments de base sont des instances de ce composant principal. Cela signifie que les comportements des composants principaux s'appliqueront à toutes les instances que nous créons à l'aide de ce composant principal. qui signifie que si nous créons une connexion comme celle-ci, cela devrait être appliqué à toutes les instances. Encore une fois, laissez-moi vous montrer ce que j'ai fait ici. Je peux accéder à l'onglet Prototype. Et lorsque je vais dans l'onglet Prototype, je passe le curseur sur le pied principal Il s'agit du composant principal. Ensuite, je crée simplement une connexion et je la pointe vers ce cadre à pied unique. Et les propriétés de cette connexion sont à portée de main. Accédez à un seul aliment, ce qui signifie que lorsque quelqu'un clique sur ce composant principal ou sur une instance de ce composant principal, il passe à un pied et nous obtenons une animation push. Voyons voir si cela fonctionne. Je passe en mode présentation. Et en mode présentation, je vais aller dans Option et cliquer sur Afficher la barre latérale. Ici, nous avons la parole. Cliquez donc sur le sol, nous pouvons simplement cliquer ici et cliquer sur l'icône Présenter. Et ici, si je clique sur l'un de ces éléments de pied de page, je devrais être redirigé vers la page de bas de page unique. Alors essayons-le. OK, ça marche. Et cliquons sur celui-ci. Redirige vers la page de bas de page car nous utilisons le composant principal. C'est donc la puissance du composant principal. Alors maintenant, si je clique sur ce cadre, il affichera toutes les connexions qu'ont ces composants d'instance Hot Item. C'est le moyen simple et proportionnel de créer le prototype, comme je l'ai déjà dit. Maintenant, si nous voulons changer la connexion, dans ce cas, si nous voulons changer cette connexion en carte, il suffit de changer la connexion du composant principal. Et cela s'appliquera aux instances E comme celle-ci. Si nous ajoutons cette connexion individuellement, nous devons la reconfigurer manuellement dans le cadre de la carte lorsque nous la modifions Passons maintenant au single. OK, maintenant ce que nous devons faire c'est qu'une fois que nous sommes arrivés sur la page de bas de page, le curseur ne fonctionne pas Nous devons faire en sorte que ce slider fonctionne. Nous devons également ajouter une action à ce bouton d'ajout au panier. Nous devrions également ajouter une action à ce bouton de retour, et nous devons ajouter le pied de page Faisons-le donc un par un dans les prochaines leçons. 50. Faire un défilement de carrousel: OK, dans la page d'un pied de page, nous devons ajouter une fonction de défilement horizontal à ce carrousel d'images Pour ce faire, je vais aller sur la page de bas de page, où je vais sélectionner le cadre. C'est donc le cadre et il ne s' affiche pas actuellement car nous ajoutons du contenu au clip Checkboox Cliquez simplement sur le cadre et décochez le contenu de ce clip. Ensuite, je vais sélectionner ce cadre, et ici nous avons la case à cocher pour le contenu du clip. Maintenant, je vais mettre ce cadre de carte ici. Maintenant, j'ai toujours l' aperçu complet. Je n'ai pas de fonction de défilement horizontal pour y remédier. Je dois d'abord réduire la taille de ce cadre. Actuellement, cette taille de cadre est chaude, mais nous devons la remplacer uniquement par la partie qui doit être visible sur le carrousel Dans ce cas, j' appuierai sur commande et je réduirai cette taille de cadre ici, car nous n'avons besoin que de voir cette section Si je passe au dessin, nous ne voyons qu'une seule diapositive. Maintenant, j'ajuste ce cadre en deux tailles, puis je passe à l'onglet Prototype. Dans l'onglet Prototype, nous avons un comportement de défilement pour la position. Je vais régler ce parchemin avec un pad. qui signifie que lorsque nous le faisons défiler comme ça, les images ou le carrousel défileront également avec le reste de l'élément En cas de trop-plein, il faut le régler comme horizontal. Maintenant, si on le vérifie, le défilement horizontal fonctionne parfaitement. Maintenant, si je vérifie le design, notre rembourrage n'est pas correctement aligné. Réparons-le. Pour le réparer, il suffit de passer au design et de sélectionner le cadre. Ensuite, je clique sur le bouton « Contenir ». Maintenant, si je passe au design, il sera parfait. C'est donc ainsi que vous pouvez créer un défilement horizontal et un carrousel dans Dans la leçon suivante, nous ajouterons une section de pied de page à la conception 51. Designing de menu de pied de page: Il est maintenant temps d' ajouter ce pied de page. Pied de page. Jamais sur notre page d'accueil. Pour ce faire, nous avons le design du pied ici et nous l'avons créé sur le design, section travail hautement filitive Coupons-le donc et mettons-le sur la page d'accueil. Ensuite, je définirai cette position comme position absolue. Alors ce que je vais faire, c'est juste le régler comme ça. Appuyez ensuite sur Commande et ajustez-le aux coins. Ensuite, j'ajouterai rembourrage gauche et droit de 15 par 15 Ensuite, pour le rembourrage inférieur, j'ajouterai la ligne 30 Nous allons changer la couleur de remplissage de ce dessin. Pour ce faire, je vais le rendre aussi foncé et maintenant je vais changer les couleurs des éléments en Y. De plus, ce sera Y deux, seule la section sélectionnée sera verte Ensuite, je vais cliquer sur ce bouton Aline en bas et le placer sous le dessin. Ensuite, je passe au prototype. Dans le prototype appelé comportement, je vais définir cette position comme fixe, rester en place. Ensuite, je passe à la maquette et je vérifie le design. Cela ressemblera à ça. Et en fait, nous pouvons réduire ce chiffre à 15. Ça en a l'air un peu trop, peut-être. Réglons le test 20 également sur le dessus. Qu'en est-il de deux ? Épreuve 15. OK, maintenant ça a l'air bien et nous avons un problème. Alors vérifions-le. OK, nous devons retirer celui-ci. Et je ne sais pas comment nous y sommes allés. Cependant, nous avons maintenant un excellent pied de page et il a vraiment l'air bien. Maintenant, ce que nous devons faire, c'est ajouter ce pied de page à chaque page C'est tellement simple, il suffit de sélectionner l'impression et de passer à la section Dangers. Ensuite, nous pouvons simplement créer une instance de ce design. Découvrons-le. Ça devrait être sur la page d' accueil, d' accord, comme ça Mais la seule chose que nous avons pour le régler correctement, il suffit d'augmenter la taille du cadre comme ceci. Et placez ce pied de page dans le cadre. Et maintenant, cliquez sur une ligne en bas. Produisons cette taille de cadre comme ceci. Regardons-le en action. Passons au pied de recherche. En fait, il faut mettre fin au design comme ça. Pour ce faire, cliquez ici et augmentez la taille du dessin. Et il suffit de cliquer sur le pied et de cliquer sur celui-ci, un bouton en forme de ligne. Ajustons-le manuellement comme ça et comme 30 Okie. Regardons-le en action. Nous devons aller à l'établissement et fixer un plan de maintien en place. Et maintenant ça va fonctionner comme ça. Continuons donc et faisons-le pour les cadres. OK, maintenant c'est parfaitement réglé. Dans la prochaine leçon, nous allons poursuivre ce flux de commandes de lieux. On se voit donc dans la prochaine leçon. 52. Ajouter un lien à un popup: OK, dans le prototype, nous créons simplement le ruban adhésif. Ainsi, lorsque quelqu'un clique sur un élément de pied, il passe à un pied. Maintenant, ce que nous devons faire, c'est que si quelqu'un clique sur ce bouton sur deux cartes, cela l'ouvrira sur deux cartes, ouvre un. Donc, pour ce faire, je clique sur le bouton Sur deux cartes et je clique sur cette connexion pour charger et ajouter ici. Alors voici le moyen de modifier la propriété. L'action consistera donc à appuyer sur la transaction ou à modifier la superposition ouverte Parce que nous devons ajouter cette fenêtre contextuelle lorsque quelqu'un clique dessus sur To Car. Bon, nous avons maintenant des propriétés à configurer. L'action se déroulera instantanément. Et ici, il y a une superposition. Dans le design, la fenêtre contextuelle doit être centrée et elle doit ressembler à ceci. Et je n'ai pas besoin de le fermer lorsque je clique en dehors la fenêtre contextuelle, j'ai besoin d'ajouter l'arrière-plan. Je clique donc sur un arrière-plan. Et ici, nous annulons la couleur foncée. Et je vais réduire l'opacité à 25. OK, maintenant vérifions-le en action. Passons donc à la première page. Et je clique sur ce produit alimentaire ici. Je clique sur At To Card. Lorsque je clique sur At To Card, j' ajoute cet aliment à la carte A. Il vaut donc mieux que l' arrière-plan soit plus foncé pour que cela aide à bien voir le pop A. Donc, rendons-le plus foncé. Il suffit donc de cliquer sur la connexion dans cette propriété, en arrière-plan, je vais en faire 50 ici. Maintenant c'est beaucoup mieux. Et si on le changeait à sept ? Ok, maintenant c'est beaucoup mieux. Il ne nous reste plus qu'à ajouter de l'action à ces deux boutons. Lorsque quelqu'un clique sur ce bouton d'affichage de la carte, il doit être redirigé vers la carte. Il suffit de cliquer sur le bouton, de cliquer sur ce nœud de connexion et de le mettre ainsi. Il sera redirigé vers la carte lorsque quelqu'un appuiera sur Afficher. De plus, si quelqu'un clique sur Continuer ses achats, cette personne sera redirigée vers cette recherche. Food Pay. OK, et maintenant nous allons vérifier le design. Maintenant, je clique sur Afficher la carte. Je passe simplement à la nouvelle carte. Vérifions-le depuis le début. Je clique sur la nourriture, maintenant je suis sur la page de la nourriture. Maintenant, je clique sur le flacon de la carte. Et ici, il y a une fenêtre contextuelle. Ici, je peux cliquer sur Afficher la carte, puis sur Continuer les achats. Si je clique sur Continuer mes achats, je passe simplement au moteur de recherche. OK. Maintenant, dans ma voiture, nous avons le bouton Passer commande. Lorsque quelqu'un clique sur ce bouton Passer la commande, cela ouvre cette fenêtre contextuelle Order Success au toucher, l'action sera ouverte ici, nous pouvons configurer manuellement la fenêtre contextuelle comme nous le souhaitons. Je clique simplement sur manuel et maintenant je peux le configurer comme je le souhaite, définissons-le comme ça et cliquons sur Ajouter un arrière-plan. Ajoutons la couleur d'arrière-plan 70 et vérifions-la dans Action. Cliquez ici, cliquez sur la carte, cliquez sur Afficher la carte dans Afficher la carte. Cliquez sur Placer, Commander, et la fenêtre contextuelle ressemblera à ceci. Mais je vais mettre la fenêtre contextuelle au centre car elle se place automatiquement au centre du dessin. OK, maintenant nous avons le courant. Voyons maintenant ce que nous devons faire. Donc ici, si nous cliquons sur cette bouteille fermée, cette fenêtre contextuelle devrait être fermée. Pour cela, je clique sur ce bouton de fermeture. Et quand je le fais glisser, je peux voir ce type d'icône dans la deuxième icône. Si quelqu'un clique sur cette icône de fermeture, la page sera redirigée vers la dernière page dans cette superposition de fermeture, si quelqu'un appuie sur cette icône de fermeture, la fenêtre contextuelle se ferme Alors essayons-le. C'est fermé, c'est bon. Maintenant, nous n'avons aucune action sur ce bouton de retour, ajoutons donc une action à ce bouton. Nous avons déjà une variante de notre composant, alors pointons-la vers ce bouton de retour. Et quand quelqu'un clique sur ce bouton de retour, cette personne doit le faire. Retournez à la page d'où il vient. Faisons donc glisser la connexion comme ceci et la plaçons vers l'arrière. Et maintenant, vérifions-le en action. Maintenant, si je clique sur le bouton de retour, il va simplement revenir en arrière. Cliquons sur celui-ci. Si je clique sur retour, il passe à la fin. Nous avons donc d'autres articles. Dans ce cas, si quelqu'un clique sur cette carte, cette personne doit être redirigée vers la page du panier qui vient de pointer vers la page du panier. Si nous ne créons pas de composant pour cet en-tête ou cette section de menu, nous devons ajouter manuellement ce type de connexion trois fois pour obtenir la fonctionnalité. Mais avec la variante et le composant, il suffit de le faire en une seule fois. Et cela s'appliquera à toutes les instances que nous avons créées avec le composant principal. OK, maintenant vérifions-le en action comme ça. Je peux simplement consulter les pages. Actuellement, nous n'avons pas page de commande ni de page de révision et ce sera votre mission. Donc, pour l'instant, nous n' ajouterons aucune fonctionnalité à ces éléments. Mais si quelqu'un clique sur cette page d'accueil, cette personne doit être redirigée vers la page d'accueil. Pour créer cette fonctionnalité, nous devons placer ce composant principal dans la feuille d'autocollants. Alors allons-y. Pour ce faire, j'appuie sur la commande X pour le couper. Et allons-y et collons-le comme ça. OK, maintenant je vais passer aux acides domestiques. Dans acid, nous avons le pied de page, alors disons-le comme ceci Et maintenant, nous devons définir correctement la position absolue de la faction, puis passer au prototype et la définir comme corrigée. OK, maintenant on a un problème. Nous devons faire de même pour chaque instance car nous modifions la potion de ce design Il suffit de les surligner tous et de passer à la position absolue. Et essayons de le remettre comme ça. Ensuite, nous devons ajuster manuellement la position comme celle-ci. Alors maintenant, ça devrait bien fonctionner. OK, maintenant je pense que tout va bien fonctionner. Alors maintenant, ajoutons de l'action à cela. Oh Michael, c'est très simple. suffit de cliquer dessus, d' accéder aux prototypes et de créer la connexion comme ceci. Et maintenant, il va vraiment bien voir. OK, nous approchons maintenant de la fin de cette section. Voyons donc quel arrêt il nous reste à faire. Dans la prochaine leçon, nous allons faire défiler horizontalement cette section de révision. Nous l'avons déjà créée. Nous allons donc le refaire. Non seulement cela, je vais vous montrer comment modifier les éléments ou comment changer le composant lorsque nous cliquons sur un bouton comme celui-ci. Par exemple, si nous cliquons sur ce bouton de recherche, le texte apparaîtra ici. Dans la prochaine leçon, je vais vous montrer comment procéder. 53. Ajout d'un défilement horizontal à la section de révision: OK, ajoutons un défilement horizontal pour cette section de révision Je passe donc à mon design, et ici nous passons à la section à un pied et nous cliquons sur le cadre. Je vais dans l'onglet Design, et ici je sélectionne ce cadre. Pour cela, je dois passer par couches. Voici la mise en page automatique et voici la section que nous devons ajouter, le défilement horizontal. Ici, nous n' ajoutons pas de contenu aux clips, alors passons à la section suivante. Dans cette section, nous n'avons pas non plus ajouté contenu cliqué. Qu' en est-il du suivant ? Ce n'est pas la section et c' est la section que nous avons ajoutée. Cliquez sur le contenu I antique, et voici la critique. Je vais donc dans le cadre, j'appuie sur commande et j'ajuste le cadre comme ceci. Ensuite, je passe à Prototype. Dans le prototype, je vais me connecter sur quatre horizontales. Et passons au design. Maintenant ça marche comme ça, c'est vraiment simple. Et ici, je clique simplement sur ce cadre et je passe à Design. Cliquez sur « Contenu ». OK. 54. Rendre la zone de recherche interactive: Maintenant, ce que je veux faire, c'est que lorsque je clique sur cette barre de recherche, ou si je tape sur cette barre de recherche, un texte appelé Burger devrait apparaître ici. Et puis si je clique sur ce champ de recherche, il devrait être redirigé vers la page de recherche. Dans la page de recherche, le texte doit être burger et le résultat de la recherche pour burger doit apparaître. Essayons donc de le faire. Pour ce faire, je vais aller ici parce que c' est le composant principal de notre barre de recherche, et je vais simplement le mettre ici. Ensuite, je vais augmenter ce wrapper et cliquer sur le composant Cliquez ensuite sur une variante, d'accord ? Ici, je vais changer le nom de la variante pour ajouter du texte. D'accord ? Et je vais mettre ce champ de texte de la page de recherche sur les aliments ici. Alors amène celui-ci ici. Maintenant, je vais juste presser le thé et créer un texte intitulé Burger. Ensuite, je le mettrai dans cette variante et je cliquerai simplement dessus. Faisons en sorte que ce soit une position absolue. Et positionnez-le ici. D'accord ? Maintenant, ce que je veux faire c'est que lorsque je clique sur cette barre de recherche, dans ce cas, lorsque je clique sur cette barre de recherche ou que je tape sur la barre de recherche, cela devrait apparaître comme suit : je clique sur le composant par défaut et je passe à Propriété. Alors ici, je crée simplement une connexion avec celui-ci. Dans la connexion, l' action est pressée et la réaction ou la modification à modifier sera un texte. Et cela devrait être le cas, ce qui signifie que lorsque vous dites «   appuyez sur la barre de recherche », le texte du burger devrait apparaître. Il est donc essentiellement passé à cette barre de recherche. Voyons donc si cela fonctionne. Ou ne pas rentrer chez moi, je tape simplement sur la barre de recherche et le burger s'affiche. Et maintenant, ce que je veux faire c'est que lorsque je tape sur cette icône de recherche, elle doit être prédirecte sur le produit de recherche. Donc, si je crée simplement une connexion comme celle-ci, l'action ne fonctionnera pas correctement. Passons donc à la page d'accueil. Sur la page d'accueil, affichons la barre latérale. Et ici, si je clique ici, il suffit de lancer la recherche. Mais si je clique ici et clique sur cette icône de recherche, rien ne se passera. Parce que nous connectons cette barre de recherche par défaut à la page de recherche. Pour y remédier, nous pouvons également connecter celui-ci au pied de recherche. OK. C'est une pièce très simple que nous avons créée. Maintenant, nous créons également cette partie, et tout semble fonctionner correctement. Ajoutons maintenant une action à ce bouton de corbeille. 55. Utiliser des variables pour supprimer des articles de panier: Dans cette leçon, ajoutons action ou une interaction à ce bouton de corbeille. qui signifie que lorsque l'utilisateur clique sur ce bouton de corbeille, le produit alimentaire sera retiré de la carte. Pour ce faire, nous pouvons utiliser des variables locales, suffit donc de cliquer sur le canevas, et lorsque vous cliquez dessus, vous verrez du texte appelé variables locales ici, cliquez sur cette icône. Et dans Figma, nous avons cette nouvelle fonctionnalité variable, qui est actuellement en mode. Utilisons donc cette fonctionnalité variable et ajoutons une action à cette corbeille. Tout d'abord, je vais cliquer ici et cliquer sur Créer une collection. Ici, je vais définir le nom de la collection en tant qu'articles du panier. Ensuite, je vais cliquer sur Créer une variable. Et nous avons quatre types de variables. Dans ces quatre types, nous sélectionnons le type booléen ici Je vais renommer ce texte en C. Ajoutons le nom complet pour qu'il soit plus facile à comprendre Ajoutons-le comme ça. Nous diminuons la taille de cette variable , l'affichons puis créons la suivante. Je vais en créer deux autres comme celui-ci. D'accord ? Passons ensuite à ces noms, et je définirai la valeur comme vraie. OK, maintenant nous avons créé des variables. Si nous cliquons sur le canevas et vérifions les variables condocales, nous pouvons voir une Nous allons maintenant définir ces variables sur les éléments de la carte. Ici, nous avons le premier, il suffit de cliquer dessus. Et dans cette section de couche, si nous cliquons dessus et que nous la fermons, la section sera fermée. Cette fonction devrait se produire lorsque nous cliquons sur cette icône de corbeille. Pour cela, je vais cliquer avec le bouton droit de la souris sur cette icône. Lorsque je clique avec le bouton droit de la souris, je vois les quatre variables que j'ai créées. Attribuez simplement ces quatre variables. C'est pour le premier. Ensuite, je clique sur le deuxième élément et je fais un clic droit, puis c'est Blueberry Fpin Et faisons le reste de l' article comme ceci. OK, maintenant ce que je vais faire, c'est passer à Prototype. Ensuite, j'appuie sur commande et je sélectionne cette icône de corbeille. Ensuite, je peux le voir, mais n'ai pas simplement sélectionné cette corbeille. Maintenant, je clique sur cette icône plus en interaction. Ici, je vais sélectionner l'action au toucher, et je vais modifier cette option pour définir une variable. Pour utiliser cette fonctionnalité, nous devons sélectionner une équipe Res, cliquer sur Choisir l'équipe actuellement, cocher le projet d'équipe et cliquer sur Plus. Nous ne pouvons donc pas le faire en mode graphique, c'est pourquoi nous devons l'envoyer à l'équipe. Alors, déplaçons-le, d'accord. Maintenant, je clique sur None puis sur Set Variable. Ici, je vais définir la variable comme la première et la valeur sera fausse. Et faisons-le pour le reste du bouton. Cliquez sur la corbeille, puis sur Interactions. Et l'action est à portée de main. Remplacez cette variable non par une variable définie et c'est de la morphine bleue. Cliquez dessus, définissez la valeur booléenne sur false. passons à la suivante. Passons à la suivante et cliquons sur la ligne de trajectoire. C'est le dernier. OK, maintenant ça devrait fonctionner. Voyons donc si cela fonctionne ou non. Maintenant, je suis sur ma carte. Allons à la maison. Passons à la carte. Et sur cette carte, il suffit de cliquer sur ce bouton de blocage et il a tout simplement disparu. Alors, cliquons sur celui-ci. Elle a disparu. Qu'en est-il de celui-ci ? Ainsi, nous pouvons ajouter des fonctionnalités au bouton de suppression de la carte. Revenons donc à la page d'accueil. Passons donc aux options et montrons le côté gauche, et essayons à nouveau. Cliquez comme ceci et il sera simplement supprimé. Il s'agit donc également d'une fonctionnalité avancée. Nous pouvons supprimer ce contenu lorsque nous pouvons le modifier lorsque nous cliquons sur le bouton corbeille. Dans les prochaines leçons, je vous montrerai comment procéder. En attendant, essayez de jouer avec le Fikma et découvrez de nouvelles fonctionnalités comme celle-ci Fema est donc un outil vraiment puissant qui, à l'avenir, vous aidera à devenir un concepteur UF à succès 56. Projet de classe: Bonjour à tous. C'est la fin, et merci d'être restée avec moi. Vous avez donc une mission. Permettez-moi de l'expliquer jusqu'à présent. Nous créons des marquages haute fidélité et les convertissons en un prototype haute fidélité Votre mission est donc de créer trois pages. Ces pages sont ma page de commande et ma page de suivi des commandes. Enfin, vous devez créer un menu pour cette application. Après avoir créé ces trois conceptions d'interface utilisateur, vous devez les convertir en prototype. ce projet, lorsque vous concevez la page de suivi des commandes, lorsque vous cliquez sur ce bouton de suivi des commandes, votre page de suivi des commandes doit apparaître. Lorsque vous cliquez sur ce menu de hamburgers votre menu devrait apparaître J'espère que vous apprécierez ce cours et que vous obtiendrez informations précieuses qui vous aideront pour votre transporteur américain. Encore une fois, merci d' avoir consulté ce cours et je vous verrai dans un autre cours.