AudiOhm/docs/plans/2025-01-18-ui-ux-design.md

Spotify Le 2 - UI/UX Design Document

Date: 2025-01-18 Thème: Néon Cyberpunk Priorité: Interface fluide (navigation instantanée, contrôles réactifs, chargement progressif)

---

1. Architecture Globale

Stack Technique

• Frontend: Flutter (Dart 3.2+) avec Riverpod pour state management
• Backend: Python + FastAPI
• Base de données: PostgreSQL 15+
• Cache: Redis 7+

Layout Adaptatif

Desktop (Windows/Linux):

• Sidebar navigation à gauche (240px fixe)
• Zone de contenu principale avec AdaptiveScaffold
• Player persistant en bas de l'écran (mini player)
• Modal fullscreen pour player complet

Mobile (Android):

• Bottom navigation bar (4 onglets)
• Content zone avec AppBars dynamiques
• Mini player en bas (sticky)
• Fullscreen player avec swipe-up

State Management (Riverpod)

- StateProvider → UI simple (current page, theme)
- StateNotifierProvider → Player state (contrôles réactifs)
- AsyncNotifierProvider → API data avec cache automatique
- StreamProvider → Player progress (60fps)

Optimisations Fluidité

1. Preloading - Données page suivante en arrière-plan
2. Image caching - cached_network_image avec cache disque infini
3. ListView builder - Rendu progressif longues listes
4. Isolates - Traitement lourd dans isolates séparés

---

2. Thème Néon Cyberpunk

Palette de Couleurs

class AppColors {
  // Backgrounds
  static const primary = Color(0xFF0A0E27);    // Bleu nuit très foncé
  static const surface = Color(0xFF1A1F3A);    // Bleu nuit
  static const surfaceVariant = Color(0xFF252B4A);

  // Accent colors
  static const cyan = Color(0xFF00F0FF);       // Cyan électrique néon
  static const violet = Color(0xFFBF00FF);     // Violet/magenta néon
  static const rose = Color(0xFFFF006E);       // Rose néon vif
  static const vert = Color(0xFF39FF14);       // Vert néon matrix
  static const jaune = Color(0xFFFFD600);      // Jaune néon
  static const rouge = Color(0xFFFF2A6D);      // Rouge néon

  // Text
  static const onBg = Color(0xFFE0E6FF);       // Blanc bleuté
  static const onSurface = Color(0xFFB0B8D4);  // Bleu gris clair
  static const muted = Color(0xFF6A7294);      // Bleu gris désaturé
}

Typographie

Font family: 'Outfit' (Google Fonts)

Sizes:
- H1: 32px/700 (titres pages)
- H2: 24px/600 (sections)
- H3: 20px/600 (cards headers)
- Body large: 16px/400
- Body: 14px/400
- Caption: 12px/400

Effets Visuels

1. Glow effects

BoxShadow(
  color: AppColors.cyan.withOpacity(0.3),
  blurRadius: 20,
  spreadRadius: 2,
)

2. Gradient borders - Dégradés cyan→violet sur cards importantes

3. Glassmorphism - Surfaces semi-transparentes avec blur

4. Scanlines - Overlay subtil sur backgrounds (style retro)

Animation Standards

• Durée: 200ms (rapide pour réactivité)
• Courbe: curves.easeOutCubic
• Hover: scale(1.02) + glow intensifié
• Press: scale(0.98) immédiat

---

3. Composants UI Critiques

Mini Player

Priorité: Contrôles réactifs (réponse < 50ms)

- Stream 60fps pour progress bar
- setState synchrone pour mises à jour
- Slider sans animation de transition
- Contrôles avec feedback immédiat

Infinite Scroll

- ListView.builder pour rendu progressif
- Préchargement 5 items avant fin
- PaginatedAsyncNotifier
- Shimmer placeholder pendant chargement

Image Caching

- CachedNetworkImage avec cache infini
- Placeholder gradient animé
- Fallback gradient on error
- FadeIn 200ms

---

4. Navigation

Desktop Layout

┌────────────────────────────────────────────────────┐
│ Sidebar │ Main Content │ Right Panel               │
│ (240px) │               │ (320px)                  │
│         │               │                           │
│ - Home  │ Top Bar       │ Queue / Now Playing       │
│ - Search│──────────────│                           │
│ - Lib   │ Page Content │                           │
│ - Play  │               │                           │
│         │               │                           │
│         │               │                           │
├─────────┴───────────────┴───────────────────────────┤
│ Mini Player (persistent)                            │
└────────────────────────────────────────────────────┘

Mobile Layout

┌────────────────────┐
│ Top Bar           │
├────────────────────┤
│                    │
│ Page Content       │
│                    │
│                    │
├────────────────────┤
│ Mini Player        │
├────────────────────┤
│ Bottom Nav (56px)  │
└────────────────────┘

Pages Principales

• Home (Sections: Recommanded, Recently Played, New Releases)
• Search (Barre recherche + Résultats)
• Library (Playlists, Albums, Artists)
• Settings

---

5. Structure du Projet Flutter

lib/
├── main.dart
├── core/
│   ├── constants/
│   │   ├── app_constants.dart
│   │   └── api_constants.dart
│   ├── theme/
│   │   ├── app_theme.dart
│   │   ├── colors.dart
│   │   └── text_styles.dart
│   └── utils/
│       ├── validators.dart
│       └── formatters.dart
├── domain/
│   ├── entities/
│   │   ├── user.dart
│   │   ├── track.dart
│   │   ├── playlist.dart
│   │   └── artist.dart
│   └── repositories/
│       └── (repository interfaces)
├── infrastructure/
│   ├── datasources/
│   │   ├── local/
│   │   └── remote/
│   └── repositories/
│       └── (repository implementations)
└── presentation/
    ├── providers/
    │   ├── auth_provider.dart
    │   ├── music_provider.dart
    │   └── navigation_provider.dart
    ├── pages/
    │   ├── desktop/
    │   ├── mobile/
    │   ├── home/
    │   ├── search/
    │   └── library/
    └── widgets/
        ├── common/
        ├── player/
        └── adaptive/

---

6. Critères de Succès

Performance

• Navigation < 100ms entre pages
• Contrôles player < 50ms de latence
• Scroll 60fps constant
• Images chargées progressivement sans blocking

UX

• Interface adaptative seamless
• Feedback visuel immédiat sur toutes interactions
• États de chargement clairs
• Gestion d'erreur gracieuse

Design

• Cohérence visuelle néon cyberpunk
• Hiérarchie visuelle claire
• Accessibilité (contrast ratios)
• Animations fluides (200ms)

---

Prototype

Un preview HTML du design est disponible dans: docs/design-preview.html

Ouvrir dans un navigateur pour voir:

• Palette de couleurs interactive
• Composants UI stylisés
• Effets néon cyberpunk
• Animations et interactions