Landing page soignée, étape 2 : finitions UI premium

Règles de qualité UI

Le "standing" d'une interface provient de paramètres de détail quantifiables. Suivez ces spécifications pour écrire les styles et les animations ; en cas de conflit avec les design tokens existants du projet ou le thème AntD, privilégiez le projet. Pour les thèmes doubles, utilisez toujours des variables CSS avec la portée html[data-theme], n'utilisez pas light-dark() (problèmes de compatibilité sur les anciens noyaux).

I. Lois immuables de la qualité

1. Stratification sans bordures : les niveaux sont exprimés par des dégradés de luminosité de 1 % à 3 % de l'arrière-plan. Interdiction du noir pur #000.
   • Clair : fond de page #f5f5f3 / carte #fcfcfb ; sombre : #0b0b0a / #151515 / #1a1a19 / #20201e (gradation du plus sombre au plus clair)
   • Projets AntD : aligner sur le token (colorBgLayout/colorBgContainer), ne pas coder les valeurs de couleur en dur partout.
2. Mise au point par ombre, pas par outline : lors de la mise au point d'un champ de saisie/carte, utiliser box-shadow (ombre intérieure pleine + halo de couleur principale à faible opacité à l'extérieur) pour créer une "sensation d'emboîtement" ; supprimer l'outline par défaut, mais :focus-visible doit conserver un focus visible.
3. Compensation du poids de la police en mode sombre : en mode sombre, réduire le poids de la police d'un cran (400→300, avec les polices variables, exactement 360) pour compenser l'effet d'épaississement du texte blanc. Basculer avec le thème via des variables CSS.
4. Texte défilant comme une encre qui s'étale : 90ms par caractère, transition de blur(6px) + semi-transparent vers net, avec cubic-bezier(.215,.61,.355,1), les caractères adjacents se décalent de 30ms. Interdiction des bonds bruts caractère par caractère ou de l'apparition soudaine de tout le bloc.
5. Alignement des icônes en ligne : vertical-align: -0.125em, ou utiliser flex + align-items: center pour encapsuler.
6. Anticrénelage numérique : toujours utiliser font-variant-numeric: tabular-nums pour les chiffres statistiques, les dates, les prix ; pas de saut de largeur lors du rafraîchissement ou du changement.
7. Dépliage fluide : ne pas calculer la hauteur en JS pour l'animation de hauteur, utiliser display: grid + grid-template-rows: 0fr → 1fr pour la transition (avec overflow: hidden à l'intérieur).
8. Éviter les lignes orphelines : text-wrap: pretty pour le corps du texte, text-wrap: balance pour les titres.
9. Animations avec personnalité :
   • Glisser/aimanter/positionner : ressort sur-amorti (stiffness 1200 / damping 80) ou cubic-bezier(.2,0,0,1), pas de rebond, accroche immédiate.
   • Like/coche/feedback positif : ressort sous-amorti (380 / 18), un petit rebond, élastique.
   • Entrée 150–250ms, sortie 100–150ms, rapide et mesuré.
10. Auto-extinction des retours : les retours temporaires (copie, sauvegarde) s'affichent 2–2,5 s puis disparaissent automatiquement en fondu. Ne pas attendre que l'utilisateur les ferme manuellement.

II. Liste inverse des signes de cheapness (auto-vérification)

Si un élément est présent, retour à la case départ :

• Utilisation de bordures de 1px pour délimiter toutes les zones ; grands fonds noirs/blancs purs.
• Outline bleue par défaut du navigateur au focus.
• Sur interface sombre, conservation du poids de police du mode clair (texte blanc épaissi).
• Texte défilant par bonds bruts caractère par caractère ou apparition soudaine de tout le bloc.
• Sauts lors des changements numériques ; toutes les animations avec la même courbe d'easing, sans différence de rapidité/personnalité.
• Feedback temporaire ne disparaissant jamais, nécessitant une fermeture manuelle.
• Décorations sans information : titres en ALL-CAPS, chaînes séparées par des points, boutons suffixés →, dégradés lumineux partout.

III. Limites de sélection des composants (couches contextuelles et feedback)

Scénario	Utiliser	Points clés
Navigation semi-écran en bas, possibilité de glisser pour augmenter (mobile)	Bottom Sheet (AntD Drawer placement="bottom")	Geste amorti, accrochage par paliers, trois hauteurs : peek/half/full ≈ 25/50/90 %
Choix d'actions mutuellement exclusives (mobile)	Action Sheet	Boutons plats, élément d'annulation indépendant, actions dangereuses en rouge et séparées de l'annulation
Notification légère après action, annulation possible	Snackbar (AntD message + bouton d'annulation)	Barre flottante en bas, disparition automatique avec délai, annulation réversible
Confirmation de danger/blocage	AlertDialog (AntD Modal)	Fond verrouillé avec masque ; n'interdire Esc que pour les actions irréversibles
Nouvelle fonctionnalité/guide pour débutant	Tour (AntD Tour)	Mise en évidence + visite guidée, possibilité de sauter
Agrandissement d'image/média	Lightbox (antd-image ou personnalisé)	Zoom à la molette, fermeture par Esc
Validation de champ de formulaire	Inline Alert (validation AntD Form)	Texte rouge sous le champ, validation immédiate, disparaît après correction ; ne pas utiliser de message global pour les erreurs de champ

Du moins bloquant au plus bloquant : Snackbar < Inline Alert < Sheet < Action Sheet < Dialog. Bureau : privilégier Modal/message ; mobile : privilégier la famille Sheet. En cas de doute, choisir le moins bloquant.

IV. Bibliothèque d'animations par personnalité (à utiliser selon les besoins, pas toutes en même temps)

• Bouton de feedback de complétion : après clic, se rétracte en cercle → tracé du crochet → particules éclatées, 300–400ms.
• Cochage lié : cocher → barre de progression croissante + défilement numérique + changement de fond supérieur en fonction de la progression.
• Dépliage de cartes superposées : les cartes se déplient les unes après les autres (décalage de 50ms par carte), puis se replient au clic.
• Carte aimantée + trait : glissement horizontal, relâchement pour accrocher la carte la plus proche (ressort 1200/80) ; lors du changement de carte, tracer progressivement avec stroke-dashoffset.
• Molette inertielle : rotation inertielle du picker → décélération → accrochage aux graduations ; dépassement avec rebond (ressort sous-amorti 380/18).
• Transition circulaire : depuis le point d'appui/pression, diffusion de clip-path: circle() jusqu'à remplir l'écran, 400–500ms.

Priorité à CSS transition/animation et Web Animations ; paramètres de ressort selon la sémantique framer-motion (stiffness/damping) ; toutes les animations doivent avoir une dégradation prefers-reduced-motion (passage direct/fondu).

V. Auto-vérification de livraison

• Stratification par dégradés, pas de fonds noirs/blancs purs, pas de bordures pour tout délimiter.
• Focus clavier visible (double ombre), cible tactile ≥ 44px.
• Poids de police compensé en mode sombre.
• Chiffres tabular-nums ; corps de texte text-wrap: pretty.
• Animations à deux niveaux de personnalité, durée dans l'intervalle défini ; dégradation prefers-reduced-motion.
• Feedback temporaire disparaît automatiquement après 2–2,5 s ; erreurs de formulaire via indication en ligne.

Source

Paramètres extraits de trois vidéos TikTok (2026-10) : Ludi "Analyse du code source des applications d'IA des grandes entreprises, la qualité grâce à ces 5 astuces" et "6 composants secrets de premier ordre" ; Xiāoguō tóngxué "Épisode 14 : 6 interactions pour rendre l'application AI plus soignée".