Surface
Matières réelles simulées
La surface ressemble clairement à du papier, du cuir, du bois, du tissu ou du métal.
Mesure d'audience
Avec ton accord, Google Analytics mesure l'usage du site pour nous aider à l'améliorer. Ton choix est mémorisé sur cet appareil et reste modifiable via « Cookies » en pied de page.
Mouvement établi
L’interface imite un objet réel avec ses matières, son éclairage et ses détails physiques.
Aussi appelé : skeuomorphic design, realistic UI, real-world metaphor UI
Définition et périmètre
Le skeuomorphism transpose des objets et matériaux reconnaissables dans l’interface. Papier, cuir, métal, relief et détails de fabrication servent à expliquer comment un contrôle se manipule.
Périmètre : Cette fiche traite du style visuel. La métaphore d’interaction, comme une corbeille pour supprimer un fichier, applique le même principe à un niveau conceptuel.
Les quatre signaux distinctifs doivent rester visibles sans dépendre du nom du style.
Surface
La surface ressemble clairement à du papier, du cuir, du bois, du tissu ou du métal.
Profondeur
Reflets, biseaux et ombres internes décrivent une source de lumière cohérente.
Composition
L’ensemble est dessiné comme l’objet qu’il remplace, par exemple un carnet ou une console.
Géométrie
Coutures, gaufrage et bords travaillés prolongent la logique du matériau choisi.
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 Skeuomorphism dans ton agent ## Objectif Crée cette surface en skeuomorphism autour d’un seul objet réel identifiable. Simule sa matière, applique un éclairage cohérent et utilise les détails physiques uniquement pour clarifier l’affordance. ## 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 - Matières réelles simulées — La surface ressemble clairement à du papier, du cuir, du bois, du tissu ou du métal. - Éclairage physique — Reflets, biseaux et ombres internes décrivent une source de lumière cohérente. - Métaphore d’objet — L’ensemble est dessiné comme l’objet qu’il remplace, par exemple un carnet ou une console. - Détails de fabrication — Coutures, gaufrage et bords travaillés prolongent la logique du matériau choisi. ## É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é - Mesurer le contraste sur la zone la plus chargée de chaque texture. - Associer relief et brillance à un changement de couleur, de texte ou d’état programmatique. - Compresser les textures et garantir que l’interface reste utilisable sans elles. ## Quand ne pas utiliser - Mélanger cuir, métal, verre et bois sans objet directeur. - Remplacer les libellés et états accessibles par une imitation visuelle ambiguë. ## Critères d’acceptation - Un outil spécialisé dont l’objet réel aide immédiatement à comprendre la manipulation. - Une expérience narrative ou patrimoniale où la matière a une valeur de marque. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
À essayer ensuite
# Auditer Skeuomorphism sur la surface réelle ## Objectif Contrôle que Skeuomorphism reste cohérent, accessible et mesuré sur les composants réellement concernés. ## Contrôles - Compare les états interactifs et les fallbacks. - Contrôle contraste, focus et réduction de mouvement. - Signale les effets visuels qui dégradent la hiérarchie ou les performances. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:84d6097613dbbff495895db94941d26dbd6818a7390d50dfd71ecb3d9596ca9e
debugging
# Déboguer Skeuomorphism 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 rendu en retirant les ornements qui ne correspondent pas au matériau ou à l’objet choisi. Renforce les libellés, les états et le contraste pour que le décor ne porte jamais seul le sens. ## Vérification finale - Mesurer le contraste sur la zone la plus chargée de chaque texture. - Associer relief et brillance à un changement de couleur, de texte ou d’état programmatique. - Compresser les textures et garantir que l’interface reste utilisable sans elles. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
À essayer ensuite
# Prévenir les dérives de Skeuomorphism ## Objectif Transforme la correction visuelle en règle réutilisable et en contrôle ciblé sans figer toute l’interface. ## Contrôles - Isole les tokens ou variantes responsables. - Ajoute une preuve ciblée pour les états concernés. - Compare avec les styles proches avant d’élargir la règle. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:bbc22987c955b7e50a9f08d0047136c42d9976aff5e667808fffb6faf6f7ac86
Digest du Pack: sha256:5798774c662cb51cafa3a8c7c95cc2fee616ee75b74da6ce8e90f3eadbe241d3