Axure RP - Interactions de base

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. Maintenant, quand il s'agit de créer des prototypes interactifs, il y a toujours une mise en garde pour créer un prototype trop interactif. C'est la raison pour laquelle, il est logique de commencer par une seule interaction importante à 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 multitude 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 en dessous de 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 sur 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é. Vérifiez 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.

Propriété OnClick à l'aide d'un widget bouton.