Interaktive Elemente sind konsistent gestaltet und verhalten sich systemweit einheitlich. Dies sorgt für eine klare und intuitive Benutzererfahrung, da Nutzer mit bekannten Rückmeldungen und Interaktionen vertraut sind. Am Beispiel des Buttons werden die verschiedenen Zustände gezeigt, die interaktive Elemente einnehmen können.
Enabled: Der Button ist interaktiv und bereit für Benutzereingaben. Hovered: Der Button hebt sich hervor, wenn der Mauszeiger darüber bewegt wird. Pressed: Der Button zeigt eine visuelle Rückmeldung, wenn er gedrückt wird. Focused: Der Button weist einen Fokusindikator auf, wenn er über die Tastatur fokussiert wird.
Hovered und Pressed
Die globalen Stile für die verschiedenen Interaktionszustände sollten universell auf alle Komponenten angewendet werden können. Sie sind darauf ausgerichtet, Konsistenz und Lesbarkeit über alle interaktiven Elemente hinweg sicherzustellen.
- Farbkontraste und Schriftgrößen: Für alle interaktiven Elemente sollten klare Farbkontraste und gut lesbare Schriftgrößen verwendet werden, um die Bedienbarkeit zu verbessern.
- Visuelle Änderungen: Beide States haben jeweils leichte visuelle Änderungen wie z.B. Änderung der Hintergrundfarbe oder Textfarbe um sich von den anderen Interaction States zu unterscheiden.
Focused
Der Focused State zeigt visuell an, welches interaktive Element im Fokus ist, indem es einen Konturrahmen um das Element anzeigt. Es gibt zusätzliche Beispielbilder für den Lightmode und Darkmode, jeweils mit und ohne Hintergrundbild.
Globaler Stil
Der Fokus-Indikator hat einen globalen Stil, der sich für die Umrandung jedes Elements und verschiedene Hintergründe eignet. Der Fokusindikator nimmt den Radius einer Komponente an, indem er sich um das interaktive Element legt und sich der jeweiligen Containerfarbe anpasst.Im System stellen wir eine Lösung für die jeweiligen Hintergrundfarben in Light- und Darkmode sowie der Anwendung auf Hintergrundbildern bereit, Der blaue Fokusrahmen hat dabei das geforderte Kontrastverhältnis zu den Hintergrundfarben im System.
Der Fokusrahmen mit transparentem Abstand funktioniert auf allen Hintergrundfarben von Level 1 bis Level 3.
Der Fokusrahmen mit transparentem Abstand funktioniert auf allen Hintergrundfarben für Light- und Darkmode.
Der Fokusrahmen mit transparentem Abstand funktioniert in allen adaptiven Farbkontexten.
Einsatz auf Hintergrundbildern
Wenn ein Hintergrundbild vorhanden ist, muss der transparente Hintergrund des Fokusindikators (der Abstand zwischen dem blauen Fokusrahmen und dem Element) manuell überschrieben werden. Dieser Hintergrund sollte auf die Farbe des Containers gesetzt werden, in dem das Hintergrundbild liegt (Level 1-3).Beim Einsatz von interaktiven Komponenten auf Hintergrundbildern muss man selbst sicherstellen, dass ein ausreichender Kontrast vorhanden ist.
Der Fokusrahmen mit eingefärbtem Abstand funktioniert in hellen und dunklen Hintergrundbildern. Setze Container, die ein dunkles Hintergrundbild haben auf Dark Mode, damit die Komponenten und dementsprechend der Focused State gut sichtbar sind.
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