digitale medien, ux-ui design > mobile apps, interface design digitale medien, ux-ui design > mobile

Download Digitale Medien, UX-UI Design > Mobile Apps, Interface Design Digitale Medien, UX-UI Design > Mobile

Post on 15-Nov-2019

0 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 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 verschiedener Betriebssysteme

    iOs/iPhone

    Android

    Windows Phone

    Die wachsende Beliebtheit von Smartphones und die vielseitigen Möglichkeiten der Kundenkommunikation mittels Apps wurden mit dem DB Navigator oder Call a Bike auch von der DB AG bereits erfolgreich eingesetzt. 2013 wurden weltweit knapp über 100 Milliarden kostenpflichtige und kostenlose Applikationen heruntergeladen. Allein der Erfolg des DB Navigators zeigt die großartige Annahme von mobilen Dienstleistungen seitens der Kunden. Entsprechend wichtig ist ein einheitliches Auftreten der Marke in diesem viel genutzten Medium.

    Die CD-Regeln für Application Icons gelten sowohl für externe als auch für interne Applikationen. Das Interface-Design interner Applikationen folgt eigenen, an das jeweilige Aufgabengebiet angepassten Gestaltungsprinzipien.

    Bei Fragen zur Gestaltung mobiler Applikationen wenden Sie sich bitte per

    E-Mail an das Team Corporate Design [1]

    Ansprechpartner DB Schenker Für DB Schenker werden die Apps zentral koordiniert. Bitte wenden Sie sich an:

    Steffen Pfeifer Service-/Solution Manager Customer & Business Solutions eService

    E-Mail an Steffen Pfeifer [2]

    Hier finden Sie einige allgemeingültige Tipps zur Gestaltung von User Interfaces auf mobilen Geräten: Designtipps für die Gestaltung von User Interfaces

    Tipps und Hinweise zur Gestaltung und Usability von Apps sowie nützliche Templates finden Sie auf den Entwicklerseiten von iOS, Android und Windows: Entwicklerseite für iOS Apps Entwicklerseite für Android Apps Entwicklerseite für Windows Mobile Apps

    mailto:marke@deutschebahn.com mailto:marke@deutschebahn.com mailto:Steffen.Pfeifer@dbschenker.com

  • 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 Mobilen Appikationen gelten konzernübergreifend. Sie sind unterteilt in 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 Mobile Applikationen auf anderen Plattformen (z.B. Android).

    Die Gestaltung wird von den technischen Voraussetzungen der einzelnen Geräte und den verschiedenen Betriebssystemen beeinflusst. Besonders die stark variierende Bildschirmqualität (Pixeldichte) erfordert eine individuelle Anpassung der Gestaltung.

    Farbsystematik

    Neben dem Logo erfolgt die Absenderkennung bei mobilen Applikationen über die Farbfläche. Jedem Geschäftsfeld ist eine bestimmte Farbe zugeordnet. DB Rot steht für die Kommunikation des Personen- und Schienengüterverkehrs, DB Blau für das Geschäftsfeld Landverkehr, Luft- und Seefracht und Kontraktlogistik und DB Grau für die Kommunikation des Konzerns und des Geschäftsfelds Infrastruktur und Dienstleistungen. So ist eindeutig zu erkennen, wer Absender innerhalb des Unternehmens ist und welche Inhalte kommuniziert werden. Es werden die Hausfarben des DB Konzerns verwendet.

    Typografie

    Für die Gestaltung von Mobilen Applikationen wird die Hausschrift DB Type verwendet. Ausgewählte Schnitte stehen als Webfonts zur Verfügung.

    Webfonts

    HKS 14 Pantone 485 RGB 240/20/20 Web #F01414

    Pantone 281 RGB 10/30/110 Web #0A1E6E

    Pantone 430 RGB 135/140/150 Web #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 Application Icon eine wichtige Werbefunktion. Es ermöglicht auf dem Homescreen des Gerätes den ersten visuellen Kontakt zwischen Nutzer und Applikation. Eine einheitliche Systematik in der Darstellung hilft der Marke sich hier klar zu positionieren.

    Bereitstellung neuer Icons

    Icons für neue Apps erhalten Sie ausschließlich vom Team Corporate Design. Beachten Sie bitte, dass für die Bereitstellung ein Budget eingeplant werden muss.

    E-Mail an das Team Corporate Design [3]

    Gestaltungsprinzip

    Das Design ist klar und einfach, um den Inhalt und die Benutzerführung zu unterstützen und passt sich dem grafischen Bild der mobilen Betriebssysteme an. Grafische Stilmittel wie z.B. Verläufe werden subtil eingesetzt. Eine hohe Performance durch geringere Ladezeiten ist so gewährleistet.

    Hinweis: Das Application Icon hat grundsätzlich abgerundete Ecken.

    Application Icons sind in Logobereich und Funktionsbereich unterteilt. Im Logobereich steht ausschließlich die pixeloptimierte DB-Bildmarke. Die Höhe des Logobereiches ist den einzelnen Icongrößen angepasst.

    Die Unterscheidung der einzelnen Geschäftsfelder erfolgt mittels Farbkennung im Funktionsbereich. Hier wird auch die Funktion der Applikation durch ein passendes Piktogramm visualisiert.

    Hinweis: Damit das Icon auch auf weißer Fläche gut steht wird ein Verlauf von Schwarz zu Weiß mit einer Deckkraft von 10% über den Logo- und Funktionsbereich multipliziert.

    Der Innenraum der Marke und das Piktogramm liegen rein weiß über dem Verlauf.

    mailto:marke@deutschebahn.com mailto:marke@deutschebahn.com

  • 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 Farbkennung entsprechend des Absenders. DB Rot steht für den Personen- und Schienengüterverkehr, DB Blau für das Geschäftsfeld Landverkehr, Luft- und Seefracht und Kontraktlogistik und DB Grau für die Kommunikation des Konzerns und des Geschäftsfelds Infrastruktur und Dienstleistungen.

    Piktogramm zur Funktionskennzeichnung

    Das Piktogramm in Seiten- oder Frontalansicht stellt die Funktion der App passend dar und wird ohne Verläufe oder andere Effekte visualisiert.

    Der App-Name als zusätzliche Funktionskennzeichnung

    Das Application Icon erscheint auf dem Geräte-Homescreen immer in Verbindung mit dem Namen der App. Hier besteht zusätzlich die Möglichkeit der Differenzierung und Funktionskennzeichnung. Bei der Wahl des Namens ist darauf zu achten, dass nur eine beschränkte Zeichenlänge angezeigt werden kann.

    Technische Vorgaben

    Die Vorlagen für Application Icons werden als 24-Bit-PNG im RGB Farbmodus erstellt. Diese werden von den einzelnen Betriebssystemen unterschiedlich behandelt.

    Achtung: Da iOS den Icons automatisch abgerundete Ecken hinzufügt, müssen die Icons mit 90° Ecken erstellt werden.

    Android nimmt keine Veränderungen an den Vorlagen zur Darstellung des App Icons vor. Damit das Erscheinungsbild in Android und iOS identisch ist, werden Vorlagen mit runden 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 Icons werden für jedes Betriebssystem eigene Vorlagen benötigt. Alle Vorlagen erhalten Sie vom Team Corporate Design.

    Das Betriebssystem Android unterteilt die Abbildungsgrößen eines Icons nach Einsatzzweck und Pixeldichte der Bildschirme in Stufen. Für jede Abstufung muss eine optimierte Vorlagendatei in der App hinterlegt werden.

    Das Betriebssystem iOS benötigt für jede Abbildungsgröße des App Icons eine eigene pixeloptimierte Vorlagendatei um die 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öste Vorlagen in CMYK zur Verfügung gestellt.

    Sonderfall S-Bahn-Apps

    Apps für die S-Bahn werden mit dem S-Bahn-Zeichen im Logobereich gekennzeichnet. Die regionale Unterscheidung erfolgt über den App-Namen. Der Funktionsbereich erhält die rote Farbkennung des Personenverkehrs.

    Versionen für den Druck

    Für die Marketingkommunikation stehen Ihnen hier hochaufgelöste Versionen der Application Icons zum Download zur Verfügung:

    Download: DB_APP_Icons_4c_305dpi Dateiformat: ZIP Dateigröße: 26.4 MB

    Splash Screen

    Der Splash Screen ist der zweite visuelle Eindruck, den ein Nutzer von einer App erhält. Es signalisiert den Programmstart und dient zur Überbrückung der Ladezeit. Entsprechend wichtig ist hier eine gute Markenpräsenz. In Ausnahmefällen und nur bei wenig Platz kann auf den Einsatz des DB Winkels verzichtet werden. Ist die Ladezeit beendet, wird der Splash Screen durch die erste Seite ersetzt. Optimal ist eine visuelle Ähnlichkeit beider Seiten.