A webtervezőknek mindig egyensúlyt kell találniuk a használhatóság és a látványosság között, amikor weboldalt terveznek. Ennek az egyensúlynak a hiányában a webhely szép lesz, de nehéz navigálni. Illetve nem lesz kellemes a szemnek, de könnyű navigációval. Ezt szem előtt tartva a vonzó navigáció és a használhatóság közötti egyensúly nem tűnik olyan nehéznek. Íme 30 nagyszerű példa a gyönyörű és felhasználóbarát navigációs menükre, hogy segítsen új ötleteket és inspirációt generálni egyéni menük létrehozása során.

Typographica

Ez az oldal egy vonzó menü egyszerűségét ötvözi, amely egyben a felhasználó számára tagadhatatlanul nagyon egyszerű navigációt biztosít. Ha az egeret a logó alatti fejléc fölé viszi, látni fogja, hogy a "Típus" szó kiemelve marad, a többi szó fölé mozgatva pedig pontosan kiválaszthatja a meglátogatni kívánt webhely megfelelő részét.


Kontraszt.ie

A Contrast.ie oldalon található navigáció egy példa a kreatív menük létrehozásának egyedi megközelítésére. Az összes gomb a megrajzolt megjegyzés ábrákba kerül, és felugrik, ha fölé viszi az egérmutatót.


Keresés a videóban

A webhely navigációja egyértelműen végigvezeti Önt a nyilak között, amikor a kurzort föléjük viszi. A hatékony navigáció maga mögött hagyja összetett kialakítás. Úgy tűnik, hogy ez az oldal teljes mértékben összhangban van ezzel a kifejezéssel.


Ez az oldal a kreatív navigációt ünnepli. Ha balra nézel és a srác fölé viszed, látni fogod, hogyan fog mosolyogni, ha az ikonok és képek fölé viszed, akkor az egérmutató mellett egyből leírást fogsz látni.


A Forty kreatív képalapú navigációt használ. A nyilak felhívják a felhasználó figyelmét a gombokra, és kattintásra ösztönzik őket.


healogix

A Healogix hatalmas betűkkel teszi fel a legfontosabb kérdéseket, amelyek felkeltik a felhasználók figyelmét. Mikor, mit, miért és ki? Minden kérdésre egyetlen kattintással választ kapunk kezdőlap.


Ötletek az ötleteken

Az oldalon csak egy link található a főoldalra, de egyszerre kényelmes és kreatív. A link megragadja a tekintetet, sőt "beszól" a felhasználónak. És a legtöbb felhasználó szereti azokat az oldalakat, amelyekkel kapcsolatba léphet.


Sarah Longnecker

Ezen a weboldalon a navigáció egyszerű és könnyen használható. A kiválasztott oldal mögötti bannerek könnyen megkülönböztethetővé teszik a navigációs elemeket az oldal többi részétől.


Elefánt készítette

A Made by Elephant nagy és könnyen használható navigációs menüt használ. A kék szöveg is szépen kontraszt a sötétebb vörös és fekete színekkel.


Dolgozzon a Playnél

Miközben a webhely menüelemei között navigál, észre fogja venni, hogy az egész oldal háttérpozíciója és színe gyorsan változik.


világos balra

Az ezen az oldalon található menü úgy néz ki, mint egy öntapadó cetli, amikor az egeret a hivatkozások fölé viszi. Az oldal sablonja teljes mértékben erre a koncepcióra épül.


Minta Tap

Amint belép az oldalra, egy zöld nyíl fogadja Önt, amely tájékoztatást nyújt az oldal minden egyes szakaszáról. Ez lehetővé teszi a felhasználók számára, hogy könnyen kapcsolatba lépjenek az oldallal.


Megállíthatatlan Robot Ninja

A navigáció olyan menő, mint ennek az oldalnak a neve. Sőt, sokat javít a dizájnon is.


Piros Orr nap


Polar Gold

Ez a szöveges navigációs menü a fényes és a szemet gyönyörködtető stílust egyesíti megjelenés azzal a kényelemmel Javascript használatával, hanem Flash használatával.


Weboldal FX Blog

Egyedülálló és érdekes megközelítés a navigációról. Linkek a kezdőlapés a blog beillesztésre kerül a mondatba az oldal fejlécében. Ez nem sérti a használhatóság elveit, az oldal könnyen olvasható és nagyon hatékony.


Opera Ma-g?

A navigációs menüpontok könnyen megtalálhatók, a zöld aláhúzás a navigációs elemek és az oldal többi részének egységét kelti.


Owltastic

Az Owltastic a nagyszerű felhasználói élmény példája. Minden navigációs elem animációval reagál, ha fölé viszi az egérmutatót. A lista többi példájához hasonlóan a navigáció is gyönyörű és könnyen használható.


Guillaume Pacheco

Az Owltastichoz hasonlóan ez a webhely is interakcióba lép a felhasználóval, amikor rámutat különféle elemek oldalakat. A webhelysablon jól kivitelezett és könnyen navigálható.


Teljes tejszínes tej

A Full Cream Milk világos, szöveges navigációt használ. Ha az egeret a hivatkozások fölé viszi, az oldal teteje kiemelésre kerül. Ez egy nagyszerű példa a navigációra, amely mind a felhasználók, mind a keresőmotorok számára kellemes.


Arca Lui Noe Hotel

Ezen az oldalon a navigáció gyönyörű és könnyen használható. Nagyon stílusos, és jól illeszkedik az oldal általános dizájnjához.


Sushi és robotok

A Sushi and Robots elegáns dizájn segítségével gyönyörű és vonzó navigációs menüt hoz létre, amely kiemelkedik a többi közül.


A Sharify monokróm egyéni navigációs menüt használ, amely kellemes a szemnek és kényelmes a fehér szöveg és az égkék háttér kontrasztja miatt.


Stephen Caver

Itt a navigáció az első dolog, amit észrevesz, amikor belép egy webhelyre. "Tiszta" és könnyen használható. Ráadásul a felhasználás szabad hely A navigáció kiváló.


Gondolat és elmélet

Ez az oldal minimalista megközelítést alkalmaz a navigációhoz, és egyszerűen működik. Az oldalakon nincs semmi felesleges, ami elvonná a felhasználók figyelmét.


Egy kicsit több

A fekete-fehér nagy kontrasztja ismét használhatóbbá teszi ezt az oldalt. Ha az egeret fölé viszi, a navigációs elemek élénk kéken világítanak, interaktivitást és esztétikai értéket adva az oldalnak.


Ulster élelmiszerbolt

A navigáció élénk színeket, könnyű kezelhetőséget és az oldaltartalom harmóniáját használja kék háttérrel.


Az Adaptd webhelye kreatív, világos és gyönyörű navigációt használ. A navigáció legszembetűnőbb aspektusa a portfólió részben található. Ha az egérmutatót a gombok fölé viszi, a címkék átlátszóvá válnak, és beleolvadnak a webhely hátterébe.


Sac Jazz Fesztivál 2009

Ezen az oldalon van egy navigációs menü, amelyet a felhasználónak nem is kell kitalálnia. Ráadásul a menü megfelelő színei még színesebbé teszik az egész oldalt. A dizájnelemek hibátlanul illeszkednek egymáshoz.


  • Jelenleg 1,00/5

Ebben a cikkben arról fogunk beszélni, hogy mi legyen jó navigáció az oldalon, és hogyan teheti azt igazán hatékonyvá. Az anyag elsősorban azoknak hasznos, akik saját weboldalt szeretnének létrehozni.

A navigáció azok a módszerek, trükkök és speciális elemek, amelyek lehetővé teszik az oldalak közötti mozgást.Minden attól függ, hogy mennyire jól van átgondolva: mind az átalakítás, mind az erőforrás-promóció sikere.

Ez egy ház elrendezéséhez hasonlítható. Ha az elrendezés jó, akkor könnyen megtalálhatja a kívánt helyiséget, ne keverje össze a konyha bejáratát a nappali bejáratával. Ha sok a költözés, a folyosók és az ajtók, akkor egy ilyen házban el lehet tévedni.

Ugyanígy a weboldalakkal. Ha rossz a navigáció, sok a link, ami nem a megfelelő helyre vezet, vagy nem világos, hogy hova vezet – a felhasználók összezavarodnak, nem találják meg a szükséges oldalakat és a szükséges információkat.

Mert kereső motorok a jó, logikus navigáció is fontos. keresőmotor meg kell értenie ennek az oldalnak a webhelyén betöltött szerepét. A jól megtervezett navigáció is javul viselkedési tényezők mert a felhasználók gyorsabban megtalálják a szükséges információkat.

Alapelemek és navigációs technikák

Azt javaslom, hogy először ismerkedjen meg azokkal a fő elemekkel, amelyek segítenek az oldalon való eligazodásban.

A tágabb értelemben vett navigáció számos technikát és elemet foglal magában, amelyek fő feladata, hogy lehetővé tegyék a felhasználó számára a hozzáférést kívánt oldaltés információt szerezni.

Ezen elemek egyike, amely régóta kötelező az oldalon, azcéglogó, rákattintva eljutunk a.

Itt például elég rákattintani a logóra, hogy visszakerüljünk a kezdőoldalra.

Ez a technika már ismerős a felhasználók számára, és lehetővé teszi, hogy a webhely bármely oldaláról visszatérjen a kezdőlapra.

A második „klasszikus” elem azFőmenü .

A fejléc alatt található, és gombokból vagy hivatkozásokból áll, amelyek a webhely fő részeihez vezetnek. Egy ilyen menü összetettebb is lehet, legördülő listákkal, amelyek alfejezetekhez vagy egyes oldalakhoz vezetnek.

Az elmúlt néhány évben egy másik technika vált népszerűvé - ezhamburger menü, amelyben az összes hivatkozás a sematikus három vízszintes kötőjelben van elrejtve. Ez az elem először csak tovább élt mobil eszközök, de ma már egyre gyakoribb a webhelyek asztali verzióiban:

Néhány webhelyen is láthatófüggőleges menü. Leggyakrabban akkor használatos, ha a felső menüben nem fér el minden, amire szüksége van, vagy ha egyszerűbbé kell tennie a felhasználók számára az egyes címsorok közötti navigálást.

Vagy tud egyedül élni anélkül vízszintes menü az oldal tetején. És még több ilyen menü is lehet, mint itt - a bal és a jobb oldalon:

(mikro markup) egy másik navigációs elem, amely nemcsak az oldal hierarchiáját állítja be, hanem megkönnyíti a visszatérést is kívánt szakaszt, vagy a főoldalra, bármely oldalról:

Linkek a cikkeken belülaz oldal más oldalaira – ezek is navigációs elemek. Például ezek a következők:

Nemcsak a továbblépést segítik, de SEO szempontból is jók – ezzel a technikával növelheti a megtekintett oldalak számát.

Linkek a láblécben(lábléc, lábléc) egy másik navigációs elem. Általában a láblécbe kerül egy link a kapcsolatokra, a felhasználói szerződés, a webhelyhasználati szabályok stb. És néha sok linket láthat különböző oldalak kategóriák szerint csoportosított webhelyek:

A hosszú céloldalakon, valamint egyes webhelyeken felül láthatófejlődésmutató, amely megmutatja, mennyit görgetett az adott oldalon:

A folyamatjelző sáv a jelentkezési és regisztrációs lapokon is megtalálható, ha az űrlap hosszú és több lépésre bontható.

Ez megkönnyíti a navigálást magában az oldalon – láthatja, mennyit a végéig. Ez is egy kis pszichológiai trükk, ami arra készteti a látogatót, hogy fejezze be, amit elkezdett.

A hosszú oldalak a céloldalakon pedig egy másik nagyszerű navigációs elemet találhat -gombot, hogy gyorsan visszatérjen a tetejére:

Ezzel a gombbal gyorsan visszatérhet az oldal tetejére.

A felső menübe, névjegyekbe vagy egyebekbe fontos információ folyamatosan a szemünk előtt voltak, az úgynevezett „ragadós fejléc”, vagy „ragadós navigációs sáv” használatos. Folyamatosan az oldal tetején marad, miközben a felhasználó lefelé görget.

Itt mindig a szemünk előtt van egy keresés, egy logó a főoldalra való visszatérés lehetőségével, és egy kis menü.

Hogyan lehet mindezeket az elemeket értelmesen és haszonnal használni?

Hogyan lehet egyszerűvé tenni a navigációt az oldalon

Amikor a navigáción dolgozik a webhelyén, ne feledje, és próbáljon meg egy egyszerű szabályt használni:a főoldalról az oldal bármely oldalára a felhasználónak legfeljebb három kattintást kell elérnie. És fordítva.

1. Helyezze el a kezdőlap logóját a jobb felső sarokban.

Ez egy általánosan elfogadott szabvány, és jó okkal: ezen a helyen azonnal felkelti a figyelmet a logó. A felhasználónak pedig nem kell azt keresnie, hogy mire kattintson a visszatéréshez.

2. Vegye figyelembe az elsődleges és másodlagos elemeket.

A felső menü lehet elsődleges. Másodlagos - oldalsáv, további hivatkozások a szövegen belül, a láblécben. A navigációs elemek másodlagos navigációs elemként is működhetnek.

Itt a felső menü a fő navigációs elem, a kenyérmorzsa pedig kiegészítő.

Helyezze át a webhely legfontosabb részeit a főmenübe.

3. Fontolja meg, mely oldalak csoportosíthatók.

Ha nem fér el minden a felső (vagy oldalsó) menüben. Például gyakran találhat olyan lehetőséget, amikor a webhely egyes részei egy gomb alatt vannak elrejtve: „Információ”, „Továbbiak”, „Továbbiak” stb.

A Mail.ru mail így "elrejtette" a cég projektjeit:

4. Keressen egy jó helyet az információs linkeknek.

Az információs hivatkozások például a „Kapcsolatok”, „Nyilvános ajánlat” és hasonlók. A felhasználónak meg kell találnia ezeket a hivatkozásokat az oldal minden oldalán. Ezért számukra a legmegfelelőbb hely a lábléc (footer).

Íme egy szemléletes példa az információs linkek ilyen elhelyezésére:

5. Ne felejtsd el a tervezést.

Minden navigációs elemnek jól láthatónak kell lennie, és egyértelműnek kell lennie, hogy a hivatkozás hivatkozás, a gomb pedig gomb. Emelje ki a hivatkozásokat színekkel, vastagítsa vagy húzza alá. Fontos, hogy a felhasználó megértse, hogy van előtte egy kattintható elem, amely az oldal másik oldalára küldi.

Itt nem nevezhetem sikeresnek a menüt. Túl kicsi betűtípus. De itt van egy másik megközelítés - közvetlenül a főoldalról megnyithatja kedvenc márkája katalógusát, vagy megtekintheti a kedvezményeket:

6. Ne nyissa meg az oldalakat új ablakban.

Ez megzavarja a felhasználókat.

7. További elemek.

Vegye figyelembe a további elemeket, mint pl"Kapcsolódó termékek", "Ajánlott tartalom" vagy "Kapcsolódó cikkek", amely segít a felhasználónak gyorsabban megtalálni, amire szüksége van.

8. Tippek.

Egyszerűsítse a navigációt ezzeleszköztippek hogy segítsen a felhasználónak megérteni, mire való a gomb vagy ikon:

9. Hagyja jól látható helyen a menüt.

Ügyeljen arra, hogy a látogatónak ne kelljen minden oldalon új menüt keresnie. Ne módosítsa vagy távolítsa el a menüket a másodlagos oldalakon.

10. Ne rejtsd el messzire a kapcsolataidat.

Hagyja meg telefonszámát a fejlécben. Győződjön meg arról, hogy a visszahívó gombok és az online asszisztenssel folytatott csevegés azonnal láthatóak – leggyakrabban az oldal alján, bal vagy jobb oldalon, de nem az oldalán.

A cím a fejlécben és a láblécben is meghagyható. Ne kényszerítse a látogatót arra, hogy ezeket az információkat az egész oldalon keresse.

Mindezek a technikák nagymértékben leegyszerűsítik a webhelyen való navigációt, könnyebbé és hatékonyabbá teszik azt.

Válasszon tárhelyet az oldalhoz:

Amikor a navigáción dolgozik, mindenekelőtt a felhasználóra gondoljon.Biztosan a lehető legrövidebb időn belül megtalálja mindazt, amit keresett? Minden világos annak, aki először találkozott nemcsak az Ön webhelyével, hanem általában a szakterületével is? Messze vannak elrejtve az oldalak, mindegyikhez maximum három kattintással lehet eljutni?

Gondolja végig, mely webhelyeken navigálhat a legkönnyebben, és tanuljon a legjobbaktól.

Sok sikert a saját internetes forrás fejlesztéséhez!

Szia Bikepost!
Közeleg a szezon, és sokan gondolkodnak azon, hogy motorkerékpárral navigáljanak hosszú távú utazásokhoz. Számos lehetőség kipróbálása után egy nem a legolcsóbb, de megbízható megoldás mellett döntöttem, amelyről az alábbiakban elmondom.

Ennek a rendszernek a lényege a telefonban és annak csatolásában rejlik, de mivel külföldre sokszor nincs kapcsolat, ezért offline navigációt használok. De miért nem csak a telefont használja?! - kérdezed, én pedig válaszolok:

  • A személyes telefonját elég gyakran cserélheti (nem fogja minden rögzítőhöz felvenni, mert az univerzális tartó nagyon kényelmetlen)
  • Mit tegyek, ha hívást kapok, vagy hívnom kell? A navigáció elvész + el kell távolítani a tartót, majd vissza kell tenni a helyére - ez nem kényelmes, ha nincs headset vagy a sisak le van véve
  • Gyakran, személyes telefon egyértelműen drágább, mint a használt iPhone 5
  • A telefon elvesztése/eltörése a navigációhoz nem lesz olyan sértő, mint a vadonatúj és drága okostelefonja + ebben az esetben tartalék opció navigáció
  • Utazáskor mindig jó, ha van egy plusz kamerás telefon
Amint már megértette, a rendszer középpontja: iPhone 5 (miért pont ez a telefon? Mivel a navigációhoz elég egy 4”-es képernyő, nem zavarja a vezetést, a hardver pedig elég erős a navigációhoz) 16Gb + mounton Interphone iPhone 5 csöves kormánytok+ Világítókábel. Hadd szögezzem le azonnal ennek a rendszernek a költsége körülbelül 10-12 ezer rubel de ez már az első úton megtérül. Most átlagosan az iPhone 5 16Gb ára a másodlagos piacon 5-7 ezer, a rögzítés körülbelül 2-3 ezer, a fizetős navigáció 2 ezer. Ezt a rendszert az USB rádióm táplálja, de teljesen feltölthető hagyományos USB 1A/5V aljzatok, ne feledje a minőségi táplálkozás a kulcsa a kütyük hosszú élettartamának. Kiderült, hogy ezért a pénzért egy kiváló navigátort kapunk, amely a kínai társaival ellentétben ugyanazon a pénzért mentes az olyan hiányosságoktól, mint:
  • Szörnyű képernyőminőség
  • Hatalmas karosszériaméret és masszív rögzítés
  • Fékezés, instabil rendszer és pontatlan GPS
Előnyeinket kapjuk:
  • Egy produktív eszköz, amely nem hagy cserben, vagy nem fagy le a megfelelő pillanatban
  • Remek képernyő ami a legnehezebb körülmények között is látható
  • multimédia lejátszó
  • Tartalék telefon
  • tartalék kamera
  • Alvázcsere készülékcsere nélkül
Navigációs szoftverként használom Navitel a FÁK és Európa térképeivel az Appstore-ban körülbelül 2 ezer rubelbe kerül. Használhatod is ingyenes analógok offline gyorsítótárral, például: Maps.Me, Google térkép , Yandex Navigator.
Min spórolhat anélkül, hogy sokat veszítene a minőségben? Kezdetnek ez egy tartó, de nem javaslom, hogy 20 dollárnál olcsóbb opciókat válasszon, mert a gyakorlat azt mutatja, hogy az ilyen tartók gyakran nagyon kényelmetlenek. Olyan tartóra van szüksége, amivel szilárdan rögzíti a telefont és könnyen eltávolítható, mert a benzinkutaknál gyakran magunkkal kell vinnünk a telefont. Íme néhány analóg alacsonyabb áron: iBikeConcole - 39,99 USD; Tigra Sport BikeConsole kerékpár - 37,90; LifeProof - 29,95 USD; Givi S955B okostelefon és iPhone 5 tartó - 37 font. Ne feledje, hogy ennek a rendszernek a könnyű használhatósága a rögzítés megválasztásától függ, ezért ezen a ponton nem szabad túl sokat spórolnia.
A második pont a mentéshez ez egy navigációs szoftver. Itt két lehetőség van: legolcsóbb, de összetettebb, ingyenes és kevésbé megbízható. Olcsó feltenni az iPhone-ra jailbreakés letöltheti a szoftver feltört verzióit, de probléma lehet a térképek frissítésével. Ingyenes lehetőség ez ingyenes szoftvert használ a navigációhoz, de itt sem minden olyan egyszerű, hiszen Soha nem támaszkodom csak egyre navigációs programÉs mindig van még egy párom.

Remélem hasznosnak találja tapasztalataimat. Ezzel a rendszerrel 3 évadot utaztam és az áron kívül semmi objektív hátrányt nem árultam el. Hadd emlékeztesselek arra, hogy ennek a rendszernek a lényege a jó hardverben, egy képernyőben, egy tartóban rejlik, így ha találsz egy igazán jó tartót Android okostelefonokhoz, oszd meg kommentben, hiszen Android okostelefonok még hordozhatják a fedélzeti számítógép funkcióját, de az egy teljesen más történet :).

Néhány fotó a Google-tól, hogy képet kapjunk arról, hogyan néz ki egy ilyen csomó egy motorkerékpáron.

A webhely-navigáció az UX-tervezés fontos szempontjává vált – vagy segíthet, vagy árthat webhelyének. A navigáció egy ház támogatásához hasonlítható. Ha az alapozási terv nincs megfelelően kidolgozott, akkor az egész épületet veszélybe sodorja.

A navigáció webhelyenként változhat; nincsenek konkrét utasítások a helyes végrehajtásra.

Mi a navigáció?

A „navigáció” kifejezés többféleképpen értelmezhető. Összességében ez az oldal kulcsfontosságú része, amely lehetővé teszi a felhasználók számára, hogy extra kattintások nélkül megtalálják, amit keresnek. Ez elvezeti látogatóit a legfontosabb információkhoz.

Milyen kérdések segítenek a navigációs térkép elkészítésében?

    Ki a a célközönségÉs mi a célja az oldaladnak?

    Milyen információk és milyen információs modulok legyenek az oldalon?

    Hogyan kell az információkat csoportosítani a felhasználó számára fontosságuk szerint?

    Hogyan lehet a funkcionális és információs modulokat fastruktúrába rendezni?

Navigációs tervezés

Hogyan kell rendszerezni a tartalmat? Hogyan nevezzünk el és rendezzünk el elemeket?

Kezdettől fogva alaposan beszélje meg azt a hierarchiát, amelyben az információkat meg kell jeleníteni:

    Munka a tartalommal. A kártyaválogatás segítségével a tervezők még a tervezés megkezdése előtt választ találhatnak a kérdésekre.

    Ezután gondoskodjon a szerkezetről. Hozzon létre egy webhelytérképet vagy listát különböző szinteken információ. A navigációnak a lehető legegyszerűbbnek kell lennie. A túlterhelt oldalak homályos menüfejlécekkel megnehezítik a webhely használatát. A navigációs menük létrehozásakor beszéljen a felhasználókkal az ő nyelvükön.

    Végül határozza meg a navigációs menü elemeit, típusát és kialakítását.

Ne feledje, hogy nincs olyan szabvány, amely meghatározná, hogyan nézzen ki a navigáció a webhelyén. Inkább azt kell megérteni, hogy milyen oldalt készítesz, milyen üzenetet szeretnél közvetíteni a felhasználók felé, és milyen célt kell vele elérni. Például egy online áruház oldalának létrehozásakor olyan algoritmusokat használhat, amelyek lehetővé teszik a látogatók számára, hogy a lehető leghamarabb megtalálják a megfelelő terméket vagy szolgáltatást, és megvásárolják azt. Ami a promóciós oldalt illeti, koncentrálhat a gyors információkeresésre, bevonhatja a felhasználót játék folyamataés egyszerűsítse a fő elemeket a könnyebb navigáció érdekében.

A navigációs sáv tervezési trendjei

Számos népszerű webhely-navigáció létezik, amelyeket a projektjéhez használhat. Hogy melyiket választja, az Önön múlik.

Vízszintes vagy függőleges?

A vízszintes és függőleges navigáció közötti választást számos tényező határozza meg a tervezési jellemzők, a használhatóság és a tartalom céljai alapján. Leggyakrabban a kisméretű webhelyeket részesítik előnyben vízszintes panel navigációt az oldal fejlécében, míg a nagyvállalati webhelyek vízszintes és függőleges sávokat is használnak.

Nagy legördülő listák

A méretezett legördülő menüsorok olyan menüsorok, amelyek „kiesnek” vagy „kirepülnek” a fő navigációs sávból. Ez a fajta navigáció nem alkalmas minden webhelyhez. A legördülő listák fő előnye, hogy lehetővé teszik egyszerre sok hivatkozás megjelenítését. Tehát milyen esetekben lehet szükség rájuk? A nagy legördülő listák jól illeszkednek az online áruházakhoz, ahol olyan terjedelmes kategóriák listája található, amelyek valószínűleg nem férnek el egy szabványos navigációs menüben. Ennek megfelelően más, átfogó szolgáltatást kínáló oldalak is sikeresen használhatják az ilyen navigációt.

Rögzített („ragadós”)

A rögzített vagy ragadós navigációs sáv nem tűnik el az oldal görgetése közben. Helyesen az ilyen navigációt olyan webhelyeken használják, ahol a fő panelen cselekvésre ösztönzők találhatók.

Volumetrikus lábléc

Megszoktuk, hogy a láblécben jogi információkra mutató hivatkozásokat, hírlevél-előfizetéses widgeteket vagy közösségi média ikonokat látunk. Sok webhelyen nagy lábléc található, ha sok tartalommal rendelkezik, vagy ha online üzletről van szó, amelynél fontos a fizetési módokat tartalmazó ikonok feltüntetése.

Reszponzív tervezésű navigáció

A reszponzív navigáció révén webhelye jól néz ki különböző eszközök. Mobileszközökön a sáv általában hamburgermenüvé omlik össze. A menüikon három vízszintes csíkból áll, és kinyitva az elemek egymás alatt helyezkednek el, az úgynevezett „hamburgert” alkotva. Ezt a fajta menüt azért hozták létre, hogy megkönnyítsék a mobileszközökön való navigálást anélkül, hogy túl sok helyet foglalnának el.

A logó linkelése a kezdőlaphoz

Nyilvánvalóan hangzik, de még mindig vannak olyan oldalak, amelyek figyelmen kívül hagyják ezt a szabályt. A logóra kattintva a felhasználók azt várják, hogy a kezdőlapra kerüljenek – ez bevett gyakorlat.

Elsődleges / Másodlagos

Leggyakrabban az elsődleges navigáció olyan alapvető elemekből áll, amelyek

ugyanúgy néz ki az egész oldalon. A főmenük általában az oldal tetején, középen, balra vagy jobbra helyezkednek el. A másodlagos navigáció további elemekből áll, és általában az oldal közepén található, és nincs kiemelve a megfelelő kialakítással.

Vessünk egy pillantást a 10 legjobb webhelynavigációs tervezési ötletre.

Típus: függőleges, adaptív.

Kattintson a bal oldali menü ikonra, és a főmenü az oldal közepére kerül.

2.WE3

Típus: rögzített, függőleges; a jobb felső sarokban található.

Az oldal kialakítása interaktív. Az oldal görgetése során új információk jelennek meg.

Típus: adaptív, függőleges; bal oldalon található.

A bal oldali panelen található navigáció, amely a menüikonból bővül, hasonló ahhoz, amit Ön megszokott mobil verziók webhely. A navigáció a beszállási rész bal oldalán található, és jól látható.

4 Kennedy Center

Típus: vízszintes, legördülő lista.

A JFK Center webhelyén kétféleképpen navigálhat: képek húzásával vagy a vízszintes menü használatával.

5. B&O Play

Típus: rögzített, adaptív, vízszintes.

Az oldal termékével ragadja meg a felhasználó figyelmét, így a navigációs sáv meglehetősen egyszerű.

Típus: rögzített, vízszintes, 3D lábléc, reszponzív, legördülő.

A fő funkciókkal és terjedelmes legördülő listával az oldalon történő hosszú görgetés a kívánt oldalra irányítja a felhasználókat.

7. Adria luxusszállodák

Típus: rögzített, vízszintes, méretezhető legördülő lista, 3D lábléc.

Ezen az oldalon egyszerűen lefelé görgetve vagy a rögzített menü használatával megtalálhatja, amire szüksége van.

Típus: rögzített, adaptív, vízszintes, 3D lábléc.

A Kalios navigáció a bal felső sarokban található. A menü ikonra kattintva tájékozódhat a termékekről, ha az egeret a kívánt termék fölé viszi.

Ez az oldal a nyilakra kattintva kezelhető. A felhasználó úgy sétálhat végig az oldalon, mint egy múzeumban. Az egyes szobák oldalát görgetve tájékozódhat.

10 Ausztrál balett

Típus: rögzített, adaptív, nagy legördülő lista

Következtetés

Számos típusú navigációt használhat a webhelyén. Ugyanakkor nincs mindenki számára megfelelő módszer a tökéletes navigáció létrehozására; minden az Ön igényeitől vagy ügyfele kívánságaitól függ. Reméljük, hogy példáink inspirálták Önt, az AGENTE csapata pedig segít megvalósítani legmerészebb elképzeléseit.