Maquettes¶

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

une maquette SVG présentant l'agencement final attendu (cadre fenêtre, barre de navigation, contenu, pied de page) ;
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).

Maquettes basse fidélité, pas spécification 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 niveau relève de l'implémentation.

Une variante d'un écran est envisageable si elle améliore l'organisation ; le choix se justifie alors dans la documentation.

Cartographie des écrans¶

#	Écran	Type	Parcours principal	Épopées couvertes
M-Accueil	Lanceur (bandeau nocturne + deux prismes)	Écran d'accueil (point d'entrée)	transverse (tous)	toutes (lanceur)
M-Sites	Vue de mes sites de suivi	Vue principale	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-SonsValidation	Sons & validation (écoute, validation taxonomique, références)	Vue plein écran (4 sources)	P7, P10	prisme biodiversité
M-Lot	Préparation du dépôt	Vue plein écran	P4	E4.S1 à E4.S3
M-MultiSite	Carte & passages (carte au carroyage + tableau)	Vue plein écran	P5	E5
M-Diagnostic	Diagnostic matériel d'un passage	Vue secondaire (depuis M-Passage)	P6	E6
M-Audit	Audit de cohérence (disque, base et serveur confrontés)	Vue plein écran (depuis l'accueil)	transverse : se consulte quand un doute naît, après un import, un dépôt ou un changement de disque	E0.S11
M-Analyse	Espèces & observations (inventaire transverse)	Vue plein écran	P11	prisme biodiversité
M-Recherche	Recherche globale (liste déroulante du chrome)	Transverse (tous écrans)	P8	recherche transverse
M-Synthese	Synthèse d'une nuit (activité replacée dans son référentiel)	Vue secondaire (depuis M-Passage)	P11, P7	prisme biodiversité
M-Activite	Activité de la nuit (courbes horaires par espèce)	Depuis M-Passage (une nuit) et depuis l'accueil (toutes les nuits)	P11, P6	prisme biodiversité
M-Saison	Solde de la saison (reste à faire, point par point)	Vue plein écran (depuis l'accueil)	P5, P9	prisme collecte & passages
M-CompteRendu	Compte rendu chiffré d'une opération lourde	Composant transverse	P2, P4, P12	transverse
M-Releve ⬜	Relevé d'une nuit sur la plateforme	Vue secondaire (depuis M-Passage)	P14	chaîne de production
M-Journal ⬜	L'histoire d'une nuit (frise des évènements)	Vue secondaire (depuis M-Passage)	P15	chaîne de production
M-Materiel ⬜	Parc d'enregistreurs et de micros	Onglet des Réglages	P16	chaîne de production
M-Paquet ⬜	Paquet de reprise entre deux postes	Assistant (depuis M-MultiSite)	P17	prisme collecte & passages

Les écrans sans repère existent

M-Synthese, M-Activite, M-Saison et M-CompteRendu ont été les dernières à décrire des écrans à construire. Leurs chantiers #2348, #2349 et #2350 sont clos depuis le 29 juillet 2026. Chaque fiche porte l'issue qui l'a mise en oeuvre.

Le repère ⬜ marque une cible non livrée, dans la même convention que les nœuds pointillés du diagramme ci-dessous. Les quatre dernières lignes du tableau sont des chantiers ouverts en août ; chaque fiche porte l'issue qui la suit, et c'est là que se lit son état.

Une maquette peut par ailleurs devancer le produit sur un détail : c'est un écart, pas une intention, et il se traite comme un défaut de documentation.

M-Materiel comble un trou de ce jeu de maquettes

L'écran des Réglages n'avait aucune fiche, alors qu'il est livré depuis longtemps et qu'il porte déjà deux onglets. M-Materiel est la première à le décrire, par le biais de l'onglet que le chantier #3847 y ajoute. Les onglets Emplacements et Fonctionnalités restent à documenter.

Comment lire une maquette¶

Chaque fichier .md suit la même structure :

En-tête avec type, persona principal, parcours et stories couvertes.
Maquette principale : 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 de la maquette (en-tête, sections numérotées, badges, etc.).
Interactions clés : tableau des actions disponibles sur chaque élément cliquable.
Variantes (quand pertinent) : maquettes 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
    Accueil[🧭 M-Accueil]
    Sites[🏠 M-Sites]
    MultiSite[📊 M-MultiSite]
    Detail[🌐 M-Site-detail]
    Import[📥 M-Import]
    Passage[📋 M-Passage]
    Qualif[🎧 M-Qualification]
    Lot[📦 M-Lot]
    Analyse[🪶 M-Analyse]
    SonsVal[🔊 M-SonsValidation]
    Saison[🗓 M-Saison]
    Synthese[📊 M-Synthese]
    Activite[📈 M-Activite]
    Releve[🛰 M-Releve]
    Journal[🕰 M-Journal]
    Materiel[🎛 M-Materiel]
    Paquet[🧳 M-Paquet]

    Accueil --> Sites
    Accueil --> MultiSite
    Accueil --> Analyse
    Accueil --> SonsVal
    Accueil --> Saison
    Sites --> Detail
    Sites --> Import
    MultiSite -.alternative.- Sites
    Detail --> Passage
    Import --> Passage
    MultiSite --> Passage
    Saison --> Passage
    Passage --> Qualif
    Passage --> SonsVal
    Passage --> Synthese
    Passage --> Activite
    Qualif --> Lot
    Passage --> Lot
    Lot -.dépôt VigieChiro<br/>+ retour Tadarida.-> SonsVal
    Analyse --> SonsVal
    MultiSite --> SonsVal

    classDef accueil fill:#3f51b5,stroke:#2c3a8c,color:#fff,stroke-width:2px
    classDef main fill:#1e8449,stroke:#0e5128,color:#fff,stroke-width:2px
    classDef detail fill:#4a90d9,stroke:#2563a3,color:#fff,stroke-width:2px
    classDef biodiv fill:#6c3483,stroke:#4a235a,color:#fff,stroke-width:2px
    classDef avenir fill:#ffffff,stroke:#6a737d,color:#2c3e50,stroke-width:2px,stroke-dasharray:5 4
    class Accueil accueil
    class Sites,Import,Qualif,Lot main
    Passage --> Releve
    Passage --> Journal
    Accueil -.Réglages.-> Materiel
    MultiSite --> Paquet
    Paquet -.reprise.-> Import

    class Detail,Passage,MultiSite,Saison detail
    class Analyse,SonsVal,Synthese,Activite biodiv
    class Releve,Journal,Materiel,Paquet avenir

🟦 Indigo : écran d'accueil (lanceur à deux prismes).
🟩 Vert : maquettes de la chaîne fil rouge (MUST).
🟦 Bleu : maquettes de soutien (détails, navigation multi-sites).
🟪 Violet : prisme espèces & biodiversité (inventaire, sons & validation).
⬜ Contour pointillé : écran décidé et maquetté, pas encore livré. Le statut se lit sur le nœud, pas dans une phrase du corps de texte : c'est ce qui l'empêche de se périmer sans qu'on le voie. Quatre écrans y sont aujourd'hui, tous ouverts en août 2026.

Le graphe montre au passage ce que les chantiers d'août feraient au pivot : M-Passage porterait huit écrans spécialisés, contre quatre à l'origine. C'est le point d'attention noté sur sa fiche.

Le composant M-CompteRendu ne figure pas sur ce graphe : il n'est pas un écran mais une restitution de fin d'opération, appelée depuis M-Import, M-Lot et la réactivation d'un passage.

Pattern visuel partagé¶

Toutes les maquettes reprennent le cadre fenêtre du chrome (MainView.fxml) :

Bandeau de navigation indigo (#3f51b5) : nom de l'application « VigieChiro Companion », bouton « ← Retour » (historique de navigation), fil d'Ariane partant toujours d'Accueil, puis, alignés à droite, le champ de recherche globale (Ctrl+F) et un menu outils ☰ (sauvegarde, restauration, connexion à Vigie-Chiro, à propos…).
Bandeau d'annonce transverse, masqué par défaut, qui apparaît sous le bandeau de navigation quand une mise à jour applicative est disponible.
En-tête de page avec titre principal et sous-titre éventuel, juste sous le bandeau.
Sections numérotées pour les écrans assistant (M-Import, M-Lot) ou panneau de détail « liste + détail » (M-Qualification, M-SonsValidation).
Barre de statut contextuelle en pied de fenêtre, à trois zones : contexte à gauche, résumé au centre, compteurs et état vivant à droite (ce n'est pas un simple pied de page décoratif).

L'accueil ajoute, sous le bandeau, un bandeau nocturne (titre, invite, tableau de bord de compteurs) puis deux sections-prismes de cartes d'activité.

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

Usage	Couleur	Exemple
Primary actions / liens	`#4a90d9` (bleu)	Boutons primaires, liens d'action
Success / verdict OK	`#1e8449` (vert)	Badges Déposé OK, statut Vérifié
Warning / verdict Utilisable	`#b9770e` (orange)	Statut Transformé, cible étirée
Danger / verdict Inexploitable	`#a93226` (rouge)	Bouton Supprimer, verdict Inexploitable
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-SonsValidation partagent le même squelette « liste + écoute » (une liste pilote un panneau d'écoute AudioView commun). Il n'y a qu'un seul patron de « lieu d’écoute » à implémenter, qui se décline pour les deux modes : vérification par échantillonnage d'une part, validation taxonomique d'autre part.
M-Sites et M-Site-detail utilisent le même style de cards pour les sites et les points d'écoute.
M-MultiSite, M-Analyse et M-SonsValidation partagent le même socle de tableau réactif, décrit une seule fois ici (chaque fiche y renvoie plutôt que de le redécrire à sa façon) :
- des onglets de vues mémorisées (« à la Notion ») en tête de tableau, pas un sous-menu du ☰ ;
- un constructeur de filtres à puces : un bouton « + Filtre » ouvre le choix du critère, et chaque filtre actif devient une puce cumulable (et non une rangée de listes déroulantes fixes) ;
- « Tout effacer », un geste en trois volets : les puces, la recherche et le tri du tableau, plus l'oubli de ce que la mémoire de session s'apprêtait à remettre (chantier #3092) ;
- des listes de valeurs cascadées : une puce n'offre que les valeurs que les autres filtres laissent passer, et jamais en tenant compte d'elle-même - sinon elle s'effondrerait sur la valeur déjà cochée (ADR 3095) ;
- un bandeau de compte rendu quand un filtre n'a pas pu être remis en place : une valeur disparue des données ne se dit pas comme un critère que l'écran d'arrivée n'offre pas (ADR 3093) ;
- un choix des colonnes affichées, dans le menu outils ☰.

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

Certains écrans secondaires ne font pas l'objet d'une maquette complète 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.
Fenêtre modale de re-rattachement d'un passage : action accessible depuis M-Passage.
Sélecteur de taxon de correction : autocomplete sur code à 6 lettres. Décrit dans M-SonsValidation.
Confirmation « Marquer déposé » : avant transition vers le statut Déposé (c'est le libellé réel du bouton). Décrite dans M-Lot.
Écran de connexion à Vigie-Chiro : saisie du jeton d'API, trois états (connecté / enregistré non vérifié / non connecté). Cf. E9.S1.
Écran de réglages : onglets auto-découverts (Général, Fonctionnalités, Emplacements, Dépôt, Import, Audio), ouvert depuis le menu principal (☰). Cf. E0.S9.
Écran d'audit de cohérence et reset guidé : accessible aussi par une carte de l'accueil. Cf. E0.S11.
Modale de reconstruction d'un passage déposé absent de la machine. Cf. E9.S5.
Modale de réactivation d'un passage archivé (retrouver ses fichiers). Cf. E4.S6.
Fenêtre « À propos » : version de l'application et crédits, ouverte depuis le menu principal (☰).
Bandeau d'annonce de mise à jour : masqué par défaut, signale une version plus récente (cf. « capacités transverses » du story mapping).

Maquettes¶

Cartographie des écrans¶

Comment lire une maquette¶

Convention de navigation entre écrans¶

Pattern visuel partagé¶

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