Elevation and Depth System (DE)

Höhen- und Tiefensystem

Zweck

Das Höhen- und Tiefensystem bietet eine Methodik zur Verwaltung der vertikalen Dimension (Z-Achse) einer Web-Oberfläche. Es nutzt visuelle Hinweise wie Schatten, Oberflächenbehandlungen und Stacking-Reihenfolgen, um eine klare Hierarchie von Ebenen zu etablieren. Dieses System stellt sicher, dass Benutzer die Beziehung zwischen überlappenden Elementen verstehen, interaktive Oberflächen identifizieren und eine vorhersehbare, taktile Umgebung erleben, die die reale Tiefe nachahmt.

Anwendungsfälle

• Definieren einer konsistenten Schattenskala für ein Design-System.
• Entwerfen komplexer, mehrschichtiger Oberflächen wie Dashboards oder IDEs.
• Festlegen von Stacking-Reihenfolgenstandards (Z-Index), um UI-„Kollisionen“ zu verhindern.
• Bereitstellen taktiler Rückmeldungen für interaktive Zustände (z. B. ein Button, der beim Hover anhebt).
• Unterscheiden zwischen persistentem Seiteninhalt und temporären Overlays.

Wann NICHT verwenden

• Flache/Brutalistische Designs: Wenn die beabsichtigte Ästhetik 2D ist und keine wahrgenommene Tiefe oder Schatten aufweist.
• Rein textbasierte Inhalte: Einfache Artikel oder Dokumente ohne überlappende Ebenen oder interaktive Oberflächen.
• Leistungskritische Geräte mit niedriger Leistung: Wenn die intensive Verwendung von CSS-Filtern oder komplexen Box-Shadows zu erheblichen Rendering-Verzögerungen führen könnte.

Eingaben

1. Markenästhetik: Ist die Tiefe „Physisch/Material“ (realistische Schatten) oder „Grafisch“ (feste Versätze)?
2. Komponenteninventar: Eine Liste aller UI-Elemente, die eine Höhe benötigen (Karten, Navigationsleisten, Modals, Buttons).
3. Primäre Lichtquelle: Wird normalerweise von oben oder oben-Mitte angenommen.
4. Abstandssystem: Das fluid-spacing-system, um Schattenausdehnungen an Layout-Abständen auszurichten.

Ausgaben

1. Höhenskala (Schatten): Ein Satz von 5-6 standardisierten Box-Shadow-Token (z. B. elevation-sm bis elevation-xl).
2. Stacking-Kontextkarte (Z-Index): Eine definierte Skala von Z-Index-Werten, kategorisiert nach Ebenenfunktion.
3. Oberflächenpalette: Definitionen für Hintergrundfarben, die sich basierend auf der Höhe verschieben (z. B. dunklere Oberflächen „sinken“, hellere Oberflächen „steigen“).
4. Interaktionsspezifikation: Regeln, wie sich die Höhe während Hover-, Active- und Focus-Zuständen ändert.

Arbeitsablauf

1. Stacking-Ebenen festlegen

Unterteilen Sie die Oberfläche von unten nach oben in funktionale Ebenen:

• Ebene 0 (Basis): Hintergrund/Leinwand der Seite.
• Ebene 1 (Flach): Inhalt, der auf der Basis liegt (z. B. flache Karten, Trennlinien).
• Ebene 2 (Angehoben): Interaktive Elemente oder primäre Karten, die dezent „schweben“.
• Ebene 3 (Sticky/Schwebend): Globale Kopfzeilen, FABs (Floating Action Buttons).
• Ebene 4 (Overlay): Modals, Drawer und deren Hintergründe.
• Ebene 5 (System): Tooltips, Toasts und kritische Benachrichtigungen.

2. Schattenskala definieren

Erstellen Sie eine Progression von Schatten, die dem Abstand zur Basis entsprechen:

• Klein (2dp): Subtile Trennung für Buttons oder kleine Karten.
• Mittel (4dp-8dp): Standard-Höhe für Dropdowns und Navigation.
• Groß (12dp-24dp): Hohe Höhe für Modals und schwebende Ebenen.
• X-Groß (32dp+): Dramatische Tiefe für temporären Fokus oder Systembenachrichtigungen.

Hinweis: Verwenden Sie mehrere Schattenebenen (z. B. einen „scharfen“ und einen „weichen“ Schatten) für einen realistischeren, hochwertigen Effekt.

3. Oberflächenfarben zuweisen

Tiefe entsteht nicht nur durch Schatten, sondern auch durch Lichtreflexion:

• Hell-Modus: Elemente mit höherer Höhe werden oft etwas heller oder bleiben reinweiß, während die Basis cremefarben ist.
• Dunkel-Modus: Elemente mit höherer Höhe MÜSSEN heller werden (unter Verwendung halbtransparenter weißer Überlagerungen), um zu simulieren, dass sie näher an der Lichtquelle sind.
• Umsetzung: Verwenden Sie color-mix(in oklch, var(--surface-base) 100%, white X%) (oder eine äquivalente OKLCH-basierte Token-Funktion), um die Oberflächenfarbe jeder Höhenstufe programmatisch zu generieren, anstatt manuell einen neuen Hex-Wert pro Stufe auszuwählen. OKLCH hält die wahrgenommene Helligkeitsschritte über alle Farbtöne hinweg gleichmäßig, was flache Hex-Anpassungen nicht garantieren.

4. Interaktions-„Anhebungen“ erstellen

Wenden Sie das interactive-state-system auf die Z-Achse an:

• Hover: Erhöhen Sie die Schattenunschärfe und -ausdehnung, um zu simulieren, dass das Element zum Benutzer hin angehoben wird.
• Active (Klick): Verringern oder entfernen Sie den Schatten, um zu simulieren, dass das Element in die Oberfläche gedrückt wird.

5. Stacking-Strategie dokumentieren (Z-Index)

Verhindern Sie „Z-Index-Kriege“, indem Sie eine 10er- oder 100er-Skala verwenden:

• 0: Standard
• 100: Navigation/Kopfzeile
• 500: Hintergründe
• 600: Modals/Drawer
• 1000: Tooltips/Toasts

Entscheidungsregeln

• Die Lichtquellenregel: Alle Schatten im System MÜSSEN dieselbe implizite Lichtquelle teilen (normalerweise von oben nach unten), um die visuelle Logik zu wahren.
• Höhe gleich Wichtigkeit: Die wichtigsten temporären Informationen (z. B. eine Benachrichtigung) sollten die höchste Höhe und den dramatischsten Schatten haben.
• Schatten vs. Rahmen: Verwenden Sie Rahmen für die Struktur (Ebene 0-1) und Schatten für die Tiefe (Ebene 2+). Verwenden Sie beide nicht stark am selben Element, es sei denn, die Marke ist stark „skeuomorph“.
• Dunkel-Modus-Höhe: Verwenden Sie im Dunkel-Modus niemals dunkle Schatten auf dunklen Hintergründen. Verwenden Sie stattdessen die Aufhellung der Oberflächenfarbe (Helligkeitsverschiebungen) als primären Tiefenhinweis.

Einschränkungen

• Barrierefreiheit: Höhenhinweise (Schatten) sollten strukturelle Hinweise ergänzen, nicht ersetzen. Stellen Sie sicher, dass Elemente ausreichend Kontrast oder Rahmen haben, um auch ohne den Schatten identifizierbar zu sein. Angehobene Overlays (Modals, Dropdowns) dürfen niemals über einem Fokusindikator gerendert werden, sodass dieser abgeschnitten oder verdeckt wird (WCAG 2.2 SC 2.4.11).
• Performance: Vermeiden Sie box-shadow auf Elementen, die häufig animiert werden oder sich in hochfrequenten Scroll-Containern befinden.
• Responsivität: Große Schatten können auf mobilen Geräten vom Bildschirm „überlaufen“; reduzieren Sie die Schattenausdehnung oder wechseln Sie auf kleinen Viewports zu Rahmen.

Häufige Fehlermuster

• Inkonsistente Lichtquellen: Einige Schatten gehen nach rechts, andere nach unten, was zu einer „betrunkenen“ oder fragmentierten Oberfläche führt.
• Z-Index-„Magische Zahlen“: Verwendung von z-index: 99999, um ein Problem zu lösen, was letztendlich zu unwartbarem Code führt.
• Matschige Schatten: Verwendung von reinem Schwarz (#000) für Schatten anstelle einer transparenten Version der Oberflächenfarbe oder eines dunklen Neutraltons.
• Flache Overlays: Entwerfen eines Modals ohne Schatten oder Hintergrund, sodass es mit dem dahinter liegenden Inhalt verschmilzt.
• Übermäßige Höhe: Jeder Karte einen starken Schatten geben, was die Hierarchie einebnet, weil nichts mehr hervorsticht.

Validierungskriterien

• Eine konsistente 5-6-stufige Höhenskala ist definiert und wird verwendet.
• Alle Schatten teilen eine einzige, konsistente Lichtquelle.
• Z-Index-Werte sind in logischen, dokumentierten Ebenen gruppiert.
• Der Dunkel-Modus verwendet Helligkeitsverschiebungen der Oberfläche, um Tiefe anzuzeigen.
• Interaktionszustände (Hover/Active) beinhalten vertikale Bewegung oder Schattenverschiebungen.
• Schatten verursachen auf mobilen Geräten keinen horizontalen oder vertikalen Überlauf.
• Elemente sind auch dann unterscheidbar, wenn Schatten entfernt werden (A11y-Prüfung).
• Höhere Ebenen verdecken niemals Fokusindikatoren auf darunter oder darin liegenden Elementen (WCAG 2.2 SC 2.4.11).