10 Seiten, die vertikale Navigation nach rechts machen
Die meisten Webnavigationsmenüs fließen horizontal über die Seite. Dies ergibt sich aus einer Geschichte traditioneller Monitore, die eher breit als größer sind.
Aber bei so viel Platz auf dem Bildschirm können Websites jetzt stattdessen vertikale Navigationsmenüs verwenden. Und viele von ihnen sehen fantastisch aus.
Diese 10 Beispiele von vertikalen Menüs sind perfekt, um den einzigartigen Designstil und die ausgeprägte Benutzerfreundlichkeit zu studieren.
1. Petersham Baumschulen
Auf der Petersham Baumschulen Website finden Sie eine verschachtelte vertikale Navigation. Diese Technik wird nicht oft gefunden, aber auf dieser Seite funktioniert sie gut.
Jeder Hauptnavigationslink verwendet ein Symbol im Hintergrund, um die Links visuell zu vermitteln. Und die ersten beiden Links öffnen Untermenüs, die neben dem Primärmenü ausgerichtet sind. Diese ersetzen die Dropdown-Menüs, die Sie normalerweise auf horizontalen Menüs sehen.
Diese Seite ist reaktionsfähig, so dass diese Links bei kleineren Größen hinter einem Hamburger-Menü verschwinden. Dies schafft eine vernünftige Trennung zwischen Desktopbenutzern mit ausreichend Platz für vertikale Links und mobilen Benutzern, die mit einer horizontalen Navigationsleiste besser umgehen können.
2. Arbor Restaurant
Ein anderes sehr einzigartiges Beispiel ist Arbor Restaurant Das hat ein sauberes vertikales Navigationsgerät mit viel Platz zwischen den Links. Der Inhalt wird in einem verschiebbaren Container angezeigt, der auch vertikal neben der Navigation ausgerichtet ist.
Dieser Content-Stil ist ziemlich einzigartig. Die meisten vertikalen Navigationsseiten halten ihren Inhalt an der Hauptseite ausgerichtet, aber in diesem Fall können Sie den Inhalt leicht ein- / ausblenden. Es verleiht der vertikalen Navigation ein gewisses Flair, das den Schwung der Seite mit dem Inhalt nach unten trägt.
3. Smokey Knochen
Smokey Knochen hat zwei Dinge zu bieten: tolles Essen und eine Killer-Webseite.
Jede Seite verwendet die lange vertikale Navigation auf der linken Seite. Dies ist ein Grundpfeiler für die meisten Websites, da die Mehrheit der westlichen Leser Inhalte von links nach rechts konsumiert, und die obere linke Ecke ist der traditionelle Ort für ein Website-Logo.
Ein zusätzliches Feature, das ich mag, ist das Menü Flyout, das alle Gerichte des Restaurants auflistet. Wenn Sie auf den Link "Menü" klicken, sehen Sie, wie dies auch funktioniert, wie ein vertikal hinzugefügtes Untermenü. Definitiv eine coole Idee, die gut für ein kleines Restaurant funktioniert.
4. Mammutmedien
Wenn Sie weniger Inhalte haben, können Sie mit unkonventionelleren Navigationsoptionen durchkommen. Mammutmedien ist ein gutes Beispiel, das nur fünf Hauptseiten auf seiner Website plus einen Blog hat.
Eine spezielle Facette dieser Navigation ist die versteckte Dropdown-Funktion. Wenn Sie auf den Link "Arbeit" klicken, erhalten Sie 2 alternative Links, durch die Sie klicken können. Sie erscheinen unter dem Hauptlink, so dass sie die Rolle eines kleineren Dropdowns übernehmen.
Auch auf dem Handy folgt diese Navigation einem ähnlichen Stil. Es ist ein Beweis dafür, dass man, wenn man nicht zu viele Links hat, die Kreativität wirklich steigern kann.
5. Amazon
Jeder und seine Oma wissen über Amazon Bescheid. Der Online-Händler hat eine erstaunliche Auswahl, aber sie haben auch ein fantastisches UI-Design mit vertikale Navigationslinks auf Produktsuchseiten.
Amazon hat Dutzende von Kategorien für jeden Suchbegriff. Dies bedeutet, dass sie eine Möglichkeit brauchen, verfeinerte Suchfunktionen zu präsentieren, ohne die Seite zu überladen. Vertikale Navigationen machen nur Sinn, weil sie zur Seite verstaut werden können, während sie immer noch vollständig zugänglich sind.
Wenn Sie eine ähnliche Art von Filtern Nav entwerfen, empfehle ich definitiv, Amazon-Strategie zu studieren. Sie haben ihre Website bis zum Ende optimiert, daher gibt es viele Gründe zu glauben, dass ihre vertikalen Sortier-Links gut funktionieren.
6. Corum
Corum Die Website hat eine weitere saubere vertikale Navigation mit sehr einfachen Funktionen. All-Caps-Links, dunkler Text, klare Hover-Stile und starker Kontrast zur Hauptseite.
Dies ist einer der größten Aspekte beim Entwurf der vertikalen Navigation. Normalerweise möchten Sie eine starke Trennung zwischen der vertikalen Navigationsleiste und dem Seiteninhalt erstellen. In diesem Fall wird eine hellere Hintergrundfarbe mit dem Corum-Logo oben verwendet.
Und mobile reaktionsfähige Benutzer erhalten stattdessen ein Dropdown-Menü, das sich gut als Alternative für Bildschirme eignet, die länger als breit sind.
7. Nua Fahrräder
Eine der besten Möglichkeiten, eine vertikale Navigation zu verwenden, ist ein einzelnes Seitenlayout. Informationsseiten wie Nua Fahrräder nicht immer Dutzende von Seiten voller Inhalt.
Mit einem vertikalen Navigationsmenü ist es viel einfacher, Inhalte mit Animationen und benutzerdefinierten Seitenbereichen zu durchsuchen. In diesem Fall fügt sich das Nua Bikes nav in die Seite ein, da es direkt mit dem gesamten Inhalt dieser Seite verknüpft ist.
8. Michael Ngo
Eine andere Website, die dem vertikalen Trend für einzelne Seiten folgt, ist Michael Ngo's Portfolio .
Es hat ein fesselndes Header-Bild, das sofort Ihre Aufmerksamkeit erregt und Sie anzieht. Aber der Inhalt ist der interessanteste Teil, da alles durch 3 verschiedene Links funktioniert: Home, Arbeit und Kontakt.
Die Nav-Links haben auch ihre eigenen Untertitel, so dass Sie auf einen Blick sehen können, was sie tun.
Eine Sache zu beachten ist, wie das Nav behoben wird, während Sie die Seite nach unten scrollen. Dies hält alle Links von jedem Punkt aus zugänglich, der in einem kleineren vertikalen Menü entscheidend ist.
9. Medienstadt.koeln
Die deutsche Seite Medienstadt.koeln hat eine ganz andere Sicht auf die vertikale Navigation. Ihr Navi bleibt immer hinter einem Hamburger-Menü verborgen, aber es erstreckt sich immer noch über die gesamte Höhe des Bildschirms.
Es enthält auch mehr Links als nur das typische horizontale Navigationsgerät. Dies ist sinnvoll, kann aber für einige Besucher verwirrend sein.
Was ich an dem vertikalen Stil am meisten mag, ist, dass er auch auf Desktops versteckt bleibt, bis er benötigt wird.
Zugegeben, es gibt Debatten über Probleme mit der Auffindbarkeit mit Hamburgermenüs. Aber ich denke, diese Ikone wird schnell erkannt und dieses Design ist ein hervorragendes Beispiel für eine versteckte vertikale Navigation in Aktion.
10. Das Metrick-System
Die Werbeagentur Metrick System hält ihre Navigation einfach und auf den Punkt. Es folgt dem vertikalen Stil, aber es ist auch viel anders als alle anderen in diesem Beitrag.
Ich mag das versteckte Dropdown-Menü, das nur zusätzliche Links anzeigt, wenn auf einen primären Link geklickt wird. Ihr "Journal" Link ist ein gutes Beispiel. Neue Links erscheinen auf der Seite und sie verschwinden mit einem einzigen Klick.
Mobile Nutzer erhalten eine ähnliche Erfahrung, mit der Ausnahme, dass diese Untermenü-Links unter dem Hauptlink erscheinen. Aber dieses Nav ist so klein, dass es für fast jede Bildschirmgröße funktioniert.
Die Zusammenfassung
Die vertikale Navigation funktioniert am besten auf Websites, die auf zusätzlichen Bildschirmbereich angewiesen sind. Dazu gehören in der Regel Portfolio-Websites, Restaurants, kleine Unternehmen und E-Commerce-Shops.
Aber unabhängig von der Website können Sie immer versuchen, eine vertikale Navigation in Ihr Design hinzuzufügen. Und ich hoffe, dass diese Beispiele Ihnen einige gute Ideen für das Wireframing und Mockup-Design geben können.