Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 1
Inhalte
Auf einen Blick:
CD-Regeln:
Application Icon
Splash Screen
Interface
Technische Vorgaben verschiedenerBetriebssysteme
iOs/iPhone
Android
Windows Phone
Die wachsende Beliebtheit von Smartphones und die vielseitigenMöglichkeiten der Kundenkommunikation mittels Apps wurden mit dem DBNavigator oder Call a Bike auch von der DB AG bereits erfolgreich eingesetzt.2013 wurden weltweit knapp über 100 Milliarden kostenpflichtige undkostenlose Applikationen heruntergeladen. Allein der Erfolg desDB Navigators zeigt die großartige Annahme von mobilen Dienstleistungenseitens der Kunden. Entsprechend wichtig ist ein einheitliches Auftreten derMarke in diesem viel genutzten Medium.
Die CD-Regeln für Application Icons gelten sowohl für externe als auch für interneApplikationen. Das Interface-Design interner Applikationen folgt eigenen, an dasjeweilige Aufgabengebiet angepassten Gestaltungsprinzipien.
Bei Fragen zur Gestaltungmobiler Applikationen wenden Siesich bitte per
E-Mail an das Team CorporateDesign [1]
Ansprechpartner DB SchenkerFür DB Schenker werden die Appszentral koordiniert.Bitte wenden Sie sich an:
Steffen PfeiferService-/Solution ManagerCustomer & Business Solutions eService
E-Mail an Steffen Pfeifer [2]
Hier finden Sie einige allgemeingültige Tipps zur Gestaltung vonUser Interfaces auf mobilen Geräten:Designtipps für die Gestaltung von User Interfaces
Tipps und Hinweise zur Gestaltung und Usability von Appssowie nützliche Templates finden Sie auf den Entwicklerseitenvon iOS, Android und Windows:Entwicklerseite für iOS AppsEntwicklerseite für Android AppsEntwicklerseite für Windows Mobile Apps
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 2
Auf einen Blick:
Die folgenden CD-Richtlinien für die Gestaltung von MobilenAppikationen gelten konzernübergreifend. Sie sind unterteiltin Vorgaben für Application Icons (1), Splash Screens (2)und Application Interfaces (3).Die Gestaltungsprinzipien sind auf das spezielle Bedien-umfeld von iOS angepasst. Sie gelten jedoch auch für MobileApplikationen auf anderen Plattformen (z.B. Android).
Die Gestaltung wird von den technischen Voraussetzungender einzelnen Geräte und den verschiedenenBetriebssystemen beeinflusst. Besonders die starkvariierende Bildschirmqualität (Pixeldichte) erfordert eineindividuelle Anpassung der Gestaltung.
Farbsystematik
Neben dem Logo erfolgt die Absenderkennung bei mobilen Applikationen über dieFarbfläche. Jedem Geschäftsfeld ist eine bestimmte Farbe zugeordnet. DB Rotsteht für die Kommunikation des Personen- und Schienengüterverkehrs, DB Blaufür das Geschäftsfeld Landverkehr, Luft- und Seefracht und Kontraktlogistik undDB Grau für die Kommunikation des Konzerns und des GeschäftsfeldsInfrastruktur und Dienstleistungen. So ist eindeutig zu erkennen, wer Absenderinnerhalb des Unternehmens ist und welche Inhalte kommuniziert werden. Eswerden die Hausfarben des DB Konzerns verwendet.
Typografie
Für die Gestaltung von MobilenApplikationen wird die HausschriftDB Type verwendet.Ausgewählte Schnitte stehen alsWebfonts zur Verfügung.
Webfonts
HKS 14Pantone 485RGB 240/20/20Web #F01414
Pantone 281RGB 10/30/110Web #0A1E6E
Pantone 430RGB 135/140/150Web #878C96
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 3
CD-Regeln:
Application Icon
Als Träger der Marke und Startbutton für die Anwendung hat das ApplicationIcon eine wichtige Werbefunktion. Es ermöglicht auf dem Homescreen desGerätes den ersten visuellen Kontakt zwischen Nutzer und Applikation.Eine einheitliche Systematik in der Darstellung hilft der Marke sich hier klarzu positionieren.
Bereitstellung neuer Icons
Icons für neue Apps erhalten Sieausschließlich vom Team CorporateDesign. Beachten Sie bitte, dass für dieBereitstellung ein Budget eingeplantwerden muss.
E-Mail an das Team CorporateDesign [3]
Gestaltungsprinzip
Das Design ist klar und einfach, um den Inhalt und dieBenutzerführung zu unterstützen und passt sich demgrafischen Bild der mobilen Betriebssysteme an. GrafischeStilmittel wie z.B. Verläufe werden subtil eingesetzt.Eine hohe Performance durch geringere Ladezeiten ist sogewährleistet.
Hinweis: Das Application Icon hat grundsätzlichabgerundete Ecken.
Application Icons sind in Logobereich und Funktionsbereichunterteilt. Im Logobereich steht ausschließlich diepixeloptimierte DB-Bildmarke. Die Höhe des Logobereichesist den einzelnen Icongrößen angepasst.
Die Unterscheidung der einzelnen Geschäftsfelder erfolgtmittels Farbkennung im Funktionsbereich. Hier wirdauch die Funktion der Applikation durch ein passendesPiktogramm visualisiert.
Hinweis: Damit das Icon auch auf weißer Fläche gut stehtwird ein Verlauf von Schwarz zu Weiß mit einer Deckkraftvon 10% über den Logo- und Funktionsbereich multipliziert.
Der Innenraum der Marke und das Piktogramm liegen reinweiß über dem Verlauf.
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 4
Farbkennung – abhängig vom Absender
Die Application Icons erhalten eine Farbkennungentsprechend des Absenders. DB Rot steht für den Personen-und Schienengüterverkehr, DB Blau für das GeschäftsfeldLandverkehr, Luft- und Seefracht und Kontraktlogistik undDB Grau für die Kommunikation des Konzerns und desGeschäftsfelds Infrastruktur und Dienstleistungen.
Piktogramm zur Funktionskennzeichnung
Das Piktogramm in Seiten- oder Frontalansicht stellt dieFunktion der App passend dar und wird ohne Verläufe oderandere Effekte visualisiert.
Der App-Name als zusätzliche Funktionskennzeichnung
Das Application Icon erscheint auf dem Geräte-Homescreenimmer in Verbindung mit dem Namen der App. Hier bestehtzusätzlich die Möglichkeit der Differenzierung undFunktionskennzeichnung. Bei der Wahl des Namens istdarauf zu achten, dass nur eine beschränkte Zeichenlängeangezeigt werden kann.
Technische Vorgaben
Die Vorlagen für Application Icons werden als 24-Bit-PNG im RGB Farbmodus erstellt. Diese werden von deneinzelnen Betriebssystemen unterschiedlich behandelt.
Achtung: Da iOS den Icons automatisch abgerundete Eckenhinzufügt, müssen die Icons mit 90° Ecken erstellt werden.
Android nimmt keine Veränderungen an den Vorlagen zurDarstellung des App Icons vor. Damit das Erscheinungsbildin Android und iOS identisch ist, werden Vorlagen mitrunden Ecken auf transparentem Hintergrund benötigt.
links: Original Icon, rechts: Darstellung in iOS(automatische Abrundung der Ecken des Icons).
links: Original Icon, rechts: Darstellung in Android
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 5
Beispiele realisierter Application Icons
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 6
Zur optimalen Darstellung eines Application Iconswerden für jedes Betriebssystem eigene Vorlagenbenötigt.Alle Vorlagen erhalten Sie vom Team Corporate Design.
Das Betriebssystem Android unterteilt die Abbildungsgrößeneines Icons nach Einsatzzweck und Pixeldichte derBildschirme in Stufen. Für jede Abstufung muss eineoptimierte Vorlagendatei in der App hinterlegt werden.
Das Betriebssystem iOS benötigt für jede Abbildungsgrößedes App Icons eine eigene pixeloptimierte Vorlagendatei umdie beste Darstellung auf allen Endgeräten zu gewährleisten.Die Abbildungsgröße des Icons ist abhängig von der iOS-Version und dem Endgerät.
Für die Druckproduktion werden zusätzlich hoch aufgelösteVorlagen in CMYK zur Verfügung gestellt.
Sonderfall S-Bahn-Apps
Apps für die S-Bahn werden mit dem S-Bahn-Zeichen imLogobereich gekennzeichnet. Die regionale Unterscheidungerfolgt über den App-Namen. Der Funktionsbereich erhältdie rote Farbkennung des Personenverkehrs.
Versionen für den Druck
Für die Marketingkommunikation stehen Ihnen hierhochaufgelöste Versionen der Application Icons zumDownload zur Verfügung:
Download: DB_APP_Icons_4c_305dpiDateiformat: ZIPDateigröße: 26.4 MB
Splash Screen
Der Splash Screen ist der zweite visuelle Eindruck, den ein Nutzer von einerApp erhält. Es signalisiert den Programmstart und dient zur Überbrückungder Ladezeit. Entsprechend wichtig ist hier eine gute Markenpräsenz.In Ausnahmefällen und nur bei wenig Platz kann auf den Einsatz desDB Winkels verzichtet werden.Ist die Ladezeit beendet, wird der Splash Screen durch die erste Seite ersetzt.Optimal ist eine visuelle Ähnlichkeit beider Seiten.
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 7
Gestaltungsprinzip
Die Gestaltung folgt der grafisch reduzierten Form derApplication Icons. Auf einen subtilen Einsatz von Stilmittelnund Effekten ist auch hier zu achten.
Der Splash Screen wird in folgende Bereiche aufgeteilt:
Logostreifen (kann durch Logobox ersetzt werden)BildflächeFarbfläche mit TitelFooter (optional)
Logostreifen/LogoboxDie Höhe des weißen Logostreifens (1 ½ DBx) steht indirekter Abhängigkeit zur Breite der DB-Bildmarke (DBx).Das Markenlogo wird vertikal zentriert links im Logostreifenund bündig mit den Elementen des Inhaltsbereichesplatziert.
Um Ihnen die Anwendung zu erleichtern, stehen fertigeVorlagendateien des Logostreifens zum Download bereit.Wird anstelle des Logostreifens die Logobox eingesetzt,verwenden Sie bitte die Logobox Master-Vorlagendateien.
BildflächeDas Bild sollte so gewählt werden, dass sich Logostreifenoder Logobox ausreichend vom Motiv abheben und in ihrergesamten Form erkennbar bleiben.
Farbfläche mit TitelDer Titelbereich erhält eine Farbkennung entsprechend desAbsenders. Die Farbfläche kann mit einem von oben nachunten gehenden Helligkeitsverlauf gestaltet werden.Der Helligkeitsunterschied beträgt dabei maximal 30%.
DB WinkelDer DB Winkel hat eine Höhe von ½ DBx. Der seitlicheVersatz wird nach den Regeln des goldenen Schnitts imVerhältnis 38% (links) zu 62% (rechts) gewählt.
FooterDer weiße Footer hat eine Höhe von 1 ½ DBx und kannZusatzlogos enthalten.
TypografieAls Schrift kommt ausschließlich die DB Type zum Einsatz:
Titelschrift: DB HeadUntertitel: DB SansSatzart: Mittelachse
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 8
Platzierung von Zusatzlogos am Beispiel S-Bahn
Das S-Bahn-Logo (Zusatzlogo) steht rechts im Footer undwird vertikal zentriert. Es hat den gleichen Abstand zumRand wie das Markenlogo im Logostreifen.Die Höhe des S-Bahn-Logos entspricht der Breite derBuchstaben „DB“ (A) in der DB-Bildmarke.Auf Splash Screens für S-Bahn Apps wird am linken Rand imAnschnitt zusätzlich das S-Bahn-Signet platziert.
Die Vorlagen des Signets und der S-Bahn-Logos können Siehier herunterladen: S-Bahn-Logos, Bus- und S-Bahn-Signet.
Für die Abbildungsgröße anderer Zusatzlogos könnenabweichende Regelungen gelten, z. B. für Angebots- undRegio-Markierungen.
Logostreifen zum Download
Die Logostreifen mit der Marke „DB“und den Geschäftsfeldmarken stehenIhnen zum Download als bearbeitbarePhotoshop-Dateien zur Verfügung.
Download: DB_APP_Logostreifen_PSDDateiformat: ZIPDateigröße: 382 kB
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 9
Interface
Die Qualität des Inhalts und eine nutzerfreundliche Navigation sind imAnwendungsbereich vorrangig. Die Repräsentation der Marke erfolgthier vor allem durch eine entsprechende Farbgebung. Optional kann dieMarke in einem Logostreifen über der Navigationsleiste stehen.
Logoplatzierung
Soll die Marke im Anwendungsbereich gezeigt werden,erscheint diese im Logostreifen über der Navigationsleiste.Der Logostreifen hat dieselbe Größe, wie dieNavigationsleiste. Der Abstand zum linken Rand wird sogewählt, dass das Logo und die Elemente desInhaltsbereiches bündig zueinander stehen.
Alternative: kein Logo im Anwendungsbereich
Alternativ kann auf die Darstellung eines Logos imAnwendungsbereich verzichtet werden.Die Unterscheidung der Absender erfolgt durch dieFarbgebung in der Navigationsleiste.
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 10
Farb-/Absenderkennung
Die Navigationsleiste erhält eine Farbkennung entsprechend des Absenders.Optional kann zusätzlich die Geschäftsfeldmarke im Logostreifen über derNavigationsleiste angebracht werden.
Personenverkehr, Schienengüterverkehr(kein Logo im Interface)
Landverkehr, Luft- und Seefracht, Kontraktlogistik(kein Logo im Interface)
Konzern, Infrastruktur und Dienstleistung(kein Logo im Interface)
Platzierung von S-Bahn-Logos im Logostreifen
Das S-Bahn-Logo wird im Logostreifen rechts platziert undhat den gleichen Abstand zum Rand wie das Markenlogo.Die Höhe des S-Bahn-Logos entspricht der Breite derBuchstaben „DB“ (A) in der DB-Bildmarke.
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 11
Technische Vorgaben verschiedener Betriebssysteme
Die Gestaltungsprinzipien sind auf allen Betriebssystemen umzusetzen.Jedes Betriebssystem und Gerät bietet andere technische Voraussetzungenund Möglichkeiten. Im Folgenden werden einige Besonderheiten vorgestellt.
iOs/iPhone
Der Startbildschirm des iPhone zeigt ausschließlich Application Icons.
Hinweis: Aufgrund der permanenten Änderung seitens derHersteller informieren Sie sich bitte direkt bei Apple überexakte Bildschirmgrößen, Pixeldichte der einzelnen Geräteund notwendigen Vorgaben zu Application Icons:Human Interface Guidelines for iOS
Apple liefert für seine Geräte iPhone, iPod und iPad seinBetriebssystem iOS. Die Regeln für die Gestaltung von Appssind klar definiert, dennoch gibt es Möglichkeiten zurIndividualisierung.
Application Icons werden für folgende Darstellungenin verschiedenen Größen benötigt:
im App Store (iTunes)auf dem Homescreen als Startbutton für Appsbei Suchergebnissen in Spotlightin der Einstellungsebenein durch die App erstellten Dokumenten
Splash Screen
beim Programmstart wird ein bildschirmfüllender SplashScreen angezeigt
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 12
Android
Der Startbildschirm unter Android kann je nach Gerät verschieden gestaltet sein.Neben den Application Icons kann dieser auch Widgets enthalten.
Hinweis: Aufgrund der permanenten Änderung seitens derHersteller informieren Sie sich bitte direkt bei Android überexakte Bildschirmgrößen, Pixeldichte der einzelnen Geräteund notwendigen Vorgaben zu Application Icons:Human Interface Guidelines für Android
Das Betriebssystem Android ist eine „Freie Software“und wird von verschiedenen Geräteherstellern genutzt.Android ermöglicht einen Gestaltungsspielraum.Startbildschirm und Menüführung variieren von Herstellerzu Hersteller.
Application Icons werden für folgende Darstellungenin verschiedenen Größen benötigt:
im Google Play Storeauf dem Homescreen als Startbutton für Appsin der Einstellungsebenein der Notification Bar
Es erfolgt keine automatische Abrundung der Ecken und keinautomatisches Hinzufügen von Effekten. Ecken und Effektekönnen selbst erstellt werden, da Transparenz möglich ist.
WidgetsZusätzlich zu Application Icons kann der Nutzer auchWidgets, kleine Fenster mit Funktionen aus einer App, aufden Startbildschirm installieren. Die Größen dieser Widgetskönnen variieren.
Digitale Medien, UX-UI Design > Mobile Apps, Interface Design
Deutsche Bahn AG · Corporate Design · Digitale Medien, UX-UI Design · Stand: 16.03.2016 Seite 13
Windows Phone
Auf Windows Phone 7 werden Application Icons ohneabgerundete Ecken dargestellt.
Hinweis: Aufgrund der permanenten Änderung seitens derHersteller informieren Sie sich bitte direkt bei Android überexakte Bildschirmgrößen, Pixeldichte der einzelnen Geräteund notwendigen Vorgaben zu Application Icons:Windows Dev Center
Das Betriebssystem von Microsoft wird von verschiedenenGeräteherstellern eingesetzt. Um sich von anderenBetriebssystemen abzuheben, setzt Windows Phone aufeinen eigenen Designstil für das User Interface.
Ansprechpartner
Fragen zum Inhalt dieser Seite? [4]
veröffentlicht: 24.02.2015
Verweisliste
[1] E-Mail an das Team Corporate Design: [email protected]
[2] E-Mail an Steffen Pfeifer: [email protected]
[3] E-Mail an das Team Corporate Design: [email protected]
[4] Fragen zum Inhalt dieser Seite?: [email protected]
Top Related