EN

Réalités Parallèles

Ergonomie et conception de jeu vidéo

Les bases d’Axure partie 1 - Créer une maquette navigable dans Axure

  1. Créer un lien dans Axure
  2. Créer un lien avec des options avancées
  3. Créer un lien retour vers la page précédente

Nous vous avons présenté les principales fonctionnalités d’Axure et l’organisation de son interface. Dans ce post, nous allons apprendre à créer une interface navigable simple.

Créez une maquette statique en ajoutant les widgets que vous voulez dans la page par glisser-déposer.

Créer un lien dans Axure

Une fois satisfait de votre page, sélectionner l’élément sur lequel créer un lien en cliquant dessus. Dans ce cas, nous voulons qu’un click sur “Menu 1” nous amène sur une autre page. Le contour vert et les coins carrés vous confirment que vous avez bien sélectionné le widget voulu.

Capture d'écran de l'interface axure avec le bouton à rendre interactif sélectionné.

Sur la zone droite de l’interface, le menu d’interactions vous montre différentes options:

Capture d'écran du panneau permettant d'ajouter des interactions.

Nous allons nous intéresser aux deux liens bleus situés au dessus. Le second “Create Link” permet de créer simplement un lien au click sur l’élément sélectionné. Cliquez dessus pour ajouter un lien. Axure vous affiche la liste des pages existantes. Choisissez celle qui vous convient et le lien sera créé.

Capture d'écran du choix de la page cible quand on clique sur créer un lien directement.

Si votre wireframe comprend de nombreuses pages, vous pouvez les filtrer en tapant une partie de son nom. La liste n’affichera alors plus que les contenus pertinents.

Dès que vous avez cliqué sur la page, deux indications vous confirmeront que le lien a bien été créé:

Dans la colonne droite, sous “On click”, vous verrez un nouveau “case” indiquant “open (nom de votre page) in current window”.

Capture d'écran du résultat dans le panneau d'interactions une fois le lien créé avec succès.

Si vous regardez le bouton que vous venez de rendre cliquable, vous verrez une petite indication : un nombre dans un carré bleu. Il indique l’existence d’une interaction et l’ordre dans lequel elles ont été créées.

Capture d'écran du résultat indiquand qu'une interaction existe via une icone blueue numérotée sur le bouton avec le lien.

Cette approche est parfaite pour réaliser très rapidement une maquette cliquable. Si vous avez besoin d’options avancées, ou si vous voulez modifier un lien, cliquez sur le bouton “on click” ou sur le nom du case que vous voulez éditer.

Créer un lien avec des options avancées

Sélectionnez le bouton à rendre interactif. Sur la droite, le lien créé sur le premier bouton n’est plus affiché. Cette zone est spécifique à l’élément sélectionné et inactive lorsque vous n’avez rien sélectionné ou si vous avez sélectionné plusieurs éléments à la fois.

Cliquez sur “Onclick” pour ouvrir le dialogue de création d’actions.

Capture d'écran de l'interface d'Axure avec le second bouton sélectionné.

Voici le dialogue qui s’affiche:

Capture d'écran de l'éditeur de cas lorsqu'on vient de l'ouvrir.

Ce dialogue est divisé en trois colonnes, dans l’ordre d’utilisation.

Pour créer un lien, sélectionnez l’interaction “create link” dans la première colonne.

L’action s’ajoute dans la colonne centrale. elle est sélectionnée par défaut. Ses options sont donc visibles dans la colonne de droite.

Capture d'écran de l'éditeur de cas avec un lien sélectioné.

Vous pouvez alors choisir d’ouvrir la page dans la même fenêtre, un nouvel onglet, une nouvelle fenêtre, et bien sur la page de destination.

Capture d'écran du panneau permettant d'ajouter des interactions.

En bas de la colonne, vous pouvez également créer un lien vers un site en ligne.

Créer un lien retour vers la page précédente

Vous pouvez ajouter un lien avec un comportement spécial: comme un bouton retour par exemple, qui amène dynamiquement l’utilisateur sur la dernière page consultée, en fonction de sa navigation.

Pour faire cela, vous devez sélectionner l’ouverture d’une page dans la même fenêtre. Sélectionnez ensuite “back to previous page”.

Capture d'écran du panneau permettant d'ajouter des interactions avec un focus sur le bouton radio tout en bas de la troisième colonne.

Les options disponibles en bas de cette colonne dépendent d’autres choix. En créant un lien, vous n’aurez pas les mêmes options selon que vous ouvriez ce lien dans la même fenêtre, dans une autre fenêtre ou comme pop up…

Avec ces interactions, vous pouvez simplement créer une maquette navigable. Testez et expérimentez avec les options pour vous les approprier. Dans le prochain post, nous verrons comment créer des interactions à l’intérieur d’une même page, avec des zones de contenus dynamiques et des ancres. Entre temps, n’hésitez pas à poster vos commentaires et questions!

Posté par Cornelia le 2015-02-12. Dernière mise à jour le 2020-12-21

Articles sur des sujets connexes

Presentation Axure

Didacticiel Axure Débutant, Maquettage en fil de fer,

Les bases d’Axure partie 2 - Créer des interactions au sein des pages

Didacticiel Axure, Didacticiel Axure Débutant, Formation prototypage wireframe interactif, Maquettage en fil de fer,

Les bases d’Axure - créer des menus optimisés avec les dynamic panels

Didacticiel Axure, Didacticiel Axure Débutant, Formation prototypage wireframe interactif, Maquettage en fil de fer,

Axure avancé - itérer plus vite en utilisant bien les widgets

Didacticiel Axure, Formation prototypage wireframe interactif, Maquettage en fil de fer,

Les bases d’Axure partie 3 - les dynamic panels

Didacticiel Axure, Didacticiel Axure Débutant, Formation prototypage wireframe interactif, Maquettage en fil de fer,

Les bases d’Axure partie 4 - Comment utiliser les Masters dans Axure

Didacticiel Axure, Didacticiel Axure Débutant, Formation prototypage wireframe interactif, Maquettage en fil de fer,