Unsere Icons: universell einsetzbar und schnell verständlich.
Icons veranschaulichen wichtige Informationen auf kleinstem Raum. Insbesondere auf digitalen Benutzeroberflächen oder in Gebäuden und Fahrzeugen spenden sie Orientierung und sind neben Logo und Typografie wichtige Botschafter unserer Marke: Der Stil unserer Icons orientiert sich an bekannten Elementen und schafft so klare Wiedererkennung.
Funktionale Icons
Um vertraute und leicht verständliche Momente zu schaffen, verwenden wir für wiederkehrende Aktionen und Funktionen die DB Standard Funktions-Icons. Ist eine bestimmte Funktion oder Aktion noch nicht als Icon vorhanden, empfehlen wir dir ein neues Icon zu kreieren. Führe es anschließend in unsere Icon-Library zurück, um es für alle verfügbar zu machen.
Visuelle Sprache
Die funktionalen und illustrativen Icons leiten sich von der modernen Ikone der Deutschen Bahn ab. Durch bekannte Elemente und Formen schaffen wir ein harmonisches Gesamtbild und klare Wiedererkennung.Der Puls ist fester Bestandteil unserer Formsprache. Die funktionalen Icons sind einfarbig.
Metaphern und Lesbarkeit
Metaphern gleichen wir optisch über die verschiedenen Größen an. Die Lesbarkeit und das Verständnis ist wichtiger, als die absolute geometrische Konsistenz. Wir reduzieren die Komplexität der Metapher und der Typografie wenn wir durch die Verkleinerung des Icons die Regeln nicht mehr einhalten können.
Skalierung der Form
Wir starten beim Design immer mit 32 × 32 dp. In dieser Größe haben wir die maximalen Details und reduzieren diese wenn notwendig auf 24 × 24 dp und 20 × 20 dp. Unterschreitet eine innenliegende Fläche die minimale Fläche von 2 × 2dp, dann wird diese gefüllt.
Details wurden reduziert damit die Mindestabstände eingehalten werden
Die Innenfläche wurde gefüllt, da die innenliegende Mindestbreite unterschritten wurde
Skalierung der Typographie
Ab einer Größe von 24 dp und kleiner werden Serifen in der Icon-Schriftkombination begradigt, um ein gleichmäßiges Bild beizubehalten. Die kleinste Schriftgröße im Icon ist 10 dp.
Adaption und Komposition
Wir adaptieren und erweitern bereits vorhandene Formen, um ein harmonisches Gesamtbild und wiedererkennbare Momente zu schaffen.
Komposition
Wir schaffen neue Kompositionen durch die Verbindung mindestens zweier bereits vorhandener Icons bzw. Metaphern. Beispielsweise Ticket und Rabatt zu einem preislich reduzierten Ticket.
Ausrichtung
Wir zentrieren unsere Icons optisch, ausgehend von ihrem visuellen Schwerpunkt.
Optisch zentriert
Geometrisch zentriert
Strichstärken und Linienenden
Für funktionale Icons in allen Größen verwenden wir eine konsistente Strichstärke von 2 dp für Kurven, Winkel sowie innere und äußere Striche. Linienenden runden wir mit einem Radius von 1 dp ab.
Konturlinien
Wir runden die Ecken von Konturlinien ab. Bei Rundungen mit einem Radius von 2 dp oder weniger werden die Ecken der Konturlinien nicht abgerundet.
Abstände
Bei Abständen unterschreiten wir nicht die Linienstärke, damit die Metapher immer klar erkennbar bleibt. Kann Aufgrund der Skalierung der Abstand nicht eingehalten werden, reduzieren wir zuerst die Komplexität des Icons und im nächsten Schritt die innenliegenden Linien und Abstände auf 1 dp.
Winkel
Um ein Icon zu konstruieren, verwenden wir Winkel in 45-Grad-Schritten. Wenn diese nicht ausreichen, dann in 15-Grad-Schritten.
Durchgestrichene Formen
Wir erzeugen durchgestrichene Formen durch eine Erweiterung um eine 2-dp-Linie und einen Verschnitt. Die durch den Verschnitt entstandenen Kanten werden nicht abgerundet.
Animation
Richtig eingesetzt, unterstützen Animationen positiv die User Experience. Sie geben Nutzer:innen Rückmeldung und helfen so, Veränderungen besser wahrzunehmen.
Animationskurven – emotional und funktional
Zwei Animationskurven helfen uns, Bewegung ausdrucksstark bis funktional darzustellen. Unsere charakteristische Animationskurve – basierend auf der Brand-Personality – wird durch eine zweite funktionale Animationskurve erweitert. Ihr Einsatz ermöglicht schnelles Feedback in bestimmten Interaktionen mit den Nutzer:innen.
Emotional
Die emotionale Animationskurve verleiht animierten Elementen Dynamik und Charakter.
Sie sorgt für Prägnanz und bildet die Grundlage für die Animationen von Icons, Bannern etc.
Web-Anwendungen – CSS:
Transition-Timing-Function:Cubic-Bezier (0.27, 0.05, 0.4, 0.95)
Adobe After Effects:
Ausgehende Geschwindigkeit: 33 %Ankommende Geschwindigkeit: 70 %
Funktional
Die funktionale Animationskurve wird für schnelle und subtile Animationen verwendet. Überall dort, wo Nutzer:innen schnelles Feedback (z. B. Drop-down-Menü) in einer Interaktion benötigen.
Web-Anwendungen – CSS:
Transition-Timing-Function:Cubic-Bezier (0.15, 0, 0.45, 1)
Adobe After Effects:Ausgehende Geschwindigkeit: 15 %
Ankommende Geschwindigkeit: 55 %
Timing
Die Animationsdauer bei funktionalen Elementen ist meist kurz, um eine Interaktion nicht zu verzögern.
Grundsätzlich gilt: Animationen unterstützen Inhalte in ihrem Auftritt. Die Animation steht jedoch nie im Vordergrund. Von langen Animationszeiten ist daher abzusehen.
Alarm Animation
Menü – Close Transition
Workflow
Um die beste Qualität und einheitliche Icons zu erhalten, folgen wir diesem Workflow um die Icons zu konstruieren. Bevor wir mit der Konstruktion beginnen, machen wir uns mit dem Guide vertraut.
Icon-Erstellung
Um mit der Erstellung deines neuen Icons zu beginnen, verwende unser Adobe-Illustrator-Template. Es beinhaltet die Icon-Raster für das Zeichnen der Icons in allen drei Größen. Die Schritt-für-Schritt-Anleitung für das genaue Vorgehen beginnt nach dem Download.
Schritt 1 – Start auf 32 dp.
Wir starten mit dem 32 × 32 dp Icon. Die Hilfslinien verdeutlichen das Pixelraster und helfen uns bei der pixelgenauen Umwandlung. Beachte, dass die Strichstärke 2px beträgt und dass es auf vollen Pixeln positioniert ist.
Schritt 2 – Adaption auf 24 dp.
Das fertige Icon kopieren wir auf die 24 × 24 dp Fläche. Wir erhöhen die Strichstärke und den Kurvenradius auf 2,667 px. Das machen wir, damit wir beim Herunterskalieren in Sketch wieder eine Strichstärke von 2 px erhalten. Wir passen die Proportionen und Ausrichtungen so an, dass die visuellen Regeln auch in dieser Größe eingehalten werden. Wir achten auf die Innenabstände und reduzieren, wenn notwendig, die Komplexität des Icons.
Schritt 3 – Adaption auf 20 dp.
Wir wiederholen den Prozess aus Schritt 2 für das 20 × 20 Icon und erhöhen die Strichstärke und Kurvenradius auf 3.2 px. Wenn möglich wird für diese Größe noch eine Solid-Variante erstellt.
Schritt 4 – Von Illustrator zu Sketch.
Illustrator: Wir duplizieren die Ebenen der fertigen Icons und wandeln alle Linien in Flächen um. Anschließend fügen wir alle Flächen mit dem Pathfinder zu einer Fläche zusammen. Wir blenden alle Ebenen, bis auf die Ebenen mit dem fertigen Icon und die Hintergrundebe, aus. Danach exportieren wir die Icons als SVG-Datei mit folgenden Einstellungen: 3 Dezimalstellen sowie Minifizieren und Responsiv deaktiviert.
Sketch: Wir platzieren die Icons in Sketch auf das entsprechende Artboard und skalieren es auf die richtige Größe. Hierbei beachten wir, dass der Sicherheitsbereich eingehalten wird.
Icon-Bereitstellung
Unsere Icons folgen bei der Erstellung und dem Export von Icons spezifischen Standards. Damit schaffen wir Konsistenz und Qualität für Design und Entwicklung.
DB-Icon Sketch Plugin – automatisch
Das DB Icon Sketch Plugin dient der automatischen optimierung und qualitätsicherung unser Ion. Darüber hinaus komprimiert und bereinigt es das SVG.
Relative Bezeichnungen
Wir verwenden Relative Icon-Dateinamen, um eine bessere inhaltliche Zuordnung und eine Gruppierung in Software-basierten Bibliotheken zu erreichen. Der Aufbau ist wie folgt:
Sketch Beispiel: Größe/Gruppe/Bezeichnung
Für die Formatierung verwenden wir die Title Case Schreibweise.
Absolute Bezeichnungen
Um eine bessere inhaltliche Zuordnung und eine Gruppierung in alphabetischen Dateisystemen zu erreichen, verwende folgende Regel für Icon-Dateinamen. Der Aufbau ist wie folgt:
Beispiel: Asset Typ + Gruppe + Bezeichnung + Größe
Um die Kompatibilität zu Plattformen und der Entwicklung sicherzustellen, verwende englische Bezeichnungen für Dateinamen. Die Formatierung der Dateinamen folgt folgendem Schema.
Für inhaltliche Trennungen, Präfixe und Namen verwenden wir die snake_case Konvention.
Beispiel: asset_typ_gruppe_icon_bezeichnung_32px
Icon Type | Präfix | Suffix für Größe | Beispiel |
Icons (ohne Spezifische Zuordnung) | db_ic_ | _32, _24, _20 | db_ic_icon_name_32 |
Marke | db_ic_brand | _32, _24, _20 | db_ic_brand_db_logo_32 |
Action (Navigation & UI) | db_ic_action | _32, _24, _20 | db_ic_action_add_32 |
Benachrichtigungen | db_ic_notification | _32, _24, _20 | db_ic_notification_error_32 |
Zug Attribute | db_ic_seat | _32, _24, _20 | db_ic_seat_window_32 |
Navigation | db_ic_navigation | _32, _24, _20 | db_ic_navigation_cancel_32 |
Media (Player Controls etc.) | db_ic_av | _32, _24, _20 | db_ic_av_play_32 |
Reise | db_ic_journey | _32, _24, _20 | db_ic_transportation_train_ice_32 |
Dateiformate
Wir stellen Icons in den folgenden Formaten bereit:
SVG – Android, Web, Sketch, Illustrator und Photoshop
Für Design-Software wie Sketch, Illustrator und Photohop sowie für die Entwicklung von Android- und Web-Applikationen verwenden das SVG-Format.
Optimiere deine SVG-Assets nach folgenden Vorgaben, um die Qualität und Kompatibilität zu gewährleisten. Die Optimierung kannst du manuell durchführen oder automatisch mit dem SVG BEM Plugin für Sketch.
PDF – iOS
Für iOS-Applikationen verwenden wir das PDF Format, da die Entwicklungsumgebung Xcode anhand der PDF die benötigten Formate und Größen eigenständig generiert.
Alternativ können die Icons auch im PNG-Format bereitgestellt werden. Beachte hierbei, dass die Icons für die verschiedenen Auflösungen ( 1×, 2×, 3× ) exportiert werden müssen.
SVG Optimierung – manuell
- Entferne unnötige Header und Metadaten
- Entferne die IDs oder benenne sie in Klassen um. (Folge hierbei dem BEM Standard)
- Verwende eine Genauigkeit von drei Dezimalstellen.
- Konvertiere alle Farben in #HEX Werte und verwende für Transparenzen das ‚opacity‘ Attribut.
Bereinigter SVG-Export
Werden nur die relevanten Informationen in Header und Metadaten verwendet, reduziert sich die Dateigröße. Klassen nach BEM ermöglichen Features wie z. B. Animationen.
Standard-SVG-Export
Unnötige Informationen im Header und in den Metadaten vergrößern die Datei. Fehlerhafte oder doppelte IDs sowie Sonderzeichen führen zu Problemen in der Entwicklung.
Weiter