Voyons quelles sont les autres options ici
pour les actions que nous pouvons faire donc nous avons vu naviguer 2
nous avons un lien ouvert, cela peut être utile si vous souhaitez simplement ouvrir un nouveau lien vers un site Web, alors allons-y
disons que nous avons les réseaux sociaux ici, nous avons le logo Tox ici, alors peut-être que nous voulons pointer vers les taxes
site web lorsque nous cliquons sur le logo, vous pouvez simplement aller ici
ouvrez un nouveau lien et écrivez la bonne URL et cela ouvrira une nouvelle fenêtre dans ce cas une nouvelle fenêtre car j'ai sélectionné ouvrir un nouvel onglet ou si vous sélectionnez simplement ceci, il s'ouvrira à la place de l'onglet sur lequel vous êtes sur le site Web sur lequel vous avez entré le lien, d'accord, qu'avons-nous d'autre
allons-y ici
voyez ici encore le statut et celui-ci est de la gamme 1 donc jusqu'à ce que vous l'ouvriez vous obtenez
de la page sur laquelle vous vous trouvez déjà.
Nous avons donc ici une superposition que j'ai déjà préparée pour montrer
vous que et cette superposition s'ouvre réellement lorsque nous cliquons sur le bouton Participer.
Alors au lieu de
je viens d'ouvrir une nouvelle page, je suis en train de charger comme une fenêtre contextuelle cette superposition en haut de la page que je suis
sur.
Je vais donc sélectionner participer,
revenir au prototype,
je vais déplacer ce qui est déjà là
et pointe vers ma superposition ici.
Alors maintenant, au clic, au lieu de naviguer, je veux ouvrir une superposition et maintenant si nous testons cela, lorsque je clique dessus, j'ouvre la superposition en haut du site Web et nous avons une petite couleur d'arrière-plan, car si nous revenons ici, je dois avoir déjà défini une couleur d'arrière-plan ici dans le passé.
Vous pouvez décider de l'ajouter
ou non.
Vous pouvez demander cela lorsque nous cliquons en dehors de la superposition.
Donc si je clique ici, la superposition se ferme automatiquement.
Ce sont toutes de bonnes fonctions à avoir lorsqu'il s'agit d'une superposition qui s'ouvre au-dessus du site Web comme ce que nous voyons ici et comme nous pouvons le voir, je pense que la hauteur de ma page n'est pas la bonne.
Donc c'est censé être 900, donc ici je vais aller à 900 à la place.
Ok, c'est parfait.
Nous avons donc maintenant notre superposition qui s'ouvre.
En ce moment, il se positionne à la bonne position car, comme je le mentionnais, je pense que j'ai déjà prototypé cela plus tôt, mais généralement, il s'ouvre automatiquement au centre.
Cela signifie donc que lorsque vous cliquez dessus, il s'ouvrira centré.
Vous devez donc ajuster le positionnement à l’endroit où vous souhaitez qu’il s’ouvre.
En haut à gauche,
en haut au centre, en haut à droite.
Dans mon cas, je veux qu'il s'ouvre en haut à droite.
Chaque fois que je clique dessus, il s'ouvre simplement en haut à droite de ma page.
Je vais donc aller en haut à gauche de l'écran.
C'est parfait.
Je souhaite avoir une couleur d'arrière-plan qui apparaît.
Je peux régler l'opacité comme je le souhaite.
Je veux pouvoir toujours voir le site Web en dessous, donc j'aime avoir de l'opacité.
Donc c'est parfait.
En ce moment, comme nous pouvons le voir, il s’ouvre instantanément.
Alors peut-être qu'au lieu d'avoir la fenêtre contextuelle qui s'ouvre instantanément parce qu'elle est à droite, je veux peut-être qu'elle vienne de la droite.
Donc pour le faire au lieu de le faire instantanément, j'ai deux options différentes.
Ce qui m'est proposé ici.
Je me suis dissous.
Au lieu d'être instantané, cela va simplement s'estomper.
Si nous le testons maintenant.
Comme vous pouvez le voir, nous avons ce petit fondu qui est bien, mais moi, ce que je veux, c'est un emménagement.
Donc je veux que ça vienne de la droite.
Exactement comme l’exemple que nous avons ici.
C'est parfait.
On pourrait décider de le faire apparaître à gauche,
du haut, du bas.
Comme vous pouvez le voir, la vitesse est actuellement déjà réglée à
la vitesse que j'ai établie plus tôt avec ma courbe,
la facilité d'entrée et de sortie,
600 millisecondes et la courbe que j'ai ajustée.
C'est parce que Figma garde en mémoire le dernier réglage que vous avez effectué ici pour l'assouplissement.
Et je pense que c'est un assez bon assouplissement que je vais simplement garder pour le moment.
Si je le teste ici, ça a l'air bien.
Donc si on l'ouvre maintenant, il s'ouvre depuis la droite.
C'est donc une interaction plutôt cool.
Voilà donc comment ouvrir une superposition.
C'est vraiment aussi simple que ça.
Maintenant, dans la superposition, vous avez quelques fonctions que vous pouvez également ajouter.
Comme si nous allions ici sur notre bouton de fermeture et ajoutions une nouvelle interaction.
Décochez un bouton de fermeture.
Je veux fermer ma superposition.
Nous venons d'ouvrir une superposition et je veux que lorsque je clique dessus, je ferme la superposition.
Nous avons également une superposition d'échange.
Cela serait utile si nous avions plus d'une superposition et que nous voulions changer le moment où nous cliquons sur un bouton.
Pour l'instant je vais juste
appuyez sur Fermer et disons que nous avons une deuxième superposition ici.
Je vais donc simplement changer la couleur du texte pour que nous voyions qu'il s'agit de la deuxième superposition.
Et je veux que lorsque je clique sur mon bouton d'envoi ici, je viens d'envoyer le formulaire.
Alors peut-être que je veux que tout cela disparaisse et juste avoir un message de félicitations, votre message a été envoyé, message qui apparaît ici.
Je peux donc simplement échanger la superposition lorsque je clique ici.
Alors je vais juste pointer ici
et décochez.
Au lieu de naviguer, je veux échanger la superposition.
Et encore une fois, je peux choisir si je veux emménager ou occuper des fonctions différentes.
Dans ce cas, je veux juste me dissoudre.
Tout ira bien.
Et maintenant, si je regarde ça, j'ouvre ma superposition.
Je peux le fermer en cliquant sur mon X.
Ok, ça marche.
Et quand je clique sur envoyer, je change ma superposition vers cette autre superposition.
C'est donc aussi simple que cela à faire.
Pour l'instant, c'est juste un fondu enchaîné.
Nous avons une animation intelligente.
Nous verrons un peu plus en détail ce qu'est Smart Animate dans quelques minutes.
Mais dans l'ensemble, ce que fait Smart Animate, c'est qu'il comprend quelle est la différence entre les deux images et supprime tout le reste.
Cela fait une transition tout seul.
Alors disons que ce texte était ici sur la deuxième version et que j'ai fait l'animation intelligente.
Ouvrons cela.
Envoyer.
Il s'animait entre les différentes étapes.
Ainsi, le contenu qui a été supprimé a simplement disparu et ce texte présent sur les deux planches de travail s'est déplacé vers le bas et a changé de couleur.
C'est plutôt cool.
Voilà donc pour les différentes fonctions que l'on a sur les éléments.
Nous avons donc vu le déclencheur au clic,
traîner.
Nous avons vu l'action qu'il est possible de faire avec les superpositions,
la navigation, la porte aussi.
Nous pouvons maintenant regarder les autres détails dont nous disposons.
Outre le déclencheur et l’action, voici la destination.
C'est ici que nous voulons pointer.
Nous pouvons soit faire glisser pour décider de la destination, soit la sélectionner manuellement avec les différents cadres qui se trouvent sur votre conception.
Dans notre cas, nous ne voulons pas changer la destination, mais nous pourrions décider que lorsque je clique sur ce bouton, au lieu d'échanger avec celui-ci, je souhaite changer la destination.
allez sur la page d'accueil et cela a ouvert un autre cadre que j'ai ici qui s'appelle aussi la page d'accueil.
Mais ce n'est pas ce que je veux.
C'est donc l'une des autres options qui existent ici.
Ensuite, nous avons l’animation que nous avons.
Revenons à notre bouton principal ici et voyons les différents types d'animation parmi lesquels nous pouvons décider de choisir.
Nous l'avons instantanément.
Voilà ce que nous avons ici.
Lorsque nous cliquons sur le bouton, nous passons instantanément à l’autre.
Nous nous sommes dissous.
C'est ce que nous venons de voir.
Auparavant, au lieu d'être instantané, cela allait simplement s'estomper dans la nouvelle planche graphique.
Nous avons une animation intelligente.
Encore une fois, c'est quelque chose que nous verrons un peu plus bas car c'est un peu plus compliqué que les autres.
Et nous avons d’autres options ici.
Nous avons évolué un peu comme ce que nous venons de voir avec la superposition, c'est que la nouvelle page se déplacera au-dessus de la page sur laquelle nous sommes déjà.
Cela pourrait donc être intéressant pour une transition de page.
Nous avons toujours eu la possibilité d’aller dans la direction que nous voulions.
Nous pouvons animer les calques correspondants et nous pouvons modifier l'assouplissement que nous venons de voir ainsi que le timing également.
Ensuite, nous devons déménager.
Cela va donc en quelque sorte démasquer l'autre page en dessous.
C'est aussi un effet sympa.
Nous avons poussé.
Ainsi, la nouvelle page poussera simplement la page précédente lorsqu'elle arrivera.
Ce sont
très basique mais peut créer des animations et des effets sympas.
Nous avons fait une glissade.
C'est donc quelque chose que j'aime vraiment.
C'est un peu comme l'entrée en scène, mais la planche sur laquelle vous étiez bouge également un peu et s'estompe.
Donc, lorsque nous cliquons sur un nouveau,
une nouvelle page, nous avons cette petite interaction sympa qui apparaît.
Ouais, j'aime ce modèle coulissant vers l'intérieur et vers l'extérieur.
C'est le même principe aussi.
Mais pour l'instant, je vais simplement le laisser comme ça instantanément.
Lorsque nous effectuons une transition de page, nous la faisons essentiellement instantanément ou en dissolution afin qu'elle soit rapide et directe.
Peut-être que pour certaines applications, il peut parfois être utile de simplement le pousser ou si vous créez une présentation, cela peut constituer une transition intéressante entre les pages.
Mais pour un site Web comme celui-ci, je pense que cela convient instantanément à la plupart des prototypes.
Et oui, les autres options que nous avons consistaient simplement à réinitialiser la position de défilement que nous avions déjà.
Voici donc les principales interactions qu'il est possible de réaliser lors du prototypage et avec cela, vous pouvez vraiment faire beaucoup de choses différentes dans votre prototype.
Voyons maintenant les autres choses que nous voyons ici dans notre fenêtre prototype : le comportement de défilement.
Voyons voir ce que c'est.
Nous avons deux options différentes : position et débordement.
Donc, si nous commençons par la position, nous avons trois options parmi lesquelles choisir.
Défilement avec le parent, fixe,
et collant.
Ils sont donc utiles pour certains éléments dont nous souhaitons modifier le comportement de défilement.
Disons que je veux que mon menu ici, cette partie ici du site Web, ne défile jamais.
Être toujours fixé sur l'écran pendant que je fais défiler.
Parce que maintenant, si je reviens au héros, la page d'accueil défile avec le reste du contenu.
C'est parce que dans le prototype ici, nous avons un défilement avec les parents qui défilent avec la page.
Dans mon cas, je veux que ce soit
fixé.
Reste en place.
Donc, en faisant cela, comme nous pouvons le voir ici dans les calques à gauche, nous avons maintenant une colonne fixe qui apparaît avec notre menu à l’intérieur.
Cela signifie donc maintenant que le menu du menu des calques est fixe et ne défilera pas.
Ainsi, lorsque je fais défiler le site Web, il reste toujours au même endroit.
La chose à garder à l'esprit lorsque vous choisissez de réparer est que, comme vous pouvez le voir dans les couches, elle devient la couche supérieure.
Donc tous les
les éléments fixes de la page seront toujours au-dessus du reste des éléments de la page qui défilent naturellement.
Si je veux mon arrière-plan par exemple ici mon animation que j'ai en arrière-plan, c'est juste une vidéo.
C'est amusant de savoir que vous pouvez également intégrer des vidéos dans le prototype.
Cela rend le prototype beaucoup plus vivant ici.
Je veux que ma vidéo soit réparée.
Donc je ne veux pas qu'il défile.
Je veux qu'il reste toujours au même endroit parce que je veux qu'il soit
j'ai aussi la vidéo à ce stade.
Pour l'instant, ce n'est qu'un dégradé que j'ai ajouté à ma conception parce que je voulais voir à quoi cela ressemble, mais la vidéo est vraiment juste en haut.
Donc pour que la vidéo soit corrigée si je vais ici en prototype comme vous pouvez le voir je n'ai pas l'option corriger.
C'est parce que ma vidéo est à l'intérieur d'un groupe qui n'est pas fixe.
Vous ne pouvez donc pas avoir un élément fixe à l’intérieur d’un groupe qui n’est pas fixe.
Si je le retire du groupe maintenant, j'ai la possibilité de le réparer, mais si je sélectionne cette option
comme vous pouvez le voir, il est maintenant au-dessus de tout le contenu derrière le menu car dans les calques, il est ici derrière, mais vous pouvez avoir un élément fixe qui est
derrière le reste des éléments de la page.
L'option fixe n'est donc pas celle à choisir ici si vous souhaitez avoir un arrière-plan fixe.
Au lieu d'utiliser l'arrière-plan fixe ici, ce que je vais faire est d'utiliser la troisième option que nous avons.
Nous faisons donc défiler avec le parent, il fait simplement défiler naturellement, il ne défile jamais et passe au-dessus de tout.
Et vous avez des arrêts collants sur le bord.
Donc collant s'arrête au bord avec cette option vous pouvez avoir un élément qui deviendra collant dès qu'il atteindra le bord de l'écran.
Par exemple, si je le déplace un peu vers le bas, nous avons notre vidéo qui est ici et quand elle atteint le haut de l'écran, comme vous pouvez le voir, elle devient collante, donc elle reste là, elle reste en place, elle est toujours là.
C'est parfait c'est ce que je veux mais je ne veux pas que ce soit plus bas.
Le fait que
il est déjà en haut de l'écran en ce moment, il fait le même effet que s'il était fixe.
Il ne défilera jamais car il est déjà en haut.
Ne me demandez pas pourquoi le fixe doit nécessairement être au-dessus et le collant peut être en dessous.
Je ne sais pas exactement pourquoi, mais c'est une bonne solution de contournement d'avoir un élément fixe en arrière-plan pour utiliser l'option collante.
Très bien, donc ça marche, je pense que c'est plutôt cool.
Voyons ce que nous pouvons faire d'autre.
Jouez avec ces options ici pour fixer la position.
Nous voulons donc que le menu soit fixe sur cette section, ici nous avons l'arrière-plan qui est également fixe.
J'aimerais que cette partie gauche de ma conception reste fixe lorsqu'elle atteint cette position jusqu'à ce que la partie droite soit entièrement défilée, puis je veux que cette section suivante la pousse pour qu'elle commence à défiler lorsque nous atteignons cette section suivante.
Alors comment faire ça ?
C'est à nouveau là que le sticky entre en jeu.
La façon dont cela va fonctionner, j'ai un cadre ici avec lequel je le masque, comme vous pouvez le voir, j'ai tous ces éléments à l'intérieur, donc c'est un cadre qui contient tous mes éléments ici et je veux ma colonne de gauche ici, je veux qu'elle soit collante à l'intérieur de ce cadre.
Cela signifie donc qu'il restera collé en haut de l'écran lorsqu'il atteindra le haut de l'écran, mais lorsqu'il atteindra la fin de cette image
ça va recommencer à défiler.
C'est donc exactement ce que je veux en termes d'effet.
Je vais donc simplement sélectionner cette partie ici, comme vous pouvez le voir, j'ai regroupé tous mes éléments ici que j'ai à gauche dans un cadre et j'ai rendu mon cadre un peu plus haut de cinq pixels pour avoir ce bel espacement car je veux garder cet espacement en haut de l'écran lorsqu'il atteint le haut de l'écran.
Alors maintenant, si je vais dans le
faites défiler et dites collant juste pour cet élément, ce qu'il fait, c'est que lorsque je commence à faire défiler, il doit devenir collant lorsqu'il atteint le haut.
C'est parfait, c'est ce que je veux et puis quand on arrive au projet suivant, ça recommence à défiler.
C'est parfait, c'est exactement l'effet que je veux.
Je veux le même effet pour le prochain aussi, donc je peux simplement aller ici, le sélectionner et dire collant pour celui-ci aussi.
Pour celui-ci et celui-là.
Alors maintenant
lorsque nous faisons défiler la page, nous avons cet effet sympa d'un élément qui n'est pas collant mais qui devient collant, puis lorsqu'il atteint la fin de son cadre, il cesse d'être collant, puis l'autre l'est et nous avons le même effet pour tous ceux-ci.
C'est donc plutôt cool pour le positionnement.
Sur l’autre page que nous avons, nous pourrions décider d’avoir exactement la même chose ici.
Que notre menu soit
fixé.
Peut-être que je veux que cet élément ici, lorsqu'il atteint le sommet, devienne collant.
Je l'avais donc déjà positionné comme collant, donc maintenant, lorsque nous faisons défiler cette autre page ici, lorsqu'elle atteint le haut, elle devient collante.
Je pourrais faire la même chose pour ces éléments, peut-être les faire s'arrêter à cette position à la place, mais vous comprenez l'idée.
C'est plutôt cool tout ce que l'on peut faire avec ces positionnements collants et fixes.