10 kohdetta, jotka suorittavat vertikaalisen navigoinnin oikein
Valtaosa web-navigointivalikoista kulkee vaakasuunnassa sivun yli. Tämä johtuu siitä, että perinteiset monitorit ovat laajempia eikä pitempiä.
Mutta niin paljon seulontatilaa käytettäessä sivustot voivat nyt käyttää pystysuuntaisia selausvalikkoja. Ja monet niistä näyttävät fantastisilta.
Nämä 10 esimerkkiä pystysuorista valikoista ovat täydellisiä, jotta voidaan tutkia ainutlaatuista muotoilutyyliä ja selkeää käytettävyyttä.
1. Petersham taimitarhat
On Petersham taimitarhat verkkosivustosta löytyy sisäkkäinen pystysuuntainen navigointi. Tämä tekniikka ei ole jotain, joka löytyy hyvin usein, mutta se toimii hyvin tällä sivustolla.
Jokainen tärkein nav-linkki käyttää taustalla olevaa kuvaketta, joka välittää linkit visuaalisesti. Ja kaksi ensimmäistä linkkiä avaavat alavalikoita, jotka on kohdistettu ensisijaisen valikon vieressä. Nämä ottavat pudotuspisteiden sijainnin, jota tyypillisesti näet horisontaalisissa valikoissa.
Tämä sivusto on reagoiva, joten pienemmissä kooissa nämä linkit katoavat hampurilaisvalikon takana. Tämä luo kohtuullisen jakamisen työpöydän käyttäjien välillä, jossa on riittävästi tilaa pystysuorille linkkeille ja mobiilikäyttäjille, jotka parantavat vaakasuoralla navbarilla.
2. Arbor-ravintola
Toinen erittäin ainutlaatuinen esimerkki on Arbor-ravintola joka on puhdas vertikaalinen nav, jossa on paljon tilaa linkkien välillä. Sisältö näkyy liukuvassa säiliössä, joka myös sijoittuu pystysuoraan navigoinnin vieressä.
Tämä sisältötyyli on melko ainutlaatuinen. Useimmat pystysuorat nav-sivustot pitävät sisällön yhdenmukaisena pääsivun kanssa, mutta tässä tapauksessa voit näyttää tai piilottaa sisältöä helposti. Se lisää tietyn tyyliä pystysuoraan navigointiin, joka pitää sivun vauhdin virtaavan sisältöön.
3. Smokey Bones
Smokey Bones on kaksi asiaa menossa: mahtava ruoka ja tappaja verkkosivusto.
Jokainen sivu käyttää pitkää pystysuuntaista navigointia, joka on kiinnitetty vasemmalle puolelle. Tämä on katkottua useimmille verkkosivustoille, koska suurin osa länsimaisista lukijoista kuluttaa sisältöä vasemmalta oikealle ja vasemmassa yläkulmassa on perinteinen paikka sivuston tunnukselle.
Yksi lisäominaisuus, jota pidän, on valikoitu flyout, jossa luetellaan kaikki ravintolan ruokia. Jos napsautat "valikko" -linkkiä, näet, miten tämä toimii myös aliverkon ollessa lisätty pystysuoraan. Ehdottomasti viileä idea, joka toimii hyvin pienelle ravintolakeskukselle.
4. Mammoth Media
Kun sinulla on vähemmän sisältöä, voit päästä irti muista offbeat-navigointivalinnoista. Mammoth Media on hyvä esimerkki, jolla on vain viisi pääosaa sivuillaan sekä blogi.
Tämän navigoinnin yksi osa on piilotettu pudotusominaisuus. Jos napsautat "työtä" -linkkiä, saat 2 vaihtoehtoista linkkiä, joita voit napsauttaa. Ne näkyvät pääliittymän alapuolella, joten ne ottavat pienemmän pudotuksen.
Jopa matkapuhelimessa tämä navigointi seuraa samanlaista tyyliä. Se on todiste siitä, että kun sinulla ei ole liikaa linkkejä, voit todella lisätä luovuuteen.
5. Amazon
Kaikki ja heidän mummonsa tietävät Amazonista. Verkkokaupassa on hämmästyttävä valikoima, mutta niillä on myös fantastinen käyttöliittymä vertikaaliset Nav-linkit tuotehakuilla.
Amazonilla on kymmeniä kategorioita jokaiselle hakutermille. Tämä tarkoittaa sitä, että he tarvitsevat tapaa esitellä hienostuneita hakutoimintoja ilman sivutuksen ylikuormittumista. Pystysuuntaiset navigoinnit ovat järkeviä, koska ne voivat siirtyä sivulle, kun ne ovat edelleen täysin saatavilla.
Jos suunnittelet mitään samanlaista suodatus nav, ehdottomasti suosittelen Amazon-strategian opiskeluun. He ovat optimoineet sivustonsa loppuun, joten on paljon syytä uskoa niiden vertikaalisten lajitteluyhteyksien toimivuus.
6. Corum
Corum sivustolla on toinen puhdas pystysuuntainen navigointi, jossa on hyvin yksinkertaisia ominaisuuksia. All-caps-linkit, tumma teksti, selkeät hover-tyylit ja voimakas kontrasti pääsivulta.
Tämä on yksi suurimmista näkökohdista pystysuuntaisen navigoinnin suunnittelussa. Haluat tyypillisesti luoda vahvan jakamisen pystysuoran navigointipalkin ja sivun sisällön välillä. Tällöin se on tehty käyttämällä kevyempää taustaväriä Corum-logoa lähellä yläosaa.
Ja liikkuvilla reagoivilla käyttäjillä on sen sijaan pudotusvalikko, joka toimii hyvin vaihtoehtona laajemmille näytöille.
7. Nua-pyörät
Yksi parhaista tavoista käyttää pystysuuntaista navigointia on yhdellä sivun asettelulla. Informaatiokohteita kuten Nua Bikes eivät aina tarvitse kymmeniä sivuja täynnä sisältöä.
Joten pystysuoralla nav-valikolla on paljon helpompi selata sisältöä mielikuvituksella animaatioilla ja mukautetuilla sivualueilla. Tällöin Nua Bikes-navio sekoittuu sivulle, koska se on suoraan sidottu kaikkiin kyseisen sivun sisältöön.
8. Michael Ngo
Toinen sivu, joka seuraa yhden sivun vertikaalinen nav-trendi on Michael Ngon salkku .
Se on varsin kiehtova otsikkokuva, joka välittömästi tarttuu huomiosi ja kiinnittää sinut sisään. Mutta sisältö on mielenkiintoisin osa, koska se kaikki toimii 3 eri linkkiä: koti, työ ja yhteystiedot.
Nav-linkkeillä on myös omat tekstitys, joten näet, mitä he tekevät jopa yhdellä silmäyksellä.
Yksi asia huomata on, miten nav pysyy kiinteänä vierittämällä sivun alaspäin. Tämä pitää kaikkien linkkien ulottuvilla mistä tahansa pisteestä, mikä on ratkaisevaa pienemmässä pystysuorassa valikossa.
9. Medienstadt.koeln
Saksalainen sivusto Medienstadt.koeln on melko erilainen kuin vertikaalinen navigointi. Niiden nav on aina hampurilaisvalikon takana piilotettu, mutta silti se ulottuu koko näytön korkeudelle.
Se sisältää myös enemmän linkkejä kuin vain tyypillinen ylhäältä horisontti nav. Tämä on järkevää, mutta voi olla hämmentävää joillekin vierailijoille.
Eniten vertikaaliseen tyyliin pidän siitä, kuinka se pysyy piilossa jopa työpöydissä, kunnes sitä tarvitaan.
Hyväksytty on keskusteluja löydettävyysongelmia hampurilaisvalikoissa. Mutta mielestäni tämä kuvake on nopeasti tunnustettu ja tämä malli on erinomainen esimerkki piilotetusta pystysuorasta navigointitoiminnasta.
10. Metrick-järjestelmä
Mainostoimisto Metrick System pitää navigoinnin yksinkertaisena ja siihen pisteeseen. Se seuraa vertikaalista tyyliä, mutta se on myös paljon erilainen kuin kaikki muut tässä artikkelissa.
Pidän piilotetusta pudotuksesta, joka näyttää vain ylimääräisiä linkkejä, kun ensisijaista linkkiä napsautetaan. Heidän "lehden" linkki on hyvä esimerkki. Uudet linkit näkyvät sivulle ja ne hajoavat yhdellä klikkauksella.
Mobiilikäyttäjät saavat samanlaisen kokemuksen, paitsi että nämä alivalikon linkit näkyvät pääliittymän alla. Mutta tämä nav on niin pieni, että se voi toimia melkein jokaisen näytön koon mukaan.
Wrap Up
Pystysuuntainen navigointi toimii parhaiten sivustoissa, jotka käyttävät ylimääräistä näyttöä. Näihin kuuluu tyypillisesti salkun sivustoja, ravintoloita, pienyrityksiä ja verkkokauppoja.
Sivustoista riippumatta voit aina yrittää lisätä pystysuuntaisen navigoinnin suunnitteluun. Ja toivon, että nämä esimerkit saavat sinut aloittamaan hienoja ideoita langankorjaukseen ja mockup-muotoiluun.