Navigation
Die Navbar ist die primäre Navigation jeder Anwendung und ist die Basis für ein einheitliches Produktdesign.
Nutzen
Einheitlich muss immer ein Branding mit invertiertem Logo vorhanden sein. Die Hintergrundfarbe (Primäre Farbe) wird durch das CI der Anwendung bestimmt, auf korrekten Kontrast zwischen Schrift und Hintergrund ist zu achten.
Die Navbar wird fix am obersten Bildbereich positioniert und ist jederzeit bedienbar.
Navbar | Wert |
---|---|
Höhe | 56px |
Breite | 100% |
Abstand oben/unten | 8px/8px |
Abstand links/rechts | 16px/16px |
Schatten/unten | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); |
Branding
Das Logo der Anwendung wird stets linksbündig mit einer maximalen Höhe von 34px vertikal zentriert platziert. Logos müssen in Volltonfarbe eingebunden werden, auf korrekten Kontrast zwischen Logo und Hintergrund ist zu achten.
Hintergrund | Farbwert / Opacity |
---|---|
Dunkel | #FFFFFF / 90% |
Hell | #000000 / 80% |
Abstände & Größen | Wert |
---|---|
Links/Rechts | 0/8px |
Oben/Unten | 3px |
Größe | Höhe 34px / Breite proportional |
Text-Link
Text-Links werden in Roboto 16px/Regular dargestellt. Die Schriftfarbe wird durch den Status und Hintergrund der Navbar bestimmt, auf korrekten Kontrast zwischen Schrift und Hintergrund ist zu achten.
Hintergrund | Farbwert |
---|---|
Dunkel | #FFFFFF |
Hell | #000000 |
Status | Opacity |
---|---|
Default | 50% |
Hover | 75% |
Active | 100% 90 % |
Abstände & Größen | Wert |
---|---|
Links/Rechts | 8px |
Oben/Unten | 8px |
Größe | 16px Roboto Regular |
System-Icons
Im Bereich der Navbar dürfen keine Icons platziert werden, auch nicht in Kombination zu Text-Links. Davon ausgeschlossen sind klar definierte System-Icons, welche mit fester Position und Funktion definiert sind.
Icons werden in der standard Größe von 24px x 24px
Icon | Funktion |
---|---|
Responsive Menü | |
Globale Suche | |
Widget Menu |
Abstände & Größen | Wert |
---|---|
Links/Rechts innen | 4px |
Links aussen | 8px |
Oben/Unten | 8px |
Größe | 24px x 24px |
Avatar
Das personalisierte Benutzerbild muss mindestens in doppelter Auflösung implementiert werden und auf das Format 40px x 40px skaliert und beschnitten werden. Die doppelte Auflösung gewährleistet eine gute Darstellung auf Retina Displays. Benutzerbilder werden immer in runder Form dargestellt.
Abstände & Größen | Wert |
---|---|
Links/Rechts | 8px / 0 |
Oben/Unten | 0 |
Größe | 40px x 40px |
Suchfunktion
Die globale Suchfunktion wird über das festgelegt System-Icon aufgerufen, hierbei verschwindet die Hauptnavigation aus dem Fokus. Das Suchfeld muss ohne weiteren Klick nutzbar sein (Focus).
Suchergebnisse
Die Suchergebnisse werden über ein individualisiertes Dropdown ausgegeben und in drei Suchkomponenten gegliedert.
(1) Kategorie Titel, (2) Suchelement, (3) Aktion's Schaltflächen.
Responsive Menü
Hauptnavigationspunkte werden ab dem Breakpoint Large (991px) mit der Bezeichnung "Menü" Gruppiert. Die Navbar System Icons und das Avatar bleiben auf Ihrer Position.
Overlay Menü
Die Gruppierte Hauptnavigation wird in einem Overlay-Menü angezeigt.