Weboví dizajnéri musia pri navrhovaní webovej stránky vždy nájsť rovnováhu medzi použiteľnosťou a vizuálnou príťažlivosťou. Bez tejto rovnováhy bude webová stránka pekná na pohľad, ale bude náročná na navigáciu. Alebo to nebude príjemné pre oči, ale s jednoduchou navigáciou. S ohľadom na to sa vyváženie medzi atraktívnou navigáciou a použiteľnosťou nezdá až také ťažké. Aby sme vám pomohli vytvárať nové nápady a inšpiráciu pri vytváraní vlastných ponúk, tu je 30 skvelých príkladov krásnych a užívateľsky prívetivých navigačných ponúk.

Typographica

Táto stránka spája jednoduchosť atraktívneho menu, ktoré zároveň užívateľovi poskytuje nepopierateľne veľmi jednoduchú navigáciu. Ak podržíte kurzor myši nad nadpisom pod logom, uvidíte, že slovo „Typ“ zostane zvýraznené, podržaním kurzora nad zvyškom slov vám umožní presne vybrať príslušnú časť stránky, ktorú chcete navštíviť.


Contrast.ie

Navigácia na Contrast.ie je príkladom jedinečného prístupu k vytváraniu kreatívnych menu. Všetky tlačidlá sú umiestnené v nakreslených obrázkoch komentárov a vyskakujú, keď na ne umiestnite kurzor myši.


Hľadať vo videu

Navigácia na tejto stránke vás prehľadne prevedie šípkami, keď na ne prejdete kurzorom. Efektívna navigácia necháva za sebou komplexný dizajn. Zdá sa, že táto stránka je plne v súlade s týmto výrazom.


Táto stránka oslavuje kreatívnu navigáciu. Ak sa pozriete doľava a prejdete na chlapíka, uvidíte, ako sa bude usmievať, ak prejdete na ikony a obrázky, vedľa ukazovateľa myši okamžite uvidíte popis.


Forty používa kreatívnu navigáciu založenú na obrázkoch. Šípky upozorňujú používateľa na tlačidlá a vyzývajú ho, aby na ne klikol.


healogix

Healogix kladie najdôležitejšie otázky veľkými písmenami, ktoré upútajú pozornosť používateľov. Kedy, čo, prečo a kto? Všetky otázky sú zodpovedané jedným kliknutím domovskej stránke.


Nápady na Nápady

Stránka má iba jeden odkaz na hlavnú stránku, ale je pohodlná a kreatívna. Odkaz padne do oka a dokonca „hovorí“ používateľovi. A väčšina používateľov má rada stránky, s ktorými môžu interagovať.


Sarah Longnecker

Navigácia na tejto webovej stránke je jednoduchá a ľahko sa používa. Bannery za vybranou stránkou umožňujú ľahko rozlíšiť navigačné prvky od zvyšku stránky.


Vyrobil Elephant

Made by Elephant používa veľké a ľahko použiteľné navigačné menu. Modrý text tiež pekne kontrastuje s tmavšou červenou a čiernou.


Práca v Play

Pri prechádzaní položkami ponuky na tejto stránke si všimnete, že pozícia pozadia a farba celej stránky sa rýchlo menia.


jasné vľavo

Po umiestnení kurzora myši na odkazy vyzerá ponuka na tejto stránke ako nalepená poznámka. Šablóna tejto stránky je úplne postavená na tomto koncepte.


Poklepanie na vzor

Hneď ako vstúpite na stránku, privíta vás zelená šípka, ktorá vám poskytne informácie o každej sekcii, ktorú na stránke zadáte. Používateľom to umožňuje jednoduchú interakciu so stránkou.


Nezastaviteľný robot Ninja

Navigácia je rovnako cool ako názov tejto stránky. A čo viac, výrazne zlepšuje aj dizajn.


deň červených nosov


Polárne zlato

Toto textové navigačné menu kombinuje jasné a pútavé vzhľad s pohodlím pomocou Javascriptu, ale namiesto toho použijete Flash.


Webová stránka FX Blog

Jedinečný a zaujímavý pohľad na navigáciu. Odkazy na domovskej stránke a blog sa vkladajú do vety pozdĺž hlavičky stránky. To neporušuje zásady použiteľnosti, stránka je ľahko čitateľná a veľmi efektívna.


Opera Ma-g?

Položky navigačného menu sa dajú ľahko nájsť, zelené podčiarknutie vytvára efekt jednoty navigačných prvkov a zvyšku stránky.


Owltastic

Owltastic je príkladom skvelého používateľského zážitku. Každý navigačný prvok reaguje animáciou, keď naň prejdete. Rovnako ako ostatné príklady v tomto zozname, navigácia je krásna a ľahko sa používa.


Guillaume Pacheco

Rovnako ako Owltastic, aj táto webová stránka komunikuje s používateľom, keď na ňu umiestnite kurzor myši rôzne prvky stránky. Šablóna stránky je dobre spracovaná a ľahko sa v nej naviguje.


Plnotučné mlieko

Plnotučné mlieko používa jasnú textovú navigáciu. Keď umiestnite kurzor myši na odkazy, horná časť stránky sa zvýrazní. Ide o skvelý príklad navigácie, ktorá je príjemná pre používateľov aj vyhľadávače.


Hotel Arca Lui Noe

Navigácia na tejto stránke je krásna a ľahko sa používa. Je veľmi štýlový a dobre sa hodí k celkovému dizajnu stránky.


Sushi a roboty

Sushi and Robots využíva elegantný dizajn na vytvorenie krásneho a atraktívneho navigačného menu, ktoré sa odlišuje od ostatných.


Sharify používa monochromatickú vlastnú navigačnú ponuku, ktorá je príjemná pre oči a pohodlná vďaka kontrastu medzi bielym textom a nebesky modrým pozadím.


Stephen Caver

Tu je navigácia prvá vec, ktorú si všimnete, keď vstúpite na stránku. Je „čistý“ a ľahko sa používa. Navyše použitie voľné miesto Navigácia je výborná.


Myšlienka a teória

Táto stránka zaujala minimalistický prístup k navigácii a jednoducho to funguje. Na stránkach nie je nič zbytočné, čo by rozptyľovalo používateľov.


Trochu viac

Opäť platí, že vysoký kontrast čiernej a bielej dáva tejto stránke väčšiu použiteľnosť. Pri prejdení myšou sa navigačné prvky rozsvietia jasnou modrou farbou, čím dodajú stránke interaktivitu a estetickú hodnotu.


Ulster Grocer

Navigácia využíva jasné farby, jednoduchosť používania a harmóniu obsahu stránky s modrým pozadím.


Stránka spoločnosti Adaptd využíva kreatívnu, jasnú a krásnu navigáciu. Najvýraznejší aspekt tejto navigácie je v sekcii portfólia. Keď umiestnite kurzor myši na tlačidlá, štítky sa stanú priehľadnými a splynú s pozadím stránky.


Sac Jazz Festival 2009

Táto stránka má navigačnú ponuku, ktorú používateľ ani nemusí zisťovať. Okrem toho vhodné farby ponuky dodajú celej stránke ešte viac farby. Dizajnové prvky do seba bezchybne zapadajú.


  • Aktuálne 1,00/5

V tomto článku budeme hovoriť o tom, čo by malo byť dobrá navigácia na stránke a ako to urobiť naozaj efektívne. Materiál je užitočný predovšetkým pre tých, ktorí si chcú vytvoriť vlastnú webovú stránku.

Navigácia sú metódy, triky a špeciálne prvky, ktoré vám umožňujú pohybovať sa medzi jej stránkami.Všetko závisí od toho, ako dobre je to premyslené: tak konverzia, ako aj úspech propagácie zdrojov.

Dá sa to prirovnať k dispozícií domu. Ak je rozloženie dobré, potom ľahko nájdete miestnosť, ktorú potrebujete, nezamieňajte si vstup do kuchyne so vstupom do obývačky. Ak je veľa pohybov, chodieb a dverí, potom sa v takomto dome môžete stratiť.

Rovnako aj s webovými stránkami. Ak je navigácia zlá, existuje veľa odkazov, ktoré nevedú na správne miesto, alebo nie je jasné, kam povedú – používatelia sú zmätení a nevedia nájsť potrebné stránky a informácie, ktoré potrebujú.

Pre vyhľadávače dôležitá je aj dobrá, logická navigácia. vyhľadávač by mali pochopiť úlohu tejto stránky na vašom webe. Zlepšuje sa aj dobre navrhnutá navigácia behaviorálne faktory pretože používatelia môžu rýchlejšie nájsť informácie, ktoré potrebujú.

Základné prvky a navigačné techniky

Navrhujem, aby ste sa najprv oboznámili s hlavnými prvkami, ktoré vám pomôžu pri navigácii na stránke.

Navigácia v širšom zmysle zahŕňa mnoho techník a prvkov, ktorých hlavnou úlohou je umožniť používateľovi prejsť požadovanú stránku a získajte informácie.

Jedným z týchto prvkov, ktorý je na stránke už dlho povinný, jelogo spoločnosti, po kliknutí sa dostaneme k.

Napríklad tu stačí kliknúť na logo, aby ste sa vrátili na úvodnú stránku.

Táto technika je už používateľom známa a umožňuje vám vrátiť sa na domovskú stránku z ktorejkoľvek stránky lokality.

Druhým „klasickým“ prvkom jeHorné menu .

Nachádza sa pod hlavičkou a skladá sa z tlačidiel alebo odkazov, ktoré vedú do hlavných sekcií stránky. Takáto ponuka môže byť zložitejšia, s rozbaľovacími zoznamami, ktoré vedú na podsekcie alebo jednotlivé stránky.

V posledných rokoch sa stala populárnou iná technika - to jehamburgerové menu, v ktorom sú všetky odkazy skryté v schematických troch vodorovných pomlčkách. Tento prvok najskôr žil iba ďalej mobilné zariadenia, ale teraz je čoraz bežnejší na verziách stránok pre počítače:

Tiež na niektorých stránkach môžete vidieťvertikálne menu. Používa sa najčastejšie, ak sa do horného menu nezmestí všetko, čo potrebujete, alebo ak potrebujete používateľom uľahčiť navigáciu v niektorých nadpisoch.

Alebo môže žiť sám, bez horizontálne menu v hornej časti stránky. A dokonca môže existovať niekoľko takýchto ponúk, ako tu - vľavo a vpravo:

(micro markup) je ďalší navigačný prvok, ktorý nielen nastavuje hierarchiu stránky, ale tiež uľahčuje návrat na požadovaný úsek alebo na hlavnú stránku z ľubovoľnej stránky:

Odkazy v článkochna iné stránky webu – to sú tiež navigačné prvky. Ide napríklad o:

Nielenže vám pomôžu posunúť sa ďalej, ale sú dobré aj z hľadiska SEO – táto technika vám umožňuje zvýšiť počet prezeraných stránok.

Odkazy v päte(päta, päta) je ďalším navigačným prvkom. Zvyčajne sa v päte umiestňuje odkaz na kontakty, používateľskú zmluvu, pravidlá používania stránky atď. A niekedy môžete vidieť veľa odkazov na rôzne stránky stránky zoskupené podľa kategórie:

Na dlhých vstupných stránkach, ako aj na niektorých weboch, môžete vidieť v hornej častiukazateľ postupu, ktorý ukazuje, ako ďaleko ste posunuli danú stránku:

Ukazovateľ priebehu nájdete aj v prihláške a registrácii, ak je formulár dlhý a rozdelený do niekoľkých krokov.

To uľahčuje navigáciu po samotnej stránke – vidíte, koľko až do konca. Je to aj malý psychologický trik, ktorý tlačí návštevníka, aby dokončil, čo začal.

Na dlhé strany a na vstupných stránkach môžete nájsť ďalší skvelý navigačný prvok –tlačidlo pre rýchly návrat nahor:

Toto tlačidlo umožňuje rýchly návrat na začiatok stránky.

Do horného menu, kontaktov alebo iných dôležitá informácia boli neustále pred našimi očami, používa sa takzvaná „lepkavá hlavička“ alebo „lepkavá navigačná lišta“. Neustále zostáva v hornej časti stránky, kým sa používateľ posúva nadol.

Tu máme vždy pred očami vyhľadávanie, logo s možnosťou návratu na hlavnú stránku a malé menu.

Ako využiť všetky tieto prvky s rozumom a úžitkom?

Ako zjednodušiť navigáciu na stránke

Pri práci na navigácii na vašom webe si zapamätajte a skúste použiť jedno jednoduché pravidlo:z hlavnej stránky na ktorúkoľvek stránku webu musí používateľ dosiahnuť maximálne tri kliknutia. A naopak.

1. Umiestnite logo domovskej stránky do pravého horného rohu.

Toto je všeobecne akceptovaný štandard, a to z dobrého dôvodu: práve na tomto mieste logo okamžite upúta. A používateľ nemusí hľadať, na čo kliknúť, aby sa vrátil.

2. Zvážte primárne a sekundárne prvky.

Horné menu môže byť primárne. Sekundárny - bočný panel, ďalšie odkazy vo vnútri textu, v päte. Drobčeky môžu fungovať aj ako sekundárne navigačné prvky.

Horné menu je tu hlavným navigačným prvkom a drobky sú pomocné.

Presuňte najdôležitejšie časti stránky do hlavnej ponuky.

3. Zvážte, ktoré stránky možno zoskupiť.

Ak sa všetko nezmestí do horného (alebo bočného) menu. Napríklad často nájdete možnosť, keď sú niektoré časti stránky skryté pod jedným tlačidlom „Informácie“, „Viac“, „Viac“ atď.

Mail.ru mail takto „skryl“ projekty spoločnosti:

4. Nájdite dobré miesto pre informačné odkazy.

Informačné odkazy sú ako „Kontakty“, „Verejná ponuka“ a podobne. Používateľ musí nájsť tieto odkazy na všetkých stránkach lokality. Preto je pre ne najvhodnejšie miesto päta (footer).

Tu je názorný príklad takéhoto umiestnenia informačných odkazov:

5. Nezabudnite na dizajn.

Všetky navigačné prvky by mali byť jasne viditeľné a malo by byť jasné, že odkaz je odkaz a tlačidlo je tlačidlo. Odkazy zvýraznite farbou, urobte ich tučným písmom alebo podčiarknutím. Je dôležité, aby používateľ pochopil, že sa pred ním nachádza klikateľný prvok, ktorý ho pošle na inú stránku webu.

Tu nemôžem menu nazvať úspešným. Príliš malé písmo. Tu je však iný prístup - priamo z hlavnej stránky môžete prejsť do katalógu svojej obľúbenej značky alebo zobraziť zľavy:

6. Neotvárajte stránky v nových oknách.

To mätie používateľov.

7. Ďalšie prvky.

Zvážte ďalšie prvky, ako napr„Súvisiace produkty“, „Odporúčaný obsah“ alebo „Súvisiace články“, čo používateľovi pomôže rýchlejšie nájsť to, čo potrebuje.

8. Rady.

Zjednodušte navigáciu pomocoupopisy aby ste používateľovi pomohli pochopiť, na čo slúži tlačidlo alebo ikona:

9. Menu nechajte na viditeľnom mieste.

Snažte sa, aby návštevník nemusel na každej stránke hľadať nové menu. Nemeňte ani neodstraňujte ponuky na sekundárnych stránkach.

10. Neskrývajte svoje kontakty ďaleko.

V hlavičke nechajte svoje telefónne číslo. Uistite sa, že tlačidlá spätného volania a chat s online asistentom sú okamžite viditeľné – najčastejšie v spodnej časti stránky vľavo alebo vpravo, ale nie na boku.

Adresa môže byť ponechaná v hlavičke aj v päte. Nenúťte návštevníka hľadať všetky tieto informácie po celej stránke.

Všetky tieto techniky výrazne zjednodušia navigáciu na stránke, zjednodušia ju a zefektívnia.

Vyberte hosting pre stránku:

Pri práci na navigácii myslite v prvom rade na používateľa.Podarí sa mu určite v čo najkratšom čase nájsť všetko, čo hľadal? Je všetko jasné človeku, ktorý sa ako prvý stretol nielen s vašou stránkou, ale aj s vaším odborom všeobecne? Sú stránky skryté ďaleko, dá sa na každú dostať maximálne na tri kliknutia?

Zamyslite sa sami nad tým, na ktorých stránkach sa vám ľahšie orientuje, a učte sa od tých najlepších.

Veľa šťastia pri vývoji vlastného internetového zdroja!

Ahoj Bikepost!
Blíži sa sezóna a mnohí uvažujú o navigácii na motorke na dlhé vzdialenosti. Po vyskúšaní mnohých možností som sa rozhodol pre jednu, nie najlacnejšiu, ale spoľahlivú možnosť, o ktorej vám poviem nižšie.

Podstata tohto systému spočíva v telefóne a jeho uchytení, no keďže často nie je spojenie v zahraničí, tak využívam offline navigáciu. Ale prečo nepoužívať iba svoj telefón?! - pýtaš sa a ja ti odpoviem:

  • Osobný telefón môžete meniť pomerne často (neberiete ho pri každom držiaku, pretože univerzálny držiak je veľmi nepohodlný)
  • Čo mám robiť, ak dostanem hovor alebo potrebujem zavolať? Navigácia sa stratí + musíte odstrániť držiak a potom ho vrátiť na miesto - to nie je vhodné, ak nemáte náhlavnú súpravu alebo je odstránená prilba
  • často osobný telefón náklady sú jednoznačne vyššie ako použitý iPhone 5
  • Strata / rozbitie telefónu pre navigáciu nebude tak urážlivé ako váš úplne nový a drahý smartfón + v tomto prípade budete mať možnosť zálohovania navigácia
  • Na cestách je vždy dobré mať pri sebe telefón s fotoaparátom navyše
Ako ste už pochopili, stredom systému je: iPhone 5 (prečo práve tento telefón? Pretože na navigáciu stačí 4” obrazovka, neprekáža pri jazde a hardvér je dostatočne výkonný na navigáciu) na 16Gb + držiak Puzdro Interphone iPhone 5 Tubular Handlebar Case+ Osvetľovací kábel. Dovoľte mi to hneď uviesť náklady na tento systém sú asi 10-12 tisíc rubľov ale oplati sa to pri prvej ceste. Teraz je v priemere cena iPhone 5 16Gb na sekundárnom trhu od 5 do 7 tisíc, držiak stojí asi 2-3 tisíc, platená navigácia je 2 tisíc. Tento systém je napájaný z môjho USB rádia, ale dá sa z neho plne nabiť konvenčné USB zásuvky 1A/5V, pamätajte na to kvalitná výživa je kľúčom k dlhovekosti vašich gadgetov. Ukazuje sa, že za tieto peniaze dostaneme vynikajúceho navigátora, ktorý na rozdiel od čínskych náprotivkov za rovnaké peniaze nemá také nedostatky, ako sú:
  • Hrozná kvalita obrazovky
  • Obrovská veľkosť tela a masívna montáž
  • Brzdenie, nestabilný systém a nepresné GPS
Výhody, ktoré získame:
  • Produktívne zariadenie, ktoré vás nesklame ani nezamrzne v nevhodnú chvíľu
  • Skvelá obrazovka ktorý je viditeľný aj v tých najťažších podmienkach
  • multimediálny prehrávač
  • Záložný telefón
  • cúvacia kamera
  • Výmena podvozku bez výmeny zariadenia
Ako navigačný softvér používam Navitel s mapami SNŠ a Európy, v Appstore to stojí asi 2 000 rubľov. Môžete tiež použiť bezplatné analógy s offline vyrovnávacou pamäťou, ako napríklad: Maps.Me, Google Mapy , Yandex Navigator.
Na čom môžete ušetriť bez toho, aby ste veľa stratili na kvalite? Na začiatok je to držiak, ale neodporúčam vám, aby ste si vybrali možnosti lacnejšie ako 20 dolárov, pretože, ako ukazuje prax, takéto držiaky sú často veľmi nepohodlné. Potrebujete držiak, ktorý pevne zafixuje telefón vo vnútri a dá sa ľahko vybrať, pretože často na čerpacích staniciach budeme musieť brať telefón so sebou. Tu sú niektoré analógy za nižšiu cenu: iBikeConcole - 39,99 dolárov; Tigra Sport BikeConsole Bike – 37,90; LifeProof - 29,95 dolárov; Givi S955B držiak smartfónu a iPhone 5 – 37 libier. Pamätajte, že jednoduchosť použitia tohto systému závisí od výberu držiaka, takže v tomto bode by ste nemali príliš šetriť.
Druhý bod na záchranu je to Navigačný softvér. Tu sú dve možnosti: najlacnejšie, ale zložitejšie, bezplatné a menej spoľahlivé. Lacné je dať na iPhone útek z väzenia a stiahnite si napadnuté verzie softvéru, ale môže nastať problém s aktualizáciou máp. Voľná ​​možnosť na navigáciu sa používa bezplatný softvér, ale ani tu nie je všetko také jednoduché Nikdy sa nespolieham len na jeden navigačný program A vždy mám pár ďalších.

Dúfam, že moje skúsenosti budú pre vás užitočné. S týmto systémom som cestoval 3 sezóny a žiadne objektívne nevýhody som okrem ceny neodhalil. Pripomínam, že podstata tohto systému spočíva v dobrom hardvéri, obrazovke, držiaku, takže ak nájdete naozaj dobrý držiak pre smartfóny s Androidom, podeľte sa oň v komentároch, ako Android smartfóny stále môžu niesť funkciu palubného počítača, ale to je úplne iný príbeh :).

Pár fotiek z Google, aby ste mali predstavu, ako taká banda vyzerá na motorke.

Navigácia na webe sa stala dôležitým aspektom dizajnu UX – môže vášmu webu buď pomôcť, alebo ublížiť. Navigáciu možno prirovnať k podpore domu. Ak základný plán nie je dobre vypracovaný, ohrozujete celú budovu.

Navigácia sa môže líšiť od lokality k lokalite; neexistujú žiadne konkrétne pokyny, ako to urobiť správne.

Čo je navigácia?

Pojem „navigácia“ možno interpretovať rôznymi spôsobmi. Celkovo ide o kľúčovú časť stránky, ktorá používateľom umožňuje nájsť to, čo hľadajú, bez ďalších kliknutí. Privedie vašich návštevníkov k najdôležitejším informáciám.

Aké otázky vám pomôžu pripraviť si navigačnú mapu?

    Kto je tvoj cieľové publikum A aký je účel vašej stránky?

    Aké informácie a aké informačné moduly by mali byť na stránke?

    Ako by mali byť informácie zoskupené podľa ich dôležitosti pre používateľa?

    Ako usporiadať funkčné a informačné moduly do stromovej štruktúry?

Plánovanie navigácie

Ako organizovať obsah? Ako pomenovať a usporiadať prvky?

Od samého začiatku si dôkladne pohovorte o hierarchii, v ktorej by sa informácie mali zobrazovať:

    Pracujte s obsahom. Triedenie kariet možno použiť na pomoc dizajnérom nájsť odpovede na otázky ešte predtým, ako začnú navrhovať.

    Potom sa postarajte o štruktúru. Vytvorte mapu stránok alebo zoznam pomocou rôzne úrovne informácie. Navigácia by mala byť čo najjednoduchšia. Preťažené stránky s nejasnými nadpismi menu komplikujú používanie stránky. Pri vytváraní navigačných ponúk hovorte s používateľmi v ich jazyku.

    Nakoniec definujte položky navigačnej ponuky, typ a dizajn.

Pamätajte, že neexistuje žiadny štandard, ktorý by definoval, ako by mala navigácia na vašej stránke vyzerať. Skôr je dôležité pochopiť, akú stránku tvoríte, aké posolstvo chcete používateľom odovzdať a aký cieľ s ňou musíte dosiahnuť. Napríklad pri vytváraní stránky internetového obchodu môžete použiť algoritmy, ktoré návštevníkom umožnia čo najskôr nájsť správny produkt alebo službu a kúpiť si ho. Čo sa týka promo stránky, môžete sa zamerať na rýchle vyhľadávanie informácií, zapojiť používateľa do herný proces a zjednodušiť hlavné prvky pre jednoduchšiu navigáciu.

Trendy dizajnu navigačného panela

Existuje niekoľko populárnych typov navigácie na lokalite, ktoré môžete použiť pre svoj projekt. Ktorý si vyberiete, je len na vás.

Horizontálne alebo vertikálne?

Voľba medzi horizontálnou a vertikálnou navigáciou je určená niekoľkými faktormi na základe konštrukčných prvkov, použiteľnosti a účelu obsahu. Najčastejšie sú preferované malé lokality horizontálny panel navigácia v hlavičke stránky, zatiaľ čo veľké firemné stránky používajú horizontálne aj vertikálne pruhy.

Veľké rozbaľovacie zoznamy

Škálované rozbaľovacie ponuky sú lištou ponuky, ktorá „vypadne“ alebo „vyletí“ z hlavnej navigačnej lišty. Tento typ navigácie nie je vhodný pre každú lokalitu. Hlavnou výhodou rozbaľovacích zoznamov je, že vám umožňujú zobraziť veľa odkazov naraz. V akých prípadoch teda môžu byť potrebné? Veľké rozbaľovacie zoznamy sú vhodné pre internetové obchody s objemným zoznamom kategórií, ktoré sa pravdepodobne nezmestia do štandardnej navigačnej ponuky. V súlade s tým môžu túto navigáciu úspešne využívať aj iné stránky ponúkajúce komplexnú škálu služieb.

Pevné ("lepkavé")

Pevná alebo lepkavá navigačná lišta pri posúvaní stránky nezmizne. Správne sa takáto navigácia používa na stránkach, kde sú výzvy na akciu umiestnené na hlavnom paneli.

Objemová päta

Zvykli sme si, že v päte sa zobrazujú odkazy na právne informácie, widgety s odberom newslettera alebo ikony sociálnych sietí. Mnohé stránky majú veľkú pätu, ak obsahujú veľa obsahu alebo ak ide o internetové obchody, pre ktoré je dôležité uvádzať ikony so spôsobmi platby.

Navigácia s responzívnym dizajnom

Vďaka responzívnej navigácii bude váš web vyzerať dobre rôzne zariadenia. Na mobilných zariadeniach sa panel zvyčajne zrúti do ponuky hamburgerov. Ikona ponuky pozostáva z troch vodorovných pruhov a po otvorení sú prvky umiestnené pod sebou a tvoria takzvaný „hamburger“. Tento druh menu bol vytvorený, aby uľahčil navigáciu na mobilných zariadeniach bez toho, aby zaberal príliš veľa miesta.

Prepojenie loga s domovskou stránkou

Znie to ako samozrejmosť, ale stále existujú stránky, ktoré toto pravidlo porušujú. Po kliknutí na logo používatelia očakávajú, že budú presmerovaní na domovskú stránku – ide o bežnú prax.

Prvotný druhotný

Primárna navigácia sa najčastejšie skladá zo základných prvkov, ktoré

vyzerať rovnako na celej stránke. Hlavné ponuky sa zvyčajne nachádzajú v hornej časti stránky v strede, vľavo alebo vpravo. Sekundárna navigácia pozostáva z doplnkových prvkov a zvyčajne sa nachádza v strede stránky a nie je zvýraznená zodpovedajúcim dizajnom.

Poďme sa pozrieť na 10 najlepších nápadov na dizajn navigácie na webe.

Typ: vertikálny, adaptívny.

Kliknite na ikonu ponuky vľavo a hlavná ponuka sa presunie do stredu stránky.

2.WE3

Typ: pevný, vertikálny; nachádza vpravo hore.

Dizajn stránky je interaktívny. Pri rolovaní stránky sa objavia nové informácie.

Typ: adaptívny, vertikálny; nachádza sa na ľavej strane.

Navigácia v ľavom paneli, ktorý sa rozbalí z ikony ponuky, je podobná tomu, na čo ste zvyknutí mobilné verzie stránky. Navigácia sa nachádza vľavo od nástupnej časti a je dobre viditeľná.

4 Kennedyho centrum

Typ: horizontálny, rozbaľovací zoznam.

Na webe JFK Center sa môžete pohybovať dvoma spôsobmi: presúvaním obrázkov alebo pomocou horizontálnej ponuky.

5. B&O Play

Typ: pevný, adaptívny, horizontálny.

Stránka priťahuje pozornosť používateľa svojim produktom, takže navigačná lišta je celkom jednoduchá.

Typ: pevná, horizontálna, 3D päta, responzívna, rozbaľovacia.

Dlhé rolovanie na stránke s hlavnými funkciami a objemný rozbaľovací zoznam nasmeruje používateľov na požadovanú stránku.

7. Luxusné hotely na Jadrane

Typ: pevný, horizontálny, škálovateľný rozbaľovací zoznam, 3D päta.

Na tejto stránke môžete nájsť to, čo potrebujete, jednoduchým posúvaním stránky nadol alebo pomocou pevnej ponuky.

Typ: pevná, adaptívna, horizontálna, 3D päta.

Navigácia Kalios sa nachádza vľavo hore. Kliknutím na ikonu ponuky získate informácie o produktoch umiestnením kurzora myši na požadovaný produkt.

Túto stránku je možné spravovať kliknutím na šípky. Používateľ sa môže po stránke prechádzať ako v múzeu. Ak chcete získať informácie, môžete posúvať stránku každej miestnosti.

10 Austrálsky balet

Typ: pevný, adaptívny, veľký rozbaľovací zoznam

Záver

Existuje mnoho typov navigácie, ktoré môžete na svojej stránke použiť. Zároveň neexistuje žiadny univerzálny spôsob, ako vytvoriť dokonalú navigáciu; všetko závisí od vašich potrieb alebo želaní vášho klienta. Dúfame, že vás naše príklady inšpirovali a tím AGENTE vám zasa pomôže realizovať vaše najodvážnejšie nápady.