Dev-KAIDO/design-mobile

Conception Mobile — Compétence Complète

Vue d'ensemble

Couvre la conception iOS et Android : motifs spécifiques à la plateforme, navigation, gestes, typographie, accessibilité et tendances modernes. Fusionne building-native-ui, expo-ui-swiftui, expo-ui-jetpack-compose, engineering-mobile-app-builder, react-native-best-practices, expo-tailwind-setup et native-data-fetching.

---

1. Directives de Plateforme (إرشادات المنصة)

1.1 iOS (Human Interface Guidelines)

• Navigation : push/pop (UINavigationController), barre d'onglets, feuilles modales
• Typographie : SF Pro (San Francisco) — New York (serif) pour la lecture
• Grille : grille 4pt, marges : 16pt (standard), 20pt (grand)
• Couleurs : couleurs système (bleu, vert, rouge, orange, violet, rose, sarcelle, indigo, gris)
• Cibles tactiles : minimum 44×44pt
• Geste de retour : balayer depuis le bord gauche
• Zones de sécurité : encoche, indicateur d'accueil (utiliser safe-area-inset)
• Mode sombre : UIColor { traitCollection } adaptation système

1.2 Android (Material Design 3)

• Navigation : navigation inférieure, tiroir de navigation, barre d'application supérieure, bouton retour
• Typographie : Roboto (système), Google Sans (marque)
• Grille : grille 4dp, marges : 16dp
• Couleurs : couleur dynamique (Material You), palettes tonales
• Cibles tactiles : minimum 48×48dp
• Bouton retour : retour système (retour prédictif dans Android 14)
• Élévation : les ombres représentent la profondeur et la priorité d'interaction
• Effet d'ondulation : retour tactile sur tous les éléments interactifs

1.3 Cross-Platform (React Native / Expo)

• Essayez Expo Go d'abord pour un prototypage rapide
• Utilisez useWindowDimensions() au lieu de Dimensions.get()
• boxShadow pour les ombres cross-platform (pas shadow/elevation héritées)
• expo-image pour un meilleur chargement d'images et les SF Symbols
• Code spécifique à la plateforme : .ios.tsx / .android.tsx

---

2. Navigation Mobile (التنقل)

2.1 Modèles de Navigation

Modèle	Quand l'utiliser	Plateforme
Barre d'onglets	3-5 destinations de premier niveau	iOS (bas), Android (bas)
Navigation inférieure	3-5 destinations de premier niveau	Material Design
Tiroir de navigation	Plusieurs destinations, accès peu fréquent	Android
Navigation par pile	Exploration hiérarchique	Les deux
Feuilles modales	Tâches ciblées, actions rapides	iOS (form sheet), Android (bottom sheet)
Modal plein écran	Flux en plusieurs étapes	Les deux
Actions par balayage	Actions sur les éléments de liste (supprimer, archiver)	Les deux

2.2 Règles de la Barre d'Onglets

• Max 5 onglets (iOS), 5 max (Material)
• État actif : icône remplie + changement de couleur du libellé
• Badge : point rouge avec compteur pour les notifications
• Zone de sécurité : au-dessus de l'indicateur d'accueil sur iOS

2.3 Navigation par Pile

• Pousser : glisser depuis la droite (iOS), fondu+glisser (Android)
• Revenir : balayer depuis le bord gauche (iOS), bouton retour (Android)
• Transition : 300ms (iOS), 200-300ms (Android)

2.4 Gestes

• Balayage : actions sur liste, navigation entre écrans
• Tirer pour actualiser : modèle standard pour les listes
• Appui long : menu contextuel (délai de 300 à 500 ms)
• Pincer pour zoomer : images, cartes
• Double tap : zoomer, aimer (applications sociales)

---

3. Typographie Mobile (الطباعة)

3.1 Échelle Typographique

Style	Taille	Graisse	Hauteur de ligne
Grand Titre	34pt	700	41pt
Titre 1	28pt	700	34pt
Titre 2	22pt	700	28pt
Titre 3	20pt	600	25pt
Titre courant	17pt	600	22pt
Corps	17pt	400	22pt
Légende	16pt	400	21pt
Sous-titre	15pt	400	20pt
Note de bas de page	13pt	400	18pt
Légende 1	12pt	400	16pt
Légende 2	11pt	400	13pt

3.2 Règles

• Taille de texte minimale : 12sp (Android), 11pt (iOS)
• Texte du corps : 16-17pt pour une lecture confortable
• Hauteur de ligne : 1,3-1,5× taille de la police
• Ne jamais tronquer : texte critique (chiffres, noms, dates)
• Longueur de ligne : 40 à 70 caractères max
• Type dynamique : prendre en charge la taille du texte système (iOS : UIFontMetrics, Android : sp)

---

4. Composants Mobiles (المكونات)

4.1 Composants Courants

Composant	iOS	Android (Material)
Bouton	UIButton (rempli, teinté, gris)	Élevé, rempli, tonal, contour, texte
Liste	UITableView (groupée, encastrée)	RecyclerView (liste, carte)
Champ de saisie	UITextField	TextField (rempli, contour)
Interrupteur	UISwitch	Switch
Curseur	UISlider	Slider
Sélecteur	Sélecteur à roue / menu déroulant	Menu déroulant
Barre d'onglets	UITabBar	BottomNavigationView
Recherche	UISearchBar	SearchBar
Toast	N/A (utiliser personnalisé)	Snackbar

4.2 Modèles de Liste

• Standard : icône + titre + sous-titre + chevron
• Action : balayer à gauche → supprimer/archiver/partager
• Groupée : en-têtes de section avec éléments groupés
• Carte : image + titre + description + actions
• Défilement infini : charger plus en défilant (avec indicateur de chargement)

4.3 Modèles de Formulaire

• Une seule colonne toujours (mobile)
• Étiquettes : au-dessus des champs (pas seulement flottantes)
• Type de clavier : correspondre à la saisie (numérique, email, téléphone)
• Éviter le clavier : faire défiler le formulaire lorsque le clavier apparaît
• Validation : en ligne sous le champ, changement de couleur
• Soumettre : bouton collant en bas ou action du formulaire

---

5. Mise en Page Mobile (التنسيق)

5.1 Zones de Sécurité

// Expo / React Native
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const insets = useSafeAreaInsets();
<View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }} />

5.2 Densité d'Écran

• iPhone SE : 375×667pt (le plus petit)
• iPhone 14 : 390×844pt
• iPhone 14 Pro Max : 430×932pt
• Android : 360×640dp (courant), varie considérablement

5.3 Cibles Tactiles

• Minimum : 44×44pt (iOS), 48×48dp (Android)
• Préféré : 48×48pt pour les zones accessibles au pouce
• Espacement : 8pt minimum entre les cibles tactiles adjacentes

5.4 Zones de Pouce

• Meilleure zone : moitié inférieure de l'écran (portée naturelle du pouce)
• Actions principales : tiers inférieur (surtout sur les grands téléphones)
• Actions destructrices : loin de la zone principale

---

6. Système de Conception Mobile (نظام التصميم)

6.1 Système de Couleurs

/* Mode clair */
--primary: #007AFF;        /* Bleu iOS / Bleu Android */
--background: #FFFFFF;
--surface: #F2F2F7;
--text-primary: #000000;
--text-secondary: #8E8E93;
--separator: #C6C6C8;
--success: #34C759;
--error: #FF3B30;
--warning: #FF9500;

/* Mode sombre */
--primary: #0A84FF;
--background: #000000;
--surface: #1C1C1E;
--text-primary: #FFFFFF;
--text-secondary: #8E8E93;

6.2 Mode Sombre

• Bascule à l'échelle du système (suivre les réglages OS)
• Noir pur (#000) pour OLED (iOS) ou gris foncé (#121212) pour Android
• Réduire légèrement le contraste en mode sombre
• Tester les deux modes pour chaque écran

6.3 Iconographie

• iOS : SF Symbols (système), icônes personnalisées (spécifiques à l'application)
• Android : Material Icons (système), personnalisées
• Taille : 24×24dp standard, 18×18dp petit, 28×28dp grand
• Style : remplie (actif), contour (inactif)

---

7. Mouvement & Animation (الحركة)

7.1 Principes

• Durée : 250-350ms (standard), 150-200ms (rapide), 500ms+ (complexe)
• Assouplissement : cubic-bezier(0.2, 0, 0, 1) (Material), ease-out (iOS)
• Objectif : indiquer la navigation, confirmer l'action, montrer le chargement, ravir

7.2 Modèles Courants

Animation	Durée	Utilisation
Push/pop de page	300ms	Navigation par pile
Présentation/rejet modal	300ms	Feuilles modales
Apparition en fondu	200ms	Chargement de contenu
Glissement vers le haut	250ms	Feuille inférieure
Mise à l'échelle	200ms	Retour de pression du bouton
Squelette	Boucle de 1,5 s	Chargement de contenu
Tirer pour actualiser	200ms	Actualisation de la liste

7.3 Spécifique à la Plateforme

• iOS : physique à ressort (naturelle, rebondissante)
• Android : assouplissement standard (prévisible, fluide)
• Haptique : impact léger (pression de bouton), moyen (sélection), motifs de réussite/erreur

---

8. Modèles UX Mobile (أنماط تجربة المستخدم)

8.1 Intégration

• 3 à 5 écrans max : proposition de valeur → fonctionnalités → autorisations → appel à l'action
• Option Ignorer : toujours disponible
• Indicateur de progression : points ou barre de progression
• Demandes d'autorisation : expliquer POURQUOI avant de demander

8.2 États Vides

• Illustration ou icône
• Message clair
• Bouton d'appel à l'action
• Exemples : "Aucun résultat", "Votre panier est vide", "Aucune notification"

8.3 États de Chargement

• Écrans squelette (préférés aux spinners)
• Barres de progression pour les opérations mesurables
• Tirer pour actualiser pour les listes
• UI optimiste pour les actions (mettre à jour immédiatement, annuler en cas d'erreur)

8.4 États d'Erreur

• En ligne : erreurs de validation au niveau du champ
• Plein écran : erreurs critiques avec bouton réessayer
• Toast/snackbar : erreurs transitoires (3 à 5 secondes)
• Hors ligne : contenu mis en cache + bannière "Vous êtes hors ligne"

8.5 Notifications

• Pousser : demande d'autorisation avec explication
• Dans l'application : badge, bannière ou boîte de réception
• Paramètres : contrôle granulaire (par catégorie)

---

9. Accessibilité (إمكانية الوصول)

9.1 Liste de Vérification

• Toutes les cibles tactiles ≥ 44×44pt
• Le texte prend en charge le type dynamique / la mise à l'échelle des polices
• Contraste des couleurs ≥ 4,5:1
• Toutes les images ont un texte alternatif (accessibilityLabel)
• Lecteur d'écran : VoiceOver (iOS) / TalkBack (Android)
• L'ordre de mise au point suit l'ordre visuel
• Retour haptique pour les actions importantes
• Mouvement réduit respecté
• Aucune information basée uniquement sur la couleur
• Les formulaires ont des étiquettes appropriées

9.2 Lecteur d'Écran

• VoiceOver iOS : accessibilityLabel, accessibilityHint, accessibilityTraits
• TalkBack Android : contentDescription, accessibilityRole
• Test : activer le lecteur d'écran et naviguer dans l'application complète

---

10. Performance (الأداء)

10.1 Métriques Clés

• TTI (Temps jusqu'à l'interactivité) : < 2s
• Taux de rafraîchissement : 60 FPS (16.67ms par image)
• Taille de l'application : minimiser le bundle
• Mémoire : pas de fuites, nettoyage approprié

10.2 Optimisation

• Utiliser FlatList (pas ScrollView) pour les longues listes
• Mémoriser les composants coûteux (React.memo, useMemo, useCallback)
• Charger paresseusement les écrans et les images
• Réduire les rendus (props clés appropriées, éviter les fonctions anonymes dans les props)
• Mise en cache et compression des images
• Moteur Hermes pour React Native

---

11. Composants Natifs Expo UI (مكونات أصلية)

11.1 Expo UI — SwiftUI (iOS)

npx expo install @expo/ui

import { Host, SwiftUIButton } from '@expo/ui/swift-ui';

export default function Screen() {
  return (
    <Host>                                 {/* chaque arbre SwiftUI a besoin de Host */}
      <SwiftUIButton title="Appuyez-moi" action={onPress} />
    </Host>
  );
}

• ⚠️ Chaque arbre SwiftUI doit être enveloppé dans Host — sinon rien ne s'affiche
• Intégrer des composants React Native dans un arbre SwiftUI avec RNHostView
• Lisez le .d.ts du package et la documentation des composants avant utilisation — les modificateurs changent entre les versions SDK

11.2 Expo UI — Jetpack Compose (Android)

import { Host, Button } from '@expo/ui/jetpack-compose';
import { composeModifiers } from '@expo/ui/jetpack-compose/modifiers';

<Host>
  <Button title="Appuyez-moi" modifiers={[composeModifiers.padding(16)]} onPress={onPress} />
</Host>

• ⚠️ Enveloppez chaque arbre Compose dans Host (même règle que SwiftUI)
• Longues listes → LazyColumn ; icônes → Icon avec fichiers XML locaux
• Lisez le .d.ts du composant avant d'utiliser des modificateurs — l'API est spécifique à la version SDK

11.3 NativeWind v5 + Tailwind v4 (style cross-platform)

npm i nativewind react-native-css tailwindcss @tailwindcss/postcss

// src/tw/index.tsx — composants enveloppés avec support className
import { styled } from 'nativewind';
export const View = styled(NativeView);

• Aucune modification de babel.config.js nécessaire — react-native-css gère la transformation à l'exécution
• La sortie se trouve dans src/tw/ (View, Text, Image, animated enveloppés)
• Utilisez className partout ; revenez à style pour les cas uniques
• Cible Web : le même className fonctionne sur React Native Web — une seule base de code, trois plateformes

11.4 Quand Utiliser Quoi

Besoin	Utiliser
Aspect natif (SwiftUI/Compose)	@expo/ui avec Host
Cross-platform + itération rapide	NativeWind v5
Dessin / animation personnalisé(e)	Reanimated + Skia
Composants RN standard	View/Text/Pressable intégrés

---

12. Liste de Vérification (قائمة التحقق)

• Testé sur un appareil réel (pas seulement un simulateur)
• Modes clair et sombre
• Taille de texte dynamique (la plus petite et la plus grande)
• Navigation VoiceOver/TalkBack
• Toutes les cibles tactiles accessibles
• Aucune rupture de mise en page sur le plus petit écran (iPhone SE)
• Aucune rupture de mise en page sur le plus grand écran (tablette)
• Animations fluides à 60 FPS
• État hors ligne géré
• Demandes d'autorisation avec explications
• États vides pour toutes les listes
• États d'erreur pour toutes les opérations asynchrones
• États de chargement (squelette, spinner)
• Évitement du clavier dans les formulaires

---

Compétences Connexes

• $design-web — pour la conception d'interfaces web
• $design-desktop — pour la conception d'applications de bureau
• $design-figma — pour le travail de conception Figma
• $mobile-development — pour le développement Expo/React Native
• $testing-comprehensive — pour tester les applications mobiles et de bureau