Conception d'interface utilisateur, modèles de conception d'interface utilisateur — Enseigné par un instructeur UX/UI universitaire

1. 1 cours ajouté sur les motifs de conception: Bienvenue dans le cours sur les modèles de conception de l'interface utilisateur. m'appelle Erin Lawrence et je suis concepteur UX principal et fondateur d'une agence UX appelée UX Honey à San Francisco, en Californie. Je suis également professeur UX où j'enseigne design UX avancé à l' Academy of Art University, également ici à San Francisco. Ce cours est un guide très pratique pour comprendre l' expérience utilisateur et les modèles de conception de l'interface utilisateur. Les modèles de conception sont un ensemble de directives et de règles relatives à l' utilisation des produits et des éléments d' interface utilisateur par les utilisateurs . compréhension de ces modèles est indispensable pour tout concepteur d' interface utilisateur ou d'interface utilisateur. Il s'agit d'éléments tels que les champs de formulaire et les listes déroulantes, les barres de navigation et cases à cocher, les boutons radio et les barres d' onglets et les sélecteurs de date, etc. Si vous envisagez concevoir une expérience utilisateur. ou conception de l'interface utilisateur. Et vous n'avez pas une compréhension approfondie de ces modèles de conception. C'est comme être un boulanger de gâteaux sans rien savoir sur les ingrédients du gâteau. Parce que ce sont essentiellement les ingrédients qui composent un gâteau. en va de même pour la conception de l'interface utilisateur. La conception de l'expérience utilisateur, ou conception UX, a beaucoup à voir avec la compréhension des besoins de l'utilisateur et du contenu dont il a besoin pour atteindre son objectif. Et c'est ce contenu qui fait de l'interface. En d'autres termes, une interface utilisateur n' est que de l'immobilier pour le contenu. Et comprendre quel est le meilleur immobilier à utiliser pour un contenu spécifique a beaucoup à voir avec modèles de conception et les composants de l' interface utilisateur. C'est de cela que se résume cette classe. Chaque vidéo de la classe, nous allons faire un plongeon approfondi et aborderons un sujet ou un composant d' expérience utilisateur suivant. Nous allons commencer par des choses comme les champs de formulaire, les boutons, les listes déroulantes, les sélecteurs de dates, les boutons radio, les cases à cocher, les bascules, les formulaires d'adresse, les forums de recherche, barres d' onglets, les barres de titre, les accordéons, les onglets, les infobulles, ombres, miniatures, carrousels, modaux, lightbox comme menus et tiroirs, assistants, chapelure, pagination, icônes, photos et tous ces sujets auront des explications, des exemples réels, bonnes pratiques sur la façon de les utiliser, pourquoi les utilisez-vous ? Et mon préféré, nous aurons aussi des exemples à faire et à ne pas faire. J'ai inclus tout le matériel source dans la classe que vous pouvez télécharger et que vous pouvez conserver pour toujours. Et vous pouvez également télécharger le fichier Figma que j'ai utilisé pour cette classe afin que vous puissiez l'avoir dans votre application Figma, également pour toujours. Et aussi en prime, nous allons prendre tous ces modèles de design. Et j'ai ajouté un espace supplémentaire à la classe. Eh bien, c'est plus basé sur des projets, où nous allons utiliser l'outil de conception figma. Et nous allons construire tous ces composants pour voir à quoi ils ressemblent et comment les utiliser dans des prototypes en direct. Des choses comme les boutons radio personnalisés où l'état de survol et l'état de sélection sont ici. Nous allons faire des menus qui glissent vers l'intérieur, glissent. Nous allons réaliser des modaux, des accordéons qui utilisent techniques d'animation intelligentes dans Figma. Nous procéderons à la validation en ligne et apprendrons tout sur la validation en ligne dans la classe. Ensuite, nous l'appliquerons à un prototype pour permettre à quelqu'un de voir les exigences relatives au mot de passe, de valider au fur et à mesure qu' il permettre à quelqu'un de voir les exigences relatives au mot de passe, saisira un mot de passe qui a les exigences correctes et d'appuyer sur Créer. Nous allons faire des spinners animés ici pour imiter le chargement de la création de compte, faire des listes déroulantes qui imitent le défilement d'une liste déroulante réelle et l'état de sélection. Ensuite, nous allons apprendre comment les faire les appareils mobiles. Plus. Et ce qui est génial, c'est que j'ai également construit un fichier Figma entier où la rangée supérieure de chacune des sections ici a été conçue pour prototype prêt à l'emploi que vous pouvez utiliser un exemple de sélection. Et puis, pendant les vidéos, nous parcourrons chacune de ces vidéos et nous le ferons ensemble pour tous ces différents types de motifs de conception. Et nous ferons également la même chose pour tous les modèles mobiles. Donc, non seulement vous obtenez les meilleures pratiques et les choses à faire et à ne pas faire. Vous allez également vous salir les mains et apprendre à le faire avec l'outil de conception figma. Ce cours est idéal pour tous ceux qui étudient pour devenir concepteur UX ou concepteur d'interface utilisateur. Ou si vous êtes déjà sur le terrain et que vous désirez rehausser ces motifs. Très bien, c'est l'introduction. Je m'appelle Erin Lawrence et j'espère que vous apprécierez la classe. 2. Structure des cours: Avant de commencer la classe, je voulais faire une vidéo rapide sur la structure de chaque vidéo et sur ce que nous allons couvrir. Chaque vidéo va explorer un composant d'interface utilisateur et les un composant d'interface utilisateur modèles de conception existants qui s' associent à ce composant. Chacun, je vais donner une brève explication de ce qu'est le composant, origines du composant. Nous parlerons des avantages et des inconvénients. Nous parlerons de cas d'utilisation de ce composant. Je vais montrer comment il est construit, comment sont les différents états du composant, quoi il ressemble. Nous allons examiner des exemples réels. Je vais vous montrer comment combiner les composants existants ensemble. Nous allons faire et ne pas faire pour le composant. Vous pouvez dire la même chose ici pour les onglets. Encore une fois, les origines, ce qu'est un onglet, exemples de bonnes pratiques mobiles et Web. Et encore une fois, nous terminerons sur les choses à faire et à ne pas faire pour chaque composant. Très bien, je vous verrai bientôt. 3. Introduction du cours: Très bien, bienvenue dans la classe. Ce n'est qu'une introduction rapide à quoi s'attendre pour la classe. Et je vais également parler un peu conception de l' interface utilisateur ainsi que des modèles de conception et de conception UX. Mais il suffit de commencer par le haut. Oui, la conception de l'interface utilisateur est celle que les concepteurs de processus utilisent pour créer des interfaces et des systèmes d'exploitation logiciels ou de périphériques. Encore une fois, en se concentrant sur le contenu et la convivialité ainsi que sur la hiérarchie des contenus Et la conception UX consiste à comprendre les besoins de vos utilisateurs et la façon dont ils utilisent une application ou une expérience utilisateur spécifique. Il y a beaucoup de chevauchement entre les concepteurs UX et les concepteurs d'interface utilisateur. Le concepteur d'interface utilisateur traduit en hiérarchie les besoins des utilisateurs issus de vos tests d'observation ou vos recherches en hiérarchie de contenu et de contenu. Et cet ensemble d'informations sera utilisé s' affiche dans l'expérience utilisateur d'une application. Être un bon concepteur d'interface signifie que vous avez une bonne compréhension de la une bonne compréhension de la hiérarchie de contenu et pour laquelle vous devez concevoir. Et surtout, quels types de composants et de modèles immobiliers de l' interface utilisateur communiqueront le mieux et serviront cette hiérarchie de contenu et de contenu. C'est là que la compréhension des modèles de conception est très utile et c'est ce que représente cette classe. Les modèles de conception ne sont qu'un ensemble de règles et de règles d'interface utilisateur qui concernent la façon dont les utilisateurs utilisent les produits et éléments d'interface utilisateur et comprennent ces modèles de conception. C'est un must pour tout le monde en conception UX ou UI. Et ce sont des éléments tels que les champs de formulaire et les listes déroulantes , les barres de navigation et les barres d'onglets. Et je vais parler de tout ça ici dans la seconde prochaine. Les modèles de conception sont extrêmement utiles, principalement parce qu'ils nous permettent d'économiser du temps et l'argent et nous obtiennent de meilleurs résultats plus rapidement et plus rapidement. Et c'est une philosophie fondamentale pour le développement d'applications agiles. Et il demande aux concepteurs que nous puissions tirer parti de ces modèles et les utiliser dans nos décisions quotidiennes en matière de conception. Parce que ces modèles et ces composants sont utilisés tous les jours dans de nombreuses expériences utilisateur. Et les utilisateurs n' ont pas été habitués à la façon dont ces modèles étaient. Nous savons donc essentiellement qu'ils fonctionnent et nous pouvons les exploiter au jour le jour. Ce cours va vous fournir un guide très pratique pour comprendre ce que sont ces modèles de conception d'interface utilisateur, et comment les concepteurs les utilisent, quelles règles s'appliquent à eux ? Exemples réels et réels. Chacun d'entre eux aura des choses à faire et à ne pas faire pour chaque composant. Et encore une fois, la maîtrise de ces modèles et composants vous aidera à devenir un meilleur concepteur, mais aussi à faire de vous un meilleur décideur quant à l'immobilier de l' interface utilisateur à utiliser pour le contenu et hiérarchie de contenu dans laquelle vous travaillez. Encore une fois, ça va vous rendre plus rapide, vous rendre meilleur. Et cela vous aidera à appliquer une bonne logique de décision sur la raison pour laquelle vous avez utilisé un certain modèle ou un modèle de conception dans votre conception. Nous allons couvrir beaucoup de choses. Nous allons couvrir les champs étrangers, les boutons, les listes déroulantes, les sélecteurs de date, les boutons radio, les cases à cocher et les bascules. Forums d'adresse et formulaires de recherche. onglets intitulées barres, accordéons et onglets, infobulles et ombres, miniatures et carrousels, modaux, boîtes lumineuses, menus et tiroirs , assistants, chapelure, pagination, icônes et photos, et chacune des ces exemples, encore une fois, nous allons avoir les meilleures pratiques d'où ils viennent, quand les utiliser, quand ne pas les utiliser. Et nous aurons aussi des choses à faire et à ne pas faire. À la fin, encore une fois, c'est une bonne information. Si nous allons passer au niveau supérieur, si vous le souhaitez, nous allons apprendre comment réaliser tous ces éléments dans Figma et Figma comme outil de conception. Et je vais fournir un dossier. Et ce dossier ressemble à ça. Il est déjà préréglé, préconçu. Ce que nous allons faire, c'est que nous allons passer en revue et créer tous les différents composants dont nous avons parlé et concevoir des modèles dont nous avons parlé en classe, comme des boutons radio personnalisés. ou même ce que sont les boutons radio. Nous allons créer des modaux, sont des menus comme celui-ci et le fermer fera des modaux. Et apprenez comment, non seulement pour en apprendre davantage sur ces schémas, comment les faire et les meilleures pratiques, mais nous apprendrons également comment les atteindre jusqu'à la fin. Nous avons des accordéons ici. Vous pouvez voir cette interaction, la validation en ligne pour la création de compte ici, en plaçant des spinners à l'intérieur d' un bouton ici pour afficher les états de chargement. Et nous allons faire des déroulements et comment les créer dans Figma. Nous ferons même tous ces efforts pour les applications mobiles. Apprenez également à le faire dans des prototypes mobiles. Nous aborderons donc les meilleures pratiques Web. Nous le ferons également sur mobile. Et nous appliquerons tous ces modèles que nous allons apprendre dans l'outil de conception figma, que tous les fichiers soient prêts à être utilisés. Il vous suffit donc de télécharger le fichier. J'ai l'exemple préconstruit pour que vous puissiez le distinguer. Pendant le cours, ce que nous allons faire, c'est que nous allons le regarder et voir comment cela fonctionne , puis nous allons le construire ensemble. Donc, ça va être super amusant, c'est engageant. Et j'espère vous y voir et je vous verrai dans le prochain cours. Au revoir. 4. Matériel du cours: Ok, je voulais juste faire une brève vidéo sur le matériel de classe qui prend environ 30 secondes ou une minute ici, j'ai deux types de formats différents. J'ai tout le matériel en format PDF, que je vais ouvrir ici dans une seconde et vous montrer. J'ai également tout le matériel construit dans Figma, l'outil de conception. J'ai inclus ce fichier, c'est un point, c'est la classe Figma file zip. Il suffit de double-cliquer sur ce fichier. Et il va ouvrir un dossier. Dans ce dossier, j'ai un fichier de configuration de points Figma, et j'ai également des instructions de classe sur la façon d'ouvrir ce fichier, mais je me suis dit que je ferais une vidéo pour vous aussi. La chose à signaler, si vous ouvrez le fichier Figma, c'est que vous ne pouvez pas double-cliquer sur le fichier Figma et l'ouvrir. Vous obtiendrez cette erreur ici. Et je suis sur un Mac ici, juste en tête. Ce que vous devez faire, c'est que vous devez faire glisser ce fichier dans les sections brouillons de votre application Figma, en haut à gauche. Votre section brouillons peut être un peu différente de mienne puisque j'ai tous ces fichiers ici. Encore une fois, les brouillons de sections en haut à gauche. Prenons ce fichier Figma, faites-le glisser. Vous verrez ce contour bleu autour de l'outil Figma. C'est génial. Cela signifie que Figma va ouvrir cela et cliquons dessus et faites-le glisser. Et c'est un gros dossier. Il faudra peut-être une seconde pour que Figma ouvre ça. Pendant que cela s'ouvre, vous pouvez prendre n'importe lequel de ces formats ici, du matériel au format PDF, et ceci suit avec la classe. Donc, la première classe que nous allons faire des champs de forme. Encore une fois, c'est un gros fichier, donc je dois m'ouvrir dans une application d'aperçu, zoomer. Ensuite, vous pouvez simplement naviguer d'ici, partir du début, parcourir la droite de la classe et avoir tout ce matériel ici. Encore une fois, je suis un grand fan. Vous devriez avoir ces choses pour toujours, que vous l'ayez au format PDF ou Figma. Allons voir Figma. OK, c'est cool. Il est donc toujours en train de charger le fichier. Et là encore, comme je l'ai dit, c'est un gros dossier. Ok, super. Il s'était chargé. Allons-y et ouvrons-le très vite. L'avantage du fichier Figma ici est qu'il s' agit de composants actifs, ce qui signifie que vous pouvez saisir ces éléments et les utiliser pour vos conceptions. Comme je l'ai dit, nous allons faire un cours à la fin où nous allons construire tous ces éléments. Mais ils sont tous vivants. Vous pouvez zoomer sur Figma, supposons que vous vouliez ce sélecteur de date ici. Vous pouvez aller chercher ce sélecteur de dates. J'ai tous les champs de formulaire. J'ai un tas de boutons ici que vous pouvez saisir et utiliser et les champs de formulaire ici sont différents styles que vous pouvez utiliser et ce sont tous des composants en direct que vous pouvez saisir. Je n'ai pas eu tout un tas d' icônes ici que vous pouvez en saisir deux. Encore une fois, que vous, en ce qui concerne le matériel de classe, que vous souhaitiez le fichier Figma ou que vous souhaitiez également le format PDF, n'a pas vraiment d'importance. Vous n'en avez même pas besoin. Les vidéos sont géniales, elles couvrent beaucoup de bons contenus, mais comme je l'ai dit, je suis un croyant, vous devriez avoir ce matériel pour toujours et y revenir quand vous en avez besoin. Je vous verrai plus tard. Au revoir. 5. Champs de formulaire: Très bien, bienvenue dans les champs de formulaire. Les facteurs d'un bon champ de forme ne sont que quelques éléments. Ensuite, nous aborderons différents styles et états communs et nous plongerons en profondeur dans les champs de formulaire et les cas d' utilisation pour eux, mais ils sont généralement faciles à lire. Ils ont des textes clairement étiquetés et des textes de forme. Il est facile de cliquer sur un texte de saisie. Ils utilisent bien les textes fantômes et je parlerai beaucoup de textes fantômes, que c'est un attribut important d'un champ de formulaire et qu'il a un état défini comme survol actif désactivé error. Je vais entrer dans différents exemples de ces états. Il dispose de biens immobiliers pour les messages d'erreur et affiche un message d'erreur clair indiquant ce qui a un message d'erreur clair indiquant ce qui erré et quel champ de formulaire n'a pas d'erreur. il est facile de comprendre quels champs de formulaire sont requis, ainsi que quels champs de formulaire sont facultatifs. Allons dans certains styles remplis de formulaires. Il existe cinq styles de champs étrangers les plus courants que vous voyez sur le Web et les applications. Une chose à mentionner également, c'est que les champs de formulaire y sont très importants. En fait, l'un des éléments d'interface utilisateur les plus importants de l'expérience utilisateur et des applications dont nous disposons. Seulement parce qu'il extrait des informations de nos utilisateurs. Nous apprenons à connaître des informations à leur sujet. Il aide à créer du contenu. C'est cette barrière entre notre application, ou c'est l'entonnoir de communication entre notre application et notre utilisateur. Si l'utilisateur veut dire quelque chose à votre application, cela se produira dans un champ de formulaire. Il est également important pour nos services commerciaux, comme si vous êtes une entreprise qui vend des produits que vous avez besoin de personnes pour acheter des produits chez vous. Et lorsqu'ils sous-produits, ils s'engagent sur un champ de formulaire. En tant que concepteur UX, il est donc important que nous ayons une très bonne idée des règles, meilleures pratiques et des modèles entre les champs de formulaire. La première chose que nous avons ici est un formulaire détaillé rempli. C'est le plus courant. Il s'agit de l'état par défaut, ce qui signifie qu' il s'agit de l'état, mais il n'est pas encore survolé ou saisi, juste le premier état que l'utilisateur verrait un formulaire hiérarchique. C'est juste le rectangle ici, et il a une couleur grise contour. Ensuite, nous avons ici les textes étiquetés. Ce serait comme un nom. Ensuite, nous avons les textes fantômes. Ces textes fantômes sont en fait un secret. C'est une opportunité stratégique pour nous de l'utiliser. Et il y a tellement de fonctions et de secrets différents dans l'industrie sur la façon de définir vos textes fantômes pour communiquer le format que vous souhaitez pour votre utilisateur. Ou mettez-le en stratégie pour montrer à la communauté l' objectif de communication que nous voulons pour l'utilisateur ou pour inviter votre utilisateur à entrer ces informations, n'est-ce pas ? C'est ce qu'on appelle les textes fantômes. J'en parlerai beaucoup. Encore une fois, un bon formulaire rempli a une hauteur minimale de 50 pixels, puis la largeur dépend uniquement du contenu ici. Celui-ci montre une largeur de 350 pixels, mais cela dépend vraiment de la largeur de votre formulaire, du contexte et du contenu qui sera écrit dans ce champ de formulaire. Disons que c'était un nom ou un e-mail. Vous allez vouloir un champ de formulaire plus long. S'il s'agit d'un numéro de téléphone, vous n'en voudrez peut-être qu'un numéro court comme celui-ci. Le deuxième état, c'est un formulaire rempli. Et il s'agit essentiellement des mêmes contextes. Nous avons les textes fantômes, nous avons l'étiquette, elle est juste remplie au lieu du contour, nous avons une couleur de champ ici. Ensuite, nous avons un formulaire d'interface utilisateur matériel. même genre de principe ici. Il comporte un texte fantôme et une étiquette. C'est juste au lieu d'un contour, c'est un rectangle. Il n'utilise qu'une ligne pour indiquer où se trouve le formulaire. Cette interface utilisateur a été créée par Google et ce type de style, un champ de formulaire est courant dans les produits Google et les appareils Android. Vous disposez également d'une interface utilisateur matérielle sans titre. C'est ce qu'on appelle un flotteur étiqueté où le titre remplace les textes fantômes. Et ce qui se passe ici, c'est qu'on appelle ça une étiquette de flux car lorsque l' utilisateur clique cette étiquette ou ce champ de formulaire, le titre ou le texte de l' étiquette s'affiche ici flotte. Et les textes fantômes apparaissent comme ça. Mais à l'état par défaut, il n' y a pas de texte fantôme. Ce n'est que le titre ici. Une chose pour laquelle je ne les utilise généralement pas personnellement, c'est parce qu'ils n' affichent pas ce texte fantôme à l'état par défaut. Les textes fantômes ne s'affichent que lorsque l'utilisateur clique pour saisir des informations. Nous perdons donc cette occasion de structurer nos textes fantômes à l'état par défaut du champ du forum. Et entrez ici des informations qui aident nos utilisateurs à servir nos utilisateurs ou leur donnent des instructions ou des conseils sur le format que nous attendons à ce qu'ils saisissent. Je les ai également utilisés auparavant dans le passé où nous avions une disposition remplie de formulaire à une colonne comme celle-ci. où vous le pouvez, vous aviez quelque chose comme un nom ici et vous pouviez dire une robe ou quelque chose ici. J'ai remarqué que lorsque nous avons testé cela auprès personnes âgées et d'un public plus âgé, ils ne savaient pas où cliquer. Dans un cas, l'utilisateur essayait de cliquer sur le nom ici. Cela a peut-être été un peu plus serré ici, et ils ont accidentellement cliqué sur l'adresse parce que la ligne n'est pas une indication assez forte de la zone de frappe pour cliquer ou taper sur la zone cible ou la zone du robinet. me basant sur ceux-ci, je reste généralement loin d'eux. Et vous pouvez voir que lorsque vous utilisez le plus courant, c' est-à-dire ce formulaire de contour ici, cela a un bon sens de la zone de frappe. Vous pouvez voir le rectangle, c'est là que l'entrée va se produire. Où est l'interface utilisateur matérielle, c'est juste cette ligne ici. Un autre, c'est que nous avons un formulaire contour avec l'étiquette flottante. Et encore une fois, c'est sans titre. Le titre remplace le texte fantôme ici. Et alors, que se passe-t-il ? C'est le même principe lorsque vous survolez le champ du forum. Le titre flotte ensuite au-dessus du texte fantôme ici. Comme ça. Même principe que je tape, restez généralement loin d'eux simplement parce que nous n'utilisons pas les textes fantômes pour des stratégies de communication au début. Certains d'entre eux étaient tous les états par défaut. Pour les états survol ont des forums. Je vais passer par là rapidement. Votre philosophie pour le vol stationnaire est que quelque chose doit prendre vie lorsque vous survolez et qu'il devrait généralement être d'une couleur plus vive. Donc, si vous avez une, une couleur comme ce formulaire rempli ici, alors elle devrait être plus brillante à l' état de vol stationnaire juste pour la rendre plus vivante. C'est en quelque sorte la philosophie et les principes entourant le vol stationnaire. Et nous avons fait la même chose ici pour le formulaire de plan. Nous venons de rendre le contour bleu. dicton très courant de l' interface utilisateur du matériau que vous obtenez la même chose à contour devient bleu, qu'il s'agisse d'une étiquette flottante ici. Et le même principe pour le remplissage du formulaire contour avec l'étiquette flottante est que nous venons de changer la couleur du contour en bleu. Très bien, l' état suivant est appelé état d'entrée ou de mise au point. Et c'est à ce moment que l'utilisateur clique sur le champ de formulaire à partir d'un AM survol ou appuie sur le champ de formulaire. Et la technologie fantôme passe au curseur de type. Ainsi, vous verrez apparaître le curseur de type et les textes fantômes et la plupart des cas resteront là jusqu'à ce que l' utilisateur commence à taper. Une fois qu'ils ont tapé la première lettre, vous verrez cela disparaître. Les textes fantômes disparaîtront une fois que la première lettre commencera à taper. Très bien, il s' agit donc de l'état actif, qui signifie ou je suis désolé, l'état d'entrée ou l'état de mise au point. Et tout ce que cela signifie, c'est que l'utilisateur saisit informations dans cet état ici, ou qu'il est concentré dans cet état. Le curseur de type est ici, il se concentre sur ce champ de formulaire. Et c'est la meilleure pratique sur le vol stationnaire de l'utiliser. Une couleur vive ici, le bleu. Mais lorsque vous arrivez à l'état d'entrée, il est préférable d' un gris plus foncé ou même un noir, ou vous pouvez ajouter un peu de bleu dans le gris, comme ce que nous avons fait ici également. Mais il est préférable de passer de cette couleur claire pour l'état par défaut, puis d'une couleur plus foncée pour l'état d'entrée. Ici. Vous pouvez voir les différents exemples ici, exactement les mêmes pour l'interface utilisateur matérielle. Ils l'avaient fait. Le bleu du survol devient plus foncé pour l'état d'entrée. Et ensuite, la même chose pour les autres champs de formulaire d' étiquette flottante. Très bien, l' état actif est pratiquement une fois que l'utilisateur a tapé des informations et quitte le champ de formulaire. Ce champ de formulaire retournera à l'état par défaut. La seule chose qui change, c'est le texte saisi prend une couleur plus forte. Très bien, nous utilisons donc un gris clair pour le texte fantôme pour indiquer qu'il n'y a rien entré ici. Et généralement, cela ressemble à un appel à l'action, comme le nom de stagiaire, de stagiaire ici, comme ça. Et nous voulons pouvoir assombrir le texte pour les états d'entrée. Ainsi, lorsque l'utilisateur analyse tout cela, peut voir que ceux-ci ont été remplis. Encore une fois, même pour l'état rempli. Si nous utilisons un formulaire rempli, nous avons un blanc plus lumineux. Et même pour l'état d'entrée ici pour les formulaires d'étiquettes de flux. Cool. Ainsi, chaque champ de formulaire pour l'étape d'erreur, chaque formulaire doit avoir sa propre propriété immobilière pour message d'erreur, généralement en bas. Et encore une fois, cela peut se produire lorsque l'utilisateur est de taper dans le champ de formulaire. Et nous avons ce qu'on appelle la validation en ligne, c' est-à-dire lorsque nous faisons erreur l' utilisateur dans le champ de formulaire. Ou cela se produit lorsqu'ils appuient sur le bouton Enregistrer ou Soumettre ou Suivant. Et nous n'avons pas satisfait aux exigences de ce champ de formulaire. Quoi qu'il n'ait pas été satisfait pour un champ de formulaire spécifique en ce qui concerne les exigences, le message d'erreur devrait être ici. Encore une fois, ces messages d'erreur doivent être très clairs sur les erreurs. Vous pouvez voir pour les formulaires de champ, nous pouvons simplement rendre le formulaire entier rouge pour le contour. Il ne s'agit que de bonnes pratiques, juste pour faire le contour rouge sur le champ du forum, vous n'avez pas besoin de faire du rouge avec le texte ou quoi que ce soit de ce genre. Vous ne devenez même pas trop fou. Tout ce que vous avez à faire, c'est juste une petite indication subtile du rouge pour indiquer à l'utilisateur où regarder dans son message. Et rouge. Idem pour les formulaires d'interface utilisateur du matériau ici et l'autre étiquette flottante ici. Dans le dernier état où nous avons, c'est commun dans les champs de formulaire en tant qu' état désactivé. Il s'agit donc de l'état dans lequel un utilisateur ne peut pas engager, entrer ou modifier aucune de ces informations. Et j'aime simplement utiliser 30 % de transparence ou un gris clair, ou vous pouvez même utiliser les deux. Très bien, donc tous ces éléments sont 30 % d'opacité ici. D'accord, nous allons donc dans la plongée profonde des champs de formulaires maintenant. Regardez différentes fonctions. Voyons comment nous pouvons utiliser le texte fantôme pour définir les différents besoins, un format et des entrées basés sur le champ de formulaire dont nous disposons. Nous allons examiner certains champs de formulaire courants. L'un d'entre eux est celui des numéros de téléphone. Vous pouvez voir l'exemple des textes fantômes ici, c'est qu'il donne à l' utilisateur le format que nous voulons qu'il saisisse dans le numéro de téléphone. Nous ne demandons pas un 11. Nous voulons juste ici 1112223333, comme ça. Et ce qui se passe ici, c'est que nous avons ces tirets que vous pouvez voir ici. Ainsi, lorsque l'utilisateur entre dans ce champ de formulaire, nous remplissons automatiquement les tirets pour eux. L'auto, ils verront les tirets toujours ici dans le texte fantôme. Quand ils arrivent au premier numéro deux, et disons qu'ils ont tapé les deux suivants. Nous allons mettre ça fringant pour eux. Ils n'ont pas besoin de faire des tirets automatiquement, remplissent automatiquement cela pour eux. Vous verrez ensuite le remplissage du champ de formulaire une fois que c'est terminé. L'autre chose à savoir est que si vous avez un champ de formulaire de téléphone mobile ou un champ de formulaire directement lié à des numéros. Lorsque vous êtes sur un appareil mobile, ouvrez le pavé numérique. N'ouvrez pas le pavé numérique et demandez l'utilisateur de revenir au pavé numérique. Cela correspond également à la raison pour laquelle nous remplissons automatiquement le tableau de bord, c'est que si votre utilisateur tape ceci sur un clavier, il suffit de taper les numéros sur le clavier. Ils peuvent avoir un clavier qui est une section numérique à droite. Et puis sur un appareil mobile, il y a un mauvais numéro de clé, clavier ressemble à ceci. Ils n'ont pas besoin d'entrer dans les tirets. Ils ont juste mis les chiffres et nous le ferons pour eux. Une fois encore. Cela remonte beaucoup, beaucoup à cela, à la première chose dont j'ai parlé ici, à savoir l'abordance, le moins de temps et d'énergie pour accomplir une tâche. Ce sont donc de grands. L'Affordance, je parlerai beaucoup aussi. Et le moyen de transport est également très important. Date de naissance. C'est le même principe que nous utilisons les textes fantômes pour saisir, pour transmettre à l'utilisateur le format dans lequel nous voulons qu'il saisisse des informations. Nous voulons le mois, le mois, le jour, jour, l'année, l'année, l'année. Et l'astuce avec la date de naissance est que l'utilisateur tape, nous montrons toujours les textes fantômes. Cela ne disparaît pas quand l'utilisateur commence taper et les barres obliques, Oh, vous le pariez. Les barres obliques sont également remplies automatiquement, n'est-ce pas ? Il suffit donc de taper les chiffres sur le clavier. Et voici mon anniversaire, 09131983. Les barres obliques sont toutes autocomplétées pour l'utilisateur. Tout ce qu'ils ont à faire, c'est taper sur le clavier. Mauvais, boum, abordable, facile, pas de problème. Lorsque cette date arrivera cette année, vous pouvez aller de l'avant et m'envoyer un vœu d'anniversaire ou un cadeau, quoi que vous vouliez, je l'accepterai avec plaisir. Le formulaire d'e-mail est assez simple. Au lieu de taper un e-mail, il suffit d'afficher un faux e-mail. Vous pouvez mettre en colère ou vous pouvez mettre comme un nom. Email.com montre simplement le format à une différence ici c'est que lorsque l'utilisateur saisit les textes fantômes disparaissent, comme s'il s'affiche directement lorsqu'il clique. Vous auriez donc ce curseur de clavier qui s'affiche. Donc, cette chose apparaîtrait juste quand elle serait un peu plus sombre, mais elle apparaîtrait quand ils commenceront à taper. Et puis, une fois qu'ils ont mis ce premier mot , il disparaîtra. Mais il n' apparaît pas comme nous l'avons utilisé ici à la date de naissance car ils tapent, apparaissent qu'une seule fois. Ils cliquent et une fois qu'ils tapent, ils disparaissent complètement. Pour de l'argent rempli. Même principe, nous utilisons les textes fantômes pour montrer l'entrée et le format que nous aimerions. Une fois que l'utilisateur commence à taper, nous supprimons les zéros. Nous ne montrons plus les textes fantômes, mais nous gardons le signe du dollar. signe du dollar ne disparaît pas. Ensuite, nous ajoutons des virgules. Nous n'avons pas besoin que nos utilisateurs ajoutent des virgules pour nous. Eh bien, nous allons mettre les virgules, mais l'utilisateur doit taper la décimale. Nous ne remplissons pas automatiquement la décimale, ils doivent donc faire une décimale. Laissez-leur ça à eux. Numéros de carte de crédit. Encore une fois, regardez comment nous utilisons les textes fantômes. Vous pouvez voir pourquoi j' aime que les champs de formulaire fantômes des textes parce que c'est un élément additif qui nous aide à établir des stratégies pour les besoins de communication. Nous avons donc 111 espaces, 2222, espace 333. Nous avions les indications de l'espace ici. Ce qui se passe ici, c'est que lorsque l'utilisateur tape, il verra le numéro qu'il saisit. Mais tout le reste deviendra des balles. Ils ne voient que le numéro y taper afin savoir dans quoi ils tapent le bon numéro. Mais nous n'exposons pas tous les autres numéros de de crédit uniquement pour des raisons de sécurité et de sûreté. Et devinez quoi ? Nous remplissons automatiquement les espaces pour nos utilisateurs. Ils n'ont pas besoin de le refaire, tout ce que je dois faire, c'est juste les chiffres sur le clavier ou sur ce clavier. Et nous ferons le reste du formatage pour eux. Ensuite, nous avons toujours montré les quatre derniers au cas où l'utilisateur aurait plusieurs cartes de crédit. Je ne sais pas. Supposons que vous ayez dix cartes de crédit et que vous ayez fait une virée shopping sur Amazon lorsque vous êtes ivre vous avez commandé un tas de choses dont vous n'aviez pas besoin et que vous avez maximum de quatre ou cinq cartes de crédit et vous ne vous rendez pas vraiment compte de cela. Et trois jours plus tard, votre copine dit pourquoi y a-t-il 50 boîtes de trucs Amazon chez nous ? Et puis tu es comme, Eh bien, je ne sais pas. Et puis vous regardez votre histoire Amazon et vous vous dites , Oh mon Dieu, je pense que j'ai commandé un portefeuille Gucci l'autre soir quand j'étais ivre comme, oh, ce n'est pas bon. Donc, quand je vais acheter ma prochaine Gucci Wally, je n'utiliserai pas les cartes au maximum et je le saurai car je verrai les quatre derniers chiffres ici. Je viens de l'inventer. Je n'ai pas acheté de manteau d'agouti. La prochaine chose est donc les champs de messages de forme libre. Ils sont gratuits car nous n'avons pas vraiment besoin de ce que l' utilisateur va entrer. C'est pourquoi il s'agit d'un formulaire gratuit. Ils peuvent entrer tout ce qu'ils veulent. Nous l'utilisons beaucoup dans l'UX comme des champs de commentaires. Si nous le voulons. Nous les avons dans certaines de nos applications où un client intervient et il peut consulter l'application utilisateur. Et nous avons un petit domaine qui dit nous donner des commentaires ou une application radar. Et ils ouvrent cela et nous utilisons à nouveau les textes fantômes pour stratégie sur l'indice ou l'invite que nous aimerions obtenir de nos utilisateurs. Dans ce cas, nous aimons toujours entendre parler problèmes auxquels les gens sont confrontés lorsqu' ils utilisent notre logiciel. Mais nous aimons entendre parler de demandes de fonctionnalités, comme vous aimeriez voir quelque chose qui se trouve dans l'application que nous n'avons pas nécessairement lu pour le moment. Nous utilisons ces textes fantômes ici pour nous aider à établir des stratégies pour que nous puissions obtenir ce type d'informations auprès de nos clients et utilisateurs. Nous avons aussi parfois un nombre maximum de caractères. Vous allez juste mettre ça ici en haut à droite. Une fois que l'utilisateur aura atteint un nombre maximal de caractères comme celui-ci, ce Coco lira. Ils ne pourront plus taper. Vous aurez donc deux niveaux de justification. type d'exigence est que cela deviendra rouge et qu'ils cesseront réellement de frapper. Une fois que j'ai tapé le clavier, rien ne se passera. Nous avons également cette petite icône d'extension ici. Donc pour les champs de formulaire ouverts, comme je ne sais pas si peut-être quelqu'un qui veut écrire un paragraphe assez long, 500 caractères, c'est assez long. Ils peuvent donc saisir cela et étirer le formulaire rempli de bas en haut. Cela aide donc beaucoup pour ces champs de formulaire ouverts. Très bien, allons donc examiner quelques exigences de mot de passe ici. Comment appelons-nous cela lorsque nous disons des textes de filles par défaut, cela signifie que nous ne l'utilisons pas vraiment pour définir nos objectifs de communication. Très bien, donc celui-ci est juste d'entrer mot de passe, assez simple. Je pense que cela arrive avec les mots de passe, c'est que nous ne montrons même jamais le caractère que l'utilisateur tape. Si je tape un cinq, nous ne montrons pas les cinq. Il s'agit d'une balle. Pour des raisons de sécurité et de confidentialité. Nous pouvons ajouter la petite icône ici, l'icône des yeux. Et lorsque l'utilisateur clique dessus, révélerons le mot de passe, n'est-ce pas ? Donc, l'icône III est comme si les gens regardent , ne montrez rien. Et quand vous cliquez dessus et que les vêtements comme les gens ne regardent pas, montrez-moi, montrez-moi mon mot de passe. La différence entre un champ de formulaire facultatif et obligatoire. Il est préférable de ne montrer que du texte qui dit facultatif et par rapport à un autre. Lorsque vous avez un champ obligatoire, ce que vous verrez, c'est ces petits astérisques ici. Le plus souvent ou non, la plupart de vos champs de formulaire seront obligatoires. Donc, au lieu d'avoir tous les champs de formulaire avec ces petits astérisques et tout le monde ne sait pas que l'astérisque est un champ de formulaire obligatoire, comme l'aîné. Les utilisateurs plus âgés ne s'y accrochent pas. Ils ne le verront peut-être même pas. Il est préférable de laisser tous les champs de formulaire requis comme requis, puis de saisir l'endroit où il s'agit du filtre de formulaire facultatif, car il s'agit d'un meilleur moyen de transport. Et si nous revenons à notre guide ici, le moyen de transport, est-il facile de comprendre les informations liées à une tâche particulière ? Donc optionnel. Écrire le texte facultatif signifie quelque chose parce que c'est du texte, il est facultatif par rapport à un astérisque est une chose très abstraite. Comme PDD. Tout le monde ne sait pas ce que cela signifie. Ainsi, lorsque nous pensons à des informations faciles à comprendre liées à la tâche, optionnel fait mieux. Et puis vous pouvez le faire, j'ai une vidéo complète sur infobulles qui verront que vous pourriez faire une icône d'information et cela vous donnera une astuce sur le survol ou si vous êtes sur le web, ou cliquez sur si vous êtes sur le Web, puis touchez si vous êtes sur le Web. sont sur appareils mobiles et tablettes, regardez, nous utilisons les textes fantômes pour mieux définir les adresses secondaires. Par exemple, l'appartement 111. Vous pouvez utiliser le texte fantôme ici pour des invites comme la crème glacée préférée plutôt que comme la crème glacée préférée, vous pouvez faire des exemples comme le chocolat vanillé, route rocheuse, toutes ces bonnes choses. N'oubliez pas que les utilisateurs vont parcourir vos formulaires. Utilisateurs plus avertis en technologie, ils appuieront sur la touche tabulation du clavier et ils se déplaceront dans chaque champ de formulaire. Cela permet à l' utilisateur d'éviter d'utiliser la souris et de devoir cliquer hors d'un champ de formulaire et de cliquer de nouveau dessus. Une fois encore. Cela revient à ce mot clé, à l'abordance, au moins de temps et d'énergie pour accomplir une tâche. Si vous voyez ici, c' est ainsi que cela fonctionne. L'utilisateur se trouve dans le deuxième champ. Ils viennent de compléter ce texte ici. Ils vont appuyer sur la touche tabulation du clavier. La deuxième formule, celle qu'ils venaient d'utiliser, nous reviendrons à l'état par défaut. Ensuite, le troisième champ étranger dans lequel ils onglet sera désormais dans l' état de mise au point d'entrée et prêt à commencer à taper. Ils peuvent donc parcourir l' intégralité de vos champs de formulaire et ne jamais avoir à cliquer sur cette souris. Allons voir des choses à faire et à ne pas faire. L'une des choses communes ici est la différence entre une disposition de champ étranger à une colonne et une colonne plus en zigzag. Celui de droite. Des études ont été réalisées avec un test de suivi oculaire, test temporel également. Ils ont constaté que les utilisateurs passent plus de temps à sauter une colonne à l'autre lorsqu' il y a une colonne d'outil ici, vos yeux scannent dans Z ici plutôt que de descendre les champs de formulaire. Et quand vous avez un champ de formulaire à une colonne c'est psychologique psychique, mais cela fonctionne mieux parce que vous avez l'impression d'en terminer davantage. Vous descendez davantage dans la liste, ce qui semblait être plus achevé plutôt que de gauche à droite. En fait, il a été constaté que le formulaire à une colonne rempli de la même quantité de champs de formulaire testés par rapport à un formulaire à deux colonnes réellement exécuté était plus rapide, celui d'une colonne était plus rapide que les deux colonnes. Très bien, donc en revenant à cette offre, colonnes simples font également un meilleur travail pour transmettre quels champs de formulaire. Si quelqu'un appuie sur la touche, appuie sur la touche tabulation du clavier, lequel sera le prochain ? Où deux colonnes va-t-elle descendre ou va-t-il aller dans le bon modèle ? Le plus souvent, il fonctionne avec un motif Z, n'est-ce pas ? Il va aller à droite ici, puis par ici. Mais les études fonctionnent et une colonne forme des champs, elles peuvent avoir plus d'espace blanc. Il se peut qu'ils ne remplissent pas votre interface utilisateur si vous disposez d'un ordinateur de bureau volumineux, mais ils sont beaucoup plus faciles à analyser rapidement et ils donnent à un utilisateur un sentiment d' mais ils sont beaucoup plus faciles à analyser rapidement et ils donnent à un utilisateur un sentiment d' achèvement car il se déplace rapidement vers le bas. Une autre petite astuce ici est que vous pouvez leur espacer deux groupes différents, n'est-ce pas ? Donc, si cela concernait le même nom et que cela concernait, je ne sais pas, les informations de l'employeur. Nous utilisons simplement un peu plus d'espace à partir ici pour regrouper ces informations ensemble. Et cela aide davantage la numérisation, en mettant les informations de façon systématique. Vous pouvez voir pourquoi c'est important, pourquoi ces champs de formulaire et l'apprentissage de ces choses sont importants, c'est que cette entreprise a fait une étude sur les raisons pour lesquelles les gens ont abandonné leur site Web pendant le passage à la caisse. Encore une fois, 50 % d'entre eux étaient parce que leurs affaires étaient trop chères. Ils avaient des frais d' achat et des taxes trop élevés ainsi que des frais d'expédition, des taxes et autres choses. 28 % ont déclaré que le site souhaitait créer un compte. Ils avaient un mur de compte. Ils n'ont pas laissé un utilisateur comme un client passer à la caisse. Si quelqu'un veut vous donner votre argent, comme faire en sorte qu'il soit aussi facile que possible d'acheter votre produit et de me donner votre argent. Ne les obligez pas à créer un compte. Mais regardez ici, 21 % ont dit que le processus de paiement, les champs de formulaire sont trop longs, trop longs d'un processus. la caisse compliqué. Il s'agit alors d'un nombre, c'est ce qu'on appelle une mesure quantitative. C'est quantitatif parce qu'il s'agit d'un nombre avec la qualitative, pourquoi ? Pourquoi était-ce trop compliqué ? Alors ? Nous devrions y aller et nous prendrions ici certains de ces principes que nous avons appris il y a. Laine, est-ce un champ de forme à double colonne ? Si c'est le cas, qu'est-ce qui va expérimenter sur une colonne. Vous pouvez sortir ça. Je sauterai sur celui-ci s'il s'agit de mini-champs de formulaires comme celui-ci ici. Vous voyez tous ces champs de formulaire sur la droite, comme éviter cela, c'est beaucoup trop de champs de formulaire. Si vous avez autant d'informations, il est préférable de les mettre dans un assistant. Le magicien est génial pour les formes longues et j'ai une vidéo complète à la fin de la classe ici où je viens de parler uniquement de sorciers. Chez les assistants, c'est génial parce qu' il donne, il décompose toutes les informations de forme longue en catégories de petites bouchées. Cela donne une idée de l'utilisateur, un sentiment de localisation comme si vous vous trouvez ici. Vous avez terminé ces deux tâches, il y a donc des progrès et du temps. Et aussi des progrès et du temps qu'il ne vous reste plus qu' un seul. Il a brisé tous ces champs de forme longue que nous aurions ici à droite. Et cela l'a mis dans un processus étape par étape. Encore une fois, la raison est que cela n'a pas l'air intimidant par rapport à un Zoom Outlook à droite. C'est une tâche intimidante ici pour essayer d'accomplir là où cela n'a pas l' air si intimidant. Et un autre petit truc psychologique, c'est que si vous faites arbre vraiment facile et vraiment facile pour la première étape, c'est super facile. Et si c'est vraiment facile, le plus souvent, des études ont montré que les gens sont plus susceptibles de terminer ces étapes dans la première, c'est vraiment facile, alors la dernière devrait être très facile à écrire. Vous ne voulez pas que les gens tombent. Ils ont déjà fait le travail et rendent le dernier très facile. Et ensuite, c'est fini. Utilisez d'autres choses à faire et n'utilisez pas d'erreurs utiles. Dans ce cas, nous pouvons voir que les mots de passe ne correspondent pas. Évitez des choses comme celle-ci où elles appuient sur le bouton Créer et cela indique simplement que quelque chose a mal tourné, veuillez corriger et vous ne savez pas ce qui a mal tourné, n'est-ce pas ? Par conséquent, chacun de ces champs de formulaire doit comporter sa propre erreur qui s'applique à lui-même. Explorez les entrées de journal, n'est-ce pas ? Vous ne contrôlez pas combien de temps durent les noms des gens. À ce stade, nous devons savoir si cette personne avait un nom long. Nous avons deux options. Est-ce qu'on l'ellipse ? C'est ce que j'aime faire. Donnez ces trois petits points ici pour indiquer à l'utilisateur qu'il y a plus de nom. Et si l'utilisateur souhaite voir plus de nom, il peut cliquer dessus et il peut faire flèche vers l'avant avec la flèche et il y verra plus de nom. Ou nous pouvons diviser cela en deux lignes. Comme ça, ici. Quoi, mais la seule chose avec ça, c'est que ça provoque plus, il déplace le champ du forum et crée plus de largeur ou de hauteur ici. Et cela jette en quelque sorte l'assymétrie de la cohérence visuelle de la hauteur de tous les champs de formulaire. C'est pourquoi je suis plus fan de l'ellipse ici. Mais il suffit d'en être conscient. Vous n'avez pas de gens, certaines personnes ont de très longs noms, très longs noms de famille. N'utilisez pas de champ de formulaire abrégé comme celui-ci. Si vous savez que cela va être long. S'il s'agit d'un e-mail, donnez-leur suffisamment d'espace. Rappelez-vous que celui-ci en a déjà parlé, mais regroupez les sections pertinentes ensemble. Donc, si vous avez le groupe un, le groupe deux et le groupe trois, plutôt que de garder le même espace pour tout. Il suffit d'utiliser de l'espace. C'est tout ce que vous devez faire. Espace, espaces. Whitespace est votre ami. Validation en ligne. C'est génial. Utilisez donc la validation en ligne si vous le pouvez. Donc, si je tape un e-mail et que je mets accidentellement une virgule, erreur moi au moment où j'ai mis une virgule, comme une fois que nous sommes arrivés ici, juste des adresses non valides. Ou si je mets un espace supplémentaire ici, erreur moi à ce stade, cela m'erreur dans le sens de la ligne dans le champ du forum pendant que je le tape, sorte que je peux le réparer avant de quitter ce champ de formulaire. Cela dépend de votre base de données. Ce n'est pas comme si les gens n' allaient pas utiliser votre application, mais il vaut mieux leur faire valider le mensonge. Que se passe-t-il si ce n'est pas le cas, c'est que l'utilisateur remplit toutes les informations, appuie sur Envoyer, puis quand il doit traquer comme quoi ? Oh, pourquoi n'ont-ils pas vécu quelque chose d'erroné ? Ensuite, nous devons regarder le point culminant, le champ du forum ici, et au moment de retaper le champ de formulaire, cliquer sur retaper dessus, corriger l'erreur là où elle revient à cette limite. Comme nous savions déjà que l'utilisateur était ici, nous savions qu'il s'agissait d'une erreur. Pourquoi les laisser partir ? Comme si on leur demandait de le réparer ici. Pourquoi allons-nous faire cela à notre utilisateur ? J'ai parlé de sorciers. Il peut y avoir une vidéo complète sur les sorciers ici. Nous terminerons avec ces deux dernières choses à faire et à ne pas faire. N'oubliez pas la taille appropriée. Nous avons obtenu le code postal ici. Donnez-lui la taille d'un code postal, même s'il supprime votre assymétrie visuelle. Car encore une fois, la convivialité doit toujours dépasser la visibilité ou le visuel. Bien que cela puisse paraître mieux. Regardez la façon dont les gens utilisent la facilité d'utilisation de votre produit est toujours meilleure que l'apparence de quelque chose. Il y a quelque chose qui peut paraître superbe, mais il ne s' utilise pas très bien. Quelque chose n'a peut-être même pas l'air si beau, mais les gens l'utilisent et ont très bien fonctionné. Par rapport à celui de droite ici. Et puis jamais, jamais champs de formulaire à trois colonnes comme celui-ci, s'il vous plaît, ne faites pas cela. Encore une fois, vous pourriez faire les deux colonnes que je viens de mettre au courant, c'est mauvais, ce n'est pas un dôme. Il y a des moments où c'est le cas, nous l'avons fait, mais ne faites pas vraiment trois colonnes ici. Je vais juste me terminer à nouveau avec quelques pièces de haut niveau. J'ai beaucoup parlé de la mise en page d'une seule colonne. Encore une fois, l'une des choses faut parler est la saisie semi-automatique. Complétion semi-automatique. Super. Donc, la saisie semi-automatique est, je le montre dans la vidéo où nous parlons forums d' adresses et de formulaires de recherche. Mais ce que cela fait, c'est qu'il affiche des informations pertinentes basées sur les entrées déjà effectuées par l' utilisateur. Et cela empêche l'utilisateur d' écrire le mot en entier. Donc, si vous tapez simplement mon nom AIR, les compléments automatiques afficheront une liste déroulante ci-dessous, et nous parlerons des listes déroulantes dans la prochaine vidéo. Mais il affichera une petite liste déroulante de ce qu'il pense correspondre à l'AAR. Il dit qu'il peut y avoir des choses arides et quelques autres choses qui correspondent à ce nom. Ce qui se passe ici, ce qui est génial, c'est comme, disons que j'ai tapé mon nom et que je remplissais une adresse et qu'une Erin complétée automatiquement peut également remplir automatiquement mon nom de famille, mon e-mail, mon adresse, ma ville, mon état, et dans de nombreux cas, l' application ne fournira pas cela. Chrome, comme votre navigateur Internet, fera cela pour vous. Mais il suffit d'être conscient de la terminologie. C'est ce qu'est la saisie semi-automatique. Rappelez-vous le sorcier que nous avons montré, je vais parler beaucoup de ça. Mais quels que soient les assistants, c'est toujours génial de penser à des expériences utilisateur, ayant ces trois aspects clés, comme définir l' attente, l'emplacement, comme la location votre actualité ou votre utilisateur sait où il en est dans votre expérience utilisateur, temps et vos progrès, ils auront une tâche à accomplir comme, est-ce qu'ils ont déjà fait ? Où sont-ils et combien de temps reste-t-il ? Quelles sont les étapes à suivre, ce dont ils ont besoin. Nous avons parlé de vouloir simplement nous assurer que nous parlions de la validation en ligne facultative par rapport validation en ligne requise pour donner des erreurs utiles. Je me souviens juste de m'entraîner. Soyez explicite sur la façon dont vous voulez que les gens traitent ces noms longs dans vos champs de formulaire et devinez ce que les ingénieurs voudront remarquer. Ils vont demander, d'accord, alors comment traiter un long nom ? Allons-nous à deux lignes ? Est-ce qu'on fait de l'ellipse ? Et j'aime préférer faire des ellipses comme je vous l'ai déjà montré. Ok, Cool, ce sont des champs de formulaire. Je vous verrai dans la prochaine vidéo. Nous parlerons de boutons. 6. Boutons: Bon, bienvenue à la prochaine classe. Nous allons parler de boutons. Je vais ignorer la théorie des boutons et je le ferai vers la fin parce que je pense que ce sera plus relatif et facile à obtenir une fois que nous aurons traversé tout ça. Très bien, commençons par certains types de boutons, puis je vais aborder les combinaisons de boutons dans différents états et bonnes pratiques et je ferai quelques choses à ne pas faire. Mais généralement, nous avons notre bouton carré. Vous pouvez voir ici que je suis un bon bouton, mesure au moins 50 pixels. Bonne zone de prise, 50 x 50 pixels. La largeur dépend vraiment du contexte du bouton. Vous voulez donc un peu d' espace pour respirer vos textes. Je vais montrer quelques exemples de choses à faire et à ne pas faire. Mais celle-ci, elle mesure 140 pixels de large. Il peut probablement être un peu plus court si vous le vouliez aussi. Mais une bonne marge de respiration pour la topographie à l'intérieur du bouton. Et au moins 50 pixels par hauteur. Nous avons un bouton carré qui n'a pas de bords arrondis. Et vous pouvez voir que celui de droite a des bords arrondis. C'est ce qu'on appelle un bouton de pilule. C'est assez explicite, on dirait une pilule que vous prendriez. Il est entièrement arrondi, arrondi sur les bords. Celui-ci s'appelle un bouton fantôme. Et c'est juste un bouton fantôme car il a un contour de sorte que la couleur principale ici soit le contour du bouton. Et le remplissage est la plupart du temps blanc ou n'importe quelle couleur de l'arrière-plan de ce bouton. Si tout cela ressemblait à une interface utilisateur sombre, ce serait une couleur plus foncée ou si elle était sur un fond blanc, elle serait blanche comme ici. Mais pour l'essentiel, il devrait ressembler à ce qu'il s'agisse d'un contour avec le texte. Et ils sont vraiment parfaits pour les boutons secondaires. Je parlerai un peu de cela où vous pouvez voir ces boutons en couleur sont parfaits pour les boutons primaires. Et ce style fantôme est une excellente combinaison avec le bouton principal. Et c'est pour des actions secondaires. Et je vais parler un peu actions secondaires ici dans une seconde. Nous avons des boutons de texte ou des liens. Ce ne sont que des mots sans éléments graphiques à côté. Et si vous les touchez ou cliquez dessus, ils le seront, ils le seront, ils emmèneront l'utilisateur à un endroit. C'est assez simple. Nous savons tous quels sont les liens. Soit ont la texture de la couleur, vous avez une ligne en dessous. Cela dit, la ligne en dessous est dans certains cas meilleure juste en raison de l'accessibilité. Si quelqu'un est daltonien, il peut ne pas y voir un lien. Mais s'ils voient la ligne en dessous, cela leur indique que c'est l'élément reliable. Les boutons peuvent également contenir des états de chargement. Vous verrez donc que celui-ci est assez courant où l'utilisateur paiera quelque chose sur un site et qu'il cliquera sur le bouton de lecture et au lieu de les sauter dans un autre écran ou dans un autre état, ce qui est comme le chargement. Et si quelque chose ne s'est pas produit, vrai, on s'y trompe. Nous pouvons les conserver dans le même contexte et le bouton se transforme en état de chargeur. Il garde ça. Cela donne ce niveau de contrôle et de rétroaction et vous appuyez sur la touche Paiement, vous voyez les commentaires que nous avons reçus lors du paiement. Attendez une seconde, nous le traitons et nous vous donnerons un succès. À la fin de tout ça. Nous avons encore des boutons d'icônes, ce ne sont que des textes et des combos d'icônes. Vous verrez les plus populaires comme ajouter ensuite, télécharger. Ensuite, vous avez des boutons d'icônes. Ce ne sont que des boutons sans textes, et ils servent simplement d'éléments d'action. Pas de technologie, il s'agit généralement d'icônes plus courantes comme les cartes d' achat et les envois ou les collations, le téléchargement et la fermeture et une annonce. La plupart du temps, ils n'ont pas besoin de texte à côté d' eux car ce sont des icônes communément reconnues. Et ils peuvent entrer dans le bouton comme vous l'avez vu ici, ou ils peuvent simplement être des icônes elles-mêmes. J'ai tout un discours à la fin, l' un des derniers cours dont je parlerai d'un plongeon profond dans les icônes, iconographie et les meilleures pratiques là-bas. Allons voir quelques combinaisons de boutons. J'aime beaucoup ce combo ici, qui est un bouton secondaire à gauche, qui est de couleur plus claire. Ou j'aime le combo du bouton fantôme pour ces actions secondaires et les actions secondaires ou choses comme ça vont être annulées vêtements ou, dans certains cas, peuvent être supprimés. Ensuite, les boutons primaires sont de couleur plus foncée. Et j'aime bien celui qui est rempli ici. Donc, des fantômes sur le champ gauche, à droite. Et c'est là votre action principale. Il s'agit donc de la chose la plus importante que vous souhaitez que votre utilisateur fasse dans un flux de travail particulier ou un écran qui doit être combiné ou accompagné du bouton principal. Il s'agit de choses comme Enregistrer et soumettre ou suivant. Vous pouvez également utiliser la couleur pour indiquer ces boutons secondaires et principaux. Vous l'avez fait. Une couleur un peu moins forte à gauche et une couleur plus forte visuelle à droite. Ensuite, vous avez la pilule Annuler le bouton fantôme sur la gauche et la pilule à droite. Des trucs assez simples ici. J'aime généralement utiliser la même largeur de ces boutons côte à côte. Donc, si vous tirez sur ce bouton d' annulation ici, il s'agit de la même largeur que le bouton Enregistrer, donc il s'empile très facilement. Vous pouvez le voir ici. Ils s'empilent, s'empilent bien contre quelque chose comme ça. Il est normal d'avoir votre bouton Annuler, peut-être un peu plus petit que votre bouton principal simplement visuellement, cela donne un ton plus important à voir ou plus fort à l'action principale. C'est génial lorsque vous effectuez ce type d'alignement horizontal, mais lorsqu'ils s' empilent verticalement comme celui-ci, cela annule l'alignement vertical. Et ce n'est pas une mauvaise idée d'en faire la même largeur. Retournez un peu ici. D'accord ? L'accent sur les boutons, décrivez déjà cela, mais l'accent est élevé pour les actions Kotlin primaires, couleur plus foncée, l'accent moyen, les actions secondaires, la couleur plus claire. Et un faible accent EF, ce qui signifie qu'aucun bouton désactivé d'action qui n'a aucune action ne devrait être très faible. L'accent visuel ou l'apparence visuelle d'un bouton. Allons voir les états des boutons. Encore une fois, nous avons cet état par défaut. Vous avez un état de vol stationnaire ici. Et comme je l'ai dit dans la vidéo du forum, les meilleures pratiques pour le survol sont d' utiliser une couleur plus vive. Cela aide le bouton à devenir plus vivant. C'est comme, Hé, je suis en vie, clique sur moi. Mais rappelez-vous qu' une action que nous utilisons sur le Web, pas les appareils mobiles et tablettes désactivés, j'ai tendance à utiliser 30 % d'opacité pour l'arrière-plan , puis 70 % pour le texte. Vous voulez toujours que les gens puissent lire les textes s'ils sont désactivés, vous voulez simplement les rendre très désactivés. Ils doivent toujours savoir qu'il s'agit d'un bouton de soumission, mais ils devraient le voir comme quelque chose qui n'a pas air engagé ou exploitable. Très bien, vous pouvez donc utiliser des ombres sur les boutons. Je vais vous montrer très vite quelques boutons ici ou quelques ombres ici. Donc, si nous devions ajouter un et que j'ai tout un discours sur les ombres, mais laissez-moi rapidement passer par une petite démo rapide sur les ombres ici. Si nous devions ajouter une ombre à ce bouton, l' une des premières choses à ne pas faire ou à éviter par défaut, l' ombre par défaut que vous obtenez n'est jamais la meilleure, mais ne commencez jamais par défaut. Vous pouvez voir ici qu'il y a quatre sur le y, c'est-à-dire sur la ligne verticale sous le bouton. Pour les pixels vers le bas et il y a 0 sur le x ce qui signifie qu'aucune ombre n'apparaît sur le côté vertical des boutons. Encore une fois, y sur la ligne horizontale et x sur la ligne verticale. Nous voulons au moins cinq de chaque côté et cinq. Maintenant, la partie suivante est que ce bouton est trop sévère. Comme si vous plissez les yeux, vous pouvez toujours voir ce bouton. Nous ne voulons pas cela. Nous voulons un bouton très subtil ici ou une ombre ici. Allons donc y ajouter un peu de flou . C'est déjà mieux. 20 flou sera bon. J'ai généralement aimé même quelle que soit la couleur des boutons, j'aime mettre un peu de bleu, juste un peu de bleu dans l'ombre de couleur de ce bouton, n'est-ce pas ? Donc, quelle que soit la couleur rose ou violette ou autre, un peu bleuté de bleu et la zone noire ou grise de l'ombre sont toujours meilleures que le noir pur. Vous y allez. C'est ça. Donnez-nous un peu de profondeur. On dirait qu'un bouton ressemble à quelque chose sur lequel vous pouvez appuyer. Vous pouvez même y ajouter une couleur. Vous pouvez également ajouter la même couleur ou couleur similaire à l'ombre pour un autre effet. Allons-y donc. Nous allons en fait changer cela. Faisons-le, faisons une couleur bleue ici. Cool. Passons maintenant à la couleur de l'ombre. Passons l'ombre à un peu plus bleue. Cela vous donne un peu plus de regard. Je vais réduire le flou. J'irai probablement un peu plus haut sur l'opacité. Vous y allez. Très subtil. Subtil est efficace. Nous ne voulons pas que l'ombre soit très visible, devrait simplement donner un peu de profondeur. Vous pouvez les voir ici avec l'ombre. n'y a pas de profondeur sur ce bouton. Et ces ombres aident un peu de profondeur ici. Une chose à retenir est que vous effectuez ce système de jumelage où vous avez le bouton fantôme à gauche et un bouton principal à droite. Et un utilisateur passe le pointeur sur le bouton Annuler. Et vous ressentez l'annulation avec l'orange ici, le même orange que celui utilisé pour le bouton principal. Lorsque vous regardez ce survol de données, ils ont tous deux une hiérarchie visuelle égale. Ils sont en compétition l'un contre l' autre juste en état de vol stationnaire. Il vaut mieux éviter quelque chose comme ça et utiliser un survol qui se trouve peut-être encore dans la zone orange, mais un peu plus clair d' un ton orange comme ça vaut mieux, n'est-ce pas ? Le principal ressemble donc toujours au bouton principal, même en survol. Très bien, l'état suivant du bouton est appelé état focalisé. Et c'est quand un utilisateur Ms met en surbrillance cet élément de bouton à l'aide d' une méthode de saisie telle qu'un onglet clavier. Vous pouvez tabuler les champs de formulaire et vous pouvez également accéder au bouton. Ce n'est pas la souris qui passe au-dessus du bouton, mais j'aime utiliser le même état que le survol où la couleur est plus vive lorsque vous apprenez à tabuter le clavier sur le bouton. Ainsi, si vous disposez de trois champs de formulaire et d'un bouton d'envoi, l'utilisateur peut tabuler dans chacun de ces champs de formulaire, insérer des informations, puis tabuter sur le bouton et appuyer sur Entrée sur le clavier en tant que soumission. Cela montre simplement que ce type d'état de focalisation est également important. Encore une fois, tant que vous aurez défini le survol , ce sera le même état pour cela. Il y a un état pressé. C'est alors que l'utilisateur a appuyé sur le bouton. Encore une fois, vous pouvez utiliser une couleur plus claire que celle qui se trouvait sur le survol ou l'état focalisé. Vous pouvez également faire une animation où vous avez cette valeur par défaut, vous avez ce survol, ils appuient dessus et vous obtenez cette petite animation qui se produit assez rapidement, mais elle passe de 123 pressée. Et c'est vraiment subtil, mais cela donne à l'utilisateur le fait qu' il clique sur le bouton ou qu'il appuie sur le bouton. Allons voir des choses à faire et à ne pas faire. Les boutons doivent comporter un ou deux mots, trois mots Max. Plus de trois mots, il n'est pas facile de scanner et de voir quelle l'action principale ou ce que fait le bouton, n'est-ce pas ? Il devrait être très facile de simplement regarder le bouton. Button va informer l'utilisateur de ce qu'il fait. Et ici, vous devez lire dans ce bouton, c'est trop long, trop de texte. Si vous utilisez des icônes de boutons, utilisez alignement horizontal et évitez alignement vertical avec les textes. Les icônes ici créent simplement une forme déséquilibrée et ce n'est pas un bouton courant ici. Il suffit donc de l'éviter. n'y a aucune raison de ne pas faire quelque chose comme ça sur la gauche. Donnez un bon espacement. Vous pouvez voir ici que nous avons donné un espacement égal à partir du haut et un espacement égal vers la droite. Et vous avez un bon bouton comme celui-ci par rapport à celui de droite. Nous avons un bon espacement sur le dessus. Eh bien, nous n'avons même pas d'espacement vers la gauche et la droite, donc nous devons rendre cela un peu plus espacé. Donnez également une bonne marge de respiration à partir du texte. Vous pouvez faire un espacement égal ou ajouter plus d'espace à partir de la gauche et de la droite. C'est utile parce que vous avez une cible de tapotage, l'immobilier que prend ce bouton, sa taille, qui vous indiquera à quel point il est facile de taper ou de cliquer, n'est-ce pas ? y a donc aucun problème. ne devrait pas y avoir de problème à agrandir le bouton, surtout s'il s'agit du bouton principal. Pour faciliter la tâche, toucher et revenir, vous bénéficiez d'une meilleure marge de respiration du texte de votre bouton par rapport à ceux de droite. Comme tous ces boutons se sentent pressés. Comme les champs de texte très pressés ici comme je ne peux pas, je dois le garder de cette façon pour que je puisse vous montrer l'exemple, mais je me serais vraiment approché et juste, c'est tellement mieux. Hier Doit bien bouton maintenant, vous pouvez voir que c'est vraiment difficile pour moi Nazi même de laisser ces boutons comme ça. Encore une fois, il revient à l' espace de tapotage et de clic comme celui-ci devrait être facile à cliquer et à appuyer. Celui-ci a donc besoin de plus de verticalité comme ça semble bien. Si vous utilisez une icône de bouton, utilisez une icône à la fois. N'en utilisez pas plus d'un. Il mélange le style de communication. Vous pouvez voir que celui-ci ressemble à ce que c'est un téléchargement ou NADH. Je ne sais pas. Utilisez une couleur plus brillante pour passer le vol stationnaire. Ensuite, j'ai vu ça une fois. N' agrandissez pas le texte en survol. Utilisez la couleur comme indicateur de survol, non pas le texte et la taille. Si vous avez un lien secondaire comme celui-ci où il est annulé, il se situe très bien sous le bouton Enregistrer. Ne le mettez pas en haut, car la plupart du temps, nous laisserons leur lecture comme ça. Nous voulons que le bouton principal soit la première chose que quelqu'un scanne et pas nécessairement le bouton Annuler car il annule secondaire. Même affaire ici, à gauche. Vous pouvez aussi les empiler. La plupart du temps, nous faisons des boutons primaires à droite et des boutons secondaires à gauche. Vous pouvez changer cette commande lorsque vous avez quelque chose qui peut être accidentel. Si c'est le cas, je vais me presser. Je vais donc aller à un autre cours. Je vais en parler ici. Celui-là, ici. Si vous avez quelque chose où quelqu'un va supprimer quelque chose et supprimer, nous pouvons toujours faire un RU sûr, mobile modal ici et nous avons une suppression et une annulation. Parfois, ces modaux apparaissent et l'utilisateur clique accidentellement dans la position principale ici et le supprime accidentellement. Et c'est une suppression percutante car ils suppriment un compte et nous sommes comme, Hé, voulez-vous vraiment supprimer ce compte ? Comme vous avez fait beaucoup de travail sur ce compte, vous allez tout perdre, donc dès la première suppression qu'ils ont fait, nous lançons ce modal et nous leur donnons juste une chance de dire : êtes-vous sûr de vouloir le faire ? Vous pouvez changer l' ordre de ces boutons, sorte que cela ne se produise pas. Vous pouvez placer celui-ci ici et vous pouvez placer l'annulation à droite, comme ceci et changer cet ordre au cas où ils appuieront accidentellement sur l'annulation. Ce n'est pas l'action principale percutante. Il s'agit d'une stratégie pour utiliser cette combinaison ici pour aider ce cas accidentel où vous appuyez de nouveau accidentellement sur Annuler, mais vous aimeriez tous vous remercier. C'est ce qu'ils ont fait. Je ne voulais pas appuyer sur Supprimer là où vous devez vraiment aller. Je veux vraiment supprimer ce rapport. C'est à peu près tout ce que je décrivais ici. Sur celui-là. Ici, tu peux changer ça un peu. Juste pour les suppressions très percutantes qui se produisent dans celles-ci. Tout ce qui peut être accidentel que vous voulez simplement vous assurer que votre utilisateur ne le fait pas. Lorsque vous utilisez un bouton en arrière-plan d' une photo comme celle-ci, utilisez le bouton couleur de votre champ comme le bouton principal. Et la plupart du temps, n'utilisez pas le bouton fantôme ici car cela aura un impact la lisibilité du texte où sur la lisibilité du texte où celui de gauche se distingue beaucoup plus. Quand il s'agit de liens. Utilisez le bon nombre de mots pour afficher vos liens. Vous voyez donc celui sur la gauche. Si nous vous contentons de cliquer ici pour voir vos directives d'utilisation CR, cliquez ici, les textes bleus. Et tout le reste est donc facile à lire. Il a une bonne lisibilité. Et nous informons également à l'utilisateur que nous utilisons intentionnellement bleu ici parce que nous voulons que vous intergiez avec ce lien. Vous pouvez même aller plus loin et ajouter une ligne ici si vous le souhaitez également. Juste comme ça. Par rapport à la droite, comme tout rendre bleu, je veux vraiment que mes utilisateurs utilisent ça. Ils peuvent, d'abord, ne pas affecter la lisibilité et la lisibilité. Et ils ne savent peut-être pas que tout cela est cliquable. Ils peuvent penser que cela fait partie de votre marque et que vous utilisez simplement des textes bleus pour tout. Soyez intelligent avec vos liens, surtout s'ils attachent deux phrases comme celle-ci. Utilisez une ligne de texte pour vos boutons. Ne faites jamais cela, là où il va à deux lignes. Cela jette juste la symétrie des boutons et ça a l'air super bizarre. Encore une fois, s'il n' y a pas deux lignes, vous avez trop de mots. Nous sommes arrivés à quelque chose pour donner à vos mots comme un bouton avec quelque chose de agréable à donner là, mais ne devrait jamais être sur deux lignes. Encore une fois, gardez les boutons à la même largeur lorsque vous les empilez, puis ne mélangez pas la largeur comme celle-ci lorsque vous les empilez. Très bien, je pense que c'est tout. Passons rapidement en revue la théorie des couleurs du bouton et nous allons terminer. Une des choses que je veux juste appeler ça, vous entendrez cet acronyme se faire balancer. C'est ce qu'on appelle l'appel à l'action. L'appel à l'action peut faire référence à deux éléments qui peuvent faire référence au texte d'un écran particulier, qui est comme la chose la plus importante que vous souhaitez voir à l'écran ou qui fait référence au bouton, le bouton d'appel à l'action, qui est ce bouton principal. Encore une fois, vous avez une action secondaire, c' est-à-dire ce bouton secondaire. Des choses comme revenir et fermer, annuler, des choses comme ça. N'oubliez pas que le bouton de taille doit être facile à cliquer, facile à appuyer sur les directives de l' interface utilisateur d'Apple. Ils disent que tout ce qui s'y trouve, les appareils Apple ou les applications Apple Store, tout ce qui peut être tapé ou doit être de 40 pixels sur 40 pixels. Personnellement, je pense que c'est trop petit. J'ai tendance à faire au moins 50 pixels 50 pixels comme le plus petit. Encore une fois, rappelez-vous que la couleur d' arrière-plan doit avoir un bon contraste et devrait se démarquer des autres composants de l'interface utilisateur s'il s'agit du bouton principal, n'est-ce pas ? Le bouton principal devrait donc être l'une des choses les plus semblables et les plus sombres de l'application. C'est donc très facile à savoir. Pouvez-vous vous montrer un exemple de ce que vous devez faire, n'est-ce pas ? Donc, si vous regardez cette page ici, plissez les yeux et regardez-la, cette orange éclate, n'est-ce pas ? C'est donc la principale chose que nous voulons que l'utilisateur fasse. Nous utilisons donc la hiérarchie visuelle pour transmettre cela également. Vous pouvez également utiliser cette couleur à nouveau pour différencier les touches entre le bouton principal et le bouton secondaire. J'ai déjà parlé de formes. Donc, juste des formes de pilules horizontales. Le placement est également crucial, n'est-ce pas ? Quelle que soit la couleur de votre bouton ou la taille de votre bouton. S'il ne se trouve pas dans un endroit où les utilisateurs vos utilisateurs ne peuvent pas le voir ou le scanner facilement , ce n'est pas aussi efficace. Ainsi, le placement de ces boutons dépend de votre contexte, mais généralement en haut ou bas de vos écrans fonctionnent mieux. Là encore, la copie doit être courte et douce, facile à lire, facile à numériser. Et si vous ne savez pas à quoi appartient le bouton du copieur, il doit indiquer ce que le bouton va faire. OK, c'est cool. C'était des boutons. Je vous verrai le prochain. On se voit tous dans la vidéo suivante. Nous couvrirons les dépotoirs. 7. Les gouttes: Très bien, parlons un peu des listes déroulantes. listes déroulantes sont à peu près des éléments formés. La seule différence est qu' ils sont utilisés pour la sélection. Ils ont donc quelque chose que lorsque vous cliquez sur le champ de formulaire ici, menu apparaît un peu ce que nous appelons le menu déroulant ici. Il y a des variables de sélection pour l'utilisateur. Ils sont parfaits pour tout ce qui comporte trois éléments ou variables ou plus à sélectionner par un utilisateur. Parce que vous pouvez mettre tout un tas de ces objets. Vous pouvez placer, disons, 15 de ces sélections dans la petite fenêtre. Et cela permet d'économiser une tonne de biens immobiliers à l'écran, plutôt que de ne montrer que 20 de ces sélections. Mais si vous n'avez que deux à trois variables ou éléments de sélection pour un utilisateur, il vaut mieux utiliser un bouton radio ou une case à cocher. Et je vais vous les montrer en vidéo ici. Je ne pense pas à la prochaine vidéo, mais à la vidéo après nous plongerons dans les boutons radio et les cases à cocher. Le critère d'une liste déroulante est, encore une fois, que nous utiliserons les mêmes styles pour nos champs de formulaire. Vous verrez le champ du formulaire hiérarchique ici. Ensuite, le formulaire d'interface utilisateur matériel qui n'a que la ligne. La seule distinction d'un champ de formulaire et d'un menu déroulant est la petite carotte, cette petite flèche bleue ici. Lorsque vous cliquez dessus, le menu déroulant s'ouvre. Et la chose requise pour la liste déroulante, c' est que l'utilisateur ne peut sélectionner qu'un seul élément, puis cette sélection devient l'entrée ici où se trouve le texte fantôme. Si vous avez plus 20 éléments dans une liste déroulante, il est également préférable de faire un type de tête ou de saisie semi-automatique, ce que je vais vous montrer ici dans une seconde. listes déroulantes sont idéales non seulement pour les formulaires, mais vous pouvez également les utiliser comme menus. Vous les verrez donc beaucoup sur les sites de commerce électronique. Vous les verrez dans le système d'exploitation de votre ordinateur comme Mac. La zone de la fenêtre supérieure contient des menus déroulants ici. Vous verrez de nombreuses listes déroulantes pour les menus qui ressemblent à ceci. Voici notre site Bobo t sur nos produits ménagers. Et ensuite, l'architecture apparente est la marchandise domestique. Et les informations sur le niveau des enfants basées sur articles ménagers sont des oreillers, des estampes et des horloges et ce que vous avez. Ensuite. Vous verrez également des listes déroulantes sous la forme de menus appelés méga menus, où il s'agit de grands sites de commerce électronique et ils ont plusieurs architectures d'informations où ils ont un niveau parent tel que des articles de maison et ils ont un niveau enfant comme des oreillers, puis ils ont tout un tas de petits-enfants niveaux un oreiller ici. J'obtiendrai toutes ces informations et ces menus et une vidéo que je pense vers la fin de la classe, j'ai parlé de menus et de tiroirs, et nous allons approfondir ce sujet. Voyons ici quelques styles déroulants typiques. Nous avons donc le style par défaut. Encore une fois, nous avons ce survol où le contour devient bleu. Nous avons la fenêtre de dialogue ou la liste déroulante qui contient les menus. Notez également que dans ce menu déroulant, vous avez également le survol ici. Cela suivra votre souris. Encore une fois, survolez votre ordinateur de bureau, mais pas pour les appareils mobiles ou tablettes, puis vous avez l'état actif. Il s'agit donc de la valeur sélectionnée ici. Par conséquent, si un utilisateur a sélectionné quelque chose , l'état d'erreur s'affiche. Semblable à nos champs de formulaire et à notre message d'erreur et un contour pour le rouge pour indiquer l'erreur. Et là encore, vous avez cet état désactivé, donc 30% dépassent la transparence ou, ou un gris très clair. Ou vous pouvez même faire les deux pour indiquer que ce menu déroulant est trop stable. Examinons quelques types de listes déroulantes et de cas d'utilisation. Ils sont parfaits pour tout ce qui a une valeur de plage. Vous dites plutôt : combien de pieds carrés est votre maison ou combien d'argent gagnez-vous par mois ? Et vous pouvez utiliser à nouveau les textes fantômes pour donner un peu l'objectif de communication ou l' invite comme l'exemple 500 à 100. Lorsque l'utilisateur clique dessus, il voit toutes les plages qu'il peut sélectionner ici. C'est mieux qu'une simple entrée droite comme j'ai mélangé 2300 par mois. Vous pourriez en fait coûter 335$ par mois. Parfois, il est préférable dans ces valeurs de donner une fourchette. Et cela permet à l' utilisateur de sélectionner plus facilement une plage et ce n'est pas si intrusif. Surtout quand on pense à combien gagne-t-on un mois par rapport à un nombre exact par rapport à une fourchette. Et même pour les pieds carrés ici. Comme si vous ne connaissiez peut-être pas vraiment votre superficie exacte, mais vous connaîtrez une estimation approximative de la superficie de votre maison. La gamme et les listes déroulantes sont donc bonnes pour aller ensemble. Vous pouvez donc combiner les listes déroulantes avec des champs de formulaire. Vous pouvez donc voir ici que nous avons la valeur de notre numéro de téléphone. Disons que c'est un produit international, vous pouvez utiliser le menu déroulant ici pour sélectionner le type de numéro de téléphone que vous allez entrer. Ensuite, le format à quatre chiffres ici et les textes fantômes changeront en fonction de la sélection du pays que vous avez sélectionné. Encore une fois, si vous avez plus de 20 éléments, lorsque l'utilisateur clique si vous avez plus de 20 éléments, sur le formulaire ici, il verra la liste déroulante, mais il verra également l'état de saisie. Et lorsque l'utilisateur saisit, il filtre la liste ci-dessous. Vous verrez donc cela très courant pour les sélections d'états. Ainsi, lorsque vous tapez, MA, vous verrez apparaître la liste déroulante des filtres d'éléments en fonction de ce type. Et encore une fois, vous pouvez aller ici et cliquer sur Maryland, ou vous pouvez faire flècher le clavier vers le bas sur votre clavier et aller faire et sélectionner cet élément. Ainsi, l'état de survol ne fonctionne pas seulement pour survoler la souris, mais il fonctionne également si vous étiez un clavier fléché vers le bas sur votre clavier ici également. Un attribut important de ce genre est négligé. Parfois, c'est l'état de survol de cette liste déroulante ici lorsque vous concevez cela, vous pouvez combiner ces listes déroulantes avec des cases à cocher. Supposons donc que vous vouliez quelque chose qui comportait plus d'un type de sélection. La liste déroulante par défaut n'est qu'un seul critère de sélection sélectionné. Mais dans ce cas, vous pouvez le combiner avec les listes déroulantes pour informer une sélection multiple. Dans ce cas, nous examinons toutes les saveurs de crème glacée. Cochez les cases ici. Et si un utilisateur clique sur les cases à cocher et ferme la liste déroulante en cliquant en dehors de la fenêtre déroulante. Ainsi, chaque fois que cette liste déroulante apparaît, vous cliquez en dehors de celle-ci et elle se ferme. Et vous pouvez voir ici les sélections basées sur la liste déroulante multi-sélections qui s'affiche. Et si vous cliquez sur le X ici, il désélectionne la vanille dans la liste déroulante, et cette valeur sera également supprimée ici. Cela apparaîtrait et des biscuits et de la crème, qui glissent ici comme ça. C'est génial. Une autre façon d'utiliser la même liste déroulante consiste à créer une icône de filtre. Vous pouvez donc voir où le menu déroulant comporte le porteur ou la flèche pour indiquer la liste déroulante. Ensuite, pour le filtrage, nous utilisons une icône de filtre. Et si vous ouvrez cette icône de filtre vers le haut, vous pouvez voir que vous sélectionnez des types d'aliments. Cela serait bon pour une commande de service de livraison en ligne. Et dans ce cas, la nourriture chinoise, italienne et indienne est filtrée. En général, vous avez l'icône de filtre et en bleu ou en couleur pour indiquer que ce champ de formulaire est filtré. S'il n'était pas filtré, ce qui signifie que tout le type d'aliment a été sélectionné. Cela pourrait ressembler à ceci, qui est le choix. Juste la couleur grise ici, la même couleur que la couleur du trait. Il s'agit de l'état par défaut. Et s'il filtre la liste, elle devient bleue pour indiquer à l'utilisateur que les informations ci-dessous sont filtrées en fonction des types d'aliments. Encore une fois, vous pouvez utiliser le défilement dans la liste déroulante et faire défiler avec la souris pour voir les autres sélections situées sous le pli. Sous le pli signifie que ce sont les sélections que je ne vois pas sous la fenêtre de dialogue ou la fenêtre déroulante. Une grande chose que vous verrez souvent ici. Et vous n'avez peut-être pas remarqué qu'une liste déroulante mobile, une liste déroulante sur votre appareil mobile est un peu différente d'une liste déroulante de ce que nous venons de voir sur le Web. liste déroulante Mobile utilise l'ensemble de l'immobilier, toute la largeur du téléphone, et il permet de sélectionner facilement les éléments ici et faire défiler les éléments qui se trouvent dans le les éléments qui se trouvent dans cette liste déroulante, n'est-ce pas ? Ce que vous voulez éviter, c'est d' utiliser un menu déroulant mobile au format Web comme celui-ci, car il utilise moins d'espace et il peut être difficile d' appuyer sur cette zone et de le balayer pour voir le reste du éléments déroulants. Et il n'utilise pas non plus l'espace complet pour l' immobilier à claquer. Sur un appareil mobile, votre robinet convivial et convivial. Et le plus facile à atteindre est là où ces boîtes grises, c'est l'idée derrière une liste déroulante mobile est utiliser l'immobilier complet du téléphone, toute la largeur. Facilitez également le balayage vers le haut et vers le bas dans cette sélection déroulante. Ça ressemble à ça. J'en ai un ouvert ici. Tout ce que vous avez à faire est de cliquer sur le I sucré régulier ou de taper sur de la glace sucrée régulière ici. Votre niveau de douceur apparaîtra et s'il y avait plus de champs, il vous suffit de cliquer et de faire glisser notre balayage. Et cela montrerait des valeurs de niveau de douceur différentes ici. Et si vous sélectionnez le sucré ordinaire ou le semi-sucré ici, cela va fermer le menu déroulant. Vous avez un grand tapioca si vous le voulez. Je ne veux pas vous donner faim d'Abeba t mais oui, c'est essentiellement la liste déroulante mobile. Encore une fois, pour éviter les listes déroulantes de style Web sur les appareils mobiles, vous pouvez le faire pour tablette. Mais comme notre immobilier est si petit sur nos appareils mobiles, c'est un glissement vers le haut par le bas. Ensuite, lorsque vous touchez votre sélection, elle glisse vers le bas. Allons plus loin dans certaines choses à faire et à ne pas faire. Encore une fois, un menu déroulant est idéal pour trois valeurs ou plus. Une autre chose est que le formulaire de date rempli, il est préférable que l'utilisateur saisisse simplement la date ici. Mois, mois, jour, jour, année, année, année. Ensuite, au lieu de faire les listes déroulantes pendant des mois, des jours et des années distincts , des jours et des années , parce que c'est une affaire, il faudra trois onglets ou trois clics pour entrer ici et saisissez ces informations, puis trouvez la date. Imaginons que vous regardiez votre anniversaire ou quelque chose comme ça, pour faire défiler vers le bas et trouver la date à laquelle vous êtes au lieu d' engager une seule fois, seul clic, des numéros de clavier, entrées et être en mesure de saisir les chiffres en fonction de ce clavier. Ils sont parfaits pour les formulaires combinés remplis d'un sélecteur de date. Donc, ce que c'est que j' ai une discussion sur les sélecteurs de dates le prochain, je crois que la prochaine vidéo nous parlerons des sélecteurs de dates ici. Mais essentiellement, vous pouvez y entrer, vous pouvez entrer la date ici ou cliquer sur l'icône du calendrier, qui affichera ensuite le sélecteur de date. Et vous pouvez soit passer la journée d'aujourd'hui par défaut, soit avancer dans le temps ou revenir dans le temps en fonction du contexte de cela, si c'est comme planifier un rendez-vous, alors vous n'êtes que va aller de l'avant à temps. S'il s'agit plutôt d'une référence de date d'heure passée, comme si vous souhaitez qu'elle examine les analyses ou quelque chose qui s'est produit hier sur votre site Web, vous pouvez cliquer à nouveau dans les jours et ne partirez pas. Vous ne pourrez pas non plus passer à l'état futur ici. Mais j'aborde tout ça dans la vidéo du sélecteur de dates ici dans une seconde. Ok, donc si vous avez moins de trois valeurs, il est préférable de les exposer sous forme de boutons radio ou de cases à cocher, car encore une fois, cela revient à l'abordance est moins de clics et expose les informations à le niveau du visage et non dans le menu déroulant. Évitez donc si la question est que vous avez plus de 21 ans, utilisez les boutons radio oui ou non contre Avez-vous plus de 21 ans ? Cliquez sur, puis vous devez maintenant faire un autre clic. Non. C'est donc encore un clic. Il vaut mieux faire une version comme celle-ci avec les boutons radio. Liste déroulante. La largeur doit être minimale au minimum. Donc la fenêtre ici, cette chose, cette largeur doit être au moins la longueur du formulaire déroulant rempli. Ne rendez pas le champ de formulaire ici moins large que la boîte de dialogue réelle ou la boîte de dialogue déroulante. Ne réduisez pas cette largeur dans le champ de formulaire ici. Ce n'est pas grave s'ils passent comme s'ils pouvaient aller un peu plus loin que le menu déroulant lui-même. Il suffit de ne pas le faire moins de largeur ici à droite. Vous pouvez faire l'un ou l'autre comme ce champ de formulaire peut se trouver au-dessus de cette liste déroulante ici. Comme lorsque vous cliquez dessus, il ne peut pas dépasser la valeur. Ou il peut voir qu'il peut faire ce qu'il fait ici, c' est-à-dire qu'il glisse sous le champ de formulaire, soit un, soit totalement bien. Vous pouvez donc voir l'exemple ici comme si vous cliquez ici et la boîte de dialogue du champ de formulaire ici. Il va en plus de ce favori pour la liste déroulante des couleurs. Alors que c'est juste en dessous. Il n'y a ni bien ni mal ici. Ils ont dit que les deux sont acceptables. N'oubliez pas de bien espacer la flèche ici et le texte. Et utilisez toujours la largeur qui détermine la largeur de votre liste déroulante en fonction du mot le plus long que vous avez dans la zone déroulante. C'est ce qui déterminera la largeur lorsqu'elle est sélectionnée. Donc, si vous avez un long mot ici, assurez-vous que cela couvre le mot long ici. Et si ça dure plus longtemps, permettez-moi de taper ça très rapidement. Cool. Donc, si cela dure plus longtemps que le menu déroulant, ce que vous pouvez faire, c'est que vous avez le choix. Vous pouvez passer à deux lignes, ce que je n'aime généralement pas faire. Ou encore, vous pourriez faire ce que nous avons fait dans le passé, qui est une ellipse off. Bien, il suffit d'aller trois autres comme ça. Mais disons que votre parole est exactement là où elle est. Supposons que vous ayez le mot le plus long dans cette liste déroulante où vous n'avez qu' un mot sur la deuxième ligne. Il est préférable d'ajouter un peu plus de largeur à votre liste déroulante. Sortez ce qui est trop serré ici. Ajoutez-le un peu plus longtemps. Vous y allez. Cela devrait être une bonne largeur pour le mot le plus long de votre menu déroulant. Ce serait donc comme la plus longue saveur de crème glacée au monde ici. Je vais défaire ça. Encore une fois, donnez juste un espacement adéquat pour ces listes déroulantes. Ne serrez pas la flèche ou les textes ne permettent pas à ces choses de respirer. Encore une fois, ellipsez les mots longs ici, et ne passez pas à deux lignes. Je pense que ça a l'air bizarre de jeter aussi l' alignement asymétrique. Encore une fois, donnez un bon espacement entre les textes et les champs de formulaire. Ne les écrasez pas comme ça, non ? Cela devrait aller, lui donner une certaine marge de respiration. Bien trop serrés ici, ils étouffent cette chose devraient pouvoir respirer un peu. Comme toujours, utilisez la bonne longueur pour faire défiler la boîte de dialogue, n'est-ce pas ? Donc, tout ce contenu ici devrait pouvoir faire défiler. Ne rendez pas la zone de liste si grande qu'elle affiche tous les éléments, car elle ne conviendra pas à votre appareil ou à votre bureau. Et vous allez faire défiler le tout pour descendre. Quoi qu'il en soit, si vous avez une liste aussi longue, il vaut mieux faire un type de tête. Quoi qu'il en soit, affichez simplement la liste ici si l'utilisateur veut faire défiler vers le bas et la trouver géniale. Mais ils peuvent également taper sur le clavier et filtrer rapidement cette liste, puis trouver la valeur de la variable ou la sélection d'entrée qu' ils recherchent. Très bien, c'était des listes déroulantes. Et sur la prochaine vidéo, nous allons couvrir les sélecteurs de dates. Je vous y verrai. Au revoir. 8. Choix de dates: Parlons des sélecteurs de dates. Un sélecteur de dates est à peu près un menu déroulant pour les dates. Il permet également à un utilisateur de sélectionner des dates en interagissant avec une superposition de calendrier. Et il existe principalement deux types courants fonctions de sélecteur de date. Le premier ici permet de sélectionner une date spécifique. L'autre option la plus courante consiste à sélectionner la plage de dates. Commençons par le premier ici. S'il est utilisé pour sélectionner un jour spécifique, il est couramment utilisé pour la planification. Si vous deviez prendre rendez-vous, disons au Genius Bar, Apple Genius Bar ou à un aller simple. Ou si vous n'avez pas créé de rendez-vous pour votre Diego, vous n'avez pas vu votre dentiste pour se faire nettoyer les dents. Et ce qui se passe ici, c'est que cela fonctionne comme un menu déroulant et que vous cliquez sur le champ de formulaire lui-même. Le menu déroulant superposition de calendrier indique que vous avez une petite zone grise qui indique le jour où vous êtes , puis que vous touchez n'importe où et vous verrez que le séjour actif apparaît non seulement là où se trouvaient les textes fantômes, vous verrez le texte terminé actif. Vous verrez également une représentation de cette sélection sur la superposition du calendrier. Ensuite, il devient un peu plus compliqué quand choisir une plage de dates et, encore une fois, couramment utilisé pour les vols aller-retour ou les séjours à l'hôtel. Des exemples que vous pouvez trouver sur Google Flights ou Travelocity. Et ce qui se passe ici, c'est si ces dates d'enregistrement et de départ ou de départ et d'arrivée sont à la fois. Dates d'arrivée ou de départ. Ceux-ci apparaissent sous la forme d'une superposition de calendrier égale, mais de deux types différents de champs de date. Et ce qui se passe ici, c'est que lorsque vous cliquez et dites la date d'enregistrement, votre première sélection fait la première date. Et ensuite, sur la même superposition de calendrier, vous pouvez avancer des mois ou des mois en arrière. Et la deuxième sélection correspond à la plage de dates. Et vous appuyez sur OK ou vous pouvez cliquer hors de la fenêtre déroulante et la fermer. Et la première sélection saisira la valeur du premier sélecteur de date. Et la deuxième sélection ici, nous saisirons la valeur du deuxième sélecteur de date. Allons donc voir les États pour trouver un sélecteur de dates ici. Encore une fois, vous avez les deux types de styles les plus courants. Vous avez cette interface utilisateur matérielle pour qui n'a que la ligne. Et puis vous avez le formulaire de contour ici, nous sommes des décalages et un rectangle de contour. Encore une fois, l'état de vol stationnaire, revenant au principe où quelque chose s' allume ou a l' impression d'être vivant. Nous allons utiliser le bleu pour le contour ou pour l' interface utilisateur du matériau supprimée, sélecteur de date, la règle déroulante, utiliser la ligne pour, la ligne deviendra bleue. Et puis nous avons à nouveau l'état actif, c'est juste l'état d'entrée. L'erreur reste ici. Et un état désactivé en tant que transparence de 20 % dans le sélecteur de dialogue du calendrier. C'est assez compliqué en soi, juste la boîte ici parce qu' il y a beaucoup de choses à faire. Vous pouvez remonter un mois, vous pouvez aller de l'avant un mois. Comme je l'ai déjà dit, vous avez le rectangle gris autour des données. C'est aujourd'hui. Vous avez l'indication bleue, qui correspond à la date sélectionnée ou activée. Et puis vous avez également un état de survol qui ferait le tour et suivrait votre souris ici. Il y a donc beaucoup de choses à faire dans la boîte de dialogue. Vous pouvez également les utiliser et, encore une fois, vous pouvez les combiner avec un champ de date. Si vous avez une sélection de date, l'utilisateur peut entrer et taper comme nous le ferions le champ de date dans les champs de formulaire que nous avons vus auparavant, il suffit d'ouvrir un type de pavé clavier dans les chiffres, fera les barres obliques eux et ensuite ils finiront ça. Ou bien, ils peuvent cliquer sur l'icône Menu, ce qui ouvrira ensuite la liste déroulante du sélecteur de date ou la fenêtre de dialogue où ils pourraient sélectionner, faire la sélection pour la date. Vous pouvez également être assez rusé avec votre boîte de dialogue de date ou votre sélection déroulante. Et vous pouvez faciliter un peu la sélection des années passées et vous pouvez ajouter des mois. Et encore une fois, cela aiderait à rendre un peu plus facile pour l' utilisateur de remonter des années, passer dans différents mois ici, puis de faire les sélections ici également. Lorsque nous parvenons aux sélecteurs de dates mobiles, je vous le recommande, et c'est la meilleure pratique d'utiliser l'immobilier en plein écran. Et je vais vous montrer quelques exemples que nous avons créés pour une application sur laquelle je travaille. C'est génial pour. Encore une fois, tapez sur l' immobilier à utilise l'immobilier plein écran que nous avons, le précieux. Écrivez les biens immobiliers que nous avons sur les appareils mobiles. Et il est très facile de glisser deux années différentes. Je vais vous montrer un exemple ici dans une seconde. Encore une fois, il est très clair d'utiliser le, si cela prend l'immobilier en plein écran, vous pouvez utiliser ces barres ici pour indiquer que la plage de dates dans laquelle vous avez sélectionné pour un individu date aussi. Et encore une fois, il s'agit d'un immobilier plus exploitable, facile à balayer vers le haut et vers le bas et voir les mois à venir. Vous pouvez le voir ou les mois précédents, vous pouvez le voir dans des exemples Google Flight. Si vous allez voir Google Flights sur votre téléphone. Et puis voici le sélecteur de date nous utilisons pour une application sur laquelle je travaille. Il s'agit d'une application solaire, et vous avez essentiellement le sélecteur de date ici. Vous pouvez remonter le temps et analyser votre système. Et si vous cliquez sur ce mardi ou que vous touchez ce mardi, vous verrez à nouveau la diapositive de date. Vous pouvez y retourner. À ce stade, regardez à quel point il est facile de passer des mois différents. Très bien, pour que je puisse facilement aller dans le passé. Disons que je voulais aller voir le 23 septembre ici, je peux cliquer sur le 23, appuyer sur Terminé. Et cela changerait ma sélection ici. Il est beaucoup plus facile que de faire des allers-retours sur ces flèches, comme un moyen rapide d' entrer et de choisir une date. Ensuite, je vais vous montrer ici le champ de date personnalisé. Donc, le même principe ici. Nous appuyons sur la coutume, les diapositives et vous avez les dates de début et de fin. Encore une fois, il est très facile pour l' appareil mobile de glisser ces différents mois. Disons que je voulais faire le 29 septembre, jusqu'au 13 septembre. Et vous pouvez voir l'indication des barres orange pour transmettre à l'utilisateur la plage de dates. Et si vous appuyez sur Terminé, nous aurons la plage ici. Et l'utilisateur peut y retourner, ajouter des dates différentes dont il a besoin. C'est la meilleure pratique pour les sélecteurs de dates sur le Web, vous pouvez utiliser des choses comme ça. Ensuite, vous pouvez également utiliser ce type d' interaction pour les sélecteurs de dates mobiles. Passons à quelques choses à faire et à ne pas utiliser un champ de formulaire de date pour les anniversaires. Encore une fois, si vous faites une date de naissance, utilisez le format comme celui-ci où nous montrons MM, JD, YY. N'utilisez jamais de sélecteur de date pour un champ de formulaire de date de naissance. Cela s'affiche lorsque vous cliquez dessus, lorsque l'utilisateur clique sur le champ du formulaire du sélecteur de date, la liste déroulante passe par défaut à la date d'aujourd'hui. Donc, si vous pouvez imaginer, né en 1979, je dois revenir en 1979 ces mois. Comme personne ne voudra le faire là où sur un champ de formulaire ici, je peux simplement taper le format ba, ba, ba, ba, ba, ba, ba, ba, done. N'oubliez pas pour les appareils mobiles, donnez suffisamment d'espace pour votre calendrier et n'oubliez pas de donner un bon espace Tap. Si vous vous rappelez dans la vidéo précédente, j'ai parlé des directives d' interface utilisateur d'Apple d' au moins 40 pixels sur 40 pixels pour tout type de propriété sur votre appareil mobile. Vous pouvez voir ici si nous avons rendu le calendrier vraiment petit, il sera très difficile d' utiliser une valeur spécifique, surtout si vous avez de gros pouces ou de gros doigts. Voici donc 50 pixels sur 50. Vous pouvez voir que ce n'est pas le cas, ce n'est pas suffisant. Il va rendre quelqu'un vraiment difficile de sélectionner une seule de ces valeurs où, ici, chacune de ces lettres sont ces chiffres ici est précisément espacée de 50 par 50 pixels. Pour que nous suivions ce principe. Très bien, donc c'était adapté à la date, les sélectionneurs de dates. Et je vous verrai dans la prochaine vidéo où nous couvrirons les boutons radio, cases et basculer les modèles et les composants de l'interface utilisateur. voit là-bas. 9. Boutons radio, checkboxes, Toggles: Très bien, dans cette vidéo, nous allons parler boutons radio, de cases à cocher et de bascules. Pour boutons radio. Ils sont utilisés lorsqu'il existe une liste de deux options ou plus. Leur fonction permet à l'utilisateur de sélectionner exactement un choix. C'est tout ce que vous obtenez. Un choix avec les boutons radio. Et si vous cliquez sur un bouton radio non sélectionné, il désélectionne l'autre bouton radio sélectionné. Il ne s'agit donc que d'une fonction à choix unique. L'origine ici est qu'un bouton radio a été modélisé ces boutons radio physiques qui se trouvaient dans de vieilles voitures. Et ce qui se passe, c'est que vous auriez ces stations préférées prédéfinies que vous le feriez, l'utilisateur choisirait. Si vous cliquez sur cette sélection am ici, la voiture retournera lire la station de radio définie présélectionnée que vous aviez. Et si vous cliquez sur une autre station AM, celle qui était juste là reviendrait, et celle-ci reviendrait en jouant à l'autre station préférée que vous auriez. Il s'agissait donc d'une fonctionnalité similaire aux boutons radio, ce qui signifie qu'il ne s'agit que d'une seule sélection à la fois. Et au lieu de surgir et d'entrer dans le monde d' aujourd'hui, ils ressemblent davantage à ceci. Il y a des cercles pour un état par défaut, puis pour l'état actif, vous obtiendrez les deux cercles ici et les cercles intérieurs se remplissent, toujours remplis comme ceci. Vous pouvez les personnaliser. Je vais vous montrer comment les personnaliser ici dans une seconde. Mais dans la plupart des cas, il y a généralement déjà un bouton radio prédéfini dans l' état actif sélectionné. Même si vous avez eu une question de bouton radio comme celle-ci, j'ai dit : Avez-vous plus de 21 ans et vous appuyez sur Oui. Maintenant, il n'y a aucun moyen de le désélectionner. Vous ne pouvez pas simplement désélectionner cet état, c'est-à-dire revenir à cet état. Une fois que l'un est sélectionné, il reste sélectionné et vous devez maintenant choisir l'un ou l'autre, oui ou non. C'est la principale fonction du vent et c'est pourquoi vous devez utiliser un bouton radio, surtout au-dessus d'une case à cocher. La case à cocher vous donne plusieurs sélections. Si un bouton radio n'est qu'un seul critère ou une fonction de sélection. Vous pouvez voir ici quelques cas d'utilisation si vous deviez choisir à quelle heure voulez-vous, quelle heure est-il l'heure de votre dîner ? Et vous sélectionnez cinq heures, six heures ou sept heures, ce ne sera qu'une seule fois. Vous n'avez qu'une seule fois, dites en ce jour que vous allez dîner. S'il y a eu d'autres fois que vous ne voyez pas, voici comment le combiner avec un champ de formulaire ouvert si vous appuyez sur Autre que le formulaire ouvert rempli passe de l'état désactivé, qui est à nouveau à 20 % d'opacité et devient désormais l'état par défaut. Et un utilisateur peut entrer dans un créneau qu'il ne voit pas en fonction de son heure de dîner ici. Cool. Vous pouvez faire des boutons radio personnalisés ici où, dans ce cas, nous avons une sélection de votre sexe. Et donc, soit vous êtes un homme ou une femme. Et si vous êtes une femme, vous, lorsque vous placez votre souris ici, vous verrez le contour rose comme un survol. Ensuite, vous aurez cet état sélectionné, qui correspond à l'état couleur ici. Mais encore une fois, nous utilisons des boutons radio pour obtenir la bonne quantité de contenu ou de fonction, qui n'est qu'une seule sélection. Vous pouvez voir qu'il s'agit d'un style personnalisé pour une radio, mais il ne ressemble pas à un bouton radio, mais il fonctionne exactement de la même manière qu'un bouton radio où, si vous cliquez sur Mel, il désélectionne la case femelle et elle choisirait le mâle. Ici. Vous pouvez voir la même sélection ici est que j' ai sélectionné Mel et non féminin. Et si vous passiez votre souris sur l'état féminin ici, il cliquerait et cliquerait. Vous choisiriez également la carte féminine ici. La différence est que nous avons inclus le bouton radio ici sur la carte elle-même, n'est-ce pas ? Nous avons donc ajouté la carte. Sans la carte, ça ressemblerait à ça. Nous avons ajouté la carte ici pour lui donner un peu plus d'élégance. Si vous avez plus de trois sélections de boutons radio de ce type, disposez-les verticalement. C'est normal de les faire côte à côte ici. Si vous en avez deux ou trois, vous pouvez probablement pousser jusqu'à quatre. Mais plus que cela, vous voulez disposer verticalement, c'est plus facile à lire et à numériser. Très bien, voici une sélection où vous avez tout un tas de boutons disposés ici. Et ce qui se passe quand ils sont disposés verticalement sorte, c'est que vous n'avez peut-être pas assez de biens immobiliers pour que tous ces biens soient adaptés et que vous ne voulez certainement pas les diviser en deux lignes, Je vois juste à quel point ça a l'air bizarre. Et ce qui se passe, c'est que l'utilisateur a du mal à analyser l'association entre le bouton radio qu'il a sélectionné et l'heure. Vous pouvez donc voir que les sept heures sont entrées, mais parfois il peut être déroutant si le bouton est pondéré ici plus de six heures, ou est-ce sept heures ? Si vous le placez verticalement comme ça, cela peut prendre plus de biens immobiliers à l'écran. Mais en ce qui concerne la fonction, la relation entre le bouton radio et le champ temporel est beaucoup plus claire relation entre le bouton radio et le . Si vous avez plus de dix options, disons , il vaut mieux utiliser une liste déroulante à nouveau. La liste déroulante remplit la même fonction. Il s'agit d'une sélection à la fois. À quelle heure allez-vous vous coucher ? Et vous allez faire notre texte fantôme ici. Par exemple 1030, ils peuvent entrer, faire cliquer sur le menu déroulant, sélectionner 1030 ou autre, sélectionner 1030 ou autre, quelle que soit l'heure où vous vous couchez, peut-être quatre heures du matin. Nous sommes ici. Cela prend un peu trop de biens immobiliers à l'écran. Et il est important de rechercher immédiatement un utilisateur pour voir toutes ces options où un menu déroulant est préférable car il le masquera dans la fenêtre. Vous enregistrerez l'immobilier de l'écran et l'utilisateur peut faire défiler ou balayer pour trouver sa fenêtre horaire préférée. Très bien, la prochaine chose ici est de se souvenir d' une option à la fois. Uniquement. Choisissez un numéro un à cinq, vous ne les choisissez qu'un seul numéro, le numéro un. Vous pouvez voir ici que nous enfreignons les règles fondamentales des boutons radio. Vous ne pouvez pas en avoir plus d'une sélection. Cela fait plutôt référence à un type d'interaction de case à cocher et non à un type d'interaction de bouton radio. Très bien, si bonne ségue. Allons parler des cases à cocher. Encore une fois, les cases à cocher sont utilisées lorsqu' il existe une liste de deux options ou plus. leur fonction permet à un utilisateur de sélectionner plusieurs choix dans les valeurs de sélection. n'y en a donc pas, aucune case à cocher n'est cochée par défaut et l'utilisateur peut accéder et désélectionner plusieurs options à la fois. Vous pouvez également avoir des cas où vous filtrez une liste. Vous pouvez déjà avoir tous ces éléments présélectionnés et l'utilisateur peut entrer et les désélectionner en fonction de cela. Mais dans ce cas, nous voulons que vous veniez sélectionner vos saveurs de crème glacée préférées. Vous pouvez voir ici où l'utilisateur clique ou appuie sur l' un de ces éléments. Ensuite, vous verrez la sélection multiple ici avec la case à cocher. Encore une fois, vous pouvez combiner les cases avec les listes déroulantes comme nous l'avons mentionné dans la vidéo déroulante où nous avons le champ de formulaire ici sur la vidéo déroulante où lequel vous cliquez, vous avez les cases à cocher ici sur lesquelles vous cliquez Biscuits et crèmes rocheux à la vanille. Ensuite, vous verrez apparaître les sélections de formulaires de pilules ici. Et encore une fois, l'utilisateur peut cliquer sur l' un d'eux pour supprimer ce qui décocherait également dans la case à cocher. Les styles sont assez simples, ils ont juste un contour par défaut. Encore une fois, vous pouvez faire deux choses pour le vol stationnaire. Vous pouvez rendre le contour bleu ou remplir de bleu, puis l'état actif lorsqu'il est sélectionné, vous avez la petite coche. Ensuite, vous pouvez avoir l'état désactivé lorsque quelque chose est sélectionné dans l'état actif. Encore une fois, 30 % d'opacité. Ou vous pouvez l'avoir à l'état par défaut où rien n'est sélectionné. Et encore une fois, c'est 30 % d'opacité. Vous pouvez personnaliser les cases à cocher. Encore une fois, il suffit de les utiliser pour le bon type de contexte avant de les utiliser comme As-tu 21 ans ou plus ? Oui ou non, ou masculin ou féminin ? Une sélection par critère où pour les boutons radio où les cases à cocher nous pouvons faire des multiples. Dans ce contexte, nous allons demander à quelqu'un quel est son préféré, sélectionner son activité préférée. Lorsque l'utilisateur survole la souris sur l'un de ces éléments, nous pouvons utiliser le contour pour indiquer qu'ils sont vivants , cliquables et tapables. Et quand ils cliquent sur l'un d'eux, nous remplissons la forme de la carte ici. Et maintenant, vous pouvez voir qu'il s' agit de cases à cocher personnalisées. Ils permettent à un utilisateur d'en sélectionner plus d' un, puis un peu plus fantaisiste que la case à cocher ici avec du texte à côté, nous pouvons ajouter des petites illustrations et des icônes sympas. J'ai également une vidéo complète sur les icônes et iconographie et sur les meilleures pratiques les utiliser vers la fin du cours. Bon, passons à bascule. Les bascules sont à peu près un interrupteur qui permet à un utilisateur d' activer et de désactiver les choses. Et cela représente beaucoup de ce que nous voyons dans nos maisons, qui sont des interrupteurs d'éclairage. Il y a donc plus d' éléments exploitables utilisés dans les paramètres. Le problème est comme le Wi-Fi et le Bluetooth. Vous verrez cela beaucoup ou désactiverez les notifications. Mais la fonction principale pour activer et désactiver. Vous mettez quelque chose ou vous éteignez quelque chose. Lorsqu'une case à cocher correspond davantage à un critère de sélection et qu'un bouton radio est également un critère de sélection. Un bascule a un peu plus d'unicité en ce sens parce qu'il s'agit plus souvent d'un type d'interrupteur. Vous le voyez ici comme des notifications reçues. Vous verrez que l' état par défaut est gris. Et ensuite, lorsque l' utilisateur l'active, il indique que les notifications sont activées. Lorsqu'il est activé, il indique que les notifications sont désactivées. D'une façon, vous pouvez modifier les textes étiquetés pour indiquer l'état dans lequel il se trouve. Vous pouvez également le faire ici. Vous avez reçu des notifications que vous avez reportées à gauche, sur le bureau droit d'une couleur plus foncée, maintenant c'est la même couleur que le bouton radio ou le bascule. Et puis, lorsque vous l' allumez, il devient l'état de couleur utilisé pour l'état actif de la bascule et la désactivation revient à cet état gris. Même affaire ici. Voici un autre exemple où il est un peu plus petit et plus courant sur le web est ce type. Et vous cliquez sur le cercle, vous glissez. Encore une fois, nous ajoutons de la couleur pour indiquer que c'est activé. Ensuite, vous pouvez le désactiver à nouveau en tant qu'appel à l'action ou l'activer lorsqu'il est à l'état par défaut ici. Allons voir des choses à faire et à ne pas faire ici. Encore une fois, comme je l'ai déjà mentionné, utilisez la couleur non seulement à l'intérieur de la boîte, mais aussi sur le texte pour indiquer l'état actuel. Et évitez de le faire là où le texte se trouve à l'intérieur de la bascule car il n'est pas clair si vous regardez cela, si je l'éteins en glissant ou si l'état est désactivé, ou dans ce cas ici, est-ce que c'est allumé ou est-ce que je vais l'allumer en engageant avec cette bascule ? Ensuite, modifiez de nouveau les textes pour informer l'utilisateur de ce qui se passe. Ainsi, au lieu d'un texte d'appel à l'action, vous pouvez également donner aux textes d'état où vous indiquez simplement quel est l'état de cette bascule à l'heure actuelle, quel Wi-Fi est désactivé. Et lorsque vous touchez et glissez ou que vous touchez dessus et que vous cliquez dessus, vous verrez que le Wi-Fi change de texte est activé. Encore une fois, évitez quelque chose comme ça grâce à la case à cocher où le Wi-Fi est activé et le Wi-Fi est activé. Encore une fois, la case à cocher est plutôt un critère de sélection où, si vous avez un Wi-Fi sur un type de critères comme celui-ci, il est préférable d'utiliser un bascule. N'oubliez pas que la gauche est toujours hors état et la droite est toujours sur l'état. Encore une fois, faites correspondre les conventions actuelles des bascules existantes. Ne l'éteignez pas et que la gauche est allumée. OK, c'est cool. Il s' agissait de boutons radio cases à cocher et de bascules. Et le prochain que je vais couvrir sur la vidéo est celui formulaires adressés et des formulaires de recherche. Et je vous y verrai. 10. Formulaires de recherche: Très bien, parlons donc des formulaires d'adresse et des formulaires de recherche. Ces deux-là sont si communs et ils semblent faciles, mais ils sont en fait assez délicats, surtout les forums de recherche que je voulais juste les faire, parler et des exemples et faire et ne fonctionne pas uniquement sur ces deux types de champs de formulaire. Encore une fois, un formulaire d'adresse tel qu'il semble, c'est des formulaires pour votre adresse. Ils sont très courants. Nous les utilisons tout le temps. Mon champ préféré à utiliser est le seul champ de formulaire, le formulaire d'adresse de saisie semi-automatique. Au lieu d'avoir l'adresse du domicile avec, vous savez, votre adresse, votre ville, votre État, votre code postal, votre pays. Ce que vous pouvez faire, c'est que vous pouvez faire quelque chose comme celui-ci lorsque vous avez votre adresse personnelle, vous avez les SMS fantômes, entrez simplement votre adresse par défaut. Et lorsque vous saisissez l'adresse personnelle ici, vous utiliserez la recherche automatique ou la saisie semi-automatique ici, et cela va chercher dans vous utiliserez la recherche automatique ou la saisie semi-automatique ici, la base de données d'adresses fonction du nombre de caractères que vous avez mis dans votre auto, dans votre formulaire rempli ici. Habituellement, ils ne démarrent que lorsque vous avez au moins trois ou quatre caractères dans les champs de formulaire. Et puis cela commencera à se rétrécir, réduisant cette liste déroulante de résultats. Et dans la liste ici, il peut que nous ayons 30 ou 40 résultats fonction de vos commentaires ici, mais nous n'affichons que cinq tirets sept à la fois. Il est plus facile pour un utilisateur de scanner cinq ou sept d'entre eux pour voir s'il y a des correspondances. S'il y en a, ne voyez pas la correspondance, ils peuvent facilement rester serrés. Au fur et à mesure qu'ils continuent de taper, cette liste d'adresses auto-complète va se filtrer en fonction du nombre de caractères. Et ce résultat de recherche deviendra plus petit et plus petit et plus précis à l' adresse que vous saisissez en tant qu'utilisateur jusqu'à ce que vous trouviez votre adresse. Ainsi, à ce stade, l' utilisateur peut arrêter de taper. Voyez ici l'adresse qu'ils veulent indiquer, qui est cinq par cinq Gary Street, San Francisco. Ils peuvent faire flèche vers le bas sur leur clavier. Encore une fois, vous devez avoir l'état de survol ici, sinon l'état du survol apparaîtrait également lorsque l'erreur, lorsque l'utilisateur faisait du clavier haut et vers le bas sur le clavier. Ensuite, lorsqu'ils appuient sur Entrée, vous pouvez voir maintenant que le formulaire d'adresse unique porte le nom de la rue , la ville, l'État et le pays. Et vous pouvez même ajouter du code postal à cela. Vous pouvez facilement appuyer sur X ou sur X dans le champ du forum, ce qui vous ramènera à l'état par défaut ici. C'est un moyen très facile ramener l'adresse de quelqu'un à ce mot clé, abordance, comme l'accessibilité des utilisateurs, leur permettant de gagner du temps, d'économiser de l'énergie. Voici plutôt une méthode manuelle traditionnelle. Encore une fois, ce n'est pas une marque ou une rupture. Vous le verrez tout le temps. Mais je vais vous montrer comment nous pourrions toujours utiliser la base de données de recherche automatique de saisie des champs d'adresse pour remplir toutes les informations dont vous avez besoin pour une adresse ici, même si vous devez la casser. comme ça, où vous avez l'adresse, la ville, l'état et le code postal. Donc, traditionnellement, ce à quoi cela ressemblerait est quelque chose comme ça et vous devrez taper votre adresse. Vous auriez votre deuxième adresse, vous saisissez dans votre ville. Vous auriez un menu déroulant pour votre État. Vous disposerez d'un code postal et d'une liste déroulante pour votre pays. Encore une fois, n'utilisez jamais de liste déroulante pour une ville. Vous pouvez toujours utiliser la liste déroulante pour sélectionner un état. Rarement, vous tapez dans l'état ici. Utilisez donc toujours un texte libre ici pour la ville et un menu déroulant pour l'État et le pays. Bon, donc encore une fois, si vous pouvez éviter cela, faites-le. Et voici un moyen de combiner celui que je viens de vous montrer ci-dessus avec ce type d'interactions de champs de formulaire. Supposons donc que vous ayez l'adresse 12, que vous ayez la ville, l' État, le code postal. Et nous savons déjà que la plupart des gens seront pour le service que nous fournissons aux États-Unis. Nous pouvons quitter ces États-Unis. Ce qui se passe ici, c'est qu'un utilisateur va dans le champ d'adresse numéro un, qu'il saisit son adresse, il voit la correspondance. Oui. C'est le 515 Geary Street, San Francisco. Ils cliquent là-dessus. Et ce qu'il fait, c'est qu'il renseigne l'adresse, la ville, l'État , le code postal et le pays dans ces champs de formulaire afin qu'ils n'aient pas à entrer dans chacun d'eux. Il s'agit d'une façon intelligente de faire les formulaires d'adresse. Allons voir le formulaire de recherche. La zone de recherche est donc essentiellement une combinaison d'un champ de saisie et d'un bouton d'envoi. Et ils semblent super faciles. Mais il y a beaucoup de choses pour eux. Et pour les sites complexes, la zone de recherche peut être la principale façon dont un utilisateur trouve quoi que ce soit ou la première chose qu'il fait lorsqu'il arrive sur votre site, pensez à Amazon. La première chose que vous effectuez sur Amazon, c'est de faire une recherche. Vous cherchez ce que vous recherchez. Dans ces cas, le formulaire de recherche est très important. Et la page de résultats que la zone de recherche vous donne aussi une grande importance. N'oubliez pas que la recherche n'est nécessaire que lorsque vous avez beaucoup de contenu. Si vous n'avez pas beaucoup de contenu sur votre site, vous n'avez pas besoin de rechercher des tailles impaires où nous accordons priorité aux produits que nous construisons. La recherche intervient plus tard après que nous ayons plus de choses comme si un utilisateur saisit un tas d' informations dont il a besoin pour rechercher. Nous ne commençons généralement pas par la recherche car nous n' avons même pas encore de produit. Nous lançons sans recherche, laissons les utilisateurs entrer des informations indiquant qu'ils l'ont attendu techniquement que vous souhaitez rechercher à un moment donné dans notre application. Et puis, à ce moment-là, nous ajouterons la recherche plus tard. s'agit donc que d'une sorte de mécanisme de portée ou d'un ensemble de priorités pour le lancement de nouveaux produits. Mais si vous avez un site de commerce électronique où vous allez avoir une tonne de choses que quelqu'un qui a besoin de trouver, alors les recherches sont très importantes et devraient être presque la chose numéro un que vous feriez, vous commenceriez à créer en plus du contenu et des produits dans les flux de paiement que vous auriez. Encore une fois, rendez la recherche accessible sur tous les écrans d'un site complexe et ne compliquez pas la recherche des utilisateurs. Vous êtes donc généralement en haut à droite ou au milieu de votre barre de navigation sur votre site de recherche. Voici quelques exemples. Le premier exemple ici est un champ de recherche courant, mais il n'y a pas de bouton d'envoi. Et le bouton Soumettre est activé en effectuant clavier Entrée sur votre clavier. Et cela soumettra le champ de recherche ici et amènera l'utilisateur à la page des résultats. Dans ce cas, encore une fois, saisie semi-automatique est très importante. Et vous pouvez utiliser des textes fantômes pour indiquer certaines des recherches possibles que nous souhaitons rechercher par un utilisateur. Le deuxième exemple ici est un bouton physique. Encore une fois, l'utilisateur peut toujours appuyer sur Entrée sur le clavier pour soumettre la recherche et accéder à la page des résultats de la recherche. Ils peuvent également cliquer sur le bouton Rechercher qui les amènera à la page des résultats de la recherche. Et dans les deux cas, la saisie automatique reste très importante. Mais rappelez-vous que le bouton de recherche physique visuel indique à l'utilisateur que s'il n'y a pas de correspondance dans la saisie automatique, il peut toujours appuyer sur le bouton Envoyer et trouver la correspondance que nous avons eue Impossible de trouver la saisie semi-automatique. Je sais que cela semble assez complexe, mais laissez-moi vous montrer l'exemple ici. Google est donc un excellent exemple de champ de recherche sans bouton Envoyer. Mais je veux vous montrer comment, de toute façon, soit vous soumettez sur le clavier soit vous disposez d'un bouton physique sur lequel vous pouvez cliquer ou encore pouvoir appuyer sur Entrée sur votre clavier en tant que soumission. Mais je veux vous montrer comment prend la saisie semi-automatique, joue un rôle à cet égard. Disons que je suis dans Google et que je tape la typographie. Vous pouvez voir qu'il me donne le cas présent, il me donne, je pense que dix résultats de recherche ici sont les plus courants. À ce stade, ce que je pourrais faire, c'est que je peux flèche sur mon clavier, je suis en train de se rétrécir. Je vais faire une flèche vers le haut. Je peux sortir X ou cliquer sur l'une de ces modifications, m' amener à ma page de résultats. Mais au fur et à mesure que je continue à taper, les résultats de la recherche commencent à être de moins en moins nombreux. Et je vais commencer à taper des numéros bizarres ici. Très bien, donc maintenant il n'y a plus de résultats de recherche. Mais je peux toujours appuyer sur Entrée sur mon clavier. Quel que soit le système que nous faisons ferons de son mieux pour correspondre aux options qui existaient. Et donnez-moi la page de résultats ici. C'est là que l'autocomplétion entre en jeu, est pratique. Et aussi le bouton Rechercher, car le bouton de recherche indiquera toujours à l'utilisateur que, quelle que soit sa saisie, vous pouvez toujours la rechercher. Il peut y avoir de rares cas où votre page de résultats n'a rien donné. Vous pouvez revenir à la page de résultats sans aucun résultat dans ce cas, vous pouvez voir Google a environ huit résultats. En se basant sur ça. Il s'agit de rechercher sur le Web un nom vraiment bizarre comme celui-ci, et il y a encore huit résultats. Voyons si nous pouvons faire en sorte qu'il n'y ait aucun résultat ici. Oui, c'est toujours des résultats. Vous pouvez donc voir ce que je veux dire ici, c'est que, si vous concevez quelque chose pour la recherche, pas seulement le champ du formulaire de recherche, vous devez réfléchir à la façon dont l' utilisateur remplit automatiquement son recherches. La façon dont ils sélectionnent les compléments automatiques. La page de résultats de la recherche correspondant aux résultats. Et s'il n'y a pas de résultats, ils peuvent toujours appuyer sur Entrée sur le clavier et accéder à une page de résultats. Et s'il n'y a pas de résultats, nous devons réfléchir à cette expérience utilisateur. Est-ce que nous avons juste clair que le Texas a désolé, il n'y a pas eu de résultats à cette recherche. Cependant, nous abordons ce type de cas Edge qui est important. Encore une fois, lorsque vous pensez simplement chercher, cela semble facile, mais c'est beaucoup plus complexe. Et je vais vous montrer un peu plus de complexité lorsqu'elle entrera dans une interface mobile sur le fonctionnement de la recherche. Rapidement, passons en revue l'auto-complétion. Encore une fois, nous avons obtenu cinq à sept dans le cas de Google, on dirait qu'ils en ont fait dix. Les correspondances les plus courantes fonction de la sélection effectuée par l'utilisateur. Cette affaire, nous ne faisons que regarder l'OPS. Nous essayons de faire correspondre le téléphone ici, c'est ce que nous supposons que l'utilisateur souhaite rechercher en fonction des fonctions de recherche les plus courantes que nous ayons dans notre système qui commencent par l'OPS. Encore une fois, le x ici, l'utilisateur peut annuler cela. Et alors que je viens de parler du SOS de saisie automatique, ce menu déroulant n' apparaît qu' après les trois premières recherches. Il donne à l'utilisateur une liste bien plus claire de ce qu'il recherche. Encore une fois, ne surchargez pas vos utilisateurs avec des suggestions en cinq tirets sept à dix options ici sur la saisie semi-automatique fonctionnera très bien. Et n' oubliez pas de définir du survol ou l'état des flèches haut et bas du clavier . Encore une fois, vous pouvez utiliser la même interaction pour effectuer une recherche sur votre barre de navigation Web. Et vous pouvez effectuer un état par défaut comme celui-ci où nous affichons réellement le mot recherche et que l'icône de recherche survole, elle s'allume et un état actif. Nous pouvons prendre plus de biens immobiliers comme celui-ci, soit pousser le texte soit cacher tout le texte. Ici. Vous pouvez rendre ça très long. Et l'utilisateur commence à taper. Nous ajoutons la liste déroulante de saisie semi-automatique. Ils peuvent appuyer sur X ici pour supprimer la liste. Ou ils peuvent appuyer sur l'OPS et appuyer sur le clavier Entrée. Et nous devrions définir une page de résultats de recherche pour ce que nous pensons les meilleures options pour l' OPS ou s'il n'y a pas eu de résultats. Ou ils peuvent dire tout ce que je cherchais réellement des étuis de téléphone. Cliquez sur les étuis de téléphone et nous les emmenons vers une page de résultats affichant les étuis du téléphone. Et sur cette page de résultats, ils devraient toujours être en mesure de rechercher, devraient être à tous les endroits. Voici la même interaction de recherche pour mobile. Et tout ce que nous avons fait ici, c'est que j'ai une vidéo où je parle menus et de tiroirs ici vers la fin de la classe, je vais beaucoup parler fonctionnement de ces navigateurs au niveau parent sur votre barre de navigation. se réduira en icônes de menu ou, dans ce cas, comme une liste déroulante de menu. Nous avons toujours la barre de recherche ici. Et pour le mobile, prendre la barre de navigation complète ici verrouiller l'utilisateur et garder concentré dans cet état de recherche. Une autre chose à faire, à faire et à ne pas faire pour les cotisations pour le Web est simplement montrer si vous avez l'immobilier, montrez le mot recherche. Cela permet d'économiser, il faudra un peu plus d'espace. Vous pouvez également étendre l'état actif de la recherche pour donner un peu plus de biens immobiliers à l'utilisateur qui saisit. Mais si vous avez la salle, affichez la barre de recherche à donner ou le texte de recherche ici et le champ du formulaire de recherche ici comme meilleur moyen de transport. Et il montre à l'utilisateur, il lui donne aussi un peu plus de cible de tapotage, où appuyer sur la barre de recherche plutôt que de faire quelque chose comme ça, bien que ça semble lisse, c'est juste cette petite icône de recherche. Si vous avez l'immobilier, montrez le shell rempli de formulaire, le texte du fantôme de recherche ici, c'est encore plus cliquable immobilier, abordable. Il a un moyen de transport plus fort, rappelant toujours à l' utilisateur qu'il y a une recherche ici par rapport à l'icône. Mais si vous n'avez que le, lorsque cette réponse est cette barre de navigation apparaît sur une interface mobile. Ensuite, il est bon d'afficher uniquement l'icône elle-même , car vous n'avez pas la place pour toute la barre de recherche. Ce n'est que lorsque vous avez la salle que vous souhaitez afficher les textes de recherche et le champ étranger ? Et évitez de faire quelque chose comme ça pour le web lorsque vous avez évidemment la place pour afficher le champ du forum et la barre de recherche. Et même sur mobile, si vous avez la place pour le faire ici, mais c'est acceptable si vous aviez quelque chose comme ça, là où c'était juste l' icône de recherche ici lorsque vous êtes sur mobile. Ce que je voulais aussi appeler pour le mobile, c' est que c'est une interaction délicate que vous ne prendriez pas nécessairement tout de suite à moins que vous ne vous engagiez beaucoup dans la recherche dans ce type d'état d'esprit. Lorsque vous le faites, lorsque vous effectuez une conception d'interaction ou une perspective UX, chaque fois que vous utilisez des appareils, réfléchissez simplement à la façon dont ces éléments se comportent. Il s'agit d'une interaction très courante sur Apple. Interfaces est la zone de recherche de messages. Si vous regardez le message Turks box maintenant sur mes messages, je peux créer un nouveau message ici avec la petite boîte bleue ici. J'ai également les paramètres avec les trois icônes ici, et j'ai cette barre de recherche ici. Ce qui se passe lorsque je clique sur la recherche ou que je tape sur la barre de recherche ici, c'est que cette barre de recherche flotte en fait. Et ça me place dans un mode de recherche où tout ce que je peux faire à ce stade, c'est me concentrer sur la recherche. Soit je recherche, je peux appuyer sur Annuler et revenir au mode que j'étais auparavant. Je peux taper ma recherche, je commence à voir l'achèvement automatique et les correspondances à ma recherche ci-dessous. Je peux facilement appuyer sur X à X pour sortir le texte et continuer à taper d'autres textes. s'agit d'une très bonne interaction car elle concentre l'utilisateur sur un objectif et une tâche spécifiques, à savoir dans ce cas la recherche. Ce que vous voudriez éviter. Ce type où supposons que vous appuyez simplement sur Rechercher. Maintenant, je suis en mode recherche et je ne suis pas concentré au même point de recherche. Je peux entrer et appuyer sur Créer un nouveau message. Ou je pourrais entrer dans les paramètres ici, je peux sélectionner de nouveaux messages, modifier les noms, faire les photos. Je peux également voir les textes de ma mère ici dans l'état de recherche. Il ne s'agit donc pas de garder l'utilisateur concentré dans ce type d'état. Il y a trop d'actions en cours en plus, la seule chose que nous essayons de réaliser pour cet utilisateur est la recherche. Ils touchent la recherche. Ils informent l'interface utilisateur qu' ils souhaitent effectuer une recherche. donc important de les concentrer sur est donc important de les concentrer sur cette interaction par rapport à quelque chose comme celui-ci. C'est une interaction délicate et délicate, mais vous comprenez pourquoi elles le font. Cela a beaucoup à voir avec le transport et le maintien de la concentration de l'utilisateur. Par rapport à ici, il y a trop de choses qui se passent à la fois. Génial. Ainsi, les formulaires d'adresse et les formulaires de recherche vous verront dans la vidéo suivante. Nous parlerons des barres d'onglets et des barres de titre. 11. Barres d'onglets et barres de titres: Très bien, Bienvenue dans la vidéo suivante. Nous allons couvrir les barres d'onglets et les barres de titre. Commençons par la barre d'onglets. Par conséquent, les mots tabous sont également appelés barres de navigation inférieures. Ils apparaissent en bas des écrans de niveau parent d'une application. , il permet aux utilisateurs de basculer rapidement entre différentes sections de l'application ou des destinations au sein de l'application. Ils sont également utilisés pour les applications mobiles et tablettes ou lors de la visualisation d'un site Web sur un appareil mobile ou tablette. Mais évitez de les utiliser pour tout ce qui concerne le bureau du site Web. Nous les avons tous vus. Ils ressemblent à ceux-ci dans l'application beauté des robots, cette petite section ici, c'est votre barre d'onglets. Il s'agit donc d'un élément d'interface utilisateur de navigation. Et avant d'aborder certaines des meilleures pratiques et quelques conseils pour les utiliser, je veux parler un peu architecture de l' information car comme nous allons commencer à entrer dans d'autres vidéos, nous parlerons non seulement des niveaux d'architecture de l'information, mais aussi de la navigation. Donc, si vous songez à naviguer dans le contenu de votre site ou de vos barres de navigation ou à la façon dont une application d'expérience utilisateur candidat à l'utilisateur navigue, ou comment l'utilisateur navigue-t-il dans votre expérience utilisateur ? Cela concerne en grande partie l' architecture de l'information ou l'IA. Le fondement fondamental, juste au niveau de base, est que nous avons un système comme celui-ci où vous avez un niveau parent, puis que vous avez un niveau enfant. L'enfant a donc une relation avec le parent, puis vous avez un niveau petit-enfant. Ensuite, le petit-enfant a une relation avec le niveau de l'enfant. Dans le monde de, dans cet exemple, je vais donner, c'est comme de la crème glacée. Le niveau parent correspond aux tailles de crème glacée, petite, moyenne, grande ou de cône. Et le niveau de l'enfant, celui des informations relatives au niveau parent de la taille des glaces, sont des saveurs de crème glacée. Parce que si vous choisissez une grande taille, vous pouvez obtenir trois boules de saveurs différentes. Eh bien, si vous choisissez une petite taille de saveur de crème glacée par e-mail et obtenez une ou une saveur si vous choisissez une petite taille. Vous pouvez donc voir comment il existe une relation entre ce niveau enfant et ce niveau parent. Et puis du niveau petit-enfant dans analogie de la crème glacée, voici des garnitures de crème glacée. Et il a un rapport avec les saveurs car les saveurs dicteront ou indiqueront le type de garniture que vous voudrez sur votre crème glacée. Lorsque nous réfléchissons à des niveaux d'information importants, le parent est le plus important. Le deuxième des parents est l'enfant, et le troisième est le petit-enfant. Et pour ce qui est de la hiérarchie et de l'importance, l' une des choses qui est intéressante ici est que cela s'applique également à la façon dont les gens pensent à l'information. C'est ce qu'on appelle un modèle mental. Et j'en parlerai quand nous arriverons aux vidéos du menu. Mais si vous allez n'importe quel magasin de crème glacée n'importe où dans le monde, la première chose qu'ils vous ont demandé, c'est la taille de la crème glacée. Ils n'entrent pas et vous demandent un cool. Bon, eh bien, quelles garnitures aimeriez-vous ? C'est plutôt étrange. Cela commence donc généralement par ce niveau d'architecture d' information qui s'applique à la convention commune de crème glacée, hiérarchie et de modèles mentaux de crème glacée qui existe dans le monde. Cela commence donc par des tailles qui vont aux saveurs et aux garnitures. Ce niveau de compréhension de la façon dont information se rapporte les unes aux autres d' un point de vue hiérarchique est important au fur et à mesure que nous parcourons ces classes. OK, c'est cool. Parlons donc des meilleures pratiques pour les barres d'onglets. Comme je l'ai déjà dit, catégorisez le contenu de premier niveau dans votre barre d'onglets. Ces destinations sont donc ces catégories qui doivent être au niveau parent comme la maison, profil, la boutique, la navigation, ce type de choses. Utilisez la barre d'onglets uniquement pour la navigation et les destinations, non pas pour les éléments indépendants. Donc, ce ne devrait pas être comme des choses où un bouton d'action ou vous feriez quelque chose. Ils sont axés sur la destination et la navigation. Pour votre mobile et votre tablette. onglets. À tout le moins, il faut avoir deux catégories. Et au maximum, vous pouvez en avoir cinq, mais pas plus de cinq et pas moins de deux, et je vais m'attarder un peu plus que ça sur les choses à faire et à ne pas faire. Encore une fois, ne les utilisez pas pour les postes de travail Web. Ils conviennent parfaitement aux appareils mobiles et tablettes. Et ne masquez pas la barre d' onglets lorsque l'utilisateur appuie sur une autre option dans la barre d'onglets. La taille du robinet par onglet est environ 40 pixels par 40 pixels au minimum. Mais vous pouvez l'obtenir jusqu'à 75. À 75 ans. Ils sont meilleurs que ce que nous appelons le menu des hamburgers. Si vous vous souvenez, j'ai une vidéo complète sur les menus, mais le menu hamburger est en quelque sorte un élément d' interface utilisateur qui héberge les options de menu est l'endroit où l'utilisateur clique dessus. Il révèle ces options à l'utilisateur, ce qui nous permet d'économiser de l'immobilier. Et il peut contenir beaucoup plus d'options que ce que nous pourrions afficher à l'écran. Mais si nous pouvons classer notre système d' onglets ou notre profil ou que notre système de navigation au niveau parent a besoin d' au moins deux à cinq, nous n'avons pas besoin de hamburger. Nous pouvons utiliser la barre d'onglets et elle fonctionne mieux car elle expose ces options au niveau principal d'un écran. Encore une fois, cela remonte à cette limite. L'utilisateur n'a pas la lueur. Cliquez sur le bouton dans le menu. Revoyez le menu, appuyez à nouveau sur l'élément de menu , puis faites des allers-retours. Ils peuvent facilement, avec un seul onglet, parcourir les sections de niveau parent de votre site Web ou de votre expérience utilisateur. N'oubliez pas que la barre d'onglets reste toujours fixée au bas de votre téléphone ou de votre tablette. Il ne doit jamais faire défiler. Et assurez-vous qu'il y a un actif clair et un rester actif par défaut correspondant l'état dans lequel se trouve l'utilisateur. Et un état par défaut, les états dans lesquels l'utilisateur ou les destinations ou touchent l'utilisateur n'est pas allé et qu'il n'est pas activé, alors n'ont jamais d'option d'onglet État désactivée. Toutes ces options d'onglets doivent être activables et ne doivent pas être désactivées là où vous ne pourrez pas aller ici. Vous pouvez définir ces sections ici une hauteur d' environ 90 pixels à 100 pixels. Et encore une fois, vous pouvez voir ce rectangle de points roses 50 pixels sur 50 pixels. Ainsi, la zone cible, c'est-à-dire la zone de frappe pour l'utilisateur. Ce n'est pas l'icône. La partie supérieure est un espace invisible. Nous voulons rendre cet espace plus grand que cette icône ici, n'est-ce pas ? Ils auraient donc tous une zone de robinet qui ressemblerait à ceci. Et assurez-vous que les zones touchant au moins 40 pixels sur 40 pixels. Mais encore une fois, j'ai tendance à utiliser 50 par 50 juste pour que les utilisateurs puissent en tirer un peu plus facilement. D'autres options ici vous pouvez voir l'écran de profil ici. L'utilisateur appuie sur l'icône Bubba Illustration. Ils accèdent à un site de magasinage de bobo ici et peuvent à n'importe quel moment à la caisse , puis commencer à entrer dans le flux de paiement. Voici d'autres exemples pour l'une des applications et sur lesquelles nous travaillons actuellement. Et vous pouvez voir le téléphone. Nous allons insérer les quatre options d'onglets. Et quand nous arrivons à une tablette, nous pouvons l'espacer pour correspondre à l'immobilier que nous avons pour tablette. La raison pour laquelle ils fonctionnent si bien est qu'ils sont placés dans l'immobilier le plus exploitable sur les appareils mobiles. Si vous utilisez une main, si vous êtes gaucher, toute la zone verte de votre appareil mobile est facilement tapissable et vous n'avez pas à vous étirer ou il n'est pas difficile d'y accéder. Si vous êtes à droite. Comme la plupart des utilisateurs , c'est tout. Le vert est génial, naturel, facile à enfiler, facile à traverser. Ils sont donc placés avec environ 80 % dans un espace naturel, 80 à 90 % pour qu'un utilisateur taper en fonction de sa main gauche ou de sa main droite. Et puis cette zone ici est difficile si vous êtes là où ces boîtes grises ici, c'est une zone difficile, mais certains des plus gros téléphones que nous utilisons notre main gauche. Donc, si je suis droitier, je tiens ce téléphone ici. Nous allons utiliser notre main gauche pour fermer les choses ici. Et donc, si vous aviez un bouton X ici, il est préférable de placer votre bouton X ici. Faites un petit X , ok, cool. Il est donc préférable d' avoir votre bouton x ici sur les appareils mobiles. Ensuite, par ici. La raison en est qu'il est très confortable de tirer parti de ce x avec votre autre main. Donc, vous tenez le téléphone avec leur main droite et vous appuyez avec votre doigt ou votre pouce avec votre main gauche en haut ici. Passons à quelques choses à faire et à ne pas faire sur une bonne utilisation de la barre d'onglets , mais il suffit de suivre ce schéma ici et vous serez prêt à y aller. Allons plus loin dans les choses à faire et à ne pas faire. Encore une fois, utilisez votre barre d'onglets 45 destinations ou cinq icônes sont des onglets, max. Et gardez les dessins très simples comme cet exemple que je vous montre ici avec cette maison détaillée comme celle-ci. C'est à peu près aussi complexe que vous voulez obtenir quelque chose de plus que cela. C'est trop compliqué. La chose à éviter, c'est de ne pas utiliser plus de cinq destinations. Il y a six onglets et destinations ici. Ils sont trop serrés. Et lorsque vous créez une application Apple, vous devez l' envoyer sur l'App Store et Apple examinera votre application. Et si cela ne correspond pas aux consignes de leur interface utilisateur, ils vous empêcheront de lancer votre application sur l'App Store. De plus, leurs règles strictes sont que ces barres d'onglets n'ont que cinq destinations et non six ou sept. Alors indiquez clairement quelle est l'étape active, l'étape que l'utilisateur voit sur les choses que vous voyez la maison ici, nous avons ce petit point orange, et nous avons également rendu la maison beaucoup plus sombre en couleur. Et les états par défaut de ces icônes, du profil et de l'analyse. Vous pouvez voir comment ces dernières sont un peu plus grises. Et la couleur plus foncée, police plus audacieuse et le petit point orange aident. Vous pouvez le voir ici. Le, le, Bien que la maison soit audacieuse ici et nous avons un peu un contour plus épais plus noir pour l'icône de la maison. Il n'est toujours pas assez clair sur quelle étape les utilisateurs sur quelle section de l'application se trouve l'utilisateur ? Nous sommes sur celui de gauche. Si vous plissez les yeux et que vous regardez, vous pouvez voir que la maison surgit vraiment ici. Également. N'oubliez pas d'utiliser des icônes cohérentes, ne mélangez pas les icônes remplies ou caressées. Vous pouvez voir celui de droite ici. Nous avons ici un langage visuel incohérent en affichant une icône remplie pour le profil à une icône de trait ici pour la maison. Encore une fois, nous voulons être cohérents avec notre langage visuel et en être uniformes. Donc, soit la meilleure pratique, utilisez des icônes remplies et seules les icônes remplies sont utilisées. Icônes caressées et n' utilisent que des icônes caressées, mais ne mélangez pas les deux. Mais voici le botteur. Vous pouvez utiliser une icône remplie pour l'état actif. Encore une fois, ils sont tous des traits lorsque leur état par défaut. Vous pouvez voir ici la valeur par défaut pour profil et une analyse par défaut ici. Mais lorsque l'utilisateur appuie dessus, nous remplissons cette section de la page analysée. Nous remplissons également cette section du profil avec notre marque. Nous avons une marque de couleur orange. Vous pouvez voir comment vous pouvez l'utiliser pour vous aider encore plus et créer l' état actif de votre application. Et cela aide à apporter un peu de marque et un peu de saveur dans les icônes. N'ajoutez jamais de bouton dans la barre de navigation. Ils sont destinés à des fins de destination et non à des actions. Et ensuite, n'utilisez jamais une option d'onglet comme chez vous ici. Par exemple, si vous n' avez qu'une seule option, vous n'avez pas besoin d'une barre d'onglets. Il n'est pas nécessaire de naviguer. Utilisez de petits textes, mais utilisez un bon espacement entre les lettres sur le petit texte. Les petits textes que vous pouvez utiliser sont donc d'environ dix pixels. Vous pouvez aller tous les casquettes. Utilisez un espacement entre les lettres de 1,5 pixel. Ou vous pouvez faire 12 pixels. Ce que j'ai ici tout les pixels hauts, la hauteur, tous les minuscules, mais les deux ont un espacement entre les lettres de 1,5 pixel. L'espace de l' espacement des lettres est l'espace entre les lettres ici. Ces types d'espacement. Vous voulez un peu de MIP, espacement supplémentaire des lettres pour le petit texte simplement parce qu' il facilite la lecture. Et vous ne finirez pas avec vos lettres trop frottées ensemble. Je vais vous montrer ici comme ça. Comme si c'était trop serré. C'est probablement trop d'espacement entre les lettres. Et tout comme nous l'avions fait, c'était très bien. OK, c'est cool. Et ensuite, n'utilisez jamais deux mots. Vous pouvez voir le shopping, maison ici est descendue à deux mots, étendant sur deux lignes ou un gros texte. Vous pouvez donc voir que ce texte est trop volumineux. Il a juste l'air de Horsey. Il n'a pas air lisse, il n'a pas l'air moderne. Et c'est le cas, ce sont surtout des pièces de navigation et ne devraient pas être trop lourdes comme en poids visuel. Parce que vous voulez que l'utilisateur regarde le contenu que ces onglets hébergent et quatre et une information par rapport à quelque chose qui se distingue vraiment comme celui-ci. Très bien, passons à la barre d'onglets, à nos barres de titre. Une barre de titre fournit donc un moyen fiable de guider les utilisateurs à travers une application. une barre de titre affiche des informations et des actions liées à l'écran actuel. Et il reste également fixe, ce qui signifie qu'il ne reste pas toujours en haut, même lorsque l'utilisateur glisse ou fait défiler. Ils sont souvent associés à une barre d'onglets dans les applications mobiles ou tablettes. Le plus courant, c'est que vous verrez un système comme celui-ci, où vous avez le titre ici. Vous avez une zone d' action à gauche, une zone d'action à droite. Ensuite, nous avons la barre d'onglets que nous venons de parler ici en bas. Vous verrez sur l'une des applications les plus populaires est Instagram. Et ils utilisent une combinaison d'une barre de titre et d'une barre d'onglets. Ils ont donc la barre d'onglets ici. Ils utilisent également la technique d'une icône remplie pour l'état actif et le petit point ici pour l'état actif, l' état sur lequel se trouve l'utilisateur. Ensuite, ils utilisent la barre de titre pour leur logo et certains dans la page d'accueil du niveau très apparent. Et ils ont utilisé le bon côté pour les éléments d'action. Mais vous pouvez voir ici lorsque l'utilisateur accède à partir d'un niveau parent, il s'agit d'un écran de niveau parent. un écran de niveau enfant, nous conservons toujours la barre d'onglets, mais nous utilisons plus une barre de titre traditionnelle ici où vous avez les Bulldogs français au milieu comme titre et verso pour revenir à cette page d'accueil. Ensuite, nous avons le menu à trois points ici plus pour les paramètres qui se rapportent à cette page. Et il suffit de regarder ces adorables petits chiens. Regardez ce petit ici. OK, c'est cool. J'adore ces types. J'ai un de ces chiens. Elle s'appelle moelleuse. Je suis un grand fan. Voici la panne. Cette zone où vous voyez la batterie, votre temps et votre connectivité Wi-Fi, c'est ce que l'on appelle une barre d'état. Et c'est un, un iOS ou Apple, Android en a une version. Ils sont également appelés barre d'état. Ils ont juste l'air un peu différents pour Android par rapport à iOS. Vous pouvez voir les deux ici. C'est Android, c'est Apple. La ventilation est principalement la section supérieure gauche ici. Il est principalement utilisé pour le bouton Précédent ou une icône de menu. La section centrale ici concerne le titre des appareils Android, le titre peut être aligné à gauche. Je préfère qu'ils soient au milieu, mais cela dépend du, si vous concevez une application pour Android par rapport à Apple, ils ont deux types d'expérience utilisateur et d'utilisateur différents directives d'interface, et je parlerai aux deux personnes tout au long de la classe. Vous pouvez créer cette section ici avec la barre d'état située en haut de la barre de titre étant de la même couleur. Je mesure environ 50 à 80 pixels. Et encore une fois, cette bonne zone est un endroit idéal pour les actions. Vous avez donc un peu ce titre. Il donne les contextes et l' emplacement de l'utilisateur. Vous disposez du bouton Précédent qui permet à l'utilisateur de revenir d' où il venait. Ensuite, vous avez des actions en haut à droite qui sont basées sur les contextes que l'utilisateur voit. Vous pouvez également avoir des boutons ici. Vous pouvez avoir des annulations sauf la beauté de celui-ci, c'est que les boutons sont très comme toujours dans votre visage. Si vous faites défiler un site, les boutons sont toujours là, ils restent fixes là où nous en avons parlé avec les barres d'onglets. Nous ne voulons pas de boutons dans nos systèmes de robinet, mais nous pouvons les avoir dans la barre de titre. Il s'agit de quatre actions très importantes ici, comme enregistrer ou annuler des visionneuses , ajouter des informations et en fonction de vos paramètres. Ou nous voulions que ces boutons ne se perdent pas. Pour un remplissage très moderne. Personnellement, j'aime les petits textes, tous les majuscules avec beaucoup d'espacement entre les lettres. Vous pouvez voir l'exemple ici. Sur la gauche, vous avez le titre, encore une fois, toutes les majuscules. Et vous pouvez voir celui de droite. J'utilise une hauteur de 121212 pixels, toutes les majuscules avec un espacement entre les lettres de 2,5 pixels. Et cela rend l'application beaucoup plus moderne comme : Eh bien, nous allons le faire maintenant avec ce texte ici. Si je le sélectionne, je lui ai donné beaucoup d'espacement entre les lettres ici. Rend l'application un peu plus élégante, rend un peu plus moderne. Et ce que nous voulons faire, c'est éviter quelque chose de trop serré comme nous l'avons fait ici. Trop serré comme ça, c'est juste 0. C'est la valeur par défaut. Pour moi, c'est trop serré. Il faut que cela respire un peu plus. Un petit conseil de pro pour vous là-bas. Ok, donc les barres de marée sur Apple, elles ont deux types différents. Ils ont ici un titre standard qui contient, ce dont nous venons de parler, une action à droite, le bouton Retour à gauche et le titre de la page que vous regardez au milieu. Et ils ont un titre de texte volumineux, c' est-à-dire que le titre en haut se déplace sous le bouton Précédent. Encore une fois, rien ne change avec l'action. Et cela englobe plus de biens immobiliers à l' écran que celui de gauche. Cela dépend simplement l'application et parfois de l'appareil Apple, cela vous permettra de définir des titres volumineux dans le système d'exploitation. Disons que pour un peu plus vieux, vos yeux ne sont pas aussi bons. C'est ce que nous appelons une fonctionnalité d' accessibilité. Et cela aide les personnes qui ne peuvent pas voir petits textes à lire ces petits textes plus facilement pour eux. La différence entre Android à gauche et Apple, également connu sous le nom d'iOS à droite, est à peu près la même chose. C'est juste que le titre sera généralement centré sur les produits Apple. Et puis sur Android, ils vont l'aligner ici. Le même type d'offre lorsqu'il s'agit d' action est généralement qu'ils suivent le même paradigme lorsque vous avez des actions en haut à droite de votre barre d'onglets. C'est que les titres vont aller à gauche et au milieu ici. Je l'aime bien au milieu parce qu' il nous permet d' utiliser cet espace ici pour n'importe quel bouton arrière ou ce type de navigation. J'aime généralement styliser là où vous avez les actions du bouton Précédent ici et un titre au début ou au milieu. Et peu importe, vous pouvez quand même concevoir une application Android. Et il peut toujours avoir le titre ici au centre du bouton Précédent, les éléments d'action à droite, et tout va bien. Très bien, une autre chose que vous pouvez faire ici C'est assez soigné, car encore une fois, l'aboiement du titre reste toujours fixe. Cela signifie que lorsque l'utilisateur glisse vers le bas sur une application mobile ou tablette, la barre de titre ne va nulle part. Mais vous pouvez faire cette astuce où, en tant qu' utilisateur, je glisse vers le bas, notre balayage vers le haut. Et donc je pousse le contenu vers le haut, ce qui signifie que je suis intéressé. Je veux aller plus loin dans cette section, ce que cette section a à offrir. Lorsque cela se produit, vous pouvez réellement déplacer la barre de titre à une position, vous la verrez disparaître. Et ensuite, lorsque je redescends, qui signifie que je voudrais peut-être sortir de cette section, la barre de titre réapparaîtra en fonction de cette interaction. Vous verrez qu'Airbnb l'utilise sur son application mobile ou sur son site Web sur le Web, son site Web sur le Web ainsi que sur un appareil mobile ou une tablette. Et je vais vous montrer un petit aperçu ici. Vous pouvez le voir. Voici leur barre de titre en haut. C'est qu'ils ont également ajouté des filtres sur le titre. Et ils ont la barre d'onglets en bas. Vous pouvez puiser entre les risques, connexion, les souhaits, vos séjours. Lorsque je glisse vers le haut ou que je fais défiler vers le bas, vous voyez comment la barre de titre a disparu et ils supprimeront également la barre d'onglets. Ensuite, lorsque vous effectuez un balayage vers le bas, vous le verrez apparaître lorsque vous effectuez un balayage vers le haut. Très bien, donc je suis en train de glisser vers le bas. Une fois encore. L'idée ici est que vous êtes intéressé, vous savez que votre action consiste à informer le site que vous êtes plus intéressé par le contenu en ce moment, lorsque je glisse vers le haut, votre action peut être pertinent pour, Oh, avez-vous besoin de faire quelque chose avec ce contenu ou de naviguer hors de cet écran ? Vous pouvez voir comment ces réponses, alors ils disent, d'accord, voici, voici votre tablette. Nous allons vous donner cette barre d'onglets. Voici votre téléphone portable. Nous allons vous donner cette barre d'onglets. Mais vous voyez que lorsque nous allons sur le Web, ils n'utilisent pas la barre d'onglets. La barre d'onglets n'est pas un motif palmé. Il s'agit d'un modèle mobile et tablette. Très bien, cool. La dernière chose à examiner avant d' entrer dans certaines choses à faire et à ne est que la barre de titre peut réellement changer et afficher des actions en fonction de l'entrée de l'utilisateur. Nous avons donc une barre de titre de navigation par défaut ici. Et ce qui se passe, c'est que lorsque l'utilisateur appuie sur l'une de ces photos, la barre de navigation bascule et nous donnons des actions en fonction de cette interaction utilisateur. Ils ont pris une photo. Maintenant, la barre d'onglets passe des contextes, désolé, la barre de titre passe de contextes à une barre de titre orientée action. Il vous permet donc de savoir que vous en avez sélectionné un et cela vous donne des options que vous pourriez faire. Vous pouvez supprimer celui-ci, vous pouvez l'envoyer. Et puis vous avez le menu de débordement, qui est également appelé menu de kebab ou menu de kebab, qui héberge simplement d'autres actions liées à cela également. C'est ainsi que vous pouvez l'utiliser d'un point de vue de l'interaction et non seulement l'avoir uniquement pour la communication , les contextes et l'emplacement, mais vous pouvez également le faire orienter vers l'action. N'oubliez pas de résumer que la plupart des applications qui utilisent la barre d'onglets en bas, la barre de titre en haut, c'est un modèle de conception courant. Maintenant, allons nous trouver des choses à faire et à ne pas faire. titre d'une barre d'onglets doit être suffisamment court pour s'adapter à l'espace. Il est comme une FAQ. Et puis ne rendez pas le titre trop long qu'il ait deux ellipses sur les trois petits points ici. Le titre doit être suffisamment court pour replacer l'espace. Et encore une fois. Ne rendez pas le titre II long pour qu'il passe en deux lignes éclipsant, ou deux lignes ici. Placez les actions suffisamment ajustées ici dans la barre de titre comme trois à quatre maximum, cinq c'est en quelque sorte le pousser. Vous en voyez six ici, c'est trop. Et si vous avez un titre long, il ne va pas s'écouler avec les actions ici. Trois, c'est ton numéro magique. Soyez prudent de la hauteur, surtout quand ça va être réparé. Cela va prendre de l' immobilier au fur et à mesure qu' un utilisateur parcourt votre application, vous pouvez également avoir une barre d'onglets en bas à droite. Vous êtes donc, vous êtes, vous limitez votre contenu visible ici uniquement par cette section. Soyez donc prudent quant à la hauteur de cette barre et vous ne voulez pas ou pour votre barre de titre et vous ne voulez pas qu'elle soit trop serrée, trop haute que, encore une fois, elle restreint le contenu ci-dessous et ne lui donne pas assez d'espace pour ce contenu. On y va. Il y a des barres à onglets et des barres de marée. Je vous verrai sur la prochaine vidéo où nous couvrirons les accordéons et les onglets. Je vous y verrai. 12. Accordions et ongles: Très bien, allons parler d'accordéons et d'onglets. Le menu Accordéon est une liste d'en-têtes empilés verticalement qui peuvent être cliqués, touchés, pour révéler ou masquer les détails importants d'une section. Le terme accordéon vient de l' instrument de musique dans lequel la fonction principale est élargir et se contracter. C'est donc de là que nous avons obtenu ça. Il s'agit d'un menu qui se développe pour afficher informations, puis se contracte pour masquer les informations. Vous le verrez utiliser comme FAQs où la question est l'en-tête ou le titre, puis vous l'ouvrez et vous verrez les réponses à ces questions. Vous le verrez pour les listes d'événements où l' événement est l'en-tête. Ensuite, vous toucherez et il s'agrandira et affichera les détails de cet événement. Nous avons récemment utilisé une application automobile où vous pouvez ouvrir l'accordéon pour voir les modules complémentaires et sélectionner type de modules complémentaires que vous vouliez dire pour stéréo ou les rems ou l' intérieur d'un voiture. Ils ressemblaient à ça. Il s' agit de l'état par défaut dans lequel il contient les informations de niveau parent. Vous l'avez fait. Les en-têtes ici. Lorsqu'un utilisateur appuie dessus, nous veillons à mettre l'en-tête en surbrillance afin que l' utilisateur sache à quoi rapporte le niveau d'informations enfant ou auquel se rapporte. Et aussi la flèche ici, elle monte à 180 degrés pour indiquer que cet en-tête est ouvert. Encore une fois, nous avons l'état par défaut, nous avons l'état actif. Et la fonction vraiment importante d'un, un accordéon est que lorsque l' utilisateur appuie sur le Wi-Fi est lent, ce qui se passe c'est que le titre est actuellement ouvert, ouvert, puis révèle l' enfant informations de niveau sur le titre sur lequel l'utilisateur vient d'appuyer ou de cliquer. Il ferme, paie ma facture, paie ma facture passe à l'état par défaut et dans le Wi-Fi est lent, passe à l'état actif et révèle les informations de niveau enfant. En fonction de ce niveau parent. Les avantages et les inconvénients sont le processus qui aide les utilisateurs à trouver contenu qu' ils recherchent en classant simplement les en-têtes. Ils peuvent simplement parcourir tous les en-têtes, trouver celui qu'ils recherchent et l'ouvrir. Il permet de numériser facilement ces informations de niveau parent et, encore une fois, approfondir les informations de niveau enfant. Et c'est un outil utile lorsque vous avez beaucoup de contenu. Et vous voulez masquer certains contenus, ce qui rend l'ensemble du contenu plus digeste d'un coup d'œil. Ensuite, l'utilisateur peut décider dans lequel il souhaite approfondir. L'escroquerie est d'essayer de ne pas les utiliser pour plus de dix options car ils sautent beaucoup et essaient de ne pas avoir trop d' informations sur le niveau des enfants qui amènent l'en-tête suivant à passer sous la réunion de pli, sous la zone de visualisation que l'utilisateur consulte, il ne peut pas voir l'option de niveau parent. Si vous avez beaucoup d'options de niveau enfant qui poussent tout, tous les autres parents vers le bas. Et l'utilisateur doit aller assez loin pour trouver un autre niveau parent, ou il doit revenir sur cet en-tête de niveau parent ici. Donc, si l'utilisateur appuie sur nouveau, paie à nouveau ma facture, elle se fermera. Payez donc ma facture ici, ouvrez, appuyez sur Payer ma facture ici ferme également. Mais si vous avez beaucoup d' informations au niveau des parents ou si vous désolez des informations sur le niveau enfant, cela pousse tous ces en-têtes jusqu'en dessous du pli comme ça. Lors de l'ouverture et de la fermeture de différents en-têtes, ils ont tendance à rebondir et à ne pas rester cohérents dans leur emplacement. Et c'est l'avantage que je vais vous parler des onglets. Comme les onglets ne sautent pas, ils restent en position lorsque l'utilisateur appuie dessus. Mais les accordéons, vous savez, alors que vous envisagez de payer ma facture et que vous appuyez sur le Wi-Fi est lent, il ferme, paie ma facture et le Wi-Fi saute ici pour qu'ils rebondissent dans ce sens. Vous pouvez également utiliser les boutons Plus plutôt que les flèches. Et puis à l'état actif, les boutons du bouton Plus passent à moins. Vous pouvez également les utiliser en combinaison avec des cases à cocher. Vous pouvez voir ici que nous avons des fonctionnalités technologiques que vous touchez. Nous affichons en fait un nombre, donc vous avez sélectionné 0, nous avons quatre options. L'utilisateur peut facilement appuyer sur C, les quatre options qu'il souhaite. Nous avons les cases à cocher sur la droite en premier avec le prix basé sur chaque fonctionnalité. Et ils peuvent sélectionner n'importe laquelle de ces fonctionnalités que nous avons qui augmente également le nombre ici à partir de deux options sur quatre. Il suffit d'avoir ce niveau parallèle que l'utilisateur peut voir. Ils peuvent être obligés de le faire. Nous ne ferions pas de cela une couleur différente. Nous ferions ça quelque chose comme du bleu, comme ça. Mais au niveau des parents, ils peuvent voir le nombre de mises à niveau qu'ils ont déjà sélectionnées en fonction des fonctionnalités technologiques ou des mises à niveau audio ou des haut-parleurs. Nous aurons aussi des options pour leur obtenir 20 jumeaux, je dis. Très bien, cool. N'oubliez donc pas de conserver le contenu de niveau enfant. C'est le contenu qui se rapporte au niveau parent. Gardez ce contenu court et doux. N'oubliez pas, n'utilisez pas, évitez d'utiliser beaucoup de contenu au niveau des enfants. Vous pouvez voir comme si je disais payer ma facture et que j'ouvre ça, je suis comme, ouah, c'est beaucoup. C'est là que si vous avez cela, ce n'est pas le meilleur mécanisme. Vous pouvez simplement amener l'utilisateur vers une page distincte. Ou j'ai ici une vidéo sur les modaux et les tiroirs. Et ce serait une option parfaite pour montrer une rangée de corvées qui prend simplement l'ensemble de l'immobilier et l'utilisateur peut fermer et se retrouver ici. Si vous rencontrez ce problème, ce n'est pas le meilleur modèle pour cela. Si vous avez beaucoup d'informations sur les enfants, ce n'est pas le meilleur modèle pour cela. Je l'ai vu une fois et c'est super bizarre. Ne placez pas d'accordéon dans des accordéons. Comme les accordéons ne devraient pas avoir de niveau parent, enfant et petit-enfant. C'est juste un parent et un enfant. Je l'ai vu une fois et c'était super bizarre et ça a rebondi. Je me suis vraiment perdu sur lequel était ouvert, lequel était fermé ? Encore une fois, notez aucun accordéon dans l'accordéon lui-même. N'oubliez pas que si un utilisateur appuie sur une autre option, fermez celle qui était déjà ouverte. Ne laissez pas l'utilisateur ouvrir plus d'une option à la fois. Assurez-vous ensuite d'avoir des distinctions claires entre les en-têtes. Vous pouvez voir ici que nous utilisons les lignes celle-ci ici et voyons ces petites lignes ici, ces lignes grises, elles aident à donner les sections. Ainsi, lorsque vous n'avez pas ces sections et que vous ouvrez l'accordéon, il est difficile de voir où se terminent les informations de niveau enfant et où le titre parent suivant entre. C'est de l'accordéon. Allons donc parler d'onglets. Les onglets sont l'un des moyens les plus courants présenter des sections de catégories. Et ils permettent à un utilisateur de cliquer et d'accéder à chaque catégorie, voir le changement de contenu en fonction de sa sélection. Encore une fois, ils ressemblent beaucoup à la barre d'onglets dont nous avons parlé. Ils apparaissent simplement en haut des sites Web et ils ne s' affichent généralement pas en bas s' ils se ferment sur un bouton en bas ou si vous avez besoin d'une navigation en bas, puis utilisez les règles qui s' appliquent à la barre d'onglets. On appelle des onglets parce que l'origine de celui-ci se rapporte au classeur de bureau. Et vous pouvez remarquer que les onglets sortent comme le niveau d'information parent. Ensuite, vous pouvez plonger dans ces derniers, les ouvrir et voir qu'il s'agit informations pertinentes au niveau des enfants ici, afin que vous puissiez voir comment cela revient à cette architecture d'information J'en ai parlé dans la dernière vidéo. Ils sont couramment utilisés pour les menus de commande de nourriture. Vous utilisez des onglets pour le petit-déjeuner, le déjeuner, le désert ou différentes catégories d' aliments comme nourriture chinoise ou la pizza, les hamburgers italiens. Ils sont parfaits pour les tableaux de bord, ils sont parfaits pour les outils analytiques. Les barres de navigation sur les appareils Android les utilisent beaucoup. Résultats de recherche Google, je peux penser à toutes les images, etc. Beaucoup, beaucoup, beaucoup de cas d'utilisation pour les onglets. Ils sont beaucoup plus courants que les accordéons. Peut voir les onglets pour mobile, encore une fois, barre d' onglets doit toujours être fixée et en haut, ne jamais les placer en bas. Parce que si vous comptez les utiliser pour le bas, allez chercher une barre d'onglets et utilisez ces règles. Il existe un ensemble différent de règles appliquées aux barres d'onglets, puis aux onglets. Vous pouvez utiliser jusqu'à cinq options maximum, sans balayage horizontal, ce qui signifie que l'utilisateur d'une tablette ou d'un téléphone peut glisser horizontalement différents onglets. C'est vraiment la différence claire entre une barre d'onglets et des onglets, c'est que barres d' onglets sont en bas et que les barres d'onglets ont jamais de balayage horizontal. n'y a que cinq options, max et onglets. Ils peuvent toujours vivre en haut d'un site, et ils peuvent avoir un balayage horizontal, ce qui signifie qu'ils peuvent avoir plus d'une option. Mais ils restent généralement au sommet parce qu'ils sont nouveau des paramètres globaux, semblables aux destinations. Et vous pouvez en avoir beaucoup plus de cinq avec un balayage horizontal. Vous pouvez voir ici que nous avons la barre de titre en haut avec le logo et notre menu de profil ici. Ensuite, nous avons un menu de barre d' onglets secondaire en haut, il mesure 90 pixels de hauteur. Nous avons obtenu les textes qui sont tous masqués ici, 11 pixels de hauteur avec deux pixels espacés entre les lettres, donc tout majuscule un peu d'espacement entre les lettres. Vous pouvez voir comment cela fonctionne en tant qu'utilisateur sur lequel je viens de toucher. Et je pouvais voir que l'élément n'est pas un contenu qui se rapporte à l'article deux ici. Et si je reviens à un, goûte à un, si je tape sur trois, me ramène à trois. Voici quelques exemples d'onglets pour le Web. Nous avons ici plus de cinq options, tant que nous nous adaptons sur le Web en conséquence. Encore une fois, l'utilisateur peut accéder à ces différents onglets. Ce genre de choses imite la structure des dossiers de l'armoire. Lorsque vous pensez à ce type d'informations, cela est similaire à celui dans lequel vous cliquez sur différents onglets pour afficher les informations du niveau parent. Et apparemment, l'information pourrait comporter des boutons et du texte, des photos, des illustrations et des icônes. Voici une navigation de type tabulation supérieure. Vous pouvez l'utiliser pour le Web. Vous disposez ensuite d'une navigation par onglets latéraux que vous pouvez utiliser pour le Web, mais vous pouvez l'utiliser uniquement pour une tablette. Mais nous n'avons pas assez de biens immobiliers pour les appareils mobiles. Pour cela. S'il s'agissait d'un appareil mobile, vous ne regardez vraiment que quelque chose comme autant de biens immobiliers, n'est-ce pas ? Ils sont donc mieux adaptés aux appareils Web et tablettes. Et si vous cliquez sur l'élément deux ici, cela ouvre l'article deux et vous pouvez voir l'idée cliquée sur l'article 1 passe à l'article 1. Bon, allons regarder le balayage horizontal. Vous pouvez donc voir ici que nous avons un système d'onglets en haut qui comporte plus de trois options ici, nous ne savons pas combien d'options il s'agit. Mais nous faisons une technique un peu explicite , c'est que nous voulons que l'une des options soit coupée à droite, disons cette option. Ce que cela fait, c'est le moyen de transport. Il indique à l' utilisateur qu'il y a plus d'options masquées pour qu'il puisse aller et balayer. Où si vous venez de l'avoir, où ce n'était que les trois options et elles étaient parfaitement espacées ici, comme ça. Cela ne signifie pas un balayage horizontal. Donc, nous voulons toujours couper l' un d'entre eux juste pour donner ce signal visuel que hé, utilisateur sur l'option numéro quatre et je suis ici, venez me chercher. Un genre de chose. N'oubliez pas que ce balayage horizontal ne doit être utilisé que pour les tablettes et les appareils mobiles. N'utilisez jamais le défilement horizontal pour le Web. Personne ne veut faire défiler horizontalement avec la barre de navigation sur le Web comme ça. À moins que vous ne fassiez une feuille de calcul, si vous concevez un système sur un ordinateur de bureau qui est une feuille de calcul, oui, vous pouvez utiliser le défilement horizontal, mais pas ici. Exemple de l'application sur laquelle je travaille actuellement ici. Vous pouvez voir, vous pouvez voir les onglets ici, jour, mois et année. Vous pouvez effectuer un balayage horizontal pour obtenir plus d'options. Et encore une fois, nous avons intentionnellement fait ce cycle de facturation à droite juste pour informer l'utilisateur qu'il y a plus ici que vous pouvez balayer. Encore une fois, ces derniers restent en position. Vous pouvez aller au mois, vous pouvez aller à l'année et voir à quel point vous pouvez les transiter facilement et en douceur. Doordash a le même exemple ici, il y a donc les onglets ici. Si vous touchez, tirez et appuyez, vers la droite, vous verrez plus de l'onglet. Des exemples arrivent et ils coupent un peu les cadeaux. Et je vais vous montrer que c' est à quoi ça ressemble sur leur site mobile. Un petit peu de coupure se produit ici. Vous pouvez voir ici le même système utilisé pour le web, mais ils ne font pas de défilement horizontal. Ils vous donnent ces petites flèches et vous permettront de faire des allers-retours. Il est toujours en train de couper certains de ces sujets ici dans ces onglets. Mais c'est ainsi que cela fonctionne. Et si vous allez dans Gifts, cela informera tous les contenus liés aux cadeaux. Vous pouvez voir comment cela fonctionne. Et puis en revenant maintenant, c'est sur un appareil mobile, vous pourriez le faire sur le Web. Mais s'il est écrit sur mon appareil mobile, je serais capable de balayer ces catégories, regardant comment Keith, c'est ce petit survol. Veillez à ce qu'ils aient tous de petites illustrations. Super mignon. Examinons quelques bonnes pratiques pour les onglets. Prenez toujours toute la largeur. Même si vous avez deux articles, prenez toute la largeur. Ne faites pas seulement une largeur proportionnelle pour mobile, comme cet espace vide ici. Ne faites jamais un seul onglet. Si vous avez un seul onglet, vous n'en avez pas besoin. Comme si vous n'avez qu'un seul niveau d'information, vous n'avez pas besoin d'un onglet, tout comme vous en débarrasser. Vous utilisez un balayage horizontal sur les onglets mobiles. Si vous le gardez en haut, et ne mettez jamais de balayage horizontal en bas ici. Et la raison pour laquelle il est très étrange votre pouce passe à travers ces différents objets ici. Et si vous voulez juste, donnez-lui un coup de feu, allez sur votre téléphone et juste avec vos pouces, commencez à glisser vers la gauche et ça fait mal comme ça deviendrait étranger après un certain temps. Comme nos doigts sont plus adaptés au balayage vers le haut et vers le bas et non pas vers la gauche et la droite. OK, cool. C'était des accordéons et des onglets en un mot, et j'espère que vous avez apprécié celui-ci, vous verrez infobulles et les ombres de la prochaine vidéo. 13. Conseils et ombres: Très bien, Bienvenue sur le sujet suivant où nous allons parler d'infobulles et d'ombres. infobulles. Il s'agit d'un message additif positif et utile qui s'affiche lorsqu'un utilisateur interagit avec un élément ou un élément de contenu. Et les infobulles sont généralement lancées par un clic de souris ou sur un appareil mobile. Et encore une fois, ils sont informatifs. Ils ne devraient pas être des instructions. Il ne devrait s'agir que d' un petit peu d'informations supplémentaires si un utilisateur souhaite en savoir plus sur un contenu spécifique qu'il consulte. Ils ressemblaient à ça. Supposons que vous l'ayez fait, voici un exemple d'icône de point d'interrogation où vous avez un numéro CVE et si les utilisateurs ne sont pas sûrs de ce qu'est un numéro CVE sur leur carte de crédit, ils peuvent survoler ou appuyer sur cette icône. Et cela vous donnerait un peu d' informations sur le numéro CVE. Et encore une fois, si vous faites ce survol, rappelez-vous simplement que vous pouvez cliquer dessus lorsque r, Si vous cliquez dessus, vous pouvez cliquer dessus pour le fermer. S'il est en survol, il se ferme automatiquement lorsque votre souris s'éloigne. Et ensuite, pour les appareils mobiles, vous pouvez le faire survoler pour le Web. Et puis pour Mobile, faites-le là où un utilisateur appuie dessus pour ouvrir et qu'il le retire , puis il se ferme. Vous pouvez également utiliser l' autre icône commune qui est une icône d'information. Au lieu de poser une question sur l'icône info, le même genre de principe ici cette petite info-bulle apparaît et encore une fois, c'est l'infobulle. C'est cette petite boîte ici que l'infobulle a généralement une petite flèche pointant vers quelque chose, mais vous n'avez pas besoin de l'avoir. Mais c'est encore une fois, un peu d'information additive. Vous pouvez l'utiliser pour clarifier un exemple d'action ici. Donc, si vous avez des options d'envoi ou un bouton qui ne sont peut-être pas si clairs pour l' utilisateur lorsqu'il survole , il vous donne un texte un peu plus descriptif de ce que fait ce bouton. Vous pouvez le faire de même pour les icônes. Vous avez cette icône ici, elle apparaît. Mais rappelez-vous simplement s'il s'agit de votre principal moyen d'informer un utilisateur de ce que ces actions font, et que cette expérience utilisateur sera diffusée sur tablettes et les produits mobiles que ce n'est pas le cas, de votre principal moyen d'informer un utilisateur de ce que ces actions font, et que cette expérience utilisateur sera diffusée sur les tablettes et les produits mobiles que ce n'est pas le cas, n'est pas suffisant car il n' y a pas de survol sur les produits mobiles et les tablettes non plus. Donc, mieux vaut peut-être ajouter du texte ici pour dire double plutôt qu'une icône. Si c'est le cas. Si ce n'est qu'une application Web, alors oui, vous pouvez faire quelque chose comme ça et utiliser le survol pour donner cela. Je vais ouvrir mon e-mail très vite et vous pouvez écrire certains des courriels pour moi. Je plaisante. Vous pouviez voir comment ils le font sur Google. Quelle est cette petite question ? Oh, c'est du soutien. Quelle est cette petite icône ? Oh, c'est les réglages. Qu'est-ce que c'est ? C'est Google Apps. Ils ont fait la même chose ici aussi. Encore une fois, lorsque vous utilisez une info-bulle et vous n'êtes pas sûr d'être basé sur les informations avec lesquelles vous travaillez. Si vous avez besoin d'une info-bulle, demandez-vous simplement ceci, comme regardez ces informations et partez, si ces informations que vous souhaitez insérer dans une info-bulle nécessaires ou importantes pour l'utilisateur puisse accomplir sa tâche. Si c'est le cas, affichez les informations. Ne le cachez pas dans une infobulle. Si ce n'est pas le cas, ce n'est pas nécessaire, c'est juste du texte utile ou du contenu utile, alors oui, vous pouvez le mettre dans une infobulle. J'ai utilisé celui-ci sur un produit pour éditer, très bien performé, c'est que vous avez cet ensemble de champs de formulaire ici. À partir de l'état par défaut. Ce ne sont que ces boîtes grises. Mais dès qu'un utilisateur survole sa souris dans l' un de ces champs de formulaire, ces informations changent et basées sur le formulaire que vous remplissez. Si vous n'êtes pas sûr du numéro d'un compteur électrique sur votre maison. Une fois que vous y arrivez et que vous survolez votre souris ou cliquez sur ce champ de formulaire. Cette info-bulle va changer pour donner informations explicites sur ce qu'est ce compteur électrique. Une petite photo ici est accompagnée pour montrer comment la trouver. C'est ce qu'on appelle une infobulle en ligne, ce qui signifie qu'elle apparaît lorsque l'utilisateur est en ligne ou en pointant sur l' un de ces éléments ici. Nous avions ici la même boîte qui concernait les états de service électrique. Ainsi, lorsque l'utilisateur était à la date de service ou survolé cette section, cet outil est apparu ou cette info-bulle s'est présentée pour expliquer ce que c' était et ce que c'était. le type de contenu était. J'adore ça. Je pense que ce sont des moyens super intelligents de le faire. Et si vous vous souvenez de la première vidéo, j'ai parlé de ne faire qu'une disposition de formulaire de colonne comme celle-ci correspond bien à l'espace vide pour une mise en page à une colonne, un peu plus délicate si elle est sur mobile. Les plateformes mobiles, mais pour le web, nous sommes vraiment géniaux. Allons voir des choses à faire et à ne pas nous souvenir, ne mettez pas trop de contenu. Trop. Cela devrait être un peu utile pour la plupart, comme trois ou quatre lignes de messages texte ne devraient pas être comme une simple phrase. N'oubliez pas, n'utilisez pas de survol, votre principal outil de communication. Surtout si cela va être diffusé sur un ordinateur de bureau une tablette ou un produit mobile, ajoutez des contextes s'il s'agit d'un utilisateur mobile, comme mettre le mot en double ici. Et vous pouvez également faire la même chose et surcommuniquer sur le Web lorsque l'utilisateur survole cela. Ne mettez pas d'informations importantes dans une info-bulle. Si quelqu'un doit entrer un passe et qu'il y a des exigences de mot de passe, ne les avez pas dans l' infobulle pour le faire ici. Vous pouvez également échouer à ce que nous appelons la validation en ligne, dont j'ai parlé plus tôt. Vous pouvez indiquer en vert et en rouge s'il y a une nouvelle saisie de leur mot de passe ou un mot de passe qui répond à ces critères. Nous constatons que le mot de passe ne peut pas être l'ancien mot de passe. Ils disaient : Oh, on dirait que vous n'avez pas mis une majuscule, moins une lettre minuscule. Tu es bien allé. Vous avez encore huit personnages. Vous avez au moins deux lettres et un autre échec, nous avons besoin d'au moins un numéro pour créer un mot de passe correct, n'est-ce pas ? Vous ne voulez donc pas que ce truc soit caché dans une infobulle. Il s'agit d'informations importantes pour que l'utilisateur puisse accomplir sa tâche. Nous devrions l'exposer. Passons sur les ombres. La règle numéro un est de ne pas simplement utiliser une ombre par défaut, jamais. Quel que soit l'état par défaut de l'ombre, ne l'utilisez pas. Vous devez y ajouter. Voici donc les étapes. Vous avez l' ombre par défaut ici, j'ai cette petite carte avec une petite icône de crème glacée mignonne. Je veux ajouter une ombre par défaut à cela. Juste ici. Il va nous donner quatre pixels sur l'axe Y. Donc en bas et 0 sur le x, vraiment rien sur le x ici, Blair va avoir quatre ans . Nous sommes arrivés ici à 25  % d'opacité. La prochaine étape de la deuxième étape consiste donc à ajouter davantage à l'axe x et à l'axe Y. avons donc donné 55 à ce stade. Maintenant, je peux voir un peu plus d'ombre sur la ligne verticale ici sur l'axe X. L'étape suivante, la plus importante est d'ajouter un peu de flou. Nous sommes passés de quatre à 35 pixels flou dessus. Et on peut y voir les ombres trop nettes, c'est trop dur. Comme je me souviens dans la vidéo sur les boutons, nous disions regarder les ombres à boutons et ne pas être trop dur avec les ombres comme il devrait y avoir des ombres douces et subtiles. Ensuite, vous pouvez faire un effort supplémentaire ici. Vous pouvez ajouter un peu de couleur à l'ombre. J'aime généralement utiliser un gris bleuâtre, pas trop bleu, pas trop gris, juste au milieu là. Nous allons rendre ce look très moderne. Très propre. Vous donne cette belle ombre par rapport à ce bord dur par défaut. Par défaut ici, commence à s' améliorer un peu avec le flou. Et puis c'est juste le gris subtil et joli qui rend ça vraiment agréable. Vous pouvez également utiliser des ombres intérieures. Cela aide à créer de la profondeur ici afin que vous ne puissiez voir aucune ombre intérieure ici. Et maintenant que nous avons l'ombre intérieure pour cela, ce cercle de progression ou cercle de tarte ici. Et cela crée un ensemble de profondeur que cela est rempli. Cette ombre intérieure aide beaucoup et c'est les mêmes principes que l'ombre intérieure. Pas trop dur. Encore une fois, devrait être, donnez-lui un peu, donnez-lui un beau flou, une belle couleur. Certaines choses à faire et à ne pas faire. Et puis je vais faire quelques ombres rapides pour vous pour que vous puissiez voir, ne mettez pas d'ombre sur le texte. Si vous avez une photo ici et que vous êtes comme, Oh mec, mon texte ne se lit pas, eh bien, ne le résolvez pas en mettant une ombre. Ce que vous devez faire, c'est ajuster la photo pour que vous puissiez voir ici, nous avons ajouté une superposition plus foncée sur le haut de la photo, puis nous avons placé le texte sur le dessus pour qu'elle se démarque. Lorsque j'étais à l'école de design pendant toutes les années où j'y étais, il y avait à San Francisco à l'Academy of Art University. Il y avait une femme nommée Mary Scott pendant les quatre années entières et tout le programme, même si vous êtes allé sur un master, dit-elle mâché et c'était catégorique. Je ne voudrais jamais voir d' ombre sur un texte. Et puis c'était drôle parce que nous n'avons jamais mis d'ombre sur les textes. Et un jour, j'ai eu mon premier emploi. L'un des directeurs créatifs vient ici parce que je fais apparaître ce texte, y mets une jolie petite ombre. Je suis comme, d'accord, cool. Encore une fois, il s'agit de connaître les règles, mais aussi de savoir quand enfreindre ces règles. Mais la règle assez dure que vous pourriez suivre ici est simplement de ne pas le dire, ne pas résoudre les textes lisibles sur une photo avec une ombre comme si vous deviez manipuler la photo. Ne rendez pas vos ombres trop fortes. Comme si c'était beaucoup trop fort. Vous pouvez voir celui de droite. Celui-ci a un goût joli et subtil d'ombre. Ce qui est amusant, c'est que vous pouvez rendre l'ombre plus foncée dans cette couleur et cette opacité sur le vol stationnaire. Rappelez-vous que la philosophie d'un bon vol stationnaire est qu' elle prend vie. C'est comme s'engager avec moi. Ici, vous pouvez voir que c' est une excellente technique pour une belle ombre et nous deviendrons un peu plus sombres. La couleur, l'opacité du survol. Cela crée vraiment le sentiment de profondeur où cette chose est un peu plus grande que celle qui se trouve en dessous. Encore une fois, une utilisation agréable, agréable et subtile d'un vol stationnaire là-bas. Et puis normal. Ne mettez pas trop de couleur dans l'ombre. Comme si c' était beaucoup trop, comme si c' est bon. C'est trop. N'utilisez pas ces bords durs. Gardez les bords doux. Allons de l'avant et faisons simplement une ombre rapide. Je vais copier ce cercle ici. Encore une fois, nous essayons d'accéder à ce genre de fonction ici, mais nous allons nous amuser un peu. Nous avons la carte blanche que je vais utiliser appelée Figma. J'aurai quelques petits projets à la fin des vidéos qui vont passer en revue et nous allons créer certains de ces modèles de design que vous voyez ici également. Mais avant d'y arriver, vous pouvez simplement voir comment fonctionne une ombre dans l'outil figma. On va s'en remettre un peu. Bon, je vais donc ajouter un effet ici. Et nous avons nos gouttes, notre ombre portée ici. Voici les variables. Alors voici mon x, voici encore mon Y pour vouloir faire 55. Très bien, donc nous avons mis nos axes X et Y en marche. Quelle est la prochaine chose que vous faites ? Que faisons-nous encore ? Air et nous sommes censés faire du flou. Oh oui, c'est vrai, flou. Allons faire sauter cette chose. 35. Cela a déjà l'air très bien. Et encore une fois, nous allons ajouter un peu de gris bleuté à l'ombre. Boom, voilà, c'est génial. Le superbe look. Ashanti a un peu manqué ces bords. Ça a l'air bien. Allons voir l'ombre intérieure. même genre de principe ici nous ajoutons une ombre, Omeka, une ombre intérieure. La seule différence avec les ombres intérieures que vous voulez un peu, pas autant de flou. Même principe. 55 ici, les bords durs apparaissent toujours. Nous voulons simplement lisser ces bords. Donc généralement, 15 sera bon. Vous n'avez pas besoin d'aller à 35 ans car ce qui se passe, c'est simplement remplir toute la forme. Juste 15, c'est bien. Encore une fois, nous voulons faire un peu de bleu. Vous pouvez ajouter un peu de couleur ici si vous le souhaitez également. Vous y allez. C'est une belle ombre. Cool. Il y a donc des infobulles et des ombres, et je vous verrai au cours suivant. Nous parlerons de miniatures et de carrousels. voit là-bas. 14. Les mini-vignettes et les carroussels: Bon, bienvenue à la prochaine classe. Nous allons parler de miniatures et de carrousels. miniatures sont assez simples là, il y a de petites images qui donnent à l'utilisateur une vue d'ensemble de plusieurs images. C'est en quelque sorte un aperçu de ce qui se passe ensuite. Ils sont également généralement associés à une image principale plus grande. Et lorsque l'utilisateur clique et appuie sur une vignette, l'image principale apparaîtra alors comme la même image, ce qui se trouvait dans la vignette à ce moment-là. Habituellement, vous pouvez les marquer comme une hauteur d'environ 100 pixels sur une largeur de 100 pixels. Ils sont vraiment parfaits pour montrer différentes photos de produits. Aide également à charger les images plus rapidement, car le navigateur n'a pas besoin charger toutes les images en taille réelle, je peux simplement charger les petites miniatures et ne charger qu'une seule image pleine grandeur nature. C'est également génial si les utilisateurs le souhaitent. Il permet aux utilisateurs de parcourir rapidement des collections d'images. Et cela ressemble beaucoup à la photothèque de votre appareil mobile. Ce sont toutes de petites miniatures ici. Certaines choses à faire et à ne pas faire. Encore une fois, la vignette doit remplir l'espace de taille égale. Et vous pouvez voir ceux ici où ces vignettes ne remplissent pas l'espace. Ils sont juste qu'ils peuvent être différentes tailles d'images de certaines peuvent être horizontales. Format d'image, certains peuvent ressembler à des versions portrait ou paysage. Vous pouvez voir le paysage de celui-ci ici, le portrait de celui-ci. Mais encore une fois, ils devraient tous remplir cet espace. Ainsi, vous avez cette belle image de champ, vous n'avez pas ces espacements blancs bizarres et incohérents. Vous pouvez le voir beaucoup. J' aime vraiment les miniatures de Nike ici. Là. Vous pouvez avoir une petite vidéo de ce type montrant ses chaussures ici. Et encore une fois, vous pouvez cliquer sur ces petites vignettes à droite, et elles apparaîtront ici. C'est plutôt cool. Je pense que c'est vraiment bon images maîtres et les miniatures qui se produisent ici. Je suis comme le site Web de Il. Passons à des carrousels. carrousels le sont, ils permettent à peu près à plusieurs éléments de contenu d'occuper un seul espace. L'utilisateur s'engage beaucoup comme une présentation, comme je l'aime, comme une présentation de diaporama. Et parfois, un carrousel peut être lu automatiquement, ce qui ressemble vraiment à une lecture automatique d'une présentation où chaque élément de contenu se présentera pendant une brève période. Et ensuite, un autre contenu sautera pendant le même temps et il se transforme tout au long de ce type de contenu. C'est un peu pour ça qu' on appelle ça un carrousel. C'est comme si tu étais comme si je déplaçais un carrousel avec des chevaux. Comme un. Chaque chose joue en quelque sorte à la fois. Si vous vouliez créer un site Web comme celui-ci où vous avez une image ici, image, un texte d'appel à l'action. Et puis cela reste pendant un certain temps. Et puis une autre image arrive et vous avez une image, autre image devient une image de votre intention de le faire. Arrêtez. Surtout s'il s'agit de l'image de héros d'un site Web. Ne faites certainement pas ça. C'est en quelque sorte un anti-motif pour les cellules de soin. Ce que nous voulons, c'est qu' dès qu'un visiteur arrive sur votre site Web, il devrait pouvoir dire quoi consiste votre entreprise. Cela signifie avoir un seul message clair et un seul élément de contenu faciles à comprendre. Si vous remplacez ce message ou ce contenu clair par plusieurs idées et messages, cela augmente le risque que les gens comprennent vraiment ce que fait votre entreprise. Et pire encore, cela réduira vos taux de conversion. Certains le font. Vous pouvez l'utiliser lorsque les informations sont simples et ne nécessitent pas beaucoup de concentration. Encore une fois, ne l'utilisez jamais pour les sections héros. Mais vous pouvez voir comment nous l'avons utilisé pour un site ici. C'est ce que nous avons maintenant pour la section des héros. Nous l'avons ici pour vous. Il est facile et rapide de personnaliser votre livre, télécharger votre livre et vous pouvez cliquer dessus. Il restera une fois que l' utilisateur commence à cliquer. Cliquez sur Mode maintenant. Et je pense qu'il restera moment et qu'il reviendra à la lecture automatique. Oui, tu y vas. Ici encore, nous l'utilisons pour des services créatifs. Vous pouvez voir les illustrations et édition de copies, ainsi que la conception de couvertures de livres et des services comme celui-ci. Juste pour complimenter notre communication ici. Vous pouvez l'utiliser beaucoup pour un carrousel sans la lecture automatique, ce qui est le plus courant. Et vous donnez le contrôle à l'utilisateur. C'est ce que nous allons regarder. Apple en a un assez sympa où ils montrent leurs AirPods ici. Et ils ont cette petite pagination. J'ai tout un discours sur la pagination. À la fin de la classe, vous pouvez vérifier et nous en parlerons. Mais vous voyez que j'ai une flèche droite. Je peux dire qu'il y a trois sections différentes dans ce carrousel. Chacun de ces trois contient trois produits. Donc je suppose qu'il y aura neuf produits au total avec cette pagination. Et je peux y retourner, je peux aller de l'avant. Écoutez, il n'y en a qu'un ici. Mais il s' agit essentiellement du carrousel. C'est sans la lecture automatique qui donne le contrôle à l'utilisateur. Colas, c'est ce que nous avons ici. Si vous pouvez le combiner avec des miniatures, c'est comme vous voulez toucher les vignettes. Et puis vous avez également le contrôle de l'utilisateur ici, ces flèches pour vous aider à parcourir chacune de ces vignettes. C'est là que la lecture automatique est géniale. Si vous accédez à des services de télévision intelligents, ils ont des carrousels. Vous verrez cette image de héros ici, la pagination. Il y en aura cinq. Et cela va être lu automatiquement. Vous regardez l'arrivée de ces nouvelles séries. Faites attention à votre lecture automatique, ne devriez pas, cela ne devrait pas être trop rapide. Juste assez longtemps pour que l' utilisateur puisse saisir le point. Et puis le prochain arrive. Oui, ce modèle de conception, bien qu'il ne fonctionne pas, il ne fonctionne pas pour les sites Web, comme l'est l'objectif de communication, devient incohérent car il continue d'allumer l'utilisateur. Mais lorsque vous êtes en mode Navigation, venez sur votre téléviseur et que vous voulez faire un sourcil. C'est là que cela aide. C'est un bon modèle ici. OK, c'est cool. C'était des miniatures et des carrousels. Je vous verrai dans le prochain, nous parlerons de modales et de boîtes lumineuses. On se voit là-bas. 15. Motifs et boîtes à lumière: Très bien, parlons de modaux et de pop-ups. Un modal ou une fenêtre contextuelle est un élément de fenêtre qui se trouve au-dessus d'un écran d' application. Et il crée un mode qui désactive l'écran principal, comme l'écran des parents, tout en gardant le courant dominant visible en arrière-plan. Lors de l'affichage en dehors de la fenêtre modale, les utilisateurs doivent interagir avec ce modal avant de pouvoir revenir à cet écran principal ou à l'écran des parents, en cliquant ou en touchant dehors du champ modal et fermeture du modal. Et encore une fois, cela remonte à cette architecture d'information de base, n'est-ce pas ? Lorsque vous avez ce niveau parent, qui est l'écran principal, puis que vous avez ce niveau enfant, c' est-à-dire le modal ou la fenêtre contextuelle. Leur principale valeur est qu'elle permet à un utilisateur de visualiser facilement un contexte supplémentaire, notre contenu, sans perdre le contexte de l'écran principal. Cela a beaucoup à voir avec l'emplacement. Comme s'ils peuvent voir des informations supplémentaires, mais ils ne perdent pas le contexte de leur localisation actuelle. L'inconvénient des modaux est qu' ils peuvent être très intrusifs. Et il est surtout garanti que votre utilisateur verra le modal, mais s'assure de l'utiliser pour quelque chose de précieux et non publicitaire. fenêtres contextuelles intrusives qui sortent de nulle part peuvent perturber concentration de vos utilisateurs et créer une méfiance envers votre produit ou votre UX. Laissez-moi vous en montrer un ici. Voici un peu de ce dont nous parlons. J'étais sur ce site ici à regarder autour de moi, lire des articles toute la journée et cette chose surgit de nulle part pour un tutoriel vidéo d' histogramme. Comme Non, je suis bon sur les tutoriels Instagram. C'est intrusif, il y reste définitivement. Je dois interagir avec ça. Et je vais aller de l'avant et le fermer et revenir à mon matériel de lecture ici. Je vous verrai plus tard. Je plaisante. Ok, donc c'est un peu ce que vous voulez éviter, ce type d'annonce modal comme apparaître. Je trouvais ça drôle aussi. C'était comme, Voici le soleil et voici le mercure. Et puis voici mon doigt. Et voici le bouton Ajouter des vêtements, comme nous l'avons tous vu sur ces modèles, l'annonce, mais le bouton de fermeture est comme ça, si petit que vous pouvez à peine mettre mon doigt dessus. Mais c'était plutôt drôle. Très bien, alors parlons de quand utiliser un modal ici. C'est donc génial quand il attire l'attention de l'utilisateur. Utilisez-le donc lorsque vous souhaitez interrompre la tâche actuelle de l'utilisateur et attirer toute l'attention de l'utilisateur pour quelque chose de super important. Supposons que vous ayez besoin de la participation de l'utilisateur. C'est le moyen d'obtenir des informations de votre utilisateur, comme dans cet exemple où vous êtes prêt à acheter un article, vous cliquez sur le bouton Commander, puis un mobile, un modal apparaît vous demandant de vous connecter avec votre adresse e-mail, votre mot de passe et vos champs de formulaire. Il ne perd pas l' emplacement de l'utilisateur. Ils n'ont pas accédé une autre navigation ou une autre destination sur le site. Vous voudrez probablement aussi ajouter comme, n'avez pas non plus d'inscription à un compte ni invite d'invités continus. C'est génial si vous souhaitez afficher des informations supplémentaires sans perdre le contexte de la page parente. Ainsi, un exemple ici consiste à montrer des images plus grandes, cliquer sur une image et à la voir plus grande ou à cliquer sur une vidéo, indiquant que la vidéo affiche des informations supplémentaires telles que En savoir plus ou FAQ. Foire aux questions. Vous pouvez afficher des informations qui ne sont pas directement liées à la page parente. Des éléments tels que la notification ou les opportunités de marketing, comme inviter cinq personnes et gagner 500$ ou recevoir du contenu de bienvenue ou même partager des fonctionnalités. Vous pouvez ensuite afficher, utiliser le modèle pour afficher des informations directement liées à la page parente. Des choses comme un message de succès ou des erreurs de chargement. Ou si vous cliquez sur quelque chose qui a un impact de la part de l'utilisateur, nous pouvons lancer un Ru sûr. Et ils peuvent choisir oui ou non, ou vous avez quelque chose qui vient de se passer dans notre base de données pendant que vous essayiez de modifier quelque chose ou de faire quelque chose, Nous pouvons lancer un modal pour juste dire, vous Je sais, quelque chose s'est mal passé. Il se peut que vous deviez actualiser ou fermer le modal et recommencer, recommencer car notre centre de base a reçu les informations, telles que celle-ci. Quelques exemples ici, je vais juste vous montrer l' exemple en direct de ce modal ici. C'est pour un site sur lequel nous avons travaillé, et c'est plutôt cool. En tant qu'utilisateur, vous pouvez cliquer sur, il s'agit de batteries domestiques. Ces batteries chargeront votre maison et alimenteront votre maison. En tant qu'utilisateur, vous pouvez consulter et cliquer sur le type d'appareils que vous souhaitez que cette batterie alimentée en cas de panne de courant. Et ensuite, vous pouvez voir qu'il vous indique combien d'heures une batterie serait capable charger votre maison si de charger votre maison si tous ces appareils étaient allumés. Alors que nous sensibilisons un utilisateur à la consommation d'énergie, à l'usage domestique et aux appareils électroménagers et à la quantité d'énergie qu'il consomme. Nous avons ajouté ici cette petite carte énergétique qui ouvre un modal. Ce modal est une information de niveau enfant qui se rapporte au parent. Et cela montre des informations sur les types d' appareils qui ont causé le plus d'énergie et ce que cela équivaut également à une facture d' électricité plus élevée. Donc, si vous utilisez un C toute la journée ou des voitures électriques et des lumières, ceux-ci contribuent beaucoup à augmenter la consommation d'énergie. Encore une fois, l'utilisateur peut simplement fermer cela. Retour à la page parente. C'est donc un bon cas d'utilisation pour un modal. Un autre dans l' application sur laquelle nous travaillons se trouve dans ce laboratoire mobile. S'il s'agit d'une application qui surveille votre système solaire sur votre maison. Et si quelque chose se passe mal sur le système solaire, nous signalons ici un petit avertissement que vous pouvez voir comme un point d'exclamation et une petite bulle de haut-parleur. Et si l'utilisateur appuie sur ce modal, nous lui faisons simplement savoir qu'il s'est passé quelque chose et il devrait nous contacter pour que nous puissions examiner le problème. Sachez également qu'il est bon de placer le x pour les appareils mobiles en haut à gauche, en particulier pour les droitiers parce que vous tenez votre téléphone ici de la main droite et vous pouvez utilisez votre main gauche pour le contrôler facilement, pour fermer ce x. C'est un emplacement assez courant pour le x. Si vous êtes sur un appareil mobile et que vous pouvez voir celui-ci en action ici. Juste ici. L'utilisateur clique ici sur ce point d'exclamation. Vous verrez le modal entrer en jeu et vous pourrez le fermer ici. Un exemple assez simple de ça, comme boop, quelque chose s'est mal passé. Essayez encore. Et vous pouvez également l'utiliser pour les appareils mobiles et sur tablette et sur le Web, vous pouvez faire ce qu' on appelle un modal plein écran où il prend tout l'écran. Et pour que l'utilisateur ne voit pas la page parente en arrière-plan, il voit simplement le X. Et si vous l'avez remarqué, voyez si vous avez un appareil, les écrans de notification natifs, sont des modaux comme celui-ci est un modal aussi. Voici un exemple de quelque chose qui n'est pas nécessairement lié à la page parente. Nous avons un système de parrainage et l'une des applications pour lesquelles nous gérons et concevons. Et si vous pouvez orienter les gens vers le service, et si quelqu'un s'inscrit et termine son projet, vous gagnerez 500$. Et donc, ce modal apparaîtra à tout moment pendant l'expérience utilisateur. Il déclenche également un e-mail à un utilisateur, mais s'il peut venir de l'e-mail, mais il apparaîtra également si vous faites quelque chose dans l' application, cela se déclenchera et c'est intrusif. Mais regardez à quel point c' est très intrusif. C'est comme si tu venais d'avoir 500$, comme allez-y et prétendez vos gains vous enverraient un chèque de 500 dollars. Il s'agit ici d'un exemple de RU. Bien sûr. Si vous supprimez un compte ici, vous allez supprimer de nombreuses informations liées à ce compte. Et nous tirons ça pour éliminer les accidents sur quelque chose qui a un impact. Si vous êtes un utilisateur et que vous êtes allé cliquer sur quelque chose et le supprimer. Nous allons simplement faire un pas de plus sur quelque chose qui est lié au compte et nous le ferons savoir, comme êtes-vous sûr de vouloir vraiment supprimer ce compte ? Il y a beaucoup de travail, beaucoup de rapports liés à cela. Et encore une fois, s'il s'agissait d'un accident, ils peuvent annuler. S'il s'agit d'une suppression, ils peuvent être supprimés. Voici un lien avec la page de niveau parent. Voici la modification des informations au niveau de votre compte. Vous appuyez sur le bouton Modifier affiche un modal, entrez les informations du compte. Et c'est génial parce que votre fork dans votre utilisateur, vous dites que vous allez soit mettre à jour ces vous dites que vous allez soit mettre à jour informations, soit vous allez annuler ou fermer. n'y a pas d'autre moyen de s'en sortir. Vous ne pouvez pas être à mi-chemin et aller ailleurs. Comme si vous deviez terminer ou terminer. Et c'est la bonne chose ces modèles de forcer votre utilisateur à visualiser ce modal, puis terminer la tâche ou à fermer la tâche. Personnellement, j'adore les modaux de recherche en plein écran. Si vous cliquez sur l' icône Rechercher ici sur ce site, un modal de recherche en plein écran s'ouvre. Le fond est un peu plus sombre. C'est environ 90 % d'opacité. On peut encore à peine voir l'écran des parents derrière. Mais c'est super lisse parce que vous avez l'impression de l'être, que vous vous engagez dans l' interface, comme vous l'êtes, vous êtes dans l'interface et elle ne se sent pas petite ou faible, elle est vraiment super moderne et lisse. Et lorsque vous tapez dans le champ de recherche ici, vous verrez les résultats de la recherche. Encore une fois, vous pouvez fermer cela avec le x ou vous pouvez trouver vos résultats de recherche comme Erin Anderson ici et aller sur le site d' Aaron Anderson. Personnellement, je les adore. Je pense que ce sont de bons et excellents cas d'utilisation pour les modaux plein écran. Allons voir des choses à faire et à ne pas faire. Encore une fois, un modal à la fois. Et c'est une règle très difficile pour les applications qui ne font pas modaux au-dessus de modaux comme celui-ci ici. Comme si vous aviez un modal ici et que vous avez un modal ici, ce n'est pas bon, ce n'est pas Bueno. C'est bon. Si vous avez un système d'exploitation comme sur mon ordinateur, je pourrais aller dans mon localisateur. Techniquement, c'est un modal. J'en ai un autre comme ça, c'est correct quand vous faites un système d'exploitation comme un ordinateur comme celui-ci. Mais pour les logiciels et les expériences utilisateur, évitez-les. Un autre que j'ai vu ici concerne ma demande de crédit. Et je vais regarder mon rapport de crédit et recevoir des notifications comme si votre cote de crédit a baissé sans raison apparente, ce que je me dis : Qu'est-ce que j'ai fait ? Je fais même n'importe quoi et ça s'écroule. Mais vous pouvez voir ce qui se passe ici. Il est dit de voir votre nouvelle partition et cela ouvre un modal. Il s'agit d'un modal. Et je clique sur le X et il me ferme et revient en arrière. Et si j'ajoute une touche sur ce petit truc à trois points, regardez ce qui se passe. Il ouvre un autre modal au-dessus d'un modal. Maintenant, je regarde deux X et comme, eh bien, lequel est le x ? C'est donc ce que vous voulez éviter cette interaction modale sur modale. Rappelez-vous que les modaux sont excellents, ils ne font que le niveau parent et enfant. Vous ne pouvez pas jeter un autre modal au-dessus de cela pour réaliser un niveau d'architecture d' information de niveau petit-enfant. Mais ils sont très bien pour cette relation parent-enfant. Comme 70 ou 90% d'opacité pour la couleur d'arrière-plan ici, vous pouvez voir et éviter de faire comme une très faible opacité d'arrière-plan, comme si vous voulez que l'utilisateur se concentre sur la tâche à accomplir. Dans ce cas, je donne, nous donne des commentaires sur l'application. De cette façon, il n'y a pas de concentration, il n'y a pas assez de capacité. Il y a trop de capacité dans la couleur et l' arrière-plan ici, et il se passe beaucoup de choses. Il ne s'agit pas de créer l'objectif dont nous avons besoin pour un modal. Le modal doit également s'adapter à l' écran, principalement pour le bureau. Et vous pouvez faire défiler ce modal. Comme si je serais capable de mettre ma souris et de faire défiler ces informations. Je ne fais pas trop long le modal pour qu'il passe la fenêtre ici, n'est-ce pas ? Comme si vous souhaitez pouvoir s'insérer directement dans la fenêtre de votre application de bureau. Bon, allons regarder les boîtes lumineuses. Les boîtes lumineuses sont à peu près la même interaction qu'un modal, les différences que la visionneuse fait référence à une galerie de photos. C'est tout ce que vous devez savoir. Les mêmes principes s'appliquent aussi bien aux modaux qu' aux miniatures, mais aussi à la visionneuse, n'est-ce pas ? Permettez-moi donc de vous montrer un exemple de cela. Donc, si vous vous souvenez, nous avons ce côté sur lequel j'ai travaillé et construit. Nous avons ces miniatures, n'est-ce pas ? Donc, les mêmes règles qui s'appliquent à ces vignettes parlent que celles que nous avons appliquées à ces miniatures. Et lorsque vous voyez la visionneuse entrer, vous pouvez voir que c'est à peu près un modal. Et la différence, c'est qu'il a plus de fonctionnalités intégrées. Je peux toujours fermer cette image. C'est une jolie image ici. Mais je peux faire des allers-retours à travers ces modaux. Et le lightbox est à peu près cela, c'est le terme qui est utilisé uniquement pour le modal. C'est comme créer une boîte pour voir votre image. Et l'arrière-plan est toujours visible depuis la galerie ici, mais c'est essentiellement la boîte qui sort de la lumière. Vous voyez votre image, puis vous la remettez dans la galerie de photos ici en la fermant. Quand les utilisez-vous ? Utilisez-les si vous avez beaucoup de photos à insérer sur une page, encore une fois, elles sont parfaites pour afficher différentes photos de produits, comme un site de commerce électronique ou une photothèque et des applications qui s'intègrent à photothèque de votre appareil photo. Ce site était plutôt destiné à un photographe. Et vous pouvez aller voir ça ici. Voici également l'URL si vous en avez besoin. Oui. N'oubliez pas que dans le modal lightbox, il peut y avoir des descriptions comme nous venons de le voir. Vous pouvez faire compter les lanceurs ici, huit sur 25. Vous ne pouvez pas non plus avoir de description. Ce n'est pas obligatoire. Vous pouvez faire des allers-retours sur les boutons. Vous pouvez le fermer. N'oubliez pas que les boutons ont également un état de survol. Vous pouvez le voir ici. Vous pouvez parcourir ces photos. OK, c'est cool. Si c'était des modaux et des pop-ups, je vous verrai dans la vidéo suivante. Nous parlerons de menus et de tiroirs. 16. Menu et tiroirs Partie 1: Parlons de menus et de tiroirs. Les menus sont une liste de contenus, catégories ou de fonctionnalités généralement présentés sous d' un ensemble de liens dans la barre de navigation, mis sur le Web ou peuvent être regroupés dans une icône comme un hamburger ou un kebab lorsque vous êtes sur appareils mobiles et tablettes, je vais vous en montrer un tas d'exemples. Les menus sont des modèles UX très prioritaires car ils aident les utilisateurs à naviguer dans l' expérience utilisateur ou l'application de votre service. Et encore une fois, vous pouvez avoir les fonctionnalités les plus précieuses, le contenu le plus convaincant, c'est génial, mais il est inutile si les gens ne le trouvent pas. Menus ou source là-bas. Tellement important que vous les trouverez sur tous les sites Web, chaque logiciel que vous allez contrecarrer. Il est très important de comprendre le fonctionnement de ces menus. Non seulement pour les logiciels et les applications, mais aussi pour les sites Web réactifs. C'est là qu'ils sont vraiment utiles, et c'est là que ce combo de menus et tiroirs est vraiment utile pour les sites web réactifs qu'ils ont un certain regard sur le web, puis ils répondent en fonction de leur contenu et de leurs besoins de navigation pour les applications humides, mobiles et tablettes. Permettez-moi de vous montrer un exemple rapide de cela. Voici donc le site Web Nike, voici leur menu pour les appareils de bureau Web. Et vous pouvez voir que tout va changer quand je vais à la tablette. Et vous pouvez voir qu'ils utilisent le menu des hamburgers ici. Et quand je me rends ici sur un appareil mobile, ils utilisent le menu des hamburgers pour héberger ce type d'informations. C'est un site web réactif. Et encore une fois, le tiroir est le plus couramment utilisé pour la façon dont les différents éléments comme les liens de menu. Mais il peut également être utilisé pour aider d'autres types d' informations, d' interface utilisateur et de contenu liés à l'application. Encore une fois, le tiroir est cet entrepôt tous les liens. Vous avez l'icône Menu ici, puis vous avez ce tiroir qui glisse comme ça. Et pour ce tiroir, il est idéal pour héberger la navigation, les menus et les liens, mais il peut également être utilisé comme une interaction distincte pour afficher informations de niveau enfant en fonction de tout contenu ou action d'un utilisateur. fait sur votre site. Je vais vous montrer des exemples de la façon d'utiliser le tiroir. Mais vous verrez cela comme un combo. Le menu et le combo tiroir. Encore une fois, ce tiroir fait référence aux tiroirs de commode. Le tiroir de la commode contient des informations que vous pouvez ouvrir et fermer. C'est en quelque sorte de là que proviennent les origines du tiroir. Voici notre menu de navigation ici pour le web, nous avons quatre options pour notre utilisateur. Nous avons notre barre de recherche. Vous pouvez alors voir le même style de navigation ici. Pour les applications mobiles où nous mettons le menu ou le menu hamburger. Et nous hébergeons tous les liens et les besoins de navigation dans ce menu de hamburgers. Voici l'exemple où les menus en haut à droite. Et je vais vous montrer quelques exemples ici, ici dans une seconde comment cela fonctionne. Voici un exemple de menu de hamburgers sur la gauche. Voici l'exemple du tiroir plein écran qui se met en place pour que l'utilisateur puisse sortir X à n'importe quel moment. Allons regarder ces choses très vite. Voici celui qui se trouve sur la gauche. Vous pouvez voir cette diapositive de près. Vous tapez en dehors de cette fermeture. Voici celui qui se trouve à droite. Et touchez dessus. Celui-ci vient de la droite. Si vos menus sont à droite, assurez-vous qu'ils viennent de la droite. C'est sur la gauche. S'assure que le tiroir entre par la gauche. Nous avons également le plein écran ici. Vous pouvez donc voir comment cela prend le plein écran. Ensuite, nous devrons avoir un x ici parce que nous devons avoir un moyen pour notre utilisateur de sortir. Ils peuvent également toucher sur l'écran d'accueil. Il le ferait également. Bon, donc allons voir beaucoup de ce menu, de la navigation et des tiroirs. Ils ont beaucoup à voir avec l'architecture de l' information et comprennent les niveaux d' informations pour lesquels vous concevez et quels niveaux de navigation vos utilisateurs devront passer. tout au long de votre site Web, de votre application Web ou application mobile et tablette. Vous pouvez voir ici avec site Web de Nike ici s'ils ont ce niveau parent. Nouveautés, hommes, femmes, enfants et vente. Il s'agit des informations de niveau parent. Ensuite, vous pouvez voir le menu déroulant s'afficher et cela indique le niveau enfant et le niveau petit-enfant. Cela fait également référence, comme nous l'appelons « méga menu ». C'est comme un menu énorme rempli de trucs. Vous pouvez voir que le niveau parent était la nouvelle version, le niveau enfant était nouveau et présenté. Et puis vous avez le niveau petit-enfant, toutes les choses qui se rapportent au nouveau et à la fonctionnalité et à la vedette. Vous pouvez voir comment cela fonctionne pour un appareil mobile. Ils ont l'icône Hamburger, ouvrent les informations de niveau parent. Et ensuite, si vous appuyez sur de nouvelles versions qui vont aux informations de niveau enfant, puis elles entrent dans les informations de niveau petit-enfant. Ils utilisent un tiroir, mais vous pouvez voir quel point ce tiroir est flexible. Il peut contenir plusieurs niveaux de contenu dans ce tiroir. Vous pouvez également cliquer sur le logo ou le toucher. Dans de nombreux cas, il sera utilisé pour permettre à votre utilisateur de revenir à l'écran d'accueil ou à l'écran principal. Allons voir ça en direct. Avant d'entrer dans l'exemple suivant, voici donc votre niveau de parent, petits-enfants, niveau enfant, et vous pouvez voir comment cela change en fonction de la réactivité ou de l' adaptabilité de ce site Web. Maintenant, nous sommes en mode tablette, et maintenant nous allons entrer dans le mode non modal. Vous cliquez ici sur les nouvelles versions. Maintenant, je suis au niveau des enfants et j'ai maintenant rencontré ce niveau petit-enfant et je peux y retourner, revenir et fermer. Très bien, très efficace, simple mais efficace. Vous pouvez voir ici un autre exemple d'un menu couramment utilisé, à savoir le menu du tiroir droit. Vous pouvez voir sur le Web que nous ne cachons pas toutes ces informations dans un menu de hamburgers. Nous le dénonçons. Et même sur la tablette. Il est exposé ici sur la gauche. Et quand nous arrivons à la vue mobile, nous utilisons en fait le menu, le hamburger, icône de menu et le combo tiroir, n'est-ce pas ? Donc, si nous avons l' immobilier sur le Web, n'affichez pas le menu des hamburgers, comme afficher toutes les informations, car cela revient à cette déclaration , à savoir l'accessibilité de l'utilisateur. Moins il faut cliquer et appuyer pour que quelqu'un fasse quelque chose et accomplisse sa tâche sur votre site Web, mieux c'est. Voyons Shopify comme exemple. Vous pouvez donc voir leur menu ici à gauche, je vais exposer pour le web, vous arrivez à la tablette. Rien ne change. Ensuite, nous entrons dans la vue mobile et voici leur combo de tiroirs de menu hamburgers, n'est-ce pas ? Cool. Merci. Prenez la photo. Allons voir différents types de menus. Vous pouvez voir ici est sur Android a deux menus très courants. Il propose un menu de hamburgers. Et encore une fois, ce hamburger abrite des liens de navigation maîtrisés tels que les liens de navigation au niveau des parents. Ensuite, vous avez ce qu'on appelle le kebab ou le menu de débordement. Et ce menu est généralement conçu pour héberger les actions qui ne correspondent pas à cette barre de titre ici. Ainsi, en tant qu'actions, comme cette barre de titre devient de plus en plus petite et plus petite, le débordement, c'est exactement la raison pour laquelle ils l'appellent débordement. Quels que soient les menus qui débordent, sont rentrés là-dedans. Encore une fois, cette interaction de kebab est courante sur Android, mais elle n'est pas trop courante sur les interfaces Apple ou les produits Apple. D'autres plats courants reçoivent simplement le menu des hamburgers parce qu' il ressemble à un hamburger. Nous avons le menu Bento ici. Celui-ci ressemble à une boîte à bento, et il s'agit généralement des différentes applications que vous avez en tant qu'entreprise. Comme si vous possédez Google, vous disposez de nombreuses applications différentes comme Drive et Google et Agenda. Cela montre donc différentes applications au sein d'un même service. Vous avez le menu des kebab car cela ressemble à un navire Khabbab. Et puis vous avez le menu de boulettes de viande ici parce qu'il ressemble à des boulettes de viande. Et ils sont généralement plus pour les réglages et dans le menu du kebab, c'est plus pour le débordement. Les sections peuvent également être utilisées pour les paramètres. J'ai vu le menu de débordement être utilisé pour les paramètres. 17. Menu et tiroirs Partie 2-2: Vous pouvez voir comment ce type de menu de boîte à bento est utilisé sur différents types de produits pour afficher leurs applications, n'est-ce pas ? Vous verrez donc cela sous Microsoft Outlook. Si vous cliquez sur ce menu Bento ici, il affiche tous les produits qu'ils proposent, Outlook et PowerPoint, vieux PowerPoint et Word et Excel et certaines autres choses. Et puis il en va de même pour Google qui a la boîte Bento en haut. Et si vous cliquez sur le menu de la boîte Bento, il affichera toutes leurs autres applications. Ils ont YouTube et calendrier et d'autres choses. Je veux vous montrer un petit conseil vraiment très précieux que vous pouvez. Vous pouvez utiliser des tiroirs pour ça. Vous pouvez héberger plus que des options de menu et des tiroirs lorsque vous pensez à un site réactif. Tiroirs ou votre meilleur ami. Ils sont super, super géniaux. Ils sont vraiment pratiques. Et je vous expliquerai pourquoi ici, une fois que je vous ai donné cet exemple. Voici donc un exemple où nous avons une interface cartographique et que l'utilisateur appuie sur ce point de repère spécifique ici. Et nous ouvrons un tiroir. Plus de détails concernant ce que l'utilisateur ne fait que regarder. Ils appuient sur le X et ils les ramènent à la carte. Voyons maintenant cette interaction depuis un iPad. Même affaire ici, l'utilisateur appuie sur la carte ici, voit que ces informations relatives apparaissent. C'est la même interaction que le Web. Il faut peut-être un peu plus biens immobiliers que sur le web. Ce tiroir ici, et vous pouvez fermer, il fonctionne toujours. C'est une excellente interaction qui permet à l'utilisateur de rester concentré. Ensuite, vous pouvez voir comment fonctionne la même interaction pour le boîtier mobile. Vous touchez cet objet ici sur la carte et il prend l'immobilier en plein écran, vous pouvez fermer avec le X et revenir en arrière. L'avantage de ce système utilisant des tiroirs est que ce modèle d'interaction fonctionne la même manière et qu'il s'agit de la même fonctionnalité, il s'agisse d'un ordinateur de bureau, d'une tablette ou d'un appareil mobile. Cela signifie donc que vous pouvez concevoir cela une fois, et cela fonctionne pour les trois types de plates-formes différents. Ce modèle d'interaction fonctionne parfaitement pour tout. Regardons ça en action ici sur un vrai produit. Voici un produit solaire sur lequel nous travaillons. Ce sont vos clients, ce sont vos panneaux solaires en bleu. Et si vous voulez en apprendre un peu plus sur votre panneau, entendre ou voir la production de ce panneau solaire, vous appuyez dessus. Nous le soulignons et nous jetons un tiroir. Et le tiroir ici a le x, vous pouvez le fermer. Ensuite, vous voyez ici des informations relatives à cette zone spécifique d' cette zone spécifique d' un panneau spécifique et à un panneau solaire sur lequel ils ont puisé. Allons maintenant regarder ça sur l'iPad. Même fonctionnalité. Appuyez sur le panneau solaire, prenez le tiroir. Vous pouvez glisser sur ce tiroir, vous pouvez voir plus d' informations sur ce tiroir. Ensuite, vous pouvez voir la même chose ici. En cours d'utilisation pour l'application mobile. Appuyez sur le tiroir, donne le tiroir modal plein écran ici et le ferme. Très bien, donc c'est une excellente relation parent-enfant. Et l'avantage aussi est que les tiroirs, contrairement aux modaux, vous ne pouvez pas avoir de modal. Sur un modal. Les tiroirs peuvent contenir plus d' informations. Vous pouvez le voir ici, nous utilisons des accordéons dans ce tiroir ici pour nos FAQ soient fréquemment posées. Ce sont donc des robinets, ce qui ouvre la réponse à cette question, n'est-ce pas ? Nous avons donc trois niveaux d'architecture de l'information. Nous avons l'écran de niveau parent, nous avons l' écran de niveau enfant pour ce tiroir et nous avons l'écran de niveau petit-enfant pour l'accordéon dans ce tiroir. Vous pouvez voir qu'il s'agit d'un modèle d'interaction et d' interaction très pratique et d'une interface utilisateur pour différents types de besoins d' architecture comme celui-ci. Examinons les meilleures pratiques ici. N'oubliez donc pas de placer les menus en haut car ils correspondent à un niveau global ou maître de l'architecture d' information. Ceux-ci, ce menu navigue sur l'ensemble du site afin qu'ils exigent l'espace qu'ils doivent généralement se trouver en haut. De plus, les utilisateurs ont simplement l'habitude de les voir à gauche ou à droite des barres de navigation. Ensuite, indiquez à vos utilisateurs où ils se trouvent lorsqu'ils se trouvent dans différentes parties de votre UX. Vous pouvez utiliser la section titre de votre barre de titre ici pour afficher et mettre en surbrillance les sections du menu. Sur ordinateur de bureau. Nous avons un état actif pour le menu. C'est la marchandise pour la maison. Ensuite, pour le mobile, vous verrez que l'utilisateur entre dans le menu, peut toucher les produits ménagers, et nous utiliserons le titre ici pour lui rappeler où il se trouve. N'oubliez pas de garder les menus fixes comme s'ils restent au même endroit lorsque l'utilisateur fait défiler. Facilite l'accès de l'utilisateur à partir de n'importe quelle situation ou de n'importe quelle destination dans laquelle il se trouve, sans devoir remonter jusqu'à la page. N'oubliez pas comment votre utilisateur va revenir à l'écran d'accueil. Si vous n'avez pas de maison dans votre tiroir et que l' utilisateur entre comme des bijoux ici. Comment sont-ils revenus sur l'écran d'accueil ? Vous n'avez plus le logo car nous avons remplacé le logo par le titre. Rappelez-vous ce genre d'interaction ici. Et si vous devez ajouter l'écran d'accueil, ajoutez l'écran d'accueil et reprenez l'utilisateur . Vous pourriez vous en servir. N'oubliez pas que le combo tiroir de menu, le menu déroulant ici pour répondre aux besoins de navigation parent-enfant et petit-enfant. Vous pourriez utiliser la même chose pour les appareils mobiles que nous avons vus. Encore une fois, pensez à ces méga menus ici, comme les articles de maison en tant que parent, vous avez des oreillers, art, des estampes, des horloges, des horloges murales, couvertures comme celles-ci se rapportant aux articles de la maison en tant que niveau enfant. Et puis nous sommes dans des oreillers, nous voyons un tas d'oreillers. Ce niveau petit-enfant. Nous avons vu la même chose pour Nike. Pour les sites Web réactifs, si vous n'avez que trois ou quatre liens de menu pour votre appareil mobile. Ici, nous avons comme des vêtements, des bijoux et des articles ménagers. Nous pouvons passer à une barre d'onglets secondaire au lieu de l'icône du menu hamburger. Et encore une fois, il s'agit de payer un pouce. Comme ces menus sont maintenant exposés et que l'utilisateur peut, d'un simple toucher, naviguer facilement dans ces trois éléments de menu ou de destination, au lieu de devoir revenir dans un menu, sélectionner l'élément et le menu. dehors. Si vous n'en avez que 234 hauts, vous pouvez utiliser la barre d'onglets tant qu'elle conviendra. Ok, donc si vous avez pour le web et que vous avez l'immobilier exposez tous vos besoins de navigation. n'y a pas besoin d'un menu, d'une icône de hamburger sur le Web ici. Vous pouvez simplement voir si vous avez l'immobilier. Si vous avez l' immobilier, sortez tous ces éléments du menu hamburger et placez-les ici car l'utilisateur n'a pas à cliquer plusieurs fois sur ces besoins de navigation. Quand ces menus de hamburgers sont apparus pour la première fois. C'est à ce moment-là que l' iPhone vient de sortir. Il y a eu beaucoup de recul avec la communauté UX concernant l'utilisation de ces menus de hamburgers. Et ce que c'était, c'est ce n'était pas qu'ils ne sont pas très précieux. Vous verrez que vous pouvez les voir évidemment dans tous les services les plus courants et les grandes applications que nous utilisons, c'est qu'ils étaient mal utilisés comme ça. Les gens les utilisaient simplement alors qu'ils avaient manifestement les biens immobiliers pour toutes les informations ici. C'est donc de là que tout ce qui est venu et le contrecoup. Mais il y a toujours un rôle essentiel dans la navigation et le destin des gens sur votre site Web. Enfin, n'oubliez pas que si vous avez un élément de menu à gauche, ouvrez le tiroir par la droite ou par la gauche, où les portes sont ouvertes, où que se trouve le menu. Ne faites pas ça. Où les menus gauche et le tiroir arrivent par la droite. OK, c'est cool. Il s'agit de menus et de tiroirs. Je vais vous voir la prochaine vidéo. Nous couvrirons les sorciers, la chapelure et la pagination. 18. Wizards: Bienvenue dans les sorciers, la chapelure et la pagination. Je vais diviser celle-ci en trois vidéos différentes. Nous allons réaliser une vidéo pour chacun de ces sujets. Commençons donc par Wizards. Un assistant de formulaire est un modèle de conception d'interface utilisateur qui permet aux utilisateurs non formés ou nouveaux d' atteindre un objectif en plusieurs étapes. Et l'utilisateur entre des informations à chaque étape, puis passe à l'étape suivante jusqu'à la fin. Et les sorciers aident à diviser ce qui pourrait ressembler une longue tâche intimidante à accomplir en petites étapes digestes. Et des études ont montré que si vous simplifiez la première étape de l' assistant, il est plus probable que l'utilisateur effectue toutes les étapes de votre tâche. Vous pouvez voir ici que nous avons la demande de vérification de crédit ici. Encore une fois, nous avons rendu la tâche très facile pour l'étape de révision. Nous ajoutons que c'est assez simple pour l'étape de divulgation. Et puis nous avons fait la vraie viande ici sur vos infos. Nous devons fournir des informations pour effectuer cette vérification de crédit. Et ensuite, il est également bon de rendre les dernières étapes super faciles. Vous ne voulez pas que les gens tombent quand ils arrivent, ils ont déjà franchi trois étapes quand ils arrivent à la dernière étape, si c'est encore plus d' informations qu'ils ne le pourraient, vous risquez le risque d'entre eux qui tombent à ce moment-là parce qu'ils sont comme, je ne veux pas continuer à faire ça. La première étape est super facile pour rendre la dernière étape super facile comme la meilleure approche ici. C'est une très bonne interaction, non seulement pour rompre long processus intimidant jusqu'aux petits pas de la taille d'une bouchée. Mais les assistants transmettent également trois éléments très importants qui sont au cœur de l'expérience utilisateur. La première chose, c'est l'attente. Il donne un niveau élevé de ce à quoi ressemble l'ensemble du processus, ainsi que du nombre d' étapes. Et il donne à cette deuxième partie la bonne position alors que l'utilisateur, dans ces étapes et à tout moment pendant ce processus, il lui permet également de voir l'heure. Alors, combien d'étapes ou moins, ou de progrès, combien d'étapes avez-vous accompli et combien reste-t-il ? Quand les utiliser, utilisez-les lorsque votre utilisateur doit effectuer une tâche ou un objectif contenant beaucoup d'informations, d' actions ou de saisie de données. Encore une fois, ces tâches sont plus faciles à réaliser en divisant ce processus en petites étapes simples. Un exemple, c'est comme remplir informations fiscales qui requièrent beaucoup d'informations. Et ces informations doivent être regroupées en différentes catégories, sections telles que regroupées en différentes catégories, les informations personnelles, les informations l'employeur, les informations financières. Dans les étapes de confirmation. Utilisez-le lorsque l' utilisateur a besoin de conseils, il souhaite atteindre un objectif global, mais il peut ne pas être familier avec les étapes nécessaires pour atteindre chacun de ces objectifs sont des informations. L'exemple fiscal est génial parce que la fiscalité, il y a des gens que tout leur travail consiste à faire impôts des gens parce que c'est compliqué, n'est-ce pas ? Il s'agit donc d' excellentes façons de diviser cette complexité en étapes et guider votre utilisateur à chaque étape sans avoir impression d'avoir besoin de tout savoir à la fois. Lorsque certaines informations ou catégories d' informations dépendent les unes des autres. Dans ce cas, si l'information doit être examinée ou vérifiée à chaque étape pour obtenir un résultat final. C'est donc génial lorsque nous avons couru pour ce modèle ici à gauche où nous avons dû l'utiliser pour une vérification de crédit ici. La raison pour laquelle nous l'avons divisé en un assistant est que les utilisateurs, un assistant est que les utilisateurs, avant même d'obtenir des informations de leur part, doivent accepter nos termes et conditions selon lesquels nous utiliserons leurs informations pour exécuter un vérifiez le crédit, le bureau de crédit et obtenez une vérification de crédit pour eux. Avant même d'obtenir leurs informations. En vertu de la loi, nous devons leur faire accepter ces conditions. Ensuite, nous avons obtenu les informations et la troisième est le résultat de la vérification de crédit. Comme ils étaient la plupart du temps approuvés, mais parfois ils sont rejetés. Vous pouvez voir que la deuxième partie ici est celle où nous l'avons eue, envoyez ces informations rapidement à notre base de données, exécutez la vérification de crédit, puis rendez le résultat. La troisième étape dépend donc de la deuxième étape. Il existe également des flux d'embarquement à bord lorsque les utilisateurs doivent entrer un ensemble d'informations pour commencer à utiliser votre application, comme nom d'utilisateur ou le choix de profil ou sélectionner des catégories d' intérêts, qui genre de chose. Examinons ici les étapes de la création d'un bon assistant. Donc, la première chose que vous voudrez faire est de décomposer toutes les informations dont vous avez besoin pour que les utilisateurs saisissent. Et notre choix, nous allons utiliser cet exemple de crème glacée, comme nous savons vraiment que les gens le veulent, nous avons besoin que les gens choisissent leur taille de crème glacée, une cuillère à prendre, trois boules de glace arômes de crème. Ici, nous obtenons les pages chocolat, pépites de chocolat, le pinup, route rocheuse, puis les informations de paiement de réadaptation , le nom, l'adresse de livraison, numéro de téléphone ou de carte de crédit, dates d'expiration, le numéro CVE et l'adresse de facturation, c'est vrai, donc cela va presque compléter une partie de notre flux de travail ici. D'accord, vous voudrez donc qu'il trouve l'ordre de hiérarchie des informations qui correspond au modèle mental actuel du client. C'est vraiment très enthousiaste. Le modèle mental consiste donc à comprendre comment un utilisateur commande ou organise des informations ou un système. Le plus souvent, ce modèle est un artefact ou un résultat d'une recherche utilisateur. Et donc, lorsque vous pensez crème glacée dans le système actuel ou la convention et façon dont les gens modélisent ou organisent l'information sur la crème glacée. Les utilisateurs ont tendance à entrer et ils commandent d'abord des glaces. Quelle est la taille ? Ils ne commencent pas par des garnitures. Vous pouvez donc voir cette commande en cours maintenant. Vous commencez par la taille , puis vous en faites les saveurs. Ensuite, vous pouvez obtenir la taille qui détermine le nombre de scoops que vous obtenez. Ensuite, le nombre de cuillères détermine le nombre de saveurs que vous obtiendrez. Et ensuite, en se basant sur ces saveurs, vous voudrez peut-être certaines garnitures. Vous pouvez voir que c'est un modèle mental. C'est ainsi que votre client pense ou organise ces informations. Et je suis vraiment bon livre ici est, si vous allez à la conception de Everyday Things par Don Norman ici, il parle beaucoup de modèles mentaux dans ce livre. Et c'est super bien. Si vous voulez vraiment obtenir, si vous êtes de toute façon, faire de l'UX ou de l'interface utilisateur comme celle-ci est une lecture fondamentale ici. Donc, si vous ne l'avez pas lu, il suffit de le ramasser comme un excellent livre. Il parle beaucoup de portes, d' un de mes chapitres préférés et il va juste, il devient fou sur la conception de porte et comment vous concevez des poignées pour informer les gens comme la façon dont vous ouvrez une porte qui poussent ou tirent, cela dépend de la conception de la poignée par rapport à une enseigne. Très, très intéressant. Bon livre ici, jetez-y un coup d'œil. Une fois que vous avez organisé votre modèle mental. L'étape suivante consiste à modéliser la hiérarchie des informations en catégories et à les faire correspondre aux ordres et aux étapes du modèle mental. Vous pouvez voir cet organigramme d' information ici, nous avons les tailles de crème glacée, nous avons nos saveurs, nous avons nos garnitures et nous devons obtenir des informations de paiement ici. Vous pouvez donc voir ce genre d'Assistant sortir comme la première étape, deuxième étape, la troisième étape, la quatrième étape. Maintenant que vous avez cela, vous pouvez créer un prototype de faible fidélité. Vous pourriez commencer à approfondir un peu le contenu dont vous n' auriez pas besoin, comme des images des descriptions et des champs de formulaire. Ensuite, vous voudrez tester cela auprès vos clients pour vous assurer que le contenu, le modèle mental, le flux de travail, tout est logique et facile à utiliser. On a juste un peu mis en place un filaire ici. Vous avez votre magicien ici, la taille, choisissez votre taille. boules moyennes, sautez aux saveurs, frappez vos saveurs, puis il passait aux garnitures. Ensuite, appuyez sur Suivant, appuyez sur le bouton Précédent, puis finissez par pouvoir commander plusieurs de vos produits, de la taille de la crème glacée ou produits de crème glacée ici, puis passez à la commande. Décomposons donc ce qui fait un bon sorcier ici. Vous pouvez voir l'étape terminée ici permet à l'utilisateur de savoir ce qui a été fait. L'étape orange ici permet à l'utilisateur de savoir à quelle étape il se trouve. Le pas en avant ici, c'est juste gris, qui permet l'utilisateur de savoir quelles sont les étapes à venir. Il est vraiment toujours bon d'avoir un titre sous chacun d'eux, encore une fois, qui fixe l'attente de ce que l'utilisateur va attendre et quel type d' information va venir ensuite. Ensuite, chacun doit avoir une description ou un appel à l' action pour indiquer à l'utilisateur ce qu' il doit faire pendant cette étape. Ensuite, un bon assistant dispose également du bouton Suivant qui permet à l' utilisateur de continuer. Il permet à l'utilisateur de revenir en arrière en tant que bouton secondaire. S'ils manquent quelque chose ou besoin de changer quelque chose, ils ne l'ont tout simplement pas fait. Étape 1 ou deuxième étape, ils peuvent revenir en arrière. Ensuite, ils laissent l'utilisateur annuler. Donc, le cancer, tout ça s'il en a besoin. Certains ne se souviennent pas et ne s'en souviennent pas, montrent la progression des étapes. C'est bien. moyen de transport indique le temps et les progrès réalisés, sans montrer les étapes de progression ici. Comme si vous étiez sur vos informations et que vous ne savez pas si vous venez de les compléter. Affichez de bons états visuels pour les étapes terminées. Et l'étape active ici, l'étape à venir. Cela, nous avons même rendu cette couleur plus grande et plus brillante. Vous pouvez voir que nous utilisons les cases à cocher ici pour les étapes terminées et que rien ne se passe pour cette étape et pour l'avenir. Juste un petit point gris. Évitez cela. Comme si on ne sait pas quelle marche sur auto nulle part en audacieuse et en améliorant un peu mieux, mais soyez plus percutant, plus intentionnel à ce sujet. Vous ne pouvez donc pas vraiment voir ce type de progrès ou les fondamentaux de ce qui fait un bon sorcier entre les choses qui ont été faites. Merci de l' étape terminée sur laquelle vous êtes sur, étapes à compléter. N'oubliez pas que chaque étape doit comporter la catégorie d'informations qui s'y rapporte. Donc, si vous indiquez votre nom ou vos informations ici, indiquez le nom, LastName. N'utilisez pas chaque étape pour obtenir des informations spécifiques. J'ai vu ça une fois où c'était comme un nom, un e-mail, un téléphone, je me suis dit, eh bien, c'est tellement facile. Pourquoi dois-je faire cela dans un sorcier ? Comme si je pouvais tout faire en une seule séance. C'est donc l'objectif de ces derniers est de rompre la longue tâche intimidante et de la mettre en étapes où s'il ne s'agit que de nom, e-mail, de numéro de téléphone, d'anniversaire, vous n'avez pas besoin d'un assistant, comme si c'était simplement rempli. Laissez-moi y entrer. N'oubliez pas d'avoir un bouton de retour qui vous permet de revenir facilement dans le passé. Mais voici le botteur. Enregistrez ces informations. Par exemple, si l'utilisateur saisit des informations et qu'il remonte un pas en arrière et qu'il avance à cette étape, il n'était qu'à faire. Ne les obligez pas à remplir cette information à nouveau, sauf cela et ce que nous appelons ça le front end. Quand ils retournent à l' arrière, apportent un changement, repartent de l'avant, ces informations devraient toujours être là. Le bouton Précédent est assez important car si vous laissez l'utilisateur revenir dans le navigateur , puis il va de l'avant dans l'application. Il se peut que nous ne soyons pas en mesure sauvegarder ces informations qu' ils viennent de stocker. OK, c'est cool. Allons-y. Nous allons parler de chapelure, mais je vais le faire dans une autre vidéo, donc je vous verrai dans l'autre vidéo. 19. Breadcrumbs: Parlons de chapelure. chapelure est une petite liste de liens de navigation qui aident l'utilisateur à voir la structure hiérarchique d' un site à partir de la page d'accueil. Cette façon de naviguer dans la structure du site est généralement appelée orientation. Ils ressemblent simplement à ça. Vous avez l' ordinateur et les haut-parleurs de l'électronique domestique, et je regarderais des haut-parleurs sur le site. On les appelle chapelure parce qu'ils imitent petits morceaux de pain qui avaient été laissés sur votre bureau. Et ils sont vraiment conçus pour être petits et ne jamais remplacer la navigation de niveau supérieur par ceux-ci, il y a juste des niveaux de navigation supplémentaires utilisés pour aider l'utilisateur à naviguer sur de très grands sites complexes et applications. Ils sont très simples à concevoir car ils ne diffèrent pas de cet exemple ici que je vous montre. Vous le verrez beaucoup sur les grandes applications de commerce électronique. Vous le verrez ici sur Amazon. Vous le verrez ici dans Best Buy. Encore une fois, ils montrent la structure hiérarchique de l' architecture d'information d' un site. Vous pouvez voir ici que je suis sur Amazon en ce moment et je regarde des jumelles. Et c'est me faire savoir que les jumelles et regarder partent de électronique à la maison puis des jumelles de caméra, des jumelles. Mais si je reviens sur les photos de l' appareil photo ici, laissez-moi simplement faire défiler vers le bas et prendre une autre ici. Allons voir les ordinateurs ici. Voyez comment cela change, par exemple, un moniteur regardera ce moniteur. Je vais en trouver un ici et il sera mis à jour. Donnez-moi juste une seconde. Laissez-moi cliquer sur l'un d'eux. Ok, donc vous voyez comment ça me fait juste savoir que je regarde des moniteurs, mais ça venait d'accessoires informatiques et d'appareils électroniques ici. Ce n'est pas que ça ne me montre pas mon historique de l' endroit où je parie que c'est juste de me montrer l'architecture du site. C'est la pièce maîtresse de tout ça. Parlons un peu utilisation et des meilleurs conseils pour eux. N'utilisez donc que de la chapelure pour les applications de grands sites avec beaucoup d'informations et de contacts. Contact. Idéal pour les grands sites de commerce électronique comme nous venons de le voir avec Amazon. Ils ne sont pas vraiment conçus pour architecture d'information au niveau des parents, comme un site de portefeuille ou un site Web basique Mom and Pops Star. La chapelure, encore une fois, ne remplace jamais cette navigation mondiale. Et la chapelure devrait afficher l'emplacement actuel et les sites. Encore une fois, la structure hiérarchique, et non l'historique des sessions. C'est là que je pense que certaines personnes se trompent. Cela ne montre pas où je suis allé. Il ne fait que montrer la structure du site. Si vous avez montré l'historique de l' emplacement de notre bin utilisateur et que cela va rapidement devenir long et déroutant avec beaucoup de répétitions. De plus, incluez toujours la page actuelle comme dernier élément de la piste de fil d'Ariane. Et cela ne devrait pas être un lien. Cela devrait ressembler à ça. Le fil d'Ariane, qui est la piste qui mène à la page actuelle sur laquelle vous vous trouvez. Toutes ces pages doivent être des pages de niveau parent de la structure hiérarchique, non des pages de niveau petit-enfant. Il s'agit de pages de niveau parent et de la page sur laquelle je suis sur les haut-parleurs ici qui afficher l' architecture d'informations au niveau du petit-enfant ou du chat sur le fil d'Ariane. Comme cela, cela peut devenir très granulaire, mais ils sont censés être au niveau des parents parce qu'ils me montrent où vit cet enfant ou où vit cet enfant ou où vit petit-enfant en relation avec les informations de niveau parent. architecture. Encore une fois, le fil d'Ariane devrait toujours commencer par un lien vers la page d'accueil ou le niveau supérieur, comme si vous êtes à la maison. Maintenant, Amazon ici, vous pouvez voir qu'il y a de l'électronique ici. Vous recherchez et regardez à partir de l'électronique. C'est donc à partir de l'électronique ici, pas forcément la page d'accueil où vous pouvez voir Best Buy ici n'a pas nécessairement Best Buy comme page d'accueil. Et ça va dans ce genre, ça va mieux. À mon avis, vous devriez toujours avoir la page d'accueil au début. Une fois encore. Donc, montrez un bon lien , un moyen de transport, comme montrer à l'utilisateur que vous pouvez cliquer sur ces différents liens et non sur celui sur lequel vous vous trouvez. Il n'y a pas de moyen de transport de liaison ici. Transmission claire de l' étape, de la zone utilisateur, vous pouvez voir les haut-parleurs ici un peu plus foncés, ou celui de droite, il n'y a toujours pas de moyen de transport de liaison clair, et on n'y a toujours pas de moyen de transport de liaison clair, ne sait pas exactement lequel est utilisé. à ce sujet. Il doit toujours être sur une seule ligne. Ne divisez pas la piste du pain en deux lignes. Si vous n'avez plus d'espace ici, supprimez simplement l'une des architectures de site de niveau parent. Nous n'avons donc pas besoin d'ordinateurs ici. Retournez simplement à l' électronique domestique et aux haut-parleurs. assez simple, c'est de la chapelure. Je vous retrouverai dans la prochaine vidéo, on va parler de pagination. Je vous y verrai. 20. Pagination: Très bien, parlons de pagination. pagination est donc un composant d'interface utilisateur de navigation de page qui aide les utilisateurs à naviguer dans de nombreuses informations et contenus qui ne peuvent pas être affichés sur un seul écran. Cette méthode divise donc tout le contenu en plusieurs pages et présente juste assez de contenu manière digeste limitée par écran. Il est le plus souvent utilisé pour les pages de résultats de recherche pour les grands sites de commerce électronique qui ont beaucoup de contenu ou de produits à offrir. Utilisateur qui souhaite parcourir et examiner ce type de produits et interagir avec ces produits. Et si vous envisagez d'utiliser un composant de pagination, vous devez disposer d'une fonction de recherche et bonnes options de filtrage pour aider l'utilisateur à réduire ce qu'il recherche. Ils ressemblent à ça. Ils ont la liste des pages qui contiennent chaque niveau de contenu. Je vais décomposer ça dans une minute. Certains d'entre eux vous permettent de passer devant une page. Mais le fait est que personne ne veut parcourir 22 pages en essayant de trouver ce dont il a besoin. Si vous avez une bonne recherche et un bon filtrage , ils peuvent réduire cette liste et trouver ce dont ils ont besoin. Parfois, les gens ne font que magasiner. Je vais vous montrer dans la même vidéo, ce qu'on appelle le défilement infini, qui est à peu près le tueur de la pagination. C'est comme si, vous savez, ne tue pas ça si vous magasinez quelque chose. Vous le verrez également dans Google. Si vous effectuez une recherche sur un site Google et que vous pouvez accéder à différentes pages ici. Et aussi vous le verrez assez simple comme ça où ils n'ont que des flèches et des chiffres. voici un exemple. Je vais regarder les chaussures DC ici. Je vais y regarder. Allons voir leurs hommes qui choisissent ici. Vous pouvez voir ici la pagination en haut. Ils l'ont également en bas. Je peux donc accéder à la deuxième page ici. Je peux aussi le faire en haut. Voici essentiellement la panne. Vous pouvez toujours voir la page actuelle sur laquelle vous êtes représentée en bleu ici. Si vous avez un numéro pour cette future page ou un numéro un, voici la page précédente. Les petites ellipses, les trois points ici, ne sont pas engagés. Il ne peut pas cliquer dessus, mais ça montre juste qu'il y a des pages entre 522. Cela aide à donner à l'utilisateur une indication de, wow, j'ai beaucoup à renifler trouver ce que je cherche. Encore une fois, vous avez ces flèches vers l'avant, la page arrière , les touches, les boutons ici. Et puis vous avez ce formulaire Goto, qui, si vous essayez d'accéder à la page 17, c'est un moyen plus rapide d'y arriver. Il suffit d'entrer et de mettre le numéro de page dans lequel vous vous trouvez , d' appuyer sur Entrée, puis il passera à 17 ici. Vous verrez que c'est aussi assez courant, c'est la case à cocher ou le menu déroulant ici. Vous obtiendrez ainsi un certain nombre de contenus ou de types de produits affichés par page. Vous pouvez donc l'étendre de 15 à 50. Cela vous montrera les résultats. Combien sont affichés en ce moment, nous en avons un à 15 et ajoutons vos résultats de recherche. Il y a 324 produits affichés sur 22 pages avec 15 produits par page. C'est un peu comme ça que ça fonctionne. Vous verrez beaucoup de pagination couramment utilisée lors de l'intégration. L'intégration est un moyen visuel d' informer votre utilisateur, ou désolé, vos nouveaux utilisateurs sur le fonctionnement de votre application ou ce à quoi s'attendre dans votre application. Et nous l'utilisons sur une application sur laquelle je travaille où vous obtenez un nouvel utilisateur, ils se connectent. Et ces trois petits points ici appelés pagination. Et l'utilisateur appuiera sur le bouton suivant ici, appuyez dessus, et vous verrez que le point suivant deviendra sombre. Encore une fois, cela donne à l'utilisateur la même chose dont nous avons parlé, quels sorciers, cela lui donne un sentiment d'attente. Combien d'écrans vont traverser le temps, l' emplacement, la progression ? Et ils peuvent passer par chacun d'entre eux. Allons décomposer ça pour une intégration très rapide. J'ai toujours inclus un bouton Ignorer. Lorsque vous effectuez l'intégration, il est préférable de garder cela à trois à cinq étapes. Ne rendez pas cela trop intimidant pour les nouveaux utilisateurs qui entrent dans votre produit qui veulent simplement utiliser leur produit. Juste trois à cinq étapes. Restez simple, mais gardez toujours un bouton Ignorer et généralement en haut à gauche ou en haut à droite. Et cela permettra à l'utilisateur de sauter tous ces écrans. Ensuite, vous verrez la ventilation de la pagination ici. Nous avons donc cinq écrans. Chaque cercle représente un écran. Un cercle rempli représente les étapes sur lesquelles se trouve l'utilisateur, nous donne une idée de l'emplacement. Et les écrans de note représentent les écrans que l'utilisateur a déjà vus et terminés. Et encore une fois, cela peut faire face à des progrès. Allons donc voir le défilement infini. défilement infini remplace la pagination. Il permet au nouveau contenu de se charger lorsque l'utilisateur fait défiler la page vers le bas. Cela facilite grandement la navigation dans le contenu plutôt que de devoir cliquer comme page par page. Encore une fois, comme un meilleur prix. défilement infini peut être addictif. Vous êtes comme continuer de faire défiler et faire défiler les nouveaux produits et les nouveaux produits. défilement infini est toujours meilleur que la période de pagination. Personne ne veut cliquer sur des centaines de pages pour trouver ce dont il a besoin. Vous pouvez donc voir les chaussures DC ici, il y avait cette pagination. Allons voir Nike qui utilise le défilement infini vers le bas, faisant défiler les chaussures DC. Et contrairement à nous, cool, j'arrive au fond et je dois cliquer et regarder. Il est en cours de chargement. Il faut revenir à nouveau par défilement, revenir en bas. Vous pouvez en quelque sorte vous sentir que ce sentiment est un peu intimidant. Il fait juste des allers-retours, des allers-retours. Regardez sur Nike le fait. Allons voir les chaussures Nike. Allons voir quelques Jordans, certains défilant vers le bas et regardons quand j'arriverai à la fin. Je vais vraiment me laisser aller, laisser partir. Va juste voir des hommes, j'ai besoin de produits infinis ici. Désolé. Allons voir choisir. D'accord. Maintenant, regardez-les faire défiler les chaussures ici, boum, boum, boum. Voyez ce petit tour. Parchemin infini. Les montres sont si rapides. Mais voyez-le, je peux voir mon curseur sur le navigateur ici se déplacer vers le bas. Pas très bon Internet, mais vous avez vu ce petit fileur là-bas. Et je vais juste continuer à continuer pour toujours, et ça va continuer toujours, et ça va charger des produits et à charger les produits. Et je peux juste voir ici, naviguer jusqu'à ce que mon petit cœur désire et ne rien acheter, mais juste, je peux juste regarder ça. Ok, donc c'est un défilement infini en quelques mots. Et puis il y a ici un site appelé Gymshark, et ils utilisent un mélange des deux. Si vous faites défiler un short vers le bas ici. J'arrive au bout de tous les courts métrages ici. Je peux charger, charger plus, faire de l'art, les voir tous et charger plus. Un peu ce défilement infini ici je charge plus de produits. C'est une combinaison des deux là que vous pouvez voir. Excellent résumé. Utilisez toujours pagination pour les écrans d'intégration. Ils sont géniaux. Ils sont utilisés pour afficher de nombreux contenus et produits. Si vous pouvez éviter la pagination, utilisez toujours un défilement infini et assurez-vous toujours d' avoir une fonction de recherche et bonnes options de filtrage. Très bien, cool. Nous avons donc terminé pagination et je vous verrai sur la prochaine vidéo, la dernière nous parlerons d'icônes et de photos. Je vous y verrai. Au revoir. 21. Icônes: Parlons d'icônes et de photos. Je vais diviser cette section en deux vidéos. Je vais d' abord parler des icônes , puis je vais parler de photos. Il suffit de commencer. Les icônes de haut niveau sont des illustrations très simples de sujets ou d'actions. Ils sont utilisés partout. Ils aident les humains à comprendre les points communs des actions de navigation et contextes utilisés par les logiciels de site Web, panneaux de système d'exploitation. Ils sont géniaux parce qu'ils sont universels. Et encore une fois, compris par la plupart des gens et ils comblent également les barrières linguistiques pour former une icône d'un train est compris n'importe où dans le monde. Certaines icônes comme Accueil Partager, Imprimer, mettre en pause, lire le message suivant, comme ajouter fermer, supprimer des profils, rechercher. Ils sont tous tellement communs qu'ils n'ont pas besoin d'explications comme si les gens savent exactement ce qu'ils font quand et où qu'ils les voient. En général, on peut penser à deux types d'iconographie différents. Vous pouvez penser à plus d' action, c' est-à-dire que les gens vont les utiliser. Vous pouvez penser à plus d' illustration, qui sert des objectifs de communication. Lorsque nous faisons référence à l'expérience utilisateur, icônes faisaient principalement référence à des icônes utilisées par les gens. Les icônes les plus orientées vers l'action ont tendance à être moins illustratives et celles qui servent objectifs de communication sont plus illustratives et celles qui vivent davantage du côté graphique des choses. Bien que de nombreux concepteurs UX créent les deux types d' icônes pour mieux servir la communication d' un écran spécifique OU et la convivialité d'une application ou d'un site Web. Encore une fois, en général, c'est une bonne pratique de ne pas rendre les icônes d'action très illustratives. Ces icônes doivent être très simples, faciles à numériser, faciles à comprendre. Encore une fois, les avantages des icônes. Il est beaucoup plus facile à numériser et à lire d'un coup d'œil, et textes réels remontent à cette offre de mots magiques. Il y a un peu de retours comme les images disent 1000 mots, même avec les icônes. Ils peuvent communiquer bien plus que des mots. Comme je l'ai déjà dit, l'universel compris par toutes les langues. Ils servent de cibles d'action grises pour les interfaces utilisateur. Des choses sur lesquelles les gens peuvent puiser. Vous pensez à quand nous avons fait l'onglet, les barres d'onglets. Nous avons eu le fico ici sur Instagram. Vous pouvez voir qu'ils ont cinq icônes en bas pour la barre d'onglets et trois pour la barre de titre. J'ai dit qu'ils avaient des icônes qui servent de cibles d'action tout au long de leur application. C'est génial. Vous ne seriez pas en mesure intégrer tout cela avec du texte. L'icône, elle parle en quelque sorte plus que beaucoup de cas que de texte. Ils nous aident à économiser de l'espace et de l' immobilier à l'écran. Ils sont visuellement attrayants et aident à transmettre des types de marques spécifiques. Vous pouvez influencer votre marque à travers le style de vos icônes. J'ai mis tout un tas d'icônes communes ici. Je ne les examinerai pas tous, mais je vais juste passer par quelques uns plus courants. Mais vous savez, des choses comme la maison et la modification et la recherche, profil et le menu et la pause et les favoris et jouer et supprimer et ajouter un message et des erreurs et des microphones et des paniers, favoris, calendriers, développer, supprimer, rogner les notifications. Sur la base de toutes ces icônes que vous pouvez vous demander, qu'est-ce que toutes ces icônes ont en commun ? ils sont couramment utilisés dans plusieurs expériences utilisateur et applications. Donc, si vous prévoyez d' utiliser l'un d'entre eux, ne réinventez pas la roue. Utilisez la forme la plus populaire de cette icône, car il est fort probable que les utilisateurs aient déjà vue et utilisée dans d'autres applications. Vous pouvez donc vous attendre à ce qu'ils sachent exactement comment elle est, ou quelle est l'icône, comment l'utiliser et ce qu'elle fait dans votre UX. Concernant les étiquettes. Si vous n'êtes pas sûr qu'un utilisateur comprenne ce que fait votre icône ou sache exactement ce qu'elle est d'un coup d'œil, ajoutez-y une étiquette. Vous pouvez voir que c'est un portefeuille. Nous ajoutons mon portefeuille. Ce texte seul indique déjà que c'est mon endroit, c'est un endroit pour moi et c'est des portefeuilles où je vais mettre mon argent, où ce portefeuille pourrait ne pas être aussi précis sans le texte. Vous pouvez également ajouter une info-bulle comme nous l'avons fait ici avec l'icône qui permet d'indiquer ce fait l'icône lorsque vous la survolez. Mais encore une fois, il ne fonctionne que pour les appareils de bureau et ne fonctionne pas pour les appareils mobiles et tablettes. Il ne devrait donc pas s'agir de la principale façon de communiquer une icône abstraite. Les bonnes pratiques, comme je l'ai déjà dit, ne réinventent pas la roue. icônes familières fonctionnent mieux. Utilisez des icônes qui sont reconnues et vues auparavant. Ne les utilisez pas trop, ils sont trop décorés avec eux car cela peut diluer leur but. S'ils deviennent plus illustratifs ou trop utilisés, ils risquent de ne plus servir de cibles d'action et l'utilisateur peut penser que c'est plus décoratif. Utilisez la règle des 5 secondes. Si vous testez vos icônes et qu' il faut plus de cinq secondes à quelqu'un pour réfléchir à ce que fait une icône ou pour scanner l'icône, cela ne fonctionnera probablement pas ou n'est pas assez efficace. Gardez vos icônes simples. Encore une fois, ne les illustrez pas trop. Ensuite, testez vos icônes avec les utilisateurs, vérifiez si vous avez besoin d'une étiquette ou non. Vous venez de montrer votre icône, vous demander de l'utiliser, à quoi pensez-vous que cette icône se trouve ? Dans la deuxième partie de cette question, que pensez-vous qu'elle fait ? Ensuite, pour les appareils mobiles, décide d'avoir au moins 40 pixels 40 pixels pour une cible de prise appropriée. Et permettez-moi de vous montrer les meilleures pratiques pour votre zone cible à l'aide d'une petite icône. Encore une fois, nous utilisons de petites icônes tout le temps car elles sont efficaces, faciles à numériser, elles n'encombrent pas votre interface utilisateur. Dans la plupart des cas, assurez-vous que votre clip ou cible de frappe est plus grande que l'icône elle-même. Cela facilite généralement l' interaction avec l'icône et l' utilisateur n'a pas besoin de doubler, de doubler, de cliquer ou de toucher dessus. Si vous avez une icône ici, ne créez pas simplement l'icône, le tapotement cible, c'est-à-dire la zone cliquable et tapable. Donc, juste le petit X ici. Le rectangle ou carré transparent rose représente donc notre cible technologique. Si nous mettons ici une icône vraiment petite, une fois que le robinet cible au moins 50 pixels par 50 pixels, l'icône peut être plus petite que cela, mais la zone de frappe est plus grande. Je le vois beaucoup avec les élèves que j'enseigne. Je suis les icônes à travers leurs applications ont des épaisseurs de trait différentes et cela crée un langage visuel incohérent peut même rendre l' interface un peu bâclée, à mon avis. Gardez donc la même épaisseur sur vos traits. Vous pouvez voir qu'il y a un autre trait pour le message. Même moi, je peux dire qu'il y a un autre coup pour la tête du profil. Ou si vous regardez ici à droite, ils ont exactement la même largeur de trait. Nous l'avons vu dans les meilleures pratiques pour les barres d'onglets. Souvenez-vous juste de ne pas mélanger votre AVC, ne faites pas de AVC. Les icônes de contour sont des icônes de contour et des icônes remplies. Utilisez l'un des autres, mais ne les mélangez généralement pas car cela leur donne plus de poids visuel à celui qui est rempli par rapport à celui qui est décrit. J'ai généralement tendance à utiliser plus de contours caressés comme celui-ci ici. C'est pour cette raison qu'il s' agit là de cibles de claquement. Ils sont généralement exploitables ou peuvent servir de destinations. Et nous voulons souligner et complimenter notre contact. Ce ne sont que des moyens de naviguer et de faire les choses que notre application. Et s'ils sont trop lourds, ils peuvent détourner l'attention du contenu qui se trouve sur la page. J'aime généralement faire les grandes lignes. Ils sont également plus courants dans les applications d' expérience utilisateur. Allons chercher des choses à faire et à ne pas faire. Encore une fois, gardez vos icônes cohérentes et vous pouvez voir ici qu'elles ressemblaient à des traits cohérents de la famille. Ils utilisent tous décrits ici à droite. Ça ne ressemble pas à une famille. Vous avez des bords durs. Vous avez des icônes aux bords arrondis. Ils sont remplis, caressés, ils sont un peu partout. Encore une fois, gardez-les simples et modernes. Ils auront l'air utilisables, mais ils dureront également l'épreuve du temps. Lorsque vous obtenez plus d' illustrations comme celle-ci et que vous mettez plus de couleur dans une icône, elles peuvent paraître plus décoratives et moins utilisables, et elles ne résisteront pas non plus à l'épreuve du temps. Simple fonctionne toujours, toujours efficace. Plus vous ajoutez des éléments, ajoutez des illustrations et ajoutez des éléments graphiques. plupart du temps, nos tendances de l' interface utilisateur se développent au fil du temps ou nos langages visuels se développent et ces choses peuvent durer l'épreuve du temps où cette flèche ici, sera une flèche pour toujours. Comme une flèche belle, propre, simple et fine, durera éternellement. Assurez-vous que vos icônes ont la même taille. Et voici le vrai botteur visuellement. Vous pouvez voir ici que nous avons, j'ai cette ligne rose ici. Surtout toutes les icônes sauf la note musicale. Ils s'intègrent dans cet espace vertical. Lorsque vous regardez le deuxième ici, ils ont l'air exacts. Ils ont littéralement l'air de taille égale visuellement. Bien que ce ne soit pas le cas, vous pouvez voir les lignes roses. Et si vous regardez celle qui se trouve à droite ici, nous avons réduit l'icône musicale corresponde à la hauteur verticale de cette ligne rose. Et lorsque vous regardez en bas ici, cette icône musicale est juste un peu petite et un peu plus haute que les autres icônes. Et c'est très, très subtil, mais ces choses sont importantes. C'est comme si tu devrais transpirer les détails ici. Visuellement, c'est toujours mieux que de paraître précis. Vous pouvez donc regarder précisément ici, mais merci, devrait être ajusté plus visuellement que précisément. votre mieux, allons dans des endroits pour trouver des icônes. Votre meilleur ensemble d'icônes libres de la plus grande série d'icônes gratuites au monde s'appelle Noun Project. Je l'ai ouvert ici. Noun Project est génial. Allons voir les icônes de crème glacée. Bon, regardez combien. Je vais un peu dézoomer pour que vous puissiez voir qu'il y a juste des tonnes d'icônes de crème glacée et que vous puissiez en montrer plus. Je pense que c'était 200 autres ici. Tout est gratuit, super facile. Disons que nous aimerions ce petit camion de crème glacée ici. C'est plutôt mignon. Je veux cette icône. Téléchargement basique. Allez sur SVG. Ce site est tellement génial et gratuit. Je suis comme parmi tous les sites que j'utilise et qui sont gratuits, je suis en fait comme si je serais heureux de payer un coût mensuel à Noun Project. Je ne sais pas, environ 20$ pour utiliser tous ces sites Web, ces icônes signifient que c'est génial. Je vais le prendre gratuitement. Ne vous méprenez pas. Hum, mais oui, heureux de les payer. Je l'utilise si souvent. Vous voyez, je viens de télécharger l'icône de crème glacée. Je l'ai fait glisser dans l'outil de conception que j'utilise appelé Figma. Je vais sélectionner cette icône et la vérifier. Je peux l'utiliser très rapidement dans ma mise en page. Je vais aller de l'avant et habiller un peu ça. Réduisez cette taille. Il s'agit d'une forme vectorielle, donc je peux entrer ici et je peux ajouter de la couleur à cette icône ici. Je ne sais pas, allons le rendre rose. C'est comme un truc de taille réduite ici. Super cool. Donnez un peu d'échappement. Un petit mouvement ici. Rendez ça bleu. Retournez ça. Très bien, je ne serai pas trop fou ici, mais vous voyez l'idée. Vous pouvez obtenir tout un tas d' icônes gratuites ici et regarder ce mignon petit propriétaire de camion de crème glacée. Je vais aller de l'avant et tatouer ce petit tatouage sur mon bras. Très bien. D'autres sites que vous pouvez consulter sont l'ICANN eight.com. Ils ont un grand ensemble d'icônes gratuites pour qu'elles deviennent plus illustratives ici. Mais ils sont vraiment mignons et gentils. Vous pouvez voir ceux ici. Ils ont également des collections avec eux, vous pouvez donc cliquer dessus et vous pouvez la télécharger. Ils ont également du HTML intégré dans celui-ci. Et ensuite, vous pouvez aller voir l'autre collection ici par cette personne. Ensuite, l'autre qui est vraiment soigné ici s'appelle, vous dessinez ou désolée, OnDraw. Celui-ci est génial. Ce sont donc toutes des illustrations vectorielles. Et ce qui est vraiment génial celui-ci, c'est que vous pouvez rechercher où vous le souhaitez. J'ai donc déjà cherché de la nourriture. J'espère que je vais vous donner faim. Vous pouvez les modifier en direct n'importe quelle couleur. Je change de couleurs sur la roue chromatique ici et elles sont toutes mises à jour. Allons donc mettre un peu de rose haut là-dedans. Je vais regarder ce mignon , ce que le chien. Ok, et je vais télécharger le SVG, boum, téléchargé, faire glisser ça dans Figma. J'ai eu un joli petit regard sur ce mignon petit chien ici. Oui, j'ai eu ce mignon chien. Il est mangé. J'ai un joli petit camion de crème glacée ici. Laissez-moi y aller. Repositionnez cela. Vraiment rapide. J'ai la livraison de ma crème glacée. Il va donner de la crème glacée à mon chien , puis il va cuisiner pour des friandises. Je veux probablement aller se promener par la suite. Mais oui, vous pouvez voir beaucoup de cool sur dessiné est vraiment, vraiment cool en ce sens que vous pouvez changer ces couleurs en direct et mettre les couleurs de votre marque et ensuite aller chercher ces icônes. OK, cool. Je vais terminer avec icônes et je vais faire une autre vidéo où nous allons approfondir les meilleures pratiques sur les photos et les images et sur la façon d'y établir des stratégies. Et je vous verrai sur l'autre vidéo. voit bientôt. 22. Photos: Parlons de photos et d' images, et c'est un cliché, mais les images parlent plus fort que les mots et l'imagerie ne se limite pas à la décoration. C'est un outil super puissant vous aider à communiquer votre contenu, objectifs, votre produit et votre marque. Les images sont utilisées pour définir la voix d'une marque et créer le ton de la marque. Et une bonne photo peut transmettre plus d'informations que des paragraphes de texte. plus important est qu'une bonne image puisse aider à éduquer ou transmettre l'objectif de communication beaucoup plus rapidement que la lecture d'un utilisateur. Et la plupart du temps en UX, ne présumez pas que les gens vont lire quoi que ce soit. Mais les gens n'aiment même pas lire. Ils aiment peut-être lire des livres, mais quand il s'agit d'appliquer, ils veulent simplement entrer, faire ce qu'ils veulent et partir. Et si souvent ou non, j'ai des mots sur l'application décrivant ce qu'il faut faire et nous le testons. Et les gens aiment juste être un jeu d'enfant, c'est une bonne chose. Nous ne voulons pas qu'ils aient l' impression de vouloir s'arrêter tout lire et de suivre les instructions. Ils voulaient juste entrer et faire tout ce que fait l'application et partir et continuer leur vie. Les images aident beaucoup dans ce sens à définir l'objectif de communication ou communiquer quelque chose de plus avec une photo, puis un tas de textes revient toujours à ce mot magique, l'offre, le temps et l'énergie dépensés. Voyons donc quelques images et la façon de penser à l' imagerie, de la catégoriser ou de la mesurer, c' est que les images évoquent des émotions et des pensées. Et ces émotions devraient être liées à un certain niveau d'adjectifs. Et ces adjectifs devraient être utilisés pour décrire votre marque. Si vous êtes une banque, vous pourriez vouloir des adjectifs semblables, vous savez, dignes de confiance et apaisants. Et si vos petits enfants jouent à la marque maison, vous voudrez quelque chose d'amusant et d'énergie. Et il y a différentes façons communiquer ces différents styles où, si c'était calme, vous voulez que les couleurs bleues entrent dans une théorie des couleurs. Les couleurs bleues et si c'est énergique et amusant, vous voulez des couleurs vraiment vives roses estivales et des trucs comme ça. Mais regardons quelques photos et parlons du type d'émotions qui se dégagent de ces photos. La deuxième partie est que les photos peuvent également susciter des pensées. Si vous regardez cette photo ici, elle a un sentiment de calme, même dans l'aéroport où les gens se brouillent. Cela a une vraie sensation de calme et c'est grâce à la couleur orange qui aide à calmer la photo. langage corporel de cette personne a l'air super détendu, juste se rafraîchissant sur une chaise, a mis les pieds sur ses bagages. On dirait un peu d'ennui comme s'il a l'air d'attendre. Et aussi cela évoque une réflexion autour de vous, est-ce que cette personne a raté son vol comme si son avion partant et vous aimez, oh mec, je dois comprendre le prochain vol ou est-ce qu'il vient juste d'arriver à la au bon moment et il n'y a qu'à attendre. J'étais censé prendre cette photo. Regardez ces deux enfants et regardez ce visage de petits enfants comme ça, c'est pure joie qui sort du visage de ce gamin. Il est juste adoré. Il n'a probablement jamais pu faire ça. Et puis ils ont fait cette séance photo. Vous êtes comme, oui, allez-y et prenez simplement les oreillers et les nazis de chèvre, lui et son ami, ou peut-être que c'est son frère, peut-être sa sœur ou quelque chose comme ça. Ils ont une explosion. Vous pouvez donc penser cette photo, c'est que leurs visages dégagent des émotions. Et c'est passionnant, basé sur le langage corporel et le mouvement. Il y a beaucoup d' action sur cette photo, l'heure de la journée, peut-être le matin ou l'après-midi. Il a l'air super amusant en fonction du contenu. On vient de se joindre à eux. Vous pouvez également y penser. Est-ce ainsi que les enfants jouent partout, ou s'agit-il uniquement de certaines cultures ? Et puis cela soulève un autre point que certaines photos et photos que nous choisissons peuvent combler les normes culturelles, ce qui signifie quelque chose de clair qui fonctionne dans n'importe quelle culture. Ou ils ne le font pas. Ils ne fonctionnent que dans certaines cultures. Lorsque vous avez un produit international, vous devez être conscient des normes culturelles et de choses semblables. Celle-ci est intéressante ici parce que vous avez l'impression de travailler à la maison. C'est terne parce que l'utilisation de couleurs grisâtres fortes, c'est presque comme un ton mono. Il n'est pas vraiment lumineux. C'est un peu plus un ton tiré en arrière des couleurs, vraiment détendu ici en fonction du mouvement du corps. Mais il y a ce sentiment de banal ou de manque d'incitation dû au travail à domicile. Et évoque ce type de pensée est cette personne, est-ce qu'ils veulent sortir ou ils sont coincés à la maison ? Les chiens aiment probablement que dès que tu te lèves et que tu quittes la pièce, je vais déchirer cet endroit. Mais oui, ce ne sont que quelques exemples de la façon dont vous pouvez tester vos photos comme celle-ci. Par exemple, si vous êtes vraiment intéressé par le développement de la marque, vous pouvez obtenir des photos comme celle-ci et demander aux gens quel type d'émotions et de pensées tient-ils de ces photos ? Et voyez s'ils sont liés aux adjectifs de votre marque dans les objectifs de communication de votre marque. Examinons quelques bonnes pratiques à faire et à ne pas faire. Donc, si vous avez une photo et encore une fois, nous pensons stratégique ici, comme les photos sont là pour nous aider à communiquer nos objectifs. Ce ne sont pas seulement quelque chose que nous sortons de nulle part et Dieu, il suffit de jeter une photo sur la chose. Vous savez, ils sont plutôt méticuleux. Ils sont là pour nous aider à communiquer cela. Et dans ce contexte, nous voulons communiquer une réunion en ligne. Ce que vous voulez faire, c'est faciliter la présentation du concept de votre image. Si vous regardez à gauche, vous pouvez dire qu'il s'agit d'une réunion en ligne. Ils font FaceTime. Il y a un minuteur en jeu ici. Celui de droite. Vous devez rechercher ce concept. Est-ce qu'ils ont une réunion en ligne ou est-ce qu'elle a vraiment aimé ? J'ai appris à connaître le dentifrice et elle regarde un tas de dentifrice, c'est comme ça pour 299 est fantastique. Quand le commander demain ou quelque chose comme ça ? Mais vous comprenez un peu le point ici. Soyez prudent d'utiliser des photos de stock de personnes parce que vous vous rencontrez si vous voulez communiquer dans ce cas, l'exemple est que la réunion de bureau devrait ressembler à une vraie réunion de bureau, réunion. Les photos ont tendance à avoir ce qui peut ressembler, pas un contexte réel. Ou même des personnes qui ressemblaient à des acteurs et des actrices. Celui de gauche ressemble donc une réunion et il y a une réunion qui se déroulerait tous les jours. Juste là. Ils ont des idées écrites sur des notes autocollantes. Ils partagent leurs connaissances, c'est comme une bonne réunion UX ici. Peut-être que cette personne est dessinée comme un chien ou un cornet de crème glacée ou quelque chose comme ça. Je ne sais pas. Je ne sais pas. J'ai assisté à de nombreuses réunions ma carrière et je ne suis jamais entré dans une réunion et je n'ai jamais vu tout le monde me faire ça. Souriant ce halo, monsieur, vous voulez une bonne tasse de café avec moi ? Ce type est souriant. On pourrait le dire simplement, il a l'air d'être en stock. Ce n'est pas le cas, ce sont de vraies personnes évidemment, mais ce n'est pas le cas, ça ne ressemble pas à une vraie réunion. Il a l'air configuré. Utilisez donc définitivement des contextes réels et cela aide à rendre votre produit plus proche de l'humain et plus naturel. Très bien, donc mon préféré est réfléchir à différentes façons de photographier vos produits. Si vous avez un produit que vous vendez. Exprimez la personnalité liée à votre objectif de votre produit. Et montrer de la personnalité aide toujours à invoquer cette émotion. Et l'émotion contribue à créer un impact et un sens. Et c'est plus authentique. Vous vous souviendrez d'une photo qui évoque des émotions. Et les études ont montré cet accord. Vous vous souviendrez de choses plus uniques et qui ont suscité une certaine émotion, qu'il s'agisse de nostalgie ou de quoi que ce soit. Plus qu'un simple plan. Obtenez des photos de personnes qui font choses intéressantes avec vos produits plutôt que ça, ennuyeuses, comme, voici mon maquillage. Sur un comptoir en granit. Comme si c'était génial ici. Cela montre le FADH, il montre la personnalité humaine. Ils font quelque chose d'unique. C'est juste qu'il y a beaucoup de choses géniales cette photo ici pour l' exemple d'une ligne de maquillage. OK, Cool. Moins, c'est plus. Voici donc un événement en montgolfière que nous faisons parfois trop de contenu signifie plus de temps. Quelqu'un doit scanner et regarder toutes les informations qui se trouvent ici. Et encore une fois, cela a trait à un prix abordable. Bien que cette photo soit cool, comme regardez, il y en a un petit cochon ici. Il contient des éléments intéressants. Mais encore une fois, il faut plus de temps à regarder et à regarder cette chose sur le lapin énergisant ici plutôt qu'une simple montgolfière. Comme si la simplicité fonctionne le mieux. Nous en avons parlé un peu avec des boutons et aussi quand nous avons parlé d'ombres. Lorsque vous placez du texte sur une image, assurez-vous simplement qu'elle est lisible et facile à lire. N'ajoutez pas d'ombres sur le texte, mais manipulez la photo pour rendre les textes vraiment faciles, n'est-ce pas ? Vous pouvez donc voir sans cela, nous avons un noir. Il commence en noir en bas et il est 100 % transparent en haut. Nous pouvons positionner cela comme nous le voulons. Cela peut aller à mi-chemin, je peux couvrir la photo, mais vous pouvez voir à quoi elle ressemble sans elle. Vous ne pouvez pas lire ce texte. Si vous regardez à droite ou que vous y allez nous ajouterons simplement une ombre portée aux textes. Cela ne fonctionne pas. Cela donne l'air désuet. Ce n'est pas une approche moderne la typographie et je vais taper des pairs. J'adore la typographie. Et oui, juste la règle générale, n'ajoutez jamais d'ombre sur les textes comme manipuler d'autres éléments autour de lui pour rendre le texte beau. Utilisez une bonne qualité, mais encore une fois, soyez prudent du temps nécessaire au chargement de la photo. Essayez donc de conserver taille de votre photo sous un mégaoctet pour le Web. Encore une fois, rien de plus que cela retardera le temps de chargement. Et assurez-vous également que la photo a une bonne résolution. Il s'agit donc d'un équilibre entre qualité des photos et le temps de chargement. Et vous pouvez voir ici que c' est une superbe photo ici. Il est de bonne qualité. Et puis vous pouvez voir ici, M. Warhol mange un cheeseburger, et c'est une photo super pixélisée ici. Nous voulons donc des photos, des images sous un mégaoctet pour le web. Oui. Une chose que vous pouvez faire pour améliorer la qualité et le temps de chargement est d' utiliser un site de compresseur. J'utilise celui-ci s'appelle compresseur I0. Et ce qu'il fera, c'est qu'ils prendront une photo qui contient une quantité décente de mégaoctets et cela réduira considérablement la taille . Regardons donc celui-ci. Il possède 1,1 mégaoctet. Très bien, on dirait cette photo ici. Allons faire glisser cela et voyons à quel point la compression peut faire. Comme si je l'ai pris d'un mégaoctet à 130 kilo-octets. Vous pensez probablement : Eh bien, Aaron, on dirait probablement des saloperies. Allons comparer les deux. Je vais ouvrir une autre fenêtre ici, accéder à mes téléchargements. Voici celui que nous venons de réduire. Il est maintenant à 140 gigaoctets. C'est génial. Voici celui qui est de 1,1 mégaoctet. On ne peut même pas faire la différence. Très bien, vous pouvez donc toujours utiliser ce compresseur pour que je l'utilise beaucoup pour des ressources avant de le confier à n' importe quelle ingénierie ou de le mettre sur n'importe quel site sur lequel je travaille. Je vais juste les jeter dans l'outil compresseur et les compresser. Une autre chose est que c' est assez évident, mais n' étirez jamais vos photos, comme remplir la photo à la place, nous avons zoomé sur cette photo plutôt que le grec recadrer cette photo et la remplir. Plutôt que de faire quelque chose comme ça, tout ce dont nous avons besoin pour remplir les formes. Laissez-moi juste, laissez-moi l'étirer comme ça et l' étirer pour que vous puissiez voir celui droite semble très évidemment s'étirer, alors évitez ça. Une autre chose que vous pouvez faire est plutôt cool, c'est que vous pouvez ajouter superpositions de couleur de couverture à une photo pour la rendre plus marquée ou pour donner à la photo un peu plus de traitement visuel. Vous pouvez utiliser l'une des photos des éléments de votre marque ici. Supposons que notre marque soit un bleu sarcelle et l'orange, comme l'exemple ici. Et je vais le faire très rapidement. C'est assez simple. Ici Simon Figma. Je vais juste prendre un rectangle. Et allons prendre un rose. Il y a quelque chose que vous pourriez faire ici. Il y a des filtres de transparence que vous pouvez utiliser. Une chose que je pourrais faire, c'est que je peux simplement rendre le rose transparent. C'est ce que je fais en ce moment. Il obtient ce que j'appelle l'amidon, là où on n'a pas le, on commence à perdre le rose et la photo devient féculente ou terne. Et trop de rose, on ne voit pas la photo. Donc, si vous accédez vos paramètres d'opacité et que vous multipliez ici. Multiply apportera la photo. C'est une opacité de 100 % en ce moment. La multiplication apportera toutes les couleurs de la photo, cette obscurité de la couleur dans cette couleur rose ici. Cela le rend donc mieux superposé. Vous pouvez faire toutes vos photos comme celle-ci. Disons simplement, je ne sais pas, vous aviez une marque qui est uniquement en noir et blanc et que vous pouvez faire quelqu'un qui est rose ici. Vous pouvez même vous amuser un peu plus. On pourrait faire comme si la moitié est rose. Vous pouvez même faire des effets photo là où nous le faisons comme ça. Il suffit de créer des intérêts visuels avec vos photos. En parlant d'intérêts visuels, vous passerez à la prochaine astuce. Ainsi, vous pouvez masquer votre contenu photo et éléments graphiques de la publicité pour le rendre plus branding ou plus excité qu'encore une fois, c'est plus artistique, mais regardez, ils ont pris ce type est une photo, ils lui ont demandé de sortir. Ils ont fait un peu de couleur, un peu de noir et blanc. Ils avaient des gribouillis. Ils l'ont mis sur du papier texturé, quelques formes ici. Il était quelques textos et quelques larmes. Ils ont eu ce type ici à droite. Je ne sais pas. Ils lui ont juste coupé les yeux. C'était plutôt étrange, mais ils ont ajouté du texte et des éléments graphiques de la nature et quelques illustrations de livres, tirages de livres à l'arrière, des gribouillis et autres choses. C'est vraiment sympa. C' est vraiment sympa. emballages presque chocolatés sont en cours ici. Mais c'est une autre façon de traiter les photos. Il n'est pas nécessaire que tu sois juste une photo carrée. Vous pouvez placer des photos et différentes formes de conteneurs. Ils peuvent être sous n'importe quelle forme. Vous pouvez créer différentes formes d'une même photo. J'ai déjà fait ça sur un site air plutôt cool où nous avions une photo ici et nous avons juste copié la photo, recadrée à l'endroit où elle ressemblait à droite. Et nous avons créé une autre forme , en avons ajouté une autre. Nous avions deux rectangles ici. Vous pouvez ajouter différentes couleurs. Vous pouvez ajouter l'orange et nous avons eu un peu de vert. Nous avons donc eu la photo en direct et nous avons eu quelques clips. Les photos présentent-elles toujours d'autres formes ? Et nous avions des couleurs sur ces formes et cela a rendu un peu plus excitant. Il en va de même pour ça. Vous pouvez masquer votre photo et la placer au-dessus des formes. Vous pouvez voir le carré ici dans le panneau assis au-dessus de la place. Vous pouvez également utiliser un rectangle ou une forme de triangle. Et encore une fois, tout ce que nous faisons, c'est que nous prenons une banale, nous venons de voir une photo normale de quelque chose. Et nous sommes passionnants en y ajoutant ces touches visuelles. Très bien, cool. Voyons donc les ressources d'images gratuites. Mon préféré est donc Unsplash. Vous pouvez obtenir n'importe quoi ici. Revenons à notre crème glacée. Vous pouvez aller voir toutes ces images ici et faire ça a l'air bien. Vous pouvez l'attraper et le télécharger gratuitement. Téléchargez-le et nous l'ajouterons dans Figma va probablement venir en gros ici. Permettez-moi donc de zoomer un peu plus loin. Et il y a votre photo. Bonne photo de haute qualité. Et la meilleure partie, gratuite, gratuite. OK, c'est cool. Un autre sur lequel vous pouvez accéder est appelé pixels ici, PEX, ELS. Et encore une fois, vous pouvez rechercher de la crème glacée, film entier qui vous donne faim, toutes des photos gratuites. Vous pouvez télécharger la même chose que je viens de faire avec Unsplash. L'autre est Pixabay. Même chose. Allez-y et mettez des coups de crème glacée et du bada bing, du bada, du bada, du boum. Ensuite, quand j'utilise assez souvent ça s'appelle ice stock.com. C'est environ 12 dollars par photo. Mais ils ont des photos, des illustrations, des animations, tous différents types de photographies et d'éléments graphiques. Encore une fois, elles sont faites professionnellement, donc vous trouverez peut-être ce que vous cherchez dans Unsplash. Mais parfois, vous avez besoin d'une photo très ciblée. Et je stock est l'un des plus grands fournisseurs de photos prises par des professionnels. De vrais photographes viennent ici et utilisent ces petits enfants qui ont mangé de la glace ici. Comme c'est mignon. Oui, 12 dollars, ce n'est pas mauvais pour une bonne photo et vous soutenez quelqu'un. Il y a une personne derrière ici qui télécharge la photo et elle en aura une partie. C'est donc un peu gagnant-gagnant. Très bien. C'est un emballage. Rappelez-vous simplement, je veux laisser une note de juste langue et vous avez écrit un rappel du type de langage que nous utilisons pour décrire nos interfaces utilisateur et certaines des bases de Junior entrent dans un bon interface utilisateur. Je pense que j'ai commencé les vidéos de cette façon. Je terminerai par là avant entreprendre un projet que nous allons faire ici dans une seconde. Mais une bonne interface est comme une bonne blague et n' a besoin d'aucune explication, doit savoir comment utiliser uniquement les gens qui l'utilisent. La façon dont nous parlons de nos interfaces. Il a de la personnalité, ce qui est la valeur de la marque. Mais vous m'avez entendu parler beaucoup de moyens de transport. Très bon mot pour décrire votre travail et les décisions concernant la raison pour laquelle votre interface est telle qu'elle est. N'oubliez pas que c'est parce que les informations sont faciles à comprendre ou se rapportent à un emplacement de tâche particulier. Vous m'avez beaucoup entendu décrire cela. Comme il s'agit de tous les mécanismes qui vous aident à décrire votre décision, quel que soit le choix que vous avez aidé à informer l'utilisateur de son emplacement ou cela ne l'a pas éloigné trop loin de son s'ils étaient tous semblables au niveau apparent et sont entrés dans un niveau modal d'un enfant. Ils peuvent toujours voir le niveau parent dans ce modèle. Encore une fois, le flux de travail et la progression et les contrôles tels que l'annulation, la sauvegarde, la modification, la suppression, la confirmation et les commentaires. Erreur de succès en chargeant mon favori, prix, quantité facile, moins de temps et d'énergie pour accomplir une tâche. Hiérarchie des informations, ordre de contenu qui correspond aux besoins de vos utilisateurs. Et encore une fois, lorsque tous ces éléments sont combinés et pris en compte, leur interface est très facile à utiliser. Tom Olsen, visible par l'utilisateur. Et je vais en quelque sorte parler, utiliser ça comme langage visuel. OK, c'est cool. J'espère que vous avez apprécié le niveau de contenu le plus élevé de ce cours. Nous allons lancer quelques projets où je vais vous montrer comment prendre une partie du contenu que nous avons réalisé et le concevoir dans Figma. Vous pouvez donc voir comment construire, construire un mobile, un modal et d'autres choses. Je vous y verrai et merci encore. Au revoir. 23. Introduction à la section projet: Très bien, bienvenue dans la section projet de la classe où nous allons créer certains de ces modèles de conception que nous avons appris dans la dernière série de vidéos. J'ai créé un fichier Figma pour que vous puissiez télécharger, télécharger dans Figma et nous pouvons le faire ensemble. Et si vous n'avez pas Figma ou ne connaissez pas Figma, c'est très bien. Vous pouvez, c'est gratuit, c'est un outil gratuit. Vous pouvez le télécharger , puis télécharger ce fichier et suivre avec moi. Allons jeter un coup d'œil à tout ce que nous allons apprendre ici. Nous allons donc commencer par un prototypage Web. Et nous allons apprendre comment faire les boutons radio personnalisés ici. C'est assez simple. Nous commencerons très simplement ici. Nous allons apprendre à faire le menu et le tiroir. Vous voyez ici. On va faire des modaux. On va faire des accordéons. Nous allons effectuer une validation en ligne et créer un compte, puis changer le bouton Créer ici en un spinner. Et nous l'avons appris pendant la vidéo du bouton. Nous allons apprendre à faire une liste déroulante , puis à rouler vers le côté mobile. Nous allons apprendre comment effectuer certaines de ces opérations sur des appareils mobiles. Disons ici que vous avez un modal plein écran qui fera une version modale d'une liste déroulante. Ainsi, les menus déroulants ou différents du Web qu'ils ne le sont sur mobile, apprendront à faire un modal. Un appareil mobile, fera des menus pour les appareils mobiles. Nous allons faire la barre d'onglets. Je vais cliquer sur ces barres d'onglets ici et comment elles restent fixes. Et nous finirons par un peu, quelque chose d'un peu plus compliqué, c'est bien comme un balayage horizontal. Et chaque vidéo ou chaque section ici, j'ai créé un fichier Figma dont l'exemple est déjà construit. Vous pouvez voir ici avec le bouton radio que le prototype est déjà présent. Vous pouvez donc l'ouvrir, vous pouvez le décrocher, vous pouvez voir comment cela fonctionne. Ensuite, nous avons la section qui dit que vous le faites. Et nous allons le faire ensemble. Nous allons parcourir chacun de ces éléments de construction et de menu dans un tiroir et un modal, et il y a toujours l'exemple là. Donc, si vous êtes coincé ou quoi que ce soit, ou si vous voulez simplement le distinguer, vous pouvez l'utiliser et ensuite vous pouvez suivre la vidéo et nous parcourrons chacune d'entre elles et la construire. Génial. Et nous pouvons également voir que j'ai fait de même pour les appareils mobiles. Super amusant. OK, c'est cool. Je vais donc faire une autre vidéo pour savoir comment télécharger ce fichier et l'ouvrir dans Figma. Et je vous y verrai. Au revoir. 24. Téléchargement de fichier projet: Très bien, allons donc télécharger le fichier Figma. Et sur cette vidéo, vous montrerez comment ouvrir le fichier. Une fois le fichier téléchargé, il devrait ressembler à ceci. C'est un projet de travail de classe Figma. ZIP à pois. Il suffit de double-cliquer ou de cliquer trois fois sur ce fichier. Et ça va le décompresser. Et maintenant, vous aurez ici un dossier appelé fichier de projet de travail de classe Figma . Eh bien, il faut que tu ailles dans ce dossier. Je vous ai laissé des instructions de dossier juste au cas où, mais je vais les parcourir dans la vidéo ici. Mais si vous voulez suivre les instructions, c'est la même chose que je vais montrer dans la vidéo ici. Mais tout ce que c' est que vous ne pouvez pas cliquer trois fois sur ce fichier pour l'ouvrir dans Figma. Si je clique trois fois ici, vous voyez que j'ai cette erreur. Encore une fois, je suis sur Mac. Ce que vous devez faire, c'est que vous devez aller à Figma. Vous devez entrer dans vos brouillons. Et vos brouillons peuvent sembler un peu différents des miens parce que j' ai juste des tonnes de dossiers ici. Oui. Vous voudrez accéder aux sections de vos brouillons ici en haut à gauche. Et ce que vous voudrez faire, c'est simplement glisser ce fichier dans votre application Figma. Dans le dossier brouillon. Vous verrez que je vais faire glisser et vous verrez que j'ai un contour bleu. Une fois que vous avez obtenu le contour bleu, c'est bien. Il suffit de le faire glisser et vous verrez que cela peut prendre une seconde, mais vous verrez le nouveau fichier s'ouvrir ici, allez-y et appuyez sur Terminé. Et votre dossier devrait ressembler à ceci sur la gauche. C'est assez facile. Il suffit maintenant de double-cliquer sur ce fichier. Et maintenant que vous êtes dans le dossier, vous êtes prêt à partir. Très bien, je vais passer dans la prochaine vidéo et on va lancer ça. Je vous y verrai. 25. Créer - les boutons de la Web -: Très bien, commençons et amusez-vous , construisons certains de ces composants et apprenons à créer les modèles de conception qu'ils contiennent. Si vous n'avez pas utilisé Figma auparavant, il est bon de faire un petit plongeon profond dans Figma. Mais si ce n'est pas le cas, ça va aussi. Vous serez probablement en mesure de parcourir la vidéo et de le faire avec moi ici. Et je vais y aller, je vais aller assez lentement. Je vais parler de ce qui se passe ici, mais j'ai tout mis en place, donc ça devrait être assez simple. Dans cette vidéo, nous allons rester sur le prototype Web ici. Nous ferons tout sur le Web, puis nous passerons au prototype mobile ici. Voici donc vos calques de page ici. Et si vous cliquez sur l'un d'entre eux, ne sont que des tableaux d'art différents pour lesquels vous pouvez réaliser des travaux de conception et de prototypes. Mais dans ce cas, nous avons un prototype web et nous avons un prototype mobile modal. Ne vous inquiétez pas de la couverture qui ne couvre que la couverture du fichier Figma ici. Nous ne serons donc que dans le prototype Web et le prototype mobile. Dans cette vidéo, nous allons faire les boutons radio, le menu dans le tiroir, et nous allons faire le modal. Nous allons donc faire ces trois, puis nous allons passer la prochaine vidéo. Mais allons jeter un coup d'œil au bouton radio ici. Donc, ce que je vais faire, c'est sélectionner ce tableau d'art en haut à gauche où il est écrit Mac 13. Je vais aller de l'avant et choisir ça. Et vous pouvez voir en haut, ici, je suis dans l'onglet Design. Donc, quelque chose de lié au design ici ? Si je sélectionne une forme ou une icône, je peux modifier n'importe quoi ici en fonction de ma sélection. J'ai sélectionné le tableau d'art. Et ce qui est vraiment important ici, c'est que vous accédiez à l'onglet Prototype ici, voir où il est écrit Design. On va aller dans le prototype ici. Vous verrez que cela commence ici. Une chose que je fais, c'est que j'appuie sur la barre d'espace mon clavier et je maintiens et je clique et que je fais glisser. Et cela me permet de déplacer l'espace de la planche d'art. C'est vraiment facile. Une autre chose que je fais, c'est que je vais faire un zoom avant et la commande moins pour zoomer. Et si vous êtes sur un PC, c'est Control Plus et Control moins. Et puis la dernière chose est que si vous maintenez la touche z enfoncée et que vous cliquez et faites glisser z va vous donner l'outil Zoom. Si vous cliquez et faites-le glisser dessus, il effectue un zoom avant. Je fais donc beaucoup de zoom avant, puis de la barre d'espace avec mon clic et mon glissement pour le déplacer. Je vais faire un zoom arrière. Ce qui est vraiment important ici, c'est que j'ai ce petit rectangle bleu Démarrer avec le bouton de lecture dessus. Cela va commencer le prototype sur n'importe quel écran sur lequel il se trouve sera le premier écran de ce prototype. Nous allons déplacer cette petite étoile dans chacune de ces sections afin de pouvoir commencer le prototype à chacun de ces composants que nous allons concevoir. Avant cela, assurez-vous que vous me ressemblez ici où j'ai sélectionné le Mac 13. Je suis dans l'onglet Prototype ici. Et je voyais que le début est sur le bouton radio Custom. Et maintenant, en haut, ici, vous verrez le petit bouton de lecture. Donnez-vous une seconde pour y aller. C'est là qu'il est dit présent. C'est votre prototype. Allons de l'avant et cliquons dessus. Cela va charger le prototype. Et encore une fois, le premier écran que nous allons voir ici est celui qui doit démarrer le rectangle sur l'autre onglet. Vous pouvez aussi voir qu'il a fait deux onglets, n'est-ce pas ? Maintenant, je suis dans un nouvel onglet en haut appelé prototype Web. Et si je veux revenir à mon fichier de conception, je retourne au fichier de conception et je suis ici. Si vous êtes déjà pro chez Figma ou si vous l'avez déjà utilisé auparavant, alors tout cela est de prêcher à la chorale d'ERD sont probablement pro ici, mais c'est essentiellement très fondamental de l'utilisation de Figma et cela devient plus important. avancé ici, mais nous garderons les choses assez simples pour le bien du projet. Ce que nous avons ici, c'est le bouton radio et nous allons commencer très facilement. Et nous allons devenir un peu plus complexes au fur et à mesure. Ce que nous faisons ici, c'est que nous avons juste notre bouton radio personnalisé ici. Et si vous allez chez une femme, vous verrez l'état de vol stationnaire. Et si je clique dessus, vous obtenez l'état actif. Et si je clique dessus, je suis de retour à l'état par défaut. Si je survole à nouveau ma souris, j'obtiens l'état de vol stationnaire. Cliquez à nouveau dessus. C'est assez simple. Allons de l'avant et construisons cela. Ce que nous devons faire ici, c'est sur l'onglet Prototype où vous pouvez voir ce petit rectangle bleu ici. Vous ne voulez pas être dans l' onglet Design. Vous souhaitez être dans l'onglet Prototype ici. Et ce que vous voulez faire, c'est cliquer sur ce petit rectangle bleu Démarrer ici et cliquez dessus et faites-le glisser vers le fichier qui indique Max 16, le tableau d'art ici vous verrez un surlignement, voyez comment les surlignements sont bleus comme ça. C'est ce que vous voulez. Nous passons maintenant de l'exemple à celui qui dit que vous le faites ici. Cette rangée est ce que nous allons construire. D'accord, donc la première chose que nous allons faire ici, c'est de prendre le tableau d'art max 16 ici. Vous pouvez voir si je clique dans le tableau d'art, je sélectionne des éléments de ce tableau. Mais si je clique en haut ou que le nom de ce tableau d'art est max 16. J'ai choisi cette planche d' art elle-même. Et si je veux renommer cela, je peux accéder à mes calques ici à gauche. Voyez où il est écrit Matt 16. Et je vais le nommer , disons « test ». Cliquez sur « Retour ». Et maintenant, vous allez le voir dire test ici. Maintenant que nous avons sélectionné le tableau d' art, copions-le de plusieurs façons que vous pouvez copier. Vous pouvez effectuer la commande C ou Control Z, C, C, C comme dans cat. Si vous êtes sur un PC, c'est Control. Si vous utilisez un Mac, c'est une commande. Ensuite, vous pouvez effectuer un contrôle ou commande V. Si vous êtes sur un PC, c'est Control V, comme dans Victor. Et si vous êtes sur Mac, c'est la commande V ici. Et vous pouvez voir qu'il a été remplacé par ici. C'est une façon de copier et de coller. Un que j'aime faire est l'option de maintien, et je vais voir comment ma souris passe dans une double souris ici. J'aime enfoncer Option et cliquer dessus et faire glisser et la copier de cette façon. Ok, donc, à ce stade, nous voulons établir l'état de conception du vol stationnaire. Ce que je vais faire, c'est zoomer sur ce tableau d'art. Je vais choisir juste, je suis un mélange. Je suis en mode design. Vous pouvez voir que je suis en mode prototype ici. Nous allons donc faire le mode prototype ici dans une seconde. Revenons en mode design. Cette carte est groupée. Donc, ce que je veux faire, c'est cliquer trois fois sur cette carte. Une autre chose que je pourrais faire est de cliquer avec le bouton droit de la souris. Allons faire ça. Qu'est-ce qui est dissocié pour l'instant ? Je suis juste Ungroup. Maintenant, je peux sélectionner les textes, je peux sélectionner l'icône, et je peux sélectionner cette petite carte arrière ici. Donc, ce que nous voulons faire, c'est sélectionner la carte arrière. Je suis dans l'onglet Design ici. Je vais aller à la section des accidents vasculaires cérébraux. Ajoutez un plus, qui va ajouter un trait autour de cette carte. J'aime garder les coups épais. Je n'aime pas faire seulement un coup de pixel dans ce cas, faisons-le comme si 77 était un bon nombre. Allons de l'avant et changeons cette couleur ici. Lorsque vous accédez à la sélection de couleurs ici sur le contour, vous verrez que toutes les couleurs sont prêtes pour vous ici. Toute la bibliothèque de couleurs, toutes les couleurs du monde sont ici. Vous verrez dans les couleurs du document ci-dessous, il y a quelques couleurs qui existent déjà dans ce document. On pourrait ramasser le rose ici en faisant tomber le rose. Vous pouvez aussi simplement aller ici et deviner ce qu'est ce rose ou où il est dit coup ici. J'ai aussi le set de style. Il y a donc un peu comme Foursquare, quatre points dans un carré. Si vous cliquez dessus, cela vous donnera des styles associés à ce projet. En fait, j'ai menti, je n' ai pas les styles ici, alors faisons-en un. Maintenant que nous avons une couleur rose ici, je vais sélectionner l' icône très rapidement. Maintenant que nous avons cette couleur rose, allez-y et cliquez de nouveau dans ces styles et voyez où il est dit, en plus, faisons de cela notre colloïde rose, rose, mignon petit petit rose. Maintenant, lorsque nous allons sélectionner à nouveau notre trait, ce que nous pouvons faire, c'est cliquer sur ce petit style et le vérifier. Nous avons notre couleur rose ici. Un peu rosé. Je vais aller de l'avant et cliquer sur Pinky. OK, c'est cool. On a presque fait l'état de vol stationnaire. Allons maintenant et passons à l'état suivant, qui ressemble à ceci, là où il est rempli. Encore une fois, je vais faire la même chose que je vais couvrir. Je vais sélectionner ce tableau de test ici. Vous pouvez soit faire un Control C, comme en chat si vous êtes sur un PC ou si vous êtes sur un Mac, c'est la commande C. Je vais passer à droite ici. Et puis je vais faire le contrôle V comme dans Victor, ou le Commandement V comme dans Victor. Si vous êtes sur un Mac et que j' ai mon nouveau tableau artistique, quelqu'un effectue un zoom arrière, votre tableau devrait ressembler à ceci. Nous avons l'état par défaut ici. Nous avons fait cet état de vol stationnaire. Maintenant, nous allons faire l'état actif où si l'utilisateur a sélectionné la carte Icône féminine ici, elle sera remplie de la couleur rose que nous venons de créer appelée pinky. Vous pouvez voir que j'ai sélectionné l'arrière-plan maintenant. Il est rempli de blanc. Encore une fois, je peux ouvrir le remplissage ici et je peux utiliser n'importe quelle couleur que nous voulons. Ou je peux revenir à ce style que nous venons de créer. Et je peux le remplir de rose. Et voilà que tu y vas. J'ai rempli l'intérieur. Mais Aaron, où est allée l'icône ? C'est ici. C'est juste la même couleur que le rose. Bon, rendons cette icône blanche. Ce que nous devons faire, c'est que si vous cliquez sur Pinky, il suffit d'ouvrir les styles ici. Vous ne verrez peut-être pas ceux qui disent la couleur du tournesol. Vous pouvez simplement voir les styles normaux ici. Ce que nous devons faire, c'est de détacher Pinky. Vous voyez quand nous passons à Pinky et que vous voyez cette petite icône de maillon de chaîne indique le style de détachement, allez-y et détachez-la. Cela signifie qu'il ne sera plus rosé et qu'il s' agira d'une couleur de forme libre que nous pouvons choisir. Allons rendre ça blanc. Allons-y et pendant que nous sommes ici, ajoutons cela à notre style de couleur. Maintenant que nous avons sélectionné le blanc, vous pouvez appuyer sur le petit plus, ou désolé, pas le plus P0. En fait, voyons ça. Lorsque vous appuyez sur le plus, c'est quelque chose qui arrive beaucoup. Vous voulez accéder à vos styles de couleurs, mais vous appuyez sur Plus et voyez comment je viens d'ajouter une autre couleur noire à 20 % d'opacité ici. Et nous finissons avec deux couleurs. Vous pouvez simplement ajouter d'autres couleurs. Si cela se produit, il suffit d' appuyer sur le bouton négatif. Juste comme ça. Ensuite, vous reviendrez à votre blanc. Si vous avez accidentellement supprimé votre blanc, il n'y aura pas de remplissage. Cette forme n'a pas de remplissage, pas de trait, rien. Encore une fois, nous voulons ajouter une autre couleur. Nous ajoutons simplement une valeur par défaut au gris, en cliquant près de la couleur. Va rendre ça blanc. Très bien, nous cuisinons avec le feu. Maintenant, nous voulons simplement ajouter cela à notre style de couleur pour faciliter la tâche de tout ce qui est blanc, nous pouvons simplement sélectionner le style de couleur et nous n' avons pas besoin de trouver le blanc. Encore une fois, les quatre points ici où il est dit style, cliquez dessus. Maintenant que nous sommes dans nos styles de couleurs, la petite icône plus pour créer un nouveau style. Vous y voilà. Et on va juste appeler ça un blanc. Et boum, on a eu le blanc comme style de couleur. Faisons également le texte ici. Allons le rendre blanc aussi. Très bien, cool. Nous avons obtenu notre état actif, l'état dans lequel l' utilisateur clique dessus. Nous avons notre état de survol et nous avons notre état par défaut. Nous allons prototyper ça ensemble. instant, nous sommes dans l'onglet Design. Passons au prototype. Assurez-vous de bien commencer. Voici celui qui dit test que nous venons de faire. Je vais choisir une femme. C'est juste comme ça. Lorsque je suis en mode prototype, vous verrez ce petit plus toujours au centre de l' objet à droite. Si vous ne le voyez pas, vous êtes peut-être en mode d' onglet Création, n'est-ce pas ? Donc, si vous ne voyez pas ce que je vois, allez dans l' onglet Prototype en haut à droite. Il suffit maintenant de cliquer et de le faire glisser. Vous verrez au début qu'elle va s' accrocher à mon image, j'allais dire, voulez-vous cette image et dire non, continuez à la déplacer. Aucune image. Et passez à la suivante à droite. Une fois que vous l'aurez fait, vous verrez le bleu sur le prochain surlignement du tableau d' art. Cela signifie que nous avons une bonne sélection. Et maintenant, nous avons les détails de l'interaction. Vous en aurez généralement un couple, vous aurez un glissement de déclic pendant que vous survolez, tout en appuyant sur. Et le reste d'entre eux, clavier, souris, entrée, souris. Ne vous inquiétez même pas de tout ça. Je ne les utilise même jamais. J'utilise simplement onclick ou en planant. Allons faire ça en planant. Boom, tu as eu ton premier prototype. Ce que nous voulons faire ici, c'est que vous voulez préserver la position de défilement. Si vous avez un long site Web et que vous avez relié ces tableaux artistiques ensemble, la valeur par défaut est si vous avez un bouton au bas de votre tableau d'art ici, supposons que vous ayez un long tableau artistique et vous avez un bouton en bas. Et vous voulez que le bouton survole et que vous le coudiez sur le tableau suivant et que vous ne disposez pas position de défilement préservée, ce qui signifie enregistrer. Gardez l'utilisateur dans la même position que le défilement. Il reviendra en haut de l'écran suivant, notre tableau. Et l'utilisateur au défilement vers le bas pour voir le bouton là-bas. Si vous appuyez sur ce bouton, vous préservez la position de défilement. Cela signifie que vous pouvez cliquer sur tous les éléments de votre tableau artistique. Et exactement qu'il conservera où que l'utilisateur se trouve sur chacun de ces tableaux artistiques afin qu'ils ne sautent pas au sommet de chaque tableau artistique. Allons de l'avant et faisons-le juste pour nous. Nous n'avons pas de longues planches artistiques pour cet exemple, mais nous allons l'activer dès maintenant. Laissez-le juste instantanément. Cool. Félicitations, vous avez réalisé votre premier prototype. Et ce que nous voulons faire ici, c'est simplement nous assurer que le rectangle de départ est ici sur le tableau d'art. Allez-y et appuyez sur Play en haut. Vous verrez quelque chose comme ça pour moi que je vois. Encore une fois, regardez quand vous survolez l'icône féminine, vous verrez que cette forme s'est produite. n'y a pas de transition. C'est comme si souvent, Allons ajouter une transition à cela. Je vais cliquer là où il est dit pendant que je passe le mélange, je suis en mode prototype. Et cela va ouvrir les détails de l'interaction là où il est écrit animation. Dissolvons simplement. Cela signifie que ça va se calmer. Faisons-le au lieu de sortir aisément, d'entrer aisément. Nous allons faire 800 millisecondes. Ensuite, fermez-le et revenez maintenant à, vous pouvez appuyer sur Lecture pour revenir à votre prototype, ou revenir aux onglets supérieurs en haut de la page. Et vous pouvez voir comment il y a maintenant une transition agréable en douceur. Oui, c'est bien, c'est bien là. Très bien, alors allons maintenant faire état des clics, comme revenir au survol. Assurez-vous d'être en mode prototype. Et encore une fois, faites glisser votre petit bras d' interface graphique prototype vers le tableau clickart. Encore une fois, je l'ai peut-être fait trop vite, comme suivez-moi. Voyez comment j'ai mis le survol à l'état actif. Nous avons OnClick. Et faisons un peu plus vite. Dissous 300 millisecondes. Ça devrait aller bien. Ou vous pouvez faire instantanément n'a pas vraiment d'importance dans la résolution standard. C'est à vous de décider. Fermez ça. Maintenant, nous avons notre vol stationnaire. Nous avons notre clic. Ça a l'air bien. Allons chercher l'État. Je vais faire un zoom arrière un peu, assurez-vous d'être en mode prototype. Et je vais revenir à celui que nous venons de commencer, le prototype par défaut. Planche d'art. Et dissoudre les clics devrait être correct. Et je reviendrai à notre prototype. Cliquez sur femelle et déplacez votre souris vers le bas du dos. Par défaut, nous avons eu le survol, vous avez eu le clic. Vous devez cliquer dessus si votre souris est enfoncée ou si vous serez à nouveau en état de survol. Et vous pouvez voir ce travail là-dedans. Génial. J'espère que c' était vraiment facile pour vous. Et passons au menu et au tiroir. Je vais faire une nouvelle vidéo qui a pris un peu plus de temps que prévu. Mais oui, je vais faire une nouvelle vidéo et nous allons sauter par-dessus et voir dans le menu et le tiroir. Je vous y verrai. Au revoir. 26. Créer - Web - Tiroir de menu: Bon, bon retour. Avant de passer au menu et aux conceptions de tiroirs, oubliez pas de revenir dans votre onglet Prototype, pas dans l'onglet Conception, mais dans l'onglet Prototype en haut à droite. Et prenez le départ, qui démarrera le prototype n'importe quel écran sur lequel il se trouve. Ce sera le premier écran et le prototype. un petit zoom arrière, cliquez et faites glisser ce début, faites-le glisser vers le tableau d'art Mac neuf où il est indiqué Menu et tiroir vers l'exemple, pas celui que vous allez faire, juste l'exemple parce que ce que ça va jeter un coup d'œil aussi vite. Bon, il suffit de sélectionner le tableau d'art Mac neuf ici. Appuyez sur Play. Et c'est ce que nous allons construire. Le menu et le tiroir. C'est assez lisse. C'est assez facile à faire. Revenons à notre fichier de projet, je suis dans la fenêtre de l'onglet Prototype en haut. Ce que je veux faire, c'est revenir à l'endroit où il est écrit fichier de projet de modèles de pâte en haut à gauche. Prenez le début, le rectangle, déplacez-le vers votre section Faire. Bon, nous avons donc déjà créé le tableau d' art pour ce design ici. Maintenant, nous avons juste besoin de faire le tableau d'art pour le menu. Chez Figma, il y a un outil de tableau d'art et il ressemble au petit outil de recadrage en haut à gauche. Allez-y et cliquez dessus. Par défaut, il vous offre une multitude de tailles de tableaux et de cadres pour différents écrans d'iPhone, écrans tablettes, ordinateurs de bureau, présentations, montres, médias sociaux, tous types de choses. vous suffit également de cliquer et faire glisser et d'en créer un personnalisé. Cliquons et faisons glisser et créons une forme personnalisée et créons la forme que je fais ici comme un rectangle vertical très long. Nous pouvons le rendre un peu plus grand que le tableau d'art sur la gauche ici. Si vous voyez, je le retiens. Ne faites pas glisser ça dans l' autre tableau d'art comme celui-ci. Vous pouvez faire des tableaux artistiques dans des planches d'art, ce qui devient un peu délicat. Pour l'instant. Il suffit de le garder à droite. C'est assez simple. Allons de l'avant et revenons à notre onglet Design. Et donnons à cela une couleur de fond. Donc, lorsque je sélectionne le tableau d'art où il est écrit 596, renommons cela dans le nom des calques de noms. Appelons cela le menu. Appelons ce tiroir. Il est un peu plus facile de parler de ça. Vous pouvez donc voir que lorsque je sélectionne le tiroir, il n'y a rien, il n'y a pas de motifs de conception ici ou dans aucun élément de conception dans l'onglet Design ici. Une fois que j'ai sélectionné, j'ai sélectionné le tableau d'art car il n'y a rien d'autre que le tableau d'art ici. Le tableau d'art aura une couleur de remplissage par défaut en blanc. Allons dans la couleur de remplissage. Fonctionne solide. Faisons un dégradé. Vous verrez où il est écrit linéaire. C'est un dégradé linéaire ou la même chose signifie simplement une transition bicolore. Faisons linéaire. Il commence généralement par le blanc et le blanc. Le blanc à gauche est cependant 100 % d'opacité. Le blanc à droite est de 0 % d'opacité. Et vous pouvez voir qu'il y a un petit curseur d'opacité ici et un pourcentage d'opacité ici. Ainsi, vous verrez 100 % lorsque vous sélectionné la couleur à gauche, et vous verrez 0 % à droite. Ce que nous voulons faire, c'est faire de la couleur là-dedans, une opacité à 100%. Prenons la couleur à gauche. Maintenant. Rendons-le rose d'un côté. Et rendons-le un peu plus violet en bas. Oui, ça devrait être plutôt cool là-bas. Encore une fois, vous pouvez les contrôler. Je peux cliquer dessus et faire les dégradés. Maintenant, tout est vertical, mais je peux les faire horizontalement. Je peux faire un angle plus comme ça. Vous pouvez pousser une couleur vers le bas ou vers le haut. Vous pouvez jouer avec ça tout seul, mais nous allons le garder assez simple, haut en bas pour l'instant. Allez-y et fermez ça. J'ai déjà ajouté les éléments à côté de ce tiroir que nous sommes ici dans l'exemple ci-dessus. Allez-y et sélectionnez-les simplement et faites-les glisser dans votre tiroir ici. C'est assez facile. Si vous ne le faites pas. Une façon de tester cela, vous pouvez parfois faire glisser des éléments dans un tableau d'art. Vous allez sur votre prototype et vous ne les verrez pas. Et une façon de s'assurer qu'elle est entrée dans le tableau d'art est de sélectionner l' endroit où il est indiqué tiroir. Sélectionnez donc le tableau d'art réel et déplacez-le. Parfois, vous verrez cela là où cela ressemblera. Il est au-dessus du tableau d'art. Et ensuite, tu vas le déplacer. Le contenu reste, n'est-ce pas ? Donc, ce que vous voulez faire, c'est vous assurer que cela se trouve dans le tableau d'art lui-même. Une autre façon de le faire consiste à sélectionner tous les éléments ici. Appuyez sur Commande C, accédez à votre tableau d'art et appuyez sur Commande V, et il sera collé dans ce tableau. Maintenant, je peux m'assurer qu'il est là. Maintenant que nous avons notre tableau artistique, allons le rapprocher un peu plus l'écran à gauche. Ce que nous voulons faire, c'est sélectionner le menu. Je l' ai déjà regroupé pour vous. Il suffit d'aller de l'avant et de sélectionner le menu. Accédez à notre mode prototype ici. Cliquez sur le bras de l'interface graphique et faites-le glisser sur le tiroir. C'est là qu'il devient un peu cher de niveau profond si nous l'avons sur onclick. Allons le déplacer de Naviguer à, pour ouvrir la superposition. Je vais le faire encore une fois. Nous avons donc eu un onclick comme action et la fonction au lieu de naviguer vers un autre tiroir, nous voulons que cela ouvre et utilise ce tiroir et l'ouvre comme superposition. Ouvre la superposition. Et vous obtiendrez un tout nouvel ensemble de détails d' interaction en fonction de la superposition. Il sera généralement centré par défaut. Et nous allons le faire ici dans une seconde. La vidéo suivante pour le modal. Ce que nous voulons ici n' est pas centré. Nous voulons qu'en haut à gauche vous donne les icônes les plus courantes ici et que vous pouvez sélectionner centré en haut, à gauche et en bas. Allez-y et cliquez sur le bouton Fermer lorsque vous cliquez à l'extérieur. Et ajoutez un arrière-plan derrière la superposition. Et faisons comme 70 % d'opacité ici. Ce que cela va faire, c'est de vous donner un arrière-plan. Ensuite, vous verrez quel sommeil l'animation pour l' instant, nous allons changer cela dans une seconde. Vous vous êtes probablement dissous ou peut-être même en état ici. Mais faisons simplement, allons-y, allons le dire comme un incident pour l'instant. Et puis on va s'amuser un peu plus. Une fois encore. Nous avons OnClick, ouvrir la superposition, fermer en haut à gauche lorsque vous cliquez à l'extérieur, ajoutez un arrière-plan derrière superposé, nous avons une couleur noire ici. Vous pouvez modifier la couleur de l'arrière-plan, mais faites simplement une animation en noir et à 70% d' opacité instantanée. Allez-y et fermez ça. Allons appuyer sur Play en haut à droite sont présents. Cela nous amènera au prototype et surveillera ce qui se passe. Vous pouvez voir qu'il a ouvert la superposition. C'est le noir à 70 %. Nous avons le menu ici, mais vous ne pouvez pas vous en sortir pour le moment. Il n'y a aucun moyen de sortir. Allons donc fermer le bouton X et vous ramener à cette page. Donc, parmi le tiroir toujours en mode prototype, allez de l'avant et sélectionnez le x et faites simplement glisser celui-ci vers le tableau d'art Baba t et faites surClick naviguer jusqu'à ce qu'il soit correct. instantané doit être parfait. Allez-y et fermez ça. Revenons maintenant et nous pouvons appuyer à nouveau sur Play. Retournez sur le menu. Et maintenant, lorsque nous cliquons sur X, vous le verrez ici. Vous verrez quand j'ai sélectionné le tableau d'art et que j'appuie sur Play, il vient de charger le tableau d'art ici. Très bien, il chargera également le prototype basé sur n'importe quel tableau d'art que vous avez sélectionné. Ce que j'ai fait, c'est que j'ai fait une flèche ou tu peux revenir ici, revenir à Imax 17, appuyer sur Play en haut à droite. Il y a votre menu Close et ça a l'air bien, mais il n'a pas de transition et il a de la fraîcheur. Allons y ajouter des choses sympas. À ce stade, ce que nous voulons faire c'est nous assurer que nous sommes en mode prototype. Allez chercher notre prototype de menu ici, ouvrez les détails de l'interaction. Ce que nous voulons changer en tant qu'animation à partir de l'instant, nous voulons qu'elle s'installe. Quand il se déplace, vous serez en mesure de définir la direction dans laquelle il va se déplacer . Et c' est plutôt amusant. Vous pouvez soit vous déplacer par le haut, déplacer par le bas, déplacer par la gauche ou vous déplacer par la droite. Vous pouvez vous déconner avec ça. Nous aurons plus d' options lorsque nous arriverons aux prototypes mobiles pour montrer comment ces différentes directions de déménagement et forment le tiroir du menu. Mais dans notre cas, nous voulons qu'il se déplace par la gauche et se déplace à droite, donc nous le voulons, et cela vous donne un aperçu ici. Nous voulons qu'il se déplace correctement. Il va entrer par la gauche et passer de la droite. Et ne vous inquiétez pas de la facilité ou quoi que ce soit qui devrait bien y aller. Allons de l'avant et fermons ça. Revenons maintenant à notre prototype ici. Appuyez sur le menu et regardez cette diapositive. Vous voyez comment ça s'est fendu. Nous n'avons encore rien appliqué à partir du x. Mais il a emménagé. Et il a agi comme un bon menu de transition. Mais boum, ils refroidissent Thich Nhat des effets sonores, mais rarement. Couvrons tout ça. Allons chercher le x ici, attrapons ce prototype. Et dans l'animation Ajouter, ce que nous voulons, c'est de ne pas emménager. Nous voulons qu'il déménage. Nous voulons la direction opposée, n'est-ce pas ? Nous avons donc défini le menu pour entrer de gauche et se déplacer vers la droite. Et nous voulons qu'il se déplace de droite à gauche. Et vous pouvez voir qu'il est déjà défini par défaut à gauche. C'est celui que nous voulons. Allons le fermer. Revenez à notre prototype ici. Déplacez-vous par la gauche, sortez, voyez comment cela a fonctionné. Parfois, ce qui arrivera, c'est que vous finissez avec le x. Vous ne finissez pas avec un déménagement, mais un déménagement. Et observez la différence ici. Fermez le X c'était un peu bancal. Voyez comment ça n'est pas mal. Mais vous remarquerez qu'il ne bouge pas à un endroit comme s'il s'installe et disparaît. Notez simplement que si vous le regardez, il semble un peu bancal. Nous parlons du prototype de tiroir ici. Si quelque chose s'est déplacé et a montré le tiroir et que vous et votre fermeture, le tiroir doit toujours être à Adam, déplacez-le puis sélectionnez-le pour sortir. Et maintenant, vous verrez la ligne de flux se déplacer. C'est subtil, mais c'est important. OK, Cool. Cela enveloppe le menu et le tiroir. Je vais faire une autre vidéo juste pour les garder courtes, gentilles. Et nous allons passer aux modaux. Je vous verrai sur l'autre vidéo. Au revoir. 27. Créer - Web - Modèles et Accordions: Bon, bon retour. J'espère que vous vous familiariserez bien avec Figma. Allons voir les modaux. Je vais zoomer un peu, juste commander moins ou Contrôler moins si vous êtes sur un PC. Rappelez-vous, revenez en arrière. Si vous ne voyez pas ce petit rectangle qui indique début, vous pouvez commencer à créer l'onglet Création. Cliquez donc sur l' onglet Prototype en haut à droite. Allez-y et saisissez ce rectangle et faites-le glisser vers la section modale où nous avons obtenu Mac dix car l'iMac dix est le calque. Allons-y et je vais tenir z. Donc je tiens z et je clique et je traîne avec ma loupe. Et je vais lâcher prise et ça va zoomer. Et vous devenez plutôt bon dans ce domaine où vous êtes, je suis sur un Mac, rappelez-vous que je fais Command, Command Minus Command Plus Command Plus Command Plus, je suis sur un Mac, rappelez-vous que je fais Command, Command Minus Command Plus Command Plus Command Plus, puis je tiens z, pas emménager. Et puis je tiens la barre d'espace avec ma main pour me déplacer, donc cela prend un peu de temps, mais cela deviendra très intuitif pour vous si ce n' est pas déjà le cas. Encore une fois, nous avons obtenu le rectangle du prototype de départ à droite, sur celui qui indique l'exemple. Cette opération va à nouveau charger le prototype dans cette section. C'est donc l' écran qui démarre en premier. Allez-y et revenez à votre onglet Prototype ou en haut ici, vous appuyez sur le bouton Présent et serez maintenant sur le prototype modal. Et si vous cliquez sur modal, cela ouvre un modal. Si vous appuyez sur le X, cela se ferme. Super facile. Ce sera amusant, ça va être rapide. Vous êtes probablement déjà très doué dans ce domaine. eu l'idée. J'espère. Allons prendre le départ. Passons à cette section qui dit que c'est le cas. Vous pouvez voir que j'ai déjà eu les éléments pour vous ici. J'ai le haut et le x ici. Ce que nous voulons faire en premier, c'est que nous voulons revenir à notre outil de cadre ici. Et nous voulons cliquer et faire glisser, puis simplement créer un carré ou un rectangle. C'est vraiment important la taille tant que la taille n'est pas aussi grande que celle du tableau d'art ici à gauche, droite, donc nous voulons juste une taille correcte ici. Ce n'est même pas le mode d'onglet Prototype. Ce que je veux faire, c'est passer en mode onglet de conception. Je vais faire glisser le haut dans ce cadre ici. Et je vais aussi faire glisser le x là-dedans. Mon nom figure 936 ici, je vais nommer celui-ci le modal, juste pour qu'il soit facile de discuter et d'en parler. Maintenant, je vais choisir le modal et je vais le déplacer. Si vous le déplacez et que le haut ne bougeait pas, c'était comme si vous n'aviez pas le haut dans le tableau d'art. Cliquez et faites-le glisser. Attendez qu'il soit bleu. Ensuite, vous l'aurez dedans. Nous avons toutes les pièces dont nous avons besoin. Ça va être assez simple. Allez-y et je vais zoomer un peu. Sélectionnez le bouton modal. Accédez à notre mode prototype. Faites glisser, n'y allez pas, n' allez pas sur cette photo. Nous voulons passer au modal. Va le bras dû bleu sur le modal. Nous avons obtenu les valeurs par défaut de la dernière animation que nous venons de faire. Nous voulons donc onclick, mais au lieu de naviguer vers, nous voulons ouvrir la superposition. Une fois encore. Onclick, c'est bien. Et au lieu de naviguer vers, nous voulons une superposition ouverte. Regardez le centre par défaut. C'est exactement ce que nous voulons. Nous voulons fermer lorsque vous cliquez à l'extérieur. Et nous voulons ajouter la superposition d' arrière-plan et en faire 70 en soi ici. Nous n'avons pas besoin d'une transition ici, gardons la place. Bon, maintenant, allons-y. Il devrait ouvrir le modal. Sélectionnons le X et fermons le. Si vous faites glisser le X ici, vous pouvez faire OnClick, naviguer vers, et ne pas déplacer ou quoi que ce soit, il suffit de le faire à la place. Dans l'animation d'état, préserver la position de défilement est excellent. Fermez ça. Allons sélectionner la couche iMac 18. Presse présente. N'oubliez pas de vous assurer que votre départ est à côté de vous. Appuyez sur le modal et il y a votre superposition, votre petit modal. Appuyez sur le X et vous l'avez fermé. Ajoutons une petite transition à cela. Allons de l'avant et sélectionnons le prototype de bouton modal qui connecte le bouton au modal. Et là où nous avons de l'animation, dissolvons. Et 300 millisecondes, c'est génial. Fermez ça. On va faire la même chose au X ici. Allez-y et cliquez sur le x. Si vous cliquez sur le X et que vous ne pouvez pas voir les détails de la transition. Comme si vous aviez cliqué et que vous avez cliqué, Hé, je n'arrive pas à obtenir ces détails d'interaction. Vous pouvez cliquer en haut à l' endroit où il est écrit interaction, et il suffit de cliquer là pour les ouvrir également. Vous pouvez également cliquer sur le petit bras de l'interface graphique. Et cela va aussi l'ouvrir . Allez-y et faites-le dissoudre. 300 millisecondes, c'est parfait. Maintenant, vous verrez la transition se dissoudre un peu. Dissoudre près. OK, cool. Nous allons en emporter deux en une vidéo ici. Passons aux accordéons. Je vais faire glisser le get parmi, revenir en arrière et non pas dans l'onglet Design mais le mode d'onglet Prototype. Je vais prendre le départ, mettre à l' exemple de l'accordéon. Sélectionnez iMac 11. Appuyez sur Play. Vous devriez ressembler à cet accordéon. Je voulais juste vous dire que vous êtes génial. Nous vous aimons, moi et ma petite amie ou mon chien et mes amis. Et un design heureux. Allons-y et cliquons sur ton génial. Et vous voyez comment cet accordéon regarde cette transition magnifique. Il ne s'est pas rempli. Je n'ai pas eu l'impression d'un très grand saut. C'était une belle transition. Nous avons vu la petite carotte ou la flèche se déplacer à 180 degrés. Il s'est retourné. Nous avons vu que l'état actif maintenant pour votre génial, passez au rose. Et il a révélé que les informations sur le niveau de l'enfant. Et nous avons vu le haut. Bon, super, revenons en arrière. Revenons en mode prototype. Prenons ce début ici. Faites glisser ça jusqu'à l' endroit où il est indiqué iMac 19. Et celui qui dit que c'est le cas. J'ai créé l'un des titres de l' accordéon ici, donc je vais passer en mode tabulation. La première chose que je vais faire si vous faites attention, c'est que j'ai mal orthographié l'accordéon ? Je ne sais pas si vous avez attrapé ça. Ce que nous allons faire, c'est que nous allons apprendre l'outil de texte. Je peux donc accéder à l'outil de texte ici. Et je peux le sélectionner en fonction de l'outil de texte. Et je peux faire le A. Je peux appuyer sur Escape sur mon clavier pour me sortir de l'outil de texte. Ou je peux simplement cliquer trois fois sur ce champ d' accordéon comme ça, et le changer et maintenir le décalage parce que c'est capital. Et je peux changer cela en accordéon. Vous pouvez voir que j'ai, vous pouvez choisir votre super. Vous pouvez sélectionner la, la carotte ou la flèche et l'arrière-plan. Ce que nous voulons faire, c'est de sélectionner tous ces éléments et de les regrouper. Donc, vous avez votre super super. Je vais tenir le quart de travail. Je vais choisir la carotte ici. Et je vais maintenir la touche Maj, sélectionner l'arrière-plan. Et je peux soit Command G sur un Mac, soit Control G, comme dans Greg. Ou je pourrais cliquer avec le bouton droit. Et je peux regrouper cette section C là où il est dit groupe. Il s'agit maintenant d'un regroupement. Si je clique dessus une fois et que je déplace, c'est ce que cela signifie. Il est groupé. Et si je veux entrer et sélectionner différentes zones, je peux cliquer trois fois. Et maintenant, je peux entrer dans le regroupement , puis cliquer sur Désactiver ou appuyer sur Echap. Et ça va vous sortir de ce groupe. Bon, donc je vais copier ça, je vais retenir Option, je suis sur Mac. Si vous êtes sur une option PC, je clique et faites glisser, je vais maintenir la touche Maj comme je le fais. Si je ne tiens pas Shift, je comprends ça. Je suis capable de déplacer ça. Si je maintiens le quart de travail, je peux. Cela me permet de rester aligné sur l'objet que je copie. Je vais laisser aller ici. Mon zoom avant est juste un peu. Et je vais au clavier fléché. Le deuxième en-tête remonte un peu, juste pour qu'il y ait un peu de distinction entre le premier et le bas. Le nom de mon chien est mou. Dites que le chewy t'aime. Vous pouvez écrire ce que vous voulez. Encore une fois, c'est votre monde. Vous ne pouvez pas le faire, c'est vrai. Vous pouvez faire le nom de votre chien. Je vais faire la même chose. Je vais tenir Option. Je vais cliquer et faire glisser vers le bas. Je vais tenir le quart de travail, non ? Je tiens donc Shift. Donc, pas de changement, de changement. Je ne peux pas vraiment bouger. Redescends encore une fois. Une fois encore. Je vais faire une flèche sur le clavier. Parfait. Disons que nous allons ajouter celui-ci. Il adore la nourriture. Oh, elle adore la nourriture. Bon, maintenant, nous avons nos trois catégories d'accordéon. Ce que je vais faire, c'est que je vais attraper l'amour moelleux. Je vais tenir Shift, attraper l'amour moelleux. Ces deux-là, je vais les regrouper. Je vais faire une commande G ou un contrôle G. si vous êtes sur PC. Je vais le faire, je vais vous montrer l'autre façon de cliquer avec le bouton droit de la souris sur la section Faire des groupes. Maintenant, ce que nous allons faire, je vais passer le haut ici. Nous allons copier ce tableau d'art, les obtenir en option, et voir quand je maintiens Shift, je peux faire la même chose avec le tableau d'art maintenant. Pas de décalage, le décalage le maintient en ligne. Je vais le déplacer ici. Avec mon haut. Revenez dans le nouveau que nous venons de sélectionner. Ceux que nous avons regroupés. Chewy vous aime, mâcher adore la nourriture. Je vais faire baisser ça. Je vais prendre ton super super. Je vais l'attraper et le regrouper aussi. Maintenant, je vais le dissocier. Je vais cliquer avec le bouton droit de la souris. Et dissociez. Maintenant, je devrais pouvoir sélectionner le texte et la flèche. Supprimez la flèche, supprimez le texte. Et je vais étirer, sélectionner l'élément d'arrière-plan, étirer jusqu'à ce qu'il est dit, moelleux vous aime. Je vais le faire monter un peu juste pour avoir un peu d' espace entre les deux. Maintenant, ça a l'air bien. Je vais aller au Commandement Minus. Maintenant, je vais sélectionner mon triple clic. Oui, oui, oui, oui. Oui. Je triple-click drivel Glick, Drew livre legging. Je suis un triple clic pour saisir juste le rectangle où il est dit « Tu es génial ». Et je vais aller à nos styles, vais rendre ce petit petit et rose ici. Parfait. Je vais prendre le texte. Vous êtes génial. Si vous ne l'obtenez pas, vous êtes au niveau du groupe. Triple-click, double-click room of like, ok, maintenant sont dans votre super. Nous allons voir mes styles ici. Nous allons choisir la couleur blanche. Encore une fois, je vais passer par triple clic, triple clic, triple clic. Vous pouvez également les sélectionner dans la palette de calques située à gauche ici. Mais je vais sélectionner la flèche. Et nous allons aussi rendre ça blanc. Ce que nous allons faire avec cette flèche c'est qu'on va la faire pivoter. Donc, si je passe la souris sur le coin de la flèche, vous devez zoomer pour cela. Si vous faites un zoom arrière trop loin, vous ne verrez pas changer votre souris. Il faut que tu ailles vraiment zoomer. Et si vous placez la souris sur n'importe quel coin d'un élément ou d'un objet, vous pouvez le faire pivoter en cliquant et en le faisant glisser. Nous voulons donc le faire pivoter à 180 degrés. air bien. Allons ternisser le mot Lycée, le placer ici. Et maintenant, nous avons l'accordéon ouvert. Une fois encore. Allez chercher iMac, couche de 22 ans ici. Il suffit de le déplacer pour s'assurer que ce haut est arrivé. Parfois, vous verrez que le haut semble être au-dessus de votre tableau artistique. Cela ressemblera à ça. On dirait qu'il est là. Vous allez regarder le prototype et vous direz : Pourquoi le haut n'est-il pas là ? Je le vois sur mon design, mais je ne le vois pas sur le prototype qui vous rend fou. Mais il suffit de déplacer le tableau d'art juste pour s'assurer qu'il est là-dedans. Et s'ils ne bougent pas sur le plan de travail et que vous ne le verrez pas sur le prototype. Je vais aller de l'avant et Commande C. Ceci sélectionne mon tableau d'art Command V ou Control V. Si vous êtes sur un PC, nous avons fière allure. Revenons en arrière. Passons à notre mode prototype. Cliquez en haut à droite ici, assurez-vous que nous avons le rectangle de départ à côté de celui qui indique que vous le faites. Cliquez, vous êtes génial. Et faites-le glisser sur le tableau d'art de l' iMac 22. Onclick. Qu'est-ce qui est dû pour l'animation ? Il suffit de faire instantanément. On a cliqué, naviguer jusqu'à un instant. Allons chercher celui qui est actif sur la droite. Allons le faire glisser sur ce tableau d'art. Même chose, onclick, accédez à instantané. Cela devrait s'ouvrir et se fermer. Cela ajoutera quelques effets sympas ici dans une seconde. Allons voir le prototype. Je vais aller en haut à droite. Je dois présenter votre super, ouvrez ça. Puis cliquez à nouveau dessus, restreignez, fermez-le. Mais il n'y a pas d'erreur de transition et il n'y a pas de choses intéressantes. Je vais vouloir mes produits, je serais cool. Nous allons l'ajouter. Attendez, tenez simplement vos chevaux. On va le rendre cool. 1 seconde. Revenons à notre design ici, et nous allons le rendre cool. On va le faire, c'est qu'on va aller voir ton génial. Je vais sélectionner le prototype ici sur l'animation. Nous allons faire de l'animation intelligente. Ça va rendre ça cool. Ne vous inquiétez pas de la facilité ni de la durée. Faites la même chose avec votre génial. Allez-y et sélectionnez la ligne de prototype ici. Allez sur Smart Animate. Allons voir si tout s'est passé ici. Cliquez dessus. On dirait un vrai accordéon. C'est tellement génial. conception n'est-elle pas cool ? C'est comme Bob Ross à l'avenir. C'est le prochain niveau, Bob Ross ici. Je peux juste voir ici et cliquer ici pendant des jours. Vous savez quoi, je vais juste cliquer dessus pendant un petit moment. J'espère que le vôtre ressemble à ça. Smart Animate devient assez fou lorsque vous exécutez cette fonctionnalité. Il y a une raison pour laquelle je vous ai fait groupe. Le moelleux vous aime. Et le moelleux adore la nourriture. Et assurez-vous également qu'il est groupé ici. Est-ce que parfois je vais voir si je peux reproduire ça. Ne me suivez pas. Je vais juste vous montrer que je vais dissocier tout ça. J'ai ici ces sections où il est dit Shu, Il t'aime, mâche, aime la nourriture et tout ça. Je l'ai dégroupé sur ce tableau artistique et je l' ai regroupé ici. Parfois, cela ne le rendra pas aussi lisse. C'était toujours bon. Vous pouvez voir qu'il y a un peu de décalage, même s'il n' y avait pas de claquement comme quand nous nous sommes regroupés. Je vais y retourner et défaire ça très vite. Ok, donc on est de retour là où tout était bien groupé. Retournez ici encore une fois. Assurez-vous qu'il s'agit d'un regroupement. Voyez cela, voyez comment vous obtiendrez cette belle transition en douceur. C'est parce que ce sont tous deux des éléments regroupés qui sont les mêmes éléments sur le tableau d'art. Lorsque vous utilisez la fonctionnalité Smart Animate, assurez-vous que ce que vous ne voulez pas animer est groupé et assurez-vous que le regroupement est le même sur chacune de ces pages. Donc, chacune de ces pages prototypes, assurez-vous que ces regroupements sont les mêmes. C'est, c'est une chose invisible qui se trouve dans Figma. Mais cela peut parfois vous rendre fou des raisons pour lesquelles votre transition n'est pas aussi lisse et aussi lisse. Et c'est généralement à cause des groupements. Donc, si vous rencontrez ce problème, regroupez simplement les éléments, puis faites des allers-retours entre ces deux pages ici et assurez-vous que les mêmes éléments sont regroupés et qu'ils devraient éventuellement y arriver. point. Regarde juste une fois de plus, regarde à quel point c'est lisse. Maintenant, allons dissocier tous ces trucs ici. Maintenant, regardez. Vous n'aviez pas ce genre accrocheur si bonté. C'est parce qu'il n'est pas groupé. Très bien, ça enveloppe les accordéons. Je vous verrai au cours suivant, nous allons parler de notre prochaine vidéo. Nous allons parler de la création de comptes et de la validation en ligne, que nous avons appris par le passé. Nous avons appris la validation en ligne sur le formulaire que nous avons fait. Je vous y verrai bientôt. Au revoir. 28. Créer -Web - Création de compte + validation en ligne: OK, c'est cool. Passons donc aux accordéons et passons à la création de comptes et à la validation en ligne. Encore une fois, je vais m'assurer que je suis sur l'onglet Prototype pour voir ce petit rectangle bleu. Si ce n'est pas le cas, vous êtes probablement dans l'onglet Design en haut ici. Passez au prototype. Commencez, allez-y et déplacez cela vers l'iMac One. Nous sommes maintenant dans l'exemple. Allons de l'avant et appuyez sur Play en haut à droite pour afficher le prototype. Nous allons entrer dans le prototype ici. Ce que nous allons faire, c'est que nous allons afficher un écran de création de compte où nous avons notre adresse e-mail et notre mot de passe. Et si vous cliquez sur mot de passe, une fois, nous avons une validation en ligne indiquant exigences relatives au mot de passe sont satisfaites à l'exception d'une. Et lorsque vous cliquez à nouveau, supposons que vous ayez ajouté ce dernier numéro deux, votre mot de passe. Toutes les exigences de votre mot de passe sont satisfaites. Vous appuyez sur Créer. Et nous avons un petit spinner dans le bouton pour créer votre compte. Et finalement, cela vous amènerait à la page d'accueil du site Bobo Me. Et vous pourrez commander un délicieux Bobo T à la livraison dans les dix minutes. OK, Cool. Nous avons donc appris que ce bouton devenait un fileur. Lorsque nous avons fait la classe de boutons, je voulais vous montrer comment construire cela dans un prototype en direct. Je vais aller en haut à gauche ici dans l'onglet différent haut où il est écrit le fichier de projet de modèles de conception. Cliquez sur ce bouton. Je vais passer un peu de l'exemple à celui qui dit que vous le faites. Je vais cliquer et faire glisser, les obtenir en mode d'onglet Prototype, pas en mode conception, en mode d'onglet Prototype. Cliquez sur le début et faites-le glisser vers l'iMac 20. Le prototype démarre sur cette page. Et le meilleur, c'est que nous n'avons même pas besoin de faire quoi que ce soit sur cette page. Nous voulons le faire, c'est simplement le copier. Quelqu'un qui détient Option. Cliquez et faites glisser le curseur. Je peux maintenir la touche Maj enfoncée pour la garder alignée et copier cette page. Nous voulons imiter cette page où le mot de passe Créer un compte est ciblé et à l'état de saisie du formulaire. Et nous voulons effectuer la validation en ligne qui montre que les exigences relatives au mot de passe sont respectées. Allons prendre ça. Cela est déjà groupé. Ce que nous pouvons faire, nous pouvons le dissocier, nous ne ferons pas quand il sera intelligent d'animer des choses. Donc, dissocions tout simplement. Vous pouvez cliquer avec le bouton droit. Vous pouvez effectuer une commande Maj G ou Control Shift G si vous êtes sur un PC ou si vous pouvez cliquer avec le bouton droit de la souris et simplement dissocier. Je vais sélectionner le rectangle et un mélange que je veux créer ici, juste, pas l' onglet de conception de prototype. Voyez la couleur du contour. Je vais cliquer sur cette couleur. Et je vais juste le rendre noir. Il suffit de le rendre noir. Je vais maintenant sélectionner les textes fantômes. Je vais cliquer là-dessus. Et je vais faire un quart huit ou je suis désolé. Commande ou commande Z. Commande Shift, Oui. OK, c'est cool. Option, désolé, option a pour les puces. Et puis je vais faire un trait d'union en haut et faire cette couleur ici. Vous pouvez voir qu'il est réglé sur gris pour Cassons ça. Nous allons le détacher, le casser. Faisons juste le noir. Facile et facile. J'espère que c'était facile. Allons de l'avant et sélectionnons ici le texte qui indique les exigences du mot de passe. Je vais avoir l'outil de sélection. Je vais juste faire un triple clic dessus. On s'est fait attraper, attrapé, attrapé, triple-clic. Sélectionnez au moins deux lettres, au moins jusqu' à une majuscule. Je suis juste en train de cliquer et de faire glisser jusqu'à Juju. Je vais voir mes couleurs ici. Je vais choisir une belle couleur verte. Et je vais les transformer en vert. Ça devrait être bien. Allez zoomer un peu. Vous voyez que j'ai ces petits cercles ici. Sélectionnez les cercles que je vais garder le quart de travail. Enlevons le coup. Le trait en ce moment est ce cinq gris, il suffit de retirer le trait. Allons au remplissage. Et faisons aussi de cela un vert. Il peut s'agir du vert assorti ou d'une couleur différente, le vert. Ce n'est pas grave dans le texte. Comme bonbon vert pomme. Oui, c'est plutôt cool là. Parfait. Nous affichons maintenant la validation en ligne. Nous montrons à l'utilisateur que vous avez un mot de passe, il est beau, mais vous devez ajouter un numéro. Nous allons donc un peu dézoomer. Je vais copier ce tableau d'art, iMac 23. Maintenez l'option sur mon clavier, obtenez la double flèche, cliquez et faites glisser l'arc. Je t'ai acheté un nouveau tableau d'art. C'est vrai. Bon, maintenant, nous sommes de retour dans le troisième tableau d'art. Si je fais un zoom arrière, passez au troisième. Allons ajouter quelques autres options huit. Vous y allez. Et voyez où cela indique au moins un chiffre. Allons de l'avant et saisissons ça. Maintenant, nous allons passer à Remplir la couleur, mais vous êtes comme une zone. Comment obtenir ce vert que nous venons de créer. Alors que nous pouvons le faire de deux façons. Nous pouvons saisir la pipette et vous pouvez la placer sur l'une des couleurs vertes. Sélectionnez et vous pouvez voir la pipette et en haut à droite, sélectionnez cette couleur verte. C'est une seule façon. Mais vous pouvez voir que c'est éteint parce qu'il ne vous donne pas la couleur exacte. C'est pourquoi nous faisons des styles. Le meilleur moyen est de sélectionner ce vert. Allez-y et voyez où il est écrit 008937. Faisons de cela un style. Allez-y et cliquez sur les quatre petits points ici style. Maintenant, faites le signe plus. Faisons en sorte que celui-ci devienne vert. Bon, maintenant pour sélectionner le texte ici, au moins un, allez à nos quatre petits points ici. Vous pouvez voir que la couleur verte que nous venons est une bibliothèque de styles. Appuyez sur Greenie, Bang. Mais maintenant, allons faire la même pipette ici, je vais zoomer. Je l'utilise, je sais que je l'ai fait aussi vite. J'utilise Z sur mon clavier pour zoomer sur cette zone. Sélectionnez le dernier cercle, voyez le mot gratter cinq traits, supprimez-le. Je vais aller dans le blanc. Et c'est là que la pipette. Parfait. Allez-y et cliquez sur la pipette dans la fenêtre de dialogue des couleurs, faites-la glisser et saisissez maintenant ce vert. Cela va marcher. Nous avons ici l'état où vous avez la valeur par défaut et que vous cliquez sur votre type dans votre mot de passe, vous devez ajouter un numéro. Vous avez satisfait à toutes leurs exigences. Copions un autre écran ici. Je maintiens l'option sur mon clavier et le décalage, je suis une copie qui achète l'écran. Allons de l'avant et sélectionnons la couleur grise en haut. Je vais donc cliquer là-dessus. Voici notre bande grise contour C D. Au fur et à mesure que vous apprenez la meilleure façon de réutiliser vos couleurs, créons un style pour le gris. Créez un nouveau style. Appelez ça gris. gris. Bien, super. Eh bien, est-ce qu'il y a cool ? OK, c'est cool. Allons de l'avant et allons dans les balles ici. Supprimez le trait d'union, la barre oblique. ne sélectionnons que le rectangle. Revenons à nos styles. Rappelez-vous les quatre petits points à côté du coup ici. Faisons en sorte que ça soit aussi gris. Je vais le récupérer à cet état par défaut. Je vais sélectionner ce bouton, il est groupé. Je dois donc double-cliquer, cliquer sur vrai. Tout va bien. Bon, maintenant je dois créer, supprimer ça. Supprimer sur le clavier. Boom. Si c'est ce que vous avez fait, vous avez supprimé le bouton. Cela signifie que vous n'avez pas fait de triple clic, de triple clic, de triple clic, de triple clic. Quelqu'un pour zoomer. Je vais aller voir celui qui est en haut ici. Je vais choisir cette fileuse. Je vais à Command C, comme dans Cat, ou Control C. Si vous êtes sur PC, sur Mac, je vais m'assurer de sélectionner ce tableau d'art ici. 25, je suis sur un Mac, donc je vais commander V, comme dans Victor, et il va coller en place. Si vous êtes sur un PC, vous effectuez le contrôle V et il sera collé en place. Si ce n'est pas le cas, c'est bon. Il suffit de le déplacer au-dessus de ce bouton. Prenez ce tableau d'art. Je suis à 25 ans. Déplacez-le. Assurez-vous que tout bouge avec le tableau d'art. Si ce n'est pas le cas, il n'est pas dans le tableau artistique, il n'apparaîtra pas dans le prototype. Très bien, assemblons ce truc ensemble. Surpiqûres assez simples. Prenez le mot de passe créatif, accédez à votre prototype, en haut. Faites glisser le bras GUI vers celui-ci. Nous voulons Onclick, nous ne voulons pas de Smart Animate. Il suffit de faire instantanément. Fermez-le. Passez au suivant. Tout ce que nous devons faire, c'est le formulaire ici. Faites-le glisser ici. instantané. Tout ce dont nous avons besoin onclick naviguez vers instantané. Le même ici. L'onglet Prototype a attrapé un petit bras d'interface graphique connecté à l'écran suivant, surclic naviguez vers instantané. Et cela devrait être une validation complète en ligne avec le spinner bonus sur le bouton. Assurez-vous d'avoir l' urine, l'onglet Prototype. Assurez-vous d'être à côté de l'U du. Appuyez sur la couche iMac 20 ici, appuyez sur Lecture, cliquez pour créer un mot de passe, Validation de ligne. Encore une fois. Nous avons ajouté ce numéro. Et nous devons encore faire le Create. Revenons sur l'onglet supérieur gauche et revenons à notre fichier de conception. Vous pouvez voir cet écran en les sélectionnant simplement. Lorsque vous avez cliqué sur l'onglet Prototype, vous verrez les bras GUI prototypes connectés. Nous avons ce lien. Nous avons fait la mauvaise chose. C'est pourquoi vous pouvez voir que j'ai fait le formulaire ici. Vous pouvez également effectuer la période de commande pour déplacer les outils, comme pour tout masquer dans Figma, commande Barre d'espace de la période. Vous pouvez voir comment j'ai mis ce bras sur celui-ci, le champ de formulaire ici. Et celui-ci ne devrait pas être le champ de formulaire, mais le bouton. Je vais faire une autre période de commande, ou si vous êtes sur un contrôle PC, une période de contrôle. Je vais supprimer ce bras. Donc, comment vous le supprimez comme quelques choses, vous pouvez passer aux interactions ici en haut, je suis juste d'appuyer sur moins et cela va le supprimer. Ou vous pouvez simplement cliquer sur le bras de l'interface graphique. Ne le connectez à rien. Il suffit de lâcher votre souris, cliquer et de glisser, il suffit de lâcher prise. Et maintenant, allons chercher le bouton Créer et faites-le glisser là-bas, cliquez sur Naviguer à la place. Revenez à notre prototype ici, nous pouvons appuyer sur Play. Permet d'accéder automatiquement à l'onglet Prototype. Appuyez sur Créer. Regardez. C'est plutôt génial. Je vous verrai sur la prochaine vidéo. Nous allons couvrir les listes déroulantes. Je vous y verrai. Au revoir. 29. Créer - Web - Débit : la liste de vos sites: Très bien, Bienvenue dans la prochaine vidéo où nous allons couvrir les listes déroulantes. Encore une fois, rappelez-vous que le mode d'onglet Prototype attrapé un petit rectangle de départ. Faites glisser celui-ci jusqu'à l'exemple de la liste déroulante. Cela va commencer le prototype à partir de cette section ici afin que nous puissions voir à quoi ressemble la liste déroulante. Allez-y et appuyez sur Play en haut. Très bien, voici notre liste déroulante. Nous voulons sélectionner un état. Cliquez sur le menu déroulant, la flèche passe à 100, 80 degrés lorsque le basculement tourne. Et puis voici ce que nous allons comprendre dans Figma, c'est que je peux faire défiler juste dans le menu déroulant. Comme une promenade dans toutes ces options ici. Et si je clique sur, disons Californie, vous verrez la Californie. Je clique à nouveau dessus. Je vois le menu déroulant. Je peux cliquer en arrière. Assez simple, mais cela a aussi une certaine complexité, mais cela devrait être assez facile. Revenons en arrière et vérifions que nous sommes en mode prototype ici. Prenez le bras de départ, apportez-le à vous. À faire. Et je vais zoomer un peu plus avant. J'ai ajouté tout le texte ici pour tous les états à droite. Allons-y un peu plus loin. Il suffit de déplacer ça. Je vais prendre le tableau d'art iMac 21 ici. Je n'attrape pas les éléments à l'intérieur, attrape pas le tableau d'art. J'ai l'option. Je vais le copier à droite. Nous allons obtenir l' état ouvert de la liste déroulante. Donc, la première chose que vous pouvez voir telle qu'elle est groupée, dissociez tout, droite G, cliquez avec le bouton droit de la souris pour dissocier. Sélectionnons l'espoir qui devra peut-être le dissocier à nouveau. ne sélectionnons que la carotte ou la flèche et faites-la pivoter à nouveau. Vous devez zoomer avant. Je tiens Z, je fais un zoom avant. Allez-y et retournez ces 180 degrés. Juste comme ça. Nous voulons faire cette petite boîte blanche ici. Je vais aller dans l'outil Rectangle. En haut à gauche, vous verrez que vous disposez des outils de forme. Vous avez des rectangles et des lignes, des flèches et ellipses, des polygones et des étoiles et bien d'autres choses. Mais passons dans l'outil Rectangle, il suffit de cliquer dessus. Il sera par défaut comme gris génial. Je vais simplement cliquer et faire glisser mon tableau d'art. Une fois encore. Déplacez le plan de travail, assurez-vous que les cases grises sont là. Ça a l'air bien. Maintenant, allons donner une ombre à cette boîte grise. Mais avant de le faire, faisons-le blanc. Revenez donc à nos styles ici. Prenons notre blanc. Nous ne pouvons pas le voir. Allons de l'avant et passons à nos effets. Si vous êtes sur l' onglet Design, suivez-moi ici. Je vais aller aux effets. Je vais ajouter un effet. Il va s'agir par défaut de l'ombre portée. Rappelez-vous ce que j'ai dit sur ma classe Shadow, ne veux jamais utiliser les ombres portées par défaut. Vous pouvez voir ce que j'ai fait ici. Il y a un peu comme, ça ressemble à une ampoule ou à une icône rayonnante du soleil. Il s'agit de vos paramètres d'effets. Nous voulons modifier les états par défaut de cette ombre portée. Vous en avez donc quatre sur le Y, qui est le bas, la ligne horizontale. Que faut-il faire et faire cinq sur le x, qui est la section verticale, cinq sur le y. Alors, que faisons-nous toujours ? Je ne sais pas ce que nous faisons à ce stade d'erreur ? Nous ajoutons du flou, beaucoup de flou. Comme 30 ans, je suis en quart de travail. Vous pouvez simplement taper 30. Allons juste 30 ans. Allons-y un peu moins que ça. Allons en faire 20. OK, c'est cool. Ajoutons maintenant un peu de gris bleuté aux ombres trop fortes. On dirait bien que c'est là. C'est 909. Vous pouvez juste n' importe où là-haut. C'est très bien. Comme si cette zone allait bien. OK. Fermez cette option fermez la boîte de dialogue Ombre portée. Parfait. Nous avons eu notre ombre portée. Allons pousser ça un peu sur les flèches du clavier. Vous y allez. Je vais également saisir l'outil rectangle, cliquer et faire glisser et faire simplement le petit bras de défilement. Encore une fois, nous ne pouvons pas utiliser Figma pour faire ce défilement comme il le ferait quand il a été construit. Mais cela aide à informer l' utilisateur et le prototype. Si nous devions tester cela, que cette information, tous les états de droite sont défilables. Ou vous ne pouvez pas faire ça, n'est-ce pas ? Comme quand je suis là-dedans, je ne peux pas faire défiler. C'est un autre, c'est un peu plus. Vous pouvez, mais c'est un autre cours à l'avance. Classe et probablement pas la peine de faire défiler cette chose. Petite, petite forme grise là. Je vais prendre tous les textes ici à droite. Je vais le faire glisser dans mon dossier. Vous pouvez voir quand il est dans le fichier car il ne devrait pas sortir du tableau d'art. Je vais traîner dans mon tableau d'art. Il devrait se démarquer comme ça. Il faut le recadrer, non ? Donc, quand je rentre ici et que je le traîne, je veux qu'il y aille et qu'il y aille, c'est comme ça. Faites-le descendre un peu ici, assurez-vous qu'il soit recadré. Je vais zoomer un peu plus avant. Voici le botteur ici. Est-ce que ce que nous allons faire, c'est que nous allons cliquer dessus avec le bouton droit de la souris. Peu importe où vous le positionnez. Vous pouvez le placer n' importe où sur la photo. Cela n'a pas vraiment d' importance pour l'instant. Cliquons dessus avec le bouton droit de la souris et passons à la sélection du cadre une fois de plus, n'est-ce pas ? C'est très important. Super, super important. Cliquez avec le bouton droit. Ensuite, nous effectuons la sélection de cadres. Ok, super. Maintenant, cela a créé un cadre. Si vous regardez dans la palette des calques à gauche, nous avons un cadre. Et si vous cliquez et ouvrez cela, nous avons tous les états ici, vous n'avez pas à le faire. Je vais commander Z de revenir en arrière. Vous pouvez donc le voir. Voyez comment sur les calques, j'ai tous les textes ici pour la boîte de dialogue à peu près pour le texte et tous les états ici. Si je clique dessus avec le bouton droit de la souris, je vais l'encadrer. Et c'est presque comme un groupement. Mais le regroupement de cadres est un peu différent d'un groupe. Maintenant, ce que nous voulons faire, c'est de zoomer et de saisir le bas de cette image. Je vais donc le sélectionner. Je vais prendre le fond. Et je suis sur un Mac, je vais tenir le Commandement. Alors que je garde le commandement, je repousse ce cadre vers le haut. Ça devrait ressembler à ça. Si ça ressemble à ça. Oui, tu vas bien. Ok, donc oui, assurez-vous juste que vous avez le commandement. Assurez-vous que vous disposez du calque de cadre. Cliquez dessus et faites-le glisser vers le haut. Ensuite, sur la droite, nous avons notre section de cadre. Je suis dans l'onglet Design. Section de cadre. C'est peut-être un peu compliqué, mais il va bien. Il va bien. Eh bien, nous voulons le faire, c'est le contenu du clip. Que va-t-il faire ? Il va couper le contenu. Cette monture. Voyez comment cela a fait cela. Qu'est-ce qui se passait encore une fois ? Je vais le faire rapidement cette fois. Je viens d'avoir mon outil de texte. J'écris ou simplement ma boîte de dialogue de texte. Je clique avec le bouton droit de la souris sur Je garde le commandement. Si vous êtes sur un PC, vous contrôlez le clic et le glisser-glisser. Apportez cette boîte. Je suis allé dans la bonne zone de conception, le contenu du clip, le boom. Maintenant, faites-le glisser sur le dessus de votre liste déroulante. Et ce que nous voulons faire maintenant, c'est de garder le commandement ou le contrôle. Encore une fois, si vous êtes sur un PC et que vous recadrez ces informations dans la boîte de dialogue déroulante. Tout comme ça. Et puis saisissez la position supérieure, en maintenant à nouveau le Commandement. Si vous faites cela, vous n'avez pas le commandement. Maintenez la touche Commande ou Contrôle. Si vous êtes sur un PC et déplacez-le en haut à droite. Si ce n'est pas le cas, si vous ne tenez pas cela, vous le saurez car vous déplacez la zone de texte. Nous voulons obtenir la commande de couche de trame. Je vais aussi faire sortir un peu la gauche. Vous y allez. Bon, donc voyons le prochain état que je vais traîner. Je vais copier la première page ici à droite, juste la page par défaut. Et tapons en Californie, vous pouvez mettre dans l'état que vous voulez. Et je vais rendre ça noir. Je vais y retourner pour casser la couleur pour ici à droite ou le remplissage et la rendre noire. Ok, parfait. Nous avons eu cette idée de la liste déroulante. Maintenant, allons assembler cela contre Select et assurez-vous que votre départ se trouve dans la section « Vous faites ». Allez chercher l'état, faites-le glisser vers le tableau d'art suivant surclic, accédez à la perfection instantanée. Maintenant, sélectionnez le calque de texte ici et faites-le glisser vers le tableau suivant. Onclick, accédez à la perfection instantanée. Allons voir ça, puis nous allons ajouter une autre chose. Allez-y et allez au sommet juste ici. Appuyez sur Play. Cliquez sur votre liste déroulante et vous pouvez voir qu'il ne fait pas défiler. n'y a pas de défilement en ce moment. Appuyez sur la Californie. Boom. Ok, ça marche bien. Ce que nous devons faire, c'est faire ce défilement. Maintenant, allons chercher ce texte ici. Où allons-nous produire ? Si vous l'avez sur le design, vous verrez qu'il ressemble à ceci. En mode prototype ici, voyez où il est écrit défilement par débordement. J'ai donc sélectionné cette boîte, faites un défilement vertical. Revenons maintenant à nos prototypes. Cela commence donc par la page de début. Alors, allez sélectionner la couche iMac 21. Très bien, revenons à leur page par défaut. Appuyez sur Play. présent. N'allez pas sur le prototype, nous devons le recharger. Il suffit d'appuyer sur Lecture ici, puis de cliquer sur cette liste déroulante. Vous devriez pouvoir faire défiler cela, vous pouvez également cliquer et faire glisser et regarder, il y a tous les états. Easy-Peasy cliquera sur la Californie. Boom. N'est-ce pas cool ? Très, très cool. Prenons la contribution de l'État de Californie. Copiez celui-là aussi. Maintenant, allons sélectionner notre liste déroulante. Je vais sortir du mode prototype. Je vais revenir au mode design. Il suffit de sélectionner toutes les zones déroulantes. Appuyez sur C ou sur Commande C ou sur Control C si vous êtes sur un PC. Et allons sélectionner le calque que nous venons de copier. Celui-ci est iMac 25, et je vais, je suis sur un Mac, donc Commande V, si vous êtes sur un PC, Control V, collez ça en place. Maintenant, allons sélectionner l'état actif, donc nous venons d'avoir celui qui était ouvert. Vous appuyez sur la Californie. Nous avons l'état actif de cette liste déroulante. Allons le connecter à celui-ci en cliquant et naviguer. Et puis ça devrait déjà être branché ici. Super. Vous pouvez maintenant voir à quoi cela ressemble si vous cliquez de nouveau dans le menu déroulant et que vous sélectionnez à nouveau la Californie. OK, c'est cool. C'était l'achèvement complet de tout pour le web. Je vous verrai dans la prochaine vidéo où nous allons passer aux prototypes mobiles et nous allons prototyper certaines interactions mobiles. Je vous y verrai. Au revoir. 30. Créer - Iphone - modal plein écran: Maintenant, vous êtes probablement un Figma Pro. Tu te débrouilles bien à Figma. Nous allons le faire, c'est que nous allons passer de leur prototype Web ici. Par conséquent, en haut à gauche, vous devriez avoir des pages en haut. Nous allons passer au prototype mobile, et c'est les mêmes fonctions que nous allons entrer. J'ai déjà tout cela pré-construit. Ça devrait être amusant. Nous allons le faire ensemble. Je l'ai déjà fait. Si vous êtes sur l'onglet Design, il ressemblera à ceci. Si vous êtes à nouveau sur l'onglet Prototype, nous avons ce rectangle de départ ici. J'ai déjà le premier prototype prêt à venir ici, et nous le ferons sur le second. Allons donc jeter un coup d'œil très vite. Il suffit d'appuyer sur Sélectionner un iPhone, le calque ici. Appuyez sur Play. Cela va ouvrir un nouveau prototype. Vous pouvez voir et voir comment cela s'est fendu. Et puis le x glisse vers le bas en mode mode plein écran avec un mouvement qui monte , puis se déplace si cela tombe en panne. C'est assez lisse. Et aussi facile. Encore une fois, la première chose que je vais faire est de m'assurer que nous sommes dans l'onglet Prototype en haut à droite, faites glisser le premier. Allez-y et poussez ça ici. Allons chercher un nouvel outil de cadre ici en haut. Nous l'avons fait lors du dernier prototype Web. Va prendre le cadre. J'utilise l'iPhone 11 Pro X ici. Avec l'outil Frame sélectionné. J'ai cliqué sur l'accordéon de l' iPhone ici, et j'ai fait Pro X. Et si vous cliquez simplement dessus, il vous déposera un tableau d' art. Passons à nos couches ici et donnons un nom à celui-ci. Appelons ça le modal. OK, c'est cool. Allons chercher ce tableau d'art ici. Attrayons le haut. Allez-y et placez la commande C, la commande V. Et prenons la commande x C ou le contrôle C. Si vous êtes sur un PC. Allez-y et placez ça ici. Nous avons donc toutes les pièces ici. Super facile. Assurez-vous que ce x n' aille pas sur cet écran ici. Il suffit donc de supprimer l'interaction. Vous pouvez saisir le bras de l'interface graphique et simplement le retirer. Nous allons sélectionner une vue. Nous allons commencer l'onglet Prototype. Cliquez dessus à l'endroit où il est dit, bonjour, nous avons sur le robinet, donc il sera par défaut. Ces écrans proviennent, si vous vous rappelez quand nous avons fait la sélection du cadre, nous sommes passés aux écrans de l'iPhone. Lorsque vous passez en mode prototype, il sait maintenant que vous êtes allumé, vous utilisez des appareils mobiles. Au lieu de OnClick. Maintenant, il est en haut ou en glissement et il vous donne les mêmes fonctions, mais passe simplement d'un onclick à un non-tapotement. C'est assez facile ici. Nous l'avons déjà fait auparavant. Au lieu de naviguer vers, ouvrons. En fait, gardez ça la même chose. navigation deux est la même. Sur le robinet. Ce que nous voulons, c'est dans l' animation, l'animation ici, nous voulons qu'elle se déplace et non pas de gauche , de droite ou de bas. Nous voulons le monter. Faisons cela et nous reviendrons jouer avec ça un peu. Nous veillerons à ce que cela bouge, et non pas qu'il déménage. Et puis allez-y et prenez le x, faites-le glisser vers l'écran sur lequel nous étions juste et ne vous déplacez pas. Nous voulons déménager. Nous ne voulons pas redescendre, alors déplacez-vous vers l'extérieur et vers le bas. Bon, allons sélectionner l' écran de démarrage que nous avons ici, le plan de travail appuie sur Lecture en haut à droite. Il va nous emmener au prototype. Nous devrions avoir la même chose que vous venez de voir ici. Et le x va descendre, monter, descendre. Ce qui se passe ici est donc intéressant. Vous serez en mesure de savoir si je sélectionne le x et que je retourne au prototype et que je ne déménage pas, j'emménage. Regardez ce qui se passe. Je vais revenir à notre prototype ici. Vous pouvez simplement appuyer sur Lecture si vous le souhaitez. Ça a l'air bien. Maintenant, regardez le x. Voyez comment l'autre écran est passé au-dessus de lui. Regardez que l'écran se déplace sur le dessus. C'est bizarre, vous n'en auriez jamais, vous ne verrez jamais cela dans aucune application, application mobile que vous utilisez. C'est parce que nous avons senti ou que vous n'avez pas échoué, mais nous avons oublié de mettre le x non pas dans un état de déménagement, mais dans un état de déménagement. Maintenant, revenons en arrière. Vous y allez. Cela devrait suivre n'importe quelle façon l'écran entre en jeu. Il devrait également se déplacer dans le même ordre opposé. Il s'installe et se déplace. Essayons un autre. Allons cliquer sur le bouton d'affichage ici juste pour s'amuser z, disons que cet écran va entrer par la gauche. Allons maintenant regarder cette vue pressante, voir comment cet écran est entré par la gauche. X descend. C'était bizarre parce que l' écran est arrivé de gauche. Pourquoi est-ce qu'il baisse quand il bouge ? Même chose, nous pouvons faire le X aller cliquer sur l'interaction ici en haut à droite ou sur le bras de l'interface graphique ici. Et au lieu d'être mélangé, pas, pas d'emménager, de sortir. Et puis ce qui se passe au lieu d'entrer par la gauche, nous voulons qu'il et se déplace de gauche à droite. Et cela vous donne un petit exemple. La figma gnose est un peu déroutante. Ils ont dit : Ok, c'est ce que vous allez faire, quelqu'un va ressembler. Encore une fois, déplacez vers la droite. Maintenant, vous allez le faire glisser vers et le x glissera vers l'extérieur. Et généralement, pour cette interaction, vous ne voudriez pas vraiment le faire, vous voudriez qu'une flèche, comme la flèche remonte, puis elle reviendra. Ensuite, pour l'autre, il a emménagé quand il a été déplacé vers le bas et il s' agissait d'un mouvement vers le haut. C'est là que vous voulez le X, non ? Vous voulez donc fermer SlideUp X. Xs est le modèle de conception approprié pour celui-ci. Ok, cool, c'était des modaux plein écran. Allons faire une liste déroulante mobile, qui est différente d'une liste déroulante Web la vidéo suivante, et je vous y verrai. 31. Créer - Iphone - Dropdown: OK, c'est cool. Bienvenue de retour. Une fois encore. Un peu comment il a commencé la vidéo et s'assurer que vous êtes sur l' onglet Prototype ici en haut. Déplacez ce petit rectangle de départ vers le bas vers celui où il est indiqué sélection déroulante mobile , superposition inférieure. Nous avons l'exemple ici. Allons de l'avant et sélectionnons ce tableau d'art. Appuyez sur Play sur le prototype. Et vous verrez que nous avons une interface plus sombre et une interface déroulante sombre. Et c'est différent de la liste déroulante que nous avons faite sur le Web. Si vous vous en souvenez, le menu déroulant ici de lapin contient juste un petit menu déroulant près des champs de formulaire. Et vous pouvez faire défiler ici. Pour les mobiles, c'est différent. Il prend la totalité de l'immobilier de l'appareil et il arrive par le bas. C'est un menu déroulant modal. C'est différent d'une liste déroulante Web. Et disons que je sélectionne simplement parce qu'il est plus facile de faire défiler ici. Disons que je sélectionne le rouge. Nous avons maintenant sélectionné le menu déroulant. Nous pouvons faire une autre version d' une liste déroulante où vous avez un x ici pour le supprimer. Et c'est là que tu l'as. Allons construire ça. C'est assez simple. Encore une fois, comme d'habitude, assurez-vous d'être sur l'onglet Prototype. Saisissez le rectangle de départ, déplacez-le vers l'endroit où il dit le faire. Et j'ai à peu près l'écran avant et après ici. Vous pouvez voir où il est indiqué Sélectionner la couleur et le rouge. Ce que nous voulons faire ici, c'est que nous voulons créer cette section déroulante. Ce que nous allons faire, c'est prendre l'outil Frame Tool, aller sur iPhone Pro X, suffit de cliquer dessus. Il va baisser la même taille de tableau d'art. Je vais le placer entre la liste déroulante avant la liste déroulante par défaut et entre la valeur par défaut active ici. Ce que je vais faire, c'est simplement réduire ça. Je vais cliquer en haut et simplement cliquer et faire glisser. Il suffit de le rendre plus petit. OK, c'est cool. Donc, nous allons juste copier certains de ces trucs ici. Nous avons une saveur choisie. Je vais commander C ou contrôler C. Allons de l'avant et coller cela dans la commande V, comme dans Victor ou Control V. Si vous êtes sur un Mac. Utilisons l'outil de ligne pour le reste de ce truc. Encore une fois, nous allons passer aux outils de forme en haut. Saisissez plutôt la ligne. Il suffit de cliquer et de faire glisser. Vous n'avez pas encore besoin de faire un tableau d' art complet ici. Assurez-vous simplement qu'il se trouve dans le tableau d'art en cliquant sur le tableau et en le déplaçant. OK, c'est cool. Maintenant, allons le faire plein. Vous devriez le voir, ne devrait pas être en mesure de le voir s'il est plus long que le tableau d'art. Si cela ressemble à ceci, vous pouvez voir les lignes qui sortent du tableau d'art. Il n'est pas dans le tableau d'art et déplacez le plan de travail. Voir. Nous voulons nous assurer que c'est dans le tableau d'art. Faisons de cette ligne noire une opacité de 10%. Vous pouvez donc voir comment j'ai fait cela. Je ne vais pas me laisser coller ça très rapidement. Nous avons pris cette ligne noire, allés aux calques où il est dit passer, il y a un, un 100%, il suffit de faire 10%, puis d'appuyer sur Entrée sur votre clavier. Je vais saisir ce texte et je vais cliquer trois fois dessus à droite, prendre ce texte. J'ai maintenu l'option, j'ai cliqué et je l'ai fait glisser vers le bas. Triple-clic. Nous appellerons ça rouge. Et maintenant, allons-y. Maintenant que nous y sommes et que nous avons lu la sélection, passons à notre couche de polices ici. Faisons comme 30. Vous y allez. Maintenant, je vais en faire une couleur, n'importe quel rouge que vous voulez. Reprenons le prochain. Maintenant, vous voyez comment j'ai fait ça. Juste Option, maintenez enfoncé, cliquez et décalez. Triple-clic. J'ai tous mes calques de texte ici. Je peux aligner à gauche, aligner au centre, aligner à droite. Vous pouvez le rendre régulier, audacieux, ce que vous voulez. Je vais les garder tous cohérents. Faisons en sorte que celui-ci soit bleu. Je vais rendre n'importe quelle couleur bleue ici. Oups, je ne l'ai pas sélectionné, alors triple clic, assurez-vous que ce texte est sélectionné. Va au bleu. Maintenant, allons faire du vert. Même affaire. C'est assez facile. Je vais juste utiliser le vert que nous avons déjà utilisé. Je ne sais pas. Allons faire du violet. Je vais casser la couleur que nous venons d'avoir. Va chercher le violet n'importe où. Vous pouvez faire n'importe quelle couleur que vous voulez ici. Bon, donc allons prendre les flèches sont les lignes et c'est plutôt cool. Regardez ça. Je vais le faire. Je vais activer l'option double flèche sur mon clavier. Cliquez et faites glisser la touche Maj, droite ? Donc c'est sans décalage, sans décalage, je ne peux pas me déplacer et juste lui donner un bon horizontal. Je regarde 70 pixels là-bas. Vous pouvez voir comment mes pixels sont là. Je regarde 70 pixels. Vous pouvez tout faire, c'est très bien. Et puis lâchez prise. Et puis, je suis sur un Mac, je fais la commande D, ou si vous êtes sur un PC Control D et il copiera le même espacement. Vous y allez. Maintenant, allons les intégrer. Centré dans ces espaces. Ils sont violets. OK, Cool. Très bien, donc maintenant, nous devons revenir à notre prototype, sélectionner la couleur préférée, cliquer et la faire glisser ici. Et nous l'avons fait avant de passer au robinet. Et voici le vrai que nous voulons au lieu de naviguer ici en haut à droite. Et les détails de l'interaction, si vous ne le voyez pas, cliquez simplement à l'endroit où il est indiqué Tap. Nous voulons une superposition ouverte. Et voyez comment il est centré par défaut. Nous voulons en bas au centre ici. Fermez, sortez, ajoutez de l'arrière-plan. Vous pouvez en faire 70. Appuyez sur Entrée. Nous ne voulons pas, nous voulons passer du haut en sachant déjà ce que nous voulions. Super. Parfait. En ajoutant le rouge de saisie, cliquez dessus pour passer au suivant. Et nous ne voulons rien d' autre qu'un instant. Sur le robinet. instantané devrait être très bien. Allons appuyer sur Play en haut à droite. Voici votre liste déroulante modale. C'est cool. Et sélectionnez le rouge et ça disparaît. Bon, passons au X juste que nous puissions le fermer et jouer avec. Alors, saisissez à nouveau le x, il est groupé. Donc, triple clic. Faites-le glisser ici. Au lieu de cela, en haut. Oui, ça a l'air bien. Cliquez sur le X car revenons à la liste déroulante Sélectionner la couleur, modal , mobile, pain, X, sucré, facile à utiliser. Je vous verrai dans la vidéo suivante. Nous allons passer en revue une fenêtre contextuelle modale devrait également être facile. Je vous y verrai. Au revoir. 32. Créer - Iphone - Modal, barre de titres et menu: Très bien, Bienvenue dans la vidéo suivante. Nous allons faire une fenêtre contextuelle ou un modal sur un appareil mobile. Super facile. Nous l'avons déjà fait. Allons de l'avant et prenons ça, commençons par ici et faites-le glisser vers le bas. Nous l'avons fait pour le Web. Je veux juste le faire rapidement pour l'appareil mobile. Sélectionnez le tableau d'art ici, appuyez sur Lecture. Une fois encore. Maintenant, nous revenons sur un fond blanc. Voici votre bouton et jetez un coup d'œil. Il y a ton modal. Appuyez sur Fermer. OK, c'est cool. Allons voir ça par ici. Assurez-vous que vous êtes dans l'onglet Prototype. Même affaire. Appuyez également sur le bouton Démarrer vers le bas ici. Vous avez déjà toutes les sections ici. Le bouton haut et le bouton de fermeture. Ce que nous voulons faire ici, c'est aller chercher l'outil Plan de travail ici. Allez dans le cadre. Faites la même chose. Iphone 11 Pro X sur la droite. Outil de cadre, iPhone Pro X. Maintenant, rendons-le un peu moins grand, un peu moins large. chose comme ça. Vous le saurez parce que vous pouvez le déplacer ici et voir. Oui. OK. Nous pouvons toujours ajuster cela plus tard. Il suffit de placer le haut ici, mais le x, et mettons le x en haut à gauche, pour faciliter la tâche de l'utilisateur. S'ils ont la main droite qui maintiennent leur appareil, ils peuvent utiliser la main gauche et le fermer en haut. Nous l'avons fait plusieurs fois, je pense déjà. Allez-y et saisissez le bouton de texte, faites-le glisser vers ce cadre où il est indiqué sur le bouton, rappelez-vous que nous voulons faire, qu'est-ce que c'est ? Ouvre la superposition, ouverte sur la droite. Il peut être centré une fois centré, fermé lorsque vous cliquez à l'extérieur. Allons en faire 70. Nous pouvons faire moins, nous pouvons faire 50 % d'opacité à ce stade. Faisons une transition dissoute ici. Maintenant, allons attraper le x qui le ferme, faites-le glisser sur ce plan de travail sur le robinet. Naviguez pour dissoudre. Ça devrait être parfait. Sélectionnons ce plan de travail, appuyez sur Play. Appuyez sur le texte. Il y a ton modal. Vous pouvez appuyer sur X pour le fermer. Il a l'air un peu trop large. Allons l'éclaircir un peu. Donc je vais prendre le tableau d'art, le pousser un peu, mettre ce point de haute technologie. Je vais en fait réduire un peu l'espace vertical aussi. Nous pouvons également sélectionner le tableau d'art ici et aller dans votre onglet Design et là où vous l'avez. Encore une fois, je suis sélectionné la carte d'art modal passée du prototype au design. Dans la zone du cadre, il y a cette petite icône d'un coin appelé rayon d' angle. Vous pouvez arrondir ça. Faisons comme 15. Vous y allez. Il va arrondir les bords de ce tableau d'art. Je vais y retourner. Faisons notre onglet prototype ici en haut. Appuyez sur Play. Vous y allez. C'est mieux. Vous pouvez cliquer en dehors de ce modal et le fermer. Cliquez sur le X pour le fermer. Bing, bada, boum, tu es un pro. Vous l'avez déjà fait auparavant. Passons à autre chose. Bon, donc je vais prendre le départ ici. Au lieu de commencer une nouvelle vidéo, nous allons continuer parce que c'est comme ça que nous lançons. Appuyez sur le bouton Démarrer, faites-le glisser vers le suivant. Il s'agit du menu et la barre de titre ainsi que la superposition fixe et la superposition gauche du menu se déplaceront par la gauche et nous le fermerons. Retournez par la droite. Allons de l'avant et appuyons sur Play sur le prototype, et faisons-le. Nous avons déjà créé le menu, mais nous allons apprendre à réparer les choses. Et vous pouvez voir, je peux faire défiler, cliquer et faire glisser, voir comment le menu y est corrigé. Et si vous cliquez sur l' icône, glisse, ferme l'os, votre pro. Bon, allons donc prendre le départ. Poussez-le vers le U du. Je pense que cette barre de titre est déjà sélectionnée pour nous. Alors, jetez un coup d'œil. Il suffit de le sélectionner, accéder à l'onglet Design et où vous voyez des contraintes ici. Encore une fois, j'ai choisi le tableau d'art. J'ai des contraintes. Voyez où il est indiqué position fixe lors du défilement. Allons de l'avant et, avant de le faire, passez à votre prototype. Il suffit d'appuyer sur Play. Assurez-vous d'avoir celui qui dit que vous le faites. Non. L'exemple, celui qui indique que vous appuyez sur Lecture et voyez comment la barre d'onglets et la barre d'état ne sont pas corrigées. C'est ce à quoi ça ressemble en ce moment. Nous allons maintenant sélectionner cette barre de titre. Revenez à notre onglet Conception dans la section Contraintes. Effectuez une position fixe lors du défilement. centre que vous pouvez le placer en haut et au centre, en haut au centre. Revenez à votre prototype ici. Appuyez sur Play. Maintenant, faites défiler et voyez comment il reste en position. Super facile. Allons-y rapidement un menu ici. Allons donc à nos outils de cadre. Attrapez le cadre sur la droite ici. Faisons iPhone Pro X. Rendons-le un peu moins large. Et aussi longtemps que le tableau d'art à côté, n'est-ce pas ? Il devrait donc être si long. Allons le garder. Allez rose. Nous pouvons faire notre pinky. Faisons en sorte que ça soit pinky. Prenez notre texte ici, placez-le ici dans ce nouveau cadre. Je vais le nommer juste pour le nommer appelé tiroir de menu. Je vais juste le déplacer juste pour m'assurer que mon texte est dedans. Et nous l'avons déjà fait. Allez-y et faites un triple clic Glick, allez dans le tableau qui possède la barre de titre, triple clic, triple clic. Prototype, faites-le glisser vers votre menu. Vous êtes déjà approché de cela au toucher, non pas naviguer pour ouvrir la superposition. Et allons-y et faisons-le en haut à gauche. Fermé et cliqué à l'extérieur. Nous pouvons faire 50 % à ce stade si nous le voulons. Rappelez-vous l'animation ici, nous voulons entrer, non pas de gauche, mais de droite. Nous allons jouer avec ça dans une seconde, juste pour que vous puissiez le voir. C'est donc bien que nous recommencions ça parce que maintenant on va devenir un peu plus fou avec ça. Appuyez sur Play. Nous devons fixer la barre de titre en haut. Cliquez sur le menu. Boom, vêtements dehors. air bien. Allons jouer avec le menu ici. Lorsque nous sélectionnons les détails de l'animation du menu ou de l'interaction dans le menu. Allons à gauche, passons par la gauche. Revenons maintenant. Appuyez sur le haut juste ici. Vous voyez à quel point c' était bizarre. C'est arrivé depuis la droite. Ensuite, la même affaire. Vous pouvez aller chercher le menu, détails de l'interaction et vous pouvez également jouer avec ce genre de choses pendant votre temps libre. Vous pouvez faire à gauche ou vous pouvez entrer par le haut. Je ne le recommanderais jamais, mais bon, peu importe. C'est plutôt bizarre. C'est toujours amusant. Remettons tout ça en arrière pour venir de la droite. Et c'est à ça que ça ressemble. Mais c'est amusant d'aller jouer avec ces petits détails prototypes et d'essayer différentes choses. Je vais commencer une autre vidéo et nous allons faire les barres de navigation inférieures. Je vous y verrai. 33. Créer - Iphone - barre d'onglets: Bon, bon retour. Vous connaissez l'onglet Prototype de foret en haut à droite ici. Prenez ce départ. Déplacez-le vers le suivant, qui est la barre de navigation inférieure ou la barre d'onglets inférieure. Et nous allons montrer comment nous résolvons cela et les assemblons ensemble. Nous pouvons construire ce système de barre d' onglets que nous avons appris sur Dieu et appuyer sur Play sur le prototype, tout en haut à droite petit bouton Present et jetez un coup d'œil. Alors que je fais défiler, la barre de titre reste en membre fixe, et maintenant la barre d' onglets reste fixe en bas. Permettez-moi de dire 123. Si vous cliquez sur pro ou touchez le profil 456, revenez à la maison 123, profil pour V6, tabulation et retour entre les deux. OK, c'est cool. Allons donc faire glisser notre début de l' exemple vers celui qui dit que vous appuyez sur la conception ou que je le garderai sur Prototype. Nous allons sélectionner le plan de travail ici. Appuyez sur Play. Et regardez les barres de navigation en bas ou dans la barre d'onglets, n'est-ce pas ? Donc, il fait défiler. Il ne doit jamais faire défiler, doit toujours être corrigé. En bas, la barre de titre reste fixe ou non, la barre d'onglets. Allons plus loin et corrigeons cela. Allez-y et revenez à votre onglet Design. Je pense que je l' ai déjà regroupé. Oui, d'accord, c'est déjà groupé. Rappelez-vous quand nous pouvons former la barre de titre à l'onglet Design supérieur, en sélectionnant la barre d'onglets, l'onglet Design. Effectuez une position fixe lors du défilement. Mais à ce stade, faites le bas, le centre. Examinons maintenant notre prototype, voyons comment il est maintenant fixé au bas. Une fois encore. Encore une fois. Position fixe, centrée en bas. Ce que cela fait, c'est génial parce que vous pouvez, vous pouvez avoir un très long temps, ne me suivez pas sur celui-ci, mais vous pouvez avoir une planche d'art très longue. Je garde donc le commandement et je suis en train d'étirer mon tableau d'art jusqu'au bas. Je vais déplacer la barre d' onglets jusqu'au bas ici. Et je vais ajouter d'autres chiffres pour 456 car j'ai défini cette barre d'onglets comme une contrainte à corriger en bas de l'écran lors du défilement. Et j'ai réglé ça sur un iPhone, il sait que Figma sait que vous ne voulez pas que cela soit en bas. Vous voulez qu'il soit toujours fixé au niveau de l'iframe. Votre appareil, votre fenêtre d'affichage de votre appareil. Donc CASI fait défiler 456. Voyez à quoi ça ressemble. C'est bizarre dans mon dossier de conception car c'est en bas. Mais j'ai défini cette contrainte ici à droite. Et quand je vais au prototype, je vois la contrainte en ne le voyant pas en mode conception. Cela ressemble à ceci et au mode design, mais je le vois sur le mode prototype. Bon, donc je vais y retourner un peu. Au fait, j'adore cette police, à la belle police appelée Bodoni. Mais ne mangez pas la police d' affiche italique. Une police si belle. Tu te fais tatouer ça si tu veux. OK, c'est cool. Nous allons donc copier ce tableau d'art. Je vais maintenir Option cliquer et faire glisser. Maintenant, je vais sélectionner le menu. Une fois encore. Je suis un Glick triple-click drivel, Triple-Click piloté par Glick. Il suffit de garder le triple clic et jusqu'à ce que vous ayez le menu ici pour la maison, faites cette opacité de 50%. J'ai un triple clic, un triple clic, un triple clic. S'il triple clique trop, vous pourriez avoir la maison. C'est bon. Vous pouvez le faire pour obtenir l'icône d'accueil. Voyez où il est écrit calque, faites 30 % d'opacité, appuyez sur Entrée sur votre clavier. Prenez le texte ici. Triple-clic, triple clic, triple clic. Si vous avez besoin d'obtenir ce texte, faites-le régulièrement. Et qu'est-ce que nous avons défini ce texte ? Allons de l'avant et saisissons les textes de profil. Triple-cliquez sur la commande Remplir C. Et prenons la maison ici, commande V, collez-la. Allons maintenant chercher les textes de profil lorsque les choses sont regroupées, vous pouvez également garder la commande. Je suis juste en train d'appuyer sur Commandement ou Contrôle. Si vous êtes sur un PC, que je suis sur un Mac, il vous donnera automatiquement des sélections plus approfondies au sein d'un groupe. Vous pouvez maintenir la touche Commande enfoncée, puis cliquer et ne pas avoir à cliquer trois fois, triple clic, déclencher rapidement. Vous pouvez simplement cliquer sur Commande, Commande. Cliquons trois fois, saisissons ces textes de profil. Faisons en sorte que ça soit audacieux. Rendez-le noir. Fais-le 100 % ici. Et puis saisissez également l'icône ici. Attrapez le trait, rendez-le noir aussi. Nous avons donc maintenant cet état par défaut ici à droite. État actif pour la maison. Nous avons également l' état actif pour le profil et l'état par défaut pour la maison. Cliquons trois fois sur le profil jusqu'à ce que nous obtenions cette sélection. Si vous êtes allé trop loin, vous avez saisi l'icône. Nous ne voulons pas qu'il s'agisse d'un triple clic. Je l'ai déjà regroupé dans une belle section pour vous. Plus un prototype. Faites-le glisser ici. Il suffit de le toucher, naviguez. Rien de fantaisiste. Instance, parfaite. Attrapez la maison. Faites la même chose. Rien de fantaisiste. Allons changer ce texte. Allons en faire 45. Je ne fais que trois clics sur six. Revenons maintenant à notre prototype et regardons l'onglet. Boum, boum, boum. Tellement bien. C'est comme une vraie application. Génial. OK, Cool. Très bien, c'était une barre d'onglets. Nous finirons par un balayage horizontal. Sur la vidéo suivante. Je vous y verrai. Au revoir. 34. Créer - Iphone - Balayage horizontal: Bonjour et bienvenue dans la dernière. Nous allons faire un balayage horizontal sur la mémoire d'un appareil mobile. Encore une fois, allez dans votre onglet Prototype en haut ici, c'est le petit début. Faites-le glisser vers le bas. Je vais zoomer, maintenir Z enfoncé, cliquer et faire glisser. Maintenez la barre d'espace. Déplacez ça un peu plus haut. Sélectionnez ce plan de travail, appuyez sur Lecture. Et voici de quoi je parle. Nous allons créer cette interaction où vous cliquez, glissez, cliquez et faites glisser, regardez la nourriture. Un clic et un glisser-glisser. 35. Créer - Picker de date mobile: Très bien. Je sais que j'ai dit que c'était la dernière vidéo, mais j'en ai lancé une autre en prime. Ok, on va donc construire le sélecteur de rendez-vous mobile et le voir. Encore une fois, assurez-vous que nous sommes en mode d' onglet Prototype en haut à droite. Sinon, vous ne verrez pas ce petit rectangle bleu qui a commencé. Alors, onglet Prototype, saisissez cette chose. Déplacons-le là où il est dit sélecteur de date mobile. Et allons de l'avant et sélectionnons le tableau d'art ici. Appuyez sur Play. C'est ce que nous allons construire. Nous avons donc le sélecteur de date, vous cliquez dessus, il passe plein écran jusqu'en haut, glisse vers le haut. Si vous appuyez sur Quitter, en haut, il glisse vers le bas. Ce qui est génial ici, c'est que si vous balayez, tous les jours du mois sont alignés sur les jours du mois ou chaque jour de la semaine dans la barre de titre. Cela restera corrigé et nous obtiendrons également le bouton Terminé en bas. Lorsque vous appuyez sur le bouton Terminé ou si vous avez appuyé sur le 1er octobre, puis sur le bouton Terminé, il vous ramène dans vos sélecteurs de dates remplis. Interaction assez lisse. Allons construire ça. Encore une fois, la première chose à faire est de nous assurer que nous sommes au prototype, l'onglet en haut à droite, non à l'onglet Conception vers l'onglet Prototype. Nous pouvons donc voir ce petit rectangle de départ. Poussez ça là où il est dit que vous le faites. Revenez dans l'onglet Design ici. OK, cool. Et ensuite, ce que nous allons faire, c'est juste copier ce tableau d'art ici. Je tiens la barre d'espace pour accéder à l'outil à main tout simplement déplacer cela. Je vais choisir le tableau artistique, pas le sélecteur de dates, mais le tableau artistique. Appuyez sur Commande C. Si vous êtes sur un PC, il s'agit du contrôle C. puis de la commande V, comme dans Victor. Ou si vous êtes sur un PC, Control V, sélectionnons le tableau de dates, le clavier du sélecteur de date, supprimons les composants ici, sélectionnez simplement la section de la barre de titre, placez-la dans votre tableau d'art, puis saisissez le bouton Terminé. Et même chose, placez ça dans le tableau d'art. Mettons ça en bas. Encore une fois, pour vous assurer que ces éléments sont dans votre tableau artistique. Prenez votre tableau d'art et déplacez-le, non ? Donc, si ceux-ci ne bougent pas avec votre tableau artistique , ces éléments ne se trouvent pas dans le tableau d'art. Il suffit donc de vérifier cela. Bon, maintenant ce que je dois faire, c'est que nous devons d' abord réparer ces éléments. Nous allons donc sélectionner uniquement la barre de titre en haut à droite, là où nous en sommes dans l'onglet Design. Passez aux contraintes et voyez où il est indiqué position fixe lors du défilement, appuyez simplement dessus, corrigez-le. Et ensuite pour le bas où il est écrit Terminé, sélectionnez le bouton Terminé ici et faites une position fixe lors du défilement. J'ai acheté un Bang, Boom inférieur. Ok, donc allons rapidement prototyper ça et le faire avancer. Nous voulons sélectionner le sélecteur de date sur le premier tableau d'art ici, allez dans l'onglet Prototype. Voyez la petite interface utilisateur prototype. Allons de l'avant et faites-le glisser sur le tableau d'art à droite. Sur le robinet aussi bien, ce que nous voulons, c'est que nous ne voulons pas d'incident et que cela peut être de l'animation, nous voulons emménager. Nous ne voulons pas cela de gauche, de bout en haut ou de bas en haut. L'extrême droite ici. Nous avons fait le prototype sur le robinet. Nous avons choisi de ne pas dissoudre instantanément ou d' animer intelligemment . Du haut. Vous voyez le petit aperçu ici, donc nous le voulons. Et puis je vais déposer un triple clic, un triple clic, triple clic pour obtenir ce x ici, 123. Et allez-y et en mode prototype, faites-le glisser vers ce prototype de date de sélection. Voici ce que nous ne voulons pas emménager. Nous voulons déménager et non pas vers le haut, mais vers le bas, nous voulons exactement le contraire. Allons voir ça très vite. Faites glisser vers le haut. Appuyez sur la touche X. Faites glisser vers le bas. Parfait. Maintenant que nous avons la fonction, allons mettre dans les sélections de date. J'ai cet élément ici à droite qui contient tous les mois. Encore une fois, voici la clé, l'élément clé de tout cela. J'ai déjà regroupé toutes ces sections, mais nous voudrions que tout soit regroupé en un seul élément. Et ce que nous allons faire, c'est que nous allons cliquer avec le bouton droit, cliquer avec le bouton droit et sélectionner une image une fois de plus. Assurez-vous simplement que tous ces éléments sont regroupés. Sélectionnez-le avec le bouton droit de la souris. Maintenant, c'est encadré. Je vais revenir en arrière pour m'assurer que je suis sur l'onglet Design ici, pas sur l'onglet Prototype, donc rien de funky ne se passe. Maintenant, en sélectionnant ce cadre, passons à la palette Calques à gauche. Appelons cette date, nommez-la ici. J'ai donc juste double-cliqué sur le cadre. Et tapé des dates. Je vais encore cliquer dessus. Maintenant, sélectionnons les dates, le cadre et la touche Commande enfoncée sur le clavier. Ou si vous êtes sur un PC contrôlé. Saisissez le haut et faites-le glisser jusqu'au bas. Vous verrez toujours les éléments. Vous voyez toujours ces dates comme mai, juin, juillet. Mais passons juste au de septembre ici. Nous devrions simplement sélectionner octobre et décembre avec le cadre. Encore une fois. Je vais le faire rapidement. Donc, en maintenant la commande ou le contrôle, si vous êtes sur un PC tout en haut, sélectionnez des dates, assurez-vous d'être sur les dates du cadre et non sur les éléments groupés. Le cadre à gauche, vous pouvez le dire car il a cette petite icône de hashtag réticule ici sur les calques. Maintenez la commande M sur un PC. Faites glisser ça vers le bas. Nous venons de sélectionner octobre et septembre dans l'onglet Design sur la droite où nous avons nos options de cadre ici. Voyez où il est indiqué Clip contenu, découpez le contenu, cliquez dessus. Et maintenant, vous ne verrez que la zone dans laquelle vous vous trouvez, vous avez fait glisser le cadre vers le bas. Et maintenant, il suffit de cliquer sur tout le contenu de ce cadre individuel. Si vous le décliquez, il affiche plus de contenu de contact. Je vais prendre le rendez-vous ici. Je vais le faire glisser dans mon tableau d'art ici. Et je sais qu'il est entré dans le tableau d'art parce qu' il est devenu bleu. Si vous n'êtes pas sûr, il suffit de saisir nouveau le tableau d'art et de le déplacer. Assurez-vous que c'est ici. Assurez-vous que le tableau est beau. Allons voir le prototype très vite. Je vais aller dans la presse en haut à droite, jouer qu'ils sont un cadeau haut de gamme. Appuyez sur Sélectionner une date. Vous voyez qu'il n'y a pas encore de défilement, n'est-ce pas ? Nous avons la fonction, vous pouvez la fermer. Mais il n'y a pas encore de défilement sur les dates. Ça a l'air bien. Nous allons sélectionner le cadre de date ici. Vous vous souvenez donc que je suis dans le tableau d'art. Je peux voir que j'ai sélectionné des dates car je peux voir la sélection sur la commande de maintien du calque gauche. Faites-le glisser jusqu'au sommet ici. Tout comme ça. Et puis, en bas, assurons simplement qu'il se trouve tout en haut du bouton ici. Voici l'astuce. Une fois que nous avons sélectionné cette image, hésitez pas à sélectionner uniquement les dates. Allez au prototype. Et voyez où il est dit débordement, défilement de flux ce que nous voulons. C'est un défilement vertical ici. Allez-y et cliquez dessus. Revenons maintenant à notre prototype. Je vais choisir le premier tableau artistique. Appuyez sur Play. Nous avons le sélecteur de dates glisse vers le haut. Et maintenant, lorsque je clique et que je fais glisser, vous pouvez voir comment toutes les autres dates apparaissent assez lisses. Allons mettre en surbrillance l'une des sélections de dates pour terminer l'action de l'utilisateur. Je vais faire un zoom arrière un peu, commander moins ou Contrôler moins. Si vous êtes sur un PC, je vais copier cette touche, ce tableau d'art ici, commander C, faire une commande V et la placer. J'ai déjà ce 13 ici en tant qu'élément. Allons donc attraper cet élément. Je vais cliquer trois fois dessus. Triple, triple goutte à goutte, goutte à goutte, goutte à goutte à goutte, enfoncée Maj C. Vous pouvez voir que je n'ai sélectionné que le cercle mais pas les textes 13. Donc je vais aussi tenir le quart et tenir les deux. Faites-le glisser jusqu'au mois d'octobre. Supprimez les trois, devrait être centré seul. Parfait. Revenons en arrière et changeons la date ici tout en haut. Encore une fois, je vais juste faire un triple clic pour prouver un voyage triple, triple, triple , triple clic, triple clic ici dans le texte. Le jeudi est abrégé. Et seulement 11012022. Sur ce tableau d'art ici, je vais aller de l'avant et prendre un carré et faire un carré ici, juste le gris. Juste comme ça. Encore une fois, faisons cela au moins 45 par 45. suffit de lui donner une zone de robinet plus grande. Allons de l'avant et sélectionnons cette case. Assurez-vous que les carrés dans ce tableau d'art. Déplacez le plan de travail simplement pour vous assurer que le carré est, si ce n'est pas cas, allez-y et placez-le le cas, allez-y et placez-le dessus et double-cliquez. Si vous ne pouvez pas le sélectionner, il suffit de cliquer trois fois. Et maintenant, allez au prototype et faites-le glisser sur le tableau d'art. À droite. Nous ne voulons pas d'animation, mais plutôt. Il devrait être juste instantané. Nous voulons préserver la position de défilement. En fait, je vais laisser ça pour l' instant juste pour que vous puissiez voir comment cela fonctionne. Revenons au mode prototype. Cool. Il y a le mien là-bas. Maintenant. Regardez sans position de défilement préservée, regardez ce qui se passe lorsque vous touchez celle-ci ? Il a sauté. Il n'a pas conservé où je me trouvais sur le rouleau. Il m'a juste emmené au tableau d'art suivant et a montré au tableau qu'il ne conservait pas ce parchemin. Revenons en arrière. Reprenons notre place. Allez dans les détails de l'interaction. Et maintenant, conservons la position de défilement. Je vais choisir le tableau Start Art. Appuyez sur Play. Maintenant, regardez. Je vais faire défiler un peu vers le bas, juste là où ce carré se trouve au-dessus du bouton Terminé. Touchez-le et voyez comment il ne m'a pas sauté. J'ai conservé là où j'étais dans le rouleau. C'est ce que fait cette case à cocher. Super important. À peu près. C'est presque fini. Revenons à notre dossier de conception. Nous allons sélectionner ce carré. Allons de l'avant et rendons la couche pass-through ici 0% d'opacité. Très bien, tu y vas. Excusez-moi pour les sirènes. Il doit y avoir quelqu'un qui fait quelque chose devant chez moi. Je pense qu'ils vont bien maintenant. OK, cool. Nous allons donc nous assurer que vous puissiez voir ce qui s'est passé, ce que nous venons de faire. Nous avons sélectionné ce carré et nous en avons fait ce qu' on appelle un point d'accès. On ne le voit pas sur le prototype. Mais nous en sommes arrivés là où il s'agit d'un hotspots transparents. Hotspot, c'est-à-dire que c'est une interaction, il est interactif. Et si l'utilisateur appuie dessus, il vous amènera à l'état sélectionné. Allons de l'avant et sélectionnons le premier tableau d'art avec la date. Allez-y et commandez C, et collez-le sur la droite. Maintenant, remplissons les dates ici. Nous en avons donc dix. On a eu 12022. Et comme c'est un état actif, rendons les textes noirs. Vous y allez. OK, cool. Donc, tout ce que nous avons à faire est de dire à ce sujet, cliquez sur le bouton Terminé ici. Sur le mélange de prototypes, vous êtes sur l'onglet Prototype. Cliquez sur le bouton Terminé, faites glisser le prototype vers le tableau suivant ici. Ce que nous voulons, c'est aller et descendre. Et puis il en va de même pour ce bouton Terminé. Ce que nous voulons, c'est le remettre à l'état par défaut ici. Et allez-y et faites celui-là. Déplacez-vous et descendez. Changeons maintenant ce texte le texte sélectionné, qui serait 10132022. Et faisons aussi ça noir. C'est un sélecteur de date à peu près complet ici, allons le tester. Supprimez le jeu en haut à droite. Voici votre date, 1013. Je pourrais le voir ici si j'appuie sur terminé et que je disais descendre, glisser dehors. J'appuie sur X une telle glissade. Et puis regardez si nous faisons défiler toutes les dates sont ici. Je vais choisir le 1er octobre. Je verrai la mise à jour en haut jeudi, 101. Appuyez sur Terminé. Et maintenant, je suis de retour au sélecteur de dates et la date que j'ai sélectionnée est mise à jour. Génial. J'espère que le vôtre fonctionne comme ça. Si ce n'est pas le cas, je l'ai toujours comme exemple en haut. Vous pouvez donc toujours choisir ce que j'ai déjà fait et voir si le vôtre est différent, puis apporter ces changements. Cela correspond donc à ce que vous faites. Et ça devrait être le dernier cours. Je vous verrai merci. Vidéo. Au revoir. 36. Merci: Très bien, si vous regardez ce cours, vous êtes génial. Cela signifie que vous l'avez fait. Vous êtes allé jusqu'au bout. Encore une fois, je veux juste dire merci d'avoir suivi le cours. J'espère que vous en avez tiré beaucoup de valeur. J'espère que cela vous a permis de mieux comprendre les motifs de conception et si vous commencez tout juste à concevoir ou vous êtes un vétéran qualifié de la saison. J'espère que cela vous a donné de la valeur et aidera à vous améliorer et à concevoir des modèles. Et aussi tous les trucs que vous avez construits dans Figma, j' espère que vous aurez quelques trucs et astuces. Et encore une fois, en ce qui concerne tout ce que vous construisez, avez-vous fini ? Vous pouvez partager votre travail avec la classe. Nous serions ravis de le voir. Il suffit de le poster. Oui, j'ai posté sur Skillshare ici et écrivez un commentaire et nous serions ravis de voir ce que vous avez imaginé. Une fois encore. Je veux simplement vous remercier et je vous apprécie beaucoup d' avoir suivi mon cours. Cela représente beaucoup pour moi et je vous souhaite un bon moment pour concevoir beaucoup, beaucoup de choses cool et précieuses par