Introduction au prototypage dans Axure 9

1. Introduction: Hé, là. m'appelle Fred Beecher, et je veux vous souhaiter la bienvenue dans mon cours d'introduction au prototypage et à la soirée acteur Un peu sur moi pour commencer. En fait, je forme les gens à utiliser le cours réel depuis 2007, mais c'est ma première occasion de faire un cours vidéo et de faire un cours en ligne aussi, donc je ne pouvais vraiment pas être plus excité. Maintenant. Ce cours s'adresse principalement aux personnes qui sont nouvelles à, en fait. Mais si vous êtes un utilisateur expérimenté et que vous souhaitez voir certaines des fonctionnalités et fonctionnalités de la version 9 en action, c'est l'endroit où le faire. Nous ne reviendrons pas sur tout, mais beaucoup de choses importantes couvriront ici. Donc, la façon de commencer est de travailler ensemble pour construire le prototype le plus simple au monde. Cela vous aidera à avoir une idée du flux de travail de base des acteurs, puis nous allons rapidement passer en revue les actions. Toi, moi et ces deux choses ensemble vous donnerons la base dont vous avez besoin pour le reste du cours. Le reste du cours est divisé en cinq sections différentes. La première section apprendra comment filer le cadre et la fracture de la deuxième section, qui est mon préféré. Nous allons apprendre comment faire des interactions, ce qui est ma partie préférée du prototypage. La troisième section portera sur les maîtres qui nous aident à réutiliser les composants de conception et de fonctionnalité tout au long du prototype. Ensuite, nous nous concentrerons sur la façon de prototyper de manière responsable. Et puis nous finirons par parler de documentation et de collaboration avec les acteurs. Nouveau service, cloud réel. Donc, je suis vraiment excité de commencer. J' espère que tu l'es aussi. Allons-y et encore. 2. Le prototype le plus simple du monde: D' accord, commençons par apprendre sur les acteurs. Workflow de base. Heureusement, c'est assez simple. Tout ce que vous faites est d'ajouter des objets à une page. Vous les rendez interactifs. Ensuite, vous prévisualisez votre prototype dans le navigateur. Et si vous apportez des modifications, vous actualisez simplement la fenêtre du navigateur avec votre prototype, et ces changements apparaîtront juste là. Maintenant, la façon dont nous allons apprendre à ce sujet est de construire ce qui est littéralement le prototype le plus simple au monde. Pour en tirer le meilleur parti, je vous encourage vivement à me suivre. Alors allez-y et écraser ma fenêtre vers le haut, puis amenez réelle dans une autre fenêtre à côté de lui et suivez comme je vais. Cela vous aidera à obtenir la sensation des acteurs flux de travail de base. D' accord, allons-y et commençons. Bonjour, tout le monde. Nous allons commencer cette classe en construisant le prototype le plus rapide et le plus simple au monde . Alors commençons par ouvrir l'acteur. Quand on ouvrira l'acteur, il va nous présenter ce dialogue d'introduction. Allons-y et cliquez sur le nouveau fichier et alors réel nous montrera sa valeur par défaut. Vous, pourquoi nous allons seulement nous concentrer sur les parties de l'U. Je dans cette leçon que nous devons créer ce prototype simple. Eh bien, regardez l'U. I et détail dans une leçon ultérieure. Donc, ce que nous voulons faire avec ce prototype rapide et simple est d'avoir une page avec un bouton dessus, où vous cliquez sur ce bouton et il vous amène à une autre page. Donc, nous allons d'abord nous concentrer sur nous assurer que nous avons des pages dont nous avons besoin. Donc, la façon dont nous faisons qu'une actrice va ici dans cette douleur pages, et nous pouvons voir que l'acteur a déjà créé la première page pour nous. Alors, continuons et créons cette deuxième page en cliquant sur le bouton de la page d'annonce. On y va. Maintenant, vous pouvez choisir de le renommer si vous le souhaitez. Je vais la laisser nommée Page 2. Maintenant, ce que nous devons faire est de mettre un bouton sur la première page. Vous pouvez voir que nous sommes toujours sur la page 1 par ici et ici. Maintenant, la façon la plus courante d'ajouter des objets à une page. Un acteur passe par la bibliothèque. Une bibliothèque est une collection de ce qui appelle réellement des widgets que vous pouvez mettre sur une page. Je vais choisir ce simple ici et simplement le faire glisser sur la page. Donc, en faisant glisser des widgets de la bibliothèque Très, très simple moyen d'ajouter des choses à la page pour en fait, je vais en fait DoubleClick poings qui changent le texte pour aller à la page. Bon, donc maintenant nous avons une page avec un bouton dessus et une autre page à laquelle nous pouvons aller, mais nous ne pouvons toujours rien faire avec ça. Donc, ce que nous devons faire est de sélectionner le bouton et d'ajouter ce qui appelle réellement une interaction. Maintenant, dans la version 9, ils ont grandement simplifié la façon dont vous créez des interactions et des acteurs. Ainsi, par exemple, il nous présente des interactions communes pour ce type d'objet. Donc, lorsque je clique sur ce bouton, je veux ouvrir un lien vers une autre page. Donc, je vais aller de l'avant et choisir cette interaction commune. Il me dit maintenant de sélectionner la page, donc évidemment je veux aller à la page deux, donc je vais juste cliquer dessus, et puis c'est tout ce que j'ai à faire. Alors je vais frapper. D' accord. Bon, maintenant nous avons les deux pages. On a le bouton. Le bouton est interactif. Maintenant, ce que nous devons faire est de mettre cela dans un navigateur et la façon dont nous faisons qu'un acteur est simplement en appuyant sur ce bouton d'aperçu ici afin qu'il s'ouvre dans un nouvel onglet de navigateur et nous avons notre bouton. Et si nous cliquons sur ce bouton, il semble disparaître. Mais que se passe-t-il réellement ? Si nous cliquons ici, nous pouvons voir que la hiérarchie des pages était en fait à la page deux. Et si nous cliquons sur la page 1, cliquez à nouveau sur ce bouton, nous allons à la page 2. C' est ça. Vous avez créé votre premier prototype Félicitations. 3. Visite Axure Uur UI: l' interface utilisateur réelle est composée d'un tas de zones différentes, de barres d' outils et de douleurs. Maintenant, c'est juste une visite rapide, donc je vais juste vous orienter vers ce que vous avez confiné dans chacune de ces zones. Au fur et à mesure que nous poursuivrons, l'exercice abordera certaines des fonctionnalités détaillées qui sont présentes dans chacun de ces petits domaines. Commençons donc par la zone du cadre de fil. C' est la zone principale que vous allez travailler dans un acteur, comme vous faites glisser des widgets ici pour faire votre cadre métallique. Maintenant, par ici et les pages sont douloureuses. C' est là que vous avez une liste de toutes vos pages et vous pouvez réellement double-cliquer sur celles-ci. Et cela ouvre toutes vos pages sur lesquelles vous cliquez dans les onglets, ce qui est très pratique. Maintenant. Nous avons déjà vu comment nous pouvons ajouter une page ici. Nous pouvons également ajouter des dossiers, ce qui vous aide à garder les choses propres. Je vais appeler ce dossier le plus rapide prototype, puis j'ai traîné ces deux pages là juste pour garder tout propre et bien rangé. Maintenant, l'autre chose que nous avons ici, c'est la douleur du contour. Dans cette douleur, vous avez une liste de chaque objet sur votre page actuelle, ce qui est très, très, euh, utile. Et si vous êtes un utilisateur de croquis, c'est quelque chose qui vous fera sentir très, très à l'aise. Donc je vais retourner ici aux pages. Et puis jetons un coup d'oeil à la douleur des bibliothèques aussi. La douleur de la bibliothèque vous permet de choisir entre trois bibliothèques différentes. Flux sont le flux de bibliothèque par défaut, puis un jeu d'icônes étendu, qui est nouveau. Je crois pour neuf. Il y en a beaucoup plus ici que ça ne l'a été par le passé. Ah, je Austin, gardez-le sur toutes les bibliothèques et puis utilisez la fonctionnalité de recherche, que nous verrons plus tard. Mais nous allons juste le mettre dans la valeur par défaut. Alors passons ici sur le côté droit. Ici, vous avez le style, la douleur, les interactions, la douleur et les notes de douleur. Donc, avec la douleur de style, cela contrôle tous les différents aspects de la mise en forme pour tout ce que vous avez sélectionné. Maintenant, c'est très contextuel. Donc, en ce moment, c'est le formatage que vous pouvez le faire à un objet bouton. Mais je peux aussi cliquer sur ce qui semble être un espace vide, mais est en fait la page, et cela me donne des options de formatage pour la page elle-même, ce qui est assez intéressant pour les interactions. Cette douleur est l'endroit où nous pouvons spécifier comment le prototype interagit avec nos comportements. Maintenant, si vous êtes nouveau à neuf, vous avez de la chance parce que c'est beaucoup plus rationalisé qu'avant. Mais si vous utilisez l'acteur depuis un moment, cela va prendre un peu de s'y habituer. Cependant, il est en fait plus efficace à long terme. Enfin, cette note douleur vous permet de communiquer des informations spécifiques sur chaque objet sur votre écran ainsi que sur la page elle-même. C' est donc un outil de communication très utile pour le faire afin que vous n'ayez pas à prototyper toutes les interactions que vous pouvez documenter Ah, tout un tas d'entre eux aussi. Donc, en regardant ces douleurs, il y a quelque chose de très nouveau dans Action 9, qui est cette capacité à sortir les douleurs, qui est assez intéressant. Donc, si vous avez un moniteur multi configuré, une bonne façon de l'utiliser serait de mettre toutes les douleurs sur votre moniteur plus petit, de sorte que vous les avez tous visibles en tout temps, et vous pouvez ensuite consacrer votre plus grand moniteur à la zone du cadre métallique. Maintenant, pour récupérer cela, je vais juste voir et appuyer sur la vue de réinitialisation. Maintenant, enfin, ce que nous avons ici, c'est ah, barre d'outils ici. n'y a pas beaucoup ici que vous ne feriez normalement pas avec Ah, droit, Cliquez ou, hum, un raccourci clavier. Mais vous avez le contrôle sur la façon dont vous sélectionnez les éléments, et si vous créez un flux, vous pouvez connecter vos objets ensemble. Maintenant, vous voyez aussi cela ici, qui semble dupliquer la douleur de style. Et tu as tout à fait raison. C' est le cas. Cependant, cela apparaît tout le temps. Donc, peu importe si vous êtes dans la douleur des interactions, la douleur des notes. Vous avez toujours la possibilité de formater vos objets. Et c'est la visite rapide de la vraie vous. J' ai hâte d'entrer dans tous les détails de ces domaines au fur et à mesure que nous progressons dans l' exercice 4. Introduction au projet de classe: Quand j'enseigne l'acteur, j'aime généralement que les gens essaient de recréer quelque chose qui existe déjà. La raison pour laquelle je fais cela est parce que cela aide vraiment si vous comprenez ce que votre prototype devrait être à la fin. Maintenant, pour ce cours, le site qui va recréer est le site d'athlétisme Sunita. Veuillez aller de l'avant et voir la description du cours pour un lien vers le site Web. La raison pour laquelle j'ai choisi ce site est parce qu'il a un équilibre d' interactions simples et complexes et qu'il est réactif. Les mises en page sont assez simples maintenant. Dans les classes suivantes, nous continuerons à recréer le site Sunita avec des niveaux de fidélité plus élevés. Ne vous inquiétez pas si vous ne pouvez pas obtenir votre prototype exactement. Pour être honnête, ça pourrait être difficile pour moi aussi parfois. Donc, ce que j'ai fait pour vous aider dans cette situation, c'est dans vos documents de cours. J' ai inclus un fichier réel qui a l'état final de tous les différents exercices supplémentaires que je vous demande de faire maintenant. Je vous encourage à donner votre meilleure chance avant d'ouvrir ce dossier. Mais si vous êtes trébuché et que vous ne pouvez tout simplement pas aller de l'avant, ce fichier aura les réponses dont vous avez besoin. Le site sera recréer pour cette classe d'acteur est thèse Anita Athletics site Sunita Athletics est une entreprise qui fabrique des vêtements de fitness pour les femmes. Et la raison pour laquelle j'aime utiliser ce site particulier enseigner acteur est parce que c'est un excellent mélange de mise en page simple et d'interactions complexes afin que nous puissions commencer ici en haut. Vous voyez que nous avons cette barre de fonctionnalités haut ici et puis nous avons ah barre de navigation assez standard ici avec quelques fonctionnalités de recherche ainsi que, ah méga menu qui est un autre type commun d'interaction. Et nous allons prototyper ce type d'interaction dans cette classe sur. Ensuite, vous pouvez voir cette grande image ici beaucoup de contenu visuel vraiment riche que nous pouvons aussi faire un acteur. Et comme nous faisons défiler ici, il y a ah section ici qui a les catégories de produits et nous voyons une souris intéressante sur les interactions. Nous allons prototyper des versions simplifiées de ces interactions dans cette classe. Au fur et à mesure que nous continuons à faire défiler vers le bas, vous verrez plus de gros contenu visuel bloqué. Comme nous arrivons ici, vous verrez une grille de produits ah, ce qui est une chose courante dans n'importe quel site de commerce électronique. Et nous allons prototyper ce type d'interaction dans le cadre de cette classe mais avons également un objet spécial spécifiquement pour ce type de cas d'utilisation. Maintenant, l'utilisation de cet objet est assez compliquée, donc nous allons enregistrer cela pour une autre classe que nous continuons à faire défiler le contenu de grande image Seymour . Hum et c'est le site web. Plus ou moins. Maintenant, l'autre grande chose à propos de ce site est qu'il est réactif afin que nous puissions utiliser ce site nous aider à tirer pour quelque chose. Lorsque nous travaillons avec l'utilisation adaptative, un acteur et c'est le site sera recréer pour cette classe réelle. Je suis vraiment excité de commencer avec ça et de creuser ça avec toi. 5. Introduction au cadrage: d' accord. Dans cette première section, nous allons apprendre comment construire un cadre métallique en action. Nous commencerons par définir les dimensions de la page. Continuez en plaçant des formes, des images de texte et des icônes sur la page. Ensuite, nous allons terminer en apprenant à naviguer dans les couches après neuf, qui a été mis à jour à partir des versions précédentes. Maintenant, puisque le site Sunita est si lourd d'images, j'ai inclus tout un tas d'images pré-recadrées dans votre matériel de cours. Inclure vous encourager à utiliser ceux dans votre cadre de fil juste cause. Cela accélérera les choses très rapidement. Et ne vous inquiétez pas d'utiliser ces images. Je les ai approvisionnés à partir d'un certain nombre de différents sites de photos de stock, donc vous êtes tous prêt à les utiliser. Bon, allons-y et commençons. 6. Travailler avec des pages: Dans cette courte leçon, nous allons apprendre les bases mêmes de la façon dont vous commencez à construire un prototype en action. Ces bases sont de créer des pages et de spécifier leur taille afin que nous puissions voir ici que nous avons déjà les écrans prototypes les plus rapides tous cachés dans leur dossier. Donc je vais créer un autre dossier pour le prototype Sinead A, accord. Et puis je dois cliquer sur Ajouter la page pour créer une autre page, que je vais juste appeler la maison. Et maintenant, vous pouvez voir que ce n'est pas réellement dans ce dossier. Donc je dois l'attraper et le faire glisser dans ce dossier, et on y va. Maintenant, cette page est complètement brute. Je n'ai pas du tout spécifié d'informations à ce sujet. Donc quand je l'ouvre, c'est juste qu'il continue et va et va. Maintenant, ce que je veux faire, c'est que je veux en faire une taille très spécifique. Donc, la façon dont vous pouvez le faire est de vous rendre dans la liste déroulante Dimensions de la page, et vous pouvez réellement choisir parmi un certain nombre de modèles différents, selon ce que vous faites. Maintenant, il se trouve que je suis sur un Mac Book pro, que je ne vois pas vraiment ici. Donc je vais aller de l'avant et créer un appareil personnalisé, et je sais que la largeur de mon écran est de 1440 pixels. Donc je vais aller de l'avant et créer un appareil personnalisé, Donc, je vais spécifier cela ici et puis je vais choisir de ne pas spécifier un avec. Donc maintenant, si nous faisons défiler ici et puis zoomons un peu vers le bas, nous pouvons voir que nous avons une limite définie pour notre conception. Et là, vous l'avez. C' est la page qui va commencer à construire notre prototype du site Sunita dans la prochaine leçon. 7. Placer des formes et du texte: dans cette leçon apprendra les bases de placer des formes et du texte sur un cadre de fil réel . Maintenant, il y a trois façons de le faire. Je vais commencer par le plus commun, qui est de traîner quelque chose de la bibliothèque avant d'entrer trop profondément dans ça. Jetons un coup d'oeil à Thèse Anita site et prenons quelques décisions sur ce qui va se concentrer sur. Concentrez-vous sur cette barre supérieure ici et remarquez qu'il y a un ah ah, fond de ce chariot ici qui est légèrement différent. Et puis nous allons aussi nous concentrer sur cette barre de talons, et nous avons cette grande image ici avec du texte de chapelier. Donc, revenons à en fait maintenant, c'est Thebe Ox que j'ai traîné de la bibliothèque . Comme vous pouvez le voir, une fois que je viens contre les bordures de la page là-bas, ces lignes rouges qui apparaissent ceci sont nouvelles en neuf. Ceux d'entre vous qui sont de grands fans de sketch apprécieront ça, j'en suis sûr. Et on y va. C' est notre top sont OK la deuxième façon que vous pouvez ajouter quelque chose en fait est à travers ce menu d'insertion. Ceci aussi, aussi, est tout nouveau dans la version neuf et devrait également être quelque chose de assez familier pour les utilisateurs d'un croquis . Donc, je vais cliquer sur le rectangle ici, et je vais juste dessiner un rectangle. Ça va correspondre à la forme de l'arrière-plan de la voiture. Donc vous pouvez voir ici quand je monte contre quelque chose que je peux vraiment accrocher à cette chose, ce qui est assez pratique. Donc, euh, ce n'est probablement pas inventé la bonne forme, mais assez proche. Je ne veux pas de frontière, donc je vais aller ici et changer la frontière à zéro et rendre le remplissage un peu plus sombre , donc ça a l'air bien. Ok, maintenant, je sais que j'ai besoin de déplacer ça ici, et je vais en fait faire spécifiquement ces 40 pixels parce que je sais que c'est la hauteur de la, euh, barre et aussi faire ce 70 pixels de large. C' est très pratique de pouvoir le faire dans le style, euh, payer ici. Mais vous pouvez aussi le faire ici dans la barre rapide de style à un bar. Bon, maintenant nous avons ces deux choses dans la troisième voie est encore quelque chose qui sera très familier pour les utilisateurs d'esquisse. C' est lié à ça. Insérez les hommes. Tu sais, si tu vois quelque chose qui ressemble à ça, , tu n'as pas cette propriété dont je suis sur le point de parler allumée. Mais si vous voyez juste quelque chose ici qui dit P ou R ou O ou L, vous avez quelque chose activé qui est nouveau dans la version 9 raccourcis clavier simple code. Non, j'ai spécifiquement désactivé ça parce que ce n'est pas comme ça que j'aime travailler. Mais si vous voulez vous assurer de l'activer, vous pouvez aller dans les préférences ou l'équivalent dans les fenêtres et aller de l'avant et aller dans la section canevas et choisir activer les raccourcis à touche unique. Donc, ce que je peux faire maintenant est si je veux dessiner un rectangle, j'appuie juste sur la touche R et puis je peux accrocher contre ces frontières et nous allons ah, il y a mon nab notre nouveau je vais à partir de la frontière à zéro et le remplissage à quelque chose de pas tout à fait si sombre. D' accord. Et puis ça, je sais, doit être, euh, 70 pixels. Alors frappez ça. Et on y va. Il y a maintenant un bar. Maintenant, une chose que je veux faire rapidement est de passer ici au contour. Maintenant, nous avons trois rectangles sur la page et tout ce qu'il dit ici est rectangle, rectangle rectangle. Une des choses qui est absolument critique en action est de vous assurer que vous nommez tous les widgets que vous placez. Parce que si vous ne parvenez pas à le faire une fois que vous travaillez avec des interactions, vous perdrez la trace des objets que vous essayez de forcer à effectuer une sorte d'action. Donc c'est une habitude que je te recommande d'entrer dans ça quand tu joues quelque chose, tu le nommes. Je vais appeler ce chariot BG. Je vais appeler ça une barre supérieure, BG. Et vous pouvez également faire cela directement à partir du contour lui-même en faisant des tapotements trop lents sur le nom. Donc celui-là que je vais appeler jamais bar BG. Bon, maintenant j'ai ces barres. La prochaine chose que je veux faire est que Teoh mette cette grande image maintenant. La plupart du temps, quand je fais ah, prototype. Je n'ai aucune sorte de photographie, donc j'utilise un objet appelé un espace réservé. Maintenant, une des choses amusantes que vous pouvez faire ici dans cette bibliothèque est que vous pouvez réellement rechercher des choses en tapant leurs noms. Donc, je sais que cela s'appelle la chanson Placeholder dans un as de jeu de type. On y va. Et il y a mon espace réservé. La raison pour laquelle j'aime ça est parce que ça me permet de plutôt que ça m'empêche d' essayer Teoh de faire défiler une liste de choses visuellement et de choses manquantes. D' accord. Cela, je sais, doit être aussi large que la page, et il doit également avoir une hauteur de 14 20 pixels. Très bien, donc c'est un espace réservé qui se tient en place pour l'image, mais ça va être derrière un texte. Donc l'une des choses que je veux faire est que je veux le verrouiller. Donc, je vais à droite, cliquez et choisissez verrouillage, emplacement et taille. Ça veut dire que si je traîne sur cette zone, rien ne se passera. Il ne va pas bouger, ce qui va être très utile une fois que je commencerai à déplacer du texte dessus. Bon, allons-y et trouvons des textos. L' un des principaux éléments de texte que vous utiliserez est appelé label, donc je vais chercher une étiquette. On y va. Et je vais juste le traîner ici parce que je veux mettre au moins un objet de talent là-haut, donc je vais zoomer. Ce n'est pas assez grand. Il s'est battu. Ça s'appelle ça 20 points. On y va. Et, euh, déplacer pour qu'il soit accroché au centre là-bas, et je vais appeler cette liste de souhaits, accord ? Et puis l'une des autres choses qui vient aussi de Ah, l'inspiration derrière le croquis est quand vous avez un objet sélectionné et maintenez enfoncée la touche d'option , um, pour Mac, Ensuite, vous pouvez réellement voir la distance entre l'objet sélectionné et les autres objets à l' écran. Donc je veux vraiment être, Ah, Ah, 40 pixels de distance. Alors je vais tenir les orteils. Déplacement en ligne droite par ici. Attendez. Option C 34. Ok, maintenant je vais utiliser mes touches fléchées et me déplacer sur six pixels. Donc 123456 Et si j'appuie à nouveau sur l'option ? Oui, 40 pixels. C' est ce que je veux. Ok, zoom arrière. Et l'étiquette est trop petite pour quelque chose que nous devons mettre ici. Donc, nous allons travailler avec l'autre type d'objet texte en réel, qui est l'en-tête. Il y a aussi un type de paragraphe. Mais nous en parlerons un peu plus tard. Bon, donc je vais déposer ça là-dedans. Ce n'est pas assez grand. J' appelle cela 80 points et je dis que nous n'avons pas vraiment besoin d'audace pour cela. Ok, donc je vais centrer ça, et c'est le nom de la société. Bon, maintenant j'ai ça verrouillé pour que je puisse bouger ça en toute impunité. Mettons-le au centre avec ces gars. On y va. Nous n'avons pas le temps de filer encadrer toute cette chose, mais si vous ouvrez l'interaction de fichier de classe terminé exercices et allez à cette page L. Owen être formes à la maison. Vous pouvez voir à quoi ça ressemble si vous deviez porter cadre sur toute cette page. Et c'est ce que j'ai pour toi. La leçon suivante vous montrera comment travailler avec des images dans votre prototype réel. 8. Travailler avec des icônes et des images: dans cette leçon, nous allons apprendre comment travailler avec des images et des icônes. Un acteur. abord, passons à la vue Sunita pour voir comment ils travaillent avec ces types d'objets. On dirait qu'il y a une une icône de loupe ici. Il y a d'énormes belles images sur tout le site. Ah, et il y a aussi ces étoiles ici dans le cadre de la fonctionnalité d'évaluation et de commentaires. Revenons donc à réel ici et concentrez-vous sur le premier d'Icahn défilons vers le bas jusqu'à nos produits. Ah, et je vais zoomer ici pour rendre ça plus facile de faire un peu de mise en page. Et je vais bousiller ça, maintenant la touche de changement enfoncée pour faire de la place aux étoiles. Ok, maintenant, où trouvez-vous ces étoiles ? Eh bien, acteur vient en fait avec une bibliothèque d'icônes pleine de bonnes choses. Il y a tellement de choses ici que c'est difficile de naviguer, donc j'ai presque toujours donc j'ai presque toujours tapé ici ce que je cherche. Alors je vais faire Star, et on y va. C' est exactement ce que je cherche. Donc je vais faire glisser ça ici, et je vais vouloir que ce soit d'environ 20 pixels donc je vais maintenir la touche Maj enfoncée et le redimensionner pour être d'environ 20 pixels. On y va. Ensuite, je vais m'assurer qu'il est aligné horizontalement avec le texte de révision, puis maintenez ma touche d'option Ault enfoncée. Teoh euh, faites plusieurs copies et ils sont à environ 4 pixels espacés en ce moment, ce qui est très bien. Il y a une autre que je dois ajouter ici, et je peux choisir l'étoile à moitié vide ou l'étoile à moitié pleine pour commencer à moitié plein, puisque j'ai tendance à être plus optimiste et je vais changer cela vers le bas Teoh de la même taille. Là, nous allons, eh bien, rétrograder pour se déplacer en ligne droite. Et ça a l'air assez bien pour l'instant. Ce sont donc les bases de la gestion des icônes. Et après maintenant, jetons un coup d'oeil aux images, allons faire défiler et déplacer apparaître à cette image principale sur un site Web. Typiquement, cela s'appelle l'image du héros. Donc je vais Teoh, supprimer cet espace réservé qu'on avait avant et retourner à la bibliothèque. Mais cette fois, je cherche une image, pas une icône. Donc, je vais revenir à la bibliothèque par défaut et je vais faire glisser dans ce widget d'image sur une ligne à la barre et le bord de la page ici. Maintenant, c'est l'une des nombreuses façons d'obtenir des images en remorquage. Acteur. Donc, je vais juste double-cliquer sur ce, et cela va faire apparaître un dialogue de navigateur de fichiers, et je vais cliquer sur Hero ici maintenant dans votre dossier de matériaux de classe. Vous avez ces deux dossiers Sunita Color et Cindy dans une échelle de gris. Toutes les images ont été coupées dentées appropriées, ah spécifications pour vous d'être facilement en mesure d'apporter ces dans votre exercice. Donc, je vais juste double-cliquer sur cela, et là il apparaît dans la taille parfaite, donc vous remarquerez que le texte qui était là semble avoir disparu. Tout ce que nous avons à faire, c'est retourner, puis le texte reviendra. Maintenant, passons ici à ces catégories. Zoomez un peu et je vais vous montrer une autre façon d'obtenir une nouvelle image en remorquage. Acteur. Vous pouvez simplement le faire glisser et le déposer à partir de votre navigateur de fichiers. Donc nous y allons, et je vais le mettre en ligne ici et juste se débarrasser de ce détenteur de place et le déplacer pour qu' il soit agréable et aligné qui semble assez bon et juste l'envoyer à l'arrière. Ce n'est pas tout à fait aligné comme il doit l'être. C' est probablement mieux. Bon maintenant, une autre façon d'obtenir des images dans l'acteur de remorquage est simplement de double-cliquer sur n'importe quelle image existante parce que vous pouvez réellement la remplacer par n'importe quelle autre image. Donc si j'avais ouvert, on y va maintenant. Mise en garde. Voici que si l'image que vous remplacez n'est pas la même hauteur et la même largeur que l'image qui est remplacée par, l'image avec laquelle elle est remplacée va s'écraser dans ces dimensions d'origine. Bon, maintenant vous savez comment travailler avec des icônes, des images et des acteurs. Alors allez-y et complétez tout cela pour qu'il finisse par ressembler à cette page particulière. Les images de la maison dans votre fichier d'exercices terminés et nous vous verrons dans la prochaine leçon. 9. Grouper et calques: dans cette leçon, nous allons en apprendre davantage sur le regroupement d'objets. Un acteur maintenant. Cela peut ne pas sembler si important d'une chose à savoir, mais c'est particulièrement important dans l'acteur, et c'est à cause de ce qui est vraiment connu, qui est la capacité à créer des interactions vraiment riches. Maintenant, la chose étonnante à propos des groupes et en fait est que vous pouvez affecter des interactions à un groupe d'objets. Donc, avec cette excitation à l'esprit, allons de l'avant et regardons ce que nous devrions avoir à la fin de notre dernier exercice. C' est donc la version complète du dernier exercice. Donc toutes ces images sont ici. Toutes les icônes et les choses comme ça sont là. Mais si nous devions taper ici et arriver à notre contour, affaiblir, voir chaque objet sur les pages de cette liste, cela rend d'abord assez difficile à naviguer. Donc concentrons-nous sur ah, ce domaine juste ici. Donc c'est, euh, bloc de contenu évident. Typiquement, cela s'appelle un héros dans le lingo de conception Web, alors sélectionnons l'image d'arrière-plan, le titre, le sous-titre et ce petit bouton que vous pouvez réellement voir ici dans le contour. Ces choses qu'ils sont sélectionnés, euh, la sélection est reflétée ici. Vous pouvez également sélectionner des choses directement à partir du contour si vous le souhaitez, et vous appuyez simplement sur le bouton droit Cliquez pour PC ou contrôle. Cliquez pour Mac sur vous, Congar avant et groupe que ou tout simplement appuyez sur Commande ou contrôle G et il y a notre groupe. Maintenant, tout ce que nous avons à faire, c'est nommer le groupe. Je vais appeler ce héros. Nous y allons, et nous pouvons voir ici que ce groupe est considéré comme un objet. Donc, si je clique sur les interactions, j'ai la possibilité de créer une nouvelle interaction basée sur ce groupe, qui est assez fantastique. Maintenant, passant au fichier terminé, je veux vous montrer à quoi ça ressemble quand vous avez, euh, tout organisé en groupes. Donc, si nous regardons cela, nous pouvons voir que tous les messages blawg, tous les produits individuels, toutes les différentes sections de la page. Toutes ces choses différentes sont représentées en tant que groupes individuels ici sur. Si nous les étendons là-bas, nous pouvons voir tout cela là-bas. Et chacun de ces groupes reflète essentiellement un bloc de contenu sur le site principal. Voici le héros ici, les catégories. Voici le bloc fonctionnel, etcetera, etcetera. C' est donc le regroupement des objets et de l'acteur. La prochaine leçon que je suis vraiment excitée parce qu'on arrive enfin à créer des interactions, tu vois, alors. 10. Introduction aux interactions: D' accord, les interactions, les interactions diffusent ma partie préférée du prototypage. C' est parce que c'est ce que tu avais utilisé pour faire de ton prototype des trucs. Et l'action a des fonctionnalités complètes autour de la construction d'interactions. C' est l'une des raisons pour lesquelles je l'aime tellement. Maintenant, si vous êtes un utilisateur expérimenté, je vous encourage à laver cette leçon parce que les interactions sont là où elles ont apporté certains des plus grands changements. La mauvaise nouvelle, c' est que si vous avez de l'expérience, cela va prendre un peu de s'y habituer. Mais la bonne nouvelle est, si vous êtes nouveau à réellement er, c'est beaucoup plus facile à apprendre qu'il ne l'était auparavant. Donc, dans l'action neuf et Interaction est composé de trois choses. Un événement, des actions et des cibles. Un événement est quelque chose qui peut arriver à un prototype ou quelque chose dans un prototype. Donc, vous cliquez sur une page, Vous cliquez sur un lien ? Eso. Le clic est l'événement. L' action est ce qui se produit lorsque l'événement se produit. Donc, sur cliquez sur aller à une nouvelle page, aller aux nouvelles pages théâtrales dans maintenant, vous devez spécifier à quelle page vous voulez aller, et c'est la cible. Donc, cliquez est l'événement ouvrir nouvelle page est l'action, et la page de catégorie est la cible. Maintenant, dans cette leçon, vous allez apprendre à faire des interactions simples comme ça, y compris des liens et des overs de base de la souris. Mais vous apprendrez aussi à créer de riches overs de souris ainsi que des méga-menus. Donc ça va être très amusant. Allons-y et commençons. 11. Liens vers une une autre page: dans cette leçon, nous allons apprendre les bases de la création d'interactions dans les interactions réelles sont ce qui rend votre prototype interactif. Avant de commencer, nous devrions nous assurer que votre prototype ressemble à ceci. Jusqu' à présent, vous avez récupéré tout le contenu et, ah, vous avez fait les mises en page comme ça. Hum, et après, ah, une fois que vous aurez tout préparé, alors on pourra continuer avec ça. Donc, dans cette leçon, ce que nous allons faire, c'est que nous allons prendre ce lien de boutique ici et que cela nous amène à une autre page. Donc d'abord, nous devons créer cette deuxième page, donc je vais l'ajouter ici. Je vais l'appeler boutique. On y va. Et maintenant, je vais double-cliquer dessus. Teoh, ouvre-le dans l'usure de la zone ici, dimensions de la page. Je vais frapper appareil personnalisé à nouveau et faire 14. 40 et non. Avec ici, on y va. D' accord. Donc maintenant tout ce que je dois faire ici, c'est juste mettre quelque chose que vous pouvez mettre ici. Je vais juste mettre une boîte grise. Ah, ça me dit que c'est en fait, la page de la boutique. Donc, je vais double-cliquer sur cela et juste articuler très clairement ce que c'est. Bon, donc on a cette page. Je vais cliquer sur ce X pour fermer ça. Maintenant, il y a un certain nombre de façons d'arriver à cet objet. Ce que je veux faire, c'est que je veux créer ce lien directement sur le magasin de mots lui-même pour que je puisse cliquer ici, qui est le groupe de bar de talent. Ensuite, je peux cliquer dessus à nouveau, qui est le groupe de liens de la boutique. Et puis je peux cliquer sur et encore. Et maintenant j'ai la chose qui est au bas de ce groupe, qui est le lien de la boutique. Mais ce que je vais faire, c'est que je vais aller au contour pour vous montrer comment vous y naviguez, y naviguez à partir de là. Donc, je sais que c'est le nab notre même si je ne l'ai pas quand je clique à son sélectionné ici. Donc je vais agrandir ça et la mer. Voilà le lien de la boutique. Donc c'est tout le groupe. Et il y a le texte de la boutique lui-même. Donc ce que je vais faire, c'est aller ici et cliquer sur les interactions. Donc, l'une des choses qui est nouveau et acteur neuf est ah, façon rationalisée de créer des interactions. Oh, la façon dont ça rationalise ça c'est en recueillant certaines des interactions courantes ici . Donc, ce que je veux faire est quand je clique dessus, donc sur clic, je veux aller à une autre page. Donc ça veut dire que je veux ouvrir un lien. Donc tout ce que j'ai à faire est de cliquer dessus. Et maintenant la page à laquelle je veux aller. Je sélectionne ça ici, frappe, ok, et j'ai fini. Voyons comment ça marche. Vous allez de l'avant et appuyez sur prévisualisation pour générer le prototype. Et si tu peux dire que ce magasin est maintenant interactif. Donc si je clique dessus, on y va. Je suis à la page de la boutique. Maintenant, une chose que je veux vous montrer est que vous pouvez réellement créer des liens sur Mawr que de simples objets individuels. Donc, ce que je vais faire est que je vais réellement sélectionner cette interaction ici en cliquant dessus et je vais appuyer sur supprimer, et cela se débarrasse de l'interaction afin que vous puissiez supprimer les interactions aussi bien. Maintenant, je vais, euh, pour sélectionner le lien de la boutique. Donc c'est tout un groupe, et je vais créer une nouvelle interaction. Maintenant. Ça ne me donne pas d'interactions communes parce que c'est un groupe entier. Donc, si je frappe une nouvelle interaction, je dois choisir l'interaction à utiliser. Maintenant, il y a beaucoup de ce qu'on appelle des événements, donc les événements sont des choses qui peuvent être faites sur un prototype. Habituellement, ce sont des choses qu'une personne peut faire, comme cliquer sur DoubleClick. Oh, notre presse la souris vers le bas. Mais il y a un certain nombre d'autres choses aussi. On ne sera pas en mesure de regarder tout ça maintenant, donc je vais juste choisir sur Click. Donc, sur clic est mon événement. Et maintenant je veux à un orteil d'action se produire pendant cet événement, et celui que je veux est le lien ouvert. Donc, ces actions sont les plus courantes pour le clic. Donc je vais cliquer sur le lien ouvert, et ensuite ça devrait commencer à être familier à partir de maintenant. Alors on y va. Et si je retourne à mon prototype et me rafraîchis, en fait, en fait, passons par ici et naviguons vers cette page d'accueil. D' accord. Si j'arrive au magasin, on y va. Ça marche toujours. Et ce qui est amusant, c'est que si je retourne en arrière, ça marche même. Si je suis ici en plus de cette petite histoire de carotte, on y va. Et ce sont les règles de base pour créer à une interaction un acteur. 12. Créer un menu Mega: dans cette leçon, nous allons apprendre comment gérer la visibilité des objets, un acteur et comment contrôler cette visibilité dans le prototype à l'aide de l' interaction d'entrée sur la souris . Donc, avant de commencer, allons de l'avant et regardons le site Sunita et ce que nous allons essayer prototyper ici. Donc dans ce site, hum, dans cette barre supérieure, quand vous passez la souris sur un magasin ou un fax, vous obtenez ce gros sous-menu ici. Typiquement, cela s'appelle un méga menu et vous pouvez voir comment, quand vous êtes ici, cela ne disparaît pas. Mais si tu montes ici, ça disparaît. Ah, et aussi, si vous faites défiler comme ça, alors ça disparaît. Nous allons faire quelque chose de assez similaire dans l'acteur et à quoi cela ressemblera est ceci. Ce sera plus simple que sur le site Sunita. Donc, vous feriez la souris sur le magasin comme ça et puis si vous montez, il disparaîtra. Et puis, si tu y vas, ça disparaîtra aussi. Bon, allons-y et commençons. Donc, en revenir à cela en fait ici, la première chose que nous devons faire est que nous devons réellement créer une plus grande salle afin que nous puissions le faire en faisant simplement glisser une boîte sur la page. Je vais juste traîner une grosse boîte grise ici. Et puisque le soleil Ito est un peu transparent, je vais en fait rendre celui-ci un peu transparent pour appeler ça 60. Hey, ça a l'air raisonnable. Bon, maintenant. Ah, nous voulons aussi nous assurer que ce sont des étiquettes. Je vais l'appeler Mega Menu ici et aussi par ici. Non. Ajoutons également un bouton pour que nous puissions aller à la page de la boutique, double-cliquez dessus et appuyez sur Aller au magasin. Bon, maintenant nous devons rendre tout cela invisible en même temps. Et la façon la plus simple de le faire est comme nous l'avons appris avant de regrouper des choses. Donc, je vais sélectionner ces deux objets. Appuyez sur la commande G sur PC. Il serait contrôlé, g. Et maintenant, nous avons un groupe. On peut le voir ici, et je vais taper dessus et le nommer tout de suite. Ok, donc maintenant nous avons ceci comme son propre objet. Maintenant, nous pouvons penser à sa visibilité. Donc, par défaut, nous voulons que cela soit invisible. Donc, la façon dont nous ferions cela est affaiblie. Définissez ça un acteur. Il y a plusieurs façons différentes. Partout où vous voyez cette icône d'œil, vous la verrez ici dans la douleur de style et ici dans la barre de style. Vous pouvez l'utiliser pour définir ce que vous avez sélectionné à masquer. Je fais généralement sont à droite, cliquez et ne définir caché. Et une fois que vous avez caché quelque chose, vous pouvez voir qu'il aura l'air jaune. Et ça te dit qu'il y a quelque chose là-bas. C' est juste caché par défaut. Donc quand nous allons de l'avant et allons sur notre prototype et le rafraîchir, voyons à quoi cela ressemble pour que vous puissiez voir que nous ne pouvons rien voir ici du tout. Donc, nous savons que cela fonctionne comme prévu. Donc, pour revenir à l'acteur, euh, donc pour garder les choses simples, je vais sélectionner ce lien de magasin ici et me débarrasser de l'interaction existante. Donc, je vais sélectionner l'interaction ici en cliquant dessus, puis appuyez sur Supprimer pour m' débarrasser. D' accord ? Et maintenant je veux faire en sorte que cela devienne visible une fois que je souris sur ce groupe ici . Donc je vais frapper une nouvelle interaction et l'action que je veux. Euh, désolé, l'événement que je veux utiliser son sur la souris entrer parce que quand une souris entre dans cette zone, c'est quand cela a besoin orteil arriver. Donc l'action que je veux avoir lieu est autour de la visibilité. Et donc ce que c'est, c'est ce spectacle et se cacher. Donc si je clique, montre et me cache ici, ça va me demander ce que je veux montrer et cacher. Je vais sélectionner le groupe de menu méga ici, et non, je peux choisir d'afficher masquer ou basculer la visibilité. ce moment. Afficher est sélectionné par défaut, et ce sera très bien. Alors je vais frapper. Ok, d'accord. Maintenant, revenons à notre prototype et actualisons et voyons à quoi cela ressemble. Très bien, donc en faisant des souris par ici, tout va bien. Ma souris sur le magasin. Ensuite, le méga menu apparaît, mais je ne peux pas vraiment le faire disparaître, et c'est parce que nous n'avons pas encore spécifié cette interaction particulière. Revenons à l'action et voyons comment il ferait ça. Bon, donc je vais monter ici et cliquer sur le méga menu pour que je sois dans cette zone et ce que je vais faire c'est, ah, je vais ajouter un objet appelé « hot spot ». Et cela semblera inhabituel quant à la raison pour laquelle je ferais cela, parce que vous penseriez que vous seriez juste en mesure d'utiliser l'interaction sur la souris pour faire disparaître cela. Mais le problème est, c'est que sur la souris se déclenchera même si je monte dans le bar comme ça. Et si je veux aller dans la barre comme ça et que ce menu reste, je ne peux pas utiliser sur la souris. Donc je vais utiliser cet objet hot spot. Typiquement, j'aime qu'il mesure environ 40 pixels de hauteur. C' est généralement assez grand, et ce que cet objet va faire est qu'il est totalement invisible, donc vous ne serez pas en mesure de voir quoi que ce soit avec ceci ici, donc il va juste attraper l'entrée de la souris, donc quand la souris entre ceci, alors il va cacher le méga menu. Mais nous voulons que cela fasse partie du méga menu, donc je regarde ici dans le contour, et en ce moment c'est très séparé, donc nous ne voulons pas l'avoir comme ça. Donc je vais le faire glisser dans le méga menu ici, juste en haut, et je vais le nommer parce que nous appelons tout. Un acteur moi pour l'appeler. Ah, méga menu trader. D' accord, et maintenant c'est toujours sélectionné. Donc, je veux ajouter mon interaction. Je vais choisir sur l'entrée de la souris et encore une fois je veux montrer ou cacher. Et encore une fois, je veux montrer ou cacher méga menu. Mais dans ce cas, je ne veux pas le montrer. Je veux que les orteils le cachent. Donc, je clique sur cache-cache et frappe. Ok, Et maintenant, si je vais au prototype et le rafraîchir, j'apporte qui montre le menu et ensuite sortir de là fait disparaître. Et quand je monterai ici, il ne se passe toujours rien. Donc on y est presque. Revenons maintenant à ce que nous devons faire, c'est que nous devons faire en sorte que lorsque la souris entre dans cette zone de barre supérieure à nouveau, c'est grand groupe. Lorsque la souris entre dans cette zone, alors nous voulons que le méga menu disparaisse. Donc je vais aller de l'avant et cliquer sur une nouvelle interaction encore et encore. Je vais utiliser sur la souris, entrer et montrer et cacher, et je veux montrer et cacher à nouveau méga menu. Et dans ce cas encore, je veux me cacher. Donc, je sélectionne cacher, puis appuyez sur. D' accord. Et revenons à notre rafraîchissement du prototype. Et si je survolais le magasin et que je monte, alors ça disparaît. Si je survole le magasin et descend, alors ça disparaît, qui est exactement ce que nous voulons arriver. Et c'est ainsi que vous utilisez la souris, entrez l'interaction ou dans l'ER réel pour contrôler la visibilité des objets dans le prototype. 13. Créer une rasse riche: dans cette leçon, nous allons apprendre à faire une souris richement interactive sur l'interaction dans l'acteur. Donc, si nous faisons défiler le site Sunita ici et regardons les blocs de catégorie, nous pouvons voir qu'il y a beaucoup de choses qui se passent lorsque vous passez la souris sur l'image d'arrière-plan estompe. Ce titre monte et ces choses apparaissent, et cela s'étend même dans. Maintenant, vous pouvez faire tout cela en acteur, mais pour accomplir cela nécessite des techniques un peu plus avancées qui sont hors de la portée de cette classe d'introduction. Jetons un coup d'oeil à ce que nous allons faire à la place, c'est assez proche, mais ce n'est pas tout le chemin. Donc, quand nous passons la souris dessus, nous avons le titre de catégorie qui monte, et l'image en arrière-plan est un peu génial. Et puis nous avons ces éléments ici qui apparaissent. Alors allons de l'avant et regardons comment faire cela. Un acteur. Je vais passer ici à notre prototype, et la première chose que je veux faire est de créer cet effet de noircissement. La façon dont je vais accomplir cela est en ajoutant une autre boîte ici, et je vais la faire exactement de la même taille. Je vais le nommer avant de faire autre chose. Nommez-le masque. Et puis la façon dont ils obtiennent cet effet est qu'il superpose quelque chose au-dessus de cette image s je vais rendre ce noir et 40% opaque, et vous devriez voir quelque chose qui semble assez proche. Bon, on y va. Maintenant, nous devons vraiment le mettre dans ce groupe. Je vais juste le traîner ici , et ça prendra un peu de temps. Toe, monte là-dedans. Euh, d'accord. Donc nous y sommes. Les leurs sont de première catégorie en ce moment. Nous l'avons dans le groupe de catégorie, mais il doit être au-dessus de ce masque sont excusez-moi au-dessus de l'image. Donc maintenant, ça a l'air droit. Mais ce que nous voulons faire, c'est que nous voulons nous assurer qu'il est caché par défaut. Donc, je vais faire un clic droit dessus. Elle est cachée. On y va. Et non, je vais tricher un peu et venir ici dans mon dossier. Je vais juste copier une partie de ce matériel de superposition ici, d' accord, accord, et il a déjà été groupé, et j'ai réussi à le coller directement dans ce groupe, donc je pense que nous sommes bons. Mais encore une fois, le nom de la catégorie ici doit être au-dessus de la superposition. Bon, donc maintenant ce que nous voulons faire, c'est créer l'interaction sur le groupe lui-même. Donc, si je sélectionne le groupe ici, cliquez sur interactions et nouvelle interaction. La première chose sur laquelle nous devons travailler est de rendre cette image de fond sombre. Alors allons de l'avant et utiliser sur la souris Entrée à nouveau et sur Mao Center. On veut montrer cet objet, euh, et parce qu'il y a beaucoup de choses ici, je vais chercher ce masque et je le trouve assez vite, et je veux le montrer. Mais maintenant ajoutons un peu de saveur. Si nous nous souvenons du site, il est en fait animé. Un petit peu. Allons disparaître en 250 millisecondes. Ça semble juste. Bon, alors maintenant, quand on y passe la souris, ça va se montrer. Mais nous devons aussi ajouter une autre interaction sur ce même groupe. C' est l'interaction sur la souris. Parce que ce que nous allons faire est essentiellement le contraire de ce que nous venons de faire. Donc je vais venir ici et frapper show et encore chercher masque. Euh, et cette fois je veux le cacher. Donc je vais frapper cache-fondu 250 et ensuite frapper. D' accord. Bon, regardons notre prototype dans le navigateur et voyons à quoi il ressemble et rafraîchissons. Ici. Faites défiler vers le bas Oui. Oui. D' accord. Ça marche. Excellent. Bon, revenons à l'acteur. Et maintenant, nous allons travailler à faire cette catégorie. déplacement de l'image ici est une sorte de mouvement de titre de catégorie. Une des choses que je fais, euh c'est d'en faire une copie parce que vous verrez, une des choses que nous devons faire est d'identifier exactement où nous voulons le déplacer . Donc cette copie m'aide à comprendre ça. Donc non, parce que je cherche des trucs. Je vais m'assurer que je ne sois pas confus et que je l'appelle juste factice. D' accord. Donc, à 19 par 16. 73. C' est là que je veux que ça passe à Okay, donc j'ai sélectionné à nouveau le groupe. Non. Vous pouvez voir que nous avons déjà des interactions ici. Nous pouvons donc avoir plusieurs interactions sur le même objet, mais nous pouvons également avoir plusieurs actions sur le même événement. Donc, si je clique ici Ah, et que je frappe cet autre type d'action appelé Move. C' est un nouveau pour nous. Je vais frapper la catégorie type ici. D' accord. Le nom de la catégorie est ce que je veux déplacer. Um, et vous pouvez passer par, qui est un nombre relatif de pixels ou deux, qui est défini emplacement sur l'écran. Et deux sont généralement beaucoup plus fiables. Donc, c'était 2 19 16. 73. D' accord. Et oui, je veux l'animer. Euh, je vais utiliser cette facilité dans la courbe, parce que ça a tendance à avoir l'air le plus naturel. C' est assez doux. Tu as frappé. D' accord. D' accord. Et maintenant, nous devons faire la même chose sur la souris, mais en face. Ce que je vais faire, c'est aller voir où c'est. Départ. C' est 2 1917 18 Je vais retourner à mon groupe. Ajouter en action à nouveau. Je veux ajouter Move ici, et je vais chercher le nom de la catégorie titre ici. Je veux passer pour passer à. Je veux le déplacer directement à 19 par, euh, 17. 18 et puis nous l'animerons. Il est à l'intérieur et à l'extérieur. 250 millisecondes. Bon, regardons à quoi ça ressemble. Mais en fait, c'est d'abord se débarrasser de ce mannequin là-bas. D' accord ? Dans un rafraîchissement. D' accord. On dirait qu'on veut qu'il ressemble. D' accord, non, non, je vais à nouveau dans le réel ici. Et la dernière chose que nous devons faire arriver est que nous devons faire apparaître cette superposition eso je vais cliquer sur le groupe à nouveau ici, puis ajouter un autre spectacle d'action. Et puis je vais frapper la superposition du bétail, en fait, parce que c'est ce que le groupe s'appelle, et je veux le montrer, et je veux le faire disparaître en 250 millisecondes à nouveau. Et puis devine ce que je dois faire ici. Même chose, mais à l'envers. Donc, euh, je vais montrer la superposition. Mais cette fois, je veux le cacher et oui, je veux m'animer dans ce cas aussi. Bon, revenons à notre prototype ici et rafraîchissons. Et on l'a fait fonctionner. Maintenant, allez-y et faites ça pour ces deux autres. Donc, vous vous habituez à utiliser plusieurs actions et interactions dans, en fait, parce que c'est ainsi que vous allez réaliser toute votre riche interactivité avec vos prototypes riches . 14. Utiliser des styles d'interaction: dans cette leçon, nous allons en apprendre davantage sur ce qu'on appelle l'interaction. Styles d'interaction. Les styles sont similaires aux interactions, mais ils sont également légèrement différents. Essentiellement, ce qu'ils sont sont un ensemble de paramètres de formatage qui sont affectés dans l'objet dans l' interface utilisateur de votre prototype lorsque certaines actions se produisent. Jetons donc un coup d'oeil au Sénat un site pour un exemple. Donc, quand nous survolons ces choses, nous pouvons voir qu'elles deviennent roses. Ce serait un exemple de la souris sur le style d'interaction. Maintenant, il y a quatre autres qui vont arriver dans un peu qui supporte réellement. Voyons comment nous pouvons le faire en réalité. Donc, en fait, je vais juste naviguer à droite vers la liste de souhaits. On va faire ça pour la liste de souhaits, et ensuite vous pourrez faire le reste tout seul. Donc, il y a un certain nombre de façons d'accéder aux styles d'interaction en réel, mais celui qui est le plus facile pour moi de me souvenir est un clic droit ou un clic de contrôle sur l'objet que je veux appliquer le style d'interaction deux. Et puis je vais cliquer sur les effets de style. Et puis cette fenêtre viendra ici. Maintenant, vous pouvez voir ici les quatre autres styles d'interaction souris sur celui sur lequel nous allons nous concentrer aujourd'hui. Certains de ces autres que nous discuterons dans une autre classe plus avancée. Donc l'une des choses que nous voulions faire est que nous voulons rendre le rose funt. Je vais vérifier la couleur de la police parce que ça veut dire que ça va changer. La couleur de la police fait partie de cette interaction et cela semble être assez proche pour moi. Alors je vais frapper OK, et on va retourner au prototype régénérer. Et si on survole ça, on y va. Mais si on veut que ça marche comme ça là où ça rend le cœur rose, on va devoir faire un peu plus de travail. Donc, pour revenir à l'acteur, la première chose que nous devons faire est d'ajouter un style d'interaction à cette chose. Donc l'icône elle-même, Donc je vais cliquer droit frapper effets de style. Et pour un Nikon, vous penseriez que ce serait la ligne, mais en fait c'est la couleur de remplissage que vous devez changer et je vais la changer pour ce coup rose. Retourne au prototype et actualise. Et on y va. Maintenant, ces deux choses devenaient roses. Le seul problème, c'est qu'ils ne deviennent pas roses ensemble. Je vais vous montrer comment aborder ça. Revenons à la réalité ici, et nous pouvons voir que ces choses sont en fait un groupe. Hum, et ce que nous pouvons faire c'est que nous pouvons réellement sélectionner le groupe, puis faire un clic droit et choisir cette option appelée effets de style de souris feu. Ce que cela fera, c'est qu'il enverra toutes les interactions de la souris directement à tous les objets du groupe en même temps. Donc si je clique dessus et que nous retournons au prototype et actualisons et que je passe sur la liste de souhaits, nous y allons. Je peux voir n'importe quel endroit du groupe, et tout devient rose maintenant avec le reste de ce que vous devez faire pour finir. Ceci est pour le reste de ces options de navigation ici. Maintenant, si ça vous semble fastidieux, vous avez exactement raison. C' est très fastidieux. Je vais vous montrer un conseil rapide que vous pouvez dio Donc si vous avez quelque chose qui a des styles d' interaction sélectionnés et que vous le copiez, je vais appuyer sur commande, voir notre contrôle. Voir, Ce que je peux faire est que je peux réellement sélectionner un autre objet et faire un clic droit dessus ou contrôler. Cliquez dessus fait avoir à zoomer ici un peu et aller de l'avant et aller Teoh coller spécial . Et puis, euh, je vais coller du style et allons de l'avant et rafraîchir le prototype parce qu'il semble que rien ne s'est passé. Mais maintenant, si je vais par ici, on y va. Vous pouvez donc copier et coller des styles d'interaction, attente de la prochaine leçon où nous commençons à parler de panneaux dynamiques. 15. Utiliser des panneaux dynamiques - Basiques: cela moins et nous allons apprendre les bases des panneaux dynamiques. Maintenant, ce qu'est un panneau dynamique, c'est une zone de votre âge prototype qui peut modifier le contenu manière dynamique. Permettez-moi de vous montrer un exemple de ce que cela ressemble sur le site Sunita. Donc, si nous faisons défiler jusqu'aux images du produit, si nous survolons cela, ce qui se passe, c'est que l'image en arrière-plan bascule. Maintenant, on va prototyper ça un acteur, tu sais , affaiblir , faire la , affaiblir, faire la superposition comme on l'a fait plus haut. Mais pour l'instant, nous allons juste nous concentrer sur le changement d'image du produit. Vous pouvez faire la superposition par vous-même parce que vous savez déjà comment faire ça. Donc, nous allons jeter un oeil à la façon dont nous ferions réellement cela. Un acteur. Je vais faire défiler ici jusqu'aux images de produits que nous avons et ah, je vais juste travailler avec celle-ci en particulier. Il existe donc un certain nombre de façons différentes d'intégrer un panneau dynamique dans votre prototype. L' un est de le faire glisser de la bibliothèque, mais je ne le fais presque jamais. Je ne trouve tout simplement pas ce qui est super utile, parce que lorsque je crée un cadre métallique, ce que je fais c'est que je pose habituellement le contenu en premier. Donc il y a cette belle petite chose que je peux dio où je peux sélectionner du contenu. Dans ce cas, je vais aller ici à la description pour m'assurer que j'ai tout sélectionné que j'ai besoin d'avoir sélectionné. Vous devez regarder les produits. Ok, donc nous voilà, son produit, BG Image 1. Ce sera là, ah, ah, où mon panneau dynamique existe maintenant. Un panneau dynamique en soi n'est absolument rien. C' est juste une limite afin de le faire ressembler à quelque chose dont vous avez besoin pour créer des états et attribuer du contenu à ces états. Et c'est le changement de ces états qui donne le comportement que nous venons de voir sur le site Sunita. Donc, la façon dont je préfère créer un panneau dynamique est de droite, cliquer ou de contrôler. Cliquez sur le contenu sélectionné, euh, et appuyez sur Créer un panneau dynamique est ce que cela va faire est qu'il va créer un panneau dynamique avec un état, et cet état a sur tout ce que j'ai sélectionné. Alors j'ai frappé. Créer panneau dynamique et vous pouvez voir ici nous avons un nom générique. C' est son état de panneau dynamique, puis le contenu que j'avais sélectionné. Donc, la toute première chose que je vais faire est, bien sûr, de renommer cette image de produit donc un. Et je vais aussi renommer l'État parce que c'est quelque chose qui est aussi très important. Je vais appeler cette valeur par défaut m'aide à garder une trace de ce qui est censé être où, accord. Et maintenant, vous remarquerez qu'il y a cette zone bleue par ici. Maintenant, c'est très nouveau en action. Neuf. Une nouvelle façon de gérer les panneaux dynamiques. Acteur a eu des panneaux dynamiques depuis un certain temps, mais ils ont vraiment remanié la façon dont vous travaillez avec, um Donc, par défaut, cela ressemblera probablement à ceci. Hum, donc vous verrez toujours tout le contenu autour de vous là-dessus pourrait être un peu déroutant parce que, vous savez, vous pensez que vous travaillez avec le contenu, mais en fait, vous ne l'êtes pas. C' est pourquoi j'aime cette fonctionnalité isolée qui est également connu un acteur neuf. Donc, je peux juste regarder le contenu que je veux créer. Maintenant, il y a un certain nombre de façons différentes de créer différents états parce que nous allons devoir le faire pour pouvoir basculer entre eux. Je peux venir ici et frapper ajouter l'état parce que ce petit vous je vais me permettre de naviguer entre les états à nouveau. C' est nouveau dans neuf, euh, ou je peux aller ici à droite ou contrôler cliquer sur un état ou le panneau dynamique lui-même et appuyer sur Ajouter état. Mais ce que je vais faire, c'est que je vais dupliquer cet état parce que l'état suivant aura exactement le même type de contenu, une image, et ce sera exactement les mêmes dimensions. Donc je vais appeler cette souris d'état là-bas. On continue, je l'ai isolé. Je peux voir que je suis dans l'état de la souris, donc je vais juste double-cliquer sur cette image parce que je veux la remplacer par une nouvelle image à laquelle je vais frapper le produit. Bon, donc voici mon état, ma souris sur l'état. Et voici mon état par défaut le plus sur l'état. Très bien, fermons ça. Et maintenant, nous revenons à la page de cadre de fil elle-même au lieu d'un état de panneau dynamique. Et allons à notre prototype ici et rafraîchissons ceci et voyons à quoi ça ressemble. Maintenant, vous remarquez que rien ne se passe. Et la raison pour laquelle rien ne se passe est que nous devons spécifier une action particulière appelée état du panneau défini afin de faire le panneau dynamique se comporter comme ceci. Alors allons voir comment faire cela en action. Ok, donc je vais sélectionner le panneau dynamique et, ah, ah, comme avec n'importe quel autre objet en fait, vous pouvez avoir des interactions associées à ce type d'objet. Donc, ce que nous voulons faire, c'est quand la souris s'allume, nous voulons qu'elle passe de la souris dentée à l'état. Et quand il s'éteint, nous voulions revenir à l'état par défaut. Donc on va frapper une nouvelle interaction et ensuite aller voir notre vieil ami sur la souris. Et c'est là que les choses deviennent nouvelles parce que nous allons utiliser ce nouveau type d'action appelé état du panneau défini. Et ce que nous allons faire, c'est que nous pouvons choisir un panneau dynamique particulier. Ainsi, par exemple, si j'avais plusieurs panneaux dynamiques, je pourrais changer l'état d'un autre panneau dynamique. Mais je vais rester simple et dire ce widget parce que c'est toujours auto-référentiel. Et sur l'entrée de la souris, je veux qu'elle reste, pour changer, pour passer la souris. Donc, je sélectionne cet état ici. Je ne veux pas faire d'animation, bien qu'il y ait toutes sortes de trucs amusants que vous pouvez faire là-bas va frapper. Ok, Et puis, bien sûr, je dois ajouter l'interaction correspondante sur la souris. Encore une fois, définissez l'état du panneau sur ce widget à l'état par défaut. C' est ce que je veux. Et encore une fois, pas d'animation. OK, et maintenant vérifions à nouveau notre prototype. Rafraîchissez et faites la souris et on y va. C' est ce que nous attendons. Ce sont donc les bases de travailler avec des panneaux dynamiques et des acteurs. Dans la prochaine leçon, nous examinerons quelques-unes des propriétés et interactions les plus uniques associées aux panneauxdynamiques panneaux 16. Utiliser des panneaux dynamiques - Intermédiaires: dans cette leçon apprendra quelques propriétés supplémentaires qui sont uniques aux panneaux dynamiques . Laisse-moi passer sur le site Sunita et te montrer de quoi je parle. Alors faites attention à ces deux barres ici, donc la partie supérieure disparaît, puis la partie inférieure apparaît à nouveau et colle au haut de la fenêtre après que vous faites défiler vers le bas jusqu'à un certain point maintenant, obtenir les choses à coller n'importe où dans la fenêtre. C' est quelque chose qui est très facile à faire avec les panneaux dynamiques. Lorsque, alors que vous pouvez faire cette interaction où elle n'apparaît qu'après avoir fait défiler jusqu'à un certain point, elle nécessite des techniques plus avancées. Je vais te montrer ce qu'on va faire à la place. Donc, si on regarde ces deux-là, en haut de la nôtre, on va juste les coller au haut de la fenêtre et les garder là pour tout avec de l'écureuil. Donc la façon dont nous faisons cela est d'entrer dans l'acteur. Ah, comme je l'ai dit sur Lee, panneaux dynamiques ont cette propriété de rester quelque part sur la fenêtre pendant que vous faites défiler. Donc ce que je vais faire, c'est que je vais les créer. Les NAB sont sur la barre supérieure en tant que panneaux dynamiques. Donc, je vais à droite, cliquez ou contrôler, cliquez dessus, créez un panneau dynamique, puis nommez-le. Panneau de barre supérieure. J' aime bien Teoh. que mes panneaux ont réellement le panneau de nom dedans ? Cela m'aide juste à garder une trace des choses pendant que je suis en train de prototyper. Donc, je vais faire la même chose ici, sauf que je vais l'appeler nab notre panel. Et maintenant, pour le faire rester en haut, ce que nous devons faire est de cliquer sur ce lien ici. Maintenant, c'est une section que les panneaux dynamiques Onley auront. Il vous permet de contrôler le défilement ainsi que quelques autres propriétés. Mais celui dont nous allons parler en ce moment est épinglé au navigateur. Donc épingler est comment vous faites les choses collantes. Donc, pour ce faire, vous cliquez sur le navigateur Pinto, cochez cette case et parce que nous voulons que cela soit au centre de l'écran, nous allons organiser cela au centre et nous voulons qu'il soit épinglé en haut et nous veulent le garder à l'avant. Donc on va frapper, OK, et maintenant ça ne va pas avoir de changement pour nous ici dans le vrai pourquoi ? Mais quand nous allons en faire un aperçu, ce que nous allons voir, c'est que cela semble un peu différent. Donc celui-là est coincé là-haut au sommet. Et nous allons le faire avec celui-ci aussi. Donc, cliquez sur cette broche pour épingler le navigateur à la fenêtre du navigateur et appuyez à nouveau sur le centre. Maintenant, vous remarquerez qu'il y a une marge. marge signifie simplement qu'il s'agit essentiellement de 40 pixels vers le bas du haut de la page. Je vais frapper ça et ensuite aller me rafraîchir. Et on y va. C' est ce qu'on cherche. C' est donc tout ce que vous devez faire pour coller les choses en haut de la fenêtre. Je veux vous montrer d'autres propriétés intéressantes des panneaux dynamiques. Donc, l'une des choses que vous pouvez faire est que vous pouvez réellement affecter ah couleur d'arrière-plan à un panneau dynamique. Euh, et pourquoi c'est intéressant, c'est parce que vous pouvez faire un panneau dynamique 100% avec large dans n'importe quelle fenêtre du navigateur. Donc ce que je vais faire ici, c'est aller à la couleur et je vais taper d sept d sept parce que je sais que c'est la valeur hexadécimale de l'arrière-plan de cette barre particulière. Et ce que vous allez voir, c'est que vous ne verrez rien ici en ce moment. Mais quand je vais au, euh le navigateur et me rafraîchir et si je le rétrécit un peu pour que vous puissiez voir comment tout reste au milieu là et puis celui-ci, euh, s'étend tout le chemin. Maintenant, c'est un modèle très commun que Ah, vous voyez beaucoup dans les sites Web modernes. Donc c'est un bon moyen, Teoh, de recréer ça un acteur. Maintenant, l'autre chose intéressante à propos des panneaux dynamiques est qu'ils ont des interactions uniques associées à, um donc j'ai sélectionné sur ce panneau, et si je frappe une nouvelle interaction, vous verrez un tas de choses que vous normalement ne voient pas comme sur le changement d'état du panneau. Ainsi, lorsqu'un panneau dynamique change pour afficher un contenu différent ou un état différent, vous pouvez faire des choses. Lorsque cela se produit, vous pouvez réellement utiliser des panneaux dynamiques pour effectuer des interactions de chute de dragon. Et si vous prototypez des expériences mobiles natives, vous pouvez utiliser des panneaux dynamiques pour effectuer des interactions de type balayage. Hum, et vous pouvez également faire des interactions de défilement lorsque vous faites défiler dans le panneau dynamique . Normalement, vous ne pouvez le faire que lorsque vous faites défiler sur la page, et c'est ce que je dois vous montrer sur certaines propriétés spéciales supplémentaires et interactions associées aux panneaux dynamiques. J' espère arriver à un tutoriel de panneau plus avancé, dynamique à l'avenir parce qu'il y a beaucoup de choses vraiment intéressantes que vous pouvez faire avec ces widgets. 17. Introduction aux maîtres: Les maîtres sont l'une des fonctionnalités et de l'action les plus puissantes. Ils vous permettent de réutiliser le contenu et les fonctionnalités de votre prototype tout en le conservant à un seul endroit. Maintenant, dans la version neuf, ils ont fait cela encore mieux en ajoutant des remplacements de style d'esquisse. Cela signifie que je peux créer un composant complexe, utiliser sur mon prototype, changer le contenu de chaque instance de ce composant, puis maintenir les interactions et la mise en page de base en un seul endroit. C' est super génial. Allons de l'avant et commençons à apprendre sur les maîtres. 18. Créer des mâts: dans cette leçon, nous allons apprendre à travailler avec des maîtres, qui sont des objets dans lesquels nous permettent de réutiliser le style, contenu et les fonctionnalités. Tout au long du prototype, vous pouvez trouver des maîtres ici à côté de vos bibliothèques. Par défaut. Il sera vide car vous devez en fait créer un maître d'abord. Donc je vais appeler ce maître de test et vous remarquerez que rien ne s'est passé ici ce qui est très bien parce qu'un maître est en lui-même, , son propre cadre métallique. Donc, ce que vous devez faire est d'assigner des choses au maître. Je mettrai cette boîte ici, et je mettrai une image dans la boîte qui a l'air bien sur nous. Et quand je reviendrai à la maison, rien n'a changé. Si je passe aux maîtres ici, je peux faire glisser cet objet. C' est en fait un objet composé à ce point de la page. Maintenant, il y a plusieurs instances de celui-ci. La chose cool à propos des maîtres, cependant, est que si je change quelque chose sur le maître comme um, ajouter ah, titre, ajouter du texte ici et revenir à la page d'accueil que les changements effectués automatiquement toutes les instances du maître. Alors regardons un exemple réel où nous utiliserions cela parce que ce que nous venons de décrire est quelque chose qui n'est pas comme je travaillerais normalement. Normalement. Ce que j'aime faire est de remorquer le cadre de fil en place, puis à droite, cliquez ou contrôler, cliquez et appuyez sur. Créer un maître. Cela fonctionne comme la création de panneaux dynamiques. De cette façon. Je vais appeler cette liste de produits, accord ? Et maintenant j'ai ce maître, donc il y a beaucoup de donc il y a beaucoup de fonctionnalités et d'interactivité qui se produisent ici. Mais maintenant, je pouvais manger, copier ça tout au long de ces choses et ne pas avoir à refaire ça. Mais une des choses intéressantes, cependant, cependant c'est que, euh, pour des produits comme celui-ci, vous voudriez avoir un contenu différent. Et bien que nous ayons ce maître de liste de produits ici, l' une des choses qui est nouveau dans la version neuf est cette idée de surremplacements. Cela ressemble beaucoup aux remplacements de symboles et à l'esquisse si vous êtes un utilisateur d'esquisse, mais vous pouvez modifier ce contenu. Eso, par exemple, permettez-moi réellement de supprimer ceci et de créer une autre instance de la liste du produit car lorsque vous effectuez ces remplacements, vous ne modifiez pas le contenu du maître. Vous n'avez modifié que votre seule modification du contenu de l'instance du maître. Donc ici, sur la liste de produits 1, c'est en fait, euh, quelque chose comme ça. Alors je vais appeler. Je vais changer le prix aussi. 1 99 et appelez le produit produit un. Et maintenant vous pouvez voir ces changements réfléchir ici je peux même si je veux choisir les images. Donc l'image par défaut que je vais aller pour Ah, disons que je vais aller pour des images en couleur cette fois. Et puis la souris sur l'image. Je vais faire cette image. Et maintenant, quand nous allons au prototype et nous nous régénérons, vous pouvez voir ici, il conserve toujours toutes les interactions. Ils sont tous les deux pareils. Ils bougent toujours de la même façon. Maintenant, vous vous demandez probablement, OK, eh bien, quelle est l'utilité de ça si je peux changer tout ce contenu ? L' utilisation est si vous voulez changer quelque chose au sujet de cette interaction. Donc, par exemple, je vais entrer ici, et l'interaction dit qu'elle va montrer la superposition un 2 250 millisecondes. Donc, augmentons ça à 500. La même chose avec la peau. Et maintenant, quand nous allons ici et rafraîchir à nouveau le prototype, vous remarquerez que ces deux fonctionnent. De même, il a tous les deux le même fondu. Et c'est l'avantage. Parce que si vous voulez changer la nature d'une interaction pour un maître comme celui-ci, si vous remplacez le contenu, alors vous n'avez vraiment qu'à le modifier à un seul endroit. Personnellement, je pense que c'est, ah, nouvel ajout fantastique à après neuf ans. Maintenant, je vous encourage à aller de l'avant et à faire cela pour toutes ces choses. N' hésitez pas à y ajouter les images que vous voulez. 19. Comportements maîtres: cette leçon a appris quelques types de comportements différents que les maîtres peuvent montrer lorsque vous les laissez tomber sur la page. Nous parlerons aussi un peu de planification et de stratégie quand il s'agit de construire votre prototype, car l'utilisation de maîtres peut soit accélérer les choses, soit potentiellement ralentir les choses. Donc, ce que nous avons vu jusqu'à présent est juste un maître que vous avez affecté à une page et il va là où vous l'avez mis. Et quand vous modifiez quelque chose dans ce maître qui change les mises à jour et d'autres maîtres, sauf si , bien sûr, il a été remplacé. Mais si vous faites un clic droit sur ces maîtres dans la liste, vous arriverez à quelque chose qui dit Drop comportement, le comportement par défaut. Ce que nous venons de décrire est un endroit où que ce soit Il y a deux autres comportements verrouillent l'emplacement principal, ce qui est intéressant. Vous pouvez voir les changements d'icône ici. Maintenant, si nous allons dans le maître de la liste des produits lui-même, son emplacement est 00 Donc ce qui va se passer, c'est quand je traînerai ce maître ici, je vais en quelque sorte le mettre juste ici. Mais ça ne va pas y aller. Ça va éclater jusqu'à 00 maintenant Ce n'est plus un que j'utilise beaucoup parce que nous avons des panneaux dynamiques que nous pouvons épingler en haut de la page. Normalement, je l'utilise beaucoup pour, hum pour la navigation. Maintenant, il y a un autre comportement à appeler échappée sur. Ce que cela fait, c'est que c'est ah, maître qui n'est pas nécessairement lié à notre instance plutôt une instance du maître qui n'est pas liée au maître lui-même. Donc je peux, vous savez, entrer ici et supprimer des choses individuellement, etcetera , etc. Hum, mais encore une fois, ce n'est pas celui que je me vois utiliser beaucoup plus. En raison des remplacements de maître, je peux accomplir la même chose d'une manière beaucoup plus efficace avec ces remplacements. Quand j'ai commencé à prototyper avec acteur, j'allais tout droit dans l'outil et commençais le prototypage. Et puis à mi-chemin, je trouverais un moyen plus efficace de faire quelque chose, et ensuite je retournerais le faire de façon efficace, et ensuite je finirais par prendre beaucoup plus de temps. Donc, ce que je recommande maintenant aux gens, c'est que vous ne pensez pas qu'un acteur pense dans un carnet de croquis, dessine des choses, réfléchisse à tout, puis représente votre design. Et en fait, quand le temps est prêt, puis réfléchissez à ce qui va être un maître, réfléchissez à ce qui va être un panneau dynamique. Réfléchissez à la façon dont les choses vont interagir et cela vous aidera à être beaucoup plus efficace quand vous venez au prototypage. Un acteur acteur est un programme très compliqué et de financement à utiliser, donc si vous n'y allez pas, planifiez Feli vous pouvez descendre quelques trous assez profonds pour lapin. 20. Introduction aux vues to: Les technologies réactives existent depuis un certain temps. sites Web de Native Mobile APS s'étendent et s'adaptent à tous les appareils qui y accèdent. Malheureusement, peu d'outils de conception facilitent l'utilisation de cadres ou de systèmes prototypes comme ça. En fait, cependant, est-ce que c'est une utilisation adaptative. Grâce à cette fonctionnalité, il est assez facile de prototyper un système réactif maintenant, bien que les vues adaptatives soient des tailles de port de vue fixes et ne soient pas vraiment réactives, cela est généralement suffisant pour les tests de convivialité ou pour communiquer avec les parties prenantes comme les gestionnaires de produits et les ingénieurs ou toute autre personne, ainsi que l'inversion neuf. Ceux-ci sont devenus encore plus utiles avec l'ajout de la fonction adaptative que vous définissez. Ce que ça fait, c'est. Je peux maintenant avoir différentes tailles de port de vue pour différentes pages, ce qui augmente considérablement la flexibilité de mon prototype. Alors allons de l'avant et de comprendre comment utiliser l'utilisation adaptative et l'acteur 21. Configurer des vues adaptatives: dans cette leçon, nous allons apprendre comment configurer acteur pour accueillir le prototypage pour les systèmes réactifs alors qu' en fait, nous ne pouvons pas prototyper la réponse complète de lui-même. Il peut se rapprocher de quelque chose qu'on appelle adaptatif. Utilisez la façon la plus simple de configurer des utilisations adaptatives pour aller de l'avant et cliquez quelque part en dehors de votre cadre métallique et cliquez sur ce panneau de style ici à droite. Et puis il y aura quelque chose ici qui dit, Ajouter une utilisation adaptative. Allez-y et cliquez dessus. Maintenant, ce dialogue va apparaître et il vous montrera une vue de base. C' est la vue qui est aussi large que votre cadre métallique est actuellement, euh, donc je vais vraiment nommer cette vue. Appelez ça grand écran juste pour m'aider à comprendre ce qui est quoi. Et ce que je vais faire, c'est que je vais créer des vues supplémentaires pour s'adapter aux situations dans lesquelles le port de vue est inférieur à 14 40 pixels. Donc, je vais en ajouter un autre, et je vais utiliser cette fonction prédéfinie pratique, qui est super lisse, et je vais frapper tablette paysage, puis un de plus pour tablette portrait. Maintenant, ce qui se passe ici, c'est que ces vues s'afficheront à différents moments de sorte que le grand affichage sera affiché à tout moment. Le port d'affichage est de 14 40 pixels ou plus large La tablette Paysage sera affichée à tout moment. Le port View est de 10 entre 10 24 et 14 40 pixels, puis la tablette portrait s' affiche lorsque le port View est compris entre 7 68 et 10 24. Mais aussi puisque c'est la vue la plus basse toute plus petite avec aussi. Donc quand je frapperai OK, ce que vous verrez arriver ici, c'est que ces vues apparaissent en quelque sorte au-dessus du cadre métallique. Je vais dévérifier ça. On en parlera dans la prochaine leçon. Mais ce que cela nous permet de faire, c'est d'affecter des choses différentes à différents cadres d'usure . Maintenant, il est difficile de dire que quoi que ce soit s'est passé en ce moment. Mais si nous faisons défiler tout le chemin vers le bas et nous voyons une sorte de la largeur de la page, si je clique sur tablette paysage et portrait, vous pouvez voir que ceux-ci que la taille de la page est essentiellement beaucoup plus petite. Et dans la prochaine leçon, nous allons apprendre sur la façon de porter cadre dans cette situation. Ah, une des choses qui sont nouvelles en action. Neuf. Est-ce que cette idée d'adaptatif que vous définissez dans les versions précédentes, la seule façon dont vous pouviez accomplir l'utilisation adaptative était large du prototype, donc chaque page aurait la même utilisation adaptative. Maintenant, si je double-clique sur la boutique ici, vous remarquerez qu'il n'y a pas d'utilisation adaptative configurée. Hum, vous penserez probablement que ça va vous inquiéter, est-ce que je dois les mettre en place pour chaque page ? Et oui et non, euh, vous devez les installer, mais c'est assez facile. si vous avez créé un ensemble adaptatif de vues adaptatives sur une page, si vous cliquez sur Ajouter des vues adaptatives sur une page qui n'en possède pas, vous pouvez sélectionner l'un des ensembles que vous avez déjà créés. Donc je vais le faire maintenant, et on peut voir que c'est exactement la même chose qu'avant. Et nous pouvons voir les choses de plus en plus petites, comme sur la page d'accueil. Dans la prochaine leçon, nous allons parler de la façon de porter réellement cadre dans cette situation, attendant avec impatience 22. C'est un cadre adapté: Maintenant que nous avons notre adaptatif que vous avez mis en place, nous pouvons aller de l'avant et nous assurer que notre cadre métallique ressemble bien à toutes les tailles de rapport différentes . Et avant de commencer, assurez-vous de décocher affecter toutes les vues. Nous allons parler de ce que cela fait et un peu ainsi parce que le cadre de fil adaptatif peut prendre un peu de temps. Je ne vais me concentrer que sur un objet ici. Donc ah, c'est cette image de héros ici. Donc en ce moment sur grand écran, il semble juste comme dans le passé. Maintenant, si je clique sur tablette paysage, il ressemble toujours le même. Mais je vais changer sa taille ici. Donc, si je fais cela avec de la page et puis je retourne à un grand affichage, vous voyez les choses d'affichage grand restent inchangées. Mais sur la tablette portrait, ce changement a filtré vers le bas. C' est l'héritage dont nous parlions dans la leçon précédente. Nous avons donc maintenant ces trois tailles pour ces trois ports de vue. Jetons un coup d'oeil à ce que cela ressemble dans le navigateur. Donc, si je fais défiler ici, , on peut voir que l'image est large dans tout ça. Et non, parce que c'est à 14 40, c'est la taille de mon moniteur. Ça va éclater immédiatement. Donc, c'est la vue de la tablette paysage et bientôt sera dans la vue de la tablette portrait. Nous y allons et vous pouvez voir comment tout le reste reste reste le même. Et c'est essentiellement comme cela fonctionne le cadrage conscient, euh, dans ces différentes vues. Maintenant, il y a quelques autres choses intéressantes. La première est que si nous sommes dans une vue inférieure, normalement, euh, les choses que nous faisons ici n'affectent aucune de ces vues supérieures, et vous pouvez le dire parce que ces air sont super dehors. Mais si je frappe effet toutes les vues, ces choses deviennent vertes, et ce que je peux faire est d'ajouter quelque chose que je vais ajouter, tête un ici et puis quand je tabulation sur tablette paysage orteil et grand écran, qui est toujours là. C' est donc l'effet que toutes les vues font. J' ai tendance à ne pas utiliser ça parce que ça peut vraiment gâcher les choses si tu n'es pas vraiment sur le ballon. Maintenant, il y a une autre chose qui est intéressante à propos de l'adepte du prototypage par rapport au cadrage de fil , et par intéressant je veux dire vraiment plutôt ennuyeux. Euh, mais ça traite des interactions. Jetons donc un coup d'oeil à cette interaction que nous avions prototype plus tôt. Ah, et voyons si on peut le changer d'un point à l'autre. Ce masque fondu est donc à 250 millisecondes pour un grand affichage. Passons à la tablette paysage et changeons-la à 500. Que crois-tu qu'il va se passer ici ? Ah, tablette portrait. Oui, 500. C' est ce à quoi vous vous attendez. Cependant, dans un grand écran, il change également, sorte que vous ne pouvez pas réellement avoir des interactions différentes pour différents ports de vue. Personnellement, je pense que c'est une sorte de raté, mais c'est ce qu'on doit faire. Donc heureusement, il y a un moyen d'y faire face, et c'est avec ce merveilleux widget magique appelé le hot spot. Ah, hot spot est essentiellement une zone invisible sur la page sur laquelle vous pouvez appliquer des interactions . Je vais faire un raccourci ici et sélectionner cet objet parce que ce sont les interactions que je veux et je vais cliquer et contrôler Cliquez sur un clic plutôt Shift sur ce et, euh, copier ces avec commande, voir ou contrôle, tu vois ? Et puis je vais juste sélectionner le point chaud et appuyer sur la commande V pour coller ou contrôler V, et vous pouvez voir que ceux-ci apparaissent réellement juste là. Et je vais nommer ça. Je vais appeler ce déclencheur de tablette paysage. Et puis ce que je vais faire, c'est que je vais le déplacer au-dessus de ça, donc ça va réellement absorber les interactions et pas déclencher celles sur le fond. Et si je vais à la tablette, vous pouvez voir qu'elle est là aussi. Mais il n'est pas là en grand écran. Donc ici, ce que je vais faire, c'est que je peux réellement changer l'interaction ici sur ce sujet plutôt que d'avoir à le faire sur l'objet lui-même. Et quand je descends à la tablette portrait Ah, je vais, euh, faire la même chose. Mais je vais supprimer celui-ci. Um, vous verrez qu'il est toujours là dans la tablette paysage et en créer un autre et faire ce genre de chose similaire comme je l'ai fait la dernière fois, une copie de ces interactions et les coller. Mais cette fois, je vais en faire 1000. Donc essentiellement juste une seconde. D' accord, et ensuite je vais mettre ça là où étaient les autres, et je vais appeler ce déclencheur de tablette portrait. Ok, donc maintenant c'est 1000 sur la tablette portrait. C' est 500 millisecondes sur le paysage et le régulier à 50 sur le grand écran, et c'est à peu près comment nous devons gérer cela. Sachez l'autre chose que je veux vous montrer associée à ceci est ceci. Vous remarquerez qu'ils sont répertoriés en rouge, car cela signifie que ces air apparaissent sur la page mais qu'ils ne sont pas visibles dans cette vue. Donc, si je vais à tablette paysage, vous pouvez voir que lt Trigger est maintenant visible. Et pour la tablette portrait, PT Trek Trigger est maintenant visible. Maintenant, le rouge signifie quelque chose de très bizarre à dire. Cela signifie que cela n'a pas été joué est de la vue, ce qui signifie que ce n'est tout simplement pas dans la vue maintenant. Si je clique avec le bouton droit ou contrôle, cliquez dessus, je peux le replacer dans la vue, Um, et aussi, si j'ai un déclencheur P t, je peux supprimer quelque chose juste de cette vue par contrôle ou clic droit et en cliquant sur la dentelle UNP à partir de la vue. , Mais oui,c' est comme ça que vous gérez les interactions et que vous portez le cadrage pour les prototypes adaptatifs. Dans la prochaine leçon, nous allons parler de l'impact des maîtres sur cette version et de la version courte. C' est vraiment cool. 23. Maîtres adaptatifs: Ce ne sont pas seulement les pages qui peuvent avoir une utilisation adaptative. Les maîtres peuvent avoir une utilisation adaptative et combinée avec la possibilité de remplacer le contenu bâtard . Cela peut être un gain de temps vraiment puissant pour vous. Donc, faites défiler ici et jetez un oeil au maître que j'ai créé plus tôt. Donc, ce produit offre Master Ah, maintenant vous pouvez voir sur chacune de ces vues, c'est la même chose. Et si je double-clique sur cet orteil, ouvrez-le. Nous pouvons voir qu'il n'y a pas d'utilisation adaptative pour ce maître à nouveau car vues adaptatives sont associées à des pages et vous pouvez ajouter des ensembles comme vous le souhaitez. Donc, ce que je vais faire, c'est que je vais ajouter des vues de maître. Donc, les vues principales sont légèrement différentes de l'utilisation adaptative, et vous verrez, pourquoi est-ce que cette base ? Vous verrez qu'il n'a pas de mesure. Je vais appeler ce grand d'entre vous et ajouter une autre, hum, et juste appeler cette petite vue, et maintenant nous pouvons voir que nous avons ces points de vue différents ici. Donc, dans une petite vue, je vais en fait cliquer dessus et le rendre évidemment différent. Il y a une grande vue. Il y a une petite vue et maintenant revenons à notre page d'accueil. Et au fur et à mesure que nous examinons les différents points de vue ici, rien n'a changé. Um, mais faisons-le sur la vue de la tablette paysage. Je vais sélectionner une de ces instances et vous pouvez voir qu'il y a ce champ supplémentaire ici par les remplacements. C' est là que je peux choisir lequel de vous du maître que je veux. Et ainsi de suite, je vais avoir ces deux vues en même temps. Et sur celui-ci, je vais avoir les deux en petite vue et nous pouvons voir comment cela se passe dans le prototype. Alors rafraîchissons ça et venons ici. Et donc c'est normal ici. Et puis ça changera quand j'irai dans cette vue. Donc on y va, et puis un de plus. Et maintenant on peut les voir tous les deux là maintenant, puisque le cadrage d'usure adaptatif peut être assez finicky, il y a beaucoup de choses à dio um, je veux vous encourager à regarder le fichier d'exercices terminé parce que je suis allé et fait tous les points de vue à cet égard. Maintenant, j'ai suivi mes propres conseils et seulement assez de prototype pour faire passer mon point de vue, ce qui est le plus important ici. Maintenant, l'une des choses qu'ils veulent vous montrer est ce maître particulier, parce que ce qui se passe ici, c'est que chacun de ces maîtres est remplacé par du contenu, mais c'est exactement le même maître. Donc, si je vais ici à la catégorie, nous pouvons voir qu'il y a la vue de la tablette paysage, la vue de la tablette portrait et ce que j'ai aussi fait, c'est là que vous aviez cette configuration pour utiliser cette action de déplacement que vous utilisiez déplacer plutôt que de déplacer par. J' ai changé cela pour passer et je n'ai pas eu besoin de changer l'interaction entre grand écran sur la tablette paysage. Mais pour la tablette portrait, j'avais toujours besoin d'orteils. Ajoutez le point chaud là avec une interaction différente parce que je me déplaçais par un nombre différent de pixels. Pour tirer le meilleur parti de cette classe, allez-y et encadrez complètement toute l'utilisation adaptative de ce système. Non, nous n'avons pas beaucoup fait ça en classe, mais c'est parce que ça peut prendre beaucoup de temps. Mais vous apprendrez beaucoup si vous faites cela et assurez-vous de vérifier le fichier d'exercices terminé. Si vous êtes coincé, il y a beaucoup de bonnes choses là-dedans, alors nous allons parler de documentation et j'ai hâte de le voir. 24. Introduction à la documentation: il n'est pas efficace de prototyper. Toutes les dernières choses que vous voulez que votre système fasse. Et c'est là que la fonctionnalité de documentation des acteurs vient dans des choses comme les notes de page et les notes de widget. J' ai utilisé ces choses deux pour communiquer des choses auxquelles ça n'a pas de sens. Prototype messages aériens sont un très bon exemple est grand pour prototyper un exemple d' erreur. De cette façon, les gens conçoivent le comportement du message où le message apparaît et l'animation qui y est associée. Mais il n'est pas logique de prototyper chaque dernière condition d'air et message qui lui sont associés. Donc, ce que je fais est que je documente ces choses à la place dans une note qui rend beaucoup plus efficace travailler avec Actor maintenant dans la version neuf, pas beaucoup de choses ont changé à propos de la documentation est à de nouvelles choses. L' un d'entre eux est que vous pouvez maintenant déplacer une note d'un widget à un autre widget. Vous pouvez également avoir plusieurs notes sur un seul widget. Mais ce qui est vraiment différent, c'est comment la part réelle a évolué. Il est maintenant appelé cloud réel, et c'est une plate-forme de collaboration très imaginative comme. Alors allons de l'avant et commençons à documenter des choses et en fait 25. Documenter les pages et les widgets: dans cette leçon, nous allons apprendre comment utiliser la fonctionnalité de documentation des acteurs pour communiquer plus d'informations sur votre prototype, comment il est censé se comporter ou quoi que ce soit d'autre à vos collaborateurs, comme le produit les gestionnaires, les ingénieurs ou tout autre type d'intervenant. Alors allons-y et commençons. Maintenant, quand nous faisons de la documentation et de l'acteur, il y a essentiellement des niveaux que nous pouvons le faire au niveau du cadre métallique, ce qui est l'endroit où nous communiquons des informations sur ah pages Ah, trou et ensuite à l'individu où nous communiquons des informations sur des widgets individuels. Donc, si nous voulons communiquer des informations sur la page de l'ensemble, il suffit d'aller de l'avant et de cliquer en dehors de l'un des widgets, puis aller de l'avant et cliquez ici inaperçu et vous verrez le nom de la page. Et puis cette chose ici qui dit aperçu de la page. C' est en fait là que vous pouvez taper vos notes, donc je vais juste taper I. Je suis une note de page, et puis quand nous allons au prototype généré ici, actualisez ceci. Si nous ne serons pas en mesure de voir les notes à moins de cliquer sur cette icône ici, cela montre la documentation. Ainsi, vous voyez le nom de la page ainsi que la note elle-même. C' est donc là que je communiquerais des informations sur les conditions dans lesquelles cette page apparaît. Ah, des comportements spéciaux et des situations spéciales, ce genre de choses. Alors allons de l'avant et regardons à documenter les widgets. Je vais en fait descendre ici et, ah, ah, normalement ce que vous feriez quand vous documentez un widget, c'est que vous cliqueriez sur le widget, puis cliquez sur les notes. Maintenant, vous remarquerez qu'il n'y a rien ici. C' est quelque chose dont je ne suis pas super heureux parce qu'un acteur neuf au moins vous ne pouvez pas vraiment documenter un groupe. Donc, je dois en fait cliquer sur, ah, un objet pour pouvoir mettre des notes à ce sujet. Donc, dans ce cas, je vais juste mettre cette note sur l'image de fond de catégorie 2. Euh, donc vous pouvez voir ici où il est dit note, je vais Teoh, entrer des informations, je suis un mot, et vous verrez ici que dès que vous créerez une note, euh, un autre apparaît. Et aussi, lorsque vous créez cette première note, cette petite balise apparaît ici et vous pouvez également créer plusieurs notes par objet, ce qui est vraiment cool. Je suis une autre note, et si vous avez du contenu associé à un widget ou toute sorte d'interactions, vous pouvez cliquer sur cette ah, icône de pièce jointe, et vous pouvez inclure les deux. Dans ce cas, il n'y a pas de texte ou d'interaction associé à cela, mais s'il y en avait, il le tiendrait. Et la raison pour laquelle vous voudriez le faire est que si vous utilisez ce prototype pour communiquer aux ingénieurs, est parfois difficile de saisir du texte d'un prototype afin que les ingénieurs puissent alors simplement le sortir de votre note. Voyons donc à quoi cela ressemble sur le prototype et actualisons. Cliquez sur mes notes ici et ici. Ma note de page est là, et mes notes individuelles sont là sur vous. Je vois très clairement ce que la note individuelle est sur, et je peux cliquer dessus. Ça va juste en bas. Donc, c'est en fait et si je clique sur le nombre réel que je reçois la note ici, donc fondamentalement, il est vraiment, vraiment difficile de manquer les notes Maintenant. Vous pouvez également faire ce type de documentation dans les maîtres. Je trouve cela super utile lors de la communication sur le comportement d'objets comme celui-ci . Au cours de la prochaine leçon, nous allons parler un peu de la publication de votre prototype dans le cloud réel, ce qui vous permettra de vraiment démarrer cette collaboration. 26. Édition dans Axure Partagez: pour tirer le meilleur parti de l'acteur en tant qu'outil de collaboration, vous avez vraiment besoin de publier vos prototypes sur le Cloud actuel. Si vous voulez le faire, la première chose que vous devez faire est d'aller dans le nuage de points d'acteur et de créer un nouveau compte. J' ai déjà des comptes, donc je vais aller de l'avant et ah, connecter ici. Hum, donc c'est tout mes trucs d'acteur, mais ce n'est pas important pour le moment. Ce qui est important, c'est de revenir à réel et de s'assurer que vous êtes connecté par ici. Donc, si vous allez sur votre compte et appuyez sur, connectez-vous à votre compte réel, entrez simplement les identifiants Crittenden que vous venez de créer pour votre compte cloud réel, et vous devriez être prêt à partir, mec. Ensuite, une fois que vous avez fait cela, vous pouvez appuyer sur ce bouton de partage. Maintenant, quand je frapperai ça, ça va avoir l'air un peu différent parce que j'ai vraiment besoin de publier ça pour une nouvelle année, Earl, euh, parce que j'ai créé et supprimé ce prototype un certain nombre de fois. Donc, quand je le ferai, c'est ce qu'il vous cherchera par défaut. Je vais en fait choisir un endroit orteil différent mettre ceci parce que j'ai beaucoup de dossiers dans mon compte cloud réel. Je peux protéger un mot de passe si je ne le veux pas, mais je ne veux pas le faire maintenant. Euh, c'est important. Assurez-vous que vous avez activé les commentaires. Sinon, d'autres personnes ne seront pas en mesure de commenter votre prototype. Donc, je vais frapper Publish sur cela prend un peu de temps, même avec un prototype relativement petit comme celui-ci. Donc, je vais juste frapper lentement Copy you are l Et pas pressé étonnant revenir ici à mon navigateur, obtenir dedans et étaient là. Laisse-moi aller à la page d'accueil de Sunita. Bon, donc ce que nous cherchons pour faire des commentaires sur le partage d'acteur, c'est que vous utilisez cette petite note ici. Euh, pour la plupart, ce que tu veux faire, c'est frapper. Ajouter un commentaire à l'écran. Maintenant, l'important est que vous devez faire défiler jusqu'à l'endroit où vous voulez ajouter le commentaire. Parce qu'une fois que vous cliquez dessus, vous ne pourrez plus faire défiler. Donc, je vais ajouter un commentaire ici quand je clique dessus. Il est numéroté. Et ça me dit qui je suis pour qu'il saisisse mon nom. Ah, voici ma comète. Alors je vais poster ça, et je peux continuer à le faire. Hum, mais je dois frapper Exit pour m'en sortir. Donc, cela apparaît ici, vous pouvez y répondre et, vous savez, vous pouvez l'éditer. Le marché est résolu. L' une des autres choses intéressantes est à un autre commentaire ici, Um, vous pouvez également cliquer dessus. Et ce que cela fera, c'est que cela me permettra de prendre une photo particulière de ce dont je parle. Je vais dire que je veux refaire cette photo. Ah, et puis je peux aussi changer la couleur pour quelque raison que ce soit, puis quitter. Et ça montre les spectacles se montre ici. Et quand vous ferez les notifications par e-mail, je vous préviens, il y en aura beaucoup. Et quand vous ferez les notifications par e-mail, je vous préviens, Hum, mais toutes ces informations, y compris ces photos, apparaissent là-bas. Il est donc très facile de garder une trace de ce qui se passe. Donc, cela termine notre leçon sur la publication dans le cloud réel 27. Conclusion: félicitations. Vous avez terminé votre introduction au prototypage, et après neuf ans, et après neuf ans, nous avons parlé des interactions de cadrage de fil, des maîtres, maîtres, conception réactive et de la documentation. Et croyez-le ou non, ce ne sont que les bases. J' espère donc aborder quelques sujets plus avancés dans les cours à venir. Des choses comme les interactions avancées, les interactions basées sur les formes d' animation et les applications dynamiques aussi des choses comme la logique conditionnelle et la conception visuelle détaillée. Alors gardez un œil sur eux. En attendant, je tiens à vous remercier beaucoup de votre attention, de votre intérêt pour votre temps. Et j'espère que vous avez beaucoup appris. Prends soin de toi.