10 nettsteder som gjør vertikal navigasjon rett
Flertallet av nettnavigasjonsmenyer flyter horisontalt over hele siden. Dette kommer fra en historie med tradisjonelle skjermer som er bredere enn høyere.
Men med så mye skjermrom er det nå mulig for nettsteder å bruke vertikale navigasjonsmenyer i stedet. Og mange av dem ser fantastisk ut.
Disse 10 eksemplene på vertikale menyer er perfekte for å studere for den unike designstilen og tydelig brukbarhet.
1. Petersham Planteskoler
På Petersham Planteskoler nettside finner du en nestet vertikal navigasjon. Denne teknikken er ikke noe du finner veldig ofte, men det fungerer bra på dette nettstedet.
Hver hovednavkobling bruker et ikon i bakgrunnen for å formidle koblingene visuelt. Og de to første koblingene åpner undermenyene justert ved siden av hovedmenyen. Disse tar plass til dropdowns som du vanligvis ser på horisontale menyer.
Dette nettstedet er responsivt, så i mindre størrelser forsvinner disse koblingene bak en hamburger-meny. Dette skaper en rimelig deling mellom desktop-brukere med nok plass til vertikale koblinger, og mobilbrukere som gjør det bedre med en horisontal navbar.
2. Arbor Restaurant
Et annet veldig unikt eksempel er Arbor Restaurant som har en ren vertikal nav med god plass mellom linkene. Innholdet vises i en glidebeholder som også justerer vertikalt ved siden av navigasjonen.
Denne innholdsstilen er ganske unik. De fleste vertikale nav-sider holder innholdet på linje med hovedsiden, men i dette tilfellet kan du enkelt vise / skjule innholdet. Det legger til en viss flair i vertikal navigasjon som holder sidens momentum flyter ned med innholdet.
3. Smokey Bones
Smokey Bones har to ting som går for det: fantastisk mat og en morder nettsted.
Hver side bruker den lange vertikale navigasjonen til venstre. Dette er en stift for de fleste nettsteder, fordi de fleste vestlige lesere bruker innhold fra venstre til høyre, og øverste venstre hjørne er det tradisjonelle stedet for et nettstedlogo.
En ekstra funksjon jeg liker er menyen flyout notering alle restaurantens retter. Hvis du klikker på "meny" lenken, ser du hvordan dette også virker som en undermeny lagt til vertikalt. Definitivt en kul ide som fungerer bra for en liten restaurantside.
4. Mammoth Media
Når du har mindre innhold, kan du komme unna med mer offbeat navigasjonsvalg. Mammoth Media er et godt eksempel som bare har fem hovedsider på deres nettsted pluss en blogg.
En bestemt fasett av denne navigasjonen er den skjulte rullegardinfunksjonen. Hvis du klikker på linken "Work" får du 2 alternative linker du kan klikke gjennom. De vises under hovedlinken, slik at de tar rollen som en mindre rullegardin.
Selv på mobilen følger denne navigasjonen en lignende stil. Det er bevis på at når du ikke har for mange koblinger, kan du virkelig skape kreativitet.
5. Amazon
Alle og deres bestemor vet om Amazon. Online-forhandleren har et fantastisk utvalg, men de har også et fantastisk UI-design med vertikale navkoblinger på produktsøkssider.
Amazon har dusinvis av kategorier for hvert søkeord. Dette betyr at de trenger en måte å presentere raffinerte søkefunksjoner uten å overfylle siden. Vertikale navigasjoner er bare fornuftige fordi de kan tømme bort til siden mens de fortsatt er fullt tilgjengelige.
Hvis du designer noen lignende type filtreringsnav, anbefaler jeg definitivt å studere Amazons strategi. De har optimalisert sitt nettsted til ingen ende, så det er rikelig med grunn til å tro at de vertikale sorteringslinkene fungerer bra.
6. Corum
Corum Nettstedet har en annen ren vertikal navigasjon, med svært enkle funksjoner. All-caps-koblinger, mørk tekst, klare hover-stiler og en sterk kontrast til hovedsiden.
Dette er en av de største aspektene når du designer vertikal navigasjon. Du vil vanligvis lage en sterk divisjon mellom vertikal navigasjonslinje og sidens innhold. I dette tilfellet er det gjort med en lysere bakgrunnsfarge med Corum-logoen nær toppen.
Og mobile responsive brukere får i stedet en dropdown-meny som fungerer som et alternativ for skjermbilder som er lengre enn bredere.
7. Nua sykler
En av de beste måtene å bruke vertikal navigasjon på, er med en enkelt sidelayout. Informasjonssteder som Nua sykler trenger ikke alltid dusinvis av sider fulle av innhold.
Så med en vertikal nav-meny er det langt enklere å bla gjennom innhold på et innfall ved hjelp av animasjoner og tilpassede sideområder. I dette tilfellet blander Nua Bikes nav seg inn på siden, siden den er direkte knyttet til alt innholdet på den siden.
8. Michael Ngo
Et annet nettsted som følger den ene siden vertikale nav-trenden er Michael Ngos portefølje .
Det har ganske fengslende header-bilde som umiddelbart tar hensyn til din oppmerksomhet og trekker deg inn. Men innholdet er den mest interessante delen, siden alt fungerer via 3 forskjellige lenker: hjemme, jobb og kontakt.
Nav-linkene har også egne undertekster, slik at du kan se hva de gjør selv med et blikk.
En ting å merke seg er hvordan naven forblir løst mens du ruller nedover siden. Dette holder alle koblinger tilgjengelige fra ethvert punkt som er avgjørende i en mindre vertikal meny.
9. Medienstadt.koeln
Det tyske nettstedet Medienstadt.koeln har ganske forskjellig på vertikal navigasjon. Deres nav forblir gjemt bak en hamburger-meny til enhver tid, men den spenner fortsatt over hele høyden på skjermen.
Den inneholder også flere koblinger enn bare den typiske topp horisontale naven. Dette gir mening, men kan være forvirrende for noen besøkende.
Det jeg liker mest om den vertikale stilen er hvordan det forblir bortgjemt, selv på skrivebordet til det trengs.
Gitt det er debatter om oppdagelsesproblemer med hamburger menyer. Men jeg tror dette ikonet blir raskt anerkjent, og dette designet er et utmerket eksempel på en skjult vertikal navigasjon i handling.
10. Metrick System
Annonsebyrået Metrick System holder deres navigasjon enkelt og til poenget. Det følger den vertikale stilen, men det er også mye annerledes enn alle de andre i dette innlegget.
Jeg liker den skjulte rullegardinmenyen som bare viser ekstra linker når en primær lenke klikkes. Deres "journal" -link er et godt eksempel. Nye koblinger ser ut til siden, og de fades ut med et enkelt klikk.
Mobilbrukere får en lignende opplevelse, bortsett fra at disse undermenylinkene vises under hovedlinken. Men denne naven er så liten at den kan fungere for stort sett hver skjermstørrelse.
The Wrap Up
Vertikal navigasjon fungerer best på nettsteder som er avhengig av ekstra skjermrom. Disse inkluderer vanligvis porteføljesider, restauranter, småbedrifter og e-handel butikker.
Men uavhengig av nettstedet kan du alltid prøve å legge til en vertikal navigasjon i designet. Og jeg håper disse eksemplene kan komme i gang med noen gode ideer for wireframing og mockup design.