Direkt zum Inhalt
Modules
Interaktion und Animation
 

Der Charakter von Bewegungen gehört ebenso zum Ausdruck des Erscheinungsbildes der DB wie die Art und Weise einer Interaktion
mit dem Kunden. Animierte und interaktive Elemente sind daher ein
wichtiger Bestandteil der digitalen Inhaltsvermittlung und finden sich
z.B. in Web-Menüs, AV-Elementen in Videos, App-Designs, GUIs und
E-Learnings wieder.

Eine einheitliche Gestaltung mit wiedererkennbaren Elementen und aufeinander abgestimmten Verhaltensweisen sind hierbei die Voraussetzung für eine intuitive Benutzerführung, eine leichte Orientierung und eine hohe Kundenzufriedenheit.

 
 
Wenn Sie Fragen zum Inhalt dieser Seite haben, so schreiben Sie bitte eine

 
Auf einen Blick:
 

Look & Feel

 
 

Beispielhafte,
animierte AV-Elemente

 

Beispielhaftes
Pop-up-Fenster

 

Beispielhaftes
Hover Overlay

 

Beispielhaftes
Drop-down-Menü

 
 

Die DB tritt kundennah, partnerschaftlich, glaubwürdig und vertrauenswürdig auf. Der Auftritt ist einheitlich und allgemein verständlich. Gemäß dieser Haltung und der DB Designstrategie zeichnen sich Animationen und Interaktionsprinzipien bei der DB durch folgende Attribute aus:

  • intuitiv, selbsterklärend und unkompliziert

  • einfach, klar und reduziert

  • dynamisch ohne hektisch zu wirken

  • zeitgemäß und modern, fortschrittlich und innovativ

  • an natürlichen Sehgewohnheiten orientiert


Eine markengerechte Gestaltung wird zudem durch den konsequenten Einsatz der DB Basiselemente garantiert.
 
 
Gestaltungsprinzipien:
 
DB Unternehmensfarben
 
UX DB Unternehmensfarben

Gezielt gesetzte Farbakzente bieten sich im Screenbereich zur Verdeut­lichung von User-Aktionen oder als Orientierungshilfe an. Hierfür wird die DB Farbpalette eingesetzt. Darin stehen verschiedene Farbabstufungen zur Verfügung um Objektzustände (z.B. den inaktiven und aktiven Status innerhalb einer Navigation oder eines Buttons) zu differenzieren.
Die Farbtöne der DB Sekundärfarben sind gezielt zu verwenden und dürfen das Erscheinungsbild nicht dominieren.
 
Weitere Informationen:

 
 
DB Type, DB Icons und DB Interaktionselemente
 
UX Animationen Icons

Für eine optimale Erkennbarkeit im Screenbereich werden stets die Webfonts der DB Type, die CD-gerechten DB Icons und die DB Interaktions-elemente eingesetzt.
Textbausteine müssen immer ausreichend groß und in gemischter Schreibweise abgebildet werden, um eine optimale Lesbarkeit zu garantieren.

Grundlagen für gelungene Umsetzungen sind ein klarer, grafischer Aufbau, ausreichende Kontraste, eine gute Erfassbarkeit sowie ein reduzierter, plakativer Gesamteindruck. Zur Steigerung der Benutzer­freundlichkeit sollten Menütiefen dabei stets so gering wie möglich sein.

Weitere Informationen:

 
 
Transparenzen
 
  Drop-Down-Menü

Drop-Down-Menü

Durch den Einsatz von Transparenzen kann die Bild- und Textebene eng miteinander verknüpft werden. Transparenzen können bspw. für Funktionselemente, Drop-down-Menüs oder Hover Overlays verwendet werden.

 
    DB Transparenzen

DB Transparenzen

Die markenspezifischen
DB Transparenzen mit leichtem Verlauf eignen sich für animierte, plakative und imageprägende Anwendungen – z.B. für kurze Textbausteine auf Keyvisuals von Websites oder in AV-Anwendungen.
 
 

Weitere Informationen und Farbvorgaben:

 
 
Textbausteine
 
   Hover Overlay

Hover Overlay

Hover Overlays und Pop-up-Fenster
Hover Overlays und Pop-up-Fenster bieten die Möglichkeit, zusätzliche textliche Informationen nur bei Bedarf abrufbar zu machen, bspw. wenn der Mauszeiger über den entsprechenden Bildabschnitt gleitet. Textinhalte lassen sich damit plakativ und faszinierend aufbereiten. Zudem tragen diese Bausteine positiv zu einer Hierarchisierung der Information bei.

 
UX Animationen Fenster

Textbausteine können animiert in interaktiven Anwendungen eingesetzt werden. Die Standard-Ausrichtung der Typografie ist dabei linksbündig.

Wichtig ist, dass Ein- und Ausblendungen der Elemente nicht visuell überladen sind. Einfache Animationen sind gewünscht – verspielte, übertriebene Effekte sollten vermieden werden.

Das Scrollen von Texten in Pop-up-Fenstern ist möglich – im Screenbereich sollten Texte medienbedingt jedoch stets so kurz wie möglich gehalten werden.

 
 
Animationsprinzipien
 
UX Animationen Prinzipien 1

Bevorzugt: horizontale Animationen
Animationen bei AV-Elementen in Videos erfolgen, auf Basis der betonten Horizontalen, bevorzugt von links nach rechts. Hiermit wird das Thema Fortbewegung visuell zum Ausdruck gebracht.

Kommen dabei DB Transparenzen zum Einsatz, so
verstärkt ein leicht zeitversetztes Einblenden der beiden Flächen diesen Effekt.

Die Animationsgeschwindigkeit ist stets schnell und
dynamisch ohne hektisch anzumuten.

Weitere Informationen:
 
  Leicht versetztes Fade-in

Leicht versetztes Fade-in

 
  Leicht versetztes Fade-out

Leicht versetztes Fade-out

 
UX Animationen Prinzipien 4

Vertikale Animationen
Der Aufbau der Flächen erfolgt bei Menüs oder Hover Overlays – mit meist mehrzeiligem Text – gemäß dem Textaufbau stets vertikal.

 
 

Dynamische Bewegungsabläufe

 
UX Animationen Prinzipien 5

Die Animationsgeschwindigkeit von Elementen nimmt beim Einblenden exponentiell ab, d.h. das Element bremst weich ab.
Beim Ausblenden nimmt die Geschwindigkeit hingegen exponentiell zu. Das Element beschleunigt.
Diese Be- und Entschleunigung lässt Animationen dynamisch und den Ablauf besonders natürlich erscheinen. Das
für die DB typische Gestaltungsthema „Fortbewegung“ wird hierdurch positiv unterstützt.

 
 
Technische Vorgaben
 

„Title Safe“ Bereich bei AV-Produktionen

 
   iOS (Player-Bar oben und unten im „Title Safe“ Bereich)

iOS (Player-Bar oben und unten im „Title Safe“ Bereich)

 
   YouTube (Player-Bar unten im „Title Safe“ Bereich)

YouTube (Player-Bar unten im „Title Safe“ Bereich)

Die gängigsten Videoplayer auf Mobilgeräten und im Web nutzen
für ihre Bedienelemente den sog.
„Title Safe“ Bereich aus gebräuchlichen Broadcast-Standards.
Bei der Platzierung von AV-Elementen ist daher ein Schutzraum von mindestens 20% des Filmformats
einzuhalten. 


Der Standard für Filmformate ist
16:9 Full HD, 25 fps.

 
 
veröffentlicht:
15.02.2017