UI-Designstile und Fachbegriffe: Ein umfassender enzyklopädischer Leitfaden

## I. Allgemeine visuelle Stilrichtungen und Ästhetik (Visual Style Movements)

*Entscheidet über die künstlerische Atmosphäre, den ersten visuellen Eindruck und die thematische Ausrichtung des gesamten Produkts/der Website.*

### 1. Pixel-Stil (Pixel Art / 8-Bit / 16-Bit)

- **Kernmerkmale**: Verwendet gezackte quadratische Pixel als grundlegende Zeicheneinheit, verzichtet bewusst auf hohe Auflösung und glatte Kurven, um die Optik früher 80er- und 90er-Jahre-Konsolen-/Handheld-Spiele nachzubilden.
- **Anwendungsszenarien**: Retro-Spiele (wie `Stardew Valley`, `Factorio`), Web3-/NFT-Plattformen, offizielle Websites von Geek- und Indie-Entwickler-Marken.

### 2. Cartoon- / Vektorillustrations-Stil (Cartoon / Vector Illustration)

- **Kernmerkmale**: Verwendet glatte Vektorlinien, helle und lebendige Farben, kombiniert mit übertriebenen, humorvollen Charakter- oder Maskottchenillustrationen, die dem Produkt eine starke Anziehungskraft und Verspieltheit verleihen.
- **Unterkategorien**: **Notion / Corporate Memphis Illustrationsstil** (flache, langgliedrige Figuren), **Duolingo-Modus** (Marken-IP stark in die UI integriert).
- **Anwendungsszenarien**: SaaS-Website-Landingpages, Kinder-/Sprachlern-Apps, Pop-ups für Markenaktivitäten.

### 3. Cyberpunk-Stil (Cyberpunk / High-Tech Low-Life)

- **Kernmerkmale**: Rein schwarzer oder dunkelblauer Hintergrund, kombiniert mit extrem schillernden Neonfarben (leuchtendes Magenta, elektrisches Blau, giftiges Grün), integriert Glitch Art, Datenraster, mechanische Linien und Sci-Fi-UI-Elemente.
- **Anwendungsszenarien**: E-Sport-Hardware-Konsolen, Kryptowährungs-/Blockchain-Plattformen, Hardcore-Sci-Fi-Spiele-/Software-Interfaces.

### 4. Synthwave / Retrowave / Vaporwave

- **Kernmerkmale**: Eine Hommage an die Popkultur der 1980er Jahre. Voller Rasterhorizonte in Lila-/Pink-/Orange-Verläufen, Sonnenuntergangsglühen, Palmen-Silhouetten, dreidimensionalen Gipsstatuen und dem körnigen Schneerauschen alter VHS-Kassetten.
- **Anwendungsszenarien**: Musik-Player, offizielle Websites von Retro-Streetwear-Marken, personalisierte Homepages und audiovisuelle UI für Kunstausstellungen.

### 5. Y2K / Acid Graphics (Y2K Aesthetic / Acid Graphics)

- **Kernmerkmale**: Bildet die Vorstellung von zukünftiger Technologie um die Jahrtausendwende (um 2000) nach. Intensive Verwendung von **Metall-Chrom-Optik (Chrome)**, 3D-verzerrten flüssigen Schriftarten, Laser-Regenbogenfarben, hell leuchtenden Sternen und unkonventionellem, freiem, asymmetrischem Layout.
- **Anwendungsszenarien**: Trend-E-Commerce, Mode-Marken-Apps, Musik- und Social-Media-Produkte für junge Leute.

### 6. Claymorphism (Knetgummi-Stil)

- **Kernmerkmale**: UI-Elemente haben eine 3D-aufgeblähte Textur, die an Knetgummi/farbigen Ton erinnert. Sie zeichnen sich durch extrem abgerundete Ecken, weiche innere und äußere Schatten aus und wirken visuell warm, niedlich und voller dreidimensionaler Elastizität.
- **Anwendungsszenarien**: Kinderbildungs-Apps, Casual-Game-UIs, Metaverse-/Avatar-Generatoren.

### 7. Neo-Brutalismus (Neo-Brutalism)

- **Kernmerkmale**: Bricht bewusst mit der "eleganten Raffinesse" traditioneller UIs. Verwendet hochgesättigte Kontrastfarben, 100% rein schwarze dicke Ränder (2~4px), harte Schatten ohne Unschärfe (Offset Hard Shadow) und ein stark asymmetrisches Layout.
- **Anwendungsszenarien**: Figma-Marketing-Seiten, Gumroad-Creator-Plattform, Portfolios von Indie-Entwicklern.

### 8. Skeuomorphismus (Skeuomorphism)

- **Kernmerkmale**: Extrem realistische Nachbildung von Materialien der realen Welt (wie Ledernähte, gebürstetes Metall, Glasbrechung, realistische Holzmaserung, erhabene/vertiefte physische Tasten).
- **Anwendungsszenarien**: iOS 6 und frühere Systeme, professionelle Audio-DSP-Plugins (simulierte Hardware-Regler), intelligente Fahrzeugsteuerungsbildschirme.

### 9. Flat Design (Flaches Design)

- **Kernmerkmale**: Vollständiges Entfernen von Licht und Schatten, Verläufen und Texturen; die Benutzeroberfläche wird ausschließlich durch reine Farbblöcke, einfache geometrische Formen und klare Schriftgrößen-Layouts aufgebaut, was die Effizienz der Informationsübertragung und die Anpassungsfähigkeit an mehrere Geräte erheblich verbessert.
- **Anwendungsszenarien**: Windows Metro UI, iOS 7+ moderne mobile Benutzeroberflächen.

### 10. Material Design (Material Design - M2/M3)

- **Kernmerkmale**: Eine von Google entwickelte systematisierte Designsprache. UI-Elemente werden als "intelligentes Papier" mit realen physikalischen Eigenschaften betrachtet, wobei Höhen (Elevation) und reale physikalische Schatten verwendet werden, um die hierarchische Beziehung von Karten darzustellen.
- **Anwendungsszenarien**: Natives Android-System, Google Workspace-Tools, Material-UI (MUI).

### 11. Neumorphismus / Soft UI (Neumorphism / Soft UI)

- **Kernmerkmale**: Hintergrund und Komponenten verwenden die gleiche Grundfarbe. Durch die feine Abstimmung von "weißem Glanz oben links" und "dunklem Schatten unten rechts" wirken die Komponenten wie aus dem Hintergrundmaterial "herausgedrückt" oder "hineingedrückt" mit einer Silikontextur.
- **Anwendungsszenarien**: Smart-Home-Bedienfelder, Konzept-Dashboards, Smartwatch-UIs.

### 12. Glassmorphismus / Milchglas (Glassmorphism)

- **Kernmerkmale**: Halbtransparenter Hintergrund + Gaußsche Unschärfe (Backdrop Blur), weiche, mehrfarbige Verlaufsunterlage und ein extrem dünner, halbtransparenter weißer Glanzrahmen, der ein transparentes, schwebendes, modernes und edles Technologiegefühl vermittelt.
- **Anwendungsszenarien**: macOS Big Sur/Sonoma, Windows 11 Fluent Design, iOS Live-Aktivitätsbenachrichtigungskarten.

### 13. Memphis-Stil (Memphis Style)

- **Kernmerkmale**: Entstammt der rebellischen Pop-Art der 80er Jahre. Voller zufällig verstreuter Wellenlinien, Punktmuster, Dreiecke, Kreise und anderer grundlegender geometrischer Muster, mit fröhlichen, hochgesättigten und regellosen Farbschemata.
- **Anwendungsszenarien**: Banner für Marketingkampagnen, UI für Kinderprodukte, Websites von Kreativagenturen.

### 14. Schweizer Grafikdesign-Stil / Internationaler Stil (Swiss Style)

- **Kernmerkmale**: Betont ein strenges mathematisches Rastersystem (Grid System), serifenlose Schriftarten (wie Helvetica), asymmetrisches Layout und eine starke visuelle Hierarchie, zurückhaltend, rational und feierlich.
- **Anwendungsszenarien**: Nachrichten-Apps (wie Bloomberg), Websites von Luxusmarken, textintensive Layouts.

### 15. Handgezeichneter Stil / Doodle (Hand-Drawn / Doodle)

- **Kernmerkmale**: Verwendet handgezeichnete Linien mit unregelmäßiger Zitteroptik, Buntstift-/Aquarell-Füllungen und handschriftliche Schriftarten, um die industrielle Kälte der Software zu beseitigen und ein sehr menschliches und warmes Gefühl zu vermitteln.
- **Anwendungsszenarien**: Notizbuch-Apps, Notizwerkzeuge (wie GoodNotes-Vorlagen), Story-Seiten für kreative Produkte.

### 16. 2.5D / Isometrische Perspektive (Isometric Style)

- **Kernmerkmale**: Dreidimensionale Szenen werden durch eine 30°-isometrische Projektion gezeichnet, die sowohl eine reichhaltige räumliche Struktur und architektonische Details zeigt, als auch keine perspektivische Verzerrung von nah und fern aufweist.
- **Anwendungsszenarien**: Geschäftsprozessdiagramme, große Datenvisualisierungsbildschirme, UI für Simulationsspiele.

### 17. Low Poly

- **Kernmerkmale**: Dreidimensionale Objekte werden aus einer relativ geringen Anzahl flacher Polygonnetze (oft Dreiecke) zusammengesetzt, kombiniert mit einfacher Beleuchtung, was eine geometrisch-harte Textur wie Kristallbrechung oder Origami erzeugt.
- **Anwendungsszenarien**: Indie-Spiele, Vektorgrafiken für Technologieprodukte, UI für Kunstausstellungswerbung.

### 18. Minimalismus / Weißraum-Stil (Minimalism)

- **Kernmerkmale**: "Weniger ist mehr". Entfernt alle überflüssigen dekorativen Linien und Farben, verwendet große Flächen Weißraum (White Space), extrem minimalistische monochrome Farbtöne und ein hochpräzises Textlayout.
- **Anwendungsszenarien**: Apple-Website, Luxus-E-Commerce, Lese-Apps (wie WeChat Reading, Medium).

### 19. Dark Mode / Reiner OLED-Schwarz-Stil (Dark Mode / Pitch Black)

- **Kernmerkmale**: Verwendet reines Schwarz (`#000000`) oder sehr dunkles Grau (`#121212`) als Hintergrundfarbe, kombiniert mit kontrastreichen Texten und Neon-Akzentfarben, was augenschonend und energiesparend ist und ein immersives Gefühl vermittelt.
- **Anwendungsszenarien**: Entwickler-IDEs (VS Code), Börsen-/Aktienhandelsterminals, Nachtlesemodus.

### 20. Line Art / Monoline-Stil (Line Art / Monoline)

- **Kernmerkmale**: Die gesamte Benutzeroberfläche wird ausschließlich durch minimalistische Linien (Outlines) gleicher Stärke für Icons und Kartenkonturen gezeichnet, fast ohne Flächenfüllung, was eine saubere, leichte geometrische Ästhetik erzeugt.
- **Anwendungsszenarien**: Websites von minimalistischen Architektur-/Designbüros, Vektor-Icon-Bibliotheken (wie Heroicons, Lucide).

## II. Spezifische UI-Komponenten und Raumsteuerung-Fachbegriffe (Component Vocabulary)

*Beschreibt UI-Raumkomponenten mit spezifischen Strukturformen, visuellen Hierarchien oder Interaktionseigenschaften.*

| **Komponenten-Jargon (Chin./Engl.)** | **Visuelle Merkmale und funktionale Form** | **Typische Anwendungsbeispiele** |
| :----------------------------------- | :----------------------------------------- | :------------------------------- |
| **Ghost Button (Geister-Button)** | Ein Button ohne Hintergrundfüllung, nur mit einem dünnen Rahmen und Text, der beim Hovern aufleuchtet. Wird verwendet, um die visuelle Priorität von sekundären Aktionen zu reduzieren. | Sekundäre Buttons wie „Abbrechen“, „Details anzeigen“ |
| **Skeleton Screen (Skelett-Bildschirm)** | Graue, weiß-verlaufende Inhaltskonturen, die beim Laden von Daten angezeigt werden, ersetzen das traditionelle Lade-Kreissymbol und reduzieren die Warteangst des Benutzers. | Platzhalter-Skelett, wenn die Daten des ersten Bildschirms noch nicht geladen sind |
| **Floating Action Button (FAB)** | Ein schwebender, runder/kapselartiger Hauptaktionsbutton, der sich unten rechts auf dem Bildschirm befindet und beim Scrollen der Seite fixiert bleibt. | „Neu erstellen“ in der E-Mail-App, „Beitrag verfassen“ in der Community |
| **Bento Grid (Bento-Raster)** | Inspiriert von den Fächern einer japanischen Bento-Box, werden Informationen in modulare, abgerundete Rechteckkarten unterschiedlicher Größe und Höhe aufgeteilt. | Apple-Keynote-Spezifikationsgrafiken, iOS-Desktop-Widgets |
| **Segmented Control (Segmentierte Steuerung)** | Ein Einzelauswahl-Umschalter, der 2~5 sich gegenseitig ausschließende Optionen in einem abgerundeten Rahmen zusammenfasst, wobei die ausgewählte Option von einem leuchtenden Schieberegler überdeckt wird. | Einzelauswahl-Umschalter in iOS-Einstellungen, Umschalten der Ansicht nach „Tag/Woche/Monat“ |
| **Accordion (Akkordeon)** | Eine vertikal gestapelte Liste von Titeln, die beim Klicken den darunter liegenden Inhaltsbereich ein- oder ausklappen kann, wobei normalerweise nur ein Element gleichzeitig geöffnet ist. | Häufig gestellte Fragen (FAQ), mehrstufige Einstellungsmenüs |
| **Breadcrumbs (Brotkrümel-Navigation)** | Eine winzige Linkkette oben mit dem Pfad `Startseite > Abteilung > Mitarbeiter`, die dem Benutzer hilft, die aktuelle Seitenhierarchie zu verstehen und jederzeit zurückzukehren. | E-Commerce-Kategorieseiten, große Dokumentationssysteme (wie GitBook) |
| **Bottom Sheet (Unterer Auszug)** | Ein halb- oder ganzseitiges Bedienfeld, das vom unteren Bildschirmrand nach oben gleitet und sich hervorragend für die Einhandbedienung von Smartphones im Großbildzeitalter eignet. | WeChat-Share-Pop-up, Zahlungsbestätigungsfeld |
| **Drawer (Schubladen-Seitenleiste)** | Eine am Bildschirmrand versteckte Navigationsleiste, die nach dem Klicken auf das Hamburger-Menü von links oder rechts herausgleitet. | Mobile Website-Navigation, Admin-Backend-Seitenleiste |
| **Carousel (Karussell / Slider)** | Eine Komponente, die es Benutzern ermöglicht, durch Wischen nach links oder rechts mehrere Bilder/Kartenfelder zu durchsuchen, begleitet von kleinen Punktindikatoren (Dots). | E-Commerce-Startseiten-Banner, empfohlene Kartengruppen |
| **Stepper / Wizard (Schrittanzeige / Assistent)** | Ein Prozessindikator, der mit nummerierten Kreisen und horizontalen Linien verbunden ist und den Benutzer schrittweise durch komplexe Aufgaben führt. | Warenkorb-Checkout, Konto-Registrierungsprozess |
| **Pill Tag / Chip (Pillen-Tag / Chip)** | Ein kleines Tag oder ein klickbarer Filterblock mit vollständig abgerundeten Kanten (wie eine Kapsel). | Artikel-Tags, Produktauswahl (z.B. „Rot/Größe L“) |
| **Sticky Header/Footer (Kopf-/Fußzeile)** | Eine Navigations- oder Aktionsleiste, die beim vertikalen Scrollen der Seite am oberen oder unteren Rand des Viewports fixiert bleibt. | „Jetzt kaufen“-Leiste am unteren Rand von mobilen E-Commerce-Seiten |

## III. Texturen, Licht und Schatten sowie visuelle Details (Textures, Optics & Visual Effects)

*Spezifische Begriffe, die visuelle Feinheiten, Rendering-Details und optische Texturen beschreiben.*

1.  **Squircle / Kontinuierliche Krümmung (Squircle / Continuous Curvature)**:
    - *Erklärung*: Verzichtet auf normale abgerundete Rechtecke (rechte Winkel + tangentiale Kreisbögen) und verwendet höherstufige mathematische Kurven, um einen extrem glatten Übergang von Geraden zu Kreisbögen ohne plötzliche Tangentenpunkte zu erreichen. Dies ist das Kerngeheimnis der hochwertigen Optik von Apples gesamter Hardware und iOS-Icons.
2.  **Mesh-Gradient / Diffuser Gradient (Mesh Gradient / Diffused Gradient)**:
    - *Erklärung*: Bricht mit traditionellen linearen Verläufen. Mehrere Farbpunkte durchdringen sich wie Wolken in einer zweidimensionalen Ebene und erzeugen ein traumhaftes Gefühl.
3.  **Rauschen / Körnigkeit (Noise Texture / Film Grain)**:
    - *Erklärung*: Überlagert einen feinen, einfarbigen/farbigen Rauschpartikel auf glatte Verläufe oder einfarbige Hintergründe, wodurch die digitale Kälte beseitigt und ein papierartiges oder filmisches Gefühl hinzugefügt wird.
4.  **Harter Schatten / Versetzter Schatten (Offset Hard Shadow)**:
    - *Erklärung*: Verwendet überhaupt keine Gaußsche Unschärfe (Blur = 0), sondern verschiebt lediglich einen rein schwarzen oder dunklen Farbblock um 2~6px nach rechts unten als Schatten. Das Kernmerkmal des Neo-Brutalismus (Neo-Brutalism).
5.  **Umgebungsschatten vs. Schlagschatten (Ambient Shadow vs Drop Shadow)**:
    - *Erklärung*: **Drop Shadow** ist ein Schatten, der durch direktes Licht mit einer klaren Richtung erzeugt wird; **Ambient Shadow** ist ein diffuser Schatten, der durch die diffuse Reflexion von Umgebungslicht entsteht, richtungslos, großflächig und extrem weich, um ein Gefühl von Schwebung der Komponente in der Luft zu erzeugen.
6.  **Duotone (Zweifarbig)**:
    - *Erklärung*: Eine Bildstilistik, bei der alle Farben eines Bildes auf nur zwei kontrastreiche Farben (z.B. Dunkelblau + leuchtendes Orange) abgebildet werden, häufig verwendet für Spotify-Musikcover.

## IV. Seitenlayout, Blickführung und Mikrointeraktionen (Layout, Visual Flow & Motion)

1.  **Above the Fold / Erster Bildschirmbereich (Above the Fold)**:
    - *Erklärung*: Der vollständige erste Bildschirmbereich, den der Benutzer auf dem Bildschirm sieht, ohne nach unten scrollen zu müssen. Hier befinden sich die wichtigsten Werte des Produkts und der **CTA (Call to Action)**.
2.  **Hero Section (Erster Bildschirmbereich)**:
    - *Erklärung*: Der auffälligste große Bild-/Videohintergrundbereich auf der Startseite einer Website, normalerweise kombiniert mit einem aussagekräftigen Titeltext und dem Hauptkonversionsbutton.
3.  **F-Muster und Z-Muster der Blickführung (F-Pattern & Z-Pattern)**:
    - *Erklärung*: Das **F-Muster** eignet sich für textintensive Seiten (wie Blogs, Nachrichten), wobei der Benutzer den Blick von links nach rechts, Zeile für Zeile nach unten scannt; das **Z-Muster** eignet sich für Landingpages mit weniger Informationen und visuellen Elementen im Vordergrund (Hero -> Navigation oben rechts -> Illustration unten links -> CTA unten rechts).
4.  **Weißraum / Negativraum (Negative Space / White Space)**:
    - *Erklärung*: Der leere Bereich zwischen Elementen. Weißraum ist keine Platzverschwendung, sondern verleiht der Optik „Atemraum“ und hebt den Kerninhalt hervor.
5.  **Kubische Bézierkurve / Easing (Cubic-Bezier / Easing)**:
    - *Erklärung*: Ein Begriff zur Optimierung von Animationen. Verzichtet auf mechanische, gleichmäßige Bewegung (Linear) und verwendet physikalische Kurven wie „schnell rein, langsam raus“ (Ease-Out) oder „mit einem kleinen Sprung“ (Bounce/Spring), um Interaktionsanimationen extrem natürlich und flüssig erscheinen zu lassen.
6.  **Parallax Scrolling (Parallax-Scrolling)**:
    - *Erklärung*: Beim Scrollen der Seite bewegen sich die Hintergrundebene und die Vordergrundkarten mit unterschiedlichen Geschwindigkeiten, wodurch ein starkes Gefühl von Tiefe und dreidimensionalem Raum entsteht.
7.  **Shimmer-Effekt (Shimmer Effect)**:
    - *Erklärung*: Auf dem Skelett-Bildschirm gleitet ein Glanzlicht diagonal von links nach rechts (wie ein Lichtstrahl), was dem Benutzer visuell mitteilt, dass „im Hintergrund fleißig geladen wird“.

## V. Schnelles Nachschlagewerk für die abteilungsübergreifende Kommunikation (Everyday Talk vs Pro Terms)

Wenn Sie mit Designern oder Frontend-Entwicklern kommunizieren, können Sie die folgende Tabelle verwenden, um "Umgangssprache" schnell den entsprechenden Fachbegriffen und technischen Implementierungsmethoden zuzuordnen:

| **Was Sie umgangssprachlich meinen** | **Fachbegriff des Designers** | **Frontend-/CSS-Code-Schlüsselwort** | **Empfohlenes Kommunikationsbeispiel für Designer** |
| :----------------------------------- | :---------------------------- | :----------------------------------- | :--------------------------------------------------- |
| „Mach es wie ein Mosaik/NES-Spiel.“ | **Pixel-Stil (Pixel Art)** | `image-rendering: pixelated;` | „Diese Marketing-Seite soll im Pixel-Stil sein, mit einem Retro-Game-Feeling.“ |
| „Wie ein 3D-Effekt, der aus Knetgummi/weichem Silikon geformt wurde.“ | **Claymorphism (Knetgummi-Stil)** | `border-radius` + `inset shadow` | „Diese Kernfunktions-Icons sollen im Claymorphism-Stil sein, damit sie freundlicher wirken.“ |
| „Der Rahmen soll dick sein, und der Schatten ein schwarzer, undurchsichtiger, harter Block.“ | **Neo-Brutalismus (Neo-Brutalism)** | `border: 3px solid #000; box-shadow: 4px 4px #000;` | „Die Karten auf der Startseite sollen im Neo-Brutalismus-Stil sein, mit starken schwarzen Rahmen und hohem Kontrast.“ |
| „Ein edles, halbtransparentes Milchglasgefühl.“ | **Glassmorphismus / Milchglas (Glassmorphism)** | `backdrop-filter: blur(20px);` | „Die obere Navigationsleiste soll einen Milchglas-Schwebeeffekt haben, der beim Scrollen den Hintergrund unscharf macht.“ |
| „Ein traumhafter Hintergrund, bei dem die Farben wie Nebel verlaufen.“ | **Mesh-Gradient + Rauschen (Mesh Gradient + Noise)** | `radial-gradient` / Canvas | „Der Hintergrund im Hero-Bereich soll ein Mesh-Gradient sein, mit etwas feinem Noise.“ |
| „Bevor der Inhalt erscheint, zeige ein paar graue Platzhalterfelder.“ | **Skeleton Screen + Shimmer (Skeleton with Shimmer)** | CSS Animation Gradient Offset | „Beim Laden der Liste einen Skeleton Screen verwenden, mit dem Shimmer-Animationseffekt.“ |
| „Wie die Karten bei der Apple-Keynote, in einzelnen Fächern.“ | **Bento Grid (Bento-Raster)** | `display: grid;` | „Der Bereich zur Produktpräsentation soll ein Bento Grid Layout verwenden, mit unterschiedlich großen, abgerundeten Karten.“ |
| „Die Ecken sollen so besonders glatt sein wie bei iPhone-Icons.“ | **Squircle / Kontinuierliche Krümmung (Squircle)** | iOS 规范 / Figma Corner Smoothing | „Alle großen Karten sollen 100% Corner Smoothing (Squircle-Glättung) aktiviert haben.“ |