digitale medien, ux-ui design > mobile apps, interface design€¦ · digitale medien, ux-ui...

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

mailto:[email protected]





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



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.





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



Beispiele realisierter Application Icons



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.



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



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



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.



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.



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



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.



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]

[email protected]




[email protected]

digitale medien, ux-ui design > mobile apps, interface design€¦ · digitale medien, ux-ui...

Documents