Wireframes et prototypage de conception UI/UX : guide pour débutants

1. Les bases de la création de prototypes et de câbles pour l'expérience utilisateur: Bienvenue à tous dans le cours de partage de compétences sur les principes fondamentaux de la création de modèles filaires et de prototypes pour l'expérience utilisateur m'appelle Cancer et je suis une designer UI UX avec plus de trois ans d'expérience. Je suis passionné par le design d'expérience utilisateur et je suis ravi de partager mes connaissances avec vous Dans ce cours, nous allons commencer par apprendre les bases des wireframes et Ensuite, nous concevrons des cadres métalliques pour les applications populaires afin de nous faire une idée du processus. Ensuite, nous allons construire le cadre métallique à partir de zéro pour une livraison de nourriture. Nous utiliserons cette application comme étude de cas pour apprendre à appliquer les principes du design américain. Enfin, nous allons convertir nos cadres métalliques en un prototype. Cela nous permettra de tester nos conceptions auprès des utilisateurs et d'obtenir des commentaires. Nous allons utiliser Pigma pour construire les wireframes et les Ne vous inquiétez pas si vous n'avez jamais construit cadre métallique auparavant ou si vous n'utilisez jamais Pigma Nous partirons de zéro et je suis là pour vous guider à chaque étape. À la fin de ce cours, vous aurez une solide compréhension des poussettes et des prototypes Vous serez également en mesure de concevoir et fabriquer des cadres métalliques et des phototypes pour vos propres projets. Tu es excitée ? J'ai hâte de te voir au premier cours. 2. Introduction aux wireframes: Les cadres métalliques sont des croquis peu fidèles d'un site Web ou d'une application. Ils n'ont ni couleurs ni design juste la structure de base de l'interface. Cela les rend faciles et rapides à créer. Il permet aux concepteurs de se concentrer sur l'expérience utilisateur sans s'enliser dans les détails Les cadres métalliques sont utilisés pour communiquer des idées aux autres membres de l'équipe, tels que les développeurs et les parties prenantes. Ils peuvent également être utilisés pour tester différents modèles avec les utilisateurs et obtenir des commentaires. Cela permet de s'assurer que le design final est convivial et répond aux besoins de l'utilisateur. Voici quelques exemples de la façon dont cadres métalliques peuvent être utilisés pour résoudre des problèmes. Quatre personnes, le site Web d' un nouveau restaurant peut utiliser du fil. Boutique Pm. Montrez comment les hommes seront organisés, où les coordonnées seront affichées et comment les utilisateurs peuvent commander la nourriture. Une application pour une épicerie peut utiliser des trames filaires pour montrer aux utilisateurs comment parcourir l'inventaire du magasin, ajouter des articles à leurs cartes, et le site Web d'une agence de voyages peut utiliser des structures filaires pour peut utiliser des structures filaires pour montrer comment les utilisateurs peuvent rechercher des vols, des hôtels, des voitures de location et réserver leurs arrangements de voyage Dans chacun de ces exemples, les cadres filaires permettent aux concepteurs de se concentrer sur l'expérience utilisateur et de s'assurer que l'interface est facile à utiliser et à comprendre. Cela peut contribuer à améliorer l' expérience client globale et augmenter les chances que les gens utilisent le produit. Les wireframes sont un outil précieux pour les concepteurs. Ils peuvent contribuer à économiser du temps et de l'argent, améliorer la communication et à essayer différents designs avec les utilisateurs. Dans la prochaine vidéo, nous allons présenter les phototypes et apprendre la différence entre les types de photos et les wireframes 3. Introduction au prototype et aux différences entre le wireframe et le prototype: La principale différence entre un modèle filaire et un prototype basse fidélité réside dans l'interactivité wireframes sont esthétiques, tandis que prototypes basse fidélité sont interactifs Cela signifie que les utilisateurs peuvent cliquer sur différents éléments du prototype basse fidélité pour voir comment ils fonctionnent. Ceci est important pour tester l'utilisabilité d'un design, car cela permet aux utilisateurs d'interagir avec l'interface et de fournir des commentaires sur son fonctionnement. Voici un exemple de prototype basse fidélité. Un designer crée un nouveau site Web pour un restaurant. Ils ont créé le prototype basse fidélité du site Web en utilisant des formes et du texte de base pour représenter les différents éléments de l'interface. Le prototype inclut la page d'accueil, la page de menu et la page de contact. Le concepteur partage le prototype basse fidélité avec certains utilisateurs et leur demande de le tester. Les utilisateurs fournissent des commentaires sur l'utilisabilité du site Web. Le concepteur utilise les commentaires pour améliorer la conception du site Web. Prototypes peu fidèles, un outil précieux pour les concepteurs. Ils peuvent être utilisés pour tester l'utilisabilité de l'idée de conception au début du processus de conception et pour recueillir commentaires des utilisateurs et des parties prenantes. Cela peut contribuer à améliorer la conception du produit final et à garantir sa convivialité. 4. 04 Introduction à Figma: Dans cette leçon, nous allons créer un compte Figma et nous familiariser avec l'outil Figma Si vous avez déjà créé un compte sur Figma, vous pouvez sauter cette leçon Commençons par le faire. Cliquez sur Obtenir Figma gratuitement. Lien vers la description, et vous serez redirigé vers cette page. Sur cette page, cliquez sur le bouton Commencer. Cliquez sur ce bouton bleu Commencer gratuitement. Cliquez ensuite sur Continuer avec Google et inscrivez-vous avec votre e-mail. Après votre inscription, vous recevrez un e-mail de confirmation dans votre boîte e-mail. Terminez le processus de confirmation et vous êtes prêt à partir. J'ai déjà un compte Figma. Je vais l'ouvrir. OK, maintenant je suis sur mon compte Figma. Je vais donc cliquer sur le bouton de ce fichier de conception. Ensuite, je passe à l'outil Figma. premier temps, je vais cliquer ici et renommer ce fichier de design Fima Je vais le renommer Wire Frame. Ensuite, sur le côté gauche, nous avons des outils tels que des cadres et des formes mobiles, stylo et un crayon, du texte et des outils que nous pouvons utiliser pour concevoir des prototypes et des cadres métalliques. Dans votre panneau de droite, vous verrez le panneau Properties Fane Prototype Dans un premier temps, je vais créer un cadre. Pour cela, je vais cliquer sur cette icône Pm. Ici, je peux voir les tailles prédéfinies. Si vous souhaitez concevoir un site Web, vous pouvez sélectionner la taille sur le bureau de la version. Ou si vous souhaitez créer un laboratoire mobile, vous pouvez sélectionner la taille du téléphone. Dans ce cas, sélectionnons le modèle de taille du téléphone. Pour ce faire, je clique sur cette taille de téléphone et sélectionne un cadre appelé Android Small. Voici donc notre cadre, et nous pouvons le renommer comme nous le voulons Je vais juste faire en sorte que ce soit comme à la maison, puis ici, nous pouvons changer la hauteur du wen, nous pouvons ajouter des coins et nous pouvons faire bien d'autres choses. Dans le processus de conception du cadre métallique, je vais passer en revue toutes ces options. Pour l'instant, je vais juste créer quelques formes. Je clique sur la petite icône en forme de flèche dans l'outil Forme et je sélectionne une forme rectangulaire. Et appuyez sur Shift pour créer un rectangle. Faisons un 200 et c'est 200, puis je vais le placer au centre. Ensuite, je vais cliquer ici et cliquer sur Line. Ensuite, j'appuierai sur Ctrl et zoomerai à l'aide de la molette de la souris. Ensuite, je vais cliquer ici et appuyer sur Shift. Faites ensuite glisser la ligne jusqu'ici et déposez-la comme ceci. Ensuite, je vais également cliquer sur la ligne, cliquer sur Shift, puis cliquer ici. Ensuite, essuyez-le comme je l'ai fait auparavant. Et voici un design simple que nous créons. Je vais maintenant sélectionner ces deux lignes sur le trait. Je vais lancer le coup deux, d'accord ? Il s'agit d'une simple forme de cadre métallique qui représente l' image de notre design. 5. Créer le premier wireframe pour l'application Gmail: Bonjour à tous. Il est temps de créer notre premier cadre métallique. Le moyen le plus simple de créer et de pratiquer des cadres filaires consiste imiter l'interface d'une application ou d'un site Web Nous pouvons obtenir une capture d'écran des applications, site Web et concevoir des cadres pour cette interface. J'ai déjà quatre interfaces d' applications. Je vais simplement les faire glisser et les déposer sur le Sigma. Il s'agit de l'interface de l'application Gmail, de l'interface application Youtube Studio et de l'interface de l'application Instagram Voici ensuite l'interface de l'application liée. Commençons par cette interface d'application de messagerie. Je vais juste le faire glisser ici et je vais l'ouvrir comme ça. Vous pouvez trouver cette conception d'interface dans la section des ressources de la classe. Je vais maintenant créer un cadre. Il suffit de cliquer ici. Je vais maintenant sélectionner l'Android Large Size ici. Tu le vois ? Ensuite, je diminuerai la taille de ce mail. Intermédiaire. Cliquez simplement sur le coin et appuyez sur Shift. Ensuite, vous pouvez réduire la taille sans affecter le design. OK, et maintenant je vais renommer ce cadre en App Wire Frame. D'accord, nous devons maintenant ajouter une grille de mise en page à ce cadre car il sera facile de guider la mise en page et d' ajouter notre composant. Pour ce faire, je vais cliquer sur le cadre puis sur Grille de mise en page. Cliquez simplement sur ce signe plus, puis cliquez ici pour accéder à la colonne. Et je ferai en sorte que les colonnes comptent pour quatre et que le caniveau soit dix De plus, j'ajouterai une marge de dix à ce cadre. OK, maintenant nous pouvons guider ces lignes et créer le design. Je vais augmenter le design comme ça. Et commençons à concevoir le cadre métallique. premier temps, je clique sur le triangle et je crée un triangle comme celui-ci. Parce que nous allons créer cette barre de recherche avec ce menu de hamburgers. Alors nous avons déjà la couleur cendrée et je vais la garder. Il s'agit d'un cadre filaire basse fidélité, nous n'avons donc pas besoin de modifier les coins ou d'ajouter un graphique à ce cadre métallique Il suffit de créer la structure de base du laboratoire de messagerie. C'est le champ de texte, je vais cliquer ici et cliquer sur Ellipse. Ensuite, j'appuie sur Shift et je crée une ellipse comme celle-ci. Je vais faire 30 x 30, il suffit de modifier la taille en cliquant sur le bouton gauche de la souris et de changer la taille. Ensuite, je vais changer de couleur pour aimer cette couleur. Et apportez-le ici comme ça. Il s'agit d'une icône d'utilisateur. Je vais le faire comme un utilisateur. Pour cela, je clique sur l'ellipse et je crée une autre ellipse comme celle-ci Il s'agit de la tête de l'utilisateur. Je vais augmenter en appuyant sur commande et en utilisant la molette de la souris. Il s'agit donc de la tête de l'avatar de l'utilisateur. Je vais créer, créons une forme de polygone et créons un rectangle comme celui-ci Ensuite, je réduirai les angles. Je vais aller ici, et je vais réduire les virages jusqu'à la troisième ligne. OK, allons-le un peu plus grand comme ça. OK. Voici les deux formes de l' avatar de l'utilisateur en fonction du rythme et du décalage Et allez au centre de la ligne horizontale. Et cliquez dessus. C'est déjà centré comme ça. OK. Il s'agit de l'icône de l'utilisateur. Ensuite, nous avons le menu des hamburgers. Je vais donc aller ici et cliquer sur la ligne. Cliquez ensuite sur le Shift et créez le menu hamburger comme ceci Si je n'ai pas sélectionné le décalage, la ligne ne sera pas horizontale, je dois donc sélectionner le décalage. Et d'accord. Ensuite, je vais augmenter le trait, sélectionner la ligne et ajouter un trait pour, d'accord, augmenter la taille du dessin. Appuyez ensuite sur les dix, cliquez sur la ligne et aimez ça. Faisons comme ça et sélectionnons toutes ces lignes en cliquant sur Shift, puis en cliquant sur le bouton gauche de la souris. Et cliquez sur l'option Plus. Et cliquez sur Répartir l'espacement vertical. OK, maintenant c'est centré verticalement. Et maintenant, nous avons le menu des hamburgers, et nous avons l'icône de l'avatar Il faut maintenant ajouter ce texte. Nous pouvons ajouter ce texte en ajoutant simplement un rectangle comme celui-ci et en ajoutant des couleurs. Ajoutons la même couleur. Cliquez simplement sur cette icône et cliquez ici. Ce sera ce texte. Ou je peux simplement taper une recherche dans le courrier. Je vais ajouter la recherche dans le courrier ici. Ce sera plus détaillé. Cliquez sur ce texte, je le peux, et cliquez ici. Ajoutez ensuite la recherche dans le courrier. OK. Maintenant, je vais le faire glisser et le déposer ici. Cliquez sur le texte, puis sur le texte Feel. Faites-en ensuite une ligne, un centre vertical. Si je le souhaite, je peux changer le téléphone et la taille du téléphone, mais c'est bon pour moi. Et maintenant je vais ajouter ce deuxième texte. Je clique donc ici et je clique sur Ancien. Ensuite, je clique sur le bouton gauche de la souris et je clique sur Dublized. Ensuite, je le mettrai ici et je clique sur Ancien puis sur ce champ de texte. Et je vais faire en sorte que l'espace soit 15. Alors je vais faire ces deux-là. Et faisons-le en gras, faisons-le en demi-gras Nous pouvons maintenant ajouter cet e-mail. Pour cela, je vais cliquer sur E et créer une Elise comme celle-ci Ensuite, je vais créer un rectangle. Ce sera le titre de l'e-mail que je vais envoyer. Cliquez ici et cliquez sur l'Ava. Je vais utiliser cette couleur. Alors j'irai en haut. Je vais donc dupliquer ce triangle et le régler en hauteur pour l'agrandir ainsi et le remplacer par deux. Ensuite, nous pouvons ajouter une autre ligne. Soulignons les deux et faisons-en dix. Maintenant, je vais sélectionner tous ces textes et les résumer comme ceci. Ensuite, à ce moment-là, je dois simplement en copier un et le coller. Alors fais-le, ce rectangle est hors du cadre. Je vais donc cliquer sur le rectangle et le ramener dans le cadre, le placer au centre. Ensuite, nous avons cette Staletta 15, 15 Changez la couleur en couleur. OK, maintenant je vais surligner ou sélectionner toutes ces formes et appuyer sur Commande pour que cela devienne un groupe. Ensuite, j'appuierai sur tous les dragons Dubliatedy comme ça. Je vais en espacer 20. Faisons en sorte que l'espace soit 20. Et je souligne trois de ces composants et je le fais ainsi je pense que nous pouvons ajouter de l'espace. Ajoutons 30. Ensuite, je vais mettre en évidence ces trois éléments et les dupliquer comme ceci. OK, maintenant je vais supprimer celui-ci. Ensuite, nous avons un pied de page. Faisons un pied de page. Cliquez sur Rectangle et créez un rectangle comme celui-ci. Je vais ajouter les 40, nous allons en faire 50. OK. Et maintenant, nous avons ces deux icônes. Ajoutons simplement un porte-visage. Celui-ci sera là. Et changez la couleur en bleu foncé. Et il suffit de le dupliquer. OK. Nous avons ici le télégramme basse fidélité. Priez. Maintenant, dans la vidéo suivante, nous allons en créer une un un peu complexe. Nous allons le créer pour Youtube Studio. 6. 06 deuxième wireframe: Bien, nous allons maintenant créer le wireframe pour Youtube Studio. Je vais récupérer cette interface Youtube Studio ici, puis cliquer sur le cadre et sur Android Small. Réduisez ensuite la taille de cette interface. OK, alors renommez le cadre en cadre YT Studio Wire. Ensuite, j'ajouterai la mise en page du grete. Il suffit de cliquer ici et de cliquer sur les colonnes. Ensuite, la gouttière à quatre colonnes sera de dix et la marge de dix OK, maintenant créons la première partie comme la première, nous avons le logo du studio Youtube, puis nous avons ce bouton de téléchargement et enfin le logo de l'utilisateur. Cliquons ici. Créons un rectangle comme celui-ci. Je vais en faire 60, puis j'ajouterai Text Studio. Ensuite, remplacez le téléphone par un verrou et augmentez la taille du téléphone comme ceci, placez-le au centre. Cliquez ensuite sur l' icône Elipse comme celle-ci. Faisons en sorte que ce soit 20 par 20. Passons à la couleur foncée car nous avons une autre icône. Ensuite, nous avons l'icône du profil. Je vais cliquer sur tous ceux qui se trouvent sur le rack ici comme ceci. Je vais créer un avatar. Pour cela, je vais augmenter la taille et cliquer ici. Créez ensuite les petites lèvres comme ceci. Puis une forme de rectangle. Et créez ensuite un rectangle à certains coins comme celui-ci. OK, allons-le un peu plus grand. Ce n'est pas le centre. Essaie de le centraliser autant que possible. OK. Ensuite, nous avons le nom de cette chaîne compte d'abonné et le logo de la chaîne. Créons d'abord le logo de la chaîne. Créons comme ça, puis cliquez sur le triangle et voici le titre de la chaîne. Cliquez ensuite sur le texte et ajoutez l'abonné calcule comme 10 000. Allons-le un peu plus Ensuite, nous avons un petit texte sur le nombre total d'abonnés. Mettons-le en évidence, rendons le texte à moyen et diminuons la taille du texte. OK, soulignons les trois objets. Et cliquez sur Commande. Cliquez ici, puis cliquez sur une ligne verticale. OK, maintenant la deuxième partie est terminée, et maintenant nous avons la troisième partie. Pour le créer, je vais cliquer sur le texte, ou je peux simplement le copier à partir d'ici. Je vais juste survoler ce texte cliquer sur le texte et le coller ici. Faisons le test le plus élevé de 20, fixons la taille à moyenne et réduisons la taille de la police. Faisons-le en semi-planche. OK, alors le texte sera Channel Analytics. Ensuite, nous avons deux cases, nous avons du texte ici. Bloguons ce texte en cliquant dessus et en le faisant glisser. Si vous maintenez le bouton enfoncé, le texte sera 28 dernier et le surlignera. Diminuez la taille du support de texte. OK, et mettez-le ici. Cliquez ensuite sur le texte et placez-le verticalement au centre de la ligne. OK, maintenant nous avons deux cases pour créer un triangle comme celui-ci. Faisons en sorte que la taille soit 125 x 60. Le texte sera. Mettons-le ici. Le texte sera, je vais dupliquer ce texte. Passons au 635 et soulignons-le. Ensuite, nous devons augmenter la taille, 16. OK, et ça, souris 50. OK, dupliquez ceci et mettez-le ici comme ça. OK. Mettez ensuite en surbrillance toutes ces sections. Et appuyez sur la commande G pour le regrouper. Puis dupliquez en appuyant sur les dix, le faisant déchaîner vers la droite Ensuite, ce test sera remplacé par l'heure de visionnage. D'accord, si nous voulons, nous pouvons simplement ajouter ces symboles. Nous pouvons cliquer sur la flèche et l'augmenter, puis l'ajouter comme ceci. Et nous pouvons ajuster la flèche comme bon nous semble. Fais-le comme ça. Je crois que Dublgatetre peut le faire en moyenne fidélité, mais une faible fidélité suffit pour se faire une idée du design Nous avons oublié d'ajouter le logo de l' avatar ici. Je vais cliquer ici , changer la couleur et ajouter le logo de l'avatar. Nous pouvons également ajouter un logo d'avatar comme celui-ci. Il suffit d'appuyer sur l'ellipse et de créer la partie principale. Cliquez ensuite sur la ligne comme celle-ci, puis changez de couleur. Augmentons le trait, mettons-le au centre. Cliquez ensuite à nouveau sur la ligne à côté de la main. Dupliquez la main comme ceci. C'est un autre type d'Avada. OK, nous avons maintenant cette dernière section de contenu publié. Cliquons ici et dupliquons. Faisons en sorte que 20 contenus soient publiés. C'est bon. Créez ensuite une boîte. Créez un rectangle comme celui-ci. Et la taille sera de 340 x 160. Nous avons maintenant la miniature de la vidéo et l'URL de la vidéo. Ensuite, le temps de créer la vidéo, je changerai de couleur pour cette couleur. Changeons la couleur comme ceci. Cliquez ensuite ici et les images sur deux lignes sont toujours affichées sous forme d'image sous forme de boîte et de croix comme celle-ci. Ensuite, nous avons le texte. Pour créer du texte, je peux utiliser des lignes. Cliquez ici et voici le titre. Ensuite, je vais augmenter la taille à E T. Réduisons la couleur à cette couleur. Ensuite, nous avons le second, le deuxième texte le sera, il est plus petit et il ressemblera à ceci. Ensuite, nous avons une ligne comme celle-ci. Je vais réduire la couleur à une couleur claire. Bon, maintenant nous avons les petites icônes. Ajoutons ces icônes. Créez simplement l' ellipse comme suit et remplacez la couleur des lèvres par cette couleur. OK ? Ensuite, nous avons un texte. Je vais dupliquer le texte à partir d'ici. Ensuite, je dois le déplacer vers l'avant du cadre et il y en aura six. Alors un, faisons-en deux, faisons semblant. 21, 61, 60. OK, super. Et maintenant, nous avons ces autres textes. Ajoutons donc ces textes. Je vais donc copier le texte et le coller ici. Je vais rapidement ajouter ces textes. Je vais maintenant ajouter ces textes comme ceux-ci. OK, centrons-le verticalement toutes ces icônes et faisons-en une ligne, non ? OK, maintenant nous avons la boîte. Créons cette boîte comme celle-ci. Ensuite, je rendrai obligatoire ce contenu. Je peux obliger tout ce contenu et l'ajouter ici. Vous pouvez faire de même ou le créer à partir de zéro. Je vais mettre en évidence tout ce contenu et le coller ici, puis le faire comme ça. OK, disons-le comme ça comme ça et bien, où. OK, sympa. Maintenant, nous devons ajouter la partie bouton pour ce faire, je vais juste augmenter un peu le design comme ceci. Lorsque je l'augmente, il me suffit de cliquer sur la commande, de cliquer sur le coin augmenter l'équipage. Nous avons des liens ou des boutons qui forment une ellipse. C'est le N. Passons à cette couleur et dupliquons ce texte ici. Ensuite, sur le tableau de bord textuel, surlignons-le et réduisons-le un peu. Fais-en une taille de neuf. OK, pour dupliquer le texte, nous devons le dupliquer quatre fois 1234, d'accord ? Et le prochain sera content. Et le suivant prend les derniers commentaires, pas les derniers. Le quatrième commentaire et le cinquième surlignent comme ça. Et il appuie également sur Commande par. Retrouvez-le dans le composant. Nous pouvons donc le regrouper, le placer au centre, appuyer sur Commande, appuyer sur Centre de commande. Ensuite, je vais le faire, oui, je vais cliquer sur tous ces contenus et cliquer ici. Et cliquez sur Répartir, espacement horizontal. Cela ressemblera à ça. Voici le cadre métallique final. Dans la prochaine vidéo, nous allons le créer pour Instagram. 7. 07 Troisième wireframe: D'accord, nous allons maintenant concevoir un cadre filaire basse fidélité pour Instagram. J'y ajouterai un modèle Instagram. Ensuite, je vais créer un cadre. Je vais sélectionner la masse de proies, Android Small, le créer. Ensuite, je changerai le nom en Instagram. OK, maintenant je vais ajouter la grille de mise en page. La grille de mise en page sera colonnes et nous ajouterons quatre colonnes, puis dix. Et nous allons ajouter la marge sous forme de dix. OK, maintenant je vais créer un triangle comme celui-ci. Ça porte le score à 50. Ensuite, je vais donner un bref contexte, je peux ajouter le texte. Ce texte le sera, mettez-le en gras. OK, cette partie est terminée. Créons maintenant ces trois icônes ou ces trois boutons. Nous pouvons donc simplement ajouter des feuilles pour créer ces icônes. Changera la couleur en gris foncé clair. Lubrifiez-le comme ça. OK, une liste de ces trois alors apportez-la ici. OK, maintenant nous devons créer ces quatre icônes AT. Créons la forme des lèvres, puis créons une ellipse comme celle-ci Passons à 80,80, d'accord. Alors fais-le ici. Passons à dix, allons-y. D'accord. Ensuite, je vais simplement ajouter une lèvre qui représente la tête de l'utilisateur et créer un polygone Faisons comme ça et changeons la couleur. Blanc et dans un coin comme celui-ci. Agrandissons-le un peu. Je peux créer une autre ellipse, elle sera un peu plus grande comme ça Changeons sa couleur en blanc. Il y a de nombreuses façons pour cela que je peux aimer ça. D'accord. Ensuite, Dubois, avant de le dupliquer, je le surlignerai avant, puis je le doublerai comme ça D'accord. Quelque chose ne va pas. C'est un peu plus grand. Réduisons-le comme ça, tout cela et alignons-le correctement. Ensuite, je vais simplement créer un triangle et un triangle comme celui-ci. Ce seront les noms d'utilisateur d' Instagram partout ici. J'ajouterai du texte sous forme d'histoire, d' histoire, je le surlignerai, puis je le créerai. Normal et radio, la taille du téléphone à 14, 14 est préférable. Mettons-le ici. Je vais aligner ce texte sur le texte de l'histoire. Surlignez tous ces textes. Et il suffit de cliquer ici et d'aligner correctement. OK, alors nous devons créer cette partie. Pour ce faire, il me suffit de cliquer ici et de cliquer sur Line. Appuyez ensuite sur Shift et créez une ligne comme celle-ci. C'est la ligne que j'ai créée. Nous avons maintenant le Low et le nom. Cliquons sur l'un de ces utilisateurs et appuyons sur les dix. Taillez-le comme ça. Maintenant, je vais le réduire. Alignons-le ici. D'accord. Et maintenant, dupliquez cela en faisant face aux dix. Cliquez sur le bouton gauche de la souris, et voici le nom de l'abonné Instagram Ensuite, nous avons l'image pour créer une image, orienter l'angle et créer une image comme celle-ci. Faisons en sorte que ce soit 60. Cliquez maintenant sur la ligne et créez une ligne comme celle-ci. s'agit juste d'une faible fidélité, nous pouvons faire des tests d'utilisabilité avec ces États-Unis, il suffit de convertir ces cadres métalliques en prototypes. Après avoir pratiqué cela, nous concevrons des cadres métalliques pour notre propre application. Ensuite, nous le convertirons en prototype. OK, maintenant nous avons 123,44 boutons ou icônes ici. Et voici une icône. Cliquez sur ces trois icônes et dupliquez-les sur celle-ci D'accord ? D'accord. Maintenant c'est bon. Ensuite, il suffit d'obliger cette ligne de texte et ce sera le décompte et ce sera la date En fait, si nous le voulons, nous pouvons simplement ajouter du texte, mais pour l'instant, je vais simplement ajouter ces deux lignes comme ceci. Ensuite, nous avons ceci ci-dessous que je peux définir Créons-le simplement augmenter la taille de l'interface. Cliquez ensuite ici, puis sur Conectan. Créez un rectangle comme celui-ci. Et cette partie est facile. Copions ces quatre éléments et mettons-les ici. Ensuite, je l' enverrai ci-dessus sur Instagram via un cadre. Nous avons maintenant cinq articles. Je vais rendre celui-ci obligatoire, puis je l'enverrai ici Et je vais également l'envoyer à Corner, sélectionner tous ces articles, puis cliquer ici. Cliquez ensuite sur Répartir l'espacement horizontal. Cela ressemblera à ça. Et maintenant, nous avons réussi à créer le cadre filaire Instagram. OK, nous créons trois cadres métalliques. Maintenant c'est ton tour. Il suffit de le créer. Dans la prochaine vidéo, je vais vous montrer comment le créer. 8. 08 4e wireframe: OK, nous allons maintenant créer un cadre métallique pour Linked In. J'espère que tu es prête. Créez le cadre métallique. Suivons l'étape. Je vais le mettre comme ici. Ensuite, je vais cliquer sur cadre et créer un petit cadre Android. OK, agrandissons-le un peu pour pouvoir comparer ces deux sections comme ceci. Très bien, alors je vais changer le nom en link in wire frame. Très bien, commençons d'abord par le design. Je vais simplement cliquer ici et cliquer sur Lives. Avant cela, nous devons y ajouter la mise en page. Pour ce faire, je clique sur le cadre puis sur le cycle plus. Cliquez ici, puis faites en sorte que le nombre de colonnes soit de quatre, soit dix, la marge soit de dix. En fait, nous pouvons enregistrer la mise en page. Si vous cliquez simplement sur les quatre points et que vous cliquez sur ce signe plus ou moins, vous obtiendrez la grille que nous avons créée. Je vais simplement lui donner le nom de grille et cliquer sur Créer un style. Si je crée un nouveau cadre, créons un nouveau cadre pour iPhone 8. Et si je veux ajouter la disposition en grille, il suffit de cliquer ici et de cliquer dessus pour ajouter quatre mises en page en grille. Figma dispose de fonctionnalités pour enregistrer les grilles, comme vous pouvez enregistrer les couleurs et d'autres étapes Commençons maintenant le design. Dans un premier temps, je vais cliquer sur l'ellipse et créer l'ellipse C'est pour cette icône d'avatar. Faisons en sorte que ce soit 40. 40 par 40. Et fais-en 22, eh bien. Portez bien 12 points. OK, faisons-le dix par dix. Très bien, il faut maintenant créer un rectangle. Ce rectangle est destiné à la barre de recherche, alors faisons-en une taille 30. Je vais simplement ajouter le texte appelé recherche. Ensuite, nous avons cette discussion, créez de petites lèvres comme celle-ci et ajoutez-les ici. OK, la première partie est terminée puis je vais créer une ligne ici. Ensuite, nous avons créé les informations de l' utilisateur. Laissez-nous le soin à Let's Create it, let's make it 50 x 50. Faisons en sorte que ce soit 70 x 70. D'accord. Cliquez ensuite sur une ligne et créez-en une. C'est le nom. Je vais en faire cinq. Faisons en sorte que ce soit huit. Il s'agit du nom de l' utilisateur qui l'a partagé en premier. Et nous avons le métier ou le titre du poste de l' utilisateur, donnez-le comme ça. Faisons-le aussi, et nous aurons le temps que cette personne partagera le premier. Faisons en sorte que ça se passe comme ça. OK, faites-le, appuyez simplement sur la touche pour le regrouper et envoyons-le. D'accord, nous avons maintenant la description de cet article. Je vais juste cliquer ici et lubrifier ça. Voici la description du. Je vais ajouter plus de détails comme celui-ci. Ensuite, nous avons cette grosse matière pour créer, créer, créer tout cela rapidement. Comme ça. Faisons en 340 x 340, d'accord. Créez ensuite une ligne comme celle-ci et créez-en une autre. OK, alors nous avons le nombre de commandes. Créez des lèvres plus petites comme ça. Ensuite, le nombre de commandes apparaîtra ici, 125. Ce n'est pas le compte qui compte, c'est le compte. D'accord. Ensuite, nous avons une ligne horizontale. Maintenant, nous avons un bouton et un bouton d'entrée. Créons le bouton ici, 30 par 30. Ensuite, le texte a été appelé like et dupliqué en sélectionnant et en copiant Comme si. D'accord. Maintenant, nous avons le fond. Créons. Avant de le créer, je réduis simplement la taille. Pour ce faire, sélectionnez le cadre métallique, cliquez sur Commande et modifiez la taille du cadre métallique, puis créez le menu Ensuite, nous avons 12345 articles. Je vais juste obliger l'un d'entre eux et le placer au centre, changer la couleur en gris foncé Ensuite, je copierai également le texte et l'enverrai ci-dessus. Définissez ensuite le texte comme page d'accueil. OK, alors pour obtenir ce groupe en appuyant sur commande, restons dans la taille de la police. D'accord ? Faites-leur centrer l'espacement horizontal de distribution. OK, voici donc le cadre métallique à faible consommation pour Linked In. Dans la leçon suivante, nous allons créer un cadre filaire pour l'application. 9. 09 introduction à la définition de wireframe pour une application: OK, il est maintenant temps de concevoir des cadres métalliques pour notre propre application. Nous allons concevoir une application de livraison de nourriture pour un café. ce faire, nous devons faire des recherches sur les utilisateurs et créer des personas Témoignages d'utilisateurs, mener des recherches sur les utilisateurs, faire preuve d'empathie envers les utilisateurs et auditer les concurrents afin de recueillir des informations pour concevoir notre application C'est un processus que nous devons suivre dans le cadre de l'UX design. Mais ici, nous nous concentrons uniquement sur la conception de cadres métalliques. Je fais déjà l'analyse des concurrents. Et commençons à construire les poussettes. Je vais me connecter à mon compte Ima. Je vais maintenant cliquer sur le bouton bleu du fichier de conception et créer un nouveau projet. Ensuite, j'appellerai ce projet application de livraison de nourriture. Commençons par concevoir le fil Pm. Ensuite, nous convertirons ces poussettes en types de photos. Dans la vidéo suivante, commençons le design à partir de zéro. 10. Page d'accueil de build app conception !: Commencez par l'écran d'accueil, je cliquerai sur l'icône en forme de spray et je sélectionnerai Android Large Size. Je vais maintenant changer ce texte en page d'accueil. Ensuite, j'ajouterai une grille de mise en page. Cliquez ici, et notre grille sera une colonne. Ensuite, nous aurons quatre colonnes, gouttière et dix marge OK. Puis je clique ici pour enregistrer cette grille, ce style. Et cliquez ici sur le nom. Allons-y, d'accord. Je vais maintenant commencer par le menu. Cliquons sur Triangle, et nous aurons un menu de hamburgers. Ça fait trois, puis Dublicatese. Bonjour, j'en ai parlé. Et changez la couleur pour qu'elle soit plus foncée. Ensuite, je vais les regrouper. Je vais maintenant créer une icône utilisateur ici pour ce faire. Créez une ellipse. Créons ensuite un avatar, créons une autre ellipse. Et Shift, ce sera la tête. Passons au blanc et doublons-le en appuyant sur le vieux dix, en faisant glisser un peu en dessous, puis en l'agrandissant OK, maintenant nous avons un peu plus gros. Je vais maintenant créer une barre de surtension ici, car nous avons besoin d'une barre de surtension pour rechercher des aliments dans les cafés. De cette façon, nous serons en mesure de trouver la meilleure nourriture. Alors je ferai des corners radio, j'en ferai cinq, d'accord ? Et cliquez ici. Cliquez ensuite sur Elipslipsn. Changez de couleur pour cette couleur. En fait, ajoutez Only Eat Rock, cliquez ici et trois comme taille du trait est. Je crée simplement une icône de recherche. Ce seront les trois. Très bien, maintenant je vais le souligner. Et groupons-le. Je vais les regrouper, la première partie est terminée. Dans la prochaine partie, je vais créer une section pour la catégorie. Cliquez sur ce texte, cliquez ici, et ce test sera classé par catégories. J'espère que les mots sont corrects. Et faisons-le fonctionner. Si vous le souhaitez, vous pouvez modifier le texte, mais j'utiliserai le texte par défaut. C'est beaucoup plus tard. Utilisons le texte par défaut. OK. Maintenant, je vais créer la boîte quatre catégories, créer un rectangle comme celui-ci. Cliquez ensuite sur la ligne Créer une image. C'est une image. Je vais obliger ce texte et changer la taille à 11, ce sera moyen OK. Mets-le au centre. Ce texte sera une émission spéciale du jour. Promotions du jour, je vais souligner tout ce bruit. Et cela deviendra un groupe. Puis blibli à nouveau, Ubd encore une fois Ubd Ensuite, je vais tous les mettre en évidence et en faire une ligne centrée verticalement. OK, c'est un texto. Ce seront des boissons qui resteront des repas. D'accord, nos catégories sont terminées. Ensuite, je vais juste ici et modifier l'espacement. Ajoutez l'espacement sous forme de, puis j'ajouterai une section de pied grossier. Pour ce faire, obligez la partie de la catégorie et OK, on peut effacer ce texto. En fait, nous pouvons simplement écrire dans ce texte. Pour ce faire, cliquez sur la ligne et ce sera le titre du T. Ensuite, nous pouvons ajouter, obtenir celui-ci. Nous pouvons maintenant ajouter le prix. Je vais juste ajouter un dollar à. Ensuite, je dois regrouper correctement ces éléments. Groupe de chansons 8. OK. Comme nous pouvons ajouter des critiques par étoiles, ajoutons des critiques par étoiles. Créez simplement un, peut-être pouvons-nous utiliser un polygone pour créer un groupe Cela réduit les signes du noyau du champ en noir. Pour le moment, nous pouvons le dupliquer. Nous devons maintenant ajouter les aliments recommandés. Il suffit de dupliquer celui-ci. D'accord, nous pouvons dupliquer la section populaire sur les aliments à ajouter. Ici, nous pouvons ajouter d'autres éléments, mais pour le moment, ajoutons-les. Maintenant, je vais cliquer sur le bouton de commande et modifier la taille du cadre. Ensuite, je vais ajouter le rectangle et créer une mousse ici. Je vais cliquer sur Rectangle et créer le bouton d'accueil, placer au centre en haut. Je vais ajouter le nom du texte de l'application. Je vais juste poser le pied à Smolt 20. Je vais le placer au centre. Chaque cadre doit avoir un nom, car lorsque nous créons ce type de photo, nous devons comprendre le cadre dans lequel nous nous trouvons. Je pense que c'est plus grand. Changeons la hauteur en OK. Ça a l'air bien. Je vais le réduire un peu comme ça. Nous devons maintenant ajouter ici. Je vais le dupliquer sur. Il s'agit d'une lacune en matière de livraison de nourriture. Nous devons avoir une carte. Créons une voiture. Créez un rectangle comme celui-ci. Changez-le en blanc , mettez-le au centre. Double-cliquez ici, puis double-cliquez également ici. OK. Maintenant, je vais cliquer sur Lives et ajouter les roues. Ensuite, nous pouvons ajouter le manche autour de celui-ci. Maintenant, pourquoi ? Eh bien, regroupez-le, mettez-le au centre, d'accord. Nous pouvons changer la couleur de fond. Si nous changeons la couleur d'arrière-plan en sombre comme ceci, nous pouvons clairement voir les icônes. OK, passons maintenant au deuxième point. Le deuxième élément sera page de recherche, page. Faisons-le. 11. 11 pages de recherche de conception pour créer une application: Il est maintenant temps de créer une page de recherche. Créons donc un cadre. Et ce sera Android Large Size. Changez le nom du cadre en Search Foods. OK, maintenant je vais cliquer ici sur la grille et classer la grille principale. Maintenant, nous pouvons simplement copier cette section ci-dessus depuis la page d'accueil. Je vais tous les mettre en évidence, appuyer sur tout et simplement les dupliquer comme ceci. Je vais maintenant changer le titre en Foods. OK. Ensuite, nous devons créer des aliments ici. Avant cela, je vais dupliquer ce texte et l'ajouter comme un hamburger, et le faire en sorte qu'il soit de taille moyenne. Et réduisez la taille du texte à 14. Et mettez-le ici, d'accord. Il s'agit du texte de recherche. Et maintenant, je vais ajouter le résultat du pied. Créons donc un rectangle comme celui-ci. Faisons 100. OK. Répartissez ensuite l'espacement horizontal Je vais maintenant cliquer ici et cliquer sur la ligne. Tracez ensuite une ligne comme celle-ci, et tracez une ligne comme celle-ci. OK ? Ensuite, je vais les mettre en évidence et les dupliquer. OK ? Maintenant, je vais ajouter le titre ici, les notes, puis le prix. Cliquons sur celui-ci. Ajoutons le titre. Je vais décaler et créer une ligne comme celle-ci. OK ? Augmentez la taille de la ligne. Changez ensuite la couleur comme suit et réduisez le coin ou arrondissez les coins. Ensuite, j'ajouterai le nombre d'étoiles. Je peux créer un classement par étoiles ou simplement le dupliquer depuis la page d'accueil. Je vais le dupliquer depuis la page d'accueil et le mettre ici. Augmentez ensuite la taille 310. Mettons le taux ici. Et le titre ira ici. Et augmenter la taille du titre Ici, on peut ajouter le prix. Cliquez simplement sur celui-ci et ajoutez 11,5 dollars . Réduisons le OK. Dis-le comme ça, mets-le au centre horizontal. OK, je vais simplement supprimer ces deux éléments et je peux regrouper cet élément, puis Dubligatedlet's Grouping appuyant sur Commande et en le OK, puis surlignez trois de ces groupes et cliquez sur Répartir l'espacement horizontal Maintenant, je vais juste dupliquer et répéter les éléments comme ceci. OK, il semble que notre page de recherche soit terminée. C'est bon. OK, ça a l'air bien. Dans la prochaine vidéo, nous allons créer la page produit unique pour présenter le produit ou mettre en valeur le pied. Avant cela, je vais mettre en évidence tout cela et vérifier la taille ici. Ici, je vais changer la taille à 20. OK. 12. 12 conceptions de conceptions de conceptions d'applications à une seule page d'aliments: La phase d'un seul pied. Pour cela, je vais créer un cadre créé sur Android en grande taille, puis ajouter le titre du cadre sous forme de pied. D'accord. Je vais maintenant copier cette partie principale. Seule la partie de la tête, il suffit de la mettre en évidence. Dix faces, toutes les dix dB en fait, avant de le faire, nous devons ajouter la grille. Ajoutons cette grille. OK, maintenant je vais ajouter une image de nourriture ici. Ce sera une galerie. Et nous aurons le titre de l'aliment et nous aurons des évaluations. Ensuite, nous aurons le prix. Après cela, nous aurons un bouton à ajouter. Nous aurons un petit champ de texte dans lequel nous pourrons sélectionner les comptes de hamburgers que nous voulons ajouter au panier. Faisons-le. Nous aurons des critiques et des descriptions. Commençons par le concevoir. Je vais d'abord créer un rectangle. Ce sera donc une image. Faisons en sorte que la hauteur soit 200 et la largeur 340. Créez la ligne. OK, nous allons maintenant avoir deux boutons pour changer la diapositive. Nous aurons quatre cercles pour changer l'image. Créons de petits cercles. Nous allons sélectionner cette couleur. Et ce sera six par six. D'accord ? Alors obligez. Obligez-le D'accord. Maintenant, sélectionnez-les tous, et placez-les au centre. OK, maintenant nous aurons deux boutons ici. Créons ces deux boutons, puis changeons la couleur en blanc et mettons-les ici. Peut-être que nous pouvons augmenter la taille. Dupliquons-le, surlignons-le et doublons l'image. doublons l'image. Créons ensuite le texte. Nous ajoutons ce type de texte car le texte sera modifié car lorsque vous sélectionnez le changement de pied, le titre de l'aliment sera modifié. C'est pourquoi nous n'allons pas créer un vrai titre comme ajouter un vrai nom de pied à ce pied. Nous allons maintenant avoir les avant-premières et le prix. On peut juste les récupérer d'ici. Il suffit de le sélectionner et de le télécharger ici. Indiquez le prix ici. Portons-le à 60. Augmenter la taille de l'avis, 15. Nous allons maintenant avoir un bouton. Il s'agira du bouton Ajouter au panier. Créons un rectangle et créons le bouton comme ceci. Nous aurons 40 ans, faisons 130. OK, maintenant je vais dupliquer ce texte en tant que voiture. Envoyons ce texte ici. Et changez la taille en moyenne et 60, ce sera 20. Sélectionnez le texte et le cadre, puis mettez-les au centre comme suit. Cliquez ensuite ici et nous devrons ajouter le nombre. Ce champ sera utilisé pour sélectionner le nombre de pieds que nous voulons ajouter aux cartes. Disons-le comme ça et dupliquez la presse sur l'un d'entre eux, revenez ici. Nous devons passer à l'avant. D'accord. Maintenant, cliquez ici et réduisez les coins à cinq. Et faites de même ici. OK, la première partie est terminée. Soulignez-le et portez-le à 15. D'accord, nous allons maintenant avoir la description. Ensuite, nous ferons en sorte que les critiques dupliquent celle-ci. Ce sera une description, ajoutons une description sous cette forme. Répliquons cela. Nous avons les deux coins arrondis. Nous ne sommes qu'au coin de la rue, alors faisons-le pour tous ces textes et faisons-le comme ça. Bien, notre description est terminée. Si nous le voulons, nous pouvons simplement ajouter d'autres éléments qui ne sont pas nécessaires. Il va maintenant falloir ajouter les aperçus. Cliquez ici et dupliquez celui-ci. Ce seront des critiques. OK, ajoutons une boîte de révision. Dupliquez cette boîte d'évaluation et mettez-la ici. Soulevez-le. Il va maintenant falloir ajouter un titre. Je vais juste dupliquer ce titre. Abordons-le comme ça et changeons la taille du titre. Faisons en sorte qu'il y en ait dix. Voici la description de l'avis. Diminuez la taille comme ceci. OK, c'est sympa. Ensuite, sur l'icône en forme d'arobase de la critique, changez de couleur pour créer un utilisateur comme celui-ci. Changez la couleur en blanc. Ce sera alors le nom de l'avis. Pour ce type d'application, nous n'avons besoin que du nom. Je vais regrouper le nom de ce centre ava, OK. Ensuite, je vais le mettre en évidence et appuyer sur la commande Ctrl pour le dupliquer. Voici la critique dupliquée. OK, maintenant je vais cliquer sur le cadre d'un pied, puis modifier la taille ou la hauteur du cadre comme suit. Et il faut ajouter cette partie inférieure. Je vais simplement le souligner et le dire comme si je voulais dubrow, nous n'avons qu'une page de bas de page. Dans la vidéo suivante, nous allons créer la page du panier. 13. Conception: La page de la carte. Je vais cliquer sur un cadre et sélectionner Android Large Size. Changez ensuite le nom du cadre en carte. Et copiez la première partie. D'accord, c'est une mise en page en grille 2. C'est bon. Maintenant, changez le texte de ma carte, puis mettez-le au centre. Bien, nous devons maintenant ajouter la liste des aliments que nous avons sélectionnée ou que l'utilisateur a sélectionnée. Cliquez ici, et ce sera l'image de la nourriture. Faisons un 60, puis créons une ligne. Nous aurons maintenant le titre et les frites, et nous aurons une pile de texte pour modifier le nombre d'articles de la nourriture. Créons le titre. Il va maintenant falloir ajouter les frites. Nous devrons ajouter la pilule textuelle au décompte des aliments. Puis dupliquez-le. Maintenant, la nourriture sélectionnée compte un utilisateur dont un utilisateur a besoin pour plus d'articles, il peut le faire en l'utilisant sur la ligne horizontale. Maintenant, je vais regrouper cela et nous sommes obligés. Je vais maintenant ajouter le sous-total et le nombre total de nourriture. Donc sous-total maintenant, oui, nous aurons la nourriture totale Nous allons mettre en évidence tous ces sous-totaux et les supprimer du groupe Maintenant, nous allons avoir le total. Faisons en sorte que ce soit audacieux. Ensuite, nous aurons un bouton pour passer à la caisse. Créons un rectangle et créons un bouton. Découvrez. Oh, ajoutons comme s'il vous plaît, commandez. Très bien, maintenant je vais ajouter l'élément de menu. Ajoutons-le ici. OK, voici la page de notre panier. 14. 14 conceptions de conception d'une application: OK, dans la dernière vidéo, nous avons quelques problèmes d'alignement, corrigeons-les. Sur une page de carte, cela devrait être une marge de cinq. Et maintenant, je vais mettre en évidence toutes ces sections et cela devrait être une marge. Je crois que c'est dix, c'est 220. Ajoutons qu'une marge de dix est égale à dix. accord, et ensuite, peut-être que nous pouvons diminuer la taille du cadre, mais c'est beau. OK, il est maintenant temps de créer la page de réussite de la commande. Créez un nouveau cadre et le nom du cadre sera Order Success. Ajoutons une mise en page en grille. OK, maintenant sur cette page nous n'avons pas besoin du bouton carte, de ce bouton avatar. Nous n'avons besoin que d'un bouton de retour. Créons un bouton de retour dans un premier temps, d'accord ? Et changez la couleur pour celle-ci, et elle sera blanche. OK, voici le bouton de retour. Et maintenant, nous avons un ancien message de réussite. Copions ce titre et faisons en sorte qu'il soit un succès. Créons maintenant un texte, placons-le au centre. Ajoutons du texte comme si vous aviez passé une commande avec succès. OK, faites-en un centre de ligne. Mettons-le de 1 à 80. D'accord. Je vais le dupliquer ainsi que le numéro de commande. Ajoutez ensuite le numéro de commande et faites-en sorte que la taille moyenne soit 14. D'accord. Nous aurons maintenant un bouton appelé suivre la commande. Vérifie la taille des boutons. C'est 40, faisons-en 40 et accord, mettons-le au centre. Très bien, envoyons ça au centre. Et maintenant je vais réduire la taille du cadre. Mets-le au centre comme ça. Ensuite, nous pouvons ajouter le cadre autour de ce contenu. Réduisons-le à 15. D'accord ? Et ce sera un large Et cliquez sur le cadre, en fait, nous pouvons créer ce cadre sous forme de fenêtre contextuelle. Pour ce faire, il sera plus beau, allons-y. Pour ce faire, je clique sur Rectangle et je crée un cadre comme celui-ci. Changez ensuite la couleur en blanc et renvoyez-la à l'envers. Réduisez ensuite les coins. Réduisons-le, réduisons-le à dix. Ensuite, je cliquerai sur ce cadre de réussite de commande et changerai la couleur pour une couleur plus foncée. Et apportez ce texte ici. Et sélectionnez le bouton Retour. Et le bouton Retour sera là, ou nous pouvons l'ajouter en tant que bouton de fermeture. Le bouton de retour sera là et il est plus beau que le look précédent. Dans la vidéo suivante, nous allons créer une fenêtre contextuelle sur ce bouton Ajouter au panier. 15. 15 conceptions de conceptions d'applications à créer ajouter au panier popup: OK, créons la nourriture ajoutée à la fenêtre contextuelle du panier. Pour ce faire, je vais cliquer sur le cadre et ce sera une fenêtre contextuelle, nous devons donc utiliser une taille personnalisée. Je vais juste cliquer ici et voici le cadre. Je vais renommer ce cadre en, définissons-le tel qu'il a été ajouté à sa fenêtre contextuelle OK, passons maintenant à 340 et ce sera également 340. Réduisons ensuite les coins à dix. OK, alors nous ajouterons un pied de texte aux cartes. Je vais donc simplement créer ce texte et le mettre ici, centrer correctement et cliquer ici. Ajoutons ensuite la mise en page. OK, alors ce pied sera ajouté à la carte Passons à 120. OK. Ensuite, nous devrons ajouter deux boutons, l'un pour afficher la carte et le suivant pour continuer les achats. Créons donc le panier à boutons de visualisation de la carte, qui sera de taille moyenne. OK, voici le bouton Afficher la carte. Et nous le ferons aussi, nous en avons deux dans les virages. Ensuite, je vais dupliquer ce bouton, et maintenant nous aurons le bouton Continuer les achats. OK, alors augmentez la taille du bouton, mettez-le au centre. OK, voici la fenêtre contextuelle. Et dans le prototype, nous l' ajouterons sous forme de fenêtre contextuelle lorsque quelqu'un ou un utilisateur cliquera sur ce bouton Ajouter au panier. D'accord, dans la vidéo suivante, nous allons convertir ces trames filaires basse fidélité en prototype. Rendez-vous dans la prochaine leçon. 16. 16 conceptions de conception à la conception d'une application avant de la conception: OK, faisons la dernière retouche avant convertir les cadres métalliques en types de photos. Si je le vérifie sur le mode actuel ou sur l'affichage mobile réel, cela ressemblera à ceci. Nous devons augmenter la taille du dessin. Pour cela, il me suffit cliquer sur le cadre et d' augmenter la taille. Ensuite, j'augmenterai la hauteur à 800. Ajoutons ce menu de bas de page comme ceci. Et vérifions le design. OK, ça a l'air parfait. Je vais donc faire de même, deux autres designs Dans un seul pied, je l'ajoute simplement comme pied de recherche. Cela devrait être d'un pied comme ça, et la fenêtre contextuelle est correcte. Nous devons maintenant prouver ces boutons car nous allons les utiliser ou les convertir en composants et créer le type de photo. Je vais voir le texte et la commande «   triangle and creek ». Nous allons le faire ici et nous le ferons pour le reste du bouton. OK, je dois aussi cliquer ici et cliquer sur l' élément de ce groupe, et ce n'est que l'élément image. Créez ensuite un groupe avec ces éléments, et nous le ferons pour ces quatre éléments. Et je vais vous montrer pourquoi je le fais dans la leçon prototype, je vais répéter le processus. OK, maintenant nous sommes prêts. Cliquons sur cet élément, puis sur Aperçu. Il sera prévisualisé comme ceci. Dans la vidéo suivante, nous créons le phototype. 17. 17 conceptions de conceptions à l'aide d'une application: D'accord, convertissons les cadres métalliques en type photo. Pour ce faire, je vais aller sur, je vais cliquer sur ce menu prototype. Ensuite, je vais voir la page d'accueil. Commençons donc par le haut de la page d'accueil. Donc, à la fin de notre cours, je vais vous donner un projet à réaliser. Cela inclura donc la création de cadres métalliques pour ce menu de hamburgers et d'autres cadres Je ne vais donc pas créer de prototype pour ce menu de hamburgers. Et vous le ferez dans le cadre du projet de classe. Commençons donc par l'icône de la carte. Voici donc la page de notre carte. Et lorsque nous cliquons sur cette carte Ticon, nous allons accéder à la page du panier Je vais donc sélectionner la carte. En fait, nous devons regrouper cette carte avant créer en composant. Faisons-le. Cliquez ici et cliquez sur l'élément d'arrière-plan. Appuyez ensuite sur la commande G pour le regrouper. Et nous le ferons pour le reste du carton. Faisons-le. D'accord. Cliquez maintenant sur ce carton et je vais le convertir en composant. C'est tellement simple, il suffit de cliquer sur l'élément que vous souhaitez convertir, et vous verrez quatre triangles ici. Il suffit de cliquer dessus. Lorsque vous le survolez, vous verrez un message texte intitulé Create Components (Créer des composants Il suffit donc de cliquer dessus. Lorsque vous cliquez dessus, vous le verrez devenir un composant et vous verrez une ligne violette lorsque vous le sélectionnez. Maintenant, je vais cliquer dessus et nous devons le pointer ici. Pour ce faire, je vais cliquer sur le Phototypeow. Au-dessus de l'icône, vous verrez ce signe plus. Il suffit de cliquer dessus et de le glisser-déposer sur le cadre en forme de cœur. Ensuite, vous verrez un menu contextuel. Dans le menu contextuel, vous pouvez sélectionner l'action que vous allez effectuer. Dans ce cas, c'est à portée de main. Lorsque nous appuyons sur l'icône, nous accédons à la page de la carte. Ensuite, voici la section dans laquelle nous pouvons définir l'action que nous allons faire. Dans ce cas, il sera dirigé vers la page de la carte. Ici, nous pouvons sélectionner d'autres pages, mais il suffit de les sélectionner sous forme de carte. Et maintenant, si je le vérifie sur l'action, il me suffit de cliquer sur la page d'accueil et de cliquer ici. Ensuite, prévisualisez-le et cliquez sur Page d'accueil. Maintenant, si je clique sur le bouton de cette carte, je vais accéder à la page Mon panier. C'est la base pour créer des prototypes. Et la Fema a la capacité de le faire sans altérer le design Et nous pouvons le faire clairement. Maintenant, nous avons activé cet avatar. Lorsque nous cliquons sur cette icône d'avatar, ma page de profil s'ouvre. Il s'agit d'une autre activité que vous devez effectuer dans le cadre du projet de classe. Il y a maintenant trois autres boutons de carte. Il existe maintenant plusieurs façons de le faire. Nous pouvons simplement convertir ce bouton de carte manuellement et individuellement, puis le lier à la page de la carte. Mais nous avons déjà créé ce composant. Si nous remplaçons le même composant par d'autres boutons de la carte, ce sera clair et nous n'aurons pas beaucoup de connexions comme celle-ci. Laissez-moi vous montrer ce que je veux dire. Convertissons ces boutons en composants comme celui-ci. Et maintenant, dirigeons-les manuellement vers la carte. Ensuite, cela dirigera également vers la page de la carte. Faisons en sorte que ça se passe comme ça. Maintenant, si je clique sur le canevas, je verrai trois lignes. Il s'agit des trois lignes vers lesquelles nous pointons ces boutons, cette page de carte, mais nous pouvons dupliquer ce composant. Et si nous remplaçons ce premier composant du bouton par un autre bouton de la carte, cela ne se gâtera pas comme ça et cela permettra de gagner plus de temps. Faisons-le de cette façon. J'appuie simplement sur la touche Ctrl pour annuler les modifications. OK, maintenant je clique sur cet article de voiture, non ? Cliquez ensuite sur Copier. Ensuite, je clique ici et je fais un clic droit. Cliquez sur Pace pour le remplacer. Nous venons de remplacer notre composant. Maintenant, si je clique ici, je vais voir cette connexion. Et si je clique ici, je verrai cette connexion. Faisons-le pour le reste du bouton Difficile. C'est maintenant le moyen de créer facilement un prototype. OK, à l'étape suivante, ajoutons une action à cette icône de recherche. Si quelqu'un tape ici et recherche quelque chose, il ira sur la page de recherche. Il obtiendra le résultat de la recherche. Pour ce faire, nous pouvons cliquer ici et cliquer sur Composant et le convertir en Composant. Cliquez ensuite sur cette icône plus et naviguez jusqu'à la page de recherche. Nous n'avons aucune action à effectuer pour cette barre de recherche car elle se trouve déjà sur la page de recherche. Nous avons maintenant ces catégories. Dans ce cas, nous n'avons pas créé de prototype pour les catégories. Nous allons recréer ces catégories sur cette page de bas de page de recherche. Pour cela, je vais double-cliquer ici. Vous souvenez-vous que j'ai créé des groupes pour ces catégories d'images ? Sélectionnez maintenant ce groupe et cliquez sur Créer des composants. Et si vous le souhaitez, vous pouvez simplement renommer le texte comme image de catégorie Mais je ne le fais pas parce qu'il s'agit d'un simple ensemble de cadres métalliques. n'y a que quelques cadres métalliques, mais dans le cas d'un projet de grande envergure, nous devons absolument renommer ces catégories Et je le fais pour gagner du temps, mais si vous le souhaitez, vous pouvez simplement renommer ces couches dans cette section Maintenant, lorsque nous cliquons sur ces catégories, nous serons liés à cette page de recherche car nous n'avons pas créé de page différente, quatre catégories ou catégories d' aliments. Maintenant, comme je l'ai fait auparavant, je peux simplement copier cette image de catégorie et cliquer ici. Cliquez ensuite sur Pace pour remplacer. Double-cliquez ici pour sélectionner la catégorie, puis cliquez sur Rythme pour la remplacer. Fais la même chose ici, OK, très bien. Maintenant, si nous vérifions le processus, si nous cliquons dessus, nous lirons la page de recherche. Si nous cliquons sur la barre de recherche, nous allons lire la recherche. OK, il est maintenant temps d'ajouter l'action. Lorsque quelqu'un clique sur ces aliments, cliquez ici et convertissez-les en composants comme celui-ci. Et cliquez sur l'icône plus. Lorsque quelqu'un tape dessus, clique sur cet aliment, cette personne le fera, jusqu'à la page d'un pied de page. OK, maintenant je vais cliquer avec le bouton droit de la souris et copier. Ensuite, cliquez avec le bouton droit de la souris et cliquez sur Rythme pour remplacer. Parce que tous ces produits alimentaires populaires sont les mêmes dans ce cadre métallique. Si nous ajoutons des actions individuelles comme ajoutons une action à cela, il y aura de nombreuses connexions. Mais si nous remplaçons le composant, il n'y aura que peu de connexions et ce sera vraiment facile à gérer. OK, maintenant je vais faire de même, il suffit de cliquer sur Copier et de cliquer sur Placer pour remplacer. OK, maintenant notre page d'accueil est terminée. Et maintenant, je vais faire la même chose jusqu'au pied de la page de recherche, car tout cela est identique. Cliquez simplement sur l'un des aliments et convertissez-le en composant. Ensuite, survolez-le, vous verrez ce type de bouton plus et vous le ferez glisser vers le repose-pieds unique. OK, maintenant copiez-le et remplacez-le par le reste des aliments. Très bien, dans la deuxième leçon nous ajouterons une action à cela en cliquant sur le bouton à deux cartes. Si nous vérifions le processus en cours, j'irai sur la page d'accueil. Passons au prototype. Et revenons à la page d'accueil. Et si je recherche un aliment, j'irai sur la page Rechercher un aliment. Et si je clique sur A, je vais accéder à Single Foods. Si je clique sur le bouton de cette carte, elle sera redirigée vers ma carte. Nous allons continuer à construire le prototype. 18. 18 conceptions de conceptions en prototype 2: Maintenant, je vais ajouter une action à cela en cliquant sur le bouton à deux cartes, cliquant sur le bouton To Card et en cliquant sur Create Component. Ensuite, lorsque nous cliquons sur ce bouton à deux cartes, cela ouvre la fenêtre contextuelle à deux cartes. Lorsque nous cliquons dessus, il est indiqué que le pied a été ajouté à la carte. Cliquons ici et envoyons-le dans le cadre contextuel de la carte A. Je vais maintenant modifier ces paramètres. Le premier sera de naviguer vers une fenêtre contextuelle de voiture. s'agit d'une fenêtre contextuelle, elle ne naviguera pas dans le cadre, elle n'ouvrira que la superposition Cette fenêtre contextuelle réservée aux cartes sera superposée au cadre à un pied. Cliquez sur Ouvrir la superposition, et ici nous avons sélectionné le cadre que nous voulons superposer Et nous en ressentirons l' effet instantanément. Maintenant, dans le paramètre Overlay, je vais cliquer ici et cliquer sur Manuel Ensuite, je vais ajuster la position de cette superposition. Adaptons-nous au centre, comme ça, d'accord ? Ensuite, je vais cliquer sur un arrière-plan. Cliquez ensuite ici. Et en arrière-plan, lorsque cette fenêtre contextuelle s'ouvre, le reste de la page sera de couleur noir clair. Maintenant, nous avons dit que si je le vérifiais, cliquez sur Page unique. Cliquons sur le mode Aperçu. Et si je clique sur une carte, elle apparaîtra en superposition. Continuons. Si je veux le modifier, je peux simplement cliquer ici. Fermons en cliquant à l'extérieur. Si je le goûte, clique dessus Towards. Si je clique à l'extérieur de la fenêtre contextuelle, elle affichera la page en pied de page unique ou la page en cours. Mais dans ce cas, je ne l' ajouterai pas. Nous avons maintenant deux boutons. Cliquez simplement sur le bouton et convertissez-le en composant. Et cette page de ma carte s'affichera en rouge. Cliquez ici et ajoutez-le à la page de ma carte puis cliquez sur Continuer les achats et convertissez-le en composant. Envoyons-le sur la page de recherche. Lorsqu'un utilisateur clique sur Continuer ses achats, il accède à la page de bas de page de recherche. OK, maintenant nous devons agir sur la page de ma carte. Ajoutons donc une action à ce bouton Passer commande. Il suffit de cliquer dessus et de cliquer sur Composant. Ensuite, lorsque quelqu'un clique sur ce bouton Passer une commande, il lit dans Order Success Frame. OK, maintenant j'espère que vous comprenez le processus. Et c'est ainsi que l'on peut convertir une trame métallique en prototype. Maintenant, je vais convertir ce bouton en composant. Il s'agit du bouton d'accueil. Connectez-le ensuite à la page d'accueil. Lorsque quelqu'un clique dessus, il lit la page d'accueil. Je vais le copier et le remplacer par le reste du bouton. Maintenant, remplaçons également celui-ci. J'ai oublié d'ajouter le bouton de retour. Ajoutons-le rapidement. Nous allons ajouter le bouton de retour ici. Créons une simple ellipse. Créez l' ellipse comme suit, changez de couleur et cliquez sur Rectangle Et créez le petit rectangle. OK, maintenant groupons-le et cliquons sur Composant, et il deviendra un composant. Je vais maintenant cliquer sur Type de photo puis sur l' icône plus sur le composant. Lorsque je fais glisser la connexion du composant, le bouton de retour s'ouvre. Cela signifie que si quelqu'un clique sur ce bouton de retour, il réagira à la page précédente que vous avez ouverte. Regardons le déroulement de l'action. Cliquez au verso pour dupliquer ce dessin. Dupliqué comme ça OK. Voyons maintenant l'action réelle. Ouvrons ça. Je suis maintenant sur la page d'accueil. Je clique sur la page de recherche. Maintenant, si je clique sur ce bouton de retour, je vais aller à la page d'accueil parce que j'étais sur la page d'accueil. C'est ainsi que vous pouvez utiliser le bouton de retour. Le bouton de retour n'est pas aligné. Alignons-le correctement. En fait, mettons-le au centre. Bien, nous avons maintenant le prototype. 19. Conception !: Nous avons maintenant un prototype filaire basse fidélité. Alors testons-le. Avant de le tester, je vais supprimer une partie du flux car nous n'en avons pas besoin. Très bien, testons-le. Je passe au mode actuel et nous sommes maintenant sur la page d'accueil. Imaginez que je suis un utilisateur qui l' utilise pour trouver de la nourriture. Je vais taper la nourriture ici et cliquer sur le bouton de recherche. Et je vais aller sur la page de recherche et je suis hamburger. Puis je clique sur l'un des hamburgers. Ici, je peux voir tous les détails du burger et nous avons une description et des critiques sur le slider Ensuite, je peux ajouter les hamburgers que je souhaite acheter. Ensuite, je peux cliquer sur Ajouter au panier. Lorsque je l'ajoute au panier, je peux voir la carte ou continuer mes achats. Je vais cliquer sur Continuer mes achats, et ici je pourrai à nouveau rechercher aliments que j'aime , puis les ajouter au panier. Regardons la carte. Il suffit de cliquer sur la carte. Voici ma carte. Ici, je peux vérifier le sous-total et la nourriture que j'ai achetés Je peux compter les aliments que je veux acheter. Ensuite, je peux cliquer sur Passer la commande, et j'obtiendrai ce cadre de réussite de commande. Ici, je peux cliquer sur le bouton Suivre la commande et suivre la commande. Je ne l'ai pas terminé car vous le ferez dans la section des projets. C'est le processus de notre ensemble de cadres métalliques et j'espère que vous aurez une idée claire de la conception cadre métallique haut de gamme et de sa conversion en prototype 20. Projet de cours en 20 cours: OK, voici le projet. Vous devez donc continuer cet ensemble de cadres métalliques ajouter trois autres cadres et le partager avec les autres designers. Pour cela, je vais vous donner un lien vers ce prototype afin que vous puissiez le dupliquer. Ensuite, dans un premier temps, vous devez créer un menu de hamburgers. Pour ce faire, vous pouvez effectuer une recherche sur Google comme le menu hamburger dans l'application et vous verrez différents types de menu hamburger Surtout lorsque vous créez ce menu de hamburgers, il devrait s'agir d'une fenêtre contextuelle comme celle-ci Ainsi, par exemple, si je crée un nouveau cadre Android, la taille du menu hamburger devrait être la moitié de ce cadre Et lorsque vous cliquez sur l'icône du hamburger, celle-ci s'affichera et le reste de la page sera sombre, comme nous l'avons fait lors de l'ajout au panier Pop up Stride. Il suffit de lancer le single food. Et si je clique sur la carte At To, la fenêtre contextuelle apparaît et le reste des pages est plus sombre. Donc, une fois que vous l' avez fait, vous allez créer un cadre à modifier. Cet avatar, ce sera un cadre appelé Mon profil. Vous allez donc créer une page pour suivre vos commandes. Ce sera donc un cadre de commande de suivi. Nous n'avons donc pas fait de recherches sur l'expérience utilisateur pour concevoir cette application, je vous suggère donc d'aller sur Google ou sur un site comme Ble pour trouver l'inspiration en matière de design. Par exemple, si je vais sur Rival, recherchons la page de suivi des commandes, nous obtiendrons ce type de pages de suivi des commandes. Donc, si nous allons ici, ce sera une excellente page de suivi de commande, nous pourrons donc également l'utiliser. Vous pouvez faire vos recherches et trouver ce type de cadre. Ensuite, vous pouvez le redessiner. Ou vous pouvez créer le cadre filaire de cette page à la page de profil. Vous pouvez faire de même, faire des recherches et créer ces trois pages. Après l'avoir créé, cliquez sur ce bouton bleu Partager et définissez-le cliquez sur ce bouton bleu Partager et définissez-le ce que toute personne disposant du lien puisse le voir. Cliquez ensuite sur ce lien de copie et partagez-le avec d' autres designers américains. Bonne chance et merci d'être restée avec moi et j'espère que vous obtiendrez de précieux détails sur la création de phototypesireframes Si vous avez des questions, posez-les moi et je suis prêt à vous aider. Je te verrai dans un autre temps.