Funktionale Icons
Icons sind neben dem Logo und der Typografie wichtige Botschafter unserer Marke. Der Stil unserer Icons orientiert sich an bekannten Elementen und schafft so einen klaren Wiedererkennungswert. Es gibt zwei Arten von Icons als Basiselemente der Marke, eine davon sind die funktionalen Icons. Diese werden für wiederkehrende Funktionen und Aktionen verwendet, um Vertrautheit und Verständlichkeit zu schaffen.
Die funktionale Icons unseres Design Systems umfasst eine Sammlung von Icons, die speziell für die Darstellung von Funktionen und Aktionen innerhalb einer Benutzeroberfläche entwickelt wurden.
Größen und optische Skalierung
Unsere funktionalen Icons sind in verschiedenen Größen – passend zu den im System verfügbaren Schriftgrößen – von 10px bis 32px verfügbar. Die Icons werden in 24 verschiedene Kategorien eingeteilt. Die Core-Icons werden ergänzt durch Icon Extensions wie z.B. der Extension für Icons, die in Produkten des Personenverkehrs eingesetzt werden.
Einsatz
Wenn die funktionalen Icons im Kontext zu Text stehen, passen sie sich der Zeilenhöhe des jeweiligen Textes an. Ob in Textblöcken oder in Schaltflächen - unsere funktionalen Icons passen sich immer der Umgebung an, in der sie verwendet werden. So sorgen sie für eine optimale Nutzererfahrung und ein harmonisches Gesamtbild der Benutzeroberfläche.
Varianten
Zur Standardvariante der Icons (Outlined) gibt es noch für ausgewählte Icons die Filled-Variante. Diese werden z.B. dann eingesetzt, wenn das Icon einen aktiven und inaktiven Zustand darstellen soll.
Mapping
Wir haben ein Standardset an Icongrößen für die im Design System verwendeten Schriftgrößen von 12px bis 32px. Jedes Icon sollte in den im Standardset definierten Größen vorhanden sein.
Implementierung
Im Code werden die Icons über einen Webfont eingebunden.
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