Surface
Une surface continue
Le fond et les contrôles partagent exactement la même teinte mate.
Tendance nommée par l’industrie
Des contrôles moulés dans une surface mate grâce à deux ombres très douces.
Aussi appelé: Soft UI, neomorphism, soft neumorphic UI
Définition et périmètre
Le neumorphism donne l’impression que les contrôles sortent d’une surface continue ou s’y enfoncent. Le fond et les éléments partagent la même couleur, tandis qu’une paire d’ombres claires et sombres crée le relief.
Périmètre: Cette fiche couvre le Soft UI apparu autour de 2019. Les objets plus épais, indépendamment colorés et flottants appartiennent plutôt au claymorphism.
Les quatre signaux distinctifs doivent rester visibles sans dépendre du nom du style.
Surface
Le fond et les contrôles partagent exactement la même teinte mate.
Profondeur
Une ombre claire et une ombre sombre décrivent un éclairage diagonal constant.
Profondeur
Les états actifs inversent les ombres vers l’intérieur de la surface.
Géométrie
La forme apparaît dans la transition des ombres, sans contour franc.
Différence décisive avec le voisin le plus proche
Comprendre → Reconnaître → Choisir → Comparer
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
implementation
# Implémenter Neumorphism dans ton agent ## Objectif Crée une surface neumorphic limitée à quelques contrôles secondaires. Utilise une teinte mate commune, une paire d’ombres opposées cohérente et des états enfoncés. Ajoute toujours un contraste et un focus indépendants des ombres. ## Prérequis - Inspecte les composants, tokens et contraintes de marque existants. - Confirme que ce style convient à la surface et au contenu. - Préserve la structure, la sémantique et les interactions existantes. ## Comportement et surfaces - Une surface continue — Le fond et les contrôles partagent exactement la même teinte mate. - Deux ombres douces — Une ombre claire et une ombre sombre décrivent un éclairage diagonal constant. - État enfoncé — Les états actifs inversent les ombres vers l’intérieur de la surface. - Bords peu contrastés — La forme apparaît dans la transition des ombres, sans contour franc. ## États - Couvre les états par défaut, survol, focus, actif, désactivé, chargement et erreur qui existent déjà. - Fournis un état statique lorsque la réduction de mouvement est demandée. ## Accessibilité - Ajouter des limites et des états perceptibles sans dépendre des ombres à faible contraste. - Conserver un contour de focus très contrasté autour de chaque contrôle. - Éviter ce traitement pour les formulaires critiques et les longues listes d’actions. ## Non-objectifs - Rendre toutes les commandes presque invisibles pour préserver une surface uniforme. - Changer la direction de lumière entre les composants. ## Critères d’acceptation - Quelques contrôles décoratifs dans une interface simple avec fond constant. - Un spécimen ou une identité visuelle où la douceur est plus importante que la densité.
sha256:1db6fd3885b0e301ed0f0224079a6805945dfa77205fab018da21b2d1df1d147
debugging
# Déboguer Neumorphism dans ton agent ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Compare la surface aux signaux visuels documentés. - Vérifie contraste, focus, réduction de mouvement et fallback. - Isole la couche visuelle sans modifier la structure fonctionnelle. ## Causes possibles - Le style masque la hiérarchie ou réduit le contraste. - L’effet est appliqué à trop de surfaces ou dépend d’une API absente. - Un état interactif n’est plus perceptible. ## Corrections bornées Répare le neumorphism en augmentant le contraste des libellés et en ajoutant une bordure ou un changement de couleur aux états. Réserve les ombres au relief visuel, jamais à la seule compréhension d’une action. ## Vérification finale - Ajouter des limites et des états perceptibles sans dépendre des ombres à faible contraste. - Conserver un contour de focus très contrasté autour de chaque contrôle. - Éviter ce traitement pour les formulaires critiques et les longues listes d’actions.
sha256:2554a2ee4ca605fe374e70ff5ee384bd24db3aa29fd84b41b4e5704501db103a
Digest du Pack: sha256:b210dd883f21d2f7b711c6882578678b5b7962ba0068df962bb2ea15396b63c0