597 lines
29 KiB
Markdown
597 lines
29 KiB
Markdown
# Dofus Manager UI/UX Specification
|
|
|
|
## Introduction
|
|
|
|
Ce document définit les objectifs d'expérience utilisateur, l'architecture de l'information, les flux utilisateur et les spécifications de design visuel pour l'interface de **Dofus Manager**. Il sert de fondation pour le design visuel et le développement frontend, assurant une expérience cohérente et centrée sur l'utilisateur.
|
|
|
|
---
|
|
|
|
## Overall UX Goals & Principles
|
|
|
|
### Target User Persona
|
|
|
|
**Theo - Le Multi-Compteur Organisé**
|
|
|
|
| Attribut | Description |
|
|
|----------|-------------|
|
|
| **Profil** | Joueur passionné de Dofus gérant 60+ personnages niveau 200 |
|
|
| **Contexte d'usage** | Joue sur PC avec souvent un second écran pour consulter ses données |
|
|
| **Frustrations actuelles** | Tableur Excel illisible, modifications fragiles, contraintes de compte gérées mentalement |
|
|
| **Objectifs** | Trouver rapidement qui n'a pas fait quoi, composer des teams valides, mettre à jour efficacement |
|
|
| **Expertise technique** | À l'aise avec les outils complexes, préfère la densité d'info à la simplicité |
|
|
| **Fréquence d'usage** | Quotidien pendant les sessions de jeu + planification hebdomadaire |
|
|
|
|
### Usability Goals
|
|
|
|
1. **Efficacité de navigation** — Trouver n'importe quelle information en moins de 3 clics depuis le dashboard
|
|
2. **Mises à jour rapides** — Pouvoir mettre à jour la progression d'une team entière en moins de 30 secondes
|
|
3. **Prévention d'erreurs** — Impossible d'ajouter 2 personnages du même compte dans une team active
|
|
4. **Vue d'ensemble immédiate** — Voir l'état global (teams, progressions, monnaies) en un coup d'œil
|
|
5. **Mémorabilité** — Interface cohérente permettant de retrouver ses repères après plusieurs jours d'absence
|
|
|
|
### Design Principles
|
|
|
|
1. **Densité maîtrisée** — Maximiser l'information visible sans surcharger visuellement. Utiliser la hiérarchie typographique et les espaces blancs stratégiquement.
|
|
|
|
2. **Consistance des patterns** — Tous les tableaux se comportent de la même façon (tri, filtres, pagination). Toutes les actions CRUD suivent le même flow.
|
|
|
|
3. **Feedback immédiat** — Chaque action utilisateur génère une réponse visuelle instantanée (loading states, toasts, transitions).
|
|
|
|
4. **Raccourcis pour experts** — Permettre les bulk actions, raccourcis clavier (V2), et filtres combinés pour les utilisateurs avancés.
|
|
|
|
5. **Fail-safe par design** — Les actions destructives demandent confirmation. Les contraintes métier sont validées avant même que l'utilisateur ne puisse les violer.
|
|
|
|
### Change Log
|
|
|
|
| Date | Version | Description | Author |
|
|
|------|---------|-------------|--------|
|
|
| 2026-01-17 | 0.1 | Création initiale | Sally (UX Expert) |
|
|
|
|
---
|
|
|
|
## Information Architecture (IA)
|
|
|
|
### Site Map / Screen Inventory
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[🏠 Dashboard<br/>Vue d'ensemble principale] --> B[👥 Personnages]
|
|
A --> C[📁 Comptes]
|
|
A --> D[⚔️ Teams]
|
|
A --> E[⚙️ Paramètres]
|
|
|
|
A --> A1[Widget Comptes]
|
|
A --> A2[Widget Personnages]
|
|
A --> A3[Widget Teams]
|
|
A --> A4[Widget Monnaies]
|
|
A --> A5[Actions rapides]
|
|
|
|
B --> B1[Liste Personnages]
|
|
B1 --> B2[Fiche Personnage]
|
|
B2 --> B2a[Progressions]
|
|
B2 --> B2b[Monnaies]
|
|
B2 --> B2c[Teams]
|
|
|
|
C --> C1[Liste Comptes]
|
|
C1 --> C2[Fiche Compte]
|
|
C2 --> C2a[Personnages du compte]
|
|
C2 --> C2b[Métiers]
|
|
C2 --> C2c[Récompenses]
|
|
|
|
D --> D1[Liste Teams]
|
|
D1 --> D2[Fiche Team]
|
|
D2 --> D2a[Membres]
|
|
D2 --> D2b[Statut Progressions]
|
|
|
|
E --> E1[Serveurs]
|
|
E --> E2[Monnaies]
|
|
E --> E3[Données DofusDB]
|
|
|
|
B1 --> F[🔄 Bulk Actions]
|
|
F --> F1[Bulk Progressions]
|
|
F --> F2[Bulk Monnaies]
|
|
```
|
|
|
|
### Navigation Structure
|
|
|
|
**Primary Navigation (Sidebar)**
|
|
|
|
| Icône | Label | Route | Description |
|
|
|-------|-------|-------|-------------|
|
|
| 🏠 | Dashboard | `/` | Vue d'ensemble, KPIs, accès rapide |
|
|
| 👥 | Personnages | `/characters` | Liste principale avec filtres |
|
|
| 📁 | Comptes | `/accounts` | Gestion des comptes Dofus |
|
|
| ⚔️ | Teams | `/teams` | Composition et statut des teams |
|
|
| ⚙️ | Paramètres | `/settings` | Configuration (serveurs, monnaies, sync) |
|
|
|
|
**Secondary Navigation (Contextuelle)**
|
|
|
|
- **Onglets sur fiches détail** : Personnage → [Infos | Progressions | Monnaies | Teams]
|
|
- **Sous-menu Paramètres** : [Serveurs | Monnaies | Données DofusDB]
|
|
- **Actions groupées** : Accessible depuis la toolbar des listes (quand sélection active)
|
|
|
|
**Breadcrumb Strategy**
|
|
|
|
Format : `Section > Sous-section > Élément`
|
|
|
|
Exemples :
|
|
- `Personnages > Krosmaster-Cra`
|
|
- `Teams > Main Team > Statut Progressions`
|
|
- `Paramètres > Données DofusDB`
|
|
|
|
**Dashboard Content**
|
|
|
|
| Widget | Contenu | Action au clic |
|
|
|--------|---------|----------------|
|
|
| **Comptes** | Liste des comptes avec nb persos, ogrines | → Fiche compte |
|
|
| **Personnages** | Total, répartition par classe/niveau | → Liste filtrée |
|
|
| **Teams** | Teams actives avec % complétion | → Fiche team |
|
|
| **Monnaies** | Totaux globaux par type | → Détail par compte |
|
|
| **Progressions** | Résumé global (X% Dofus faits, Y donjons) | → Bulk actions |
|
|
| **Actions rapides** | Boutons : Nouveau perso, Bulk update, Sync DofusDB | → Action directe |
|
|
|
|
---
|
|
|
|
## User Flows
|
|
|
|
### Flow 1: Trouver les personnages qui n'ont pas fait X
|
|
|
|
**User Goal:** Identifier rapidement quels personnages n'ont pas complété une progression spécifique
|
|
|
|
**Entry Points:** Dashboard → Widget Progressions, Sidebar → Personnages, Fiche Team
|
|
|
|
**Success Criteria:** Liste filtrée affichée en < 3 clics, < 5 secondes
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[Dashboard] --> B[Clic Personnages]
|
|
B --> C[Liste avec Filtres]
|
|
C --> D[Ouvrir filtre Progression]
|
|
D --> E[Sélectionner type]
|
|
E --> F[Sélectionner N'a pas fait]
|
|
F --> G[✅ Liste filtrée affichée]
|
|
|
|
G --> H{Action suivante?}
|
|
H --> I[Voir fiche perso]
|
|
H --> J[Sélectionner plusieurs]
|
|
J --> K[Bulk Update]
|
|
```
|
|
|
|
**Edge Cases:**
|
|
- Aucun résultat → Message "Tous les personnages ont complété X" avec bouton reset
|
|
- Filtres combinés complexes → Indicateur des filtres actifs + "Clear all"
|
|
|
|
### Flow 2: Composer une team valide
|
|
|
|
**User Goal:** Créer ou modifier une team en respectant la contrainte compte
|
|
|
|
**Success Criteria:** Team créée avec membres valides, erreur claire si conflit
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[Liste Teams] --> B[Nouvelle Team]
|
|
B --> C[Modal création]
|
|
C --> D[Saisir nom + type]
|
|
D --> E[Enregistrer]
|
|
E --> F[Fiche Team vide]
|
|
|
|
F --> G[Ajouter membre]
|
|
G --> H[Sélecteur personnages]
|
|
H --> I[Sélectionner perso]
|
|
|
|
I --> K{Même compte dans team?}
|
|
K -->|Non| L[✅ Membre ajouté]
|
|
K -->|Oui| M[❌ Erreur conflit]
|
|
M --> H
|
|
|
|
L --> O{Continuer?}
|
|
O -->|Oui| G
|
|
O -->|Non| P[✅ Team complète]
|
|
```
|
|
|
|
### Flow 3: Bulk update progressions pour une team
|
|
|
|
**User Goal:** Marquer une progression faite pour tous les membres d'une team
|
|
|
|
**Success Criteria:** Mise à jour de N personnages en < 30 secondes
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[Fiche Team] --> B[Section Statut Progressions]
|
|
B --> C[Sélectionner progression]
|
|
C --> D[Voir statut par membre]
|
|
D --> E{Tous faits?}
|
|
E -->|Non| G[Bouton Marquer fait pour tous]
|
|
|
|
G --> H[Modal confirmation]
|
|
H --> I[Récap: X persos à mettre à jour]
|
|
I --> J{Confirmer?}
|
|
J -->|Oui| K[Processing...]
|
|
K --> L[✅ Toast: X persos mis à jour]
|
|
L --> M[Refresh → 100%]
|
|
```
|
|
|
|
### Flow 4: Ajouter un nouveau personnage
|
|
|
|
**User Goal:** Créer un personnage avec toutes ses informations
|
|
|
|
**Success Criteria:** Personnage créé et visible en < 1 minute
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[Liste Personnages] --> B[Clic Ajouter]
|
|
B --> C[Modal création]
|
|
C --> D[Saisir pseudo]
|
|
D --> E[Sélectionner classe]
|
|
E --> F[Saisir niveau]
|
|
F --> G[Sélectionner serveur]
|
|
G --> H[Sélectionner compte]
|
|
H --> I{Validation}
|
|
I -->|OK| J[Enregistrer]
|
|
J --> K[✅ Toast confirmation]
|
|
K --> L[Liste rafraîchie]
|
|
```
|
|
|
|
### Flow 5: Consulter le Dashboard
|
|
|
|
**User Goal:** Vue d'ensemble instantanée de tous les comptes et personnages
|
|
|
|
**Success Criteria:** Toutes les informations clés visibles sans scroll sur desktop
|
|
|
|
```mermaid
|
|
graph TD
|
|
A[Accès Dashboard] --> B[Chargement widgets]
|
|
B --> C[Affichage simultané]
|
|
|
|
C --> D[Widget Comptes]
|
|
C --> E[Widget Personnages]
|
|
C --> F[Widget Teams]
|
|
C --> G[Widget Monnaies]
|
|
C --> H[Widget Progressions]
|
|
|
|
D --> I[Clic → Liste comptes]
|
|
E --> J[Clic → Liste personnages]
|
|
F --> K[Clic → Liste teams]
|
|
```
|
|
|
|
---
|
|
|
|
## Wireframes & Mockups
|
|
|
|
### Screen 1: Dashboard
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ ☰ DOFUS MANAGER [🌙 Dark Mode] │
|
|
├────────────┬────────────────────────────────────────────────────────────────┤
|
|
│ │ │
|
|
│ 🏠 Dashboard│ DASHBOARD [+ Nouveau ▾] │
|
|
│ │ ───────────────────────────────────────────────────────────── │
|
|
│ 👥 Persos │ │
|
|
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌────────────────┐ │
|
|
│ 📁 Comptes│ │ 📁 COMPTES │ │ 👥 PERSONNAGES │ │ ⚔️ TEAMS │ │
|
|
│ │ │ 12 comptes │ │ 64 personnages │ │ 3 actives │ │
|
|
│ ⚔️ Teams │ │ 45,230 ogrines │ │ Niv. moy: 198 │ │ 87% complete │ │
|
|
│ │ │ [Voir tout →] │ │ [Voir tout →] │ │ [Voir tout →] │ │
|
|
│ ─────────│ └─────────────────┘ └─────────────────┘ └────────────────┘ │
|
|
│ ⚙️ Settings│ │
|
|
│ │ ┌─────────────────────────────────┐ ┌──────────────────────┐ │
|
|
│ │ │ 💰 MONNAIES │ │ 📊 PROGRESSIONS │ │
|
|
│ │ │ Doplons 12,450 │ │ Dofus ████░ 72% │ │
|
|
│ │ │ Orichor 3,200 │ │ Donjons ██░░░ 45% │ │
|
|
│ │ │ Kamas glace 8,100 │ │ Recherchés███░░ 61% │ │
|
|
│ │ │ [Détail par compte →] │ │ [Bulk Update →] │ │
|
|
│ │ └─────────────────────────────────┘ └──────────────────────┘ │
|
|
│ │ │
|
|
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
|
│ │ │ ⚡ ACTIONS RAPIDES │ │
|
|
│ │ │ [+ Personnage] [+ Team] [Bulk Progressions] [Sync] │ │
|
|
│ │ └─────────────────────────────────────────────────────────┘ │
|
|
└────────────┴────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Screen 2: Liste Personnages
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ ☰ DOFUS MANAGER [🌙] │
|
|
├────────────┬────────────────────────────────────────────────────────────────┤
|
|
│ │ PERSONNAGES 🔍 [Rechercher... ] │
|
|
│ 🏠 Dashboard│ ───────────────────────────────────────────────────────────── │
|
|
│ ►👥 Persos │ │
|
|
│ │ ┌──────────────┐ ┌──────────────────────────────────────────┐│
|
|
│ 📁 Comptes│ │ FILTRES │ │ ☑ Sélection: 3 [Bulk Actions ▾] ││
|
|
│ │ │ │ │ ─────────────────────────────────────── ││
|
|
│ ⚔️ Teams │ │ ▼ Classe │ │ ☐ │ Nom │Classe│Niv│Serveur│Cpt││
|
|
│ │ │ ☑ Cra 12 │ │ ──┼──────────────┼──────┼───┼───────┼───││
|
|
│ ─────────│ │ ☑ Iop 8 │ │ ☑ │ Krosmaster │ Cra │200│Imagiro│C1 ││
|
|
│ ⚙️ Settings│ │ ☐ Enu 6 │ │ ☐ │ TankMaster │ Iop │200│Imagiro│C1 ││
|
|
│ │ │ │ │ ☑ │ MoneyMaker │ Enu │200│Imagiro│C2 ││
|
|
│ │ │ ▼ Serveur │ │ ☐ │ HealBot │ Eni │200│Imagiro│C2 ││
|
|
│ │ │ ☑ Imagiro │ │ ☑ │ PortalGuy │ Elio │200│Imagiro│C3 ││
|
|
│ │ │ │ │ ─────────────────────────────────────── ││
|
|
│ │ │ ▼ Progression│ │ Showing 1-20 of 64 [< 1 2 3 4 >] ││
|
|
│ │ │ Type: [──▾] │ └──────────────────────────────────────────┘│
|
|
│ │ │ ○ A fait │ │
|
|
│ │ │ ○ N'a pas │ [+ Ajouter Personnage] │
|
|
│ │ │ [Réinitialiser]│ │
|
|
│ │ └──────────────┘ │
|
|
└────────────┴────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Screen 3: Fiche Personnage
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ ☰ DOFUS MANAGER [🌙] │
|
|
├────────────┬────────────────────────────────────────────────────────────────┤
|
|
│ │ ← Personnages / Krosmaster [✏️] [🗑️] │
|
|
│ 🏠 Dashboard│ ───────────────────────────────────────────────────────────── │
|
|
│ 👥 Persos │ │
|
|
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
|
│ 📁 Comptes│ │ [Avatar] KROSMASTER │ │
|
|
│ │ │ Classe: Cra Niveau: 200 │ │
|
|
│ ⚔️ Teams │ │ Serveur: Imagiro Compte: Compte1 │ │
|
|
│ │ │ Teams: Main Team, Team Succès │ │
|
|
│ ─────────│ └─────────────────────────────────────────────────────────┘ │
|
|
│ ⚙️ Settings│ │
|
|
│ │ ┌─────────────────────────────────────────────────────────┐ │
|
|
│ │ │ [Infos] [Progressions] [Monnaies] [Teams] │ │
|
|
│ │ ├─────────────────────────────────────────────────────────┤ │
|
|
│ │ │ PROGRESSIONS Filtre: [Tous ▾] │ │
|
|
│ │ │ │ │
|
|
│ │ │ ▼ Quêtes Dofus (7/10) │ │
|
|
│ │ │ ☑ Dofus Turquoise ✓ 2026-01-10 │ │
|
|
│ │ │ ☑ Dofus Pourpre ✓ 2026-01-08 │ │
|
|
│ │ │ ☐ Dofus des Glaces │ │
|
|
│ │ │ │ │
|
|
│ │ │ ▼ Donjons 191-200 (12/18) │ │
|
|
│ │ │ ☑ Bethel ✓ 2026-01-15 │ │
|
|
│ │ │ ☐ Tal Kasha │ │
|
|
│ │ └─────────────────────────────────────────────────────────┘ │
|
|
└────────────┴────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Screen 4: Fiche Team
|
|
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ ☰ DOFUS MANAGER [🌙] │
|
|
├────────────┬────────────────────────────────────────────────────────────────┤
|
|
│ │ ← Teams / Main Team [✏️] [🗑️] │
|
|
│ 🏠 Dashboard│ │
|
|
│ 👥 Persos │ ┌────────────────────────────────────────────────────────┐ │
|
|
│ │ │ MAIN TEAM Type: Main │ │
|
|
│ 📁 Comptes│ │ 8 membres • ✅ Active • 8 comptes différents │ │
|
|
│ │ └────────────────────────────────────────────────────────┘ │
|
|
│ ⚔️ Teams │ │
|
|
│ │ ┌────────────────────────────────────────────────────────┐ │
|
|
│ ─────────│ │ [Membres] [Statut Progressions] │ │
|
|
│ ⚙️ Settings│ ├────────────────────────────────────────────────────────┤ │
|
|
│ │ │ STATUT PROGRESSIONS │ │
|
|
│ │ │ │ │
|
|
│ │ │ Progression: [Dofus Turquoise ▾] │ │
|
|
│ │ │ │ │
|
|
│ │ │ ████████████████████░░░░ 75% (6/8) [Marquer tous] │ │
|
|
│ │ │ │ │
|
|
│ │ │ │ Perso │ Statut │ Date │ │ │
|
|
│ │ │ │ Krosmaster │ ✅ │ 2026-01-10 │ │ │
|
|
│ │ │ │ TankMaster │ ✅ │ 2026-01-10 │ │ │
|
|
│ │ │ │ HealBot │ ❌ │ — │ │ │
|
|
│ │ │ │ SramKiller │ ❌ │ — │ │ │
|
|
│ │ └────────────────────────────────────────────────────────┘ │
|
|
└────────────┴────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Component Library / Design System
|
|
|
|
**Design System:** shadcn/ui (composants copiés, personnalisables)
|
|
|
|
### Core Components
|
|
|
|
| Component | Purpose | Variants | States |
|
|
|-----------|---------|----------|--------|
|
|
| **DataTable** | Listes avec tri, filtres, pagination | default, selectable, compact | loading, empty, error, filtered |
|
|
| **FilterSidebar** | Panel de filtres multicritères | default, collapsible, modal | default, active, loading |
|
|
| **StatCard** | Widget Dashboard KPI | default, progress, compact | loading, default, hover |
|
|
| **EntityCard** | Header fiches détail | character, account, team | default, editing |
|
|
| **ProgressionCheckbox** | Toggle fait/pas fait | default, with-date, bulk | unchecked, checked, loading, disabled |
|
|
| **BulkActionBar** | Actions sur sélection multiple | floating, inline | hidden, visible, processing |
|
|
| **Modal** | Dialogues création/édition/confirmation | form, confirm, selector | default, loading, error |
|
|
| **Toast** | Notifications feedback | success, error, warning, info | entering, visible, exiting |
|
|
| **Tabs** | Navigation sous-sections | default, pills, underline | default, active, disabled |
|
|
| **EmptyState** | Affichage liste vide | no-data, no-results, error | — |
|
|
|
|
---
|
|
|
|
## Branding & Style Guide
|
|
|
|
### Color Palette
|
|
|
|
#### Dark Mode (Principal)
|
|
|
|
| Color Type | Hex Code | Usage |
|
|
|------------|----------|-------|
|
|
| **Background** | `#0F172A` | Fond principal (slate-900) |
|
|
| **Foreground** | `#F8FAFC` | Texte principal |
|
|
| **Card** | `#1E293B` | Fond cartes (slate-800) |
|
|
| **Primary** | `#60A5FA` | Actions principales (blue-400) |
|
|
| **Secondary** | `#94A3B8` | Texte secondaire (slate-400) |
|
|
| **Accent** | `#A78BFA` | Highlights (violet-400) |
|
|
| **Border** | `#475569` | Bordures (slate-600) |
|
|
|
|
#### Semantic Colors
|
|
|
|
| Color Type | Hex | Usage |
|
|
|------------|-----|-------|
|
|
| **Success** | `#4ADE80` | Confirmations, complété |
|
|
| **Warning** | `#FBBF24` | Alertes |
|
|
| **Error** | `#F87171` | Erreurs |
|
|
| **Info** | `#60A5FA` | Informations |
|
|
|
|
### Typography
|
|
|
|
| Element | Size | Weight | Line Height |
|
|
|---------|------|--------|-------------|
|
|
| **H1** | 32px | 700 | 1.2 |
|
|
| **H2** | 24px | 600 | 1.3 |
|
|
| **H3** | 20px | 600 | 1.4 |
|
|
| **Body** | 14px | 400 | 1.5 |
|
|
| **Small** | 12px | 400 | 1.4 |
|
|
|
|
**Font:** Inter (system-ui fallback)
|
|
|
|
### Iconography
|
|
|
|
**Library:** Lucide Icons
|
|
|
|
| Context | Size |
|
|
|---------|------|
|
|
| Navigation | 20px |
|
|
| Buttons | 16px |
|
|
| Inline | 14px |
|
|
|
|
### Spacing Scale (base 4px)
|
|
|
|
| Token | Value |
|
|
|-------|-------|
|
|
| `space-1` | 4px |
|
|
| `space-2` | 8px |
|
|
| `space-3` | 12px |
|
|
| `space-4` | 16px |
|
|
| `space-6` | 24px |
|
|
| `space-8` | 32px |
|
|
|
|
### Layout Constants
|
|
|
|
| Element | Value |
|
|
|---------|-------|
|
|
| Sidebar width | 240px (collapsed: 64px) |
|
|
| Max content width | 1280px |
|
|
| Border radius | 8px (cards), 6px (buttons) |
|
|
|
|
---
|
|
|
|
## Accessibility Requirements
|
|
|
|
**Standard:** Pas de conformité WCAG formelle (app personnelle)
|
|
|
|
**Approche pragmatique :** Bonnes pratiques "gratuites" via shadcn/ui
|
|
|
|
### Key Requirements
|
|
|
|
| Category | Requirement |
|
|
|----------|-------------|
|
|
| **Visual** | Contraste 4.5:1, focus visible, états sans couleur seule |
|
|
| **Interaction** | Navigation clavier, focus trap modals, touch targets 44px |
|
|
| **Content** | Labels formulaires, messages d'erreur associés, structure headings |
|
|
|
|
---
|
|
|
|
## Responsiveness Strategy
|
|
|
|
### Breakpoints
|
|
|
|
| Breakpoint | Min Width | Target |
|
|
|------------|-----------|--------|
|
|
| **sm** (Mobile) | 0 | Smartphones |
|
|
| **md** (Tablet) | 640px | Tablettes |
|
|
| **lg** (Desktop) | 1024px | Laptops |
|
|
| **xl** (Wide) | 1280px | Grands moniteurs |
|
|
|
|
### Adaptation Patterns
|
|
|
|
| Element | Desktop | Tablet | Mobile |
|
|
|---------|---------|--------|--------|
|
|
| **Sidebar** | Expanded | Collapsed (icons) | Burger menu |
|
|
| **Dashboard** | 3 colonnes | 2 colonnes | 1 colonne |
|
|
| **DataTable** | Full | Colonnes prioritaires | Cards |
|
|
| **Modals** | Centré 500px | 90vw | Plein écran |
|
|
| **Filtres** | Sidebar | Sidebar mini | Modal |
|
|
|
|
---
|
|
|
|
## Animation & Micro-interactions
|
|
|
|
### Motion Principles
|
|
|
|
1. **Fonctionnel avant décoratif**
|
|
2. **Rapide et non-bloquant** (150-300ms)
|
|
3. **Subtil et cohérent**
|
|
4. **Respect prefers-reduced-motion**
|
|
|
|
### Key Animations
|
|
|
|
| Animation | Durée | Usage |
|
|
|-----------|-------|-------|
|
|
| Hover | 150ms | Buttons, rows |
|
|
| Fade in | 200ms | Contenu chargé |
|
|
| Slide in | 250ms | Modals, drawers |
|
|
| Toast | 300ms in / 200ms out | Notifications |
|
|
| Checkbox | 150ms | Toggle état |
|
|
|
|
### Performance Goals
|
|
|
|
| Metric | Target |
|
|
|--------|--------|
|
|
| First Contentful Paint | < 1.5s |
|
|
| Time to Interactive | < 3s |
|
|
| Interaction Response | < 100ms |
|
|
| Animation FPS | 60fps |
|
|
|
|
---
|
|
|
|
## Next Steps
|
|
|
|
### Immediate Actions
|
|
|
|
1. Générer les maquettes haute-fidélité (v0, Lovable, ou Figma)
|
|
2. Setup le projet avec shadcn/ui et configurer le thème
|
|
3. Implémenter le Layout principal (sidebar + header)
|
|
4. Développer le Dashboard avec widgets mockés
|
|
|
|
### Design Handoff Checklist
|
|
|
|
- [x] All user flows documented
|
|
- [x] Component inventory complete
|
|
- [x] Accessibility requirements defined
|
|
- [x] Responsive strategy clear
|
|
- [x] Brand guidelines incorporated
|
|
- [x] Performance goals established
|
|
|
|
### Prompt v0.dev (Dashboard)
|
|
|
|
```
|
|
Create a dark mode dashboard for a Dofus MMORPG character management app called "Dofus Manager".
|
|
|
|
Layout:
|
|
- Left sidebar (240px) with navigation: Dashboard (active), Characters, Accounts, Teams, Settings
|
|
- Main content area with widgets grid
|
|
|
|
Widgets (3 columns on desktop):
|
|
1. "Comptes" card: showing "12 comptes" and "45,230 ogrines" with folder icon
|
|
2. "Personnages" card: showing "64 personnages" and "Niv. moy: 198" with users icon
|
|
3. "Teams" card: showing "3 actives" and "87% complete" with swords icon
|
|
4. "Monnaies" card (spans 2 cols): list of currencies with amounts
|
|
5. "Progressions" card: progress bars for Dofus, Donjons, Recherchés
|
|
6. "Actions rapides" section: buttons for + Personnage, + Team, Bulk Progressions, Sync
|
|
|
|
Style: shadcn/ui, dark slate background (#0F172A), blue primary (#60A5FA), Inter font 14px
|
|
```
|
|
|
|
### Prompt v0.dev (Liste Personnages)
|
|
|
|
```
|
|
Create a character list page for "Dofus Manager" with filters sidebar.
|
|
|
|
Layout:
|
|
- Left filter sidebar (250px): Classe checkboxes, Serveur checkboxes, Progression filter
|
|
- Main data table: checkbox, Nom, Classe, Niveau, Serveur, Compte columns
|
|
- Top bar: search input, bulk actions when selected, + Ajouter button
|
|
- Pagination at bottom
|
|
|
|
Style: Dark mode, shadcn/ui, dense table rows (48px height), hover shows edit/delete icons
|
|
```
|