Adobe XD intermédiaire : prototypage

Name: Adobe XD intermédiaire : prototypage
Author: Jessica Henley

Acquérir des compétences intermédiaires pour le prototypage, telles que le câblage, l'animation automatique et l'état des composants.

Preview the first lesson free — get full access to all 7 lessons.

Demander une démo Se connecter

Cours : à la demande

Bonjour, je m'appelle Jessica Henley. Et dans cette leçon, je vais vous montrer comment câbler et tester un prototype. Pour commencer, je vais juste faire un clic droit sur ce vert plan de travail. Et ce que je veux faire, c'est continuer et sélectionner Copier, à droite cliquez n'importe où à l'extérieur et collez. Maintenant, je vais juste le déplacer. Ensuite, je vais simplement tout sélectionner sur ce troisième tableau blanc et appuyez sur Supprimer sur mon clavier parce que je veux recommencer à zéro sur. Je viens de le dupliquer pour que le plan de travail ait la même taille comme l'écran précédent. Maintenant, je vais sélectionner le rectangle ou vous pouvez appuyer sur le lettre R pour un raccourci. Cliquer et faire glisser le rectangle pour couvrir l'ensemble troisième plan de travail et en sélectionnant une couleur qui est déjà dans mon Échantillons de couleurs. Ici, je peux apporter une modification de conception en modifiant l'apparence la couleur, qui est le remplissage. Ou je peux faire un clic droit dessus et descendre dans Modifier. Et ici, sous Modifier, je peux simplement cliquer et faire glisser pour sélectionner le couleur désirée. Je vais juste aller de l'avant et accéder à l'outil Rectangle. Donc Rectangle, vous pouvez également appuyer sur la lettre R. Et en cliquant et en faisant glisser, et je vais juste l'aligner sur des deux côtés. Nous allons créer une grille dans un instant. Alors maintenant, j'ai quelques photos du bas de ces fleurs. J'ai pris ces photos, et voici quelques fleurs que j'ai eu. Et l’une de mes fleurs préférées est cette photo que j’ai prise. Je vais donc juste le dupliquer. Vous pouvez appuyer sur Ctrl ou Commande D pour dupliquer, ou vous pouvez cliquer avec le bouton droit et copier puis coller. Je vais le coller parce que je vais les utiliser fleurs plusieurs fois sur différents plans de travail. Ensuite, ce que je vais faire, c'est simplement aller de l'avant et remonter ça, mais redimensionnez-le également pour qu'il tienne à l'intérieur de ce rectangle blanc. Une fois que c'est bien ajusté à l'intérieur, je vais aller au SMS, ou tu peux appuyez sur la lettre T pour un raccourci. Maintenant, je vais juste taper en haut de ce plan de travail. Ici, je vais juste mettre le titre comme espace réservé. Et je vais choisir un de mes styles de personnage, mais c'est beaucoup trop petit. Je vais donc passer du côté droit et le modifier. Alors maintenant, je vais juste tester un numéro différent. Ici sous Texte, je vais taper 50, et avec l'outil Sélection, je vais juste l'aligner. Je vais également cliquer sur le signe plus pour l'ajouter à mon Encore une fois, pour le titre, je vais continuer et taper avec l'outil Texte. Et pour l'intérieur de cette boîte, je vais juste l'appeler Informations en tant qu'espace réservé, Info en abrégé. Ici, j'en ai 35, mais laisse-moi essayer 38 et 40. J'essaie de voir lequel je veux garder. Donc ça fait 32, et je peux simplement cliquer et faire glisser et également l'ajouter à mon J'ai donc 32 comme police, et je peux simplement maintenir Shift enfoncé pour sélectionner plusieurs fois. Une fois les trois éléments sélectionnés, je peux cliquer sur Répéter Grille. Maintenant, je vais simplement cliquer et faire glisser vers le bas. Vous pouvez désormais voir une grille d'informations répétée dans l'image. comme le long rectangle blanc. Je vais faire un clic droit et aller sur Remplacer l'image. Dans le dossier Fleurs, je vais choisir une nouvelle image de fleur. Vous pouvez voir que ça change, et je continue jusqu'à ce que je aller jusqu'au fond. Clic-droit, descendez jusqu'à Remplacer l'image, choisissez une fleur différente, appuyez sur Importer. Je vais donc faire un clic droit dessus, Remplacer l'image, et cliquez sur Importer. Alors maintenant, j'ai quatre images de fleurs différentes. Donc sur ce tableau blanc, je vais copier, faites un clic droit et collez à nouveau, et tirez-le simplement pendant quelques instants espacement. Et encore une fois, sélectionnez tout et supprimez. Une fois supprimé, il est temps de continuer et de continuer à créer le prochain tableau blanc. Faites un clic droit, copiez et collez pour la même image. Et je vais mettre en évidence dans ce plan de travail cette photo. Donc, avec le titre sélectionné, je vais juste faire un clic droit et copiez et collez, et continuez et extrayez cela. Je peux voir quel plan de travail est sélectionné en cliquant en haut. Maintenant, au lieu de copier les informations, je dois simplement continuer et tapez-le à partir de zéro, car si j'essaie de dupliquer de la grille, J'aurai quatre textes d'information. Je n'en veux pas quatre, je veux juste une information sur ce point particulier plan de travail sur lequel je travaille en ce moment. Maintenant, je vais juste ajouter quelques lignes pointillées pour faire semblant de texte. Et bien sûr, je le redimensionnerai une fois que j'aurai terminé. Alors tapez simplement ça là-dedans. Il ne me reste plus qu'à le sélectionner et à choisir une police différente. Et je vais juste y aller avec du noir, et j'essaie de voir si j'aime ça. Et au fur et à mesure que j'avance et que je le centre un peu plus, voilà. Donc la prochaine chose que je vais faire, c'est juste traîner sur ce plan de travail un peu, et je vais passer à prototype. En cliquant sur ce plan de travail, je veux le connecter, mais je ne le fais pas vous souhaitez sélectionner tout le plan de travail, parce que nous voulons en arriver là si nous sélectionnons la première grille, cela devrait en fait aller au prochain plan de travail, car vous pouvez voir les fleurs sont assorties. Je vais donc simplement cliquer et faire glisser pour le connecter. Vous pouvez dire qu'il est connecté, et la connexion est réglé pour taper. Et je vais continuer et régler cela pour qu'il se dissolve. Ici, je vais simplement sélectionner le dernier plan de travail et les connecter ensemble également. Vous pouvez donc voir la connexion. Il y a deux fils qui se connectent l'un à l'autre. Il est maintenant temps de le tester. Lorsque je clique sur le bouton de lecture dans le coin supérieur droit, Je viens de taper. Mais ce n’est pas vraiment par là que je veux commencer. Il semble que ce ne soit pas connecté, je dois donc y retourner et connectez-les ensemble. Très bien, essayons à nouveau. Et je tape à nouveau, ça marche. Cliquez sur Infos, Infos, Infos. Vous pouvez voir qu'il y a une petite main là-bas. Quand je clique sur le premier, je vois que la page est fonctionnement. Dans la prochaine leçon, je vais vous montrer comment apporter des modifications à la conception. et résoudre les erreurs. Merci d'avoir regardé.

Intermédiaire Fournisseur : Jessica Henley 7 leçons · 43m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Le prototypage dans Adobe XD vous donnera un aperçu de l'exécution de votre conception, et ces leçons vous fourniront les compétences essentielles nécessaires pour faire passer votre projet au niveau supérieur. Une façon d'y parvenir est d'incorporer plusieurs grilles de défilement dans diverses applications afin de déplacer l'utilisateur vers différents écrans. Une autre idée est d'utiliser l'animation automatique pour passer d'un écran à l'autre. Il existe une variété de déclencheurs et d'actions que vous pouvez configurer pour l'animation automatique. Restez organisé et évitez les erreurs en renommant les couleurs et les styles de caractère de vos ressources pour qu'ils soient plus faciles à trouver, et en vous assurant que les objets sont correctement superposés pour éviter les résultats inattendus.

Ces leçons Adobe XD expliquent comment créer un câblage entre différents écrans, tester un prototype, apporter des modifications à la conception et résoudre les erreurs. Vous apprendrez à animer automatiquement, à définir des déclencheurs et des actions, ainsi qu'à définir des accélérations. Ces leçons abordent également la création d'états de composants, des superpositions et de l'audio.

Ce que vous allez apprendre

Intégrer des effets d'auto-animation pour la transition d'un écran à un autre
Identifier les déclencheurs et les actions disponibles pour l'auto-animation
Utiliser plusieurs grilles de défilement pour déplacer les utilisateurs vers différents écrans
Créer des connexions entre les écrans, tester un prototype et résoudre les erreurs
Créer des états de composants, des superpositions et de l'audio
Définir les assouplissements (eases) et renommer les couleurs des ressources et les styles de caractères pour rester organisé

Points clés à retenir

Le prototypage dans Adobe XD donne un aperçu de l'exécution d'une conception et fournit les compétences nécessaires pour faire avancer un projet.
Plusieurs grilles de défilement peuvent être intégrées aux applications comme moyen de déplacer l'utilisateur vers différents écrans.
Les transitions auto-animées entre les écrans prennent en charge une variété de déclencheurs et d'actions que vous pouvez configurer.
Renommer les couleurs des ressources et les styles de caractères permet de les trouver plus facilement, et une superposition appropriée des objets permet d'éviter des résultats inattendus.
Les leçons couvrent la connexion des écrans, le test des prototypes, la modification des conceptions, la résolution des erreurs et la création d'états de composants, de superpositions et d'audio.

Foire aux questions

Que vais-je apprendre dans ce cours Adobe XD ?

Vous apprendrez à intégrer des effets d'auto-animation, à identifier les déclencheurs et les actions, à comprendre les différences pour les superpositions et à utiliser les grilles de défilement. Les leçons couvrent également la connexion entre les écrans, le test d'un prototype, la réalisation de modifications de conception, la résolution des erreurs, la configuration des assouplissements (eases) et la création d'états de composants, de superpositions et de l'audio.

Quel est le niveau de ce cours ?

Il s'agit d'un cours Adobe XD intermédiaire axé sur le prototypage, destiné à amener votre projet au niveau supérieur.

Comment le cours est-il structuré ?

Le cours est organisé en sept leçons : Câblage et test d'un prototype ; Modifications de conception et résolution des erreurs ; Auto-animation ; Déclencheurs et actions ; Assouplissements (eases) et composants ; États des composants ; et Superpositions et audio.

Quelles compétences ce cours couvre-t-il ?

Il couvre Adobe XD, Adobe Dimension, le prototypage numérique, le prototypage logiciel et les compétences en prototypage.