Elevation
Elevations sind wichtige Mittel in unserem Design System, um visuelle Hierarchie und Tiefe zu erzeugen. Durch das Hinzufügen von Schatten und Hervorhebungen auf Elementen können wir eine visuelle Schichtung erstellen, die Nutzer:innen hilft, schnell und einfach zu verstehen, welche Elemente in der Hierarchie wichtiger sind als andere.
Unser Design System definiert drei verschiedene Arten von Elevations:
Überlappende Flächen mit unterschiedlichen Farben: Diese Art der Elevation wird standardmäßig verwendet, um ein flacheres und zweidimensionaleres Design zu erreichen. In diesem Fall werden die Elemente durch ihre unterschiedlichen Farbwerte voneinander abgegrenzt.
Überlappende Flächen werden durch Schatten getrennt: Diese Art von Elevation eignet sich für Elemente, die sich überlappen, wie z.B. ein Floating-Button, der über dem Inhalt schwebt, oder ein Drawer-Element, das sich über den Inhalt schiebt. Durch die Verwendung von Schatten werden die Elemente optisch voneinander getrennt.
Achtung: achte bei dieser Art der Elevation darauf, die jeweiligen Elemente (z.B. Cards) mit einer zusätzlichen Border zu versehen, da die Schatten im Dark Mode nicht sichtbar sind und durch die Kontur die Abgrenzung zwischen den verschiedenen Ebenen ermöglicht wird.
Überlappende Elemente, die durch eine Backdrop-Ebene getrennt sind: Diese Variante wird hauptsächlich für Modals oder Drawer verwendet und trennt den Hintergrund deutlich vom Vordergrund. Dadurch wird eine klare visuelle Abgrenzung zwischen den Elementen geschaffen, um die Bedeutung des Vordergrundes hervorzuheben.
Durch den gezielten Einsatz von Elevations können wir die visuelle Hierarchie unserer Designs verbessern und eine konsistente Benutzererfahrung gewährleisten.
Tokens
Unsere Elevation-Tokens sind benannte Variablen, die wir verwenden, um konsistente Elevations in unseren digitalen Produkten sicherzustellen. Jeder Elevation-Token repräsentiert eine bestimmte Elevation, die wir in unserem Design System definieren. Diese benannten Elevation-Tokens erleichtern die Arbeit in der Entwicklung, da sie einfach zu referenzieren und zu ändern sind. Für mehr Information lese alles über unsere Tokens.
Du hast Fragen oder Input?
Wir haben alles dafür gegeben, dass unser Design System mit möglichst wenigen Regeln auskommt. So wird es einfach in der Anwendung, führt zu konsistenten Ergebnissen und stärkt die Marke Deutsche Bahn! Solltest du dir jedoch unsicher sein, Fragen oder einfach nur eine gute Verbesserungsidee haben, so sind wir gerne für dich da!
E-Mail schreiben Feedback in Github
Weiter