Surface
Matières réelles simulées
La surface ressemble clairement à du papier, du cuir, du bois, du tissu ou du métal.
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. ## Non-objectifs - 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.
sha256:75a4cf9ebb55c1ed725067520a014b072bc856b395075ee33534cf43a0b1f9e9
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.
sha256:b2b5f5c4b7ae7f2869cd0b1d01d79dfaa550e2796ee401f4a0c03affc941065c
Digest du Pack: sha256:d0574ef12b604573c2c1aa3158d866c0f99f1eb3e287b8e545f849fd83e5f16b