Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:maquettes_axure

Utilisation d'Axure pour la réalisation d'un zoning (prototype)

Axure http://www.axure.com/ va vous permettre de réaliser une maquette de votre site :

  • Validant :
    • L'organisation du site (navigation).
    • L'espace occupé par les différents contenus (lisibilité).
  • Respectant l'utilisation d'une grille.
  • Comportant des annotations sur sa réalisation.

Axure est très simple d'usage. L'essentiel des manipulations consiste en des glissés/déplacés et édition d'éléments.

S’il vous paraît intimidant, c'est qu'il permet de faire un prototype d'une application interactive (web 2.0, Flash, mobile …) et de générer un cahier des charges pouvant servir de contrat avec le client.

On n'utilisera que ses fonctionnalités basiques :

  • Arborescence du site (sitemap)
  • Utilisation de composants (widget)
  • Utilisation de modèles (master)
  • Génération d'un prototype utilisable dans un navigateur
  • éventuellement génération d'un rapport au format “Microsoft Word” pour obtenir des captures des pages à intégrer dans votre dossier.

Prise en main

À titre d'exercice, vous allez réaliser l'exemple présenté ici.

Les pages

Le but est de mettre en place un peu de contenu pour se figurer l'usage du logiciel.

Renommer la page “home” en page “Page accueil” :

Ajouter un contenu fictif propre à chaque page :

  • Glisser un “Text Panel” (depuis les “Widgets”) sur la page.
  • Éditer le texte qu'il contient pour refléter le nom de la page.
  • Faire la même manipulation pour toutes les pages.

Axure permet de faire une maquette de toutes les pages de votre site.

La carte du site

Le but set de mettre en évidence l'usage d'Axure pour gérer l'arborescence du site.

Ajouter une nouvelle page et la nommer “Carte du site”.

L'ouvrir (double clic sur “Carte du site” dans “Sitemap”) et avec le menu contextuel sur “Page accueil” (clic droit sur “Page accueil” dans “Sitemap”), demander : “Generate Flow diagramme”. Le choix proposé définit l'orientation de celui-ci.

Vous pouvez donc ajouter des pages et les organiser avec Axure.

Exporter un prototype

Utiliser la commande du menu “Generate /Prototype…” ou l'icône de la barre d'outils ou la touche ”F5”.

Dans la boîte de dialogue, renseignez le nom du dossier ou sera placé l'export :

Axure doit vous présenter le résultat dans le navigateur par défaut du système.

Vous devez pouvoir afficher les différentes pages avec l'arborescence de gauche ou la carte du site.

Le code peut présenter des problèmes suivant le navigateur employé (particulièrement avec Google Chrome).

Attention : le logiciel Axure génère un prototype visible dans un navigateur. Mais cela n'a aucun rapport avec le code HTML que vous allez écrire : c'est juste une “image” figurative du résultat que vous voulez obtenir.

Ajouter une navigation

Le but est de mettre en place un élément de navigation commun à toutes les pages.

Le contenu de la navigation

  • Faire un cadre (“Wigets” : “Rectangle”).
  • Placer dessus quatre liens (“Wigets” : “Hyperlink” ou si absent, un simple texte bleu et souligné).
  • Éditer le texte des liens par un double click.

Au besoin on peut réordonner l'affichage des éléments en utilisant le menu contextuel (ex: “Order /Send to Back”) ou les icônes de la barre d'outils.

Mettre en place des interactions

Mettre en place des liens entre les pages est très simple. Ce qui peut prêter à confusion, c'est le fait qu’Axure propose d'ajouter une action à un événement (ex: un clic de souris). C'est pour permettre de modéliser “graphiquement” des interactions complexes.

Mais il existe un raccourci pour mettre en place un lien : “Quick Link…”.

  • Sélectionner un lien.
  • Puis dans le panneau “Interactions”, cliquer sur “Quick Link…”

  • Choisir la page de destination.

Faire cette manipulation pour les quatre liens :

Pour modifier un lien existant :

  • Double clic sur l'action : “Open … in current Window”
  • Clic sur nom de la page dans “Step 3”.
  • Sélectionner la nouvelle destination.
  • Valider les dialogues.

Grouper les éléments

On peut faciliter l'édition en groupant les éléments.

Sélectionner les liens et le cadre (Maj+Click ou glissé pour sélectionner une zone).

Les grouper en utilisant le menu contextuel (“Grouping /Group”) ou l'icône de la barre d'outil ou Ctrl+G :

Ils se déplacent maintenant conjointement. Mais vous pouvez encore les éditer en double-cliquant sur chacun.

Faire de la navigation un modèle ("Master")

Les “Master” permettent d'éviter les répétitions des éléments communs à différentes pages.

Par le menu contextuel : (“Convert /Convert to master”) :

Vous pouvez placer un modèle (“Master”) sur différentes pages.

Un double click sur un modèle (“Master”) ouvre l'original pour édition. Son changement est répercuté sur toutes les pages ou il est utilisé.

Si on désire modifier un modèle (“Master”) pour une page spécifique, on peut utiliser la commande du menu contextuel “Master /Flatten” : cela rompt le lien avec l'original.

Mettre un modèle en fond

Si le placement du modèle (“Master”) et commun à toutes les pages ou il est utilisé : on peut utiliser la commande du menu contextuel “Master /Place In Background” :

  • On ne peut plus déplacer le modèle (“Master”) sur les pages ou il est utilisé.
  • Sa place est définie en éditant le modèle lui-même (donc commune à toutes les pages).

Vous aurez besoin d'éditer le “Master” “Navigation” (double clic sur lui) pour le re-placer :

Dans le panneau “Masters” vous pouvez définir le comportement par défaut des modèles sur les pages ou ils sont mis en place :

Menu contextuel “Behavior” :

  • “Normal” : Le contenu est commun à toutes les pages. Mais on peut le placer librement sur chaque.
  • “Place in background” : Son contenu et sa place sont définis par le modèle pour toutes les pages.
  • “custom widget” : Son contenu est copié lors de l'ajout à une page. Chaque page à sa copie propre modifiable indépendamment.

Réalisation du fond de page

On peut composer les modèles (“Master”) pour mettre en place facilement les éléments communs à une ou plusieurs pages.

Faire un modèle ("Master") "Grille"

Le but est de faire un “Master” “Grille” qui sera “Place in background” par défaut ou l'on fera figurer la grille de mise en page par des rectangles régulièrement espacés.

  • Faire le nouveau “Master”.
    • Le renommer “Grille”.
    • Changez son comportement par défaut : menu contextuel “Behavior /Place in background”
    • Placez un “rectangle” depuis “Widgets”
      • Ajuster précisément sa taille et position par le menu “View /Location and Size…”

ou

  • Left : 10
  • Top : 0
  • Width : 60
  • Height : 2000 (ou plus).
  • Changez sa couleur de fond pour un gris avec de la transparence.

  • Changez la couleur des bords pour du rouge avec transparence.

  • Dupliquez le rectangle précédant en positionnant sa copie à 20 pixels
    • Vous pouvez faire cela par un glissé déplacé combiné avec la touche ”CTRL”.
  • Répétez l'opération pour couvrir une taille de 960 pixels.

Remarque, vous pouvez construire la grille que vous voulez en partant d'une largeur (ex:960 pixels) et d'un nombre de divisions (ex: 12).

  • Vous obtenez la taille d'un “pas” : le contenu + les gouttières (ex: 80 pixels).
  • Vous retranchez la taille des gouttières (l'espace entre les colonnes) (ex: 20px) pour obtenir la largeur d'une colonne (ex: 60 pixels).
  • Avant la 1re colonne et après la dernière : vous avez une “demi-gouttière” (ex: 10px);

Alternative : utiliser les guides

Faire un modèle ("Master") "Fond"

Le “Fond” de page recevra les éléments communs à toutes les pages.

Comme le précédent sauf le dessin de la grille. Puis :

  • Placez dessus la grille
  • Puis placez dessus la navigation
  • Ajouter le titre du site
  • Ajouter un logo (“Placeholder” ou “Image”)
    • Lui ajouter comme comportement (“Quick link”) de retourner à la page d'accueil.

Maintenant il ne reste plus qu'à l'utiliser sur toutes les pages.

Chaque page aura le même “Fond” plus un contenu propre.

Annotation des éléments

Axure permet l'ajout d'annotation qui peut être utile pour la réalisation. On va l'utiliser pour :

  • Les noms des éléments servant à la mise en page.
  • Les éventuelles classes CSS.
  • Une description textuelle de leurs rôles.
  • D'éventuels détails techniques pour les CSS (propriétés/valeursreflétant les techniques CSS de mise ne page employés).

Utiliser les "labels"

On va utiliser le champ “Labels” du panneau “Annotation & interactions” pour renseigner :

  • Les noms des éléments servant à la mise en page (ex: “SECTION”).
  • Les éventuelles classes CSS qui seront notées comme un sélecteur CSS (ex: ”.classe.autre-classe” ).
  • Important : les labels ne sont visible à l'export que si vous ajouter une annotation (eg. description).

Ici “NAV.principale” :

Personnaliser les annotations

La partie “Annotations” du panneau “Annotation & interactions” permet d'ajouter toutes sortes d'information.

Mettre dans “Description” le rôle des éléments annotés. Vous pouvez les reprendre des contraintes du projet.

Elles seront visibles en cliquant sur l'annotation dans l'export du prototype.

On peut aussi ajouter ses propres annotations (ex: “Techniques CSS”) :

Il est possible de personnaliser la vue du panneau “Annotations” pour plus de commodité :\\

Exporter les annotations

L'intérêt d'ajouter des annotations est d'avoir un prototype qui comporte toutes les indications nécessaires à sa réalisation :

  • Les noms des éléments et leurs classes CSS pour le code HTML.
  • Les dimensions (alignées sur la grille).
  • Les propriétés CSS à appliquer aux éléments pour avoir la mise en page désirées.

Ce point sera noté. Les renseignements que vous donnerez lors du premier rendu ne seront pas nécessairement définitifs ni corrects. Mais cela vous forcera à anticiper sur les difficultés de réalisation.

Paramétrer l'export :

Quand vous demander l'export du prototype, dans la section “Annotations” : cocher “Use Label as note”.

Ainsi vous verrez dans le prototype les noms des éléments et leurs classes CSS :

En cliquant sur une annotation vous pourrez voir sa description et les éventuelles informations saisies pour les CSS.

Travail pour le projet

Le but est de débuter la réalisation la maquette de votre projet.

Faire le même travail que l'activité précédente, mais en l'adaptant à votre projet :

  • Choisir une grille (exemple: 960 pixels de large, mais divisé en 8,12 ou 16 avec une taille de gouttière adaptée).
  • Faire des modèles (“Master”) pour les différents éléments donnés en consignes.
  • Faires des modèles (“Master”) pour les pages “types” (les éléments se répétant).
  • Faire l'arborescence de votre site.
  • Placer les contenus sur les différentes pages :
    • Vos textes.
    • Pour les illustrations de contenu et autre image : utilisez un élément “Placeholder”.
  • Ajuster la typographie (police/taille) pour pouvoir évaluer correctement les placements et lisibilités des contenus.
    • Vous pouvez employer les polices de votre graphisme si vous les connaissez déjà. Sinon grader la police standard (“Arial”).
  • Ajouter les annotations pour le code HTML :
    • “label” : Les noms des éléments HTML (“balises”) avec leurs éventuelles classes (notation sélecteurs CSS).
    • “Descrition” : leurs rôles sous forme de phrase (vous pouvez reprendre celles des consignes).
    • “Techniques” : des propriétés/valeurs CSS qui seront utilisées pour la mise en pages par le biais des CSS.
    • Si vous avez des zones (“Rectangles”) qui ne correspondent pas à des éléments de votre graphisme, vous pouvez les mettre en place comme des annotations :
      • Choisir une couleur de bord jaune clair comme les annotations
      • Ne pas mettre de colleur de fond

Ce qui ne doit pas figurer dans votre “zoning”/prototype :

  • Les couleurs.
  • Les graphismes d'interfaces et images de contenu.

Le travail à rendre le fichier avec les annotations !.

Les critères de notations sont le respect des consignes précédentes (annotations HTML principalement).

cours2012/concepts_et_outils_pour_internet/maquettes_axure.txt · Dernière modification: 2012/10/09 22:00 (modification externe)