Parlons maintenant du prototypage.
Dans Figma,
lorsque vous cliquez sur le petit bouton de lecture en haut à droite
coin, vous pouvez visualiser votre conception comme un prototype.
Cela signifie que vous pouvez interagir avec votre conception
basé sur l'action prototypée que vous avez définie.
Vous pouvez naviguer entre les pages,
boutons de survol,
faites glisser les curseurs et bien plus encore.
C'est idéal pour tester votre conception, le flux utilisateur et votre
interactions pour voir si tout fonctionne bien ensemble
et avoir une meilleure compréhension de ce que
le site Web final ressemblera à.
Le prototypage joue un rôle énorme dans mon processus de conception.
J'aime tester mes créations et mes interactions à chaque étape du processus.
Cela me permet de voir si ma conception fonctionne et si le flux utilisateur a du sens.
C'est pourquoi je garde toujours une deuxième fenêtre ouverte avec une vue prototype à côté de ma fenêtre de conception pendant que je travaille sur la conception.
Voyons quelques exemples de ce que vous pouvez réaliser avec vos prototypes.
Tout ici est prototypé directement dans Figma.
Vous pouvez créer des effets de survol,
parallaxe, transitions de page,
piste de souris, et bien plus encore.
Comme vous pouvez le voir,
vous pouvez créer des prototypes de très haute fidélité.
Ceux-ci sont parfaits pour tester votre conception,
mais également idéal pour présenter vos créations aux clients et aux développeurs.
Avec un prototype réaliste et interactif,
ils peuvent voir et expérimenter le design en action,
ce qui peut les aider à mieux comprendre le flux du site Web final.
Passons en revue les bases du prototypage dans Figma.
Tous les prototypes commencent par une seule interaction.
Pour créer une interaction,
il vous suffit d'aller dans l'onglet prototype dans le coin supérieur droit ici.
Vous concevez donc dans l'onglet conception,
et quand vous êtes prêt à commencer le prototypage,
vous passez à la vue prototype ici.
Ou vous pouvez simplement cliquer sur Maj E sur votre clavier pour passer de l'un à l'autre.
C'est donc quelque chose que vous faites une fois que votre conception est prête.
Une fois que vous êtes prêt à commencer à prototyper certaines interactions,
il faut toujours passer d'abord au prototype.
Et puis chaque interaction a un déclencheur.
C'est ce qui déclenche l'interaction.
Et une action.
C'est le résultat du déclencheur.
L'interaction la plus simple que nous faisons habituellement dans le prototype est de faire la navigation entre les pages.
Alors disons que nous avons un site Web avec de nombreuses pages.
Dans ce cas,
Je viens de créer deux pages différentes pour le site Karma et que nous allons utiliser comme exemple.
pour nos astuces de prototypage que nous allons apprendre maintenant.
Donc, lorsque nous avons un site Web avec de nombreuses pages,
nous allons prototyper le menu afin que nous puissions naviguer à travers les différentes pages.
C'est la base d'un bon prototype sur un site Web.
Disons que nous sommes ici maintenant sur la page d'accueil,
et je veux prototyper une action où lorsque je clique sur un projet particulier,
sur ce projet ici,
quand je clique sur le bouton découvrir,
Je veux aller ici sur la page de détails du projet.
Tout ce que j’ai à faire est de sélectionner le premier objet sur lequel je veux que l’action soit effectuée.
Donc c'est mon bouton ici,
Je vais aller dans l'onglet prototype.
Et maintenant que j'ai activé l'onglet prototype,
quand je survole mon objet,
Je peux voir ces petits points chauds ici avec un signe plus qui apparaissent sur tous les bords,
Je peux simplement passer d'un de ces points d'accès à l'autre page et la pointer vers celle où je souhaite placer mon prototype.
Donc dans ce cas,
Je vais juste sélectionner ici,
Je peux sélectionner n'importe lequel de ces points d'accès,
ça fonctionnera de la même manière.
Et je vais simplement le faire glisser vers la nouvelle page que j'ai ici.
Alors maintenant, comme vous pouvez le voir,
il y a un lien entre les deux pages,
une flèche allant de ce bouton à cette page.
C'est parce que lorsque je vais cliquer sur ce bouton,
Je vais atterrir sur cette page.
Et comme vous pouvez le voir ici,
J'ai une fenêtre qui s'est ouverte avec quelques fonctions différentes.
Automatiquement,
la première action qui est affichée est le clic,
nous en verrons un peu plus dans quelques minutes.
C'est ce que nous voulons,
nous voulons que lorsque je clique sur ce bouton, j'aille ici.
Nous devons donc naviguer et détailler le projet,
c'est cette planche ici.
Donc automatiquement,
lorsque j'ai fait la sélection et que je l'ai fait glisser vers le nouveau plan de travail,
il a compris que je voulais naviguer vers cette page lorsque j'ai cliqué dessus.
Maintenant j'ai mon interaction
fait.
Tout ce que j'ai à faire si je veux voir cette interaction maintenant est de passer en mode prototype,
mode de présentation, il me suffit de sélectionner le bon plan de travail.
Si je sélectionne cette planche avec ma page d'accueil et que je clique sur le bouton de lecture,
Je vais ouvrir cette planche.
Mais si je sélectionne la page de détails et que je clique sur Lecture,
c'est celui-ci qui va s'ouvrir.
Je veux donc ouvrir ma page d'accueil,
Je vais appuyer sur play pour voir le mode présentation.
Très bien, donc maintenant j'ai ma page d'accueil que je vois ici,
Je peux faire défiler la page d'accueil,
et j'ai mon bouton.
Comme vous pouvez le voir,
quand je passe mon bouton,
J'ai maintenant le curseur en forme de main,
cela signifie que je peux réellement cliquer dessus.
Si je clique dessus,
Je passe maintenant à la page suivante.
C'est donc aussi simple que cela.
C'est le type d'interaction le plus simple que vous puissiez créer.
Et c'est principalement à cela que le prototype a toujours servi.
Mais maintenant, nous pouvons prototyper bien plus que cela.
Voyons
Que pouvons-nous faire d'autre ?
Tout d'abord,
l'une des choses que j'aime faire lorsque je fais mon prototype est ici dans les appareils,
J'aime configurer les bonnes dimensions de l'appareil.
Je vais donc y aller ici en taille personnalisée.
Et en taille personnalisée,
Je vais écrire les bonnes dimensions 1512 par 982.
C'est la dimension de ma fenêtre d'affichage.
Maintenant, lorsque je clique sur Play,
Je vois la bonne dimension,
l'utilisateur verra lorsqu'il atterrira sur la page.
Et quand je commence à faire défiler,
J'ai mon interaction sur mon bouton.
Si vous n'êtes pas sûr de l'emplacement des interactions sur une vue prototype comme celle-ci dans la vue de présentation,
si vous cliquez n'importe où où il n'y a pas d'interaction,
il mettra en évidence les zones où une interaction est possible.
Donc si je clique ici n'importe où,
comme vous pouvez le voir,
le bouton est surligné en bleu.
Cela signifie qu'il y a une action à faire ici.
Si je clique,
maintenant je vais sur cette nouvelle page.
Nous avons donc cette interaction qui est réalisée.
Maintenant, une autre chose que nous voudrions peut-être aborder
une fois que nous allons sur cette page, cela nous permet de revenir à la page précédente.
Donc dans le menu ici,
quand je clique sur le logo,
Je veux revenir à la page d'accueil.
Donc ce que je vais faire, c'est revenir à l'onglet prototype et simplement faire glisser mon logo vers la planche graphique de la page d'accueil.
Comme vous pouvez le voir,
la flèche va très bas.
C'est parce qu'il pointe toujours vers le centre de la planche graphique.
Donc c'est normal si
ça descend.
C'est juste parce qu'il pointe vers le centre de cette planche d'art ici qui est très haut.
Et dans notre onglet ici,
nous avons en un clic naviguer instantanément vers la page d'accueil.
C'est parfait.
C'est ce que nous voulons.
Si nous cliquons sur Play,
on peut faire défiler, cliquez ici,
nous naviguons vers cette nouvelle page.
Et si je clique sur le logo,
comme vous pouvez le voir,
Je retourne à la page d'accueil,
mais à la même hauteur où j'étais auparavant.
Parfois, c'est ce que tu veux.
Mais dans mon cas,
parce que nous naviguons d'une page à une autre,
Je ne veux pas de ça.
Je veux aller en haut de la page.
Il vous suffit donc, en mode prototype,
assurez-vous de sélectionner la position de défilement de réinitialisation.
Cela signifie que lorsque nous allons sur une nouvelle page,
nous allons aller en haut de la page.
Je vais faire la même chose avec celui-ci ici.
Réinitialiser la position de défilement.
Maintenant, si je navigue d'une page à une autre,
il ira toujours en haut de la page.
D'accord.
C'est donc l'interaction la plus simple que vous puissiez faire.
Voyons quelles autres interactions nous pouvons faire.
Allons-y ici.
Je vais simplement sélectionner un élément et nous pouvons voir que nous avons un onglet d'interaction ici.
Une façon de créer une interaction est, comme nous venons de le voir, de sélectionner le point d'accès et de pointer vers une autre planche graphique.
Je pourrais également créer mon interaction directement ici.
Supprimons donc l’interaction que nous venons de faire.
Et à la place,
cliquons sur le signe plus ici.
Cela crée une nouvelle interaction.
Ainsi, lorsque nous créons une nouvelle interaction,
Nous devons décider de quelques choses.
Nous devons décider quel sera le déclencheur.
Le déclencheur est l’action que l’utilisateur devra effectuer pour activer notre interaction.
Dans ce cas,
nous faisons le onClick,
mais il existe d'autres fonctions ici parmi lesquelles nous pouvons choisir.
Si nous ne voulons pas que l'action se produise lors d'un clic,
mais onDrag, lorsque nous faisons glisser une image,
par exemple, ou un curseur, nous pouvons sélectionner onDrag.
Si nous voulons
je veux que l'action se produise uniquement à la seconde où le curseur survole le bouton.
Donc, lorsque je passe la souris sur le bouton,
L'action se produira immédiatement.
Nous pouvons sélectionner en survolant.
Il y a la gâchette pendant que vous appuyez.
C'est quand j'appuie,
pas quand j'ai appuyé.
Il y a une différence entre le clic que j'appuie et celui que je relâche.
Appuyer, c'est quand j'appuie,
mais je ne l'ai pas encore publié.
Nous pouvons donc décider que l'action se produise à la seconde où nous appuyons.
Parfois,
certains boutons sur certains sites Web auront un état de survol,
un état de pression et un état de clic.
Nous pouvons décider d'avoir une clé ou une manette.
Ceci est utile lorsque nous voulons que l’interaction démarre lorsque nous appuyons sur une touche de notre clavier.
Alors les flèches,
disons que lorsque je clique sur la flèche droite,
Je veux passer à l'image suivante dans le curseur,
Par exemple.
Vous pouvez ensuite créer cette interaction à l’aide de la fonction clé.
Lorsque vous sélectionnez la fonction clé, vous devez
écrivez la touche en question sur le clavier.
Dans mon cas,
Je viens de faire la flèche droite.
Cela pourrait être une lettre,
Cela pourrait être la barre d'espace, cela peut être ce que vous voulez.
Je vais revenir ici.
Il y a onMouseEnter.
La différence entre while hovering et MouseEnter est que l'action se produira lorsque nous utiliserons MouseEnter.
Et même quand je souris,
l'action aura déjà eu lieu,
donc il restera appliqué.
Quand je le fais en planant,
la différence est que
l'action ne sera prise en compte que pendant mon survol.
Donc si je passe la souris sur le bouton,
cela activera l'action.
Mais à la seconde où je sors du bouton,
l'action reviendra en arrière et reviendra à l'étape initiale.
Nous avons MouseLeave.
Nous pourrions prototyper MouseEnter et MouseLeave et obtenir le même type d'effet que celui que nous obtiendrions lors du survol.
Nous avons MouseDown.
C'est un peu comme si on appuyait sur la touche "en même temps".
Souris vers le haut.
C'est quand on relâche le duvet.
Et nous avons AfterDelay.
Nous souhaiterions donc peut-être qu’une action se produise automatiquement après un délai.
Disons que je suis sur la page de destination ici et que je souhaite accéder automatiquement à la page de détails après deux secondes ou après trois secondes.
C'est quelque chose que nous pouvons prototyper très facilement.
Je vais donc simplement supprimer cette action que j'ai sur mon bouton et simplement faire le clic normal ici.
Le clic normal permettra de voir les autres détails par la suite.
Donc si je veux avoir un délai et passer à la page suivante,
tout ce que j'ai à faire est de créer une interaction ici.
Sélectionnez AfterDelay.
Et le voici en millisecondes.
Donc si je veux que ce soit après trois secondes,
J'écrirai 3000 millisecondes.
Et après 3000 millisecondes,
alors je peux sélectionner l'action,
Ce que je veux qu'il arrive.
Dans mon cas,
Je souhaite simplement accéder à la page détaillée du projet.
Alors maintenant, si je teste
mon prototype, on arrive sur la landing page et automatiquement au bout de trois secondes,
nous passons à la nouvelle page.
Cela peut également être très utile pour créer des interactions plus complexes.
Je vais simplement supprimer celui-ci pour le moment.
Voici donc les différents types de déclencheurs que nous pouvons appliquer à tous les éléments que nous sélectionnons dans le prototype.
Cliquer, faire glisser,
en vol stationnaire après un délai.
Voyons maintenant les différentes actions que nous pouvons appliquer.
Donc c'est ça le déclencheur.
L’action est ce que nous voulons réellement voir se produire lorsque nous cliquons sur quelque chose.
Nous avons donc la navigation vers,
comme ce que nous avons déjà vu ici.
C'est ce que nous sélectionnons lorsque nous voulons passer d'un plan de travail à l'autre,
d'un cadre à l'autre.
C'est généralement ce qui est utilisé lorsque nous naviguons entre les pages.
Nous avons ici une option de retour.
Le retour est utile lorsque nous voulons simplement revenir à la page précédente en cliquant sur ce bouton.
Alors disons que je suis ici sur ma deuxième page.
Créons un bouton retour.
Je vais simplement copier ce bouton ici.
Pour l'instant,
Je vais y répondre à l'intérieur.
Peut-être que je vais retourner la flèche.
Et quand je clique sur ce bouton pour revenir à la page précédente sur laquelle j'étais,
dans mon cas, ce sera la page de destination car je n'en ai qu'une.
Mais cela est utile lorsque nous ne savons pas nécessairement quelle était la page précédente.
Nous ne pouvons donc pas simplement pointer du doigt le
page de destination à chaque fois.
Il faut revenir à la page précédente.
Dans ce cas,
tout ce que j'ai à faire est de créer une nouvelle interaction,
Décochez.
Je veux revenir en arrière,
réinitialiser la position de défilement.
Je vais donc revenir à la page précédente.
Je peux cliquer ici,
aller sur cette page,
et je peux cliquer sur mon bouton de retour et revenir automatiquement à la page précédente.
Bouton retour pour l'instant.
Je n'en ai pas besoin.
Et voyez quelles sont les autres actions possibles.
Si nous revenons à ce prototype,
nous avons navigué jusqu'à ce que nous sachions que nous sommes de retour.
Nous avons défini des variables.
C'est un peu plus avancé.
Les variables,
les conditionnels sont toutes des fonctionnalités où vous pouvez définir des paramètres
et modifiez ces paramètres.
Par exemple,
Je pourrais créer une variable où mon panier est vide.
Encore un où mon panier est plein.
Et en cliquant sur le bouton ajouter au panier,
Je pourrais changer la variable de mon icône pour que l'icône change.
C'est génial lorsque vous souhaitez interagir avec un élément de la page et modifier un autre élément de la page.
Mais c'est un peu trop avancé pour ce cours.
Nous n'allons donc pas rentrer trop dans les détails de ces fonctions pour l'instant.
Il y a la fonction de défilement ici lorsque vous avez des ancres sur une page.
Alors disons que nous sommes sur la page d’accueil.
Ici,
Je vais juste supprimer le flux ici.
Nous sommes sur la page d'accueil et nous cliquons sur les projets.
Ce que je veux, c'est simplement faire défiler jusqu'au premier projet que nous avons ici.
Parce que sur la page d'accueil,
nous avons quelques projets différents.
Pour ce faire,
tout ce que j'ai à faire c'est encore une fois,
sélectionnez notre petit point d'ancrage ici et pointez vers la section que nous voulons.
Dans mon cas,
Je veux accéder à cette section ici lorsque je clique sur le projet.
Comme vous pouvez le voir,
il a ouvert la fenêtre,
Décochez, faites défiler jusqu'à.
Il a donc automatiquement compris que ce que je voulais était une option de défilement.
J'aurais aussi pu simplement procéder manuellement et sélectionner « Défiler vers ».
Mais parce que je veux souligner une section particulière,
c'est juste beaucoup plus simple.
Et nous avons ici différentes options que nous verrons dans une seconde.
Mais voyons ce qui se passe maintenant si je passe en mode présentation avec mon ancre.
Lorsque je clique sur le projet maintenant,
il défile automatiquement jusqu'à
cette section ici que j'ai pointée.
C'est parfait.
C'est ce que nous voulons.
Mais le fait qu'il saute dessus immédiatement, instantanément,
Je pense que ce n'est pas génial pour moi.
Je préférerais avoir un défilement fluide.
Pour ce faire,
encore une fois, je vais simplement sélectionner mon bouton et je vais aller dans les fonctions que nous avons ici.
Et au lieu que l’action se déroule instantanément,
Je vais vouloir qu'il soit animé.
Donc en l'animant,
Si nous revenons ici maintenant,
comme vous pouvez le voir,
nous voyons ce qui se passe.
Nous voyons que nous défilons en fait vers le bas.
Je pense que c'est beaucoup plus clair pour l'expérience utilisateur.
Et nous pouvons également ajuster le timing de notre animation.
Donc c'est assez rapide pour le moment.
Peut-être que je veux que ce soit un peu plus long,
un peu plus lisse aussi.
Voici donc le timing de l'animation,
300 millisecondes.
Si je veux que ce soit plus long,
Je peux simplement changer cela pendant peut-être 600 millisecondes.
Donc ça va être deux fois plus long.
D'accord.
Si vous souhaitez tester le timing sur lequel vous travaillez,
vous pouvez toujours survoler cette petite illustration ici et elle montre exactement le timing dont vous disposez en ce moment.
Et pour l'assouplissement,
c'est quand nous voulons de l'accélération et de la décélération dans notre mouvement.
Tout de suite,
nous devons juste nous en sortir.
Cela signifie donc que nous n’avons pas d’accélération,
mais nous avons une décélération à la fin.
Ça ralentit un peu à la fin.
Je préférerais être dedans ou dehors.
Nous avons donc une accélération et une décélération.
Je vais donc sélectionner "in out" pour mon assouplissement.
Toutes ces fonctions sont différentes que vous pouvez sélectionner.
Nous allons les parcourir tous en quelques secondes.
Mais pour l'instant,
sélectionnons simplement « Entrée et sortie faciles ».
Alors maintenant, il y a un peu d'assouplissement au début et à la fin.
C'est déjà plus fluide,
Je pense.
Mais je pense que ça pourrait être encore plus fluide.
Quelque chose que j'aime faire souvent est d'aller dans l'option Bézier personnalisée ici et d'ajuster la courbe de vitesse
que nous pouvons voir ici.
Au lieu d'avoir la courbe naturelle que Figma fait pour faciliter l'entrée et la sortie,
Je vais le rendre un peu plus fort.
Je veux plus de décélération à la fin et plus d'accélération au début.
Alors maintenant, si nous revenons ici,
nous avons quelque chose de beaucoup plus doux qui semble vraiment naturel.
J'aime donc ce mouvement ici.
Les autres options que nous avons ici sont faciles à utiliser.
Donc, la facilité sera de mise
juste un assouplissement au début du mouvement.
Nous allons donc procéder à un assouplissement au début,
mais pas à la fin.
Si nous allons nous détendre,
ça va être l'inverse.
Assouplissement juste à la fin.
Donc, la décélération vers l'intérieur et vers l'extérieur est ce que nous venons de faire avec l'accélération et la décélération.
À l'arrière,
comme on peut le voir ici,
on a un peu avant l'action prend un peu de place avant de faire le mouvement.
Parfois, cela peut être intéressant.
Détendez-vous, c'est à la fin.
Nous avons ce genre d’effet de rebond.
Entrez et sortez en douceur,
c'est au début et à la fin qu'on a cet effet rebondissant.
Donc, tout cela est intéressant en fonction du type de projet.
Si nous voulons quelque chose d’un peu plus pétillant dans notre interaction,
on peut continuer avec ça et avoir une petite interaction sympa.
Si nous regardons cela maintenant,
c'est un peu plus amusant,
peut-être un peu trop pour ce projet particulier.
Suivant,
nous avons quelques préréglages
qui sont également assez intéressants ici.
Doux avec un peu de rebond à la fin.
Rapide,
un peu plus.
C'est plus rapide et avec plus de rebond.
Rebondissant,
beaucoup de rebond.
Si nous testons cela maintenant,
C'est peut-être un peu trop pour un parchemin aussi.
Et nous avons un ressort personnalisé avec lequel nous pouvons travailler les détails avec le rebond et tout ça.
Pour moi,
Je vais juste revenir en arrière avec facilité en entrant et en sortant pendant environ 600 millisecondes et ajuster un peu mes courbes.
Je pense que ce mouvement est parfait.
L’autre chose que nous voyons lorsque nous avons le parchemin, ce sont ces deux nombres que nous avons ici.
Dans ce cas,
si nous voulons avoir un décalage lorsque nous faisons défiler,
ce qui signifie que lorsque je clique sur le projet,
J'aimerais peut-être avoir un peu d'espacement en haut.
Peut-être le même espacement que ce que j'ai sur les bords,
pour qu'il ne soit pas parfaitement aligné en haut,
mais nous avons un peu de place ici.
Je souhaiterais donc peut-être ajouter cinq pixels avant.
Je vais écrire moins 15.
Ouais,
Je pense que ça a l'air bien.
Alors maintenant avec ce décalage,
vous pouvez décider de ne pas être parfaitement aligné avec l'élément vers lequel vous faites défiler,
ce qui peut être utile dans certains cas comme celui-ci.