Komponenten

Navigation

Die Navigations-Komponenten in diesem Guide können und sollten an die Anforderungen und Bedürfnissen der jeweiligen Website oder App angepasst werden. Die hier gezeigten Beispiele dienen als Inspiration, stellen aber nicht alle möglichen Optionen dar.

Navigation
  • Anwendung
  • Beispiele
  • Download

Anwendung

Websites

In Websites und Web-Anwendungen haben sich vielerlei Navigationsmuster etabliert. Wählen Sie daher die Navigation aus, die am besten zu der Art und der Architektur der Website oder Web-Anwendung passt.

 

  • Eine Top Bar Navigation verschafft Besuchern einen schnellen Überblick über die Hauptbereiche einer Website. Flyout Menus hingegen ermöglichen eine tiefergehende Interaktion. Flyouts können vom Viewport mit Mega-Flyouts bis hin zu einfachen Dropdown Menüs reichen.

  • Mit einem Side Drawer Menu können Nutzer schnell von einer Position in der Website-Struktur zu einer anderen springen.

  • Eine vertikale Tab Bar spart Platz und ist vor allem für Web-Anwendungen eine gute Wahl.

  • Ein fixierter Menu Button sorgt für ein unkonventionelleres und interaktiveres Nutzererlebnis.

  • Auf kleineren Geräten mit begrenztem Platz kann die Navigation hinter einem Burger Menu Button versteckt werden.

Top Bar Navigation mit geöffneter Flyout Navigation auf mehreren Ebenen.

Top Bar Navigation mit geöffnetem Mega-Flyout.

Side Drawer Navigation, die sich schließen lässt.

Navigation über eine vertikale Tab Bar auf Verlaufshintergrund.

Fixierter Menu Button, über den ein Drawer oder Flyout geöffnet werden kann.

Versteckte Navigation hinter einem Burger Menu Button auf der linken Seite.

Versteckte Navigation hinter einem Burger Menu Button auf der rechten Seite.

Top Drawer Navigation, die über einen Burger Menu Button geöffnet wird.

Ein Flyout Menu, das über einen Burger Menu Button auf der linken Seite geöffnet wird.

Apps

Die häufigste Top Level Navigation für Smartphone- oder Tablet-Apps ist die Bottom Tab Bar mit drei bis fünf Tabs für Smartphones bzw. einigen weiteren Tabs für Tablets. Ist eine Tab Bar nicht geeignet, bilden Sie die App-Struktur durch einen Side Drawer oder einen Bottom Drawer ab. Ein Overflow Menu ist ebenfalls möglich. Side Drawers sind in iOS unüblich und deshalb in diesem Betriebssystem zu vermeiden. Die Tab Bar sowie die Side Drawers und die Bottom Drawers können entweder in Weiß gehalten sein oder den postgelben Verlauf aufweisen.

Siehe auch:

Bottom Tab Bar mit Beschriftungen auf weißem Hintergrund.

Bottom Tab Bar mit Beschriftungen und der maximalen Anzahl an Tabs auf einem Hintergrundverlauf.

Bottom Tab Bar ohne Beschriftungen auf weißem Hintergrund.

Bottom Tab Bar ohne Beschriftungen auf einem Hintergrundverlauf.

Auf Tablets können die App-Beschriftungen in Tab Bars neben dem jeweiligen Icon vertikal zentriert werden.

App-Header mit Burger Menu Button zum Öffnen eines Side Drawers.

Großer App-Header mit Burger Menu Button zum Öffnen eines Side Drawers.

Bottom Bar einer App mit Burger Menu Button zum Öffnen eines Side Drawers oder eines Bottom Drawers auf weißem Hintergrund.

Bottom Bar einer App mit Burger Menu Button zum Öffnen eines Side Drawers oder eines Bottom Drawers auf einem Hintergrundverlauf.

Geöffnete Side Drawer Navigation.

Geöffnete Bottom Drawer Navigation.

Beispiele

Download

Wenn Sie ein Dokument herunterladen, akzeptieren Sie unsere Nutzungsbedingungen.

Sketch UI Library
ZIP
85,98 MB