361 lines
11 KiB
Markdown
361 lines
11 KiB
Markdown
# Améliorations UI - Documentation
|
|
|
|
**Auteur** : Équipe 4NK
|
|
**Date** : 2025-01-27
|
|
|
|
## Vue d'ensemble
|
|
|
|
Ce document liste les améliorations UI proposées pour la plateforme zapwall.fr. Ces améliorations visent à créer une interface plus cohérente, moderne et visuellement attrayante tout en respectant le thème cyberpunk/neon existant.
|
|
|
|
## 1. Design System et Cohérence Visuelle
|
|
|
|
### Système de couleurs unifié
|
|
- **Audit des couleurs** :
|
|
- Identifier tous les usages de couleurs non-thème (ex: `SeriesCard` utilise `bg-white`, `text-gray-700`)
|
|
- Remplacer par les couleurs du design system (cyber/neon)
|
|
- Créer une palette de couleurs documentée avec usages
|
|
|
|
- **Cohérence des états** :
|
|
- États hover cohérents sur tous les éléments interactifs
|
|
- États focus visibles et uniformes
|
|
- États disabled avec style cohérent
|
|
- États actifs/selected avec indicateurs visuels clairs
|
|
|
|
### Composants réutilisables
|
|
- **Créer une bibliothèque de composants** :
|
|
- `Button` : Variantes (primary, secondary, danger, ghost)
|
|
- `Card` : Variantes (default, hover, selected)
|
|
- `Input` : Variantes (text, search, textarea)
|
|
- `Badge` : Variantes (info, success, warning, error)
|
|
- `Modal` : Composant modal réutilisable avec overlay
|
|
- `Toast` : Système de notifications toast
|
|
- `Skeleton` : Loaders skeleton pour différents contenus
|
|
|
|
- **Documentation des composants** :
|
|
- Storybook ou documentation inline
|
|
- Exemples d'utilisation
|
|
- Props et variantes documentées
|
|
|
|
## 2. Typographie et Espacement
|
|
|
|
### Hiérarchie typographique
|
|
- **Système de tailles cohérent** :
|
|
- `text-xs` : Métadonnées, labels
|
|
- `text-sm` : Texte secondaire, descriptions
|
|
- `text-base` : Corps de texte principal
|
|
- `text-lg` : Sous-titres
|
|
- `text-xl` : Titres de sections
|
|
- `text-2xl` : Titres principaux
|
|
- `text-3xl+` : Titres hero
|
|
|
|
- **Poids de police** :
|
|
- `font-normal` : Texte courant
|
|
- `font-medium` : Emphase légère
|
|
- `font-semibold` : Emphase moyenne
|
|
- `font-bold` : Titres, CTA
|
|
|
|
- **Espacement cohérent** :
|
|
- Utiliser l'échelle Tailwind (4, 8, 12, 16, 24, 32...)
|
|
- Marges verticales cohérentes entre sections
|
|
- Padding cohérent dans les cards et containers
|
|
|
|
### Lisibilité améliorée
|
|
- **Contraste** :
|
|
- Vérifier tous les contrastes (WCAG AA minimum)
|
|
- Améliorer les contrastes faibles (ex: `text-cyber-accent/70`)
|
|
- Tester avec différents thèmes si applicable
|
|
|
|
- **Largeur de ligne optimale** :
|
|
- Limiter la largeur du texte à ~65-75 caractères
|
|
- Appliquer `max-w-prose` ou similaire pour le contenu
|
|
- Ajuster les espacements pour la lecture
|
|
|
|
## 3. Layout et Grille
|
|
|
|
### Système de grille cohérent
|
|
- **Containers** :
|
|
- Largeur max cohérente (`max-w-4xl`, `max-w-6xl`, etc.)
|
|
- Padding horizontal cohérent (`px-4`, `px-6`, `px-8`)
|
|
- Centrage automatique avec `mx-auto`
|
|
|
|
- **Grilles responsives** :
|
|
- `grid-cols-1` sur mobile
|
|
- `md:grid-cols-2` sur tablette
|
|
- `lg:grid-cols-3` ou `xl:grid-cols-4` sur desktop
|
|
- Gaps cohérents (`gap-4`, `gap-6`, `gap-8`)
|
|
|
|
### Responsive design amélioré
|
|
- **Breakpoints cohérents** :
|
|
- Mobile first : base styles
|
|
- `sm:` : 640px (petites tablettes)
|
|
- `md:` : 768px (tablettes)
|
|
- `lg:` : 1024px (desktop)
|
|
- `xl:` : 1280px (large desktop)
|
|
|
|
- **Navigation mobile** :
|
|
- Menu hamburger pour navigation sur mobile
|
|
- Drawer/sidebar pour filtres sur mobile
|
|
- Touch targets minimum 44x44px
|
|
|
|
## 4. Cards et Containers
|
|
|
|
### Style unifié des cards
|
|
- **Card de base** :
|
|
```tsx
|
|
className="border border-neon-cyan/30 rounded-lg p-6 bg-cyber-dark hover:border-neon-cyan/50 hover:shadow-glow-cyan transition-all"
|
|
```
|
|
|
|
- **Variantes** :
|
|
- Card simple : bordure subtile, pas de hover
|
|
- Card interactive : hover avec glow, cursor pointer
|
|
- Card selected : bordure plus visible, background différent
|
|
- Card compact : padding réduit pour listes denses
|
|
|
|
### Containers et sections
|
|
- **Sections** :
|
|
- Espacement vertical cohérent entre sections (`mb-8`, `mb-12`)
|
|
- Titres de section avec style cohérent
|
|
- Séparateurs visuels si nécessaire
|
|
|
|
- **Containers de contenu** :
|
|
- Background cohérent (`bg-cyber-dark` ou `bg-cyber-darker`)
|
|
- Bordures subtiles (`border-neon-cyan/20` ou `/30`)
|
|
- Padding cohérent selon le contexte
|
|
|
|
## 5. Buttons et Interactions
|
|
|
|
### Système de boutons
|
|
- **Variantes de boutons** :
|
|
- Primary : `bg-neon-cyan/20 hover:bg-neon-cyan/30 text-neon-cyan border-neon-cyan/50`
|
|
- Secondary : `bg-cyber-light hover:bg-cyber-dark text-cyber-accent border-neon-cyan/30`
|
|
- Success : `bg-neon-green/20 hover:bg-neon-green/30 text-neon-green border-neon-green/50`
|
|
- Danger : `bg-red-500/20 hover:bg-red-500/30 text-red-400 border-red-500/50`
|
|
- Ghost : `bg-transparent hover:bg-cyber-light text-cyber-accent`
|
|
|
|
- **Tailles cohérentes** :
|
|
- Small : `px-3 py-1.5 text-sm`
|
|
- Medium : `px-4 py-2 text-base` (défaut)
|
|
- Large : `px-6 py-3 text-lg`
|
|
|
|
- **États** :
|
|
- Loading : spinner + texte "Chargement..."
|
|
- Disabled : `opacity-50 cursor-not-allowed`
|
|
- Focus : ring visible avec `focus:ring-2 focus:ring-neon-cyan`
|
|
|
|
### Micro-interactions
|
|
- **Transitions** :
|
|
- `transition-all` pour changements d'état
|
|
- `transition-colors` pour changements de couleur uniquement
|
|
- Durées cohérentes (150ms, 200ms, 300ms)
|
|
|
|
- **Hover effects** :
|
|
- Scale subtil sur les cards (`hover:scale-[1.02]`)
|
|
- Glow sur les boutons et éléments interactifs
|
|
- Changement de couleur progressif
|
|
|
|
## 6. Icônes et Illustrations
|
|
|
|
### Système d'icônes
|
|
- **Cohérence** :
|
|
- Utiliser une seule bibliothèque d'icônes (ex: Heroicons, Lucide)
|
|
- Tailles cohérentes (`w-4 h-4`, `w-5 h-5`, `w-6 h-6`)
|
|
- Couleurs cohérentes avec le thème
|
|
|
|
- **Icônes contextuelles** :
|
|
- Icônes pour les actions (éditer, supprimer, partager)
|
|
- Icônes pour les états (succès, erreur, chargement)
|
|
- Icônes pour la navigation (menu, fermer, retour)
|
|
|
|
### Illustrations et images
|
|
- **Placeholders** :
|
|
- Placeholder cohérent pour images manquantes
|
|
- Skeleton loaders pour images en chargement
|
|
- Aspect ratios cohérents
|
|
|
|
- **Optimisation** :
|
|
- Utiliser Next.js Image component partout
|
|
- Lazy loading pour images hors viewport
|
|
- Tailles appropriées selon le contexte
|
|
|
|
## 7. Animations et Transitions
|
|
|
|
### Animations subtiles
|
|
- **Apparition** :
|
|
- Fade in pour les éléments qui apparaissent
|
|
- Slide in pour les modals et overlays
|
|
- Stagger pour les listes (délai entre éléments)
|
|
|
|
- **Transitions de page** :
|
|
- Fade entre les pages
|
|
- Slide pour navigation latérale
|
|
- Transitions fluides sans jarring
|
|
|
|
### Feedback visuel
|
|
- **Loading states** :
|
|
- Spinners cohérents (taille, couleur, vitesse)
|
|
- Skeleton loaders pour contenu
|
|
- Progress bars pour actions longues
|
|
|
|
- **Confirmations** :
|
|
- Animations de succès (checkmark animé)
|
|
- Animations d'erreur (shake, pulse)
|
|
- Toast notifications avec animations
|
|
|
|
## 8. Modals et Overlays
|
|
|
|
### Style unifié
|
|
- **Modal de base** :
|
|
- Overlay : `bg-black bg-opacity-50`
|
|
- Container : `bg-cyber-dark border border-neon-cyan/30 rounded-lg`
|
|
- Padding cohérent : `p-6` ou `p-8`
|
|
- Max width selon contenu : `max-w-md`, `max-w-lg`, `max-w-xl`
|
|
|
|
- **Header de modal** :
|
|
- Titre avec style cohérent
|
|
- Bouton fermer visible et accessible
|
|
- Séparateur si nécessaire
|
|
|
|
- **Footer de modal** :
|
|
- Actions alignées à droite
|
|
- Bouton principal en dernier
|
|
- Espacement cohérent
|
|
|
|
### Accessibilité
|
|
- **Focus trap** : Garder le focus dans la modal
|
|
- **Escape key** : Fermer avec Escape
|
|
- **Click outside** : Option de fermer en cliquant sur l'overlay
|
|
- **ARIA** : Labels et rôles appropriés
|
|
|
|
## 9. Formulaires
|
|
|
|
### Style unifié
|
|
- **Inputs** :
|
|
- Style cohérent : `border border-neon-cyan/30 rounded-lg bg-cyber-dark text-cyber-accent`
|
|
- Focus : `focus:ring-2 focus:ring-neon-cyan focus:border-neon-cyan`
|
|
- Placeholder : `placeholder-cyber-accent/50`
|
|
- Erreur : `border-red-500/50` avec message d'erreur
|
|
|
|
- **Labels** :
|
|
- Style cohérent : `text-sm font-medium text-cyber-accent mb-1`
|
|
- Association avec `htmlFor` et `id`
|
|
- Required indicator si nécessaire
|
|
|
|
- **Groupes de champs** :
|
|
- Espacement vertical cohérent
|
|
- Groupement logique
|
|
- Validation visuelle
|
|
|
|
### Validation visuelle
|
|
- **États** :
|
|
- Default : bordure neutre
|
|
- Focus : bordure cyan avec ring
|
|
- Error : bordure rouge avec message
|
|
- Success : bordure verte (si applicable)
|
|
|
|
- **Messages d'erreur** :
|
|
- Position cohérente (sous le champ)
|
|
- Style cohérent : `text-sm text-red-400`
|
|
- Icône d'erreur si applicable
|
|
|
|
## 10. Navigation
|
|
|
|
### Header amélioré
|
|
- **Layout** :
|
|
- Logo/titre à gauche
|
|
- Navigation centrale (si applicable)
|
|
- Actions à droite (connexion, langue, etc.)
|
|
|
|
- **Style** :
|
|
- Background : `bg-cyber-dark border-b border-neon-cyan/30`
|
|
- Hauteur cohérente
|
|
- Sticky si nécessaire
|
|
|
|
### Navigation mobile
|
|
- **Menu hamburger** :
|
|
- Icône hamburger visible sur mobile
|
|
- Drawer/sidebar qui slide depuis la gauche ou droite
|
|
- Overlay sombre
|
|
- Animation fluide
|
|
|
|
- **Navigation verticale** :
|
|
- Items de menu avec style cohérent
|
|
- États hover/active visibles
|
|
- Séparateurs si nécessaire
|
|
|
|
## 11. États vides et erreurs
|
|
|
|
### États vides
|
|
- **Style cohérent** :
|
|
- Icône ou illustration
|
|
- Message clair et actionnable
|
|
- CTA si applicable
|
|
- Centré verticalement et horizontalement
|
|
|
|
- **Exemples** :
|
|
- "Aucun article trouvé" avec suggestion de recherche
|
|
- "Aucun auteur" avec lien pour créer
|
|
- "Liste vide" avec action pour ajouter
|
|
|
|
### États d'erreur
|
|
- **Style cohérent** :
|
|
- Container : `bg-red-900/20 border border-red-500/50 rounded-lg p-4`
|
|
- Texte : `text-red-400`
|
|
- Icône d'erreur si applicable
|
|
- Message clair avec action de récupération
|
|
|
|
## 12. Améliorations spécifiques
|
|
|
|
### Corrections de cohérence
|
|
- **SeriesCard** :
|
|
- Remplacer `bg-white`, `text-gray-700` par thème cyber/neon
|
|
- Appliquer le même style que `ArticleCard` et `AuthorCard`
|
|
|
|
- **AlbyInstaller** :
|
|
- Remplacer les couleurs bleues génériques par le thème
|
|
- Utiliser les couleurs neon/cyber
|
|
|
|
### Améliorations visuelles
|
|
- **Background grid** :
|
|
- Utiliser `bg-cyber-grid` sur certains containers pour effet cyber
|
|
- Optionnel, à utiliser avec parcimonie
|
|
|
|
- **Gradients** :
|
|
- Gradients subtils pour certains backgrounds
|
|
- Gradients sur les bordures pour effet neon
|
|
|
|
- **Shadows et glows** :
|
|
- Utiliser `shadow-glow-cyan` et `shadow-glow-green` de manière cohérente
|
|
- Ajouter des glows sur hover pour éléments interactifs
|
|
|
|
## Priorisation
|
|
|
|
### Priorité haute
|
|
1. Correction de cohérence (SeriesCard, AlbyInstaller)
|
|
2. Système de boutons unifié
|
|
3. Système de cards unifié
|
|
4. Typographie et espacement cohérents
|
|
5. Responsive design amélioré
|
|
|
|
### Priorité moyenne
|
|
6. Composants réutilisables (Button, Card, Input, etc.)
|
|
7. Modals et overlays unifiés
|
|
8. Formulaires avec validation visuelle
|
|
9. Navigation mobile
|
|
10. États vides et erreurs
|
|
|
|
### Priorité basse
|
|
11. Animations et transitions avancées
|
|
12. Système d'icônes complet
|
|
13. Background grid et effets visuels
|
|
14. Documentation des composants
|
|
15. Storybook ou documentation visuelle
|
|
|
|
## Notes d'implémentation
|
|
|
|
- Toutes les améliorations doivent respecter le thème cyberpunk/neon existant
|
|
- Maintenir la cohérence avec les couleurs définies dans `tailwind.config.js`
|
|
- Tester sur différents appareils et tailles d'écran
|
|
- Vérifier l'accessibilité (contraste, focus, ARIA)
|
|
- Documenter les nouveaux composants et patterns
|
|
- Respecter les règles de qualité du projet (pas de duplication, composants réutilisables)
|