Eine Complex App erschließt viele Bereiche über mehrere Navigationsebenen aus
globalem Header, Sidebar und Breadcrumb. Das ist die im mStudio typische Form.
Verwende sie, wenn eine flache Navigation nicht mehr ausreicht. Die gestaffelten
Ebenen halten auch eine große Anwendung übersichtlich und zeigen dem Nutzer
jederzeit, wo er sich befindet. Für ein kleines Werkzeug mit wenigen,
gleichrangigen Bereichen genügt eine
Simple App.
Aufbau
Header – Eine HeaderNavigation
trägt die globale Navigationsebene und bereichsübergreifende Funktionen.
Sidebar – Eine Navigation führt durch
die Unterseiten des aktuellen Bereichs.
Content Header – Breadcrumb und
PageTitle (ein Heading der Ebene 1) orientieren
den Nutzer in der Tiefe.
Footer – Hier lassen sich Links platzieren,
etwa Verweise auf Datenschutz oder Impressum.
Auf schmalen Screens ist für Header-Navigation und Sidebar kein Platz. Beide
geben ihre Links an ein OffCanvas ab, das ein
Burger-Menü in der Kopfleiste öffnet.
Varianten und Abwandlung
Detailansicht
Die Detailansicht kombiniert zwei Seitentypen: Über die
Übersichtsseite – eine
List – navigiert man in die Tiefe zu einem einzelnen
Objekt. Breadcrumb und PageTitle helfen bei
der Orientierung; eine TabNavigation
gliedert das Objekt in Unterbereiche.
Eine einfachere Abwandlung ohne globale Objekt-Tiefe: Die
Navigation listet die Bereiche flach, der
Content steht mittig, und rechts führt ein eigenes Inhaltsverzeichnis („Auf
dieser Seite") durch die Abschnitte der Seite. Dieser Styleguide selbst folgt
dem Muster.
Button
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Colors
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Light und Dark
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Sizes
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Variants
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.