10 witryn wykonujących nawigację pionową w prawo
Większość menu nawigacji internetowej jest wyświetlana poziomo na całej stronie. Wynika to z historii tradycyjnych monitorów, które są szersze niż wyższe.
Ale dzięki tak dużej ilości miejsca na ekranie możliwe jest teraz korzystanie z pionowych menu nawigacyjnych. I wiele z nich wygląda fantastycznie.
Te 10 przykładów menu wertykalnych doskonale nadaje się do nauki unikalnego stylu projektowania i wyraźnej użyteczności.
1. Petersham Nurseries
Na Petersham Nurseries stronę znajdziesz zagnieżdżoną nawigację pionową. Ta technika nie jest czymś, co można znaleźć bardzo często, ale działa dobrze na tej stronie.
Każdy główny odnośnik nav używa ikony w tle, aby wizualnie przekazać linki. A pierwsze dwa łącza otwierają podmenu wyrównane obok głównego menu. Zajmują one miejsce menu rozwijanych, które zazwyczaj widzisz w poziomych menu.
Ta strona jest responsywna, więc w mniejszych rozmiarach te linki znikają za menu hamburgera. Stwarza to rozsądną różnicę między użytkownikami komputerów stacjonarnych z wystarczającą ilością miejsca dla linków pionowych, a użytkownikami mobilnymi, którzy radzą sobie lepiej z poziomym paskiem nawigacyjnym.
2. Restauracja Arbour
Innym bardzo wyjątkowym przykładem jest Restauracja Arbour który ma czystą pionową nawigację z dużą ilością miejsca między linkami. Treść pojawia się w przesuwanym pojemniku, który wyrównuje się w pionie obok nawigacji.
Ten styl zawartości jest dość wyjątkowy. Większość pionowych stron nawigacyjnych zachowuje zgodność z treścią strony głównej, ale w tym przypadku możesz łatwo pokazać / ukryć zawartość. Dodaje pewną swobodę do pionowej nawigacji, która utrzymuje płynność strony z zawartością.
3. Smokey Bones
Smokey Bones ma dwie rzeczy: wspaniałe jedzenie i zabójczą stronę internetową.
Każda strona korzysta z długiej pionowej nawigacji ustawionej po lewej stronie. Jest to podstawowe dla większości stron internetowych, ponieważ większość zachodnich czytelników zajmuje się treściami od lewej do prawej, a lewy górny róg jest tradycyjnym miejscem na logo witryny.
Jedną z dodanych funkcji, którą lubię, jest menu z listą wszystkich dań w restauracji. Po kliknięciu linku "menu" zobaczysz, jak to działa, podobnie jak podmenu dodane pionowo. Zdecydowanie fajny pomysł, który działa dobrze na małej restauracji.
4. Mammoth Media
Kiedy masz mniej treści, możesz uciec z bardziej nietypowymi możliwościami nawigacji. Mammoth Media to dobry przykład, który ma tylko pięć głównych stron na swojej stronie oraz blog.
Jednym z aspektów tej nawigacji jest ukryta funkcja rozwijania. Jeśli klikniesz link "praca", uzyskasz 2 alternatywne linki, które możesz kliknąć. Pojawiają się one pod głównym linkiem, więc przyjmują rolę mniejszego rozwijanego menu.
Nawet na urządzeniach mobilnych ta nawigacja przebiega w podobnym stylu. To dowód na to, że jeśli nie masz zbyt wielu linków, możesz naprawdę pobudzić kreatywność.
5. Amazon
Wszyscy i ich babcia wiedzą o Amazon. Sklep internetowy ma niesamowity wybór, ale ma też fantastyczny wygląd interfejsu użytkownika pionowe linki nawigacyjne na stronach wyszukiwania produktów.
Amazon ma dziesiątki kategorii dla każdego wyszukiwanego hasła. Oznacza to, że potrzebują sposobu na przedstawienie udoskonalonych funkcji wyszukiwania bez przepełnienia strony. Nawigacja w pionie ma sens tylko dlatego, że mogą schować się na boki, będąc w pełni dostępnym.
Jeśli projektujesz podobny filtr filtracyjny, zdecydowanie polecam studiowanie strategii Amazon. Zoptymalizowali swoją witrynę do końca, więc istnieje wiele powodów, aby wierzyć, że ich pionowe linki do sortowania działają dobrze.
6. Corum
Corum's Strona internetowa ma inną czystą nawigację pionową, z bardzo prostymi funkcjami. Łącza z dużymi literami, ciemny tekst, jasne style zawisu i silny kontrast względem strony głównej.
Jest to jeden z największych aspektów podczas projektowania nawigacji pionowej. Zazwyczaj chcesz utworzyć wyraźny podział między pionowym paskiem nawigacyjnym a treścią strony. W tym przypadku odbywa się to przy użyciu jaśniejszego koloru tła z logo Corum u góry.
Zamiast tego użytkownicy mobilni reagują na menu rozwijane, które sprawdza się jako alternatywa dla ekranów dłuższych niż szerszych.
7. Nua Bikes
Jednym z najlepszych sposobów korzystania z nawigacji pionowej jest układ jednej strony. Strony informacyjne, takie jak Nua Bikes nie zawsze potrzebują dziesiątek stron pełnych treści.
Dzięki pionowemu menu nawigacji znacznie łatwiej jest przeglądać treści na podstawie animacji i niestandardowych obszarów strony. W tym przypadku nawigator Nua Bikes wtapia się w stronę, ponieważ jest bezpośrednio powiązany z całą zawartością tej strony.
8. Michael Ngo
Kolejną stroną, która podąża za trendem pionowej nawigacji w jedną stronę, jest Portfolio Michaela Ngo .
Ma dość porywający obraz nagłówka, który natychmiast przyciąga twoją uwagę i przyciąga cię. Ale treść jest najciekawszą częścią, ponieważ wszystko działa poprzez 3 różne linki: dom, praca i kontakt.
Łącza nawigacyjne mają również własne napisy, dzięki czemu można zobaczyć, co robią, nawet na pierwszy rzut oka.
Należy zwrócić uwagę na to, jak nawigacja pozostaje niezmieniona podczas przewijania strony. Dzięki temu wszystkie łącza są dostępne z dowolnego punktu, który ma kluczowe znaczenie w mniejszym menu pionowym.
9. Medienstadt.koeln
Niemiecka strona Medienstadt.koeln ma zupełnie inne podejście do nawigacji pionowej. Ich nawigacja pozostaje ukryta za menu hamburgera przez cały czas, ale nadal obejmuje całą wysokość ekranu.
Zawiera również więcej linków niż typowy górny poziomy układ nawigacyjny. Ma to sens, ale może być mylące dla niektórych odwiedzających.
To, co najbardziej podoba mi się w stylu pionowym, to fakt, że pozostaje on schowany nawet na komputerach stacjonarnych, dopóki nie będzie potrzebny.
Oczywiście są debaty wykrywalność z menu hamburgera. Ale myślę, że ta ikona szybko staje się rozpoznawalna i ten projekt jest doskonałym przykładem ukrytej pionowej nawigacji w akcji.
10. System Metrick
Agencja reklamowa System Metrick utrzymuje ich nawigację prostą i do rzeczy. Podąża za stylem pionowym, ale różni się znacznie od wszystkich pozostałych w tym poście.
Lubię ukryte menu, które pokazuje tylko dodatkowe linki po kliknięciu linku głównego. Ich link "dziennik" jest dobrym przykładem. Nowe linki są wyświetlane z boku i pojawiają się za jednym kliknięciem.
Użytkownicy mobilni mają podobne doświadczenia, z wyjątkiem tych podmenu pod linkiem głównym. Ale ta nawigacja jest tak mała, że może działać prawie dla każdego rozmiaru ekranu.
Podsumowanie
Nawigacja w pionie działa najlepiej w witrynach, które korzystają z dodatkowego miejsca na ekranie. Zazwyczaj obejmują one witryny portfolio, restauracje, małe firmy i sklepy e-commerce.
Ale niezależnie od strony zawsze możesz spróbować dodać pionową nawigację do swojego projektu. Mam nadzieję, że te przykłady pozwolą Ci zacząć od świetnych pomysłów na projekt szkieletowy i makietę.