Design d’applications et de site Web avec Adobe Xd

1. Introduction Application et design Web: Envisagez-vous de concevoir un site Web ou une application ? Mais laissez-moi vous montrer comment vous pouvez faire les deux rapidement avec Adobe XD. Martin, j' ai plus de 20 ans d'expérience en tant que graphiste, illustrateur et formateur certifié Adobe. J'ai travaillé avec des entreprises comme BBC, Disney, Google, Ikea, et j'ai hâte de partager mes meilleures pratiques avec vous. Il s'agit d'un cours pratique simplifié axé sur un projet de conception réel. Je vais tout vous expliquer étape par étape, et vous obtiendrez tous les fichiers d'exercices afin que vous puissiez les suivre. Au cas où tu préfèrerais ne pas me copier. Vous pouvez également suivre mon flux de travail en utilisant ressources alternatives fournies et créer quelque chose de complètement unique que vous pourrez mettre en valeur dans votre portfolio créatif. Je suis sûr que ce cours vous incitera à créer quelque chose d'incroyable. Nous aborderons toutes les fonctionnalités importantes de DOB XD lors de la création de nos prototypes d' applications et de sites Web, notamment les composants, les plans de travail, les interactions totales, les animations, les superpositions, le défilement parallaxe, défilement parallaxe À la fin de ce cours, vous serez sûr de connaître DOBXC et prêt à créer des prototypes complexes et attrayants pour vos clients Outre toutes les informations techniques, nous aborderons également certaines théories importantes du design graphique que vous pourrez appliquer dans tous vos futurs projets créatifs. Vous pouvez suivre ce cours sans aucune connaissance préalable en matière conception graphique, d'illustration ou d'applications DOB, mais pour terminer le projet, vous devez avoir accès à AOB Creative Cloud et à un ordinateur de bureau ou portable Mais maintenant, il est temps de commencer à créer, je vous verrai dans la prochaine leçon. 2. Aperçu du design d’application: Nous allons créer une application et un prototype de site Web. J'ai trouvé ce thème de la conscience de soi L'application aide donc à nous connaître en nous basant sur un simple profilage au début. Et comme la plupart des prototypes présentés ici, nous n' ajusterons pas réellement les conseils ou les réponses en fonction ce que les gens choisissent au début. Mais ce type de logique peut être ajouté ultérieurement, une fois que le développeur aura commencé à travailler sur notre conception. Bien entendu, dans ce projet, nous nous concentrerons uniquement sur le design, mais nous créerons un prototype entièrement fonctionnel qui pourra être partagé avec notre client, puis plus tard également avec le développeur. Alors laissez-moi vous montrer à quoi ressemblera l' application. C'est la démo qui commence par l'écran d'alcum, puis nous aurons le choix de modifier ces quelques attributs Donc, en fonction de ce que nous pensons de nous-mêmes, nous pouvons choisir ces options, et si nous le voulons, nous pouvons également obtenir de l'aide sur la signification de ces mots, si vous ne les connaissez pas Mais une fois que nous avons sélectionné ce que nous pensons être, nous pouvons obtenir nos réponses puis cela nous donne quelques conseils, et il y a aussi quelques petites animations amusantes ici. Nous pouvons passer au conseil suivant. Encore une fois, une petite animation là-haut, puis nous pourrons passer à la suivante. Et une de plus à la fin. Et puis nous avons également un petit menu en haut avec lequel nous pouvons passer d'un conseil à l'autre. Nous pouvons également retourner à la maison, puis nous pouvons jouer avec ça. Maintenant, comme je l'ai dit, cette petite section de profilage, la sélection que nous choisissons ne change pas réellement les conseils contenus dans ce prototype. Cependant, vous avez la possibilité d'étendre cette application. Donc, si vous voulez devenir bon avec DOB XD, projet de cette semaine est l'occasion idéale pour vous de continuer et peut-être d' ajouter d'autres écrans pour cette application Et comme toujours, vous n'êtes pas obligé d'utiliser exactement les mêmes ressources que celles avec lesquelles je vais travailler. Cependant, je les ai tous préparés et prêts à être utilisés, ce qui vous fera gagner du temps et nous permettra de nous concentrer sur le flux de travail XD. Toutefois, si vous souhaitez savoir où viennent ces ressources , les ressources d'origine sont toutes répertoriées et liées depuis le tableau des ressources, afin que vous puissiez les y trouver. J'ai même créé un lien vers le site où j' ai trouvé la copie que j'ai utilisée dans ce prototype, et j'ai même inclus quelques références ou exemples du style que je recherchais pour mon design. en revenir à XD, je tiens simplement à montrer que nous allons créer à la fin une version Web de la même application de prise de conscience de soi. Et ce sera également un prototype fonctionnel , que nous pourrons tester. Et il s'agit d'une page unique qui défile avec un menu autocollant en haut, ainsi que des liens d'ancrage avec lesquels nous pouvons naviguer sur la page Et retournez aussi à la maison. Et encore une fois, le sélecteur fonctionne de la même manière que dans l'application. J'espère donc que vous avez hâte de vous lancer dans ce projet. Et ne vous inquiétez pas si vous n'êtes pas familier avec cet OBXD, car je vais vous guider étape par étape depuis le début de la conception des choses, puis pour créer le prototype entièrement fonctionnel à la fin 3. Écran de bienvenue: Vous pouvez télécharger le fichier d'exercices que j'ai préparé pour démarrer ce projet, qui inclut déjà tous les actifs. Il s'agit d'un seul fichier XD. Et une fois que vous l'aurez ouvert dans XZ, vous aurez la possibilité de l' enregistrer en tant que document cloud, ce qui vous permettra également d' y accéder depuis différents ordinateurs Ainsi, une fois que vous l'avez ouvert, vous pouvez toujours choisir Enregistrer en tant que document cloud. Actuellement, pour moi, il s'agit d'un document local car il s'agit déjà d'un document cloud. Cette petite icône indique le statut. Vous remarquerez une fois que vous aurez ouvert ce fichier que j'ai le plan de travail des actifs avec tous les éléments et le texte avec lesquels nous allons travailler Mais dans le panneau de la bibliothèque, que vous pouvez ouvrir en cliquant sur cette icône ici, vous trouverez également des couleurs et styles de caractères que j'ai déjà configurés. Nous utiliserons donc également ces dégradés et cette couleur Je travaille également avec deux familles de polices Adobe, Dan, 2014, et Nunito Je recommande de supprimer les deux familles de polices complètes pour celles-ci Cependant, une fois que vous avez ouvert le fichier XD, il devrait automatiquement absorber les fonds sélectionnés. Dans cette première vidéo, nous nous concentrerons sur les deux premiers écrans, l'écran de bienvenue et l'écran du fichier professionnel où nous pourrons choisir nos traits personnels. Commençons donc par l'écran de bienvenue. Notez que je suis en mode design pour le moment. Et ici, nous avons déjà un plan configuré pour la taille d'écran des iPhone 12 et 12 pro Je vais d'abord double-cliquer ici et renommer ce Welcome J'aime utiliser des majuscules pour les noms de plans de travail qui sont de véritables écrans dans l'application, et j'utilise normalement des phrases majuscules pour les superpositions, que nous créerons ultérieurement Mais sur ce premier plan de travail, nous aurons déjà besoin de quelques textes Je vais donc simplement utiliser l'outil de saisie, cliquez ici, et je vais simplement saisir la croissance. C'est le nom que j'ai trouvé pour cette application. Ensuite, je vais le changer déjà ici sur la droite pour passer à la police de caractères, et je vais le mettre en gras Maintenant, une fois que j'ai appuyé sur Escape, je peux simplement utiliser ce petit cercle au milieu pour augmenter la taille du texte. Et avec l'outil de sélection, nous pouvons également le déplacer et l' aligner au centre. Je pense que quelque part là-bas, ça marchera. Et puis modifiez l'option, cliquez et faites glisser pour le dupliquer. Réduisons la taille de ce texte à 20, peut-être que 25 serait mieux. Et puis le texte ici est : apprenez à vous connaître, ligne suivante avec un saut de ligne pour faire avancer les choses. Point d'exclamation, puis je vais appuyer à nouveau sur Escape, centrer ce texte Ensuite, nous pouvons peut-être modifier un peu le début. La distance entre les lignes peut donc être de 25 ou 30. Oui, je trouve que 30 ans, c'est bien. Cela n'a pas besoin d'être audacieux. Peut-être que nous pouvons faire en sorte que ce soit moyen. Et nous pouvons également simplement réutiliser le cercle pour réduire la taille du texte. Et nous le plaçons juste en dessous du titre principal. Passons maintenant aux actifs. Tout d' abord, je vais simplement dupliquer cet élément. Encore une fois, cliquez et faites glisser le pointeur avec l'outil de sélection, puis faisons-le pivoter, enfoncée, alignant sur les bords Je vais le faire glisser vers le bas. Alignez également ce coin ici en haut, et peut-être étirez-le un peu. Je vais le sélectionner , puis cliquer avec le bouton droit sur Envoyer pour m' assurer que notre texte est en haut. Et puis changeons la couleur du texte, la couleur du champ en blanc. Enfin, nous avons juste besoin d'une image, et je vais utiliser celle-ci. Encore une fois, je préfère conserver tous les actifs sur ce tableau artistique, et je reproduis toujours ce dont nous avons besoin. Alors cliquez et faites glisser, puis augmentons la taille de celui-ci. Vous n'avez pas besoin de maintenir la touche Shift enfoncée les proportions restent automatiquement les mêmes. Cependant, lors du redimensionnement, il arrive parfois que les couches ne s'alignent pas parfaitement L'ombre de la voiture se trouve donc sur une couche séparée en tant que modèle principal. Il se peut donc que nous devions ajuster cela un peu. Mais d'abord, je veux m' assurer que c'est au bon endroit. J'aimerais placer le personnage quelque part au centre de l'écran et donner l'impression qu'elle est appuyée sur le bord de l'écran. Oui, je pense que c'est proche, peut-être juste un peu plus petit, puis je le ramène à nouveau dedans. Lorsque je clique en dehors du plan de travail, je peux voir comment il va être recadré Je pense que cela fonctionne très bien. Donc, si nous voulons affiner l' alignement ici sur l'ombre, nous pouvons double-cliquer puis sélectionner l'ombre ou le caractère. Nous pouvons utiliser les touches fléchées du clavier et simplement ajuster ou les déplacer jusqu'à ce qu'elles soient parfaitement alignées Et puis, lorsque nous cliquons à l'extérieur, c'est maintenant configuré, et c'est tout ce que nous avions à faire pour l'écran de bienvenue. C'est certainement l' écran le plus simple que nous ayons eu à créer. La prochaine sera beaucoup plus complexe, que nous allons rassembler dans la prochaine vidéo. 4. Créer l’écran de profil: Passons donc à autre chose, nous allons utiliser l'outil de plan de travail. , il vous suffit de cliquer ici à côté du plan de travail précédent. Il crée automatiquement un de travail de la même taille qu'auparavant Et c'est ce que nous appellerons profil. Encore une fois, j'utilise des majuscules car il s'agit d'un écran important. Sur cet écran, nous allons donc utiliser quelques éléments. Tout d'abord, nous utiliserons tous ces actifs, je vais donc les sélectionner. Et comme avant, je vais cliquer et les faire glisser vers le bas, puis les déplacer sur le plan de travail. Ensuite, nous aurons également besoin d'un texte. Je vais donc utiliser l'outil de saisie et simplement taper « décrivez-vous ». Mais pour ce texte, j'ai déjà configuré le style de caractère, nous allons donc utiliser celui-ci ici. Il le met donc automatiquement selon la version dont nous avons besoin, et je l'y place simplement. Et nous aurons également besoin d'une icône, laquelle j'ai encore une fois préparé ce point d'interrogation. Copions simplement cela avec la commande C, nous pouvons également copier. Cliquez sur le plan de travail et Command V va le coller Déplaçons-le donc ici pour le moment en haut à droite. Plus tard, nous aurons également besoin d'un bouton. Mais d'abord, configurons simplement ces images. Maintenant, ils seront utilisés pour une bascule visuelle. Nous avons donc trois boutons différents permettant aux utilisateurs de choisir leurs traits personnels Le premier est donc le sélecteur pessimiste et optimiste. Ce que vous devez faire, c'est aligner ces deux têtes l'une sur l'autre. Et je préfère avoir la version heureuse en haut, ce sera notre version optimiste, et en dessous, la version passimiste Si nous passons au panneau des couches avec la commande Control Y, nous pouvons également voir que ces images sont déjà nommées Voilà donc l'image heureuse. Et si je le cache en dessous, il y a aussi le visage triste. Je vais donc le réactiver et je peux déplacer les deux ensemble maintenant. Nous aurons besoin d'une copie supplémentaire ici, donc je vais juste utiliser celle-ci ou une copie de celle du haut, et je vais taper optimist et peut-être augmenter légèrement la taille de l'endroit Ici, je vais aussi le régler sur léger ou moyen, ou peut-être que le normal sera ce qu'il y a de mieux pour nous. Et puis, encore une fois, nous dupliquons simplement ce texte. Assurez-vous qu'il est aligné sur celui ci-dessus, puis je vais juste taper pessimiste D'accord. C'est donc à peu près prêt à être utilisé. Préparons donc le prochain sélecteur. Je vais placer l'un sur l'autre le pignon et l'ampoule Ce sera le sélecteur entre personnalité créative et personnalité méthodique, ce qui est représenté par le rouage Je vais simplement les placer l'un sur l'autre, aligner approximativement sur la tête pour le moment, puis je vais copier les deux objets de texte et les renommer. Cela va être créatif, et celui-ci est méthodique OK, donc je peux voir que nous devons le déplacer légèrement vers la gauche, assurer qu'ils sont tous ajustés. Dans. Et puis le sélecteur suivant est probablement le plus unique, car ici, il n'y a pas deux images distinctes entre lesquelles nous allons effectuer la transition Au lieu de cela, j'ai ces formes que nous utiliserons avec des masques et la fonction d'animation automatique. Essentiellement, ce que je veux créer ici, c'est que nous allons passer de cette forme de cylindre à la forme de sphère. Et ils se déplaceront entre cet anneau, qui est presque comme là pour passer d'une forme à l'autre. Et il ne s'agit là que d'un petit exemple amusant du visuel intéressant que vous pouvez créer dans XD. Mais pour l'instant, je vais juste mettre ça de côté. Et encore une fois, je vais copier ces objets de texte. Maintenant, ici, il suffit de taper « firm », et l'autre est flexible. Pour l'instant, je vais juste mettre cela de côté, et plus tard, nous pourrons mieux aligner les choses. Ce que je vais faire, c'est sélectionner tout cela. Et ici, sur le côté droit, assurez-vous de désactiver l'option de redimensionnement réactif Il suffit donc de le placer sur le côté gauche, qu'il n'y ait aucune contrainte. Et puis, lorsque vous maintenez la touche Shift enfoncée pendant le redimensionnement, cela garantira que tout reste pareil comme nous en avons besoin Oui, je pense que ça va mieux fonctionner. Et plus tard, nous pourrons toujours rapprocher le texte. 5. Interactions pour l’écran de profil: Maintenant que tout est prêt, configurons la première interaction. Celui-ci sera donc très simple. Tout ce que nous avons à faire est de sélectionner tous ces éléments ici en haut. Il y a donc deux images l'une au-dessus de l'autre et les deux objets de texte et transformez-les en composants. Le moyen le plus court d' y parvenir est d'appuyer sur les touches commande ou contrôle k du clavier, et un cadre vert indiquera qu'il s' agit d'un composant. Il est également important que , dans le coin supérieur gauche, si vous voyez une étoile verte dans le champ , cela signifie qu'il s' agit du composant principal Donc, si vous le dupliquez, ce sera le parent et les autres seront les enfants. Ainsi, toutes les modifications que vous apportez au composant principal seront répercutées sur les instances, mais pas l'inverse. Nous utiliserons des copies ou des instances pour la version Web de cette application. C'est pourquoi il est important de se rappeler qu'il s'agit de l'élément principal. Maintenant, la raison pour laquelle nous devons créer un composant en premier lieu est de pouvoir ajouter des états, et nous avons créé un état par défaut ici en haut, mais nous devrons créer un état supplémentaire. Je vais simplement choisir un nouvel État, et je dirais que c'est pessimiste Maintenant, pour le moment, il n'y a aucune différence entre les deux, et je vais passer à l'état pessimiste, puis à partir du panneau des couches, que état pessimiste, puis à partir du panneau des couches, vous pouvez encore une fois révéler en appuyant sur la commande Y du clavier, vous pourrez trouver le composant Encore une fois, nous pouvons le renommer simplement pour le trouver plus facilement. Sélecteur donc optimiste et pessimiste. Nous pouvons même simplement mettre le sélecteur de début pour le trouver plus rapidement Celui-ci peut donc être ouvert, puis à l'intérieur, nous pouvons voir tous les éléments, tels que les couches d'un groupe. Et ici, nous pouvons simplement masquer la phase heureuse. Nous pouvons donc maintenant voir la phase de réglage. Et maintenant, si nous passons d' un état à l'autre, nous pouvons voir comment la transition se produit. Mais pour vous assurer que c'est encore mieux indiqué, passez de l'un à l'autre. Je vais également modifier un peu le texte. Je vais donc double-cliquer ici pour sélectionner optimiste, et si je vais passer en gras et en pessimiste, je vais réduire l' opacité à 30 % Maintenant, il est clair lequel est sélectionné, puis nous pouvons passer à l'état pessimiste Et là-dedans, je vais inverser la tendance. Je vais donc sélectionner Optimist, régler sur normal et 30 % d'opacité, puis faire celui-ci jusqu'à 100 % et le mettre en gras Maintenant, si nous passons d'un état à l'autre, le formatage de l'image et du texte change Pour passer à autre chose, nous devons faire exactement la même chose ici. Je vais donc être un peu plus rapide maintenant. Je vais sélectionner tout cela ensemble, appuyer sur Commando Control K, qui crée le composant Encore une fois, je vais renommer ce sélecteur et saisir les deux options creative et methodical, puis nous lui créerons un nouvel état Et ce sera la méthode. Et puis, dans l'état par défaut, nous n'avons pas à voir le rouage Je vais donc le cacher et nous devons nous assurer que la création est sélectionnée et mise en gras, tandis que méthode méthodique peut être réduite à 30 % Et maintenant, nous pouvons sélectionner l' ensemble du composant, revenir au mode méthodique, le second état dans lequel nous pouvons retourner le rouage et éteindre l'ampoule Ensuite, il suffit de modifier le formatage du texte de la même manière qu'avant agit d'une visibilité normale jusqu' à 30 %, l'autre revient à 100 et repasse en gras. Encore une fois, n'oubliez pas de revenir à l'état par défaut, puis vous pouvez simplement vérifier la transition entre les deux. Je trouve que ça a l'air génial. Et nous allons le garder dans la première option créative pour le moment. Passons ensuite à celui-ci. Comme je l'ai dit, c'est le plus délicat car nous avons ici deux masques distincts, et nous devrons ajouter une animation à la fois pour le cylindre et pour la Créons donc d'abord ces groupes de masques. J'ai déjà créé les formes avec lesquelles nous allons créer les masques. Donc, celui-ci sur le dessus sera utilisé avec cylindre et cet autre sera utilisé avec la sphère. Sélectionnons donc d'abord celui-ci et le cylindre. J'utilise simplement la touche Shift pour les sélectionner ensemble. Et puis en montant dans le menu des objets, nous pouvons choisir cette option appelée masque avec forme. Commandons Shift M depuis le clavier. Et une fois que vous avez fait cela, notez qu'ici, dans le panneau des couches, nous avons maintenant un groupe de masques. Je vais renommer ce cylindre de masque, et faisons de même pour la sphère Nous les sélectionnons tous les deux avec la touche Shift puis nous masquons l'objet avec une forme, puis nous renommons cette sphère de masque Encore une fois, vérifions simplement ce que nous avons réalisé. Et ici, la sphère réelle n'est actuellement pas visible. Mais une fois que nous l'aurons déplacé dans cette région créée avec le masque, nous commencerons à le voir. Je vais donc vous le montrer rapidement. Si j'ai sélectionné la sphère, une fois qu'elle sera entrée dans cette région, elle apparaîtra. Mais je vais le garder ici pour le moment. Maintenant que les masques sont en place, nous pouvons redéplacer le texte ici et l'aligner sur les autres objets de texte ci-dessus, puis nous pouvons sélectionner tout cela ensemble et en faire un composant. C'est le contrôle de commande K, et je vais également le renommer ici, le qualifier de sélecteur ferme et flexible, et également créer l'état correspondant, nouvel état et taper Tout d'abord, ce que nous pouvons faire, c'est passer à l'état par défaut et configurer les objets de texte. Cela doit donc être en gras dans le paramètre par défaut, et cela doit être réduit à 30 % de visibilité. Et puis remarquez que je clique toujours à l'extérieur, puis que je sélectionne à nouveau l'ensemble du composant, puis je peux passer d'un état à l'autre. Parce qu'une fois que vous double-cliquez pour apporter des modifications aux éléments, vous êtes dans le composant et vous ne pouvez pas voir l'option d'état. C'est pourquoi je clique toujours dessus, puis je le sélectionne à nouveau. Vous pouvez également utiliser le panneau des couches pour basculer entre les éléments contenus dans le composant et le composant lui-même. J'ai donc sélectionné le texte flexible, l'ai remis à 100 %, puis nous avons choisi le gras. Et c'est la dernière fois que nous devons le faire. Je choisis donc normal et je tape 30. C'est génial. Alors maintenant, vérifions-le. Nous passons du mode par défaut au mode flexible. Fonctionne bien. Mais maintenant, nous devons créer l'animation que j'ai mentionnée. Ici, au lieu d' une simple transition entre les éléments ou les images, nous voulons que ce cylindre passe à travers l'anneau et se transforme en sphère. C'est ainsi que j' en suis venue à représenter la différence entre une personne ferme et une personne flexible. Un cylindre semble donc beaucoup plus ferme qu'une sphère. La sphère représente donc la flexibilité tandis que le cylindre représente la fermeté. Pour créer l'animation, nous devrons travailler avec ces éléments au sein des groupes de masques. Mais ils sont déjà configurés comme ils devraient l' être dans l'état par défaut. C'est donc l'État ferme. Il ne nous reste donc qu'à passer à l'état flexible. Et dans ce cadre, nous devons faire bouger les choses un peu. Je vais ouvrir les éléments. Alors d'abord, déplaçons simplement le cylindre. Je vais donc trouver cet objet. Une fois qu'il est sélectionné, je peux le faire pivoter légèrement, puis commencer à le faire glisser bas et remarquer qu'une fois qu'il passe sous l'anneau, il disparaît. Nous pouvons donc déjà prévisualiser que la visibilité sera la visibilité sera complètement nulle une fois qu' il atteindra cette partie, car la forme que nous avons créée à l'origine, cette forme de masque, est la seule zone où se trouvera le cylindre visible. Donc, en le déplaçant ici, il va disparaître. Remarquez que j'essaie toujours le garder au centre de cette bague. Donc, horizontalement, il est toujours aligné. Mais maintenant je vais passer à l'autre masque et sélectionner ce groupe. Encore une fois, dans chaque groupe de masques, vous verrez le masque en haut et l'objet en dessous. Si vous souhaitez les trouver plus facilement plus tard, je vous recommande de les nommer également. Donc j'appelle ça le masque et voilà la sphère. Comme dans l'autre, nous avions à nouveau le masque et en dessous, nous avions le cylindre. Pour en revenir à la sphère, une fois que je l'ai sélectionnée, je peux utiliser la touche Shift et simplement la déposer quelque part dans la sphère. Et c'est tout ce que nous avions à faire. Maintenant, cliquez à l'extérieur et sélectionnez à nouveau le composant complet. Je peux passer de l'un à l'autre. Et c'est exactement ce que je voulais. Cependant, nous ne voyons pas encore d'animation, car elle ne s'affichera qu' une fois que nous aurons ajouté les interactions et commencé à utiliser des fonctionnalités telles que l'animation automatique. Mais avant cela, je veux m'assurer que tous les éléments sont prêts sur cet écran. 6. Buttons et arrière-plan pour l’écran de profil: Nous aurons en fait besoin d'un bouton ici, qui nous mènera à l'écran suivant. Donc, pour ce bouton, je vais utiliser l'outil rectangle ou carré. Et avec cela, nous pouvons simplement dessiner un rectangle ici en bas, et nous pouvons garder la couleur du champ blanche. Et pour l'instant, je vais juste garder la bordure juste pour que nous puissions voir où se trouve notre bouton. Mais je vais faire glisser ces angles rigides vers le bas, pour obtenir un bouton complètement arrondi Ensuite, avec l'outil de sélection, je vais cliquer et faire glisser ce texte. Déplacez-le ici, puis cliquez dessus avec le bouton droit et placez-le au premier plan, et je vais juste l' aligner sur le bouton, double-cliquer dessus, puis taper pour obtenir vos réponses. Je vais également changer ce paramètre en moyen. Pas besoin d'être en gras, alignez-le au centre du bouton, et une fois que tout est sélectionné ensemble, vous pouvez également l'aligner au centre de l'écran Outre ces éléments, nous aurons également besoin de quelques détails colorés en arrière-plan. Copions donc d'abord celui-ci. Je vais cliquer dessus et le faire glisser, le ramener ici et le renvoyer au fond. C'est un raccourci que j'utilise assez souvent. C'est le crochet gauche du commando Control Shift. Si vous avez du mal à vous en souvenir, vous pouvez toujours cliquer avec le bouton droit de la souris pour mémoriser ces raccourcis. Ils sont extrêmement utiles et fonctionnent de la même manière dans toutes les applications Adobe. Il s'agit donc de raccourcis d'arrangement universels. Cet élément est donc déjà en place. Introduisons simplement celui-ci, cliquons et faisons glisser à nouveau, ramenons-le ici. Ensuite, je vais le faire glisser vers le haut, pour augmenter la taille et probablement l'avoir quelque part dans le coin. Encore une fois, même raccourci pour le renvoyer au verso. Ensuite, je vais le dupliquer à nouveau. C'est donc faire la touche option et faire glisser. Mais cette fois, je vais le retourner horizontalement avec cette icône sur la droite, et je vais ajuster légèrement ses couleurs en cliquant sur l'échantillon de couleur du champ, et c' et je vais ajuster légèrement ses couleurs en cliquant sur l'échantillon de couleur du champ, est là que nous trouverons le dégradé Je vais donc sélectionner cette couleur et simplement réduire son intensité, rendre plus lumineuse et moins saturée. Je pense que quelque chose comme ça va fonctionner. Essentiellement, je veux juste m'assurer qu'il y a suffisamment de contraste entre ces formes. Je peux donc le placer ici et le faire glisser vers le haut quelque part , puis utiliser le raccourci pour le renvoyer à l'arrière. Et je pense qu'il y a suffisamment de contraste entre cette forme et cela. Donc ça va marcher. Mais juste pour qu'il y ait un peu plus de différence. Je vais également sélectionner cette couleur jaune et la rendre un jaune un peu plus vif comme ça. Maintenant, laissez-moi sélectionner cette autre forme, et nous pouvons l'agrandir. Je vais juste le redimensionner. Il s'intègre donc un peu mieux ici. Oui, je trouve que c'est une bonne composition. D'ailleurs, vous pouvez dessiner ces formes l' aide de l'outil stylo de XD, ou vous pouvez les importer depuis Illustrator. Et juste pour que tu saches comment faire. Si vous souhaitez apporter des modifications à une forme, il vous suffit de la sélectionner, puis de double-cliquer dessus puis de double-cliquer dessus pour trouver des points d'ancrage individuels, des points angle, ainsi que ces points lisses où se trouvent les poignées, et vous pouvez les ajuster comme dans Illustrator lorsque nous travaillons avec des pièces. Revenir à notre écran de profil. Nous avons maintenant tous les éléments en place. Cependant, nous devons nous assurer que ces formes d'arrière-plan sont également connectées à nos trois boutons. Et pour que cela fonctionne, nous devrons les placer dans les composants que nous avons créés. Commençons donc par celui-ci, en bas de page. Je vais sélectionner cette forme, puis utiliser la commande Control X pour la couper Vous pouvez également utiliser l'option d' édition et de découpe, puis sélectionner ce composant et double-cliquer dessus, ce qui signifie que nous y sommes maintenant. C'est comme l'isolement dans Illustrator. Ensuite, si j'utilise Commando Control V, il va recoller cette forme là où elle se trouvait en termes de place sur l'écran ou le plan de travail Mais pour ce qui est de l'arrangement, je vais devoir l'envoyer en bas ou à l'arrière du composant. C'était donc le crochet gauche du commando Control Shift. Maintenant qu'il est placé là, nous pouvons cliquer sur av, sélectionner à nouveau ce composant. Et vérifiez si la forme reste visible dans nos deux états. Et cela se voit dans les deux, donc c'est parfait. Et si nous l'avons placé ici, c'est parce que nous aimerions également voir un peu d' animation sur ces formes lorsque nous passons d'une option à l'autre. Mais c'est quelque chose que nous mettrons en place ultérieurement pour le moment. Tout ce que je veux m'assurer, c'est que ces formes sont toutes liées à ces togos Nous pouvons donc maintenant sélectionner la deuxième forme, la découper. Double-cliquez sur le composant, puis collez-le et renvoyez-le. Cliquez sur un v. Vérifions-le également. Les deux états fonctionnent bien. Ensuite, sélectionnons cette forme. Enfin, encore une fois, commandez x pour le découper, double-cliquez sur le composant, collez-le avec la commande Control V, puis renvoyez-le à la Cliquez sur un et vérifiez les deux états. Oui, fonctionne parfaitement. Maintenant, tout est en place. Il est temps de configurer enfin les premières interactions et de voir les choses intéressantes que nous pouvons réaliser avec la fonction d'animation automatique. 7. Interactions: Pour ajouter des interactions, nous devons passer au deuxième module avec xD , appelé prototype. Notez qu'il existe un raccourci avec lequel vous pouvez facilement passer de l'un à l'autre. À partir de la conception, qui est la première option de modification, nous pouvons utiliser la deuxième option de modification pour passer au prototype. Cela vaut vraiment la peine de s'en souvenir car nous allons beaucoup passer , car nous allons beaucoup passer de l'un à l'autre. Nous sommes maintenant en mode prototype. Nous pouvons sélectionner notre premier composant. Et dans ce cadre, j' aimerais double-cliquer pour y accéder. Et là, j' aimerais que vous sélectionniez l'image et l'autre image située en dessous, c' est-à-dire la touche Shift de la couche SpanelHapp et que vous la définissez ensemble, ainsi les objets de texte Vous devriez donc sélectionner ces quatre éléments. Le chemin qui les suit n'est pas nécessaire pour cette sélection. Et nous allons en faire un groupe, ce que nous pouvons réaliser en appuyant sur la commande ou le contrôle G du clavier. Et la raison pour laquelle nous le faisons est que cela va créer la zone à laquelle nous pourrons attribuer notre direction. Vous pouvez donc voir que le groupe est sélectionné. Nous avons cette petite flèche ici sur la droite. Et il suffit de cliquer dessus une fois pour que notre première interaction soit prête, et le déclencheur sera le toucher. Il suffit donc de cliquer dessus ou de taper dessus à l'écran pour déclencher l'action, qui dans ce cas sera une simple transition. Nous devons nous assurer que la destination est réglée sur le deuxième état de ce composant, qui est l'option pessimiste Pour l'animation, je vais conserver la fonction de dissolution avec laquelle nous pouvons créer une transition subtile et agréable. Et nous pourrons ensuite décider de la manière dont nous voulons procéder à l'assouplissement. Mais j'ai l'impression que se détendre serait une bonne chose. Et la durée est par défaut fixée à 0,3 seconde, ce que je trouve plutôt bon. Mais nous pouvons déjà le tester en appuyant sur l'icône Play en haut à droite. Donc, si je clique n'importe où sur l'image ou sur les deux objets de texte ou même entre les deux, je peux déjà passer au second état. Mais comme vous pouvez le constater, nous n'avons pas encore le moyen de revenir à l'autre option. Cela fonctionne donc dans un sens pour le moment. Mais c'est une solution facile. Il suffit de sélectionner le composant. Cliquez donc d'abord sur un poids, puis sélectionnez le composant, passez au deuxième état, puis double-cliquez. Assurez-vous que le groupe est surligné. Cliquez sur la petite flèche à droite, puis nous allons le configurer à nouveau de la même manière. Passez donc à l'état par défaut cette fois. Et XD est vraiment intelligent. Je me souviens toujours de vos derniers paramètres d'utilisation, vous n'avez donc pas à vous soucier de les configurer. Maintenant, nous pouvons simplement cliquer dessus et sélectionner le composant, assurer qu'il est rétabli à son état par défaut, puis nous pouvons le tester. Encore une fois, en utilisant le bouton de lecture sur la droite, nous pouvons maintenant appuyer dessus et appuyer sur retour. Nous avons donc notre premier design à bascule. À ce stade, il convient de mentionner que si vous connectez votre téléphone à votre ordinateur lorsque vous utilisez un OBXC et que vous avez l'application XD sur votre téléphone, vous pourrez voir la vue en direct de votre projet en cours C'est un excellent moyen de vraiment tout tester et de voir ce que vous ressentez, si les zones sont suffisamment grandes pour ou s'il y a tout problème avec l' encoche en haut, masquant certains détails comme le texte. C'est quelque chose que vous voulez voir ici dans l'aperçu pour ordinateur. Le plus simple est de le voir en direct sur votre téléphone. Assurez-vous simplement de télécharger l'application Adobe XD et de vous connecter avec les mêmes informations de compte Creative Cloud. Ainsi, le document cloud sur votre bureau pourra être synchronisé et connecté à l'application sur votre téléphone. J'adore la façon dont ADB XD intègre cette fonctionnalité de prototypage en direct Cela rend l' ensemble du processus de conception vraiment intuitif et amusant. Mais pour passer à autre chose, n'oublions pas cette forme en arrière-plan de ce composant. Je veux donc aussi que cela change lorsque les utilisateurs appuient sur ce togo. Donc, pour pouvoir le faire, d'abord, dans l'état par défaut, je veux que la forme soit là où elle se trouve. Mais dans un état pessimiste, je veux que ça bouge légèrement Je change donc d'abord d'état. Ensuite, je tape deux fois à l'intérieur. Et une fois cette forme sélectionnée, nous devons changer sa taille et ses couleurs. Mais c'est quelque chose que nous ne pouvons faire qu' en revenant au mode design. C'est donc la première option. Et dans ce cadre, je peux facilement en modifier la taille. Cela peut se résumer à cela, puis pour changer rapidement de couleur, je vais appuyer sur Command Shift Y ou Ctrl Shift Y, ce qui vous amène à l'onglet Ressources du document sur la gauche. Bien entendu, vous pouvez également y accéder avec cette icône ici. Et à partir de là, je vais peut-être opter pour cette couleur. Donc, un dégradé plus frais, juste pour accompagner la couleur froide ou bleutée de la tête Et le mieux, c'est que c'est tout ce que nous devons faire , car tout est déjà configuré avec les interactions. Tous les éléments que vous modifiez dans un composant qui utilise ces interactions doivent également être automatiquement mis à jour. Donc, si je clique, cliquez de nouveau ici, je peux maintenant voir que la forme change également. Mais si on y joue, la transition ne se fera pas en douceur. C'est juste un saut rapide entre les deux. C'est parce que nous n'utilisons actuellement qu'une transition de dissolution normale qui passe d'un état à l'autre Cependant, chez OBX D possède la fonctionnalité la plus intéressante appelée animation automatique, qui permet de créer un intervalle entre ces animations et de transformer un état d'un objet en ces animations et de transformer un autre, ce qui permettra de créer une transition fluide entre les deux états de la forme, à la fois les couleurs et la position de fois les couleurs et la position 8. Animer automatiquement les interactions et les activer: Pour pouvoir le configurer, nous revenons en mode prototype et nous appuyons d'abord deux fois sur le premier état ou sur l' état par défaut de ce composant. Et ici, il ne nous reste plus qu'à changer la transition vers l'animation automatique. C'est donc l'interaction que nous avons déjà mise en place. Nous ne faisons que changer le type, mais il mémorisera tous les autres paramètres. Nous n'avons donc pas à nous inquiéter à ce sujet. Je vais cliquer dessus, cliquer sur retour, passer à l'autre état, et me rappeler que nous devons nous assurer que c'est configuré dans les deux sens. Je vais donc appuyer deux fois, sélectionner le groupe et le modifier pour l'animer automatiquement Maintenant, nous pouvons cliquer sur av, sélectionner le composant, remettre à l'état par défaut, et il est temps de le tester. Alors voyons voir. Nous avons maintenant l' option cool d'animation automatique qui crée une animation ou une transition fluide sur la forme de droite Cela n'a pas vraiment affecté la transition visuelle entre l'image et le texte, mais même cela est devenu un peu plus subtil à mon avis. Donc, si vous prêtez une attention particulière au texte, parce que nous passons de deux poids en gras à un poids normal, au lieu de simplement dissoudre un état dans un autre, il passe réellement de l'un à l' autre Ainsi, l'épaisseur des lettres augmente progressivement et diminue progressivement. C'est quelque chose de très subtil, notamment parce que notre animation est très rapide (0,3 seconde), mais elle contribue tout de même à créer transition fluide que je recherchais. Maintenant, vous devez suivre exactement les mêmes étapes sur les deux autres sélecteurs Mais juste pour être sûr que vous sachiez ce que vous devez faire, je vais passer en revue tout cela très rapidement. Donc, tout d'abord, je vais sélectionner ce deuxième composant. Appuyez deux fois et sélectionnez tous les éléments dont nous avons besoin ici. À l'aide de mon panneau de couches, je m'assure également que le rouage actuellement masqué est inclus dans ce groupe Je vais les regrouper et attribuer la première interaction, qui utilisera l'animation automatique, en passant à la méthode méthodique Découvrez comment il se souvient déjà de tous les autres paramètres. Ensuite, je clique, je passe en mode méthodique, je tape deux fois, ajoute l'autre interaction, qui revient à l'état par défaut Je vais également sélectionner cette forme ici, passer en mode design, la faire glisser vers le bas. Et encore une fois, utilisez l'une des options de couleur enregistrées, peut-être celle-ci, ou nous pouvons en utiliser une autre juste pour avoir une certaine variété ici. Nous pouvons donc maintenant cliquer dessus, cliquer sur retour, revenir à l'état par défaut, et nous pouvons déjà le tester. Il y a une belle animation automatique en action, qui permet de basculer entre les deux images, texte et la forme en arrière-plan Maintenant, pour le dernier passage à l'écran, nous devrons régler un problème, et c'est quelque chose que j'ai volontairement laissé là juste pour et c'est quelque chose que j'ai volontairement laissé là juste vous montrer ce qui se passe au cas où vous oublieriez de configurer quelque chose, et il s'agit d'une fonctionnalité appelée composant imbriqué Ainsi, pour pouvoir créer une transition fluide entre les deux états de forme, le cylindre et la sphère, et pour pouvoir voir cette fonction d'animation automatique intéressante sur eux, ils devraient également devenir un composant à l'intérieur de ce composant plus grand Mais juste pour que vous puissiez voir comment cela fonctionne sans elle. Revoyons juste l' aperçu. Ainsi, lorsque nous changeons, il y a une transition simple. Et même si je change cela pour l'animation automatique, cela ne va pas s'améliorer Alors laisse-moi te montrer ça. Tout d'abord, je vais passer à l'état flexible, appuyez deux fois ici. Et en mode design, je vais simplement changer la forme de ce chemin ici, et aussi changer sa couleur pour peut-être ce dégradé, puis le modifier légèrement pour qu'il n' entre pas en conflit avec l'autre. Je vais le rendre un peu plus orange. Je pense que cela commence déjà à se démarquer davantage. Je peux le rendre légèrement plus foncé. Je pense que cela va très bien fonctionner. Donc maintenant, si nous revenons à l'état par défaut, c'est à ce moment-là que nous pouvons le tester. En cliquant dessus, on obtient cette transition de dissolution , car l'option d' animation automatique n' est pas encore activée. Mais si je double-clique ici et que je reviens au prototype, je peux changer le type de transition pour qu'il s'anime automatiquement et que je conserve le reste des paramètres, puis je reviens au composant, passe à l'état flexible, tape à nouveau deux fois et je le change également pour l'animation automatique Maintenant, lorsque nous revenons à l'état par défaut, nous pouvons le tester en appuyant dessus Vous pouvez voir comment nous avons maintenant une animation fluide sur le chemin en arrière-plan, mais pas sur ces formes. Et c'est parce que cela devrait également devenir un composant ou un composant imbriqué pour que cela fonctionne 9. Composants imbriqués: Non, ne vous inquiétez pas, si cela vous semble trop compliqué, vous n'avez pas besoin de créer ce composant imbriqué La façon dont elle est actuellement configurée semble déjà bonne, vous pouvez donc passer à la vidéo suivante et continuer avec le reste de la conception de l'application. Cependant, si vous êtes sûr d'avoir déjà compris tous les concepts jusqu'à présent, laissez-moi vous montrer cette solution créer ce composant imbriqué nous suffit donc de revenir aux premières années, nous assurer de voir ce que nous allons sélectionner, de nous assurer de voir ce que nous allons sélectionner, puis de passer en mode design. Double-cliquez pour d'abord saisir le composant. Et dans ce cadre, nous avons ce groupe. Je vais donc à nouveau cliquer deux fois. Et dans ce groupe, je vais maintenant pouvoir sélectionner la bague, le cylindre et le juron. Et pendant que cette option est sélectionnée, je peux appuyer sur la commande k, qui va en faire un composant Mais notez que puisqu'il s'agit d'un composant imbriqué, il a donc été créé dans un autre composant, il ne sera pas considéré comme le composant principal pour cela Objet, il n'est donc pas renseigné ici dans le coin supérieur gauche. Ainsi, lorsque je souhaite apporter des modifications à ce composant, XD génère le composant principal en dehors de mes tableaux d'art. Alors laissez-moi vous montrer comment cela fonctionne. Tout ce que j'ai à faire est de cliquer avec le bouton droit de la souris et choisir Modifier le composant principal. Et voilà, c'est le nouveau qui est créé pour moi. Maintenant, ne vous inquiétez pas de l'avoir en dehors de vos plans de travail, car tout ce que vous attribuez à cette version s'appliquera également à l'autre instance affichée à l'écran Donc pour cette version du composant principal, nous pouvons maintenant ajouter un nouvel état. Je l'appelle simplement sphère. Ici, nous devons répéter ce que nous avons fait auparavant en ouvrant le composant ainsi que les groupes de masques, en sélectionnant le cylindre, en le faisant légèrement pivoter, en le faisant glisser vers le bas, puis en sélectionnant la sphère et en la faisant glisser également en sélectionnant le cylindre, en le faisant légèrement pivoter, en le faisant glisser vers le bas, puis en sélectionnant la sphère et en vers le bas Il s'agit donc de notre deuxième état pour ce composant, et c'est le premier. Et pour que cela fonctionne et se mette à jour ici dans cette interaction que nous avons créée. Il suffit d'y revenir, de passer à l'état flexible et constater que le composant imbriqué ne change pas encore. Mais maintenant que nous sommes dans cet état, nous pouvons appuyer deux fois et encore appuyer deux fois. Et il y a notre composant imbriqué, que nous pouvons transformer en sphère Et une fois que nous avons appuyé sur Retour à l'extérieur, nous pouvons revenir à l'état par défaut, et nous pouvons le tester maintenant, et la bonne nouvelle est que nous n'avons rien d'autre à faire. L'animation automatique fonctionne donc désormais pleinement sur l'image à bascule, fonctionne donc désormais pleinement sur ainsi que sur ces formes et sur la forme en arrière-plan, ce qui fonctionnait déjà auparavant Mais n'oubliez pas que pour que cela fonctionne, nous avons dû créer ce composant imbriqué D'ailleurs, vous pouvez gagner beaucoup de temps en planifiant vos composants à l'avance. Donc, si nous avions créé ce composant avant de créer le plus grand composant, il ne serait pas nécessaire d'avoir ce composant principal en dehors de l'écran, et les choses auraient été un peu plus rapides et plus faciles à configurer. Comme je l'ai dit, cela peut être peu déroutant et un peu plus complexe. Mais il est très important de comprendre comment vous travaillez avec les composants en général dans XD. Et au fur et à mesure que vous progresserez dans l'utilisation de cet outil, vous utiliserez de plus en composants imbriqués comme celui-ci Donc, pour garder les choses en ordre, je vais déplacer ce composant, qui est notre principal composant pour cet élément sur le tableau des actifs, et je vais également le renommer et l'appeler formes Mais la bonne nouvelle est que ce sélecteur de profil fonctionne désormais pleinement Donc tout change bien, les animations sont là, et nous pouvons tout changer indépendamment les uns des autres. Et les seules choses qui ne sont pas connectées ou configurées actuellement sont le menu Aide et le bouton Mais nous l'ajouterons après avoir créé tous les écrans supplémentaires dans la prochaine vidéo. 10. Créer l’écran d’assistance: Par rapport à l'écran de profil, tout le reste sera assez simple. Alors ne vous inquiétez pas, au cas où vous trouveriez cela un peu complexe et confus. Je pense que vous trouverez le reste du processus beaucoup plus simple. Je vais donc revenir au mode conception et à l' aide de l'outil de plan de travail, je vais créer un nouveau plan de travail, que je vais renommer en appels de Et pour cela, nous avons tout d'abord besoin d'un texte , que je vais coller ici. Nous pouvons également utiliser l'actif à partir d' ici sur l'autre plan de travail. C'est en fait ce dont nous avons besoin. Les objectifs fixés peuvent les aligner quelque part au centre. Nous aurons alors également besoin de cette icône d'accueil, que je fais simplement glisser ici en maintenant la touche Modifier enfoncée. Ensuite, nous aurons besoin de l' élément montagnes et de cette image, cette bulle de dialogue ou de ce cadre de texte, puis d'une forme, que je vais configurer plus tard. Mais oui, ce sont tous les éléments nous aurons besoin au début. Cependant, nous devrons également concevoir quelques éléments ici. Tout d'abord, nous aurons besoin d'une toile de fond pour cette icône, juste pour rendre un peu plus intéressante. Pour cela, je vais utiliser l'outil ellipse, et avec cela, je vais simplement dessiner un cercle parfait En maintenant la touche Shift enfoncée, je peux m'assurer qu'il s' agit d'un cercle parfait. Et je vais utiliser les couleurs enregistrées dans le panneau des bibliothèques, c'est-à-dire Commando Control Shift Y, et ce jaune est ce que j'aimerais utiliser pour la couleur du champ Et je n'ai pas besoin de bordure, donc je peux l'enlever. Je vais m'assurer qu'il est renvoyé à l' arrière en utilisant le raccourci ou en cliquant avec le bouton droit de la souris sur Envoyer à la fin. Ensuite, sélectionnons les montagnes, et je vais juste les redimensionner un peu Mais attention lors du redimensionnement, vous devrez peut-être d' abord désactiver l'option de redimensionnement réactif, puis maintenir la touche Shift enfoncée pour vous assurer que les éléments de ce groupe sont conservés au même endroit Je vais le placer quelque part par ici et m'assurer que le cercle et la montagne sont alignés quelque part au centre. Ensuite, nous pouvons sélectionner cette forme ici, la retourner horizontalement. Ensuite, déplacez-le vers le bas, et probablement, nous devrons faire un peu plus de place ici. Il suffit donc d'appuyer deux fois sur le plan de travail et de le faire glisser un peu vers le bas Et remarquez qu'il y a un point limite ici. Il s'agit donc de la taille d'origine de l'écran. Et une fois que vous augmentez la taille verticalement, cela signifie qu'un défilement vertical sera automatiquement activé. Nous pouvons donc maintenant déplacer cette forme vers le bas, augmenter sa taille, puis sélectionner l'image et nous assurer qu'elle figure au premier plan. Alors, mettez-le au premier plan. Augmentons simplement la taille de celui-ci. Encore une fois, assurez-vous que l'option de redimensionnement réactif est désactivée et que vous maintenez la touche Shift enfoncée pendant que vous la redimensionnez, afin que cela puisse se retrouver quelque part Et puis la bulle vocale, en fait, je veux aussi être au premier plan, pour qu'elle puisse être quelque part. Maintenant, tout peut légèrement remonter, puis le plan de travail peut également être légèrement déplacé vers le haut. Quelque part par là. Maintenant, il y a une fonctionnalité que j'aimerais vous activiez pour cette forme. C'est la position fixe lors du défilement. Donc, lorsque vous l'activez et que vous testez cet écran, vous verrez que cette forme ne se déplace pas de haut en bas, ce que j'aime bien. Mais il y a d'autres choses que nous devrons corriger ici, notamment en ce qui concerne le menu. Mais pour l'instant, je voudrais juste m'assurer que nous avons tous les éléments nécessaires à l'écran, et que ce bouton d'accueil devrait être un peu plus petit. Je vais donc simplement le redimensionner. Et alignez-le ici dans le coin. Et puis nous avons également besoin d'un menu sur la gauche, pour lequel je vais utiliser l'outil linéaire. En maintenant la touche Shift enfoncée, je peux tracer une ligne droite, augmenter l'épaisseur à deux points, changer la couleur de la bordure en noir et ajouter des capuchons ronds, puis zoomer de plus près Je peux m'assurer que nous en avons trois. Donc, cliquez et faites glisser une fois, puis encore une fois, en veillant à ce que nous ayons une distance égale entre eux. Vous pourriez avoir besoin d'une forme un peu plus étalée comme celle-ci. Et chaque fois que je crée des icônes, j'aime créer une forme vide derrière elles, ce qui permet créer une zone plus large sur laquelle nous pouvons appuyer au lieu de nous fier uniquement à ces petites lignes fines. Remarquez donc comment j'ai créé cette forme ici, mais elle sera invisible. Je vais désactiver le remplissage et les couleurs des bordures. Ensuite, je sélectionne tout ici, sorte que les trois lignes se vident de la forme et la transforment en composant en appuyant sur la commande Control K. Toutes les icônes que vous utilisez sur plusieurs écrans doivent toujours être configurées en tant que composants Parce que de cette façon, vous pouvez facilement revenir à votre composant principal, apporter quelques modifications simples, et vous verrez les mises à jour refléter sur tous les autres écrans. Sans oublier le fait que vous n'aurez à créer l'interaction du menu qu'une seule fois, et cela se répétera également sur tous les écrans. C'est donc prêt en tant que composant. Et je vais faire de même avec l'icône d'accueil. Donc, encore une fois, je vais utiliser un rectangle, dessiner ici et m'assurer qu'il est aligné sur cette autre forme. Ensuite, je désactive les couleurs des bordures et des champs, mais je m'assure que l'icône d'accueil et la forme qui l'entoure sont sélectionnées, puis j'appuie sur la commande ou le contrôle K pour en faire également un composant. Maintenant, ces composants apparaîtront dans zone des actifs de votre document, et vous pouvez simplement l' appeler accueil et menu. 11. Finaliser l’écran d’assistance: Enfin, nous devons également créer une flèche ici sur le côté droit, pour laquelle je vais utiliser l'outil stylo, en appuyer une. Cliquez ensuite quelque part ici sur le côté droit, puis cliquez à nouveau ici, essayez de le rendre de taille égale. Toutefois, vous pourrez toujours le modifier ultérieurement. Mais pour l'instant, je suis content de son apparence Je peux donc en augmenter l' épaisseur jusqu'à trois ou cinq points. Définissez également des capuchons ronds et des joints ronds. La couleur de la bordure doit être noire, et c'est la flèche dont nous avions besoin. Je vais juste le redimensionner légèrement. Comme avant, pour cela, je vais créer un cadre autour afin de faciliter interaction avec cette icône Alignez-le un peu plus près , puis désactivez-le, sélectionnez-les tous ensemble, regroupez-les d'abord en tant que Commando Control G, puis dupliquez-le sur le côté gauche, retournez-le horizontalement Nous pouvons maintenant créer un composant pour chacune de ces directions. Donc celui vers la gauche et celui vers la droite. Donc, pour chacune d'entre elles, j'utilise Commando Control K, et je vais juste appeler celle-ci à droite et celle-ci à gauche Et nous n'aurons pas vraiment besoin de la gauche sur ce premier écran. Nous le supprimerons plus tard, mais pour le moment, il peut y rester. Maintenant que tout est en place, nous pouvons simplement dupliquer ce plan de travail en appuyant sur Modifier l'option Faire glisser avec l'outil de sélection, puis notre deuxième plan de travail sera AMH. C'est sera AMH. C' Vous pouvez modifier le texte déjà présent. Visez haut. Nous pouvons maintenir le cercle en place, supprimer l'image et faire descendre la ressource à l'aide option de modification par fléchettes, le faire glisser vers le bas, agrandir après avoir supprimé l'option de redimensionnement réactive et en l'option de redimensionnement réactive maintenant la touche Shift enfoncée, l'aligner quelque part Ensuite, nous pouvons supprimer toutes ces choses en bas, et à la place, nous aurons besoin de cette image ici. Nous pouvons déjà le redimensionner. Ensuite, nous avons besoin de ce texte. Et je vais utiliser cette forme. Il suffit de le retourner horizontalement. Notez que la position fixe pendant gribouillage est déjà activée Je vais l'agrandir, l' envoyer au dos, et je vais lui appliquer cette couleur. Je veux m'assurer qu' il n'y a pas de tangentes, comme si cette bulle de dialogue était actuellement alignée exactement sur le bord de cette forme Nous voulons donc nous assurer qu'il y ait une belle séparation et un beau contraste. Ça a l'air parfait. Passons à autre chose, créons le plan de travail suivant. Encore une fois, je ne fais que dupliquer cela. Celui-ci, je vais l' appeler Boost. Le texte peut déjà changer ici. Tapez Boost vous-même, vous pouvez retirer les fléchettes et supprimer tous ces éléments Et dans ce cas, nous aurons besoin de la fusée. Donc je le duplique, l' aligne ici au milieu. Nous avons besoin de cette image. Nous avons besoin de la copie, et nous avons besoin de la même forme que celle que nous utilisons ici, mais en la retournant de l'autre côté et en la remplaçant par ce dégradé Permettez-moi donc de zoomer un peu plus près pour m'assurer que tout est correctement configuré. Il peut donc être plus grand placé à l'avant et installé quelque part par là. Je trouve que ça a l'air plutôt sympa. La fusée peut également être légèrement plus grosse. Assurez-vous simplement de désactiver le redimensionnement réactif, maintenir la touche Shift enfoncée et de le redimensionner légèrement Cela sort donc un tout petit peu de ce cercle. Enfin, nous avons encore un écran. Encore une fois, il suffit de le copier, de renommer le tableau d'art lui-même et de l'appeler « share it Le même texte est affiché ici, partagez-le. Encore une fois, nous pouvons supprimer ces éléments. Et apportez le porte-voix qui , ici, peut augmenter un peu sa taille Ensuite, nous avons besoin de cette forme, augmentez-la en taille. Assurez-vous que la position fixe est activée lors du défilement. Ensuite, nous avons besoin de cette image également augmentée en taille, puis de la dernière zone de texte. Alors maintenant, je zoome plus près de ça. Nous pouvons à nouveau aligner les éléments, assurer que l' image est en haut, mais qu'elle ne recouvre pas le texte dans la zone de texte, et que cette forme peut être légèrement plus large et simplement recadrée à l'extérieur comme ceci. Cela montre à quel point il a été rapide et facile de configurer ces écrans supplémentaires. Évidemment, le fait de disposer de tous les éléments visuels et de toutes les copies nous a fait gagner beaucoup de temps. Mais dans la vidéo suivante, nous allons configurer des interactions amusantes pour ces images, ainsi que l'interaction permettant de passer de l'écran de profil aux écrans de conseils et passer d'un écran à l'autre. 12. Mise en place d’animations: Commençons par créer la première interaction sur cet écran d'objectifs. Tout d'abord, j' aimerais que vous sélectionniez la forme en arrière-plan et l'image de la montagne et que vous en fassiez un composant. C'est Commando Control K. Maintenant, nous pouvons créer un nouvel état pour cela en cliquant sur le signe plus, et vous pouvez renommer le nouvel état ou simplement le conserver comme état 2 par défaut Mais le plus important, c'est que nous devons double-cliquer dessus pour pouvoir sélectionner la montagne. Ensuite, en appuyant sur Commando Control Y dans les couches, nous pourrons ouvrir ce groupe Et vous remarquerez qu'il y a en fait plus d'éléments ici. C'est encore une fois quelque chose que j'ai préparé dans Photoshop. Même s'il s'agissait d'une image rendue aplatie, j'ai séparé le drapeau et j'en ai même créé deux versions Nous avons une version violette et une version verte, toutes configurées sur des couches séparées. Donc, dans ce nouvel État, ce que je veux, c'est que le drapeau violet et le drapeau vert soient hissés. Je les ai donc simplement sélectionnés, puis en utilisant shiftpero, je peux les faire glisser vers le haut jusqu'à ce qu'ils passent juste à l'extérieur du cercle, restant visibles derrière la montagne Vous ne voulez donc pas les élever trop haut avant qu' haut avant Mais oui, je pense que je vais juste avoir quelque part par ici. Ensuite, une fois que les deux sont levés, assurez-vous de désactiver la visibilité du drapeau violet. Il est important de lever les deux drapeaux en premier, puis de désactiver la visibilité, car cela est nécessaire au bon fonctionnement de l'animation automatique Mais maintenant, nous pouvons simplement cliquer à l'extérieur, sélectionner ce composant, revenir à l'état par défaut et basculer entre ces deux états, en vérifiant simplement son apparence. J'en suis content. Mais pour que cela fonctionne réellement. Pour en revenir à l'état par défaut, je peux passer en mode prototype et simplement cliquer sur cette petite flèche ici et la maintenir enfoncée. Appuyez sur Animer automatiquement pour passer à l'état deux Ensuite, nous passons à l'état deux. Et assignez-y également une autre interaction, qui reviendra à l'état par défaut avec les mêmes paramètres. Revenons maintenant à état par défaut et appuyons sur la touche de commande Entrée pour passer rapidement à l'aperçu où nous pouvons déjà le tester, et cela va dans les deux sens C'est cool, non ? Faisons donc la même chose ici avec les autres images. Encore une fois, je commence par les sélectionner et les transformer en composants. En revenant au mode design, nous pouvons y ajouter le nouvel état. Et une fois ce nouvel état créé, nous pouvons appuyer deux fois. Tout d'abord, sélectionnons le tableau au sein de ce groupe, et nous pouvons simplement le redimensionner Encore une fois, maintenez la touche Shift enfoncée pour éviter de modifier les proportions. Et aussi, je vais le faire légèrement pivoter. Et puis cette fléchette peut également être tournée puis déplacée vers le centre comme ça Alors maintenant, si nous cliquons à l'extérieur, nous pouvons vérifier l'état par défaut et l'autre état. Je trouve que ça a l'air vraiment bien. Maintenant, en passant en mode prototype, nous ajoutons l' animation automatique à l'état deux Et pour l'état deux, nous voulons également ajouter l'animation revenant à l'état par défaut. Nous pouvons donc maintenant le tester et cela fonctionne parfaitement. Faisons la même chose sur le troisième écran de conseils. Encore une fois, nous sélectionnons tous ces éléments, et en mode design, je les transformerai en composant, puis j'ajouterai le nouvel état correspondant. Et dans le nouvel état, je veux que la fusée un peu du cadre et qu'elle tourne, et que la fumée puisse également tourner et sortir à l'extérieur, ou peut-être légèrement de cette façon. La fusée peut également être légèrement plus grande. J'ai donc l'impression que ça vient vers nous. Voyons donc rapidement cela avant et après. Oui, je pense que ça marche bien. Ensuite, en passant en mode prototype, nous assignons à la première interaction le passage à l'état deux. Ensuite, à partir de l'état deux, nous voulons pouvoir revenir à l'état par défaut, puis le tester rapidement. Ça y est. Effet. Enfin et surtout, nous aimerions également les transformer en composants. Cependant, ici, j' aimerais également ajouter quelques éléments en utilisant le panneau. Il vous suffit donc de dessiner une petite forme comme celle-ci à l'aide du pano. C'est donc comme un petit éclair. Mais nous n'avons pas besoin de la couleur de la bordure. Au lieu de cela, nous voulons utiliser une couleur rouge. J'utilise l'outil Hydroper et échantillonne une couleur à partir du mégaphone Ce sera donc une forme dont nous aurons besoin. Et dupliquons cela une fois de plus. Celui du milieu peut être retourné verticalement, puis nous pouvons simplement les faire pivoter, peut-être les redimensionner un peu, puis je veux les aligner. À peu près où ils finiront. Mais maintenant, je vais les sélectionner tous les trois, puis en utilisant le crochet gauche de la commande , je vais les déplacer jusqu'à ce qu'ils passent derrière le mégaphone Ils sont donc devant la forme, ce cercle jaune, mais derrière le mégaphone, et très bien, avec un V là Maintenant, une fois tous ces éléments sélectionnés ensemble, nous pouvons créer notre composant , puis lui ajouter un nouvel état. Et dans ce nouvel état, j'aimerais faire bouger les choses un peu. Donc, tout d'abord, j' aimerais que cette image augmente en taille, peut-être aussi qu'elle pivote. Et ensuite, avoir sélectionné ces pièces. Nous pouvons simplement les déplacer et peut-être augmenter un peu leur taille. Revenons donc à l'état par défaut et passons de l'un à Nous pouvons simplement avoir un aperçu rapide de ce à quoi cela va ressembler. Mais pour ajouter la fonction d' animation automatique, nous passons au prototype, cliquez sur ce bouton pour sélectionner l'état deux Ensuite, pour l'état deux, nous voulons ajouter une autre interaction, et la destination est cette fois l'état par défaut. Encore une fois, si nous faisons un aperçu à ce sujet , cela fonctionne parfaitement. 13. Interactions entre les écrans: Il est maintenant temps de configurer les interactions entre ces écrans, et je n'ai pas besoin d' une flèche de ce côté. De plus, je n'ai pas besoin de cette flèche sur le côté gauche. J'appuie donc simplement sur l'espace arrière pendant que je les sélectionne, et nous pouvons commencer par cette flèche. En mode prototype, nous cliquons et faisons glisser la flèche bleue pour configurer une interaction avec la destination sur le deuxième plan de travail. Et pour le type d'animation ici, j'aimerais utiliser la transition. Et pour l'animation, j'aimerais utiliser push left au lieu de dissoudre. La durée et l'assouplissement peuvent être tels qu'ils sont par défaut. Encore une fois, si je le prévisualise, j'ai l'impression qu'il est assez rapide et qu'il fonctionne bien. Maintenant que cette option est configurée, nous pouvons continuer avec l'autre flèche droite créer l'interaction sur l'écran suivant. Notez qu'il va utiliser à nouveau les mêmes paramètres. Nous pouvons donc très rapidement configurer celui-ci et déplacer l'interaction sur le dernier écran. Donc je suis juste en train de vérifier qu'ils vont tous dans le bon sens. Et puis commençons par celui-ci. Il s'agit donc de la transition en arrière. D'ici, nous voulons y aller. Et au lieu de pousser vers la gauche, nous voulons utiliser la touche droite, les mêmes paramètres s'appliquent. Ensuite, celui-ci pourra y retourner, mêmes réglages. Et puis finalement celui-ci peut y aller avec les mêmes réglages. Maintenant, si nous testons cela, vous pouvez voir comment nous pouvons basculer entre les quatre écrans de conseils. Cela fonctionne donc parfaitement. Et chacune de ces animations, nous pouvons également la tester. Ils fonctionnent toujours exactement comme nous le voulions. Enfin, nous devons également nous assurer que, depuis l'écran de profil, nous pouvons passer au premier écran de conseils. Donc, tout d'abord, assurez-vous que le bouton et le texte sont sélectionnés ensemble. Vous pouvez le transformer en groupe ou en composant. C'est le Commando Control G, si vous voulez en faire un groupe, ou le Commando Control K, si vous voulez en faire un composant La principale différence entre les deux est que si vous créez un composant, vous pouvez toujours lui attribuer des états ou animation en plus d' appliquer une interaction. Cela n'a donc pas vraiment d' importance ici, car je ne vais pas faire d'animation sur le bouton, mais je vais juste créer l'interaction rapidement dès le premier écran de conseils. Et dans ce cas, je veux utiliser push left. Alors testons celui-ci également. En cliquant sur l'une de ces options, nous pouvons toujours modifier les boutons. Et une fois que nous serons satisfaits de la sélection, en cliquant sur « Obtenez vos réponses », nous passerons au premier écran de conseils que nous avons créé. Et puisque tous nos plans de travail sont prêts, il reste plus qu'à ouvrir l'écran de bienvenue Donc, une fois celui-ci sélectionné, c'est celui que nous voulons configurer comme écran d'accueil. Donc, en cliquant sur cette petite icône ici en mode prototype, nous allons configurer notre premier flux. Celui-ci peut être renommé en application. À partir de là, je veux créer un déclencheur temporel pour passer à l'écran suivant. Je vais donc simplement y faire glisser cette flèche. Et au lieu de toucher, je vais régler ce paramètre sur l'heure et peut-être le régler sur 3 secondes. Et l'animation, cette fois, peut être réglée sur push up, et peut-être que la durée peut être réglée sur 1 seconde. Voyons donc si nous le testons au bout de 3 secondes, il va tomber en panne. Je pense que la facilité de sortie devrait être modifiée pour faciliter l'entrée. Testons cela à nouveau. Oui, c'est bien mieux. Mais la durée peut être encore plus longue 1,5 seconde, un test de plus. Oui, c'est beaucoup plus agréable et plus fluide. Nous pouvons donc maintenant parcourir tous les tableaux d'art ou tous les écrans que nous avons créés. Et dans la vidéo suivante, nous ajouterons toutes les options de navigation supplémentaires comme le menu principal , l'icône d'accueil et l'option d'aide pour l'écran de profil 14. Menus collants: La première chose que nous devons corriger est de nous assurer que notre menu est toujours visible. Laissez-moi vous montrer ce que je veux dire. Si je le prévisualise et que je le fais défiler, le menu disparaît en haut, il sera donc difficile de le changer sans avoir à le faire défiler à nouveau vers le haut. Je veux donc que ce menu reste toujours visible ici, et nous l'appelons normalement un menu persistant. Et pour pouvoir le faire, tout d' abord, en mode design, je vais dessiner un rectangle derrière ces éléments. Je vais m'assurer que ça passe complètement à l'arrière pour le moment. Faites-le glisser vers le haut, peut-être quelque part par ici. Au fait, je garde le texte ici parce je sais qu'il y a une encoche sur le téléphone, donc ça ne devrait pas se chevaucher Mais pour cette forme, je ne veux pas utiliser de bordure, juste un champ blanc. Mais activez cette option appelée flou d'arrière-plan. Nous pourrons affiner les paramètres pour cela ultérieurement. Mais pour l'instant, j'aimerais également sélectionner tout ce qui se trouve en haut et les regrouper avec le commando Control G. Et une fois qu'ils seront transformés en groupe, nous pourrons fixer leur position lors du défilement Cela en fait un menu autocollant. Alors maintenant, s'il teste cela, quand je fais défiler la page, vous pouvez voir qu'ils restent tous là en haut, et nous avons cette fonctionnalité intéressante de flou d' arrière-plan configurée sur Si nous le voulons, nous pouvons toujours revenir en arrière, double-cliquer dessus, puis ajuster les paramètres. Je pourrais réduire l'exposition et peut-être augmenter l'opacité de la forme elle-même à 20 % Alors testons cela. Oui, je trouve que c'est un peu mieux. Peut-être que l'exposition peut être augmentée. Revérifions-le encore une fois. Oui, légèrement mieux. Je pense que ça a l'air bien. Et nous devons en fait faire de même sur ces autres écrans. Mais pour gagner du temps, je vais les configurer une fois que ce premier menu sera complètement fonctionnel. Je vais donc supprimer ces ventilateurs. Donc, tous ces éléments que nous avons préparés ici, nous pouvons simplement revenir en arrière et les supprimer. Nous le savons. Nous allons les ajouter ici, mais revenons simplement à cette première instance et passons en mode prototype. Double-cliquez dessus. Je peux sélectionner l'icône d'accueil. Et cela sera lié à l'écran de profil. Et dans ce cas, j'aimerais juste avoir une transition de dissolution normale, qui ressemble à un fondu. C'est bien d'assouplir et de chercher à assouplir. Mais la durée peut être réglée à 0,6 seconde. Nous pouvons donc le tester, voir ce que l'on ressent. Je pense que c'est une bonne chose. C'est peut-être un peu trop lent, alors nous pouvons simplement revenir ici, encore une fois, sélectionner cela et descendre à 0,4 seconde. Répétons-le encore une fois. Ouais. Je pense que c'est bon. Mais celui-ci était le plus facile à configurer. Pour le menu proprement dit, nous devons également créer un tableau d'art distinct qui hébergera nos éléments de menu. Ce sera donc comme un menu déroulant ou contextuel. Et pour cela, je vais créer ce nouveau tableau d'art juste au-dessus de ces autres plans de travail. Donc, en mode conception, passant à l'outil plan de travail, je vais d'abord créer un plan de travail, mais il n'est pas nécessaire que ce soit un plan de travail sur toute la hauteur, il peut donc être un peu plus court Comme ça. Et j' appellerai ce menu, et nous pourrons zoomer un peu plus près. Et tout d'abord, je vais créer une forme ici, qui sera le menu lui-même. Nous pouvons ajouter des coins arrondis. Mais nous n'avons pas besoin de coins arrondis de tous les côtés. Donc, dans les options, on peut cliquer sur ce petit togo, et on peut trouver le rayon de tous les coins. Je veux mettre le haut à gauche et à droite à zéro. Ce sont donc le premier et le second, qui doivent être mis à zéro. Il y a une indication subtile du coin que vous affectez lorsque vous sélectionnez un chiffre. Cette petite ligne bleue indique donc que vous travaillez avec le coin supérieur gauche ou le coin supérieur droit. Ou vous pouvez aussi simplement attendre un peu et vous recevrez l'infobulle vous indiquant lequel est lequel. Mais maintenant que nous avons la configuration, je vais supprimer la couleur de la bordure. Je vais garder la couleur du champ activée. Ensuite, j' ajouterai une ombre portée, et je vais augmenter sa visibilité ou opacité en cliquant sur l'échantillon et en le faisant simplement glisser vers haut, probablement Et puis le flou, je le mettrai également à 15, pour créer un bord un peu plus doux comme ça Peut-être que 50 %, c'est un peu trop dur. Réduisons-le donc à 30 %. Oui, c'est un peu plus subtil. Je pense que ça a l'air mieux. Maintenant, je vais copier le texte d'ici. Nous avons donc besoin de ces quatre éléments, dupliquez-les et alignez-les tous vers la gauche. Et ensuite, déplaçons-le vers le bas. Déplace celui-ci vers le haut. L'ordre doit donc être d'abord de définir vos objectifs, puis de viser haut, puis de vous améliorer, et enfin de les partager. Donc, une fois que j'aurai cet ordre, je pourrai placer le texte ici, et peut-être que nous pourrons réduire un peu la taille à 18 points. Je pense que cela ira mieux. Encore une fois, laissez une ligne, puis nous pouvons simplement l'aligner dans cette liste déroulante. Et nous avons juste besoin d'une icône en forme de X , que nous avons déjà préparée dans les actifs. Je peux simplement le faire glisser à nouveau ici. Installez-le quelque part là-bas, et ce x peut être un composant. J'appuie donc sur la commande ou sur le contrôle K, mais l'ensemble du menu doit également être un composant. Je sélectionne donc le tout ensemble. Et encore une fois, appuyez sur la touche Commande ou Ctrl K. Donc, dans ce cas, nous avons d'abord créé un composant pour un élément qui sera à l'intérieur du composant principal, l'imbrication a été configurée dans le bon ordre N'oubliez pas que lorsque nous avions du mal créer ce composant imbriqué auparavant, vous pouvez voir que le bon ordre est toujours de commencer par créer un composant, qui sera ensuite encapsulé dans un autre composant Et vous pouvez même avoir plusieurs niveaux de composants imbriqués les uns dans les autres Et tant que vous commencez par le plus petit élément, puis que vous progressez vers l'extérieur créant les composants supplémentaires, vous n'aurez aucun problème à les configurer correctement 15. Superposition de menu: Maintenant que nous avons ce menu, nous devons le connecter aux autres écrans. Passons donc en mode prototype. Et là, je vais double-cliquer jusqu'à ce que je puisse sélectionner l'icône du menu et la faire glisser sur ce plan de travail. Par défaut, il s'agira d'une transition normale, mais nous aimerions remplacer cette transition par une superposition, ce qui transformera cette ligne continue en ligne pointillée C'est ainsi que XD indique ce que nous faisons. Et notez également que nous avons un aperçu de l'endroit où cette superposition va apparaître. Et c' est en fait quelque chose que nous pouvons traîner jusqu'ici. C'est là que je veux qu'il apparaisse. Et l'animation, je voudrais la faire glisser vers le bas. Nous pouvons entrer et sortir facilement. Peut-être que 0,4 seconde est une bonne chose, et nous pouvons simplement le tester. Voyons comment cela fonctionne. Si nous cliquons dessus, le menu s'affiche. Si je clique quelque part à l'extérieur, il disparaît à nouveau, redescend , disparaît et, soit dit en passant, c'est un comportement par défaut dans XD. Chaque fois que vous cliquez sur AA dans un élément de superposition, l'animation d'origine est automatiquement annulée Cependant, j'aime toujours en avoir un pour le fermer, comme celui-ci ici. Et ce qui est bien, c'est que vous n'avez pas à attribuer d'interaction à cela, car tant qu' il n' y a aucun élément actif ici, en cliquant dessus, nous fermerons également ce menu, comme en cliquant sur n'importe quel autre élément, à l' exception des éléments actifs, nous allons configurer sur ces objets de texte. Pour cela, il ne me reste plus qu'à revenir à notre menu. Double-cliquez, sélectionnez le premier texte et faites-le glisser vers cet écran. Mais cette fois, vous devez faire attention à revenir en arrière et à modifier l' option de superposition en transition La superposition n'est donc nécessaire que pour faire apparaître ce menu flottant. Mais à partir de ce menu flottant, vous souhaiteriez passer à ces écrans par une transition normale, et non par superposition La raison pour laquelle la superposition apparaissait par défaut est que c'était la dernière action ou le dernier type d'action utilisé Assurez-vous donc de ne pas oublier de le remplacer par transition. Et puis avec le menu, je recommande d'utiliser Dissolve, et vous pouvez probablement utiliser as out et peut-être 0,3 seconde. Configurons donc la même chose pour les trois autres écrans. Nous n'avons rien à changer ici. Encore une fois, il se souvient des derniers réglages, et cette fois, il ne s'agit pas d'une superposition C'est la transition, donc la bonne option. Donc, pour le partager, nous avons le dernier. Maintenant, ce menu est entièrement connecté, nous pouvons donc le tester. Nous cliquons ici, nous descendons, nous sautons en haut, et nous pouvons revenir ici, encore une fois , sélectionner le démarrage vous-même, aller au bon endroit, puis nous pouvons également le partager. Et encore une fois, nous pouvons également naviguer facilement entre les deux. Mais maintenant, nous pouvons également ajouter ce menu autocollant sur tous ces écrans. Nous pouvons donc simplement le dupliquer. La méthode la plus rapide consiste à appuyer sur la touche Commande ou C pour copier, puis à sélectionner le plan de travail suivant. Appuyez sur Commando Control V, nous le collons exactement au même endroit, la même chose ici, la même chose là-bas Et remarquez que tout est déjà branché. L'icône d'accueil revient donc à l'écran de profil. Le menu affiche cette superposition, et la seule chose que nous devrons changer, ce sont les titres Alors, double-cliquons sur un h. Pour celui-ci, je veux utiliser boost yourself. Et ici, tapez «   partagez-le », et c'est tout. Encore une fois, nous pouvons le tester. Vous pouvez utiliser le menu pour passer à l'écran suivant. Nous pouvons faire défiler l'écran vers le haut et vers le bas pour tester notre menu collant en haut avec cette fonction de flou d'arrière-plan Nous avons également nos animations. Le menu fonctionne ici comme avant. Nous pouvons passer à l'écran suivant, faire défiler haut et vers le bas, les œuvres d'animation. Les flèches devraient également fonctionner. Mais testons simplement le menu, partagez-le au bon endroit. Le défilement fonctionne également, et l'icône d'accueil devrait également fonctionner à partir de n'importe lequel de ces écrans 16. Installation de l’écran du menu d’aide: Puisque nous sommes de retour sur l'écran de profil, n' oublions pas de configurer le menu Aide, qui fonctionnera de manière très similaire à cet autre menu que nous avons créé. Je vais simplement effectuer un nouveau zoom arrière, déplacer les éléments et créer un nouveau plan de travail en mode conception, à l' aide de l' outil de plan de travail. Je viens de créer ce nouveau plan de travail, et je vais le renommer et l'appeler help Je peux le placer quelque part par ici. Et maintenant, nous pouvons simplement réutiliser cet autre élément. À partir de ce composant, nous avons créé un double-clic, nous avons sélectionné cette forme, l'avons copiée puis collée ici Nous allons simplement la faire pivoter, exemple en la faisant glisser vers le haut et en la plaçant dans ce coin. Nous devrons probablement l'allonger, puis nous pourrons simplement copier ce composant x et le placer dans le coin supérieur droit. Encore une fois, nous n'aurons pas besoin de relier cela. Assurez-vous simplement qu'il est là, puis nous copierons ce texte que j'ai préparé, et nous le collerons simplement ici, peut-être avons-nous besoin d'un peu plus d'espace pour cela. Et oui, je trouve que ça a l'air bien. Je peux maintenant le faire glisser un peu vers le haut. Et c'est tout ce dont nous avions besoin pour cette autre superposition que nous avons créée Mais il est important que ce plan de travail désactive la couleur des champs en arrière-plan Sinon, il masquera complètement ce qu'il y a en dessous. Il y a aussi quelque chose qu' il est important de faire en sorte de faire en sorte que vous le fassiez également pour le menu . Mais XD supprimera le fichier par défaut une fois que vous aurez créé l'interaction de superposition Pour laquelle, si vous vous souvenez bien, seules deux choses sont nécessaires. Tout d'abord, assurez-vous que sur ce nouveau plan de travail, tous ces éléments sont regroupés dans un composant C'est le commando Control K. Ensuite, dans l'option prototype, lorsque nous sélectionnons le point d' interrogation, nous voulons nous assurer qu'il est connecté à ce plan de travail Cependant, si vous vous souvenez, partout où j'utilise des icônes, j'aime toujours créer un cadre plus large autour de celles-ci. C'est donc quelque chose que je ne veux pas oublier d'ajouter ici également. Je vais simplement dessiner cette forme, laissant beaucoup plus d'espace pour pouvoir appuyer dessus , car il n'y a rien de plus ennuyeux que de devoir appuyer plusieurs fois quelque part pour démarrer l'interaction. Je vais donc désactiver la bordure et le remplir, mais sélectionner tout cela ensemble et en faire un composant Maintenant qu'il s'agit d'un composant, je peux revenir au prototype, intégrer à ce nouveau plan de travail et configurer également comme transition de superposition Cette fois, l'animation peut être glissée vers la gauche car elle vient de la droite Elle va donc glisser vers la gauche. Et son alignement est déjà bon. Comme j'utilise exactement la même taille de plan de travail, je n'ai pas eu à effectuer de positionnement manuel ici Et au lieu de simplement faciliter la sortie, je pense qu'il vaut mieux entrer et peut-être 0,5 seconde pour cela. Alors testons cela. Si je clique sur l'aide, elle arrive, et peu importe où je clique, elle la masquera. Je peux donc cliquer à nouveau dessus, cliquer n'importe où, ainsi de suite. Et d'ailleurs, si vous souhaitez que les détails de l'arrière-plan soient un peu flous, vous pouvez toujours ajouter autre rectangle ici sur le tableau d'aide Sans bordure, juste une couleur au toucher. Assurez-vous qu'il est entièrement réglé en arrière-plan, puis cliquez simplement sur le flou d'arrière-plan Alors maintenant, si nous revenons ici, ce flou apparaîtra quand je le ferai Le seul problème est qu' il intègre également ce flou d'arrière-plan au lieu d'effectuer une transition harmonieuse Voyons donc avant et après. Et bien sûr, il existe des moyens de résoudre ce problème, mais je ne veux pas trop compliquer les choses Je vais donc simplement supprimer cette forme, et je pense qu'elle fonctionne bien telle quelle. Et la bonne nouvelle, c'est que l'application fonctionne désormais pleinement. Tous les éléments sont en place et toutes les navigations sont prêtes, nous pouvons donc faire un dernier test à partir de l'écran d' accueil Nous avons notre animation interactionnelle chronométrée. Nous avons nos togos avec lesquels nous pouvons jouer. Ensuite, nous pouvons également consulter notre aide. Accédez ensuite aux réponses, faites défiler l' écran vers le haut et vers le bas, parcourez-les. Consultez également les animations ici. Retournez à la page d'accueil ou retournez aux réponses et utilisez le menu. Et il semble que tout fonctionne comme prévu. Maintenant que l'application est terminée, dans la vidéo suivante, nous allons en faire un prototype de site Web d'une seule page. 17. Conception de site web: La bonne nouvelle est que la création de ce site Web sera beaucoup plus rapide que la création de l'application. Comme nous avons déjà créé tous les éléments directement dans XD, et que nous pouvons très rapidement les réutiliser dans ce nouveau format, nous allons commencer par créer un nouveau tableau d'art Et cette fois, je vais utiliser le b 12 80, et nous pouvons le placer ici et renommer également en site Web Et je vais déjà l' étendre parce que je sais que nous avons besoin de plus d' espace en dessous, et ce point limite marque notre premier pli sur le site, qui sera visible pour la première fois sur la plupart des écrans. Commençons maintenant par copier des choses. Je vais donc tout sélectionner sur cet écran de bienvenue, cliquant et en faisant glisser l' ancien bouton pour les placer ici. Ensuite, je vais faire avancer les choses assez rapidement car je n'ai plus vraiment besoin d'expliquer les étapes. Je crois que ce que je fais aura du sens. Je redimensionne donc pour que la croissance soit notre menu. Cela fait partie du menu. L'image peut être ici sur la droite, peut-être agrandie. Un peu Comme ça. Dans ce cas, le texte peut être aligné à droite et légèrement agrandi. Si vous avez des éléments qui se chevauchent, comme dans ce cas, il serait difficile de sélectionner le texte. Au lieu de déplacer cette image av, vous pouvez simplement faire apparaître le panneau des calques. De cette façon, vous pouvez sélectionner très rapidement les éléments cachés, puis simplement utiliser les touches fléchées du clavier, maintenant la touche Shift enfoncée, vous pouvez également les déplacer plus rapidement, et je pense que ce sera un bon placement pour le texte. Il est donc bien aligné avec la tête. Alors dupliquons simplement ce texte ici, et je vais taper des objectifs. Je vais le mettre en majuscules avec cette icône, puis je le change en normal et réduis la taille en le faisant glisser vers le haut En fait, c'est peut-être mieux en format moyen, et je l'aligne au centre de ce texte, puis nous pouvons simplement le dupliquer, puis recommencer à taper un haut, dupliquer le boost de saisie, puis partager à nouveau . Et d'ailleurs, c'est là que la mise en place d'un style de personnage serait utile. Ainsi, si nous accédons aux bibliothèques ou aux ressources documentaires et que nous les sélectionnons toutes , nous pouvons appuyer sur le signe plus dans les styles de caractères. Et maintenant, il l'a enregistré. Ainsi, il sera beaucoup plus facile d'apporter des modifications à ces quatre éléments en même temps. En accédant simplement au style de personnage, cliquez sur Modifier. Si je tape, disons, 35 pour la taille, vous voyez immédiatement, elles seront toutes mises à jour. C'est donc une fonctionnalité très pratique, je recommande vivement d' utiliser des styles de caractères. Tout comme dans les autres applications DOB, cela peut vous faire gagner beaucoup de temps. Et je vais juste utiliser une petite ligne entre les deux pour les séparer. Alors laisse-moi juste tracer cette ligne. Je l'ai configuré avec des capuchons ronds blancs, dont la taille est peut-être de trois points, puis je le fais simplement glisser un peu vers le haut, puis je le duplique. Nous en voulons donc un autre là-bas et un autre là-bas. OK, c'est donc notre menu. Cela peut également être légèrement plus élevé. Et en fait, le tout peut aller un peu plus haut. Il suffit de les sélectionner ensemble. Les déplacer vers le haut. Apportons ensuite les éléments supplémentaires dont nous avons besoin. Nous avons donc besoin de ce texte pour vous décrire, que nous pouvons placer ici, puis de copier et coller tous ces composants sur ce plan de travail. Mais nous n'aurons pas besoin des formes dans ce cas, nous pouvons donc simplement les séparer abord et les supprimer rapidement. Double-cliquez sur Supprimer, double-cliquez sur Supprimer, double-cliquez sur Supprimer. Et vous n'avez pas à vous inquiéter de gâcher vos autres versions, car ce sont les composants principaux ou les composants principaux Et ce ne sont là que des exemples. Les dérogations que nous effectuons ici n'affecteront donc pas les remplacements d'origine. Mais si nous apportons des modifications à l'original, et que cela affecte, disons, le texte ou ces images, ils seront toujours connectés et mis à jour sur cette version du site Web également. Je vais donc simplement placer ces trois options ici, et nous pouvons déjà les tester avec la commande Control Enter, et nous voyons les formes apparaître dans le second état. C'est donc quelque chose que nous devons également corriger Je vais juste les sélectionner pour passer au deuxième état. Et double-cliquez sur Supprimer, Supprimer, Supprimer. Ensuite, assurez-vous qu' ils sont remis à leur état par défaut. Donc, encore une fois, nous pouvons simplement vérifier si cela fonctionne ou non. Oui, ça marche, ça marche aussi. C'est bon. Parfait. Le premier pli est donc terminé. Il s'agit maintenant de copier le reste. Commençons donc par ceux-ci. Pour les copier, collez-les ici. La forme dont nous n'aurons pas besoin pour le moment. Ce composant peut se trouver ici. Le texte peut être au centre et l'image à droite. Nous pouvons également copier le texte de vos objectifs. Dans ce cas, étant donné que texte de vos objectifs. Dans ce cas, l'écran est plus grand, nous pouvons l'agrandir, encore une fois, un autre texte qui vaut la peine d'être enregistré en tant que style de personnage. Et d'ailleurs, cela vaut également la peine de nommer les styles de vos personnages, afin que vous sachiez où vous les utilisez. Je vais donc le renommer et l'appeler sections du site. Alors que cet autre est le menu du site. Nous avons donc défini vos objectifs. Nous y avons notre image. Et dans ce cas, il suffit de double-cliquer sur et de supprimer ce triangle à bulles vocales. Parce qu'ici, je veux juste le texte seul. Et peut-être que cette image peut être plus grande en maintenant la touche Shift enfoncée. Je vais juste le redimensionner. Ensuite, nous allons simplement répéter la même chose pour ces autres écrans. Je vais donc juste accélérer un peu les choses avant terminer avec quelques touches finales sur le site. 18. Ajouter des interactions au design de site Web: Il s'agit donc de la version finale du site. Comme vous pouvez le voir, j'ai créé un motif alternatif ici. Nous avons donc les images en alternance avec les zones de texte. Nous avons donc créé un zigzag juste pour le rendre un peu plus dynamique De plus, nous avons également ces formes, une à gauche et une à droite, réutilisées et réutilisées depuis l'application Et si nous testons déjà cette page, ces petites interactions devraient également fonctionner ici. Dans le cas d'un site Web, il peut s'agir d'effets de parallaxe, ce que nous pouvons facilement communiquer avec le développeur et le client Mais pour ajouter quelques interactions supplémentaires, je voudrais m'assurer que le menu reste permanent, de la même manière que nous l'avons fait dans l'application. Mais pour cela, je vais d'abord devoir créer un autre rectangle quelque part par là. Assurez-vous qu'il utilise le même dégradé que derrière. Je vais juste changer la couleur du champ en dégradé linéaire. Ensuite, je vais échantillonner ces couleurs, donc nous avons besoin de cette couleur à gauche, et nous avons besoin de cette couleur à droite. Et nous devons simplement nous assurer que les deux butées de gradient sont également alignées. Alors maintenant, il a presque complètement disparu. Mais maintenant que cela est en place, nous pouvons simplement sélectionner tout ce qui se trouve en haut à l' exception de cette grande forme en arrière-plan. Il suffit de cliquer dessus avec la touche Majuscule. Et en les regroupant avec Commando Control G, nous pouvons nous assurer que cela sera corrigé lors du défilement Donc maintenant, si je viens ici, quand je fais défiler l'écran vers le bas, vous pouvez voir que c'est là en haut. Et la seule chose que nous devons faire , c'est de le placer entièrement au sommet. Donc tout le reste se trouve en dessous. Une fois ces groupes sélectionnés, nous nous assurons simplement de les mettre au premier plan. Alors maintenant, en le testant, cela fonctionnera parfaitement. Et c'est d'ailleurs quelque chose que vous devez également vous assurer avec ces menus. Bien entendu, ceux-ci devront également s'ajouter à tout le reste. Surtout si vous envisagez d' augmenter la longueur de ces écrans, le menu doit toujours être au-dessus de tout le reste. Mais puisque nous avons créé notre menu, nous devrions également y ajouter des interactions. Passons donc à l'option prototype. Double-cliquez dans ce groupe, et en commençant par le logo et le nom du site, nous pouvons simplement saisir cette petite flèche et la faire glisser sur cette grande forme ici en arrière-plan. Nous pouvons également simplement le faire glisser ici pour nous assurer que la forme est sélectionnée. Et puis remarquez que XD a déjà compris que nous voulions faire défiler l'écran jusqu'à ce bouton. C'est important car nous avons un menu permanent. Donc, si je descends, disons qu' une fois que j'ai cliqué dessus, il revient tout de suite vers le haut Et maintenant, pour ces autres options , nous allons faire de même Je sélectionne donc des objectifs et assigne à cet élément. Encore une fois, testons cela. Et c'est là que cela se trouve, mais le problème est que le menu autocollant masque ce texte. Nous devons donc nous assurer qu'il y a quelque chose qui crée un décalage par rapport à ce texte. Et de la même manière que la technique que j'ai utilisée auparavant pour les icônes, nous devons créer une zone de sécurité qui créera ce décalage. Je vais donc simplement revenir en mode design, utiliser l'outil rectangle. Et dessinez quelque chose comme ça, assurez-vous qu'il se trouve dans le dos, qu'il n' a pas de bordure et qu'il n'y a pas de couleurs vives. Mais en le sélectionnant avec le texte, nous pouvons créer un groupe. Et je vais aussi utiliser la même chose pour les autres. Je vais donc simplement copier cette forme, puis la déplacer vers le bas, pour assurer qu'il y a suffisamment d' espace au-dessus. Et encore une fois, gardons la bordure ouverte pour le moment, juste pour que je puisse voir ces formes. Il y en a un autre. importe sa largeur. C'est juste l'espace que nous gardons au-dessus qui est important. Je pense que ça va marcher. Configurons-les donc tous en groupes, et je supprimerai cette couleur de trait plus tard. Nous devons donc simplement nous assurer que cette option de partage est également sélectionnée et regroupée. Alors maintenant, en mode prototype, nous pouvons connecter les choses. Donc, pour les objectifs, nous voulons faire défiler l'écran jusqu'à ce groupe ici, pour un maximum, nous voulons faire défiler la page vers le bas jusqu' à cet autre groupe. Et avant d'aller plus loin, je vais juste tester ça. Voyons donc les objectifs. Il va falloir augmenter la hauteur de ce rectangle, d'une hauteur. Il en va de même ici. Et en fait, le groupe high s'est retrouvé en haut du menu parce que nous avons créé le groupe qui est arrivé en haut du menu. Alors réglons ce problème dès maintenant. Je sélectionne donc le menu autocollant , je le place complètement au premier plan, qui fixe l'alignement, puis nous pouvons sélectionner ces formes, double-cliquer puis passer en mode design. Je peux simplement l'étendre un peu plus, et nous aurons besoin de la même chose pour les autres. Nous pouvons étendre et étendre. Et puisque nous sommes ici, désactivons déjà la bordure de ces formes. Il me suffit de double-cliquer à chaque fois pour accéder aux groupes. Maintenant, nous pouvons revenir au menu, et en mode prototype, je sélectionne le mot boost. Descendez pour dynamiser votre groupe, puis partagez, descendez jusqu'au bout. Nous allons donc tester cela une fois de plus. Permet un alignement parfait en hauteur. C'est parfait également. Boostez-vous et partagez. n'y a plus de contenu ici en bas, il ne peut donc pas faire défiler la page plus loin que cela. Mais nous avons aussi notre option maison avec laquelle nous pouvons revenir jusqu' au sommet. Et c'est la rapidité avec laquelle il a été possible créer un prototype de site Web entièrement fonctionnel, en réutilisant tous les éléments que nous avons utilisés pour l'application Et dans les prochaines vidéos, nous allons créer une autre version du prototype du site Web présentant le défilement parallaxe 19. Défilement parallaxe: Et comme vous pouvez le constater, j'aime toujours commencer par la version statique finale de cette page à la version statique finale défilement unique, que je peux ensuite dupliquer et commencer à ajouter tous les mouvements et modifications nécessaires pour obtenir l' effet de défilement parallaxe Malheureusement, dans NDBXD, la création de ces effets de parallaxe n'est actuellement possible qu' en créant ces Mais à l'avenir, ils pourraient ajouter des fonctionnalités qui faciliteront ce flux de travail. Mais pour l'instant, comme je l'ai dit, nous devrons créer des plans de travail dupliqués. Mais d'abord, permettez-moi de vous montrer ce site Web. Donc, si je vous montre juste l'aperçu, c' est par la commande Control Enter pour accéder rapidement à l'aperçu Certains éléments fonctionnent déjà Ce sont donc de simples boutons que je modifie sur ceux-ci, et ils sont configurés en tant que composants avec des états distincts Et puis, si je fais défiler la page vers le bas, nous avons également des composants nous avons également des composants avec lesquels nous pouvons déjà interagir. Mais comme vous pouvez le constater pour le moment, il s'agit que d'une simple page défilante. Je me suis déjà assuré que le menu reste toujours en haut de la page Il s'agit d'une fonctionnalité très simple que vous pouvez trouver dans XD. Assurez-vous simplement de sélectionner ce groupe ou cet élément, qui est votre menu. Et puis ici dans les options, il suffit de choisir une position fixe lors du défilement Donc, si je l'enlève et que je le teste à nouveau, le menu disparaîtra de l'écran, ce que nous ne voulons évidemment pas dans ce cas . Nous allons donc simplement le réactiver. Cependant, cette option ne sera pas vraiment nécessaire compte tenu de la façon dont nous allons configurer nos multiples plans de travail, pour lesquels le plus important est de s'assurer que ce menu est configuré en tant que composant Donc pour le moment, il ne s'agit que d'un simple groupe, je peux vérifier ici dans les couches. Ce n'est qu'un groupe. Donc, ce que je vais faire, c'est appuyer sur commande Control K pour le transformer en composant Cela sera donc nécessaire une fois que nous aurons plusieurs plans de travail, mais nous voulons tout de même nous assurer que les interactions que nous attribuons à chacun de ces éléments de menu seront appliquées à tous nos plans de travail Mais nous y reviendrons plus tard. Pour l'instant, n'oubliez pas que tout ce dont vous avez besoin en tant que composant, donc tous les éléments interactifs tels que les boutons, menus et les icônes doivent d'abord être créés en tant que composants. Ensuite, la deuxième chose la plus importante que vous devrez faire avant de commencer à dupliquer votre plan est de tout sélectionner sur ce plan de Ensuite, regroupez-les, pour obtenir la commande ou le contrôle G. Cela va donc compliquer un peu la sélection des éléments , car vous devrez toujours double-cliquer pour accéder au groupe, puis déplacer les éléments Mais cela est nécessaire pour l'animation du défilement paraax. Si tout n'est pas regroupé au début, vous aurez beaucoup de problèmes par la suite. N'oubliez donc pas de le faire dès le début. Mais maintenant, nous sommes prêts à commencer par les animations d'introduction que nous aimerions ajouter au site Ce n'est donc pas encore le défilement du paraax. Ce ne sont que les animations du premier pli. Donc pour cela, je vais déjà dupliquer le plan de travail. J'utilise donc l'outil de sélection, et en mode conception, me suffit de maintenir la touche Alter option enfoncée et de la faire glisser vers la droite. Assurez-vous de disposer de suffisamment d'espace à droite de votre plan de travail d'origine, car vous en ajouterez beaucoup en fonction de la complexité de votre site J'aime aussi garder un certain écart entre les deux plans de travail, car certains éléments peuvent se chevaucher, ce qui peut être un peu difficile à utiliser Parfois, j' agrandissais même cet espace. Et plus tard, rapprochez-les peut-être juste pour ranger les choses. Donc, tout d'abord, j' aimerais avoir une belle animation sur l'élément de fond, cette jolie courbe que nous avons ici. Je n'ai donc pas vraiment besoin ce caractère, du texte ou même du menu, et je vais même les supprimer. Il me suffit donc de les sélectionner et de les supprimer. Nous n'avons donc que cette forme ici. Et ce que je vais en faire, c'est vraiment l'agrandir, donc je vais l'agrandir. Ensuite, en double-cliquant dessus à nouveau, je peux accéder aux points d'ancrage qu'il contient, et je peux même les déplacer. Donc, ce que je veux créer ici, c'est une belle animation lorsque cette courbe va être ajustée. Je m'assure donc qu'il couvre la totalité de l'écran. Et vous pouvez voir que sur ce plan de travail, hauteur de la fenêtre d'affichage est déjà réglée C'est donc le tiret indiqué ici. Cela signifie que chaque fois que je le teste, la fenêtre n' affichera que cette zone. Actuellement, nous ne voyons aucune animation. Nous pouvons juste voir à quoi ressemblera ce joli dégradé doux. Mais une fois que nous sommes passés en mode prototype et que nous avons sélectionné l'ensemble du plan de travail. C'est très important. Vous ne souhaitez donc pas attribuer l'animation à des éléments individuels. Vous devez vous assurer que l' ensemble du plan de travail est sélectionné , puis faites glisser cette petite flèche sur le plan de travail dupliqué. Là, nous pouvons choisir à quoi nous voulons assigner l'animation. Donc, dans ce cas, je l'ai réglé sur l'heure et je m'assure que le délai est réglé à zéro seconde. Cela signifie qu'il sera automatiquement déclenché directement avec un A dès que nous l'aurons testé en tant que prototype. Et au lieu d'une transition, je veux que cela soit animé automatiquement, parce que j'aimerais voir cette animation intéressante qui sera créée sur la façon dont la forme passe d'un état à un autre Et pour rendre l' animation encore plus fluide, je vais ajouter et retirer des es et peut-être augmenter la durée à 0,8 seconde. Alors maintenant, testons cela. Nous pouvons déjà voir comment il est animé. Si cela se produit trop vite, vous pouvez revenir en arrière, sélectionner cette petite flèche et modifier le délai à 0,4 seconde. Ainsi, nous avons un peu plus de cet arrière-plan visible avant qu'il ne s'anime. Et si vous souhaitez rapidement rejouer l'animation, suffit d'appuyer à nouveau sur le même raccourci , puis de saisir le contrôle Commando Et oui, je suis content de son apparence. Et si vous souhaitez retarder certains éléments de cette animation d' introduction, vous pouvez déjà disposer d'une autre configuration de plan de travail. Donc, ce que je vais faire, c'est le dupliquer une fois de plus dans notre option drag. Et encore une fois, supprimez les informations que je ne veux pas encore révéler. Nous devons double-cliquer puis supprimer des éléments. Je vais supprimer le personnage et le slogan. Et peut-être simplement animer ces petits détails ici. Je vais donc déplacer ce texte vers la gauche, donc celui-ci vers la gauche , puis celui-ci plus loin. Vous pouvez déjà voir que je suis en train de créer un petit modèle ici. Donc, ce que j' aimerais voir apparaître premier se trouve le plus près du bord du plan de travail, puis les éléments que je déplace plus loin apparaîtront un peu plus tard C'est donc une façon de les retarder. Et puis celui-ci, ici, on peut simplement descendre. Déplaçons-le simplement là-bas. Ensuite, je vais tous les sélectionner et même réduire leur opacité à 0 % Ensuite, sur l'écran suivant, nous les verrons apparaître, mais nous devons également nous assurer qu'il y a une interaction entre ces deux plans de travail. Donc, comme avant, j'utilise le mode prototype, et je vais toujours utiliser l'option time. Ici, je vais définir cela pendant 20 secondes, et les autres propriétés de l' action devraient être les mêmes qu'avant, donc je n'ai pas à les réinitialiser. Alors testons cela à nouveau. Je reviens au début. Donc, sur le premier plan de travail, utilisez le raccourci pour le tester. Nous pouvons déjà voir comment tous les éléments de gauche sont arrivés un par un et ont été légèrement animés. Alors que tous les autres éléments que nous avons supprimés sont simplement apparus. La raison en est que, bien entendu, entre les deux plans de travail, il n'y avait aucune instance sur le premier La seule chose qu'OBXD peut y faire est simplement de les estomper et de les faire apparaître. Pour ces éléments , en bas de page, il y avait des étapes avant et après, et cela pouvait créer une belle action d'animation automatique entre les deux états Ou si nous pensons en termes d'animation, nous pouvons même appeler ces images clés Alors testons cela à nouveau. Les deux étapes de notre animation sont prêtes. Mais ne nous arrêtons pas là. Ajoutons encore un plan de travail pour cette animation d'introduction Je vais donc le dupliquer davantage. Et cette fois, au lieu de supprimer quoi que ce soit, je vais venir ici, sélectionner le menu en double-cliquant dessus, faisant glisser vers le haut, puis en le faisant glisser vers la droite, puis en sélectionnant ce texte, et peut-être en revenant en mode design, je peux même le faire pivoter en maintenant la touche Shift enfoncée, assurer qu'il fait exactement 90 degrés, déplacer quelque part ici, et peut-être uniquement pour ce texte, je vais réduire l' opacité à 0 % Je n'ai pas eu à le faire pour les deux autres éléments car ils sont déjà hors de l'écran. Maintenant, si nous revenons au prototype, nous pouvons sélectionner l' ensemble du plan de travail et faire glisser sur l'autre Toujours en utilisant le temps, le délai est réglé à zéro seconde. Mais cette fois, je vais plutôt utiliser le snap easing et peut-être régler la durée à 1 seconde. Encore une fois, nous avons maintenant quatre plans de travail. Revenons au premier et prévisualisons-le. Vous avez donc pu constater qu'il y avait un petit mouvement d' avant en arrière à la fois sur le slogan , le menu et le personnage, et cela grâce à cette animation instantanée que nous avons utilisée ici. Alors encore une fois, testons cela. Voilà. Très subtil, très agréable. Et bien sûr, nous avons toujours nos animations sur le Togo ici, et nous pouvons toujours continuer à faire défiler Mais maintenant que nous avons créé cette belle version pour le premier fleuret du site, nous pouvons continuer à nous concentrer sur le reste du site et à ajouter tous ces effets de défilement parallaxe 20. Ajustements du défilement parallaxe: Nous sommes donc de retour dans XZ, et je vais dupliquer ce plan de travail, renommer et l'appeler De cette façon, je saurai que c'est ici que le défilement commence. Donc, la première et la plus importante chose que nous devons faire est de déplacer tout ce groupe vers le haut et de nous assurer qu'il est peu près aligné là où se trouve notre prochain groupe. Ce sera donc la section sur la définition de vos objectifs. Je vais m'assurer que notre menu restera ici en haut, donc je vais le faire glisser vers le bas, et que tous les autres éléments que nous ne voulons pas voir apparaissent à l'écran. Je vais donc simplement le faire glisser vers le bas, pas la forme, puis nous pourrons nous concentrer sur les éléments de notre fenêtre d'affichage N'oubliez pas que le tiret indique la fenêtre d'affichage et que nous pouvons maintenant commencer à déplacer des objets et même à redimensionner les éléments vers le haut ou vers le bas. Donc, si je sélectionne cet élément ici, je peux l'agrandir, le déplacer un peu vers la droite, puis déplacer cette zone de texte vers le bas. Et j'essaie toujours d' éviter de créer des tangentes ou de m'embrasser entre les Cela signifie simplement que vous voulez éviter de les placer de manière à ce qu'il soit difficile dire ce qu'il y a devant et ce qu'il y a derrière. Donc, quand le pôle et le bord de la zone de texte sont parfaitement alignés , cela fait bizarre. Nous voulons donc nous assurer que cela se chevauche un peu plus que cela. Même chose avec cet élément, je ne le placerais pas ici. Encore une fois, cela semble gênant, vous devez vous assurer qu' il y a au moins un peu plus de chevauchement entre les deux. Maintenant, si nous revenons à l'option prototype et que nous sélectionnons le plan de travail précédent, nous pouvons ajouter l'interaction, et je vais continuer à l' animer automatiquement facilement et facilement avec les mêmes paramètres qu' Nous pouvons donc simplement tester cela, et si je tape n'importe où sur l'écran, nous verrons déjà l'animation. Si je veux le tester à nouveau, appuyez simplement sur Commando Control Enter, et voyons voir Ça a l'air bien, mais ce n'est pas très intéressant pour le moment. Je vais donc sélectionner cette forme ici sur le plan de travail précédent. Et comme il se trouve en dehors de la fenêtre d'affichage, nous pouvons jouer avec lui en mode design Ainsi, par exemple, je peux l' étirer jusqu'au bout, puis je peux appuyer deux fois pour sélectionner des points d'ancrage individuels, et je peux créer une forme complètement différente, en la courbant de cette façon, et peut-être même que ce point pourra apparaître ici Donc presque en train de remplir cette zone. Ensuite, le texte set your goes peut être déplacé vers la gauche. Je maintiens la touche Shift enfoncée tout en la faisant glisser, puis cette forme peut descendre. Le texte peut apparaître, et cette illustration peut aller vers la droite. Remarquez que je déplace tout dans directions différentes, car cela rendra l'animation de parallaxe plus intéressante Alors testons cela. Je vais sélectionner ce plan de travail, car je ne veux pas voir l'animation d'introduction dans son intégralité pour le moment Je me concentre uniquement sur ce premier détail de parallaxe. Et oui, ça a déjà l'air bien mieux. Testons-le à nouveau. J'aime bien ça. Plutôt sympa, tant par la forme telle qu'elle s'anime que par tous les autres éléments À ce stade, il convient de mentionner que si vous faites une présentation à un client et que vous voulez vraiment lui montrer l' animation parallaxe et concentrer sur la façon dont les choses passent d' un volet à l'autre, il existe un moyen intéressant faciliter la tâche Ainsi, au lieu d'utiliser le déclencheur tactile, vous pouvez passer au glisser-déposer, qui signifie que lorsque vous testez cela, vous pouvez simplement commencer à faire glisser le pointeur de droite à gauche pour voir la transition Et avec cela, vous pouvez contrôler la vitesse et vous pouvez même faire des allers-retours. Ainsi, tant que vous maintenez la touche enfoncée et que vous continuez à faire glisser le pointeur, vous pouvez vraiment vous concentrer sur vous pouvez vraiment vous concentrer sur tous les éléments et sur leur mouvement Mais n'oubliez pas qu'une fois que vous aurez lâché prise, vous resterez sur le dernier plan de travail. Donc, pour pouvoir revenir en arrière, il vous suffira tout de même d' appuyer sur commande sur la touche de commande. Pour une démonstration rapide, il est toujours plus facile de configurer l'onglet. Mais si vous voulez ralentir les choses et vraiment vous concentrer sur chaque détail, pensez à utiliser plutôt le déclencheur. Mais pour cet exemple, je vais revenir au tap. Continuons ensuite en créant une autre copie de ce plan de travail. Je vais donc maintenir la touche Alter option enfoncée, faire glisser vers la droite. un petit zoom arrière, sélectionnez l'ensemble du groupe, faites-le glisser vers le haut jusqu'à ce que le pli suivant apparaisse dans notre fenêtre d'affichage Encore une fois, assurez-vous que le menu persistant reste là où il est censé être et que tous ces autres éléments ne se révèlent pas encore dans la fenêtre d'affichage Et comme avant, ce que je vais faire ici, c'est commencer à jouer avec ces éléments en mode design. Donc, agrandissons cette forme. Encore une fois, appuyez deux fois dessus, modifiez également sa courbure. Et encore une fois, tout comme pour éviter les tangentes, j'aime aussi éviter d'avoir une ligne nette autour du cou des personnages. Encore une fois, c' est un peu étrange. C'est beaucoup plus agréable de le mettre quelque part ici . Et puis nous pouvons même déplacer ces détails si nous n' aimons pas le placement, nous pouvons avoir le texto sur la droite, peut-être légèrement plus haut également Et puis ce personnage peut être plus grand. Ensuite, il suffit de revenir en mode prototype, connecter les deux plans de travail en utilisant les mêmes paramètres d'interaction que précédemment, d'entrer et de sortir Donc, si nous testons cela par rapport au précédent, c'est ce que nous verrons dans le suivant. Et en général, une fois que tout est configuré sur le nouveau tableau graphique, je reviens et je précise d'où viennent les choses. Un high peut donc venir de la droite. Ce texte peut venir d'en bas. Le personnage peut venir d'en haut, et peut-être avec un peu de transition ou de fondu, puis cette forme peut venir de la gauche. Nous allons donc le tester à nouveau. Cliquez, puis nous verrons comment cela fonctionne. Encore une fois. Oui, ça a l'air plutôt sympa. Maintenant, peut-être que la transition entre les personnages n'est pas la meilleure solution, alors je vais revenir ici, augmenter l'opacité, la faire glisser vers le bas. Nous allons le tester de cette façon. Oui, c'est mieux. Je ne voulais pas créer ce mélange entre l' arrière-plan et le personnage Maintenant c'est réglé, et ça a déjà l'air bien mieux. Maintenant, à partir de maintenant, je vais accélérer les choses car je vais simplement répéter les mêmes étapes que précédemment, pour ajouter toutes les animations de parallaxe pour le reste des plis de la page Et nous allons passer à autre chose et nous concentrer sur la configuration de la navigation pour notre menu autocollant. 21. Menus et navigation pour le site Web: Nous avons maintenant tout en place, quatre tableaux d'art pour l'introduction et quatre plans de travail pour le défilement parallaxe Voyons simplement comment cela fonctionne. Voici donc notre animation d'introduction qui fonctionne bien. Si je tape n'importe où, nous faisons défiler la page vers le bas, nous tapons n'importe où, encore une fois, défiler la page vers le bas, nous continuons à faire défiler la page, puis nous arrivons au dernier pli Il est donc temps de configurer le menu autocollant et la navigation, car, bien entendu, compte tenu de la configuration actuelle de ce prototype, nous ne pouvons pas simplement le parcourir de haut en bas car, bien entendu, sur ces plis ou ces plans de travail, nous n' avons pas plus de détails Il est donc complètement masqué dans la fenêtre d'affichage. C'est pourquoi il est important d'inclure un menu autocollant pour ce type de prototypes de sites Web. Maintenant que nous avons configuré notre menu permanent en tant que composant, je vais en venir à cette instance. Et je peux voir dans le coin supérieur gauche que ce n'est en fait pas le composant principal. C'est juste une instance ou un enfant de l'original. Donc, si nous voulons nous assurer que les interactions seront attribuées à tous les plans de travail, il vaut toujours la peine de choisir l'option d'édition du composant principal Maintenant que nous avons sélectionné ou supprimé celui-ci, il devra être généré séparément en dehors de l' un de nos plans de travail. Mais à partir de là, nous pouvons désormais double-cliquer et sélectionner des objectifs, et en mode prototype, nous pouvons les faire glisser sur ce plan de travail. En utilisant le même outil pour animer le tap en toute simplicité et en 1 seconde, je pense que cela va fonctionner Ensuite, sélectionnons le partage qui devra figurer sur le dernier tableau de départ. Et je vais juste le déplacer ici au milieu qu'il soit plus facile de sélectionner tous les éléments. Le coup de pouce doit aller dans celui-ci, et le high doit aller ici. Enfin, nous voulons la croissance, c'est le nom de ce produit. Pour revenir à la page ou au plan de travail, où tous les éléments sont déjà en place Nous ne voulons donc pas continuer à rejouer l'animation intra. On le voit une fois. Mais après cela, nous voulons revenir au premier volet où tout est déjà en place. Maintenant que nous avons configuré cela, nous pouvons simplement accéder à n'importe laquelle de ces pages et tester des choses. Alors passons simplement au boost, puis revenons à un sommet. Et vous pouvez voir que j'y vais intentionnellement de manière non linéaire, juste pour que nous puissions voir que tous les liens fonctionneront. Partagez, puis revenez aux objectifs, puis sautez peut-être à nouveau pour viser haut, puis revenez au premier pli. Grâce à notre composant, tout fonctionne comme prévu, et nous n'avons pas eu à répéter toutes ces interactions pour chacune des planches d'art dupliquées. travailler et d'utiliser des composants Il est extrêmement important de travailler et d'utiliser des composants dans OBXZ Donc, si vous n'avez pas encore commencé à les utiliser, assurez-vous de le faire car cela accélérera réellement votre flux de travail et vous permettra de travailler plus efficacement. Et si vous aimez ce tutoriel et que vous voulez savoir comment j'ai également créé la version d'application de ce projet et comment j'ai tout construit à partir de zéro, tous les éléments, alors n'oubliez pas que vous pouvez apprendre cela dès le début de notre conception graphique au boot camp, pour lequel, encore une fois, le lien se trouve dans la description ci-dessous. 22. Partager votre prototype: options s'offrent à vous pour partager le prototype que vous avez créé dans AdobXD Mais probablement d'abord, le plus important est de configurer deux flux distincts au cas où vous auriez à fois une application et un site Web dans le même document. Mais dans le cas de projets plus complexes pour lesquels vous souhaiteriez peut-être également disposer d'une version tablette, ou d'une version à la fois en mode portrait et en orientation paysage pour votre application, vous devez configurer plusieurs flux Ici, nous n'avons qu'un seul flux pour le moment, celui de l'application. Mais lorsque j'arrive sur le site Web et que je suis en mode prototype, je peux maintenant cliquer sur cette icône d'accueil. Ce qui va créer un nouveau flux pour moi. Je peux donc appeler cela un site Web. Et c'est important pour notre prochaine étape, car dans le module de partage, nous pourrons partager séparément ces deux flux. Ainsi, lorsque nous l'envoyons au client, il reçoit un lien vers le site Web et un lien vers l'application. Et vous pouvez toujours leur recommander ouvrir le lien de l' application sur leur téléphone. Pendant qu'il s'agit du site Web, ils doivent vérifier sur un ordinateur de bureau ou sur un ordinateur portable. Donc, actuellement, le flux du site Web est sélectionné, et le lien est déjà nommé en conséquence. Mais je peux taper ici I growth website, et je peux choisir parmi les paramètres d'affichage suivants parmi lesquels la révision de conception est recommandée si vous souhaitez partager cela avec parties prenantes telles que le client ou vos collègues, pourquoi vous devriez choisir le développement lorsqu'il s'agit de le partager avec le développeur. Et la présentation est également utile si vous présentez personnellement quelque chose de XD. Mais dans ce cas, je vais m'en tenir à la révision du design. Enfin, vous devez décider des autorisations. Par défaut, toute personne disposant du lien pourra accéder à ce prototype. Ils pourront donc le voir. Bien entendu, ils ne pourront pas le modifier, mais ils pourront le commenter. Et au cas où vous souhaiteriez que votre projet soit un peu mieux protégé. Vous pouvez dire que seules les personnes invitées y auront accès. Dans ce cas, vous devrez ajouter leurs adresses e-mail ici. Enfin, vous pouvez également attribuer un mot de passe pour restreindre l' accès au prototype. Pour l'instant, je vais le garder pour que toute personne disposant du lien puisse y accéder, puis une fois que j'aurai cliqué sur créer un lien, il le générera sur un serveur Adobe. Et il recrache cette URL pour moi, que je peux copier ou même obtenir son code intégré si je veux la placer dans un site Web, par exemple, et voici à quoi elle ressemble dans le navigateur Nous avons donc tout ici. Il fonctionne de la même manière que nous l'avons vu dans XD. Nous pouvons sauter partout. Nous avons également créé nos petits boutons , et surtout, personnes invitées ou celles qui ont obtenu l' URL pourront commencer à le commenter, soit en faisant des commentaires généraux, soit en épinglant des commentaires sur faisant des commentaires généraux, soit en épinglant des commentaires des parties spécifiques du design Supposons qu'ils souhaitent modifier quelque chose ici lorsqu'ils font leur commentaire, modifient le libellé ou les mots. Une fois que je l'aurai soumis, il y sera édité, et celui qui le lira aura toujours un petit surlignage à l'endroit où il est placé sur le dessin. Désormais, lorsque vous commencez à avoir beaucoup de commentaires, vous pouvez toujours les résoudre, les modifier ou les supprimer. Et il y a aussi des options en bas pour masquer les annotations, juste pour voir le design sans elles, et vous pouvez également filtrer les commentaires fonction de nombreuses options différentes ici est également un moyen rapide d'inviter d'autres collaborateurs ou réviseurs grâce à ce bouton situé en haut Et il y a aussi une autre fonctionnalité intéressante, que nous verrons une fois que nous aurons exporté l'autre flux. J'ai donc sélectionné l'application, et j'ai tous les mêmes paramètres ici sur la droite. Je crée simplement le lien et je l' ouvre dans le navigateur. Encore une fois, les mêmes interactions apparaissent. Nous pouvons tout examiner de la même manière que nous l'avons vu dans XD. Mais en plus, nous avons également un autre moyen de naviguer dans les plans de travail, avec ces icônes en bas Je peux également revenir au premier écran. Et si cela ne suffit pas, nous pouvons même cliquer sur cette icône haut à gauche avec laquelle nous pouvons avoir un aperçu de tous les plans de travail utilisés dans ce projet Et si je veux passer directement à celui-ci, je peux simplement cliquer dessus et continuer à tester les choses. Si vous avez plusieurs écrans dans un projet, vous verrez par défaut toutes les commandes de l'application. Toutefois, si vous souhaitez filtrer et afficher uniquement les commandes attribuées à l'écran actuel ou à l'écran actuellement visible, vous pouvez également utiliser ce petit bouton ici Et il y a une dernière chose que je voulais mentionner. Une fois que nous sommes revenus dans XD, notez que pour ces deux flux, la petite icône en forme de lien est visible. Et au cas où vous reviendriez en arrière et apporteriez des modifications après avoir reçu vos commentaires. Disons simplement que nous déplaçons ce texte légèrement vers le bas. Vous verrez que cette petite étiquette est devenue grise ici. indique que vous devez penser à mettre à jour votre prototype partagé en revenant au module partagé, vous assurant que le flux d' applications est sélectionné et en choisissant Mettre à jour le lien. Cela va donc actualiser le prototype partagé, et la personne chargée de la révision verra immédiatement ces modifications mises à jour dans son navigateur. C'est tout ce que je voulais aborder pour ce projet. J'espère que vous avez trouvé ce travail amusant et que cela vous aidera à décider si l'UX et design Web sont la direction dans laquelle vous souhaitez vous spécialiser. Mais même si ce n'est pas la direction que vous souhaitez prendre, ces compétences et la capacité à utiliser DB XD seront extrêmement utiles à mettre en valeur dans votre CV et votre portfolio. 23. Conclusion: Bravo pour avoir terminé ce cours. J'espère que vous avez eu autant de plaisir à le lire que j'en ai eu à l'enregistrer. Et bien sûr, n' oubliez pas le projet de classe. Parce que n'oubliez pas que la pratique rend parfait. J'ai hâte de voir votre travail, alors assurez-vous de le soumettre. Et si vous aimez ce cours et que vous souhaitez en savoir plus avec moi, vous trouverez de nombreux autres cours ici. Va les découvrir maintenant. J'ai hâte de te rencontrer le prochain.