Wireframing intermédiaire sur Axure RP 8

1. Introduction: Salut là, et bienvenue à ma deuxième classe de cadrage de fil avec R P. Eight réel . Cette classe couvre plus en profondeur et des sujets complexes et des compétences et des techniques qui seront parfaits pour quelqu'un qui a déjà mis ses pieds mouillés avec les urgences réelles et veut juste apprendre un peu plus et faire leurs cadres métalliques vraiment se démarquer si vous ont déjà vu mon introduction à la vidéo réelle que votre parfaitement préparé pour cette classe. Sinon, je vous suggère de revenir dans ma première vidéo, qui s'appelle une introduction à la R P 8 réelle, juste pour vous mouiller les pieds avec le logiciel. Et tu sais de quoi je parle. Comme vous parcourez ces vidéos, assurez-vous que vous parlez de votre propre projet de classe dans les commentaires ci-dessous ainsi, soumettre des questions afin que d'autres étudiants pourraient bénéficier de votre propre apprentissage. Merci et commençons 2. Masters et groupes: Cette première classe couvre deux techniques importantes pour rendre vos cadres métalliques plus efficaces. La première technique est appelée Masters, et la seconde est appelée groupements. Maintenant, j'utilise ce cadre métallique que j'ai fait dans ma première classe d'acteur. C' est juste un cadre métallique très simple. Donc, si vous ne l'avez pas ou si vous ne savez pas comment le faire, je suggère de revenir à ma première classe et d'introduction à l'action. Donc vous comprenez comment cela a été fait. Maintenant, j'ai mon plan de site ici avec plusieurs pages différentes, mais ils sont tous vides en ce moment. Je sais que je veux créer plus d'écrans de ce cadre métallique, mais je ne veux pas avoir à créer chaque élément encore et encore parce que ce serait juste trop de travail. Mais je peux faire quelque chose appelé Créer un maître. Et la façon dont vous le faites est, vous sélectionnez tous les éléments que vous voulez être dans votre maître. Dans ce cas, je vais juste sélectionner les choses que je veux être. Ah, peu comme un modèle pour les autres écrans de cadre métallique. Donc je sélectionne tout ça. Vous voyez, j'ai sélectionné la mise en page de l'iPhone ainsi que la barre supérieure et le hamburger et le pied de page . Je fais un clic droit et je sélectionne l'option convertir en Master. Et j'ai la possibilité de nommer mes maîtres. Je vais le nommer, hum, hum, mise en page de l' iPhone a appuyé sur le bouton continuer, et je peux voir que c'est devenu rouge, et c'est fondamentalement mon nouveau maître. Donc, si je vais dans l'onglet Masters ici et que je clique sur le maître, je peux vraiment voir mon maître venir. Ah, et c'est fondamentalement comme un modèle maître de tout ce que vous voulez qu'il soit. Donc, cela pourrait être un arrière-plan du reste de votre cadre de fil mobile. Donc, si je voulais faire glisser ceci dans une page différente, je peux facilement le faire. Je clique simplement sur ceci et je le fais glisser ici et maintenant j'ai le même modèle que j'avais que j'avais créé à partir de zéro sur la page d'accueil. Mais j'ai aussi sur la deuxième page, et je n'ai pas pris autant de travail pour y arriver. Donc, maîtres air utile lorsque vous avez plusieurs pages et vous savez que la mise en page va être la même. Vous créez donc simplement une mise en page principale et vous pouvez copier et coller cette mise en page où vous le souhaitez. Euh, bien sûr, ici je peux commencer à ajouter des choses sur mon maître si je veux ajouter, vous savez, peut-être que c'est un écran différent et que je veux ajouter un nouveau texte. Donc, si je vais dans les bibliothèques, mes bibliothèques par défaut à un titre ici, c'est peut-être ma page d'accueil et vous pouvez voir si je déplace le maître de cette façon, il va de cette façon ou de cette façon. Cependant, je vais juste le garder là où il était. Et puis ce texto, je vais me déplacer au centre. Et bien sûr, je peux continuer à ajouter des choses dans ce domaine. Ce serait comme la zone où, vous savez, je pourrais ajouter des fonctionnalités supplémentaires qui ne seraient visibles que sur la page d'accueil et pas sur l'écran de connexion , comme ce que nous avons ici donc maîtres air utile de cette façon, Une autre chose que vous pouvez faire avec les maîtres est en fait éditer le maître lui-même. Donc, si je double-clique ici dans la douleur des maîtres, je peux réellement ouvrir le maître lui-même et commencer à éditer ces pièces comme Peut-être que je veux quelque chose comme ça ou quelque chose comme nous. Et puis, si je vais aux nouvelles pages, vous pouvez réellement voir que les modifications ont été répliquées sur tous mes maîtres. Changer ce Masters est utile parce que vous n'aurez jamais de problème à déplacer cela ou avoir des éléments égarés lorsque vous allez apporter plus de modifications à ces différentes pages , alors maintenant je vais prendre ce maître et le mettre sur l'autre pages. De cette façon, j'ai un modèle de exactement ce dont j'ai besoin. Je pourrais aussi aller de l'avant et la pluie dans ces pages maintenant, car c'est en fait ma page de connexion, Cela va être ma page d'accueil. Je ne suis pas sûr de ce que ce sera tout de suite, mais la bonne chose est, comme je l'ai dit, j'ai les maîtres ici, donc je n'ai pas vraiment besoin de me soucier de re créer ce modèle encore et encore. La prochaine chose que vous pouvez faire est quelque chose appelé un regroupement, et un regroupement est utile lorsque vous avez beaucoup d'éléments différents. Mais vous ne le faites pas et vous devez les déplacer ou les modifier, vous savez, les modifier ou quoi que ce soit, mais vous ne voulez pas de choses. Teoh, vas-y. Tu veux qu'ils restent ensemble. Donc ici ont sélectionné un tas d'éléments différents. Si je fais un clic droit sur ces éléments, j'ai cette option qui dit Groupe. Maintenant, vous pouvez voir sur la douleur ici sur la gauche et le contour. Ces éléments sont maintenant imbriqués sous ce fichier appelé Groupe, qui est super utile car maintenant je peux prendre qui a tort. Si je sélectionne réellement ce groupe, je peux le prendre et le faire glisser partout où je veux. Et je n'ai pas à m'inquiéter que mes éléments ne soient pas à leur place, et je n'ai pas à m'inquiéter de faire glisser chaque élément individuellement à travers. C' est donc super utile lorsque vous avez un grand cadre métallique ou un cadre métallique complexe. Ou peut-être que vous avez quelque chose comme une conception de formulaire où vous savez comment l'espacement entre les éléments et vous ne voulez tout simplement pas Teoh gâcher cela en aucune façon. Quand on manipule, les choses bougent les choses. Eh bien, vous pouvez faire à l'intérieur. C' est au sein du groupe. Si vous double-cliquez sur un élément, vous pouvez modifier cet élément spécifique afin que vous puissiez toujours revenir en arrière et modifier des éléments spécifiques si vous le souhaitez. Eh bien, c'est tout pour cette leçon. La prochaine leçon portera sur la création de diagrammes de flux utilisateur et de cartes de parcours utilisateur via l' actioner. Actual dispose de bibliothèques spéciales dédiées où vous pouvez créer des diagrammes de flux. Teoh fait des choses comme des cartes de site ou des parcours utilisateur, ou définit le flux de votre application pour vos parties prenantes. 3. graphiques de flux: cette vidéo sera sur la création de flux utilisateur, des cartes de site et des flux de tâches dans l'er réel, en utilisant des acteurs intégrés dans les outils. Donc, ces types de choses sont vraiment utiles lorsque vous avez beaucoup d'écrans ou que vous voulez montrer peut-être la façon dont les utilisateurs se déplaceraient dans ces écrans ou que vous voulez montrer la carte du site ou vous voulez montrer la façon dont les choses sont organisées pour vos parties prenantes ah ou autres membres de l'équipe. Donc, la première chose que nous allons faire est de créer une nouvelle page pour afficher ce nouvel organigramme, et nous appellerons ce plan du site parce que je vais utiliser des outils acteurs pour créer une carte du site de mon application. Ah que est aller à la toile vierge et la première chose la prochaine chose Will Dio est naviguer vers les bibliothèques ici et choisir la bibliothèque. C' est son flux, et vous verrez toutes ces différentes formes ici que vous pouvez utiliser pour construire votre plan de site . Et nous avons des choses différentes. Rectangles, rectangles empilés, euh, vous savez, différentes formes. On a même une personne ici, un acteur. Donc, ces air utile. Si vous avez un organigramme ou si vous avez un flux de tâches que vous voulez construire en quelque sorte, euh , vous savez, , vous savez,pour que les gens puissent le voir, et vous verrez beaucoup de ces différentes formes. Vous savez, vous pouvez affecter différentes actions à ces différentes formes et choses comme ça, selon ce que vous voulez faire. Mais en ce moment, vous savez, puisque nous avons un plan du site, c'est assez simple. Il va juste avoir quatre sections Ah. Je vais juste utiliser le rectangle. Eh bien, je vais oui, je vais utiliser la mise en scène. Tous les traîner ici. Donc c'est une forme que nous avons et vous voyez qu'ils ont la forme a tous ces, euh, vous savez, petits endroits où vous pouvez redimensionner. Um, et c'est tout ce sont aussi des endroits où vous pouvez ajouter des connecteurs. Donc c'est une forme, donc on appellera ça, euh, vous savez, pour notre plan de site pour notre application, on a quatre pages qu'on doit se connecter. Ah, comptes de page d' accueil, 70 paramètres et un centre de messages. Et ces air n'ont pas encore été conçus. Je les nomme juste comme ça. Juste pour qu'on ait des exemples de pages à partir. Donc, afin de créer la carte du site. Ah, nous voulons avoir la bonne hiérarchie. Donc, ce la section supérieure sera la page d'accueil sur quand nous voulons créer Dans la page d'accueil sont deux autres appelés paramètres de compte et centre de message. Donc nous pouvons probablement les mettre au centre, et nous avons aussi l'écran de connexion. Alors laissez-moi juste copier coller ceci. J' ai la même forme ici et on appelle ça. C' est la façon dont j'ai arrangé. C' est que nous avons la page d'accueil en haut parce que c'est un peu comme la page de niveau supérieur. Ah, pour tout ce qu'on va faire dans notre application. Ça semble assez logique. Et puis, vous savez, ici, nous avons trois autres choses qui affaiblissent Dio de la page d'accueil. Je veux dire, ça pourrait être une connexion, barre oblique, mais ce sont juste des actions que nous pouvons prendre à partir de la page d'accueil. Il y a des sections, vous savez, ces airs. C' est ainsi que la hiérarchie est pour mon application. Et donc, ah, vous savez, ce ne sont pas très différents des autres formes qui ont réellement dans ses autres bibliothèques. Vous savez, vous avez la bibliothèque par défaut avec les différentes boîtes et autres choses. Mais la bibliothèque de flux est utile car lorsque nous voulons commencer à connecter ces formes, nous pouvons réellement monter dans le coin supérieur gauche et sélectionner l'outil de connecteur. Et maintenant nos montants ont changé les connecteurs. Donc, nous pouvons en fait, si vous passez le curseur sur l'un de ces côtés, vous cliquez dessus et vous pouvez réellement commencer à dessiner des lignes entre chaque boîte comme ceci. Maintenant, j'ai connecté nos boîtes, et on a fait une carte du site, et on peut ajuster ça. Vous pouvez ajuster les lignes à la forme que vous voulez. Quelle que soit la taille que vous aimez, vous pouvez ajuster cela. Et maintenant, nous voyons que nous avons la page d'accueil et nous avons trois sections branchées hors de la page d'accueil afin que nous puissions réellement montrer la hiérarchie ici. Et si vous savez, si nous avions plus de pages ici, nous continuons à avoir plus de sections ici. Et peut-être, vous savez, peut-être que nous avons des sous-sections dans chacune de ces pages. Vous savez, peut-être qu'on aurait, genre, ah, sous-section pour les paramètres du compte et peut-être que je veux que ce soit qu'on soit toujours en mode connecteur, alors revenons au mode de sélection ici pour qu'on puisse choisir le forme de cette boîte. Vous savez, peut-être que j'aurais, comme, d'autres sous-sections sous les paramètres de compte que je veux voir comment nous pouvons continuer à faire cela et vous pouvez connecter les lignes comme celle-ci à chacune de ces sous-sections. Et je dis toujours que nous avons les débuts d'une carte du site. Et encore une fois, c'est super utile pour vos frontières d'Etat, et vous pouvez faire la même chose ici. On pourrait même copier , couper toutes ces choses et les mettre et les mettre ici. Peut-être juste assurez-vous que ces connecteurs air se connectent, et nous pouvons continuer à le faire. Donc les icônes de flux sont super utiles avec un acteur et, vous savez, juste pour vous donner une idée des autres icônes qui sont ici, il y a un rectangle empilé vous savez, juste pour vous donner une idée des autres icônes qui sont ici, il y a un rectangle empilé. Parfois, nous utilisons cela et les flux utilisateur. Je connais les rectangles arrondis de l'air utilisé souvent pour déclencher ou mettre fin à un écoulement. C' est un peu comme le point de départ ou le point de fin. Euh, tu sais, on a d'autres formes, comme essayer, des objectifs. Acteurs, j'y vais. Cela pourrait être similaire. Cela pourrait simuler un élément humain dans un flux de tâches. Ah, et d'autres choses comme ça. Donc, et bien sûr, vous pouvez changer le style de ceux-ci, vous savez, comme avec n'importe quel autre élément. Vous pouvez changer la couleur. Um, tu n'as pas besoin d'avoir un super et ça pourrait être solide. Vous pouvez changer la bordure de sorte que vous pouvez la changer pour être vraiment ce que vous aimez les lignes également. Ce n'est pas nécessairement cette ligne de couleur. Je sais que tu peux le changer pour être comme si c'était rouge. Vous pouvez changer pour être vert ou tout ce que vous voulez faire. Alors, oui. C' est un moyen super facile d'illustrer votre plan de site ou la façon dont vous êtes l'application est présentée ainsi que la façon dont vous le savez, peut-être que les utilisateurs voudraient traverser une application et voir comment elle fonctionne réellement. 4. Interactions simples: Donc, cette vidéo va être une introduction aux interactions et à la réalité, et par là je veux dire programmer vos propres interactions et faire prendre vie à vos prototypes et commencer à travailler comme si ce serait la vraie chose. Ainsi, les interactions pourraient se faire de différentes manières. Et je vais me concentrer sur un pour cette leçon. Et puis pour la prochaine vidéo, je vais vous montrer quelques autres méthodes. Pour commencer, je veux Teoh. Commencez par l'écran ah que j'ai appelé le centre de messages. Et j'ai construit un peu Ah, vous je pour avoir envoyé un message. Et ce que je vais faire, c'est programmer une interaction pour ce bouton, le bouton d'envoi, sorte que lorsque nous envoyons un message, il aura un autre écran indiquant que Votre message a été envoyé et que c'est un message. Envoyer l'écran de confirmation. Ce que nous faisons, c'est que nous cliquons sur le bouton. Ah, l'élément qui est un bouton et vous ouvrez la douleur de la main droite appelée Inspecteur, et nous verrons que, vous savez, nous avons l'inspecteur, et il inspectait le rectangle ici pour que nous puissions même appeler cela le bouton d'envoi et sous le il y a trois onglets ici il y a des propriétés, notes et du style, et sous l'onglet Propriétés est où nous allons voir comment nous pouvons commencer à créer des interactions. Donc les interactions sont ici, et il y a beaucoup d'événements différents que nous pouvons attribuer à ce bouton. Comme vous le verrez, il n'y a pas sur un clic sur la souris, entrez la souris et encore plus d'événements ici Il semble qu'il y a environ 15 à 20 types d'interactions différents que nous pouvons réellement mettre sur ce bouton. Hum, et on va juste se concentrer sur Click pour que je clique dessus. Cela dit sur Click Ah, qui attribuera un événement de clic au bouton. Donc, je vais aller de l'avant et double-cliquez sur Click et cela va ouvrir l'éditeur de cas et l' éditeur de cas est où vous ah, éditez toutes les interactions que vous voulez pour vos différents éléments sur votre prototype ainsi de suite. Donc, nous avons sur Click, et nous voulons que quelque chose se produise lorsque nous cliquons sur ce bouton, et ce que nous voulons arriver est que nous voulons l'autre écran qui indique la confirmation du message. On veut que ça arrive, donc ce qu'on va faire, c'est Ah, pour le premier cas. Nous voulons ouvrir un lien. Cliquez donc sur cette section qui indique ouvrir le lien dans la fenêtre actuelle. Donc maintenant nous ajoutons une action ici, et nous allons ensuite aller de l'avant et configurer l'action dans cette troisième douleur ici, et la façon dont nous le ferons est correcte. Nous voulons créer un lien vers une page qui est déjà dans cette conception. C' est vrai. Nous voulons réellement lier à cette page le message, envoyer une confirmation, et vous pouvez voir que ce n'est que la liste de toutes les pages. C' est juste dire, tu sais, quand on clique sur le bouton, on veut ouvrir un lien et le lien sera une de ces pages et tu peux vraiment lier à tout ce que tu peux lier à un externe. Vous l'êtes. Ah ah, Vous pouvez revenir à une page précédente comme si vous aviez lié à une page précédente, vous pouvez réellement y revenir. Vous pouvez recharger la page actuelle de sorte que super utile, Um , un très intuitif. Mais on va y aller. Et donc nous voulons un lien vers le message, Envoyer l'écran de confirmation et nous allons cliquer. OK, et c'est tout. C' est tout ce qu'il a fallu Teoh mettre une interaction sur ce bouton va voir. Il y a une petite note ici qui dit une, Um, c'est une petite note qui montre que, oui, nous avons une interaction pour cela, et vous pouvez voir et encore dans la douleur en haut à droite nous avons maintenant programmé dans interaction qui dit, Ok quand nous cliquons sur le bouton, un cas se produit dans ce cas est d'ouvrir cet écran qui est appelé message de confirmation de son dans la fenêtre actuelle afin que nous puissions même tester cela, irait à l'aperçu, et maintenant nous l'ouvrons dans le navigateur. Et voici notre prototype. Nous ne pouvons même pas taper ici un sujet, et vous pouvez même n'importe quoi, parce que j'ai fait ces zones de texte pour qu'elles soient en fait nous pouvons réellement les taper. Et maintenant, quand nous cliquons dessus, il va maintenant dans l'écran de confirmation, ce qui est génial. C' est exactement ce qu'on veut. Dans la vidéo suivante, je vais vous montrer des interactions plus compliquées. Um, c'est assez simple. Et encore une fois, vous savez, vous avez tellement d'événements différents que vous pouvez choisir ici. Cela fait vraiment un outil très puissant pour créer des prototypes de travail. Je te vois dans la prochaine vidéo où on parle, Ah, Ah, un peu plus d'interactions et je te montrerai d'autres façons de les faire . 5. Comment utiliser des panneaux dynamiques: Salut, tout le monde. Donc, ce sera un cours rapide sur une introduction à un panneau dynamique, qui est une autre vidéo qui va avec la façon d'utiliser des éléments interactifs à l'intérieur, en fait pour rendre vos prototypes interactifs et travailler et sentir et ressembler à la vraie chose. Um, les panneaux dynamiques font partie d'acteurs, bibliothèques, de bibliothèques d'extras par défaut. Donc, si vous allez à gauche dans la bibliothèque paie vous cliquez par défaut et vous faites défiler ici, vous verrez une option ici pour les panneaux dynamiques. Hum, si vous faites glisser un de ceux-ci sur l'écran Ah, vous arriverez à ce qui ressemble à une boîte normale. Mais ces types de panneaux sont spéciaux parce qu'ils ont en fait des états différents, qui signifie que vous pouvez réellement mettre différentes choses dans ce panneau, et ils apparaîtront à différents moments, selon le moment où vous voulez qu'ils apparaissent. Donc, par exemple, ce panneau que je viens de glisser dans l'écran de la page d'accueil um, cela a déjà gagné l'état appelé ST one. Et je peux ajouter des états comme je le souhaite, et les états sont comme si c'était ce qu'il dit. C' est un peu comme, Ah, un état d'être, si vous voulez, de ce panel. Donc tout ce qui est dans cette forme gagne l'état un. Maintenant, nous ouvrons State One. Ah, sera Onley en ST 1. Il ne sera là que lorsque vous montrerez l'état un. Alors peut-être que je vais mettre une image ici, Justus un exemple. Je pourrais mettre un texte, donc quelque chose comme ça pourrait être dans l'état un. Tu sais, ça pourrait être tout ce que tu veux. Hum, donc vous pouvez voir dans notre périphérie qu'ils apparaissent en fait sous l'état 1. Et le contour qui va à ST pour affaiblir, faire la même chose, euh, et juste mettre quelque chose de différent. Et bien sûr, vous pourriez continuer à aller et aller et faire autant d'états que vous le souhaitez retourner à la page d' accueil State One est ce qui apparaît ici. Ah, mais nous savons que nous avons un autre état appelé État. C' est donc une sorte de début de la façon dont vous utilisez des panneaux dynamiques où nous savons que nous avons des états différents. Et maintenant, ce que nous voulons dio, c'est commencer à basculer entre ces états. Donc, vous savez, peut-être qu'une chose qu'on pourrait faire est d'avoir un bouton qui dit cliquer ici. Donc, si j'ai un bouton ici et que je voudrais changer, je voudrais rendre ce panneau interactif En utilisant ce bouton. Je peux faire ce que nous avons fait dans notre vidéo précédente, qui est double clic sur Cliquez. Et ici, nous avons quelques options ici dans l'éditeur de cas. Si nous voulons changer le panneau dynamique, nous allons à l'onglet qui montre dit widget, et nous pouvons faire définir, état du panneau. Et d'abord, nous regardons configurer les actions définies. On va en fait dire à dire à, puisque c'est déjà sur ST One au départ et on clique sur. OK, et maintenant cette interaction apparaît d'un bouton ici. Donc, fondamentalement, ce que nous faisons est, quand nous cliquons sur le bouton, ce panneau va changer. Tout ce qui se trouve dans ce panneau va changer à l'état plutôt que d'être dans l'état un. Donc, si nous voulons rapidement prévisualiser ceci et voyons si cela fonctionne, nous sommes sur la page d'accueil. C' est donc notre panneau dynamique. Nous cliquons ici et il devrait aller à l'état deux. Et il est allé à l'État 2. Les panneaux dynamiques sont donc un excellent moyen. Teoh ad Ah, tout un tas d'éléments interactifs à la fois. Ou si vous avez une section de votre application que vous savez que tout va changer ou , vous savez, vous voulez faire un tas de choses différentes comment vous dites que les états sont des modes. Ah, de celui de tout comme dans cette section particulière de votre application. Comme ici. Nous venons de le faire dans la page d'accueil et nous avons juste eu un panneau dynamique ici que nous pourrions faire. C' est Bigas. On la veut. Un petit, c'est qu'on veut, hum si tu sais que tu vas avoir quelque chose comme ça. Les panneaux dynamiques sont vraiment utiles car vous n'avez pas à changer chaque élément à la fois. Vous pouvez simplement créer un état avec tous les éléments dont vous avez besoin et autant d'états que vous le souhaitez avec autant d'éléments que vous le souhaitez, et ils changeront tous à la fois. Donc c'est tout pour les panneaux dynamiques. Et cela couvre la plupart de ce que vous devez savoir pour les interactions avec un acteur 6. PROJET DE COURS: Ok, donc maintenant que vous avez maîtrisé la plupart des techniques dans ACTU r p 8 et la plupart des techniques que je considérerais comme intermédiaires à avancées, qui comprennent des choses comme les flux utilisateur, les interactions et les panneaux dynamiques, votre affectation de classe consiste à créer votre propre ensemble interactif de cadres filaires, avec soit une carte du site, soit un flux de tâches. Et assurez-vous également que vous le publiez pour les actes, partager et dans les commentaires, partager un lien vers votre nouvel ensemble de cadres métalliques afin que nous puissions tous les voir dans la salle de classe. Et nous pouvons tous commenter et suggérer des changements et des améliorations, etcetera, etcetera. Ça pourrait être un ensemble de cadres métalliques pour une application que vous décidez de construire vous-même. C' est peut-être une idée que tu as trouvée. Ou peut-être que c'est une refonte d'une application existante ou d'un site Web ou d'un produit existant que vous pensez pouvoir faire mieux. J' aimerais donc revoir vos projets. Assurez-vous de publier vos projets sur le partage d'actes, obtenir le lien et le mettre dans les commentaires dans cette salle de classe afin que nous puissions tous le voir. Et si vous avez des questions, n'hésitez pas à contacter. Et bonne chance. J' ai hâte de voir ses dessins