Issuu on Google+

Mars 2014 - CONFIDENTIAL


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


AXURE – C’EST QUOI ?

Outil pour concevoir et spécifier les fonctionnalités d’un site web

Conception

 

Arborescence Parcours utilisateur Zoning / Wireframe

Spécifications

 

Mars 2014 - CONFIDENTIAL

Règles « métiers » Règles d’affichage


POURQUOI AXURE ET PAS POWERPOINT/VISIO ? Pour tous les acteurs et à toutes les étapes d’un projet

Conception centralisée et mise à jour simplifiée

  

 

Tester et valider la conception avec un prototype HTML

 

Génération automatique des spécifications fonctionnelles

 

Clients : support de validation avant production Créatifs : support de création (contenus) Développeurs : support de développement

Diagramme de flux / zoning / règles métier Master permettant la création de composants réutilisables (Menu, Header, Footer, etc.) Régénération du prototype et spécifications en un clic (pour Dév seulement)

Eviter les erreurs grossières de conception dans la navigation, l’arborescence, etc. Pouvant être partagé avec le client pour validation Support de brief créas et support de développement

Au format word (customisable avec un template word Same Same) Document présentable

Mars 2014 - CONFIDENTIAL


DÉTAILS PRATIQUES

Des vidéos de formation, des exemples et de la documentation sont à disposition sur le site axure (anglais seulement, à vos dicos!)

• • •

Tutoriels de formation Vidéos de formation Librairies de composants supplémentaires pour designer des sites mobiles (grilles reponsive par exemple), des galeries d’images, etc.

http://www.axure.com/community

Mars 2014 - CONFIDENTIAL


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


INTERFACE

6

4

1

Interactions + notes par widget

Arborescence

2

7 Page

Widgets

Style widget

3

8 5

Masters

Mars 2014 -par CONFIDENTIAL Notes pages

Widget manager


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


DÉFINIR L’ARBORESCENCE

• Pour spécifier l’arborescence : « sitemap », ajouter les pages • Nommer chaque page et les ordonner de façon à avoir des rubriques « mères » et des rubriques « filles » • Double cliquer sur la page pour la spécifier Création de page : • En cliquant sur ce bouton Organisation des pages : • Drag & Drop des pages / utilisation des flèches de l’encadré

Mars 2014 - CONFIDENTIAL


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


DÉFINIR LES MASTERS NOMME TES MASTERS ! •

Les masters permettent de définir les éléments qui se retrouvent sur plusieurs pages : – Header – Footer – Menu de navigation … Simplement : les éléments récurrents !

Au lieu de spécifier à chaque fois, sur chaque page, il suffit de modifier le master désiré pour qu’il soit modifié sur toutes les pages (= gain de temps)

Il est très important d’avoir des masters clairement définis incluant toutes les fonctionnalités. C’est parfois long à mettre en place, mais le gain de temps par la suite est indiscutable.

Mars 2014 - CONFIDENTIAL


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


CONCEVOIR UNE PAGE À L’AIDE DES WIDGETS Un widget, was ist das ? (Qu’est-ce que c’est ?) • C’est un élément type que l’on retrouve sur des pages web, comme par exemple : des liens, des images, des menus déroulant, des champs de formulaire… • Un widget te permettra de créer entièrement ta page à l’aide de différents éléments, dynamiques ou non.

Comment les utiliser ? • C’est très simple, tu sélectionnes le widget désiré et tu le glisses dans la partie « Page ». • A savoir qu’il faudra choisir les éléments pré-définis (oui, toujours les widgets) pour chaque page. Ce n’est pas un master.

Mars 2014 - CONFIDENTIAL


CONCEVOIR UNE PAGE À L’AIDE DES WIDGETS IMPORTANT Tu dois nommer chaque élément correctement -> Rdv dans le « WIDGET MANAGER »

Cela te permettra d’avoir une liste claire et compréhensible quand tu assigneras des liens et des actions (on voit ça juste après!).

Mars 2014 - CONFIDENTIAL


LISTE DES WIDGETS Image

Image

Heading ½

Titre

Label

Texte

Paragraph

Devine ?

Placeholder

Espace réservé pour…

Button Shape

CTA stylisé

Hot spot

Image cliquable

Dynamic Panel

Objet dynamique

Inline Frame

iFrame

Text Field

Champ formulaire – 1 ligne

Text Area

Champ formulaire – Multi ligne

Droplist

Menu déroulant

Listbox

List

Checkbox

Case à cocher

Radio Button

Case à choisir

HTML Button

CTA système

Mars 2014 - CONFIDENTIAL


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


STYLES Ces styles s’appliquent de différentes façons : - Au passage sur l’élément : MouseOver - A la sortie de l’élément : MouseDown - Lorsque l’élément est sélectionné ou désélectionné (une checkbox par exemple) Pour visualiser ces options, il est nécessaire d’appuyer sur F5 (preview) ou depuis l’onglet « Publish » -> Preview

Mars 2014 - CONFIDENTIAL


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


DYNAMIC PANEL

Dernière étape pour maitriser Axure en version prototype HTML, Le widget Dynamic Panel est un conteneur pouvant contenir, d'autres widgets sous la forme de couche.

En utilisant les interactions « On click » de certains widget, le panneau peut être visible comme bon vous semble. Toutefois, Il est toujours visible par défaut, à toi de le rendre invisible via un clic droit -> « Set Hidden » afin de préparer ton interaction C’est l’outil principal qu’il faudra utiliser lors de la création de vos prototypes. Un tutoriel simple pour comprendre son fonctionnement : https://www.axure.com/learn/dynamic-panels/basic

Mars 2014 - CONFIDENTIAL


DYNAMIC PANEL IMPORTANT Tu dois nommer chaque élément correctement -> Rdv dans le « WIDGET MANAGER »

Cela te permettra d’avoir une liste claire et compréhensible quand tu assigneras des liens et des actions (on voit ça juste après!).

Mars 2014 - CONFIDENTIAL


Sommaire 1. ENTRÉE EN MATIÈRE 2. INTERFACE 3. ARBORESCENCE 4. MASTERS 5. WIDGETS 6. STYLES 7. DYNAMIC PANEL 8. INTERACTIONS / NOTES Mars 2014 - CONFIDENTIAL


SPÉCIFICATIONS DE PAGES

« Pages notes » en bas de l’interface est pour les spécifications par pages. Des éléments de spécifications personnalisés peuvent être ajoutés. Les notes peuvent être destinées soit au client (à simplifier), soit au développeur.

Mars 2014 - CONFIDENTIAL


SPÉCIFICATIONS PAR ÉLÉMENT

Ce menu permet la spécification de chaque élément. Toutes les spécifications seront dans le document de spécifications sous la forme d’un tableau qui listera tous les éléments de la page.

Mars 2014 - CONFIDENTIAL


SORTIE HTML

Enfin, on peut générer indépendamment le prototype html de ces spécifications. F8 Génération du prototype HTML F9 Génération des spécifications

Mars 2014 - CONFIDENTIAL


T’inquiète pas, tu vas y arriver

Mars 2014 - CONFIDENTIAL


Formation axure