Axure RP - Interface utilisateur

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 vous sera présenté 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 riche ensemble de contrôles d'interface utilisateur classés en fonction de leur domaine d'applications.

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 par 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 en main 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.