Maquettes¶

Cette section regroupe les wireframes basse fidélité de l'application VigieChiro PR Companion. Chaque maquette est décrite par :

un wireframe SVG présentant le layout final attendu (cadre fenêtre, top nav, contenu, footer) ;
la liste des composants affichés et leurs données d'exemple ;
les interactions clés entre éléments ;
les variantes (état vide, modales, panneaux dépliés, écrans intermédiaires) regroupées dans le même fichier ;
les parcours et stories rattachés ;
des notes d'implémentation ciblées (composants JavaFX recommandés, points d'attention performance ou UX, raccourcis claviers).

Wireframes basse fidélité, pas spec figée

Ces maquettes posent l'organisation des écrans et la hiérarchie des informations à afficher. Elles n'imposent pas le style visuel final (couleurs, typographies, icônes, espacements précis) — ce travail vous revient et fait partie de l'évaluation R2.02 / R2.03.

Vous pouvez proposer une variante d'un écran si vous identifiez une meilleure organisation — dans ce cas, justifiez le choix dans votre soutenance.

Cartographie des écrans¶

#	Écran	Type	Parcours principal	Épopées couvertes
M-Sites	Vue de mes sites de suivi	Vue principale (accueil)	P1	E1.S1, E1.S4
M-Site-detail	Fiche détail d'un site	Vue secondaire	P1	E1.S2, E1.S3
M-Import	Assistant d'import d'une nuit	Vue principale	P2	E2.S1 à E2.S7
M-Passage	Détail d'un passage (4 onglets)	Vue pivot	transverse	E0.S3, E4.S4, E6
M-Qualification	Vérification d'enregistrement par échantillonnage	Vue plein écran	P3	E3
M-Lot	Préparation du lot à déposer	Vue plein écran	P4	E4.S1 à E4.S3
M-MultiSite	Vue tabulaire multi-sites (Karim / Samuel)	Vue de production	P5	E5
M-Vision-Tadarida	Validation taxonomique post-Tadarida	Vue plein écran (cible étirée)	P7	E7, E8

Comment lire une maquette¶

Chaque fichier .md suit la même structure :

En-tête avec type, persona principal, parcours et stories couvertes.
Wireframe principal : un SVG inline qui représente l'écran cible avec des données d'exemple cohérentes (n° de carré 640380, PR 1925492…).
Annotations : explication de chaque zone du wireframe (header, sections numérotées, badges, etc.).
Interactions clés : tableau des actions disponibles sur chaque élément cliquable.
Variantes (quand pertinent) : wireframes secondaires dans le même fichier — état vide, modales, écrans intermédiaires (ex. progression d'un import), bascule de mode (vue tableau vs arborescence).
Notes pour l'implémentation : composants JavaFX recommandés, points de performance, raccourcis claviers, dépendances entre maquettes.

%%{init: {"flowchart": {"defaultRenderer": "elk"}, "themeCSS": ".nodeLabel, .nodeLabel p, .nodeLabel span { color: #fff !important; fill: #fff !important; }"}}%%
flowchart TB
    Sites[🏠 M-Sites]
    MultiSite[📊 M-MultiSite]
    Detail[🌐 M-Site-detail]
    Import[📥 M-Import]
    Passage[📋 M-Passage]
    Qualif[🎧 M-Qualification]
    Lot[📦 M-Lot]
    Tadarida[✅ M-Vision-Tadarida]

    Sites --> Detail
    Sites --> Import
    MultiSite -.alternative.- Sites
    Detail --> Passage
    Import --> Passage
    MultiSite --> Passage
    Passage --> Qualif
    Qualif --> Lot
    Passage --> Lot
    Lot -.dépôt VigieChiro<br/>+ retour Tadarida.-> Tadarida

    classDef main fill:#1e8449,stroke:#0e5128,color:#fff,stroke-width:2px
    classDef detail fill:#4a90d9,stroke:#2563a3,color:#fff,stroke-width:2px
    classDef etiree fill:#b9770e,stroke:#7e5109,color:#fff,stroke-width:2px
    class Sites,Import,Qualif,Lot main
    class Detail,Passage,MultiSite detail
    class Tadarida etiree

🟩 Vert : maquettes de la chaîne fil rouge (MUST).
🟦 Bleu : maquettes de soutien (détails, navigation multi-sites).
🟧 Orange : maquette de cible étirée hors MVP strict.

Pattern visuel partagé¶

Toutes les maquettes utilisent un cadre fenêtre commun :

Title bar sombre (#2c3e50) avec logo 🦇 + nom de l'application.
Top nav un cran plus clair (#34495e) avec 4 entrées principales (Mes sites, Importer, Vue tabulaire, Paramètres).
Breadcrumb quand l'écran est en profondeur dans la navigation.
Page header avec titre principal et sous-titre éventuel.
Sections numérotées pour les écrans assistant (M-Import, M-Lot) ou panneau de détail (M-Qualification, M-Vision-Tadarida).
Footer avec astuces clavier et indicateurs d'état.

Palette de couleurs (cohérente avec le reste du dossier) :

Usage	Couleur	Exemple
Primary actions / liens	`#4a90d9` (bleu)	Boutons « Importer », liens breadcrumb
Success / verdict OK	`#1e8449` (vert)	Badges Déposé OK, statut Vérifié
Warning / verdict Douteux	`#b9770e` (orange)	Statut Transformé, cible étirée
Danger / verdict À jeter	`#a93226` (rouge)	Bouton Supprimer, verdict À jeter
Neutral / inactif	`#6a737d` (gris)	Texte secondaire, états désactivés
Background subtil	`#f6f8fa` (gris très clair)	Bandeaux d'info, rows alternées

Cohérence entre écrans similaires :

M-Qualification et M-Vision-Tadarida partagent le même squelette « liste + détail » (2 colonnes, panneau de détail avec info en haut + visualisation au milieu + boutons d'action colorés en bas). Les étudiants n'implémentent qu'un seul pattern de « lieu d'écoute » qui se décline pour les deux cas.
M-Sites et M-Site-detail utilisent le même style de cards pour les sites et les points d'écoute.

Cas non maquettés (documentés textuellement)¶

Certains écrans secondaires ne font pas l'objet d'un wireframe complet mais sont décrits dans les fiches correspondantes :

Formulaire de création d'un site : décrit dans la variante de M-Site-detail et invocable depuis M-Sites.
Modal de re-rattachement d'un passage (E2.S8) : action accessible depuis M-Passage.
Modal de suppression de masse (E5.S4) : confirmation forte avec saisie « SUPPRIMER ». Décrite dans M-MultiSite.
Sélecteur de taxon de correction (E7.S4) : autocomplete sur code à 6 lettres. Décrit dans M-Vision-Tadarida.
Modal de confirmation « J'ai déposé » (E4.S3) : avant transition vers le statut Déposé. Décrite dans M-Lot.

Maquettes¶

Cartographie des écrans¶

Comment lire une maquette¶

Convention de navigation entre écrans¶

Pattern visuel partagé¶

Cas non maquettés (documentés textuellement)¶