Que fait Skeuomorphisme ?
Un contrôle à l’écran est plus facile à apprendre lorsqu’il ressemble et se comporte comme un objet physique que l’utilisateur connaît déjà.
Interfaces qui copient des objets réels : cuir, lin, bois, feutre, verre et métal brossé, éclairés par le haut avec des dégradés et des ombres superposées. Il trouve ses racines dans les icônes de bureau des années 1980 et a culminé avec iOS 1 à 6, jusqu’à ce qu’iOS 7 le remplace en 2013.
Période : 2007–2013 · Ère : Écran tactile · Domaine : Design graphique & UI · Aussi appelé : UI skeuomorphique, style iOS 6, interface d’objet réel
Quand charger ce skill
Chargez-le lorsque l’utilisateur demande : « skeuomorphic », « skeuomorphism », « ios 6 », « textures réalistes », « texture cuir », « interface tactile », « boutons réalistes », « boutons brillants », « bois et lin », « rétro ios », « effet page », « cuir cousu ».
Bon pour : applications musicales et audio, applications de notes et de journaux, jeux de table ou de plateau, sites de nouveauté et de nostalgie, tutoriels pour débutants sur smartphone.
Ne pas l’utiliser lorsque :
- Le produit est dense en données et chaque pixel de chrome coûte de l’espace de lecture.
- La marque doit se sentir abstraite, minimaliste ou native au logiciel.
- Le design doit s’adapter à de nombreuses densités et fonctionner sur des appareils à faible consommation où 5 couches d’ombres coûtent en fréquence d’images.
Directives système
Lors de la génération d’interfaces UI ou de graphismes en Skeuomorphisme, vous DEVEZ :
- Modéliser chaque contrôle sur un objet réel ayant un usage connu, comme un interrupteur à bascule, un bloc-notes, une étagère à livres ou un cadran, et maintenir ses proportions à 10 % près de l’original.
- Éclairer chaque surface depuis le haut avec une seule source lumineuse à 90 degrés, de sorte que les reflets se trouvent sur le bord supérieur et que les ombres tombent vers le bas.
- Construire la profondeur avec 3 à 5 couches empilées : un reflet haut de 1 px clair, un corps de dégradé de 2 à 4, un bord inférieur foncé de 1 px, une ombre intérieure et une ombre portée extérieure.
- Texturer les grandes surfaces avec un bitmap répété de 128 à 256 px à 4 à 12 % d’opacité : lin, cuir, papier, grain de bois ou feutre.
- Donner à chaque bouton un dégradé de 8 à 15 % de différence de luminosité du haut vers le bas, et inverser ce dégradé lorsque le bouton est enfoncé.
- Ajouter un détail cousu, gaufré ou estampé sur chaque panneau de matériau, avec un reflet intérieur de 1 px et une ombre extérieure de 1 px.
- Refléter le monde réel dans le mouvement : les effets de page, les transitions de retournement et les interrupteurs à ressort suivent la physique de l’objet qu’ils imitent.
Garde-fous
Chaque ligne ci-dessous brise le style. Vérifiez votre sortie par rapport à la liste avant de la renvoyer.
- JAMAIS : Remplissages plats sans dégradé ni ombre sur les contrôles.
- JAMAIS : Une source lumineuse qui change de direction entre les composants.
- JAMAIS : Des textures qui se répètent avec une couture visible ou une période de répétition inférieure à 64 px.
- JAMAIS : Des métaphores de matériaux qui ne correspondent pas à la fonction, comme une calculatrice en bois.
- JAMAIS : Des icônes filaires de 1 px sans remplissage.
- JAMAIS : Des ombres avec un rayon de flou de 0 px et sans étalement.
- JAMAIS : Des fonds blancs purs sans texture de surface.
Profil vectoriel
| Axe | Score | 1 signifie | 5 signifie |
|---|---|---|---|
| Ornementation | ■■■■□ 4/5 | pure minimal | maximaliste |
| Dimensionalité | ■■■■□ 4/5 | strictement 2D | entièrement 3D / spatial |
| Rigidité de la grille | ■■■□□ 3/5 | chaotique / organique | grille mathématique stricte |
| Réalisme skeuomorphique | ■■■■■ 5/5 | numérique abstrait | matériau photoréaliste |
| Expressivité typographique | ■■■□□ 3/5 | neutre / invisible | expérimental / illustratif |
Conservez ces scores. Si une demande déplace un axe de 2 points ou plus, vous avez quitté le style : allez à « Recours de lignée ».
Logique spatiale & de grille
- Mécanismes de grille : Un canevas de 320 par 480 pt sur iPhone, plus tard 320 par 568 pt, avec une cible tactile minimale de 44 pt ; le contenu se trouve dans des lignes groupées pleine largeur ou sur des étagères avec une marge de 10 à 20 pt.
- Ratio d’espace blanc : 20–35 % de la surface reste vide car les textures et les cadres remplissent le reste ; l’échelle d’espacement est 4, 10, 20, 44 pt.
- Règles d’alignement : Les contrôles se trouvent à l’intérieur du cadre de leur métaphore d’objet, comme des rangées dans un tableau, des livres sur une étagère ou des pages dans un carnet ; le texte est centré sur les boutons et aligné à gauche dans les rangées.
- Géométrie des conteneurs : Rectangles arrondis avec un rayon de 5 à 10 px, cellules de tableau groupées avec un rayon de 10 px sur les coins extérieurs, et barres de 44 px de haut avec un biseau de 1 px.
Typographie
- Classifications : Sans serif humaniste · Slab serif · Script
- Crénage : Les tailles d’affichage sont à 0em à 0.01em ; le corps reste à 0 ; les étiquettes de boutons prennent +0.02em.
- Interlignage : Affichage 1.1 ; corps 1.3 à 1.4 ; les rangées de tableau mesurent 44 px de haut avec une seule ligne de 17 px.
- Règles de hiérarchie :
- Utiliser le gras (700) pour les étiquettes de boutons et les titres, et le normal (400) pour le texte du corps.
- Régler 17 px pour les titres et les rangées, 14 px pour les étiquettes secondaires et 12 px pour les légendes.
- Ajouter une ombre de texte de 1 px, blanche à 60 % d’opacité sous un texte sombre ou noire à 60 % d’opacité au-dessus d’un texte clair, afin que le texte semble estampé dans la surface.
- Définir le texte du titre dans une police différente sur les écrans liés à un objet, comme une slab sur une étagère à livres ou une script sur un bloc-notes.
Associations de polices
| Affichage | Corps | Note |
|---|---|---|
| Roboto Slab | Open Sans | Une slab pour les étiquettes d’objet avec une police humaniste, proche du mélange Marker Felt et Helvetica des notes iOS 6. |
| Arvo | Lato | Une slab pour les panneaux de cuir et de bois avec un sans serif arrondi pour des contrôles lisibles. |
| Caveat | Source Sans 3 | Une police manuscrite pour les métaphores de bloc-notes et de journal, avec un sans serif neutre pour le texte de l’interface. |
Couleur & éclairage
- Structure de palette : Trois à cinq couleurs de matériau avec 60 % de la surface dans le matériau dominant, plus un accent bleu brillant pour les contrôles principaux sur 10 à 15 % de la surface.
- Règles de contraste : Le texte sur les surfaces matérielles maintient au moins 4.5:1 ; le texte clair sur le cuir marron et le feutre vert atteint environ 8:1, et le texte sur le bleu brillant atteint 4.5:1.
- Traitement de surface : Textures photographiques, dégradés linéaires avec une division dure à 50 % pour le brillant, et bruit à 3 à 6 % d’opacité ; le verre utilise un reflet blanc à 30 % sur la moitié supérieure.
- Lumière et ombre : Une source lumineuse venant du haut ; les reflets sont blancs à 40 à 70 % d’opacité sur les bords supérieurs, les ombres sont noires à 25 à 50 % d’opacité pointant vers le bas avec un décalage de 1 à 3 px.
Palette
| Nom | Hex | Rôle |
|---|---|---|
| Lin | #D8D4CC | base de texture de fond |
| Cuir Marron | #6B4A2F | surface de panneau |
| Verre Bleu | #2F7BE0 | dégradé de contrôle principal |
| Chrome | #C9CDD3 | barre et biseau métalliques |
| Feutre Vert | #1E5B3A | surface de table |
| Encre de Timbre | #2B2118 | texte sur matériau clair |
Matérialité & texture
- Simulation de surface : Matériaux réels : cuir avec couture, lin, papier, bois, feutre, aluminium brossé, verre et chrome.
- Règles de bordure : Un bord extérieur foncé de 1 px à 40 à 60 % de noir, un reflet intérieur blanc de 1 px à 40 à 60 % d’opacité, et une couture pointillée de 1 px en retrait de 4 px du bord sur le cuir.
- Flou et élévation : Ombre portée avec 0 1px 2px à 40 % de noir pour les boutons et 0 4px 10px à 50 % de noir pour les panneaux ; ombres intérieures avec inset 0 1px 3px à 50 % de noir pour les puits ; l’élévation utilise 3 niveaux.
Ornementation & iconographie
- Iconographie : Icônes remplies brillantes de 57 x 57 px avec un rayon de 12 px, un reflet de brillance supérieur couvrant 50 % de la hauteur, un biseau de 1 px et une ombre réfléchie en dessous.
- Illustration : Illustrations d’objets rendues avec éclairage, telles que des étagères à livres, des microphones, des bobines de film et des platines à cassettes, dessinées en vue 3/4 du dessus.
- Éléments décoratifs : couture · effet de page · étagère en bois · bord de papier déchiré · reflet de brillance · biseau chromé · reflet sous l’icône
Mouvement & interactivité
- Né à l’écran : oui
- Physique de transition : Physique d’objet : les pages se courbent et se retournent en 400 à 600 ms, les interrupteurs glissent avec un ressort de 20 ms et les étagères défilent avec inertie et 8 px de rebond de bord.
- Easing : cubic-bezier(0.42, 0, 0.58, 1)
- Durée (ms) : 350
- Survol et actif : L’état pressé inverse le dégradé du bouton et supprime l’ombre extérieure, de sorte que le bouton semble enfoncé de 1 à 2 px dans la surface ; les appareils tactiles n’ont pas de survol.
Code & primer de jetons
Définissez data-style="skeuomorphism" sur l’élément racine et collez les jetons. Le fichier tokens.css contient les mêmes jetons et un ensemble de règles de référence.
[data-style="skeuomorphism"] {
--color-bg: #D8D4CC;
--color-surface: #6B4A2F;
--color-text: #2B2118;
--color-muted: #6E6659;
--color-primary: #2F7BE0;
--color-accent: #C9A24B;
--color-border: rgba(0, 0, 0, 0.5);
--font-sans: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-display: "Roboto Slab", Georgia, "Times New Roman", serif;
--border-radius: 8px;
--border-width: 1px;
--shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 3px rgba(0, 0, 0, 0.35);
--backdrop-filter: none;
--space-unit: 4px;
--ease: cubic-bezier(0.42, 0, 0.58, 1);
--duration: 350ms;
--gradient-control: linear-gradient(to bottom, #6FA8F5 0%, #2F7BE0 50%, #1F5FC0 50%, #2C78DC 100%);
--gradient-bar: linear-gradient(to bottom, #E2E5EA 0%, #C9CDD3 50%, #B6BBC3 100%);
--text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
--touch-target: 44px;
--color-on-bg: #2B2118;
--color-on-surface: #D8D4CC;
--color-on-primary: #000000;
--color-on-accent: #2B2118;
--color-muted-on-bg: #5F574E;
--color-muted-on-surface: #CDC6BC;
--color-link: #2B2118;
--color-link-on-surface: #D8D4CC;
--display-weight: 700;
--subhead-weight: 700;
--body-weight: 400;
--strong-weight: 700;
--label-weight: 700;
--display-tracking: 0em;
--display-leading: 1.1;
--display-case: none;
--body-leading: 1.55;
--body-size: 16px;
--icon-stroke: 2;
}
Modèles Tailwind :
| Élément | Classes |
|---|---|
| page | min-h-screen bg-[#D8D4CC] bg-[url('/textures/linen.png')] font-sans text-[#2B2118] [text-shadow:0_1px_0_rgba(255,255,255,0.6)] |
| titre | font-serif text-[17px] font-bold leading-tight [text-shadow:0_1px_0_rgba(255,255,255,0.6)] |
| panneau | rounded-lg border border-black/50 bg-[#6B4A2F] bg-[url('/textures/leather.png')] p-5 shadow-[0_4px_10px_rgba(0,0,0,0.5),inset_0_1px_0_rgba(255,255,255,0.3)] |
| bouton | h-11 rounded-lg border border-[#1B4F9E] bg-gradient-to-b from-[#6FA8F5] via-[#2F7BE0] to-[#1F5FC0] px-5 text-sm font-bold text-white shadow-[0_1px_2px_rgba(0,0,0,0.4),inset_0_1px_0_rgba(255,255,255,0.5)] active:from-[#1F5FC0] active:to-[#6FA8F5] [text-shadow:0_-1px_0_rgba(0,0,0,0.5)] |
| entrée | h-11 rounded-md border border-black/40 bg-white px-3 text-[17px] shadow-[inset_0_1px_3px_rgba(0,0,0,0.35)] |
Pack visuel
Les images et icônes de ce style sont des fichiers. Utilisez-les tels quels, ou lisez-les comme une spécification et dessinez les vôtres dans le même langage.
| Fichier | Contenu |
|---|---|
pack/hero.svg | Plaque héro, 800 par 600. Une image abstraite dans le langage visuel du style. |
pack/pattern.svg | Carreau de motif, 80 par 80. Il se répète dans les deux directions. |
pack/icons.svg | Sprite d’icônes : home, search, heart, star, bell, user, mail, calendar, image, bolt, play, check, close, sliders. |
- Icônes : plein, contour 2 sur un champ de 24 px, bouts ronds, joints ronds, conteneur : arrondi. Utilisez :
<svg class="icon"><use href="pack/icons.svg#home"/></svg>. Une icône prendcurrentColor. - Famille d’icônes : le sprite est extrait de Phosphor (Fill) par Phosphor Icons, licence MIT. Raison : Silhouettes pleines et solides d’objets réels. Le conteneur fournit le matériau et la lumière. C’est un remplacement open source pour une démo. Pour un produit, utilisez la bibliothèque d’icônes de la marque et choisissez la famille selon les règles ci-dessous.
- Type d’affichage : poids 700, crénage 0em, interlignage 1.1, casse : aucune.
- Poids : affichage 700, sous-titre 700, corps 400, gras dans le texte 700, étiquettes et boutons 700. Le style n’utilise que 2 poids (400, 700) et aucun autre. L’affichage est 300 plus lourd que le corps. L’accent est le poids : un mot plus lourd est l’accent, de sorte que les écarts entre les poids soient clairs.
- Type de corps : 16 px, interlignage 1.55.
- Page : héro divisé, aligné à gauche, densité régulière, inclinaison d’accent 0°.
- Couleur du texte :
--color-textest pour le champ de lecture principal uniquement. Sur chaque champ, utilisez son jeton :--color-on-bg,--color-on-surface,--color-on-primary,--color-on-accent.
Comment choisir un pack d’icônes
Un pack d’icônes est une police de caractères pour les images. Choisissez-le avec le même soin que la police de texte. Ces règles s’appliquent à un ensemble open source et à une bibliothèque sous licence.
- Le trait correspond à la hampe. Placez une icône à côté du texte du corps à la taille du texte. La ligne de l’icône et la hampe d’une lettre ont le même poids.
- Les terminaisons et les coins suivent le jeton de rayon. Les bouts plats et les joints d’angle vont avec un rayon de zéro. Les bouts ronds et les joints ronds vont avec un rayon doux.
- Le mode de remplissage suit la technologie de l’époque. Les ères d’impression découpent des formes solides. Les ères d’écran avec profondeur remplissent et ombragent la forme. Les interfaces de produits actuelles dessinent un contour.
- Les métaphores ne sont pas plus jeunes que le style. Chaque image est un objet que l’époque connaissait. Une icône avec une métaphore ultérieure brise la période.
- Une famille, une grille. Toutes les icônes proviennent d’une seule famille et d’une seule variante, dessinées sur un champ. Ne mélangez pas les familles sur une même surface.
- La famille couvre le produit. Listez chaque concept dont le produit a besoin avant de vous engager. Une famille qui n’a pas d’icône pour l’un d’eux est la mauvaise famille.
- La couleur est un jeton. Une icône prend currentColor. Un second ton provient d’un jeton, pas du fichier.
- La licence permet l’utilisation. Lisez la licence de l’ensemble. Créditez là où la licence le demande. Un produit avec une marque utilise sa bibliothèque sous licence et applique les mêmes règles pour choisir la famille.
Recours de lignée
Lorsque l’utilisateur demande une variation, n’improvisez pas. Mélangez vers le voisin nommé ici, et chargez son skill.
- Si l’utilisateur demande plus plat : dirigez-vous vers
flat-design(Flat Design). Supprimez tous les dégradés, textures et ombres, définissez des remplissages solides, et conservez les couleurs et les 5... (suite tronquée)