Zurück zur Übersicht

Animation und Transitionen

Die Scout App verwendet Lösungen, die auf den Vorgaben des Styleguides basieren.

Popups und Einstellungsmenü

Animation „Anzeigen“

Für Popups und das Einstellungsmenü gilt: Das Element gleitet vom unteren Rand des Bildschirms in die Zielposition.

Popups und Einstellungsmenü  

Wireframes: Scout-App

Animation „Verstecken“

Die Elemente verschwinden durch einen fließenden Fade-out-Effekt. Hier wird keine Bewegung verwendet.

Aktualisierung

Aktualisierung  

Aktivitätsindikator

Während des Downloads von Aktualisierungen wird der Aktivitätsindikator angezeigt.

Der Abschnitt Überbrückung von Wartezeiten unterscheidet unterschiedliche Arten solcher Anzeigen.

Panning-Area auf dem Startbildschirm

 Panning-Area auf dem Startbildschirm  

Panning-Area auf dem Startbildschirm

Die Panning-Area im oberen Bereich der Startseite erlaubt das Scrollen von Elementen von links nach rechts und umgekehrt.

Kategorienseiten

Kategorienseite mit geöffneter Navigation  

Kategorienseite mit geöffneter Navigation

Die Menü-Buttons in der linken Navigation werden nacheinander ausgewählt:

  • Der Effekt geht von oben nach unten. Unten angekommen rotiert er zurück zum Anfang.
  • Bei jeder Auswahl wird das entsprechende Produkt im Inhaltsbereich angezeigt.
  • Die erscheinen durch einen Fade-in-Effekt und werden mit einem Fade-out ausgeblendet.
  • Ein Zeitversatz gewährleistet, dass Inhalte lange genug angezeigt werden, damit sie vom Nutzer gesehen werden.

Slide-Decks

Slide-Decks unterstützen horizontale Wischgesten. Das Wischen wechselt zwischen den verschiedenen Slides des Stapels. Stellen Sie sicher, dass die Slides dem Finger folgen, während die Geste ausgeführt wird. Das schließt ein:

  • Wischgeste von rechts nach links: die aktuelle Seite gleitet nach links und verschwindet. Die neue Seite wird von rechts auf den Bildschirm bewegt.
  • Dasselbe in umgekehrter Richtung.
Slide-Decks  

Wireframes: Scout-App

Menüs

In der Scout App werden Menü-Buttons auf zweierlei Art animiert.

Beispiel 1: Navigationsmenü, links:

  • Wenn Nutzer eine Ebene tiefer navigieren, dann gleitet die aktuelle Gruppe der Menüeinträge nach links aus dem Bildschirm. Die neuen Einträge gleiten von rechts an die finale Position.
  • Beim Navigieren in eine höhere Ebene verläuft die Animation umgekehrt.
  • Mehr dazu im Abschnitt Buttons und weiter unten.
Menüs  

Wireframes: Scout-App

Beispiel 2: Einstellungsmenü:

  • Öffnen Nutzer das Einstellungsmenü und wechseln eine Ebene in die Tiefe, dann schiebt sich die aktuelle Ansicht nach links heraus aus dem Dialog. Währenddessen gleitet der neue Inhalt von rechts herein.
  • Wenn Nutzer nach oben navigieren, wird die Transition umgekehrt verwendet.

 

Menüs  

Wireframes: Scout-App


Zurück zur Übersicht
Best Practice – Scout App

PHOENIX CONTACT
GmbH & Co.KG

+49 5235 3-43862

Ulrich Becker

Information Architect