10 lokalit dělá vertikální navigaci vpravo
Většina webových navigačních menu proudí horizontálně po celé stránce. Toto pochází z historie tradičních monitorů, které jsou spíše širší než vyšší.
Ale s tolika obrazovkami na obrazovce je nyní možné, aby webové stránky místo toho používaly vertikální navigační nabídky. A mnoho z nich vypadá fantasticky.
Tyto 10 příkladů vertikálních menu jsou ideální pro studium unikátního designu a výrazné použitelnosti.
1. Školky Petersham
Na Petersham Nurseries webové stránky najdete vnořené vertikální navigace. Tato technika není něco, co najdete velmi často, ale na této stránce funguje dobře.
Každá hlavní linka nav použije ikonu v pozadí pro zobrazení vazeb vizuálně. A první dva odkazy otevřou podnabídky zarovnané vedle hlavní nabídky. Ty nahradí dropdowny, které obvykle vidíte na horizontálních nabídkách.
Tato stránka reaguje tak, že v menších rozměrech tyto odkazy zmizí za nabídkou hamburgerů. To vytváří přiměřené rozdělení mezi uživatelům stolního počítače s dostatečným prostorem pro vertikální odkazy a mobilními uživateli, kteří s horizontálními navigačními panely lépe lépe.
2. Restaurace Arbor
Dalším velmi jedinečným příkladem je Arbor Restaurace který má čistou vertikální navzdušňovací jednotku se spoustou prostoru mezi spoji. Obsah se objevuje v posuvném kontejneru, který je také vertikálně zarovnán vedle navigace.
Tento styl obsahu je zcela unikátní. Většina vertikálních webových stránek udržuje jejich obsah v souladu s hlavní stránkou, ale v tomto případě můžete obsah snadno zobrazit / skrýt. Přidává určitou vkus do vertikální navigace, která udržuje hybnost stránky plynoucí z obsahu.
3. Smokey Bones
Smokey Bones má dvě věci pro to: úžasné jídlo a vrah webových stránek.
Každá stránka používá dlouhou vertikální navigaci upevněnou na levé straně. Toto je základ pro většinu webových stránek, protože většina západních čtenářů konzumuje obsah zleva doprava a levý horní roh je tradičním místem pro logo webu.
Jednou přidanou funkcí, kterou se mi líbí, je menu s výpisem všech pokrmů v restauraci. Pokud kliknete na odkaz "menu", uvidíte, jak to také funguje jako vedlejší menu přidané vertikálně. Určitě skvělá myšlenka, která funguje dobře pro malou restaurační lokalitu.
4. Mammoth Media
Máte-li méně obsahu, můžete se dostat pryč s více offbeat volby navigace. Mammoth Media je dobrým příkladem, který má na svých stránkách pouze pět hlavních stránek plus blog.
Jednou z konkrétních aspektů této navigace je skrytá rozevírací funkce. Pokud kliknete na odkaz "práce", získáte 2 alternativní odkazy, na které můžete kliknout. Objevují se pod hlavním spojem, takže hrají roli menšího dropdownu.
Dokonce i v mobilních zařízeních se tato navigace podobá stylu. Je to důkaz, že když nemáte příliš mnoho odkazů, můžete skutečně posílit kreativitu.
5. Amazon
Každý a jejich babička ví o Amazonu. Online prodejce má úžasný výběr, ale mají také fantastický design UI vertikální odkazy nav na stránkách vyhledávání produktů.
Amazon má desítky kategorií pro každý hledaný výraz. To znamená, že potřebují způsob, jak prezentovat vylepšené funkce vyhledávání bez přeplnění stránky. Vertikální navigace mají smysl, protože se mohou stát stranou, zatímco jsou stále plně přístupné.
Pokud navrhujete nějaký podobný typ filtrování nav, rozhodně doporučuji studovat strategii společnosti Amazon. Optimalizovali svůj web bez konce, takže je spousta důvodů domnívat se, že jejich vertikální třídící vazby fungují dobře.
6. Corum
Corum je webová stránka má další čistou vertikální navigaci s velmi jednoduchými funkcemi. Všestranné odkazy, tmavý text, jasné styly vznášení a silný kontrast proti hlavní stránce.
To je jeden z největších aspektů při navrhování vertikální navigace. Obvykle chcete vytvořit silný rozpor mezi vertikálním navigačním panelem a obsahem stránky. V tomto případě se to provádí pomocí světlejšího barvy pozadí s logem Corum v horní části.
Uživatelé reagující na mobilní zařízení mají místo toho rozbalovací nabídku, která funguje dobře jako alternativa pro obrazovky delší než širší.
7. Nua Bikes
Jedním z nejlepších způsobů, jak používat vertikální navigaci, je rozložení jedné stránky. Informační stránky, jako je Nua Bikes nemusí vždy potřebovat desítky stránek plných obsahu.
Takže s vertikální nabídkou nav je mnohem snazší procházet obsah na rozmar pomocí animací a vlastních stránek. V tomto případě se Nua Bikes nav spojí se stránkou, protože je přímo vázán na veškerý obsah na této stránce.
8. Michael Ngo
Další web, který sleduje vertikální nav navštívený trend, je Portfolia Michael Ngo .
Má docela podmanivý hlavičkový obrázek, který okamžitě přitáhne vaši pozornost a přitáhne vás. Obsah je však nejzajímavější, protože to vše funguje prostřednictvím 3 různých odkazů: domů, práce a kontaktu.
Odkazy nav mají také své vlastní titulky, takže můžete vidět, co dělají i na první pohled.
Jedna věc, kterou je třeba si uvědomit, je, jak navigace zůstává pevně při rolování dolů po stránce. To zajišťuje přístup všech odkazů z libovolného bodu, který je důležitý v menším vertikálním menu.
9. Medienstadt.koeln
Německé místo Medienstadt.koeln má poměrně odlišný přístup k vertikální navigaci. Jejich vlajka zůstává stále skrytá za menu hamburgeru, ale stále se rozprostírá celou výšku obrazovky.
Obsahuje také více odkazů, než jen typické horní horizontální navigace. To dává smysl, ale může být pro některé návštěvníky matoucí.
Co se nejvíce líbí ve vertikálním stylu, je, jak zůstává zastrčené i na stolních počítačích, dokud není potřeba.
Udělili jsme, že se o nich diskutuje problémy s objevitelností s nabídkami hamburgerů. Ale myslím, že tato ikona se rychle stává uznávanou a tento design je vynikajícím příkladem skryté vertikální navigace v akci.
10. Metrik systém
Reklamní agentura Metrick systém udržuje jejich navigaci jednoduchou a do hloubky. Sleduje vertikální styl, ale je také hodně odlišný od všech ostatních v tomto příspěvku.
Líbí se mi skryté rozbalovací okno, které zobrazuje pouze další odkazy při kliknutí na primární odkaz. Jejich "časopis" odkaz je dobrý příklad. Nové odkazy se objeví na stranu a vyblednou do pohledu jediným kliknutím.
Uživatelé mobilních sítí získají podobnou zkušenost, kromě těchto odkazů pod podstránkami se zobrazují pod hlavním odkazem. Ale tato loď je tak malá, že může pracovat pro téměř každou velikost obrazovky.
Wrap Up
Vertikální navigace funguje nejlépe na webech, které se spoléhají na extra prostor na obrazovce. Ty obvykle zahrnují portfolia, restaurace, malé podniky a obchody elektronického obchodu.
Ale bez ohledu na stránky se můžete vždy pokusit přidat vertikální navigaci do vašeho návrhu. A doufám, že tyto příklady mohou začít s některými skvělými nápady pro wireframing a mockup design.