Axure RP - Guide rapide

Le mot prototypingest très courant et pertinent pour les gens du développement logiciel ainsi que du développement architectural. En matière de développement architectural, en Égypte, il existe des prototypes des grandes pyramides de Gizeh. Ceux-ci ont été construits avec (bien sûr) une version plus petite afin de prendre l'accord ou l'approbation du dirigeant.

Cet exemple petit mais significatif illustre précisément le but d'un prototype. Selon Wikipédia, un prototype est «une première version ou une version préliminaire d'un appareil ou d'un véhicule à partir duquel d'autres formes sont développées».

Pour le monde du développement logiciel, la définition peut être adaptée comme une version préliminaire d'une page, d'un écran ou d'une fonctionnalité, qui prend en charge l'autre développement en visualisant efficacement les éléments de l'écran et en mettant en valeur les interactions. Cette définition inclut la partie la plus critique, l'interaction.

En développement logiciel, pour développer une partie de la fonctionnalité ou la fonctionnalité complète elle-même, un investissement considérable est nécessaire en termes de temps et d'efforts. C'est un processus sans fin de développement, de validation et de correction des problèmes selon les commentaires des clients.

La plupart des sociétés de développement de logiciels souhaitent que ce processus soit aussi rapide que possible. Par conséquent, ils ne vont pas de l'avant avec des efforts et un investissement en temps de la part de tous les membres de l'équipe. Au lieu de cela, ils font un geste intelligent en embauchant un ingénieur en expérience utilisateur (UX), qui possède les compétences nécessaires pour visualiser une fonctionnalité particulière. Cela les place sur le siège du conducteur lors du développement du produit.

En substance, le prototypage est nécessaire pour simuler et visualiser l'exigence logicielle très tôt dans le développement. Le processus devient finalement bénéfique pour les sociétés de développement de logiciels et les clients car il réduit l'inconnu dans la fonctionnalité, fournissant ainsi une bonne direction au développement.

Bonne phase pour le développement du prototype

Dans l'ère actuelle du développement logiciel de haut niveau, il y a eu de nombreuses avancées dans le tableau du cycle de vie global du développement logiciel. Ces avancées proviennent de l'aspect des technologies ainsi que du rôle / de la position d'un membre de l'équipe en particulier dans le cycle de vie. Un de ces postes a commencé à gagner du terrain, ce qu'on appelle un ingénieur UX.

Un ingénieur UX est doté d'un ensemble de compétences, ce qui est bénéfique pour les clients. En utilisant différentes techniques ou étapes pour mieux connaître le client, l'ingénieur UX peut avoir une bonne idée de ce que l'utilisateur attend d'un produit logiciel donné.

Habituellement, lorsque le processus de collecte des exigences a lieu, les entreprises technologiques impliquent désormais les ingénieurs UX de se rendre sur le marché pour comprendre ce dont l'utilisateur a besoin. Avec la dernière tendance du Responsive Web XDesign et de l'approche Mobile-First en matière de développement logiciel, il peut y avoir un certain nombre de domaines sur lesquels on souhaite concentrer leur attention. Un ingénieur UX utilise des processus tels que les entretiens avec les utilisateurs, les enquêtes de marché pour connaître le pouls de son public cible.

Ce processus prend du temps et est important, car il permet au produit logiciel de voir sa pertinence sur le marché. Ces étapes sont utilisées pour rassembler les exigences logicielles et les obtenir. C'est une phase idéale, car elle réduit le coût global de développement. Cependant, lorsque le produit logiciel est arrivé à maturité, on peut introduire la phase de recherche UX afin de mesurer la viabilité de l'amélioration en cours.

Pour les ingénieurs UX, le processus de compréhension de leur base d'utilisateurs ne se limite pas seulement à obtenir les contributions du client ou les conversations associées. Il y a des étapes intéressantes à suivre pour comprendre ce que veut un utilisateur. Le vrai travail commence quand ils sont assez clairs sur ce que l'utilisateur pourrait attendre du produit logiciel.

Une fois que certaines données sont disponibles sur la façon dont l'utilisateur perçoit le logiciel à venir ou une amélioration du logiciel existant, l'ingénieur UX revient dans son antre pour concevoir l'interface utilisateur pour eux. Traditionnellement ou en tant qu'approche courante, quand quelqu'un parle de design, cela signifie des logiciels tels que Adobe Photoshop, CorelDraw ou même Microsoft Paint. Parfois, pour revenir rapidement aux utilisateurs, les concepteurs UX utilisent de bons vieux stylos et du papier pour concevoir des interfaces.

Cependant, pour UX designer, fournir la qualité dans la conception de l'interface utilisateur signifie plus que simplement montrer un design impressionnant. L'expérience utilisateur comprend non seulement la façon dont l'utilisateur voit l'interface, mais également la façon dont l'utilisateur interagit avec elle. Les outils logiciels mentionnés ci-dessus et ceux du marché sont livrés avec leurs propres fonctionnalités. C'est en effet une tâche fastidieuse pour l'ingénieur UX de choisir le logiciel approprié qui lui permettra de faire du brainstorming, de concevoir et d'obtenir des commentaires.

Entrez Axure, le logiciel actuellement en vogue pour concevoir de superbes interfaces utilisateur et interactions. Axure existe depuis près d'une décennie pour permettre aux ingénieurs UX d'accéder facilement aux détails de la création d'un prototype logiciel. Axure, en plus d'être l'outil de prototypage, dispose d'une puissante communauté contribuant au monde UX avec de nombreux exemples et des interactions habiles.

À un niveau supérieur, voici les fonctionnalités offertes par Axure -

• Schéma et documentation
• Prototypage efficace avec du contenu dynamique
• Flux conditionnels
• De belles animations pour améliorer les interactions
• Vues adaptatives
• Prise en charge sur Windows et Mac

Pour explorer la liste détaillée des fonctionnalités fournie par Axure, veuillez visiter https://www.axure.com. Pour les instructions d'installation, suivez le lienhttps://www.axure.com/download.

Pour le prototypage rapide, Axure RP fournit une gamme variée d'outils et de techniques, qui aident toujours les analystes / ingénieurs d'expérience utilisateur à visualiser l'objectif final.

Avec une communauté solide toujours disponible pour vous aider, Axure RP devient l'outil préféré des passionnés et des praticiens UX.

Une fois que vous avez installé Axure, vous serez présenté avec une interface comme indiqué dans la capture d'écran suivante.

Cet écran sera toujours affiché au démarrage jusqu'à ce que vous choisissiez de ne pas l'afficher.

Sur cet écran, vous avez les options suivantes -

• Démarrer un nouveau fichier dans Axure
• Ouvrir un projet Axure existant

Créons maintenant un nouveau fichier avec Axure.

Lorsque vous cliquez sur le bouton «NOUVEAU FICHIER», l'écran suivant s'affiche pour créer un nouveau prototype.

Comme le montre la figure ci-dessus, l'espace de travail est divisé en 6 parties.

• Pages
• Libraries
• Inspector
• Outline
• Masters
• Zone de conception

Passons en revue ces parties une par une.

Des pages

Cette section montre les pages sur lesquelles vous travaillez. Ces pages sont affichées dans une arborescence par défaut comme suit. La page d'accueil contient les pages enfants suivantes.

Accueil

Page 1

Page 2

Page 3

Vous pouvez continuer avec la structure donnée ou vous pouvez la modifier selon vos besoins. Pour ce faire, faites un clic droit sur l'une des pages, puis vous serez présenté avec les options telles que - Ajouter, Déplacer, Supprimer, Renommer, Dupliquer, etc.

Comme la plupart des différents outils disponibles, cette section vous permet d'interagir avec les pages de votre prototype. Vous pouvez l'utiliser pour planifier les écrans dans le prototype prévu.

Volet Bibliothèques

Dans le volet Bibliothèques, la plupart des contrôles requis pour le prototype sont disponibles. Les contrôles typiques disponibles dans cette section sont: Boîte, Image, Espace réservé, Boutons, etc. Axure RP fournit un ensemble complet de contrôles d'interface utilisateur classés en fonction de leur domaine d'application.

Comme le montre la figure ci-dessus (a), les bibliothèques ont les catégories suivantes: Commun, Formulaires, Menus et tableau, et Balisage. Toutes ces catégories sont développées lorsque vous ouvrez l'application. Pour plus de commodité, il est réduit dans cette capture d'écran.

Les bibliothèques courantes incluent les formes de base, les boutons, le texte d'en-tête, le point chaud, le panneau dynamique, etc.

Avec Axure RP, pour toutes vos exigences de prototypage, il existe un contrôle très efficace appelé Hot Spot. À l'aide de ce contrôle, vous pouvez fournir une interaction de clic à presque tous les contrôles de l'interface utilisateur. Un exemple sera fourni dans les pages précédentes.

Dans la bibliothèque de formulaires, comme son nom l'indique, les contrôles Zone de liste, Case à cocher, bouton radio, zone de texte et champ de texte sont inclus. Pour concevoir un formulaire de saisie utilisateur, vous pouvez utiliser les contrôles de cette section sous la bibliothèque.

Les menus et les tables ont une structure traditionnelle. Une telle structure, peut-être sous une forme horizontale ou verticale, est disponible dans cette bibliothèque appelée Menus et tableaux.

Dernier point, mais non le moindre, la bibliothèque de balisage, qui comprend des stickies, des marqueurs et des flèches. Surtout, cela sera utilisé pour les annotations dans votre prototype.

Zone de conception

C'est le véritable terrain de jeu des ingénieurs UX. Cet espace sera utilisé pour créer les prototypes selon vos besoins. Pour commencer, reportez-vous à la zone en surbrillance avec le numéro 6 dans la capture d'écran suivante.

Dans cette zone, vous pouvez faire glisser et déposer les contrôles souhaités depuis la bibliothèque. Créons une barre de menu rapide en utilisant la bibliothèque.

Exemple - Barre de menus

Dans les bibliothèques, sous Menus et tableau, faites glisser Menu classique - Contrôle horizontal vers la zone de conception.

Une fois que vous avez fait glisser le contrôle dans la zone de conception, vous verrez l'écran suivant.

Comme le montre l'écran ci-dessus, l'Axure RP est suffisamment intelligent pour afficher le texte voulu dans un menu. Considérant qu'il s'agit d'une barre de menus, Axure RP a automatiquement créé Fichier, Modifier et Afficher sous forme de menus dans le contrôle.

Comme indiqué par la flèche, la section inspecteur affiche les propriétés du contrôle. Utilisez cette section pour créer un nom pour votre contrôle pour une identification unique, lors de la création de prototypes complexes.

Donnons un nom à ce contrôle comme TestMenu. Nous utiliserons ce nom dans les exemples précédents.

Propriétés de la page

Lors de la planification d'un prototype, il est logique d'avoir une idée claire de l'utilisateur et donc de l'appareil sur lequel le prototype sera présenté / visualisé. Pour une meilleure expérience d'interaction avec le prototype, Axure a fourni une fonctionnalité permettant de définir les propriétés de la page.

Comme le montre la figure ci-dessus, la zone désignée par le numéro 3 est la section des propriétés de la page. Dans cette section, vous pourrez voir la liste déroulante des interactions et la sous-section Adaptative.

Laissez-nous discuter de ces sections en détail.

Interactions sectiontraite des interactions (cas) possibles avec la page. Comme vous pouvez le voir, le cas d'interaction OnPageLoad gère les événements lors du chargement de la page. Dans la plupart des prototypes, les ingénieurs UX préfèrent mettre une animation pour faire la première impression. Cet événement particulier pour montrer l'animation est généralement déclenché sur le cas OnPageLoad.

De même, d'autres cas incluent - OnWindowResize, OnWindowScroll. Dans la liste déroulante, Plus d'événements, vous pouvez voir d'autres cas pris en charge pour configurer les interactions liées à la page.

Avec le Adaptive section, Axure RP entre dans une conception Web réactive. De nos jours, la conception d'une expérience pour les sites Web ne suffit pas, et les entreprises préfèrent que les sites mobiles coexistent avec les sites Web.

La même page, vue à partir de différentes tailles d'écran et mises en page, constitue différentes vues adaptatives. Les vues adaptatives sont généralement conçues pour les mobiles et les tablettes. Axure fournit cette fonctionnalité de vues adaptatives, de sorte que les ingénieurs UX aient une prise sur l'aspect réactif des prototypes dès le départ.

Le volet Inspecteur pour le widget

Le volet Interactions avec les widgets est la section la plus critique d'Axure. Vous pouvez voir ce volet en cliquant sur n'importe quel widget dans la zone de conception.

Prenons un exemple de l'élément de menu que nous avons utilisé dans la section précédente. Sélectionnez l'élément de menu nommé TestMenu et observez la section mise en évidence dans la capture d'écran suivante.

Comme vous pouvez le voir sous l'onglet Propriétés, il existe différentes interactions telles que OnMove, OnShow, OnHide et OnLoad. Celles-ci sont spécifiques au contrôle Menu dans son ensemble.

Maintenant, cliquez sur Fichier dans le contrôle de menu.

Vous remarquerez un changement dans le type d'interactions dans le volet Propriétés du widget. En outre, il offre la flexibilité de fournir un nom pour cet élément de menu. Prenons le cas OnClick comme exemple.

OnClick- Le cas OnClick définit le comportement du champ, lorsque vous cliquez sur le champ lors de l'exécution du prototype. Cela permet diverses interactions telles que la navigation dans les pages, le menu contextuel, etc.

Notes Pane- Dans le volet d'inspection lui-même, il y a une sous-section appelée Notes. Dans le volet des notes, vous pourrez ajouter certains points à retenir, pour le contrôle de votre choix.

Ces points seront clairs une fois que nous plongeons dans un exemple dans le chapitre suivant.

Grilles et guides

Pour un prototype avec un niveau maximum de qualité et de précision, les ingénieurs UX ont besoin de la capacité d'aligner / positionner un contrôle avec l'autre contrôle.

Par exemple, considérez que vous souhaitez afficher une fenêtre de connexion. Si cette fenêtre contextuelle doit être affichée en plein milieu de l'écran, vous avez besoin des dimensions globales de l'écran. De plus, pour s'aligner exactement au milieu de l'écran, vous devez disposer des grilles pour l'aligner correctement.

Axure fournit la fonction de grilles et de guides, afin que vous puissiez utiliser efficacement votre zone de conception.

Pour voir les grilles et les guides disponibles, cliquez avec le bouton droit sur la zone de conception et le menu contextuel illustré dans la capture d'écran suivante apparaîtra.

Maintenant, laissez-nous comprendre les options disponibles.

Grid- Les trois premières options affichées dans le menu contextuel sont associées à des grilles. Il s'agit des paramètres Afficher la grille, Aligner sur la grille et Grille.

• Show Grid- Lorsque Afficher la grille est activé, vous pourrez voir la grille sur la zone de conception comme indiqué dans la capture d'écran suivante. Ceci est très utile pour aligner les contrôles avec les autres contrôles à l'écran.

• Snap to Grid- Lorsque Snap to Grid est activé, les contrôles seront automatiquement attachés en fonction des grilles présentes autour. Vous pourrez voir ce comportement lorsque vous ferez glisser un contrôle et qu'il s'attachera à la grille à proximité.

• Grid Settings- Plus de paramètres liés aux grilles sont présents dans cette boîte de dialogue. Comme le montre la capture d'écran suivante, l'espacement entre la grille, le type de grille, etc. sera disponible dans cette boîte de dialogue. Vous pouvez sélectionner les grilles de type intersection, selon votre convenance.

Guides - Dans le menu contextuel comme illustré dans la capture d'écran suivante, les options après le premier séparateur sont liées aux guides.

Nous couvrirons les options couramment utilisées pour les guides.

• Show Global Guides- Ces guides seront visibles lorsque vous faites glisser à la fois les règles horizontales et verticales dans la zone de conception. Essayez-le par vous-même!

• Show Page Guides- Des guides sont également disponibles au niveau de la page. Ces guides sont créés lorsque vous les faites glisser à partir des règles verticales et horizontales. Ils sont plus courants que les Global Guides. Le fait d'avoir un guide de page augmente la flexibilité de la conception au niveau de la page.

• Show Adaptive Guides- Lorsqu'il s'agit de concevoir les pages pour différentes vues adaptatives, il vaut la peine d'avoir les guides adaptatifs en place. Cette option permet la visibilité des guides adaptatifs, qui seront utilisés pour aligner les objets sur différentes vues adaptatives.

• Snap to Guides- Lors de la disposition des différents éléments de l'écran dans la zone de conception, cette fonctionnalité permet d'aligner les objets sur les guides. Cela est pratique lorsque vous placez un objet particulier sur l'écran et que vous l'organisez par rapport à l'autre objet.

Ce chapitre vous guidera à travers l'ensemble des interactions de base fournies par Axure lors de la conception d'un écran.

Le but d'Axure RP est de permettre des prototypes interactifs. Désormais, lorsqu'il s'agit de créer des prototypes interactifs, il y a toujours une mise en garde concernant la création d'un prototype trop interactif. C'est la raison pour laquelle, il est logique de commencer par des interactions importantes uniques à la fois, afin de parcourir le reste des pages disponibles.

Interactions Axure

Interactions est le terme inventé pour désigner les éléments fonctionnels qui transforment un filaire statique en un prototype interactif cliquable. Pour en faire une approche simple des interactions, Axure élimine le besoin de coder le prototype en fournissant une interface pour définir les structures et les logiques.

Lors de la génération du prototype HTML, Axure RP convertit les interactions en code réel (HTML, CSS et JavaScript). Cela agit comme un catalyseur pour montrer la conception et les interactions prévues sur la page.

En règle générale, les interactions commenceront par Whenl'interaction se produit. Par exemple, lorsque la page est chargée dans le navigateur, lorsque l'utilisateur clique sur l'un des éléments, etc.

Puis vient la question, Wheresur l'écran, l'interaction a lieu. Il peut s'agir d'un simple élément d'écran tel qu'un rectangle, que nous voulons transformer en bouton cliquable dans le but d'un menu (exemple montré plus loin).

Enfin, il y a la description de Whatse passe dans l'interaction. Considérons le chargement de la page lorsque le navigateur charge la page; vous pouvez simplement sélectionner un diaporama particulier pour commencer ou agrandir l'image lorsqu'elle est saisie à l'écran.

Événements Axure

Les événements dans Axure peuvent être de deux types, déclenchés par deux types d'événements.

Événements de niveau page et maître

Lorsqu'une page se charge, une pléthore d'événements se produisent pour récupérer les informations de conception, le contenu et, par conséquent, l'alignement de chaque élément à l'écran. Comme ces événements ont lieu lors du chargement initial de la page, vous pouvez considérer que ces événements seront répétitifs à chaque chargement de page. Voici quelques exemples d'événements de niveau Page et Master.

• OnPageLoad
• OnWindowResize
• OnMouseMove
• OnAdaptiveViewChange

Événements au niveau de l'objet ou du widget

Considérons, nous avons créé une page et un widget bouton particulier sur la page. Maintenant, pour interagir avec ce widget bouton, peut-être par le toucher (sur un prototype mobile) ou un clic de souris. Voici quelques exemples d'événements au niveau de l'objet ou du widget.

• OnClick
• OnMouseEnter
• OnDrag
• OnDrop
• OnMouseHover

Cas

Comme indiqué dans le chapitre précédent, dans la section des propriétés de la page, une interaction de widget particulière peut être conçue. Ceux-ci sont appeléscases. Une interaction particulière peut être une constitution de plusieurs cas.

Prenons un exemple pour mieux comprendre cela.

Exemple: Prototype Axure - Afficher le menu lors du survol de la souris

Pour commencer avec cet exemple, créez un nouveau fichier en cliquant sur New sous File Menu ou en utilisant la touche de raccourci Ctrl + N.

Dans cet exemple, nous allons concevoir le simple Menu Barcomme on le voit dans la plupart des produits logiciels. La structure du menu aura les éléments de menu suivants et le sous-menu sous chacun d'eux.

File

• New
• Open
• Save
• Close

Edit

• Cut
• Copy
• Paste
• Find
• Replace

View

• Afficher la barre d'état
• Barres d'outils
  • Barre d'outils principale
  • Barre d'outils de style

Help

• Commencer
• Utilisation de l'aide
• Qu'est-ce que c'est ça

Pour commencer, faites glisser et déposez Classic Menu – Horizontaldans la zone de conception. Vous le trouverez sous Bibliothèques → Menus et tableaux. Nommez le contrôle comme MenuBarExample. Faisons cet élément de largeur 300 px et hauteur 30 px. Positionnez-le à 100 sur l'axe X et à 30 sur l'axe Y. Vous pouvez ajuster ces valeurs sous l'onglet Style sous la section Inspecteur sur la droite.

À la fin de la procédure ci-dessus, vous pourrez voir le résultat final comme indiqué dans la capture d'écran suivante.

Ajoutons également les noms aux titres de menu dans la section Inspecteur. Cliquez sur chaque titre de menu et observez la section de l'inspecteur. Si le nom n'est pas donné à la barre de menu spécifique, le nom deviendra (Nom de l'élément de menu).

Nommez le menu Fichier comme FileMenu.

Il en va de même pour Modifier comme EditMenu et voir comme ViewMenu.

Pour confirmer si les noms ont été fournis, cliquez sur chaque menu individuel et confirmez sous Inspecteur: Élément de menu. Vous pourrez voir les noms et non (Nom de l'élément de menu).

Maintenant, selon notre exigence, complétons la barre de menus avec le menu Aide. Cliquez avec le bouton droit sur le titre de la barre de menu - Affichage, vous verrez un menu contextuel. Cliquez sur Ajouter un élément de menu après.

Un élément de menu vide apparaîtra. Double-cliquez sur l'élément de menu vide et entrez le titre du menu comme Aide. Répétez la procédure en lui attribuant un nom sous Inspecteur: Nom de l'élément de menu. Une fois terminé, vous verrez la zone de conception comme suit.

Ensuite, concevons l'interaction pour le menu Fichier.

Cliquez sur le titre de la barre de menu Fichier et observez l'inspecteur: élément de menu.

Comme indiqué dans la capture d'écran ci-dessus, observez l'onglet Propriétés.

Sous l'onglet Propriétés, nous créerons l'interaction pour le menu Fichier.

Il est très simple d'ajouter un sous-menu au menu. Cliquez avec le bouton droit sur le menu Fichier, dans le menu contextuel qui apparaît, cliquez sur Ajouter un sous-menu.

Note - Nous pouvons également supprimer le sous-menu en répétant la même étape et en cliquant sur Supprimer le sous-menu.

Une fois le sous-menu ajouté, un sous-menu vide apparaîtra. Double-cliquez sur chacun des éléments de menu et fournissez des noms tels que - Nouveau, Ouvrir, Enregistrer.

Cliquez avec le bouton droit sur le dernier élément de sous-menu et ajoutez un autre élément de sous-menu. Nommez-le comme Close.

Il est recommandé de nommer également tous les éléments de sous-menu dans la section Inspecteur. Cela permet de les référencer dans votre processus de conception global.

Lors de la conception de cette pièce, notez que chaque fois que nous cliquons sur une autre partie de la zone de conception, le sous-menu disparaîtra. Nous devons cliquer sur l'élément de menu Fichier pour afficher le sous-menu.

Parlons de l'interaction - Hover. Cette interaction a un comportement unique de déclenchement, lorsque le pointeur de la souris survole un élément particulier. Dans Axure, cette interaction est automatiquement implémentée avec le Menu Classique - Horizontal.

Pour voir l'interaction en action, cliquez sur le bouton Aperçu dans la barre d'outils. Axure ouvrira l'aperçu dans le navigateur par défaut.

Survolez le menu Fichier. Le sous-menu sera affiché comme illustré dans la capture d'écran suivante.

Si nous l'examinons objectivement, nous venons d'utiliser Axure pour créer une interaction complexe, comme le survol de l'élément de menu. Dans le codage HTML habituel, cela aurait pris entre 1 et 1,5 heure.

En guise de devoir, remplissez le reste des menus pour leurs sous-menus.

Maintenant, créons rapidement une interaction dans le sous-menu Fermer sous le menu Fichier. Nous le mettrons en évidence en rouge lorsqu'il est survolé. Pour ce faire, cliquez avec le bouton droit sur Fermer le sous-menu. Cliquez sur Styles d'interaction…

Sous l'onglet MouseOver, cochez la case Couleur de remplissage et sélectionnez la couleur rouge. Axure affichera immédiatement l'aperçu dans la zone de conception. En supposant que la section Appliquer à Menu sélectionné et tous les sous-menus sont sélectionnés, tout le menu sera mis en surbrillance en rouge.

Cliquez uniquement sur l'élément de menu sélectionné. Cochez maintenant la couleur de la police et choisissez la couleur blanche pour la police. L'aperçu sera mis à jour immédiatement.

Cliquez sur OK pour terminer cette configuration.

Cliquez à nouveau sur Aperçu pour voir l'interaction en action.

Ceci complète l'exemple.

Vous pouvez essayer l'interaction suivante sous forme de devoir rapide.

OnClick à l'aide d'un widget bouton.

De nombreuses approches de développement logiciel, lorsqu'il s'agit de développement d'interfaces utilisateur, utilisent une technique commune: la création de masters.

Un master est un filaire réutilisable, qui sera créé une fois et largement utilisé par la suite sur les pages suivantes. Avec Axure RP, lorsque nous créons une maquette, les modifications apportées à cette page seront appliquées aux pages où elle est utilisée. Par conséquent, cela réduit considérablement le temps pour les composants communs à toutes les pages.

Pour commencer avec Masters, vous pouvez vous concentrer sur la section Masters (marquée comme 5) comme surligné dans la capture d'écran suivante.

Utilisez cette section des maîtres pour -

• Organisez les masques du prototype en ajoutant, supprimant ou modifiant la page / le dossier maître.

• Sélectionnez un maître particulier pour l'édition.

Panneaux dynamiques

Dans Axure RP, comme nous l'avons vu dans le chapitre précédent, il existe différents états associés à un widget donné. Pour consolider / organiser les états d'un widget particulier ou d'un ensemble de widgets, nous avons besoin d'un conteneur / espace réservé. Les panneaux dynamiques servent de conteneur / d'espace réservé pour les états d'un widget.

Comprenons mieux le panneau dynamique à l'aide d'un exemple. Nous continuerons à partir de notre exemple de barre de menu.

L'ajout dans cet exemple sera une zone d'image et un bouton sous la barre de menus. Utilisez le widget Espace réservé pour la zone d'image et le bouton sous les widgets courants. Nommez l'espace réservé comme ImageAreaPlaceholder, bouton comme showImageButton.

Aussi, ajoutons la barre de menus aux masters. Cliquez avec le bouton droit sur la barre de menus et cliquez sur Convertir en maître. Une boîte de dialogue apparaîtra vous demandant le nom du maître. Ajoutez le nom comme menuBarMaster.

Comme le montre la capture d'écran ci-dessus, la barre de menu devient rose et l'entrée pour les maîtres a été ajoutée.

Maintenant, créons un panneau dynamique. Le contexte du panneau dynamique est que vous souhaitez contrôler la visibilité de la zone d'image en fonction du clic sur le bouton Afficher l'image. Avoir un panneau dynamique permettra la flexibilité de la zone d'image.

Voyons comment créer le panneau dynamique. Cliquez avec le bouton droit sur la zone d'image, le menu contextuel apparaîtra, sélectionnez Convertir en panneau dynamique.

Le panneau dynamique sera sous Plan: Page. Également sous Inspecteur, il montre le panneau dynamique. Nommez le panneau dynamique showImageDynamicPanel. Le nom de ce panneau dynamique sera mis à jour dans la section Plan: Page.

Dans la zone de conception, cliquez avec le bouton droit sur le panneau dynamique Afficher l'image pour afficher le menu contextuel. Sélectionnez Définir masqué, le panneau dynamique disparaîtra de l'écran.

Le panneau dynamique est accessible en double-cliquant sous Plan: Page.

Maintenant, fournissons un événement de clic au bouton. Cliquez sur le bouton Afficher l'image, sous Inspecteur → Propriétés, double-cliquez sur l'interaction OnClick.

Comme indiqué dans la capture d'écran ci-dessus, cliquez sur Afficher / Masquer sous Widgets. Il affichera automatiquement les widgets disponibles pour configurer les actions. Cochez sélectionnez showImageDynamicPanel. Cliquez sur OK.

Maintenant, cliquez sur Aperçu. Sur l'écran d'aperçu, cliquez sur Afficher l'image. Une autre interaction pour un bouton est enfin créée.

Dans ce chapitre, nous aborderons la logique conditionnelle utilisée dans Axure RP.

Si - Alors - Sinon dans Axure

Comme tous les autres outils de programmation, Axure prend également en charge la logique conditionnelle pour créer des interactions améliorées dans les prototypes. Une fois que vous êtes familiarisé avec la façon dont vous pouvez fournir des interactions, fournir une logique conditionnelle aux interactions est le niveau suivant.

Voici le flux simple et concis pour la logique conditionnelle -

• Si, un widget / écran particulier est cliqué
• Ensuite, effectuez une action / interaction particulière
• Sinon, conserver / modifier l'état du widget ou de l'écran

Pour mieux comprendre cela, reprenons notre flux de l'exemple précédent. À cette fin, il nous est nécessaire de nous familiariser avec le générateur de conditions.

Le générateur de conditions

Double-cliquez sur l'une des interactions, par exemple OnClick. Vous pourrez voir l'éditeur de cas comme indiqué dans la capture d'écran suivante.

Cliquez sur le bouton - Ajouter une condition à côté du nom du cas. Il apparaîtra ci-dessous dans la boîte de dialogue.

Comme indiqué dans la description, le générateur de conditions créera le flux If-Then-Else selon les conditions choisies dans la section condition.

Créons une condition sur ce bouton.

Nous voulons afficher le bouton Masquer l'image, une fois que le panneau dynamique est visible. Nous avons rendu le panneau dynamique visible en cliquant sur le bouton Afficher l'image dans l'exemple précédent. Maintenant, rendons visible un autre bouton Masquer l'image.

Fermez le générateur de conditions et revenez dans la zone de conception.

Insérez le bouton Masquer l'image des bibliothèques sous les bibliothèques communes. Pour réitérer, il est recommandé de nommer l'élément d'interface utilisateur juste après l'avoir inséré dans la zone de conception.

Cliquez avec le bouton droit sur le bouton Masquer l'image et cliquez sur Définir masqué. Le bouton sera masqué de la zone de conception, comme indiqué dans la capture d'écran suivante.

Maintenant, revenons aux interactions pour le bouton Afficher l'image.

Tout d'abord, sous les interactions du bouton Afficher l'image, double-cliquez sur Cas 1, vous pourrez voir l'éditeur de cas. Utilisez l'action Afficher / Masquer pour sélectionner hideImageButton et définir sa visibilité à afficher.

De même, à l'aide de l'action Afficher / Masquer, sélectionnez showImageButton et définissez sa visibilité sur Masquer.

Nous avons géré la visibilité du bouton Masquer l'image de telle sorte que, lorsque nous cliquons sur le bouton Afficher l'image, le bouton s'affiche.

Une condition complète sera comme indiqué dans la capture d'écran suivante.

Construisons la condition.

Sous la zone de conception, cliquez sur le bouton Masquer l'image. Dans la section Inspecteur, cliquez sur Ajouter un cas.

Sous Ajouter un cas, cliquez sur le bouton Ajouter une condition. Conformément à l'arrière-plan fourni précédemment, créez l'ensemble de conditions à l'aide des valeurs de liste déroulante dans le générateur de conditions.

En termes simples, avec la condition ci-dessus, nous vérifions si le panneau dynamique showImageDynamicPanel est visible ou non

Maintenant, concevons l'interaction pour le bouton Masquer l'image, configurez-la comme suit -

• Sélectionnez l'action Afficher / Masquer.
• Sélectionnez le widget showImageDynamicPanel.
• Définissez la visibilité sur Masquer.

De même, répétez l'exploration pour afficher showImageButton et masquer le hideImageButton.

Une fois terminé, cliquez sur OK pour fermer l'éditeur de cas.

Ensuite, cliquez sur Aperçu pour voir les modifications effectuées.

Les résultats positifs seront comme indiqué dans les captures d'écran suivantes.

Lorsque vous cliquez sur le bouton Afficher l'image -

Lorsque vous cliquez sur le bouton Masquer l'image -

Jusqu'à présent, nous nous sommes familiarisés avec les fonctionnalités de base d'Axure pour les interactions. Cependant, il y aura de nombreux scénarios du monde réel, où le prototype devra être intelligent. Par le mot intelligent, le prototype devra détecter l'état d'un certain widget afin d'effectuer une action / déclencher un certain comportement.

Un exemple typique d'une telle interaction est la définition de la couleur d'un bouton. Cela nécessite que l'ingénieur UX porte le chapeau de réflexion et fasse passer la conception du prototype au niveau supérieur.

Utilisation de variables dans Axure

Variable, par définition, représente un facteur susceptible de varier ou de changer. Dans Axure, nous pouvons utiliser des variables pour représenter ou identifier l'état d'un widget / interaction.

Un exemple typique sera de stocker une valeur de données lors du transfert de données d'une page à l'autre. Pour garder l'exemple simple et clair, considérons un scénario où nous devons montrer l'état d'un widget particulier.

Poursuivant notre dernier exemple, considérons que nous voulons montrer combien de fois l'image a été montrée.

Voici comment nous allons le faire -

• Nous allons créer une variable pour lancer le décompte à 0.

• En cliquant sur le bouton Afficher l'image, nous incrémenterons la valeur de cette variable.

• Affichez la valeur dans l'étiquette de texte.

Pour cet exemple, nous allons créer un texte sous le panneau dynamique. Le texte sera lu - L'image est affichée 0 fois.

Critical- Il est important que les étiquettes soient divisées en trois. Veuillez suivre les noms d'étiquettes et le texte figurant dans le tableau.

Nom de l'étiquette	Texte de l'étiquette
imageLabel	L'image est affichée
countLabel	0 (zéro en chiffres)
timesLabel	Fois

Ceci est nécessaire car nous voulons contrôler la valeur countLabel pour chaque clic sur le bouton Afficher l'image.

Définissons d'abord une variable.

Nous aurons besoin d'une variable, qui sera contrôlée lorsque le bouton sera cliqué. Cette variable dans la terminologie d'Axure est - Variable globale. Pour définir une variable globale, cliquez sur Projet dans la barre de menus, puis sur Variables globales. Une boîte de dialogue s'ouvre comme indiqué dans la capture d'écran suivante.

Cliquez sur l'icône verte plus (+) pour ajouter une variable globale. Appelons notre variable globale -varDynamicPanel. Sa valeur par défaut sera0.

Avec les interactions du bouton Afficher l'image, double-cliquez sur Cas 1. Ajoutez une autre action. Comme le montre la capture d'écran suivante, l'action estSet Text on countLabel to [[varDynamicPanel + 1]].

La sélection d'une étiquette de texte avec une valeur est assez simple. Voyons comment obtenir la valeur d'un panneau dynamique.

Comme indiqué à l'étape 4 dans la capture d'écran ci-dessus, cliquez sur fx et la boîte de dialogue suivante s'ouvrira.

Sous la première zone de texte, entrez la chaîne suivante.

[[varDynamicPanel + 1]]

Cliquez sur OK.

Maintenant, nous devons nous assurer que la variable est mise à jour après chaque clic sur un bouton.

Dans la boîte de dialogue de l'éditeur de cas, sous actions, sélectionnez Variables → Définir la valeur de la variable.

Sélectionnez le varDynamicPanel comme variable.

Définissez la variable pour extraire la valeur du texte sur le widget en tant que countLabel parmi les options disponibles.

Fermez l'éditeur de cas en cliquant sur OK. Ensuite, cliquez sur le bouton Aperçu.

Après avoir affiché / masqué l'image quatre fois, voici le résultat sur l'écran de prévisualisation.

Maintenant que vous êtes familiarisé avec les différentes interactions et événements possibles dans Axure, vous souhaiterez peut-être étendre votre travail afin de minimiser les efforts à l'avenir.

Par exemple, le tout premier exemple avec Menu classique - Horizontal, était autrefois présent dans les versions Axure comme une combinaison de différents widgets disponibles. Cela signifie qu'Axure a évolué avec le temps pour s'adapter aux widgets fréquemment utilisés sous la forme dewidget library.

Le concept de bibliothèque de widgets s'applique plus clairement dans les grandes équipes UX. Certaines organisations conservent des widgets approuvés pour les ingénieurs UX ultérieurs dans un référentiel central.

Ainsi, en un mot, Axure Widget Library est une collection de widgets personnalisés stockés dans un seul fichier. Le type de fichier pour Axure Widget Library estRPLIB.

Types de bibliothèques de widgets

Bibliothèques intégrées Axure

Ces bibliothèques sont accessibles à partir du volet Bibliothèques. Ces bibliothèques ne peuvent pas être mises à jour / supprimées. Pour la plupart des besoins de prototypage complexes, les bibliothèques intégrées Axure viennent à la rescousse.

La bibliothèque se compose de 17 widgets de flux uniques, qui sont principalement utilisés pour la création de diagrammes. En outre, il existe 25 widgets dans la bibliothèque filaire.

Un bref fonctionnement des bibliothèques est présenté au chapitre 3 - Interface utilisateur.

Bibliothèques personnalisées Axure

La communauté Axure, qui grandit de jour en jour, possède une vaste collection de bibliothèques créées par les utilisateurs. Vous pouvez les visiter à -https://www.axure.com/support/download-widget-libraries.

Les professionnels UX du monde entier, qui se sont engagés à faire grandir cette communauté, soumettent leurs travaux sur le lien ci-dessus.

Vous pouvez télécharger les bibliothèques à partir du site Web et les ajouter à Axure à l'aide de l'option Charger la bibliothèque sous bibliothèques. En outre, vous pouvez télécharger directement des bibliothèques à partir de l'interface de l'application elle-même.

Comme le montre l'écran ci-dessus, nous avons un menu contextuel dans lequel vous pouvez télécharger différentes bibliothèques proposées sur https://www.axure.com/support/download-widget-libraries. Vous pouvez également créer votre propre bibliothèque, ce qui sera pratique lors de la création de contrôles répétitifs pour un prototype donné.

Les instructions complètes pour télécharger / charger des bibliothèques sont disponibles sur: https://www.axure.com/support/reference/widget-libraries.

Lorsqu'il s'agit d'utiliser un widget personnalisé à partir de l'une de vos bibliothèques chargées, faites-le glisser et déposez-le dans la zone de conception similaire aux widgets intégrés. Si le widget comprend des variables ou un style personnalisé, leImport Wizard dialog signalerait ces dépendances.

Parmi ces dépendances, vous remarquerez peut-être que certains styles incompatibles accompagnent la bibliothèque de widgets importée. Vous pouvez choisir deCancel et importez uniquement les widgets ou cliquez sur le Finish bouton pour importer le package entier.

Une fois que vous faites glisser et déposez un widget dans votre filaire, cette instance particulière n'est plus associée à sa bibliothèque de widgets d'origine. Ainsi, les modifications et modifications apportées aux widgets dans la bibliothèque de widgets importée ne sont appliquées à aucune des instances de ces widgets dans votre fichier projet, même après l'actualisation de la bibliothèque. Rassurez-vous, une fois importés, vous pouvez utiliser les widgets de la bibliothèque importée sans vous soucier des mises à jour qui ont lieu dans la même bibliothèque de widgets que celle disponible en ligne.

Utilisation de RPLIB

L'utilisation d'un fichier de bibliothèque Axure RP est assez simple. Lorsque vous téléchargez une bibliothèque, l'icône du fichier de bibliothèque (.rplib) se distingue clairement du fichier prototype Axure RP (.rp). Par exemple, comme le montre la capture d'écran suivante.

Le mécanisme pour que cela fonctionne - Vous pouvez importer le document iOS Wireframe dans iOS Wireframe Demo.

Cette bibliothèque peut être utilisée pour plusieurs projets et les mises à jour dans le fichier de bibliothèque seront disponibles une fois que vous actualisez la bibliothèque à partir du menu contextuel. Comme souligné précédemment, cela est très pratique lorsque vous travaillez sur un projet d'équipe et que vous distribuez les bibliothèques de cette manière.

Axure RP 8 prend en charge la collaboration avec la fonctionnalité - Projets d'équipe. Cette fonctionnalité n'est pas seulement bénéfique pour les équipes distribuées mais également pour l'utilisateur unique. L'avantage pour l'utilisateur unique est la possibilité de créer une gestion des versions sur le travail en cours.

Travailler avec des projets d'équipe

Dans le scénario Projets d'équipe, chaque membre de l'équipe dispose d'une copie du projet sur son ordinateur. Ce projet sera synchronisé avec un référentiel partagé. Ce référentiel partagé est connecté à d'autres membres de l'équipe.

Après le cours d'une journée de travail, chaque membre de l'équipe créera de nouveaux éléments, extraira des fichiers et modifiera généralement le projet. Check Out est un terme couramment utilisé pour indiquer le travail en cours pour un fichier particulier.

Les modifications ne seront pas reflétées dans le référentiel partagé tant que le membre de l'équipe n'aura pas archivé tous ses éléments extraits. leManage Team Project La console fournit à tous les membres de l'équipe une vue en temps réel de l'état de disponibilité des éléments gérés par le système.

Cette vue fournit les détails d'un élément extrait par un autre membre de l'équipe.

Initier un projet d'équipe

Pour travailler ou créer un projet d'équipe, rendez-vous dans le menu Équipe. Cliquez sur Équipe, puis sélectionnez Créer un projet d'équipe à partir du fichier actuel. L'écran suivant apparaît.

Les options disponibles pour héberger un projet d'équipe sont - en utilisant AxShare et SVN. Nous discuterons d'AxShare dans la section suivante. SVN est le système de contrôle de version couramment utilisé, qui fournit un serveur pour héberger vos documents.

Suivez les instructions à l'écran pour créer un projet d'équipe et vous pourrez ensuite commencer à collaborer avec un seul fichier Axure dans toute l'équipe / l'utiliser pour votre propre stockage historique.

Partage Axure

Lorsqu'il s'agit de présenter votre prototype, plusieurs options sont disponibles selon l'environnement dans lequel vous vous trouvez. La méthode la plus couramment utilisée pour exporter votre prototype est d'utiliser Axure Share (alias AxShare).

Avec Axure Share, les capacités de collaboration suivantes sont possibles.

• Les prototypes peuvent être hébergés sur Axure Share et partagés avec les membres de l'équipe / clients impliqués.

• Avec la fonction de discussion / commentaires, vous pouvez obtenir les entrées sur le pouce sur le prototype en cours de fabrication.

Une fois que vous êtes prêt avec le prototype, vous pouvez télécharger le prototype sur AxShare en utilisant Publier → Publier sur Axure Share. La boîte de dialogue suivante s'affiche.

Vous devez créer un compte sur AxShare.com pour progresser. Si vous avez déjà un compte, vous pouvez utiliser l'option «Connexion» pour vous connecter et télécharger votre travail sur AxShare .

Les données téléchargées sont en HTML, CSS et JavaScript. Une fois téléchargé, un lien vous est fourni, que vous pouvez fournir aux parties prenantes / à l'équipe prévues.