Axure : Créer un menu et un fil d’ariane sans dupliquer aucun contenu

Menu

Dans un proto­type, on veut souvent qu’un menu soit présent dans toutes les vues auquel il permet d’ac­céder, et qu’un item du menu soit visuel­le­ment distinct des autres pour montrer qu’elle corres­pond à la vue en cours. (Par vue j’en­tends une page ou une section au sein d’une page.)

Solution bour­rine : dupli­quer le menu autant de fois qu’il y a de vues. oui, mais si on danse si quelque chose change ? Par exemple si je dois inter­caler un nouvel item ou changer un lien, il faudra le répéter partout. Comme d’ha­bi­tude, évitons de nous répéter.

Meilleure solu­tion : utiliser un master. Comme ça, toute modi­fi­ca­tion ulté­rieure du menu sera réper­cutée dans chaque vue. Axure offre même une fonc­tion pour insérer à votre place un master dans les pages et à l’emplacement de votre choix (clic droit sur un master dans le panneau dédié, puis « Add to pages ». Sauf cas parti­cu­lier (par exemple si vous voulez changer la hauteur du menu), vous n’avez plus à toucher à chaque écran. Oui mais, comment signi­fier qu’une vue est sélec­tionnée ?

Solution ultime : un mélange de ce qu’Axure appelle les styles d’in­te­rac­tion et de l’évè­ne­ment onPageLoad.

Premier ingrédient : les styles d’interaction

Les styles d’in­te­rac­tions sont des varia­tions visuelles qui s’ac­tivent lors­qu’un widget est dans un état donné. Il y a le clic, le survol, l’inac­ti­vité et la sélec­tion.1 C’est cette dernière qui nous inté­resse. Il faut spéci­fier :

  • Le style lui-même. Ici, ça peut être que le libellé passe en gras. Une fois ajouté, il appa­rait dans le panneau « Widget proper­ties ».
  • L’action qui le déclenche.

Axure tuto 1
Axure tuto 2

Second ingrédient : onPageLoad

Axure permet d’exé­cuter des actions au char­ge­ment d’une page, dans l’on­glet « Page inter­ac­tions » du panneau « Page proper­ties ». Ici, cela permet d’ac­tiver un item du menu diffé­rent à chaque page, même s’il est dans un master.

sans titre 5

Un tuto­riel sur Axure.com avec un fichier source pour essayer.

Et au sein d’une page ?

Notez que le truc marche entre pages, mais aussi au sein d’une page. Dans ce cas, le menu n’est plus un master mais une simple suite de widgets, et chaque vue est un état d’un panneau dyna­mique. Au clic sur l’item 1 du menu, on le passe en « Sélectionné »et on passe le panneau à l’état 1.

Un tuto­riel plus complet.

Fil d’Ariane

Un fil d’Ariane, c’est encore un objet constant à travers les pages mais dont un aspect change. Pour que la page sélec­tionnée soit en gras, il suffit de suivre les expli­ca­tions plus haut. Mais comment faire pour le nom de la page qui change à chaque fois. La solu­tion, c’est d’uti­liser un master pour le fil d’ariane et d’ajouter à chaque char­ge­ment de page une action « Set text », avec la valeur [[PageName]]. Cette variable prédé­finie par Axure corres­pond au titre de la page tel que défini dans votre arbo­res­cence, donc si elle s’ap­pelle « 04‑b », le fil d’Ariane compor­tera « 04‑b ».

Axure tuto 4


  1. Attention : Axure, aimant la simpli­cité, distingue ces styles de la liste d’évè­ne­ments, laquelle comporte des termes très proches (mouseOver vs onMouseHover vs Selected). Because 

Articles liés

Attention, commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.