Kurt Heppke

Android UI Patterns: Dashboard, Action Bar und QuickActions

Das ist ein Beispielshop für Android. Die Anwendung verwendet die Elemente Splash, Dashboard, Action Bar und QuickActions als Android Design Muster.
Im Dashboard ist eine Animation eingebaut. Die Artikel in “Figuren A” und “Figuren B” sind lokal gespeichert, funktionieren also auch ohne Netzverbindung. “Figuren C” und “Figuren D” werden “‘over the air’” geladen, in Form von Endlos-Listen, das heißt, es wird gerade geladen, was der Anwender mit seinem Scrollverhalten bestimmt.

Die Anwendung kann im Android market kostenlos heruntergeladen werden:logo-market

 

 

 

Das Dashboard

Das Dashboard ist der Willkommensbildschirm der Anwendung. Es stellt einen Startpunkt für den Anwender zur Verfügung. Ein Dashboard kann auch dynamisch sein, etwa im Zusammenspiel mit Live-Wallpapers oder so, daß der Inhalt verändert wird (z. B. neue Elemente werden hinzugefügt).

Dieser Startpunkt teilt die Anwendung in Kategorien ein, die durch ein Icon und einen Titel repräsentiert sind und von hier aus gestartet werden.Diese Art des Layouts erlaubt es dem Anwender den gesuchten Inhalt schneller zu finden.

Screenshot_01

Genau übersetzt ist ein Dashboard ein Armaturenbrett, und als solches soll es ja auch dienen: von hier aus werden die einzelnen Programmteile aufgerufen. In diesem Fall starten man von hier aus 4 verschiedene Kategorien von Artikeln. Die unteren 3 Köpfe haben keine Funktion sondern sind Teil einer Animation.

 

Die Action Bar

Sie befindet sich oben im Bildschirm und stellt eine Möglichkeit der Navigation und der Hervorhebung von gerade aktuellen Funktionen zur Verfügung.

Sie muß nicht notwendigerweise die Titelbar ersetzen, da diese Informationen für den Anwender auch während der Bedienung der Anwendung wichtig sind.

Im Bild oben wird über die Action Bar ein “quick link“ durch das Tippen auf das Logo aufgerufen.

device-2011-08-17-154218 Screenshot_03

Im Beispielshop ermöglicht die Action Bar in der Liste (links) die schnelle Navigation zum Dashboard und in der Artikeldarstellung (rechts) auch das Zurückgehen zur Liste, den Aufruf von QuickActions und das Weitergehen in der Anwendung.

QuickActions

QuickActions kann man von überall aus aufrufen. Sie stellen Funktionsaufrufe zur Verfügung, die aus Platzmangel sonst nicht dargestellt werden könnten.

Screenshot_13

Hier werden die E-Mail-Funktion, die Sozial-Weitergabe-Möglichkeiten und das Speichern aufgerufen:

Screenshot_14 device-2011-08-06-132247

 

Seitliche Bildschirmübergänge

Das ist ja nicht gerade ein offizielles Designmuster, aber die Art, wie man mit einem horizontalen Scrollen den Bildschirm seitlich verschiebt ist Android-typisch. Schon der Home-Screen hat diesen Bildschirmübergang.

In meinem Beispiel kommt man damit vom Bild zur Variantenauswahl – hier einfach verschiedene Rahmen.

device-2011-08-06-132301 device-2011-08-06-132922 device-2011-08-06-132930

 

Der Layout-Konfigurator

Noch ein Blick auf die leicht verbesserte Darstellung des Eclipse-Plugins zur Erstellung der Oberflächen, die ja langsam schon manches darstellen kann. Das Plugin ist zwar verbessert worden, ist aber bei weitem noch nicht gut.  Das Erstellen von Oberflächen im Android ist immer noch ein Gräuel.

Screenshot_1