UI Elements | M335 - Mobile-Applikation realisieren

Tabs werden verwendet um auf dem Toplevels zu navigieren, in diesem Fall haben wir 3 verschiedene Seiten.

Sidemenüs werden verwendet um die Navigation auf mobilen Geräten möglichst effizient einzubauen. Im Vergleich zu Tabs gibt es hier mehr Platz um Verlinkungen zu platzieren. Wie du im Beispiel siehst, ist ein Sidemenu ebenso genial um ein Logo oder einen Logout Button zu platzieren.

Beachte dennoch dass aus der Usability Sicht maximal 7 Links verwendet werden sollten. Weniger ist mehr!

Formular Felder sind grundsätzlich einfach zu erstellen und der Sinn von jedem Element ist sehr schnell ersichtlich. Im Beispiel siehst du wie Input Felder, Dropdown Felder, Links und Buttons erstellt werden. Wichtig ist bei jedem Template, dass die Buttons von den Input Feldern unterschieden werden können.

Diese Darstellung ist nützlich, wenn man Bilder oder Karten als Slides präsentieren möchte. Um die Funktionalität der Elemente zu verdeutlichen, sollten Steuerelemente wie Pfeile an den Seiten oder Punkte am unteren Rand integriert werden.

Bei der Darstellung von Listen sind bestimmte Schlüsselelemente wichtig. Oben rechts findet sich ein "Hinzufügen"-Knopf, um neue Einträge zu erstellen. Aufgrund des begrenzten Platzes auf mobilen Geräten ist es oft nicht möglich, sowohl Bearbeiten- als auch Löschen-Funktionen für jedes Element direkt einzublenden. Deshalb ist es gängige Praxis, diese Funktionen über eine Wischgeste zugänglich zu machen.

Overlays sollten verwendet werden um Elemente zu erstellen, zu editieren oder einen Bestätigungsdialog für den Löschvorgang anzuzeigen. Beachte bitte, dass unterhalb eines Dialoges der Hintergrund schraffiert oder ausgegraut dargestellt werden sollte.