Conception UI/UX avec l'IA générative : concevoir des interfaces conviviales

1. Introduction: Bon sang, êtes-vous intéressé par la conception d'une interface utilisateur à l'aide de l'IA ? Si la réponse est oui, ce cours est peut-être pour vous. Dans ce cours, nous allons avoir plusieurs projets. Dans le premier projet, nous allons donc concevoir une interface utilisateur pour une application d'apprentissage des langues à l'aide de l'UISR Cet outil est très simple d'utilisation. Tout ce que vous avez à faire est de rédiger l'invite décrivant votre projet, et en moins d'une minute, UIZR vous générera des conceptions d' interface utilisateur de haute qualité comme celle-ci . Très cool, non ? Ensuite, vous pouvez également prendre une capture d'écran d' un site Web ou d'une application mobile, et UizRT pourra convertir cette capture d'écran en conceptions d'interface utilisateur modifiables . Regarde ça. Dans le prochain projet, vous allez créer une interface utilisateur sur papier, et vous pouvez prendre une photo du scat et télécharger cette photo , et physiquement, l' IA sera capable de convertir cette esquisse en conceptions d' interface utilisateur modifiables Très cool, non ? Dans le prochain projet, nous allons concevoir une interface utilisateur pour un site Web de commerce électronique à l'aide de Wind Frame. Ensuite, nous allons également concevoir une interface utilisateur pour l' analyse des revenus des ventes à l'aide du FSL Regardez ça, les gars. Plutôt cool, non ? Ensuite, nous allons concevoir l'interface utilisateur pour la page d'inscription. Nous allons concevoir l'interface utilisateur pour concevoir les pads manuellement. Ensuite, nous allons analyser les attentions des utilisateurs à l'aide de l'IA Ainsi, vous obtiendrez le hitmp et le hitmp vous indiquera où se concentre le plus l'attention de l'utilisateur concentre le plus Enfin, nous allons mener des recherches sur l'expérience utilisateur à l'aide d'UX Pilot. 2. Concevoir une interface utilisateur pour une application d'apprentissage de langues avec Uizard: Bon sang, bon retour sur le parcours. Dans cette vidéo, nous allons concevoir une interface utilisateur à l'aide d'UizRT OK, alors maintenant, commençons. La première chose que vous devez faire est de vous inscrire. suffit donc de cliquer sur S'inscrire gratuitement et vous serez redirigé vers cette page. Comme vous pouvez le constater, vous avez deux options. Vous pouvez vous inscrire à l'aide de votre compte Gmail. Vous pouvez également vous inscrire à l'aide de votre compte Microsoft. Cela dépend donc entièrement de vous. Dans ce cas, je vais m' inscrire en utilisant mon compte Gmail. Comme vous pouvez le voir ici, j'ai été redirigé vers mon tableau de bord. OK, donc ici, il y a quatre options. La première option est un nouveau projet vide. Vous pouvez donc créer l' interface utilisateur à partir de zéro. La deuxième option consiste à partir de la capture d'écran. Vous pouvez donc prendre une capture d'écran d' un site Web ou d'une application mobile, puis télécharger cette capture d'écran, et UISRT convertira cette capture d'écran en conceptions d'interface utilisateur La troisième option consiste à générer les conceptions d'interface utilisateur à l'aide d' Auto Designer, et la quatrième consiste à partir de modèles. Comme vous le savez, UISRT propose de nombreux modèles, vous pouvez donc choisir l'un de ces modèles et le personnaliser comme vous le souhaitez Cependant, dans cette vidéo, nous allons nous concentrer principalement sur cette fonctionnalité, Auto Designer. Il suffit donc de cliquer dessus et il sera redirigé vers cette page. C'est bon. Alors maintenant, commençons. Tout d'abord, vous devrez sélectionner pour quel appareil vous concevez ? Comme vous pouvez le voir ici, il existe trois options : mobile, tablette et ordinateur de bureau. Je vais sélectionner le mobile. Ensuite, vous devrez rédiger l'invite décrivant votre projet. OK, donc dans cet exemple, je vais créer une interface utilisateur pour l'application Language Learning. OK, donc je vais écrire quelque chose comme ça, une application d'apprentissage des langues pour les étudiants et Taurus D'accord, vous devrez ensuite décrire le style de conception. Vous pouvez spécifier des éléments tels que les couleurs et les mises en page. OK, alors écrivons les descriptions d'une application moderne avec une équipe bleu clair. Ensuite, vous pouvez également sélectionner certains de ces mots clés. Je vais sélectionner léger, modéré et élégant. OK, alors ensuite, il suffit de cliquer sur Générer mon projet. OK, alors attendez, les gars. Le processus peut prendre quelques minutes. J'espère que cela ne prendra pas trop de temps et je suis très heureuse de voir mon interface utilisateur. OK, alors attends. En fait, je ne veux pas que cette vidéo soit trop longue, donc je vais sauter cette partie, et je reviendrai une fois que le design de l'interface utilisateur sera prêt. OK, enfin, les designs de l' interface utilisateur sont prêts. En fait, le processus n'a pas pris trop de temps, les gars. Cela n'a pris que 2 minutes ou peut-être même moins de 2 minutes. OK, maintenant je vais cliquer sur Aperçu. Et cliquons sur Vue d'ensemble. Comme vous pouvez le constater, UizRT a généré plusieurs pages. Regarde ça. Nous avons donc la page d' accueil, la page d'inscription, l'écran d' accueil, la recherche, le profil et les paramètres du compte. Regardez ça, les gars. Très cool. OK, je vais zoomer un peu. Ok, regardez ça, les gars. Très cool, non ? OK, maintenant il suffit de cliquer sur Aperçu. Cliquez simplement sur OK. OK, alors cliquez simplement sur Commencer, inscrivez-vous maintenant. OK, donc c'est comme la page d'accueil, les gars. Regarde ça. Si nous cliquons sur le profil, nous serons redirigés vers cette page. Si nous cliquons sur Accueil, nous serons redirigés vers cette page. Et si vous cliquez sur l'un de ces cours, vous serez redirigé vers cette page. Regardez ça, les gars. C'est incroyable, non ? Bon, revenons maintenant à la page d'édition. Je vais fermer cet onglet. Donc, si vous n'êtes pas satisfait de la conception de l'interface utilisateur, n'hésitez pas à la personnaliser, non ? Vous pouvez donc ajouter du texte. Vous pouvez ajouter des boutons. Vous pouvez ajouter un formulaire, et encore bien d'autres, les gars. Vous pouvez également ajouter une image, il suffit de cliquer sur Image. Comme vous pouvez le constater, l'UISRT possède sa propre bibliothèque d'images ici. Vous pouvez également générer une image à l'aide de l'IA, il vous suffit donc de cliquer dessus et de taper votre bal de fin d'année ici. Et si vous cliquez sur des icônes, vous pouvez également n'hésitez pas à ajouter des icônes à votre interface utilisateur. Comme vous pouvez le voir ici, ISAT a de nombreuses icônes différentes ici, les gars. Regarde ça. En outre, vous pouvez également modifier la page. Il vous suffit donc de sélectionner la page que vous souhaitez modifier. Par exemple, dans ce cas, je souhaite modifier le homestren afin que vous puissiez simplement sélectionner Homestren et modifier la mise en page Vous pouvez modifier les positions, la taille. Vous pouvez également modifier le style. Vous pouvez modifier la couleur de l'écran. Vous pouvez regrouper ou dissocier les objets de cette page. Enfin, si vous souhaitez télécharger le design de l'interface utilisateur, cliquez simplement sur Exporter. Comme vous pouvez le voir ici, plusieurs options s'offrent à vous. Vous pouvez donc le télécharger au format PNG et au format JPageFmat SVG ou PDF. Cela dépend donc entièrement de vous. Je vais télécharger ce design d' interface utilisateur au format PNG. Il suffit donc de cliquer sur Exporter. OK, donc le processus peut prendre une minute ou deux. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps. Bien, comme vous pouvez le voir, nous avons téléchargé cette image avec succès Regarde ça. Très cool, non ? Très bien, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vais voir les gars dans la prochaine vidéo où nous allons créer un design d'interface utilisateur à l'aide un autre outil d'IA. Alors je vous verrai là-bas. 3. Concevoir l'interface utilisateur avec Google Stitch et Figma: Bonjour, les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons concevoir une interface utilisateur à l' aide de deux outils d'IA. Le premier est Google States, et le second est FiCMA AI OK, commençons. Tout d'abord, nous allons écrire le bal de fin d'année. Créez une interface utilisateur conçue pour les logiciels d'analyse des ventes. Cela a deux installateurs principaux. Le premier est le tableau de bord de suivi des ventes. Et le second concerne les segmentations des clients, les visualisations Rendez le design moderne et interactif. Ensuite, vous pouvez sélectionner type d'application que vous souhaitez concevoir. Si vous souhaitez concevoir une interface utilisateur pour une application mobile, cliquez dessus. Si vous souhaitez concevoir une interface utilisateur pour une application Web, cliquez sur ce bouton. En outre, vous pouvez également télécharger une image ou un croquis pour vous inspirer et cliquez sur Générer le design OK, maintenant l'IA crée le design de l'interface utilisateur, et nous devrons répondre à ces questions. Pour concevoir un logiciel complet d'analyse des ventes, je peux créer les deux écrans suivants pour vous. Tableau de bord de suivi des ventes. Cet écran fournira donc un aperçu des performances commerciales avec des indicateurs clés et des graphiques interactifs. Et le second concerne les visualisations de segmentation des clients Cet écran affichera les segments de clientèle à travers différentes visualisations permettant d'obtenir des informations plus approfondies Dois-je concevoir ces deux écrans pour vous ? OK, maintenant, c'est l'IA qui va créer le design. Cela prendra quelques minutes. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps, et je suis très impatiente de voir le résultat. Eh bien, ça n'a pas pris trop de temps, les gars. Cela n'a pris qu'une minute , voire moins d'une minute. OK, voici le design de l'interface utilisateur. Voici donc le bureau d'analyse des ventes. Nous avons un aperçu des ventes, le chiffre d'affaires total, la valeur moyenne des ventes, les clients, ventes au fil du temps et les ventes de Regent. Et voici les visualisations des segmentations des clients. Nous avons donc une répartition des clients en fonction de la valeur à vie du client par rapport à la fréquence d'achat et des principaux segments de clientèle en termes de chiffre d'affaires. OK, très cool, les gars. Si vous souhaitez télécharger ce design, c'est très simple. Cliquez simplement sur ce téléchargement. Vous pouvez également consulter le code. Comme vous pouvez le voir, nous avons du code DDML ici. Vous pouvez copier le code et le compiler dans le code VS. OK, ensuite, nous allons essayer le deuxième outil d'IA. Le nom de l'outil est Figma. Nous allons donc utiliser la même invite. Alors copiez-collez ce bal de fin d'année, et mettons-le ici. Mais avant cela, assurez-vous d'avoir déjà étudié la FICMA Créez une conception d' interface utilisateur pour logiciel d'analyse des ventes comportant deux entraves principales, bord de suivi des ventes et les segmentations des clients, les hsualisations, hsualisations, Et cliquez sur Générer. VICMA aura besoin de quelques minutes pour générer le design de l'interface utilisateur. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps. Eh bien, ça n'a pas pris trop de temps, les gars. Cela n'a pris qu'une minute , voire moins d'une minute. OK, voici le tableau de bord des ventes. Nous avons un aperçu du chiffre d'affaires total, du total des commandes, taux de conversion des nouveaux clients. Interface utilisateur très cool, les gars, tendances des revenus, ventes par catégorie, indicateurs de performance, transactions récentes, très complet. Et cliquons sur les segmentations des clients. Nous avons des distributions par segment, une comparaison des métriques par segment. Une métrique segmentaire détaillée. Très complet. Et vous pouvez également consulter le code. Cliquez simplement dessus et vous pourrez voir le code. Vous pouvez télécharger le code et le compiler en code FAS. OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir. 4. Concevoir une interface utilisateur pour une application de livraison d'épicerie avec Banani, Nano Banana et Manus us: gars de Holi. Bienvenue dans le cours. Dans cette vidéo, nous allons concevoir une interface utilisateur pour une application de livraison d' épicerie à l' aide de trois outils d'IA. Le premier est Banani. Le second est Gémeaux, et le troisième est Manus OK, commençons. Tout d'abord, je vais me connecter. Je vais me connecter à l'aide de mon compte Gmail, alors cliquez sur Continuer avec Google. Comme vous pouvez le voir, je me suis connecté avec succès, et voici mon tableau à poussière. OK, commençons. Écrivons le bal de fin d'année. Créez une conception d'interface utilisateur pour l'application de livraison d'épicerie. Cette application dispose de trois installateurs principaux. Le premier est le marché des produits. Avec carte d'achat. Ainsi, si l'utilisateur souhaite acheter le produit, peut cliquer sur il peut cliquer sur le produit et l'ajouter à la carte d'achat. La deuxième fonctionnalité est suivi en temps réel de la livraison des colis sur une carte interactive. Et le troisième obstacle est le tableau bord d' analyse des dépenses mensuelles Ainsi, l'utilisateur pourra suivre et analyser ses dépenses pour chaque mois. OK, maintenant cliquons sur Générer, cela prendra quelques minutes, peut-être une ou deux minutes. Attendez, les gars. J'espère que cela ne prendra pas trop temps et je suis très impatiente de voir le résultat. Eh bien, cela n'a pas pris trop de temps. Cela n'a pris qu'une minute , voire moins d'une minute. OK, regardez ce tableau de bord de l' épicerie. Nous avons des catégories de produits, suivi actif des livraisons, des dépenses mensuelles. Regarde ça. Très cool. Et voici une autre alternative. Regarde ça. C'est relativement similaire, mais le design est un peu différent. Et voici la troisième option. OK, très cool. Si vous souhaitez télécharger ces images, cliquez simplement sur Exporter. Et vous pouvez exporter cette image au format PNG ou GPG. Cela dépend entièrement de vous et il vous suffit de cliquer sur Exporter. D'accord, nous allons maintenant essayer le deuxième outil d'IA. Ouvrons donc Jim et moi. Et dans ce cas, nous allons utiliser le modèle Nanobanana. Cliquons donc sur ce bouton pour créer une image. Et je vais copier-coller la même invite. Nous allons donc créer une interface utilisateur pour l'application de livraison d'épicerie. OK, cliquons sur Soumettre. OK, maintenant il charge le modèle nano Banana. Cela prendra quelques minutes, peut-être une ou deux minutes. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps. OK, allons-y. Voici le design. Ok, regarde ça. Nous avons trois fonctionnalités, non ? Le marché des produits, le suivi de la livraison des colis en temps réel et l'analyse des dépenses. Tableau de bord. Regarde ça. Très cool. D'accord, nous allons maintenant essayer le troisième outil d'IA. Le nom de l'outil est Manus. Et nous allons copier-coller le bal Nous allons donc utiliser exactement la même invite et cliquons sur le design. OK, maintenant, cliquons sur Générer. Eh bien, ça n'a pas pris trop de temps, les gars. Cela n'a pris que 30 secondes , voire moins de 30 secondes. OK, permettez-moi de zoomer un peu. Voici donc le premier marché de produits entravés. Et comme vous pouvez le voir ici, nous avons un panier d'achat sur lequel l' utilisateur pourra cliquer et le produit sera automatiquement ajouté au panier. Et la deuxième fonctionnalité est le suivi des livraisons en temps réel. Voici l'épicerie, c'est votre maison, le chauffeur est en route, et vous avez également l'heure d'arrivée estimée. Regarde ça. Très cool, non ? Et voici le troisième plus gros. Tableau de bord d'analyse des dépenses. Ainsi, vous serez en mesure d'analyser vos dépenses pour chaque mois et de les ventiler par catégorie de produits. Très cool. OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir. 5. Concevoir une interface utilisateur pour un site Web de commerce électronique avec Wind Frame: Holocauste, bienvenue dans le cours. Dans cette vidéo, nous allons créer un design d'interface utilisateur à l'aide de Wind frame. OK, alors commençons maintenant. La première chose que vous devez faire est de vous inscrire. Il suffit donc de cliquer sur S'inscrire. Vous allez être redirigé vers cette page. Comme vous pouvez le constater, vous avez deux options. Vous pouvez vous inscrire en utilisant votre compte Github. Vous pouvez également vous inscrire à l'aide de votre compte Gmail. Je vais donc m'inscrire en utilisant mon compte Gmail. Comme vous pouvez le voir, j'ai été redirigé vers mon tableau de bord. D'accord, nous allons maintenant créer un nouveau projet. Il suffit donc de cliquer sur Créer un projet. Vous devrez saisir le nom du projet. D'accord, je vais donc l' appeler design d'interface utilisateur. Et je vais cliquer sur Créer un projet. OK, maintenant Wind Frame est en train de créer le projet. Et comme vous pouvez le voir, nous avons été redirigés vers la page d'édition. OK, donc cet outil est très facile à utiliser les gars. Tout ce que vous avez à faire est d'écrire le bal décrivant à quoi devrait ressembler l'interface utilisateur . Vous pouvez spécifier des éléments tels que les caractéristiques, les fonctionnalités, la couleur, la mise en page et les styles. OK, donc dans cet exemple, je vais créer des conceptions d'interface utilisateur pour un site Web de commerce électronique. OK, alors maintenant écrivons l'invite. Catalogue de produits, page pour site Web de commerce électronique avec une mise en page esthétique modérée de l'équipe. Et fond sombre. OK, donc c'est ce que je demande. Maintenant, cliquons dessus . Le processus peut donc prendre quelques minutes, les gars. Alors, attendez. J'espère que cela ne prendra pas trop de temps. Je suis tellement impatiente de voir le résultat. OK, je ne veux pas que cette vidéo soit trop longue , alors je vais juste sauter cette partie, et je reviendrai une fois que le design de l'interface utilisateur prêt, et je vais vous montrer. Bien, enfin, le design de l' interface utilisateur est prêt. En fait, ça n'a pas pris trop de temps, les gars. Cela n'a pris que 2 minutes ou peut-être même moins de 2 minutes. D'accord, comme vous pouvez le voir, voici la page du catalogue de produits notre site Web de commerce électronique. Il y a environ deux listes de produits ici. Regarde ça. Très cool, non ? Si vous n' êtes pas satisfait du résultat, hésitez pas à demander à AI de redessiner cette interface utilisateur, afin que vous puissiez écrire la promo ici et simplement expliquer quelle partie vous souhaitez corriger OK, maintenant je vais cliquer sur Ajouter au canevas. D'accord, nous allons maintenant créer un autre design d'interface utilisateur en utilisant Wind Frame. Écrivons donc l'invite. Cette fois, nous allons donc créer des conceptions d'interface utilisateur pour la page de paiement du produit. OK, alors écrivons le bal de fin d'année. Page de paiement du produit pour le site Web de commerce électronique. Assurez-vous d'inclure le mode de paiement et le bouton de paiement. OK, maintenant je vais cliquer dessus, le processus peut donc prendre quelques minutes. Alors, attendez. J'espère que cela ne prendra pas trop de temps, et je suis très impatiente de voir le résultat. OK, la conception de l'interface utilisateur pour les carnets de paiement des produits est donc prête. Regardez ça, les gars. Très cool, non ? OK, maintenant je vais ajouter ces blocs-notes à Canvas. Il suffit donc de cliquer sur Ajouter au canevas. OK, alors NX, cliquons sur le code. Vous pourrez voir le code de cette interface utilisateur. Donc, si vous êtes des développeurs Web ou des développeurs frontaux, vous n'avez pas besoin d'écrire le code à partir de zéro. Vous pouvez utiliser ce code. OK, enfin, nous allons exporter ce projet. Il suffit donc de cliquer sur Exporter. D'accord, comme vous pouvez le voir, nous avons exporté le projet avec succès. Trois options s'offrent à vous. Les premières options se trouvent chez DML. La deuxième option est React, et la troisième est peu nombreuse. Je vais donc sélectionner DML et cliquer sur Télécharger le fichier, n'est-ce pas ? Le fichier a été téléchargé avec succès. OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir. 6. Concevoir une interface utilisateur pour un site Web Marketplace avec V0: Bon sang, les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons créer une interface utilisateur à l' aide de Firsal OK, alors commençons maintenant. La première chose que vous devez faire est de vous connecter. Il suffit donc de cliquer sur Se connecter. Vous pouvez vous connecter à l'aide de votre compte Gmail. Vous pouvez également vous connecter à l'aide de votre compte Github. OK, alors maintenant, je vais cliquer sur les prix. Je vais vous montrer que cet outil est en fait gratuit. Comme vous pouvez le voir ici, Viral propose un plan gratuit. De toute évidence, il existe certaines limites. En ce qui concerne le plan gratuit, par exemple, vous n'avez que 200 crédits par mois, c'est donc votre limite maximale. OK. Revenons maintenant à la page d'accueil. Si vous faites défiler l'écran vers le bas, vous pourrez voir les designs d'interface utilisateur créés à l'aide du langage FSL Regarde ça. OK, alors prenons un exemple. Cliquons sur celui-ci. OK, comme vous pouvez le voir, c'est le bal qui a été utilisé pour générer cette conception d'interface utilisateur, un tableau de bord pour l' analyse des données des KPI industriels Regardez ça, les gars. Très cool, non ? vous suffit donc de rédiger le bal de fin d'année en décrivant votre projet. Vous pouvez spécifier des éléments tels que les caractéristiques, les fonctionnalités, les styles, la mise en page, la couleur , etc., et Fir SL va vous générer une belle interface utilisateur. OK, alors commençons, les gars. OK, nous allons donc écrire le bal de fin d'année Dans cet exemple, je vais créer interface utilisateur pour le site Web de commerce électronique OK, alors maintenant écrivons l'invite. Commerce électronique, marché avec catalogue de produits et étiquettes de prix. OK, alors maintenant, cliquons sur Soumettre. Le processus peut prendre quelques minutes, les gars, alors attendez. J'espère que cela ne prendra pas trop de temps. Comme vous pouvez le constater, Versal est en train de concevoir l'interface utilisateur Alors, attendez, d'accord. Enfin, le design de l'interface utilisateur est prêt. Ok, regarde ce type. Très cool, non ? Voici donc notre site Web de commerce électronique. Voici donc la page Hub, les gars. Comme vous pouvez le constater, nous avons le moteur de recherche ici, ressemble à la page d'accueil du produit Voici les descriptions des produits. Et comme vous pouvez le constater, voici le catalogue de produits. Regarde ça. Faisons défiler la page un peu vers le bas. Comme vous pouvez le constater, il y a la liste des prix et le bouton graphique. Donc, si le client souhaite acheter ce produit, il cliquera sur ce bouton, n'est-ce pas ? OK, alors cliquons sur l'autre design de l'interface utilisateur. C'est un autre catalogue de produits, les gars. Très cool, non ? Donc, si vous souhaitez convertir ce design en code, vous pouvez cliquer dessus. Comme vous pouvez le constater, vous avez deux options. Le premier est React, et le second est au CML Vous pouvez donc copier et coller ce code et le donner aux développeurs Web ou aux développeurs frontaux, et ils créeront le site Web pour vous. OK, très cool, non ? Enfin, si vous voulez écouter ce projet, vous pouvez cliquer ici, et liens vers ce projet seront automatiquement copiés, n'est-ce pas ? Et tu peux le montrer à d'autres personnes. OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir. 7. Conception de l'interface Web avec Teleport HQ: Saint-Esprit, bienvenue dans le cours. Dans cette vidéo, nous allons créer design d'interface utilisateur pour un site Web à l'aide de Teleport at Q. Bien, commençons maintenant La première chose que vous devez faire est de vous inscrire. Il vous suffit donc de cliquer sur Commencer. Vous allez être redirigé vers cette bêche. Comme vous pouvez le constater, vous avez deux options. Vous pouvez vous inscrire à l'aide de votre compte Gmail. Vous pouvez également vous inscrire en utilisant votre compte Github, c'est donc à vous de décider OK, dans ce cas, je vais m' inscrire en utilisant mon compte Gmail. OK, donc c'est Teleport atsqdbg. OK, vous avez donc plusieurs options, les gars. Tu peux repartir de zéro. Vous pouvez sélectionner l'un de ces modèles disponibles et le personnaliser comme vous le souhaitez. Comme vous pouvez le constater, il existe de nombreux modèles ici. Vous pouvez également générer une interface Web à l'aide de l'IA, et c'est ce que nous allons faire dans cette vidéo. OK, alors cliquez simplement sur Commencer à construire. Cet outil est très simple d'utilisation. Tout ce que vous avez à faire est de rédiger l'invite décrivant votre projet. Et en moins d'une minute, Teleport AdSq va vous générer une interface utilisateur de haute qualité pour nos OK, donc dans cet exemple, je vais créer une page de destination pour mon logiciel de scrapping Web OK, alors maintenant écrivons l'invite. Sites Web pour la suppression de sites Web. Logiciel. OK, alors maintenant je clique simplement sur Next. OK, alors ici, vous devrez sélectionner l'équipe de votre site Web. Comme vous pouvez le constater, il existe plusieurs options : créative, culturelle, par défaut, eBook, echo, finance, enfants , nutrition, sports, start-up et yoga. OK, je vais donc sélectionner Start Up. L'équipe va donc ressembler à ceci. Donc c'est comme le mode lumière, les gars. Si vous souhaitez passer en mode sombre, il vous suffit de cliquer dessus. Donc ça dépend entièrement de vous. Dans ce cas, je vais sélectionner le mode sombre. Je pense que ça a l'air mieux. OK, il suffit maintenant de cliquer sur Générer le site Web. Le processus peut donc prendre quelques minutes, les gars. Alors, attendez. J'espère que cela ne prendra pas trop de temps et je suis très impatiente de voir le résultat. OK, alors attends. Comme vous pouvez le lire, le contenu est généré. OK, c'est presque fini. OK, alors ensuite, il suffit de cliquer. Accédez à la page. OK, donc c'est la page d'édition, les gars. Je vais maintenant cliquer sur Aperçu. OK, vous allez donc être redirigé vers la page d'aperçu. OK, alors attends. OK, allons-y. Voici donc notre site Web. Le nom du site Web est Scraper. OK, exploitez le pouvoir du web scraping. Comme vous pouvez le voir ici, nous avons environ cinq pages, les fonctionnalités d' accueil, le fonctionnement, les prix et les contacts. Il y a un bouton « Commencer maintenant » ici. Et si vous faites défiler l'écran un peu vers le bas, trouverez quatre fonctionnalités : des extractions de données personnalisables, la suppression planifiée, sport par proxy et l'assurance qualité des données Très cool, non ? OK, donc c'est comme les sessions de tarification, pas le bon plan pour vos besoins en matière de suppression de sites Web Forfaits basiques et professionnels gratuits ici. Faisons à nouveau défiler la page vers le bas. OK, donc c'est comme dans les sections de questions fréquemment posées. OK, très cool, les gars. Il y a un bouton de connexion ici et aussi un bouton d'inscription ici. OK, alors maintenant je vais fermer cette étape. N'hésitez pas à modifier les signes UID. Tu peux changer de couleur. Vous pouvez modifier le texte. OK, enfin, je vais vous montrer le code. Il suffit donc de cliquer sur le code. Comme vous pouvez le voir, il y a deux fichiers. Le premier est JavaScript et le second est CSS. Donc, si vous voulez mettre le projet en gras, vous pouvez utiliser ce code, afin de ne pas avoir à repartir de zéro, n'est-ce pas ? OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir 8. Conversion d'une capture d'écran en conception d'interface utilisateur avec Uizard: Du gaz sacré. Bienvenue dans le cours. Dans cette vidéo, nous allons convertir une capture d'écran en interface utilisateur modifiable à l'aide d' UIZR OK, donc le processus va être très simple. Il vous suffit de faire une capture d'écran d'un site Web ou d'une application mobile. Téléchargez ensuite la capture d'écran sur UiSRT. Ensuite, UISRT convertira cela en designs d'interface utilisateur que vous pourrez modifier OK, alors commençons. Alors maintenant, je vais cliquer sur Démarrer à partir de capture d'écran et nous serons redirigés vers cette page. OK, alors attendez, les gars. Le chargement peut prendre un certain temps. Très bien, les gars, nous allons maintenant prendre une capture d'écran de ce site Web Le nom du site Web est zéro. Pour ceux d'entre vous qui ne savent pas ce qu'est le zéro, zi est l'un des plus grands marchés immobiliers où les gens peuvent trouver des propriétés à vendre et des propriétés à louer. Cependant, vous pouvez prendre des captures d'écran de tous les autres sites Web ou applications mobiles de votre choix, n'est-ce pas ? OK, alors prenons maintenant la capture d'écran. OK, alors allons-y. Allons-y. OK, je viens de faire la capture d'écran. Je vais donc enregistrer cette image sur mon bureau et revenons à UizRT OK, pour l'instant, je vais fermer cet onglet. Ce que nous allons faire ensuite est de télécharger la capture d'écran. Il suffit donc de cliquer sur Scanner de capture d'écran et de cliquer sur Télécharger. OK, donc je vais télécharger cette capture d'écran, les gars, il suffit de cliquer sur Ouvrir. OK, alors maintenant il télécharge l'image. Le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. OK, alors attends. Bien, la prochaine chose que nous allons faire est de sélectionner la taille de l'écran de sortie Comme vous pouvez le constater, vous avez trois options : mobile, tablette et descop Je vais sélectionner Descop. Et maintenant, cliquez sur Importer. OK, nous importons maintenant cette capture d'écran. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps. OK, allons-y. OK, nous allons maintenant modifier cette interface utilisateur. OK, il y a donc beaucoup de choses que vous pouvez faire. Par exemple, vous pouvez modifier ce texte. Tu peux écrire ce que tu veux ici. Vous pouvez également modifier la couleur de la police. Comme vous pouvez le voir, pour le moment, la couleur est le bleu, mais si vous voulez la changer en une autre couleur, peut-être le vert, sélectionnez simplement le vert, non ? Allons-y. D'accord, vous pouvez également changer la couleur de ce bouton, suffit donc de cliquer sur cette icône, et pour le moment elle est toujours bleue. Imaginons que je veuille changer la couleur en rouge. Il suffit donc de cliquer dessus. OK, allons-y. Et vous pouvez même utiliser l'IA pour vous faire une suggestion. Il suffit donc de cliquer sur Suggérer. Comme vous, IZR génère du nouveau contenu rien que pour vous Cela peut prendre quelques secondes. OK, alors attendez, les gars j'espère que cela ne prendra pas trop de temps. D'accord, à part ça, vous pouvez également remplacer cette image par votre propre image, non ? Vous pouvez donc cliquer sur cette image cliquer sur ces points de l'arbre et les faire défiler un peu. Mais vous pouvez télécharger votre propre image, non ? En outre, vous pouvez également modifier les positions et la taille de l'image. OK, alors maintenant, je vais clore ceci, et ce que nous allons faire ensuite est repenser cette interface utilisateur à l'aide de l'IA Il suffit donc de cliquer dessus, de sélectionner Générer une équipe et de sélectionner le bal de fin d'année, n'est-ce pas ? OK, alors maintenant écrivons la griffe. Refonte de cette interface utilisateur. Avec une équipe plus sombre et plus moderne. OK, maintenant je vais cliquer sur Générer. Vous pouvez également sélectionner certains de ces mots clés. Je vais donc sélectionner le dirt et le modern. OK, alors cliquez simplement sur Générer. OK, alors attendez, les gars, le processus peut prendre quelques minutes. J'espère que cela ne prendra pas trop de temps. Comme vous pouvez le constater, Izard a repensé avec succès l'interface utilisateur En fait, le processus a pris un peu plus de temps que prévu. Cela a pris presque 3 minutes, les gars. OK, alors maintenant, il suffit de cliquer sur Appliquer. OK, comme vous pouvez le voir maintenant vous postulez pour la nouvelle équipe, n'est-ce pas ? Allons-y. Regarde ça. Très cool, non ? OK, alors maintenant, si vous souhaitez exporter cette interface utilisateur, cliquez simplement sur Exporter. Et je vais télécharger cette image au format PNG. Il suffit donc de cliquer sur PNG et de cliquer sur Exporter, non ? OK, comme vous pouvez le voir maintenant, nous sommes en train de télécharger l' image. Alors, attendez. Très bien, nous avons téléchargé l'image avec succès. Allons-y. Très bien, les gars, je crois que c'est ça C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir. 9. Conversion de l'esquisse en conception interface avec Visily AI: Holgays, bon retour au cours. Dans cette vidéo, nous allons convertir les skats en design d'interface utilisateur à l'aide de PHisle AI Dans cet exemple, nous allons utiliser cette application SCATS, une application de gestion de l' inventaire des pieds Vous pouvez utiliser n'importe quel sket manuscrit et télécharger l'image, et l'IA sera capable de la convertir en UI Design OK, commençons. Tout d'abord, je vais me connecter. Alors, cliquons dessus. Je vais me connecter avec mon compte Gmail. Mais vous pouvez également vous connecter à l'aide de votre compte Github. Cela dépend entièrement de vous. OK, ça va prendre quelques secondes. Comme vous pouvez le voir, je me suis connecté avec succès. OK, maintenant cliquons sur Bienvenue dans facile, puis sur Commencer avec l'IA. Et vous serez redirigé vers cette page. OK, tout d'abord, nous allons télécharger l'image. Alors, cliquons dessus. Et je vais télécharger ce sketch. Cliquez sur Ouvrir, et nous allons écrire le bal de fin d'année, convertir ce croquis en design d'interface utilisateur. Pour le contexte, il s'agit interface utilisateur de l'application Foot Inventory Management. OK, c'est mon bal de fin d'année, et cliquons sur Générer. OK, ça va prendre quelques secondes. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps. Je suis tellement impatiente de voir le résultat. Eh bien, cela n'a pas pris trop de temps. Cela n'a pris que 2 minutes , voire moins de 2 minutes. L'IA a généré deux styles différents , le style un et le style deux. Mais pour l'instant, examinons d'abord le style 1. OK, allons-y. Des produits alimentaires. Nous avons trois robinets : listes d'épicerie et recettes actuelles. Frits Pantry et nous avons également le bouton Analyser. Regarde ça. Et nous avons également des alertes d'expiration. Et vous pouvez également cliquer sur ce bouton publicitaire pour ajouter d'autres aliments. Bon, maintenant jetons aussi un œil au style. Cliquons dessus. C'est donc fondamentalement la même chose. La structure est la même, mais la couleur est différente. Pour être honnête avec vous, je préfère le style 1 car je pense que le design est plus adapté à une application de gestion des stocks alimentaires. Et vous pouvez également cliquer sur Openboard pour être redirigé vers la page d'édition OK, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. Au revoir. 10. Concevoir une page d'inscription simple sur Figma ma: Bon sang, bon retour sur le parcours. Dans cette vidéo, nous allons en apprendre davantage sur l'ICMA. Pour ceux d'entre vous qui connaissent déjà l'ICMA, n'hésitez pas à sauter cette vidéo Toutefois, si vous êtes nouveau à ICMA et que vous souhaitez en savoir plus, assurez-vous de porter une attention particulière à cette vidéo OK, alors commençons. La première chose que vous devez faire est de vous inscrire. Il vous suffit donc de cliquer sur Commencer gratuitement. OK, je vais donc m' inscrire en utilisant mon compte Gmail, alors cliquez simplement sur Continuer avec Google. Comme vous pouvez le voir, j'ai été redirigé vers mon Daskbk. J'ai donc plusieurs projets ici sur Figma. OK, alors maintenant nous allons créer un nouveau fichier, non ? Il suffit donc de cliquer sur Fichier de conception. Et cliquez simplement sur Créer un nouveau design. OK, comme vous pouvez le voir, nous avons été redirigés vers la page d'édition. OK, donc dans cette vidéo, je vais vous apprendre étape par étape comment concevoir interface utilisateur simple pour une page d'inscription. OK, alors commençons. OK, je vais donc sélectionner Frame. OK, donc ça va être l'application mobile, non ? Ensuite, je vais sélectionner un rectangle, et nous allons créer trois rectangles Le premier concerne donc le nom d'utilisateur. Le deuxième est pour l'e-mail et le troisième pour le mot de passe. OK, vous pouvez donc créer deux autres rectangles manuellement, mais dans ce cas, je vais juste les copier-coller, non OK, allons-y. OK, alors ensuite, je vais créer un autre angle de rupture ici, et ce sera un bouton d'inscription. OK, cool. Ensuite, nous allons ajouter du texte à cette conception d'interface utilisateur. OK, alors cliquez simplement sur le texte OK, donc je vais taper quelque chose comme ça. Inscrivez-vous. Page, elle est trop petite, alors nous allons l'agrandir un peu, non ? Comme vous pouvez le voir, la taille du téléphone est de 12, donc je vais la changer à 35. OK, allons-y. Et je vais le mettre au centre. OK, très cool. Ensuite, je vais également ajouter du texte pour manger le rectangle. Alors, cliquons sur cette icône. OK, je vais donc changer la taille du téléphone 35-20. OK, alors écrivons quelque chose ici. Nom complet D'accord, nous allons donc copier et coller ceci. OK, donc ça va être une adresse e-mail. Et le troisième sera le mot de passe. D'accord, lorsque l'utilisateur souhaite s'inscrire, il doit saisir son nom complet, son adresse e-mail et son mot de passe. OK, alors maintenant, je vais ajouter du texte à ce bouton. Alors, cliquons dessus. OK, donc je vais taper « s'inscrire ». Et nous allons mettre cela au centre. OK, allons-y. Donc, si l'utilisateur souhaite s'inscrire, il doit cliquer sur ce bouton, n'est-ce pas ? OK, alors ensuite, je vais changer la taille et les couleurs, les gars. OK, donc je vais bloquer ça. Allons-y. Comme vous pouvez le voir, le boulanger et la couleur sont le blanc, donc je vais le changer en bleu clair. OK, je pense que c' est suffisant. Regardez ça, les gars. Très cool, non ? Vous pouvez également modifier la couleur de ce bouton. Comme vous pouvez le voir, pour le moment, la couleur est grise, donc je vais changer la couleur en vert clair comme ça. OK, ça a l'air plutôt cool. OK, les gars, c'est ainsi que vous concevez l'interface utilisateur manuellement sur VIC 11. Créer un diagramme de flux d'utilisateur avec Miro: Bonjour, les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons concevoir un flux utilisateur à l'aide de Miro Le flux utilisateur est un élément très important de la conception de l'expérience utilisateur, alors assurez-vous porter une attention particulière à cette vidéo. OK, commençons. Tout d'abord, je vais me connecter. Alors, cliquons sur Accéder au tableau de bord, et je vais me connecter à l'aide de mon compte GML Et cliquez sur Continuer. Comme vous pouvez le voir, je me suis connecté avec succès, et voici mon tableau de bord. OK, maintenant cliquons sur AI Playground, et vous serez redirigé vers la page d'édition. Et cliquons sur cette icône. Et écrivons l'invite. Créez un diagramme de flux utilisateur pour l'application AI Travel Planner. Dans cet exemple, nous allons concevoir le flux utilisateur pour AI Travel Planner. Cette application comporte trois entraves principales. Le premier est celui des billets d'avion bon marché et de la recherche d'hôtels. Le deuxième obstacle est le suivi du budget de voyage, et le troisième est le générateur d'itinéraires par IA OK, maintenant, cliquons sur Générer. Cela prendra quelques secondes, peut-être 20 ou 30 secondes. Donc, c'est exactement comme ça que ça se passe. J'espère que cela ne prendra pas trop de temps. OK, voici le schéma. Je vais fermer ça. OK, allons-y. Et cliquons sur cet ajout à Canvas. Regardez ce diagramme de flux utilisateur. La première est donc de se connecter. Ensuite, une fois connecté, l'utilisateur devra choisir l'un de ces trois filtres. Le premier est un outil de recherche de vols et d'hôtels bon marché. Ainsi, l'utilisateur pourra rechercher hôtel le moins cher et les billets d'avion les moins chers. L'utilisateur pourra alors consulter les résultats et appliquer des filtres. Et à la fin du processus, l'utilisateur pourra réserver le vol ainsi que l'hôtel. C'est donc le premier monteur. Le deuxième facteur est le suivi du budget des voyages. Ainsi, l'utilisateur pourra définir le budget. L'utilisateur pourra ajouter des dépenses, modifier les dépenses, et le système vérifiera si les dépenses sont supérieures au budget, puis l'utilisateur recevra des notifications ou des alertes. Et voici le troisième installateur, le générateur d'itinéraires par IA. Donc, tout d'abord, l'utilisateur va saisir les préférences et également saisir les destinations de voyage. Ensuite, l'IA va générer l'itinéraire. Ensuite, l'utilisateur va revoir ou modifier l'itinéraire. Et voici la dernière étape. L'utilisateur va enregistrer l'itinéraire. OK, les gars, c'est le flux utilisateur de cette application. Si vous êtes un concepteur UIUX, il est très important que vous compreniez le flux d'utilisateurs de votre application Il est très important que vous compreniez comment votre application sera utilisée. OK, je pense que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo. 12. Analyser l'attention de l'utilisateur avec l'IA AI: Bon sang, bon retour sur les couvertures. Dans cette vidéo, nous allons analyser les attentions des utilisateurs à l' aide de ce plugin Figma Le nom du plugin est Attention Inside. Comme vous pouvez le lire ici, améliorez les performances de conception grâce à l'analyse avant le lancement Cet outil d'intelligence artificielle sera donc en mesure prédire instantanément où les utilisateurs s' occuperont d'interagir avec vos conceptions, ce qui vous gagner du temps et d'éviter les corrections après le lancement. OK, alors commençons maintenant. La première chose à faire est de cliquer sur le haut et de terminer. Comme vous pouvez le voir, j' ai plusieurs fichiers ici, je vais donc sélectionner cette application de jeu de fichiers. Comme vous pouvez le voir, j'ai été redirigé pour corriger ma page d'édition. OK, la prochaine chose que vous devez faire est de sélectionner le cadre que vous souhaitez analyser. OK, alors allons-y. Par exemple, dans ce cas, je vais analyser ce cadre, il suffit donc de le sélectionner. Ensuite, cliquez simplement sur Exécuter et sélectionnez Analyser le design. Comme vous pouvez le constater. Ce plugin Figma possède plusieurs fonctionnalités telles que le bureau, le mobile, les affiches, étagères d'emballage et le matériel marketing OK, je vais donc sélectionner Deskcop et Landing parce que, comme vous pouvez le voir, c'est comme une page d'inscription, donc je vais la considérer comme une page de destination Alors cliquez dessus OK, comme vous pouvez le voir maintenant, l' attention intérieure est analyser ce cadre, alors attendez. J'espère que cela ne prendra pas trop de temps. OK, alors allons-y. Voici le résultat. Au fait, si vous n'avez pas créé compte Attention Inside, vous devez en créer un. Alors allez simplement sur ce site Web, non ? Et cliquez simplement sur Essayer maintenant gratuitement. Vous devrez vous connecter à l'aide de votre compte Gmail. Bon, alors revenons à la FICMA. Comme vous pouvez le constater, après avoir effectué l'analyse, AI a généré cette carte des succès. Sur la base de cette carte des succès, il semble donc que l'attention des utilisateurs se concentre principalement sur ces deux parties D'accord, vous pouvez donc également sentir la carte de mise au point. Carte de contraste. Donc, lorsque vous concevez votre interface utilisateur, vous devez en tenir compte de manière concentrée , n'est-ce pas ? Et ici, j'ai également attribué un score de focus. Comme vous pouvez le constater pour le score de concentration, nous avons obtenu 100 points, ce qui est très bien. Vous vous demandez peut-être ce qu'est Fokicore. Il mesure donc le niveau de concentration d' attention dans votre image. OK. Et pour une clarté optimale, nous en avons obtenu 77, ce qui est également très bon à mon avis, les gars. OK, alors ensuite, je vais cliquer sur More Inside Okay, nous devrons donc nous connecter. Comme vous pouvez le constater, vous avez deux options. Vous pouvez vous connecter à l'aide de votre compte Facebook. Vous pouvez également vous connecter à l'aide votre compte Gmail, c'est donc à vous de décider. OK, dans ce cas, je vais me connecter avec mon compte Gmail. OK, comme vous pouvez le voir, nous avons été redirigés vers le tableau de bord Attention Inside. OK, il suffit de cliquer dessus. Vous pouvez télécharger l' analyse. Il suffit donc de cliquer dessus. Ensuite, cliquez simplement sur la vue actuelle. OK, alors attendez, les gars. Cela peut prendre quelques secondes. C'est bon. Comme vous pouvez le constater, nous avons téléchargé avec succès la carte à succès. OK, alors ouvrons ça. OK, ça a l'air très cool. La prochaine chose que nous allons faire est de télécharger le rapport. OK, alors cliquez simplement sur Obtenir le rapport. Alors, attendez. Je vais peut-être prendre quelques secondes. OK, vous devrez donc sélectionner le format de fichier. Deux options s'offrent à vous. Le premier est PDF et le second est PowerPoint. Je vais sélectionner PDF. OK, alors maintenant il génère le rapport. Alors attendez, les gars. J'espère que cela ne prendra pas trop de temps. OK, nous sommes en train de télécharger le fichier PDF. Alors, attendez. OK, allons-y. Le rapport a été téléchargé avec succès. Très bien, les gars, je crois que c'est ça. C'est tout ce que tu as besoin de savoir. Je vous verrai dans la prochaine vidéo où nous allons mener une étude sur l' expérience utilisateur. Je vous y verrai. Au revoir. 13. Mener des recherches UX avec UX Pilot: Bonjour les gars. Bienvenue dans le cours. Dans cette vidéo, nous allons mener une étude sur l'expérience utilisateur à l' aide d'UX Pilot. OK, il y a donc beaucoup de choses que vous pouvez faire. La première est donc de générer un wireframe. Vous pouvez également transformer le texte en Inside. UX Pilot propose également une révision de la conception AIB UX, vous pouvez donc télécharger votre conception d'interface utilisateur Cet outil analysera automatiquement votre conception et vous donnera des recommandations Vous pouvez générer un atelier personnalisé et bien d'autres encore. Et ne vous inquiétez pas, les gars. L' utilisation de la boutique est totalement gratuite. D'accord, je vais donc vous montrer les sections sur les prix. Allons-y. Comme vous pouvez le constater, votre pilote propose un plan gratuit. De toute évidence, il existe certaines limites en ce qui concerne le plan gratuit. Par exemple, vous ne pouvez obtenir un aperçu que pour les entretiens avec les utilisateurs. Vous ne pouvez obtenir un aperçu que pour l'entretien de conception. Et vous ne pouvez avoir que cinq modèles d'expérience utilisateur. Assurez-vous donc que vous êtes pleinement conscient de ces limites. OK, alors commençons maintenant. La première chose à faire est de vous inscrire, suffit donc de cliquer sur Démarrer gratuitement. Vous allez être redirigé vers cette page. OK, je vais donc m'inscrire en utilisant mon compte Gmail, il suffit de cliquer dessus. Comme vous pouvez le voir, j'ai été redirigé vers mon tableau de bord. OK, donc dans cette vidéo, nous allons nous concentrer principalement sur la révision du design. OK, alors passez en revue le design UX, améliorez votre design, diffusez votre créativité avec de nouvelles idées et affinez vos compétences en UX grâce à des critiques de conception basées sur l'IA Bien, lorsque vous effectuez analyse de l'expérience utilisateur, votre objectif principal est de trouver le design le plus idéal pour vos clients, n'est-ce pas ? Vous voulez vous assurer que l'utilisateur de votre application ou de vos sites Web bénéficiera la meilleure expérience possible lorsqu'il interagit avec votre application ou votre site Web. Et c'est ce que nous allons faire dans cette vidéo. D'accord, cet outil est donc très facile à utiliser. Tout ce que vous avez à faire est de télécharger le design. D'accord, si vous vous souvenez, à partir des vidéos précédentes, nous avons créé plusieurs designs d'interface utilisateur. OK, donc dans cet exemple, je vais utiliser le design créé par Musso AI Je vais donc télécharger cette image. C'est bon. N'hésitez pas à télécharger les designs que vous souhaitez. Cela dépend entièrement de vous. OK, alors ouvrez simplement mon dossier. OK, allons-y. Et je vais cliquer sur Ouvrir. OK, alors maintenant il télécharge le design. Alors, attendez. Le processus peut prendre quelques secondes. J'espère que cela ne prendra pas trop de temps. OK, allons-y. OK, maintenant je vais cliquer sur Commencer l'évaluation. L'IA va donc maintenant analyser ce design. Et l'IA va nous donner des recommandations, non ? Comment améliorer l'expérience utilisateur. OK, alors attendez, les gars. L'examen peut prendre quelques minutes. J'espère que cela ne prendra pas trop de temps. Et je suis très heureuse de lire la critique. OK, allons-y. Très bien, alors maintenant, lisons la critique. Tout d'abord, nous avons la clarté et la cohérence. Ainsi, le bouton CTA ou Call to Action, start chat, manque de contexte. Envisagez de reformuler pour démarrer chat de jeu ou similaire pour vous connecter au service proposé Nos sections de quiz clarifient l'objectif avec un sous-titre expliquant les surfaces fournies Pour le guide de configuration rapide, nous devons expliquer quelles fonctionnalités peuvent être consultées par Linkin vers un guide plus détaillé ou expliquer les étapes de configuration Nous ne devons donc pas supposer que les utilisateurs connaissent l'interface utilisateur, n'est-ce pas ? Enfin, nous devons garantir un style iconographique cohérent pour les avatars personnalisés, le chat vocal et textuel, la détection des jeux et la diffusion en direct afin de maintenir une cohérence visuelle D'accord, ce sont donc des recommandations concernant la clarté et la cohérence. Lisons maintenant la revue de la hiérarchie visuelle. D'accord, nous devons donc d'abord augmenter le contraste du texte de navigation, des fonctionnalités du tableau de bord, etc., par rapport à l' arrière-plan pour une meilleure lisibilité Il est donc recommandé d'utiliser une couleur différente. OK, alors passons à la seconde. Rejoignez les sections d'aventure, nous devons différencier démarrage du bouton de démarrage du chat pour distinguer Bitwin qui démarre un chat et s'inscrit en tant que nouvel utilisateur OK, alors peut-être que ce sera pareil. Il suffit d'utiliser une couleur différente. Enfin, pour les sessions d' enregistrement, nous devons augmenter l' espacement entre les options d' inscription de Google et les autres options d' inscription par e-mail pour de meilleures séparations Très bien, les gars, voici quelques recommandations que vous devez prendre en compte si vous souhaitez améliorer l'expérience utilisateur de votre application ou de votre site Web. 14. Conclusion et résumé: gars de Holi. Bienvenue dans le cours. Dans cette vidéo, je vais résumer tout ce que nous avons appris dans ce cours, et je vais également partager des conseils et astuces pour améliorer la qualité de la conception de votre interface utilisateur. Bien, commençons par le premier sujet, la recherche sur les utilisateurs. Vous devez effectuer des recherches auprès des utilisateurs pour comprendre les besoins, les comportements et les préférences de votre public cible. Ces informations orienteront les décisions de conception et garantiront que l'interface correspond aux attentes des utilisateurs D'accord, tout d'abord, vous devez décider quel est votre public cible. Par exemple, si vous créez un outil d'analyse des ventes, votre public cible est évidemment constitué de professionnels de la vente. Tu dois poser des questions comme celle-ci. Pour les professionnels de la vente, qu'est-ce qui est le plus difficile lorsqu'ils analysent les données de vente ? Quel outil supplémentaire peut être créé pour les aider à analyser les données de vente ? Ce sont donc des questions que vous devez vous poser. Bien, revenons à la carte mentale, et parlons du deuxième sujet, les tests d'utilisabilité. Vous devez effectuer des tests d'utilisabilité avec de vrais utilisateurs pour obtenir vos commentaires sur l'interface, fonctionnalités, l'utilisabilité et l'expérience utilisateur globale. En outre, les tests itératifs vous permettent d'améliorer continuellement votre produit en fonction des commentaires des utilisateurs Vous avez donc deux options. Vous pouvez trouver une vraie personne pour tester votre application mobile ou votre site Web et obtenir les commentaires des utilisateurs, ou vous pouvez également utiliser des outils d'IA tels que UX Pilot ou Cloud. Vous pouvez télécharger la capture d'écran de votre interface utilisateur et vous pouvez écrire le bal de fin d'année comme ceci, effectuer des tests d'utilisabilité complets. Positionnez-vous en tant qu'utilisateur de cette application. Fournissez des commentaires pertinents. OK, donc c'est mon bal de fin d'année, un bal très simple. Et il faudra quelques secondes, peut-être dix ou 20 secondes à l'IA pour générer la réponse. OK, allons-y. Je vais effectuer un test d' utilisabilité complet pour le banc d'essai d'analyse des ventes du point de vue de l'utilisateur D'accord, voici donc les premières impressions et l'expérience globale. OK, il s'agit d' une équipe noire solide, propre et professionnelle avec un bon contraste, informations claires, une hiérarchie avec un regroupement logique, et il y a deux préoccupations initiales. Trois tentes de données dépourvues de champs d'action clairs et d' informations contextuelles limitées pour la prise de décision Et ici, nous avons des commentaires détaillés sur l'utilisabilité. Quatre problèmes ont été identifiés : des emplacements actuels peu clairs, des étiquettes de navigation générées, des chemins de navigation manquants et des fonctionnalités de recherche Et nous avons ces trois recommandations. OK, des commentaires très sympas et très perspicaces, les gars. Et faisons défiler la page vers le bas, et l'IA vous donnera également un résumé. Regarde ça. Nous avons des recommandations prioritaires. Nous avons le point de vue de l'utilisateur final. D'accord, lisons ceci. Ce que j'aime Le tableau de bord a une apparence professionnelle et présente les informations de manière claire. Ce qui me frustre, c'est que je peux voir les données mais que je ne peux pas agir en fonction de celles-ci. Je sais que mon chiffre d'affaires total est de 2,5 millions de dollars, mais je ne sais pas si c'est une bonne mauvaise chose ou si cela se compare au précédent ou à mes objectifs. Le tableau est beau, mais ne me donnez pas les détails dont j'ai besoin pour prendre des décisions. Et voici l'essentiel. Cela ressemble à un rapport statique plutôt qu'à un outil d'analyse interactif. J'ai besoin de davantage de contexte, de comparaison et d'interactivité pour réellement analyser les performances de mes cellules et prendre des décisions éclairées Et le score global d'utilisabilité est de six sur dix. Bon, maintenant, revenons à la carte mentale, et parlons du troisième sujet : la typographie lisible Vous devez utiliser une typographie lisible et de taille appropriée Tenez compte de facteurs tels que le style du téléphone, interligne et le contraste pour améliorer la lisibilité, en particulier pour les longs blocs de texte C'est très important, les gars. OK, les gars, c'est la fin du cours. Merci beaucoup d'avoir suivi le cours et je vous souhaite bonne chance. Au revoir