Skeuomorphismus

Was macht Skeuomorphismus?

Ein Bildschirm-Steuerelement ist leichter zu erlernen, wenn es wie ein physisches Objekt aussieht und sich so verhält, das der Benutzer bereits kennt.

Schnittstellen, die reale Objekte kopieren: Leder, Leinen, Holz, Filz, Glas und gebürstetes Metall, von oben mit Verläufen und mehrschichtigen Schatten beleuchtet. Es hat seine Wurzeln in den Desktop-Symbolen der 1980er Jahre und erreichte seinen Höhepunkt in iOS 1 bis 6, bis iOS 7 es 2013 ablöste.

Zeitraum: 2007–2013 · Epoche: Touchscreen · Bereich: Grafik- und UI-Design · Auch genannt: Skeuomorphes UI, iOS-6-Stil, Real-Object-Schnittstelle

Wann diese Fähigkeit geladen werden soll

Laden Sie sie, wenn der Benutzer nach Folgendem fragt: „skeuomorph“, „skeuomorphic“, „ios 6“, „reale Texturen“, „Lederstruktur“, „taktiles Interface“, „realistische Knöpfe“, „glänzende Knöpfe“, „Holz und Leinen“, „retro ios“, „Seitenumblättern“, „gesticktes Leder“.

Geeignet für: Musik- und Audio-Apps, Notiz- und Tagebuch-Apps, Spiele mit einem Tisch oder Brett, Neuheiten- und Nostalgieseiten, Einführung für Erstbenutzer von Smartphones.

Nicht verwenden, wenn:

• Das Produkt datendicht ist und jedes Pixel Chrom Platz für Lesbarkeit kostet.
• Die Marke abstrakt, minimalistisch oder software-nativ wirken muss.
• Das Design über viele Dichten skalieren und auf leistungsschwachen Geräten laufen muss, wo 5 Schattenebenen die Bildrate kosten.

Systemanweisungen

Beim Erstellen von UI- oder Grafiklayouts im Skeuomorphismus-Stil MÜSSEN Sie:

1. Jedes Steuerelement nach einem realen Objekt mit bekannter Verwendung modellieren, z. B. einem Kippschalter, einem Notizblock, einem Bücherregal oder einem Drehknopf, und seine Proportionen innerhalb von 10 % des Originals halten.
2. Jede Oberfläche von oben mit einer einzelnen Lichtquelle in 90 Grad beleuchten, sodass Glanzlichter oben und Schatten nach unten fallen.
3. Tiefe aus 3 bis 5 gestapelten Ebenen aufbauen: einem 1px hellen oberen Glanzlicht, einem 2 bis 4 Verlaufskörper, einer 1px dunklen Unterkante, einem inneren Schatten und einem äußeren Schlagschatten.
4. Große Flächen mit einer sich wiederholenden Bitmap von 128 bis 256px bei 4 bis 12 % Deckkraft strukturieren: Leinen, Leder, Papier, Holzmaserung oder Filz.
5. Jeden Knopf mit einem Verlauf von 8 bis 15 % Helligkeitsunterschied von oben nach unten versehen und diesen Verlauf umkehren, während der Knopf gedrückt wird.
6. Ein gesticktes, geprägtes oder vertieftes Detail auf jeder Materialplatte hinzufügen, mit einem 1px inneren Glanzlicht und einem 1px äußeren Schatten.
7. Die reale Welt in Bewegung widerspiegeln: Seitenumblättern, Flip-Übergänge und federgelagerte Schalter folgen der Physik des Objekts, das sie nachahmen.

Leitplanken

Jede der folgenden Zeilen bricht den Stil. Überprüfen Sie Ihre Ausgabe anhand der Liste, bevor Sie sie zurückgeben.

• NIEMALS: Flache Volltonfüllungen ohne Verlauf oder Schatten auf Steuerelementen.
• NIEMALS: Eine Lichtquelle, die zwischen Komponenten die Richtung ändert.
• NIEMALS: Texturen, die mit einer sichtbaren Naht oder einem Wiederholungszeitraum von weniger als 64px kacheln.
• NIEMALS: Materialmetaphern, die nicht zur Funktion passen, z. B. ein hölzerner Taschenrechner.
• NIEMALS: Haardünne 1px Umriss-Symbole ohne Füllung.
• NIEMALS: Schatten mit einem Weichzeichnungsradius von 0px und ohne Ausbreitung.
• NIEMALS: Reinweiße Hintergründe ohne Oberflächenstruktur.

Vektor-Profil

Achse	Punktzahl	1 bedeutet	5 bedeutet
Verzierung	■■■■□ 4/5	puristisch minimalistisch	maximalistisch
Dimensionalität	■■■■□ 4/5	streng 2D	voll 3D / räumlich
Rasterstarrheit	■■■□□ 3/5	chaotisch / organisch	strenges mathematisches Raster
Skeuomorpher Realismus	■■■■■ 5/5	abstrakt digital	fotorealistisches Material
Typografische Ausdruckskraft	■■■□□ 3/5	neutral / unsichtbar	experimentell / illustrativ

Halten Sie diese Punktzahlen. Wenn eine Anfrage eine Achse um 2 Punkte oder mehr verschiebt, haben Sie den Stil verlassen: Gehen Sie zu „Stammbaum-Fallbacks“.

Raum- und Rasterlogik

• Rastermechanik: Eine 320 mal 480pt Leinwand auf dem iPhone, später 320 mal 568pt, mit einem minimalen Berührungsziel von 44pt; der Inhalt sitzt in vollbreiten gruppierten Zeilen oder auf Regalen mit einem Rand von 10 bis 20pt.
• Weißraumverhältnis: 20–35 % der Oberfläche bleiben leer, weil Texturen und Rahmen den Rest füllen; der Abstandsmaßstab ist 4, 10, 20, 44pt.
• Ausrichtungsregeln: Steuerelemente sitzen innerhalb des Rahmens ihrer Objektmetapher, z. B. Zeilen in einer Tabelle, Bücher in einem Regal oder Seiten in einem Notizbuch; Text wird auf Knöpfen zentriert und in Zeilen linksbündig ausgerichtet.
• Behältergeometrie: Abgerundete Rechtecke mit einem Radius von 5 bis 10px, gruppierte Tabellenzellen mit einem Radius von 10px an den äußeren Ecken und 44px hohe Balken mit einer 1px Abschrägung.

Typografie

• Klassifikationen: humanistische Sans-Serif · Slab-Serif · Schreibschrift
• Laufweite: Anzeigegrößen liegen bei 0em bis 0.01em; Fließtext bleibt bei 0; Knopfbeschriftungen erhalten +0.02em.
• Zeilenabstand: Anzeige 1.1; Fließtext 1.3 bis 1.4; Tabellenzeilen halten eine Höhe von 44px mit einer einzelnen 17px Zeile.
• Hierarchieregeln:
  • Verwenden Sie fett (700) für Knopf- und Titelbeschriftungen und normal (400) für Fließtext.
  • Setzen Sie 17px für Titel und Zeilen, 14px für sekundäre Beschriftungen und 12px für Bildunterschriften.
  • Fügen Sie einen 1px Textschatten hinzu, weiß mit 60 % Deckkraft unter dunklem Text oder schwarz mit 60 % Deckkraft über hellem Text, damit der Text wie in die Oberfläche eingestanzt aussieht.
  • Setzen Sie den Titeltext in einer anderen Schriftart auf objektspezifischen Bildschirmen, z. B. einer Slab in einem Bücherregal oder einer Schreibschrift auf einem Notizblock.

Schriftpaarungen

Anzeige	Fließtext	Hinweis
Roboto Slab	Open Sans	Eine Slab für Objektbeschriftungen mit einer humanistischen Textschrift, ähnlich der Mischung aus Marker Felt und Helvetica in iOS 6 Notizen.
Arvo	Lato	Eine Slab für Leder- und Holzplatten mit einer abgerundeten Sans für lesbare Steuerelemente.
Caveat	Source Sans 3	Eine Handschrift für Notizblock- und Tagebuch-Metaphern mit einer neutralen Sans für UI-Text.

Farbe und Beleuchtung

• Palettenstruktur: Drei bis fünf Materialfarben mit 60 % der Oberfläche im dominanten Material, plus ein glänzendes Blau als Akzent für primäre Steuerelemente auf 10 bis 15 % der Oberfläche.
• Kontrastregeln: Text auf Materialoberflächen hält mindestens 4.5:1; heller Text auf Lederbraun und Filzgrün erreicht etwa 8:1, und Text auf glänzendem Blau erreicht 4.5:1.
• Oberflächenbehandlung: Fotografische Texturen, lineare Verläufe mit einer 50 % harten Teilung für Glanz und Rauschen bei 3 bis 6 % Deckkraft; Glas verwendet einen weißen 30 % Glanzlicht über der oberen Hälfte.
• Licht und Schatten: Eine Lichtquelle von oben; Glanzlichter sind weiß mit 40 bis 70 % Deckkraft an den Oberkanten, Schatten sind schwarz mit 25 bis 50 % Deckkraft, zeigen nach unten und haben einen Versatz von 1 bis 3px.

Palette

Name	Hex	Rolle
Leinen	#D8D4CC	Hintergrundtexturgrundierung
Lederbraun	#6B4A2F	Plattenoberfläche
Glasblau	#2F7BE0	Primärer Steuerelementverlauf
Chrom	#C9CDD3	Metallbalken und -einfassung
Filzgrün	#1E5B3A	Tischoberfläche
Stempeltinte	#2B2118	Text auf hellem Material

Materialität und Textur

• Oberflächennachbildung: Reale Materialien: Leder mit Naht, Leinen, Papier, Holz, Filz, gebürstetes Aluminium, Glas und Chrom.
• Randregeln: Ein 1px dunkler Außenrand bei 40 bis 60 % Schwarz, ein 1px weißer innerer Glanzlicht bei 40 bis 60 % Deckkraft und eine gestrichelte 1px Naht 4px vom Rand entfernt auf Leder.
• Weichzeichnung und Höhe: Schlagschatten mit 0 1px 2px bei 40 % Schwarz für Knöpfe und 0 4px 10px bei 50 % Schwarz für Platten; innere Schatten von inset 0 1px 3px bei 50 % Schwarz für Vertiefungen; die Höhe verwendet 3 Ebenen.

Verzierung und Symbolografie

• Symbolografie: Glänzende gefüllte Symbole von 57 mal 57px mit einem Radius von 12px, einem oberen Glanzlicht über 50 % der Höhe, einer 1px Abschrägung und einem reflektierten Schatten darunter.
• Illustration: Gerenderte Objektillustrationen mit Beleuchtung, z. B. Bücherregale, Mikrofone, Filmrollen und Tonbandgeräte, aus einer 3/4 Draufsicht gezeichnet.
• Dekorative Elemente: Naht · Seitenumblättern · Holzregal · eingerissener Papierrand · Glanzlicht · Chromfassung · Reflexion unter Symbolen

Bewegung und Interaktivität

• Auf dem Bildschirm geboren: ja
• Übergangsphysik: Objektphysik: Seiten blättern und drehen sich über 400 bis 600ms, Schalter gleiten mit einem 20ms Feder-Ausgleich und Regale scrollen mit Trägheit und 8px Randrückprall.
• Easing: cubic-bezier(0.42, 0, 0.58, 1)
• Dauer (ms): 350
• Hover und aktiv: Der gedrückte Zustand invertiert den Knopfverlauf und entfernt den äußeren Schatten, sodass der Knopf wie 1 bis 2px in die Oberfläche gedrückt aussieht; Touch-Geräte haben keinen Hover.

Code und Token-Vorbereitung

Setzen Sie data-style="skeuomorphism" auf das Wurzelelement und fügen Sie die Tokens ein. Die Datei tokens.css enthält dieselben Tokens und eine Reihe von Referenzregeln.

[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;
}

Tailwind-Muster:

Element	Klassen
Seite	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)]
Überschrift	font-serif text-[17px] font-bold leading-tight [text-shadow:0_1px_0_rgba(255,255,255,0.6)]
Platte	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)]
Knopf	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)]
Eingabe	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)]

Visuelles Paket

Die Bilder und Symbole dieses Stils sind Dateien. Verwenden Sie sie so, wie sie sind, oder lesen Sie sie als Spezifikation und zeichnen Sie Ihre eigenen in derselben Sprache.

Datei	Inhalt
pack/hero.svg	Heldenplatte, 800 mal 600. Ein abstraktes Bild in der visuellen Sprache des Stils.
pack/pattern.svg	Musterkachel, 80 mal 80. Sie wiederholt sich in beide Richtungen.
pack/icons.svg	Symbol-Sprite: Startseite, Suche, Herz, Stern, Glocke, Benutzer, E-Mail, Kalender, Bild, Blitz, Abspielen, Häkchen, Schließen, Schieberegler.

• Symbole: gefüllt, Strichstärke 2 auf einem 24px Feld, runde Enden, runde Verbindungen, Behälter: abgerundet. Verwenden Sie: <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Ein Symbol verwendet currentColor.
• Symbolfamilie: Das Sprite stammt von Phosphor (Gefüllt) von Phosphor Icons, Lizenz MIT. Grund: Vollständige gefüllte Silhouetten realer Objekte. Der Behälter liefert das Material und das Licht. Es ist ein Open-Source-Stellvertreter für eine Demo. Für ein Produkt verwenden Sie die Symbolbibliothek der Marke und wählen Sie die Familie nach den folgenden Regeln.
• Anzeigetyp: Gewicht 700, Laufweite 0em, Zeilenabstand 1.1, Groß-/Kleinschreibung: keine.
• Gewichte: Anzeige 700, Unterüberschrift 700, Fließtext 400, fett im Text 700, Beschriftungen und Knöpfe 700. Der Stil verwendet 2 Gewichte (400, 700) und keine anderen. Die Anzeige ist 300 schwerer als der Fließtext. Der Akzent ist das Gewicht: Ein schwereres Wort ist der Akzent, daher sind die Schritte zwischen den Gewichten klar.
• Fließtexttyp: 16px, Zeilenabstand 1.55.
• Seite: Held geteilt, linksbündig, normale Dichte, Akzentdrehung 0°.
• Textfarbe: --color-text ist nur für das Hauptlesefeld. Verwenden Sie auf jedem Feld dessen Token: --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

So wählen Sie ein Symbolpaket

Ein Symbolpaket ist eine Schriftart für Bilder. Wählen Sie es mit derselben Sorgfalt wie die Textschriftart. Diese Regeln gelten sowohl für einen Open-Source-Satz als auch für eine lizenzierte Bibliothek.

1. Der Strich stimmt mit dem Schaft überein. Setzen Sie ein Symbol neben den Fließtext in Textgröße. Die Linie des Symbols und der Schaft eines Buchstabens haben dasselbe Gewicht.
2. Enden und Ecken folgen dem Radius-Token. Stumpfe Enden und Gehrungsverbindungen entsprechen einem Radius von null. Runde Enden und runde Verbindungen entsprechen einem weichen Radius.
3. Der Füllmodus folgt der Technologie der Epoche. Druckepochen schneiden Vollformen aus. Bildschirmepochen mit Tiefe füllen und schattieren die Form. Aktuelle Produktschnittstellen zeichnen einen Umriss.
4. Die Metaphern sind nicht jünger als der Stil. Jedes Bild ist ein Objekt, das die Epoche kannte. Ein Symbol mit einer späteren Metapher bricht mit der Periode.
5. Eine Familie, ein Raster. Alle Symbole stammen aus einer Familie und einer Variante, gezeichnet auf einem Feld. Mischen Sie keine Familien auf einer Oberfläche.
6. Die Familie deckt das Produkt ab. Listen Sie jedes Konzept auf, das das Produkt benötigt, bevor Sie sich festlegen. Eine Familie, die kein Symbol für eines davon hat, ist die falsche Familie.
7. Die Farbe ist ein Token. Ein Symbol verwendet currentColor. Ein zweiter Ton stammt von einem Token, nicht von der Datei.
8. Die Lizenz erlaubt die Nutzung. Lesen Sie die Lizenz des Satzes. Geben Sie die Quelle an, wo die Lizenz dies verlangt. Ein Produkt mit einer Marke verwendet seine lizenzierte Bibliothek und wendet dieselben Regeln zur Auswahl der Familie an.

Stammbaum-Fallbacks

Wenn der Benutzer nach einer Variation fragt, improvisieren Sie nicht. Mischen Sie sich in Richtung des hier genannten Nachbarn und laden Sie dessen Fähigkeit.

• Wenn der Benutzer nach flacher fragt: bewegen Sie sich in Richtung flat-design (Flaches Design). Entfernen Sie alle Verläufe, Texturen und Schatten, setzen Sie Volltonfüllungen und behalten Sie die Farben und 5 …