Menu

Dans un pro­to­type, on veut sou­vent qu’un menu soit pré­sent dans toutes les vues auquel il per­met d’accéder, et qu’un item du menu soit visuel­le­ment dis­tinct des autres pour mon­trer qu’elle cor­res­pond à la vue en cours. (Par vue j’entends une page ou une sec­tion 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­ca­ler un nou­vel item ou chan­ger un lien, il fau­dra le répé­ter par­tout. Comme d’habitude, évi­tons de nous répé­ter.

Meilleure solu­tion : uti­li­ser un mas­ter. Comme ça, toute modi­fi­ca­tion ulté­rieure du menu sera réper­cu­tée dans chaque vue. Axure offre même une fonc­tion pour insé­rer à votre place un mas­ter dans les pages et à l’emplacement de votre choix (clic droit sur un mas­ter dans le pan­neau dédié, puis « Add to pages ». Sauf cas par­ti­cu­lier (par exemple si vous vou­lez chan­ger la hau­teur du menu), vous n’avez plus à tou­cher à chaque écran. Oui mais, com­ment signi­fier qu’une vue est sélec­tion­née ?

Solution ultime : un mélange de ce qu’Axure appelle les styles d’interaction et de l’évènement onPa­ge­Load.

Premier ingrédient : les styles d’interaction

Les styles d’interactions sont des varia­tions visuelles qui s’activent lorsqu’un wid­get est dans un état don­né. Il y a le clic, le sur­vol, l’inactivité et la sélec­tion.¹ C’est cette der­nière qui nous inté­resse. Il faut spé­ci­fier :

• Le style lui-même. Ici, ça peut être que le libel­lé passe en gras. Une fois ajou­té, il appa­rait dans le pan­neau « Widget pro­per­ties ».
• L’action qui le déclenche.

Second ingrédient : onPageLoad

Axure per­met d’exécuter des actions au char­ge­ment d’une page, dans l’onglet « Page inter­ac­tions » du pan­neau « Page pro­per­ties ». Ici, cela per­met d’activer un item du menu dif­fé­rent à chaque page, même s’il est dans un mas­ter.

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 aus­si au sein d’une page. Dans ce cas, le menu n’est plus un mas­ter mais une simple suite de wid­gets, et chaque vue est un état d’un pan­neau dyna­mique. Au clic sur l’item 1 du menu, on le passe en « Sélectionné »et on passe le pan­neau à l’état 1.

Un tuto­riel plus com­plet.

Fil d’Ariane

Un fil d’Ariane, c’est encore un objet constant à tra­vers les pages mais dont un aspect change. Pour que la page sélec­tion­née soit en gras, il suf­fit de suivre les expli­ca­tions plus haut. Mais com­ment faire pour le nom de la page qui change à chaque fois. La solu­tion, c’est d’utiliser un mas­ter 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é­fi­nie par Axure cor­res­pond au titre de la page tel que défi­ni dans votre arbo­res­cence, donc si elle s’appelle « 04-b », le fil d’Ariane com­por­te­ra « 04-b ».