# Kas ir responsīvā navigācija? Dinamiskas izvēlnes mobilajai pārlūkošanai

Reaģējoša navigācija ir mobilo ierīču optimizācijas galvenais aspekts. Ja mobilā navigācija nepalīdz lietotājiem vienkārši nokļūt no punkta A uz punktu B, viņi, visticamāk, ātri pametīs lapu, kas izraisīs apmeklētāju skaita samazināšanos un, kas vēl svarīgāk, ieņēmumu zaudējumus. Dažādi risinājumi, piemēram, izvelkamās izvēlnes vai apakšējās navigācijas joslas, var palīdzēt uzlabot navigāciju tīmekļa vietnē.

## Kas veido labu, atsaucīgu navigāciju?

Laba navigācijas sistēma ir jebkuras tīmekļa vietnes pamats — tā palīdz lietotājiem atrast viņiem svarīgo informāciju. Navigācijas elementiem jādarbojas nevainojami, **tiem jābūt skaidriem un pašsaprotamiem**, kā arī **intuitīvi lietojamiem**. Galvenās problēmas, kas saistītas ar responsīvo navigāciju, ir ierobežotā ekrāna platība un skārienu mijiedarbība mobilajās ierīcēs. Tomēr ir vairāki responsīvi risinājumi, kas nodrošina tīmekļa vietnes navigācijas pieredzi, kas ir skaidra un lietotājam draudzīga.

Responsīvā tīmekļa dizaina pamatā ir ideja, ka lapas saturs un izkārtojums dinamiski pielāgojas ierīces apstākļiem un ekrāna izmēram.

Vairumā gadījumu vislabāk ir ievērot „mobile first” pieeju. Šī dizaina stratēģija dod priekšroku \*\*tīmekļa projektu mobilajai optimizācijai,\*\*vispirms pievēršot uzmanību mobilās versijas dizainam, lietojamībai un veiktspējai, pirms to pielāgojot datoriem un klēpjdatoriem. Esošās tīmekļa vietnes navigācijas sistēmas pielāgošana mobilajām ierīcēm bieži vien ir sarežģītāka un laikietilpīgāka. Tāpēc, pirms sākat plānot un veidot responsīvo navigāciju, jums jāatbild uz dažiem svarīgiem jautājumiem, jo īpaši par navigācijas izvietojumu un kopējo struktūru.

Note [Piekļūstamā tīmekļa vietne](https://www.ionos.com/lv-lv/digitalguide/timekla-vietnes/timekla-izstrade/timekla-vietnes-pieejamiba/) ir svarīgāka nekā jebkad agrāk, un navigācijai ir izšķiroša nozīme, tostarp ekrāna lasītāja saderība, pietiekams kontrasts un citas piekļūstamības funkcijas.

### Kur jānovieto navigācija?

Parastās navigācijas izvietošanas metodes ietver navigāciju lapas apakšā un izvietošanu lapas augšdaļā. Navigācija lapas apakšā lietotājiem redzama tikai kā saite mobilās lapas sākumā, kas tos noved tieši uz lapas apakšdaļu, kur atrodas atsevišķi izvēlnes elementi.

Tomēr navigācija, kas atrodas lapas apakšā, nav ļoti lietotājdraudzīga: lietotāji sagaida, **ka svarīgi navigācijas elementi būs viegli pieejami**, tāpēc navigācija lapas apakšā kļūst arvien retāka. Šodien mobilā navigācija biežāk atrodas lapas augšdaļā. Šī klasiskā pieeja responsīvam dizainam ir pazīstama lielākajai daļai lietotāju.

### Kā ir strukturēta navigācija?

Navigācijas strukturēšanai ir dažādas iespējas. Divas populārākās iespējas ir saraksta navigācija un responsīvie tīkli.

**Sarakstus var attēlot** gan kā vienlīmeņa, gan daudzlīmeņu navigāciju. Šim formātam ir divas skaidras priekšrocības: pirmkārt, tīmekļa izstrādātāji var **salīdzinoši vienkārši īstenot sarakstus**, un, otrkārt, tas pielāgojas lietotāja ieradumiem.

[![Image: List navigation in the IONOS Digital Guide](https://www.ionos.com/lv-lv/digitalguide/fileadmin/_processed_/8/0/csm_list-navigation-ionos-uk_622b27f01d.webp "List navigation in the IONOS Digital Guide")](https://www.ionos.com/lv-lv/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/list-navigation-ionos-uk.png) In the Digital Guide, available categories are presented to you in a list format; Source: https://www.ionos.co.uk/digitalguide/ **Tīkla navigācija** ir ideāli piemērota **īsiem navigācijas elementiem** un ir īpaši populāra e-komercijā. Elementi tiek parādīti blakus tīkla izkārtojumā, kur kolonnu skaits ir atkarīgs no ekrāna izmēra. Ja plānojat izmantot divu kolonnu tīklu, pārliecinieties, ka elementu skaits ir pāra, lai izvairītos no asimetriska izkārtojuma.

[![Image: Grid navigation in the Zalando shop](https://www.ionos.com/lv-lv/digitalguide/fileadmin/_processed_/f/5/csm_grid-navigation-zalando_e280cae450.webp "Grid navigation in the Zalando shop")](https://www.ionos.com/lv-lv/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/grid-navigation-zalando.png) Zalando presents its various product categories in a well-structured grid layout; Source: https://www.zalando.com/  Note Abos variantos ir iespējams pievienot papildu apakšsadaļas, kuras var parādīties un pazust.

## Kādi mobilās navigācijas risinājumi ir pieejami?

Tagad nonākam pie galvenā jautājuma: **kā būtu jāatver mobilā navigācijas izvēlne?** Koncepciju nosaka veids, kā navigācija tiek parādīta lietotājam. Parādīšanas iespējas ir dažādas: navigācija var tikt parādīta tieši lapā vai atvērta, pieskaroties saitei. Navigācija var pārvietot saturu uz leju vai atrasties virs tā. Šeit esam apkopojuši dažus piemērus.

Note Neatkarīgi no tā, kuru navigācijas koncepciju izvēlaties, hamburger ikona ir kļuvusi par standarta risinājumu izvēlņu atvēršanai mobilajās ierīcēs. Mazais simbols ar trim horizontālām līnijām tagad ir plaši atpazīstams viedtālruņos un planšetdatoros kā universāls slēptās izvēlnes simbols.

### Navigācija izvēlnes palīdzībā

Viens no klasiskajiem responsīvajiem navigācijas veidiem ir nolaižamā izvēlne. Tā ir ļoti līdzīga tradicionālajai datora navigācijai, tāpēc lietotājiem ir pazīstama un bieži izvēlas šo navigācijas koncepciju. Izvēlni aktivizē, nospiežot pogu vai ikonu, un tā parādās virs satura, to pilnībā neaizsedzot.

[![Image: Dropdown navigation on the Amazon website](https://www.ionos.com/lv-lv/digitalguide/fileadmin/_processed_/c/f/csm_amazon-dropdown-navigation-uk_80c32908fd.webp "Dropdown navigation on the Amazon website")](https://www.ionos.com/lv-lv/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/amazon-dropdown-navigation-uk.png) Amazon features a dropdown navigation that overlays the main page content; Source: https://www.amazon.co.uk/ ### Slīdošā navigācija

Vēl viens populārs navigācijas veids ir izvelkamā izvēlne, kas pazīstama arī kā akordeona vai izplešamā lodziņa navigācija. Kad lietotāji pieskaras izvēlnes pogai, navigācija izvelkas — atšķirībā no nolaižamajām izvēlnēm, tā neuzklājas pār saturu, bet gan to pabīda uz leju. Lai gan šī pieeja ir nedaudz sarežģītāka īstenošanā, tā tiek uzskatīta **par ļoti skalējamu un vietu taupīgu**. Pateicoties tās spējai iekļaut apakšnavigācijas elementus, tā piedāvā elegantu risinājumu gan vienkāršām, gan sarežģītākām izvēlnēm.

[![Image: Slidedown navigation on the URBAN TOOL website](https://www.ionos.com/lv-lv/digitalguide/fileadmin/_processed_/3/0/csm_urban-tool-slidedown-navigation_466a070747.webp "Slidedown navigation on the URBAN TOOL website")](https://www.ionos.com/lv-lv/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/urban-tool-slidedown-navigation.png) In the URBAN TOOL online shop, the navigation slides down without covering the content positioned below it; Source: https://www.urbantool.com/en/ ### Apakšējā navigācijas josla

Apakšējā navigācijas josla ir arvien populārāks risinājums mobilajām lietotnēm un tīmekļa vietnēm, kur izvēlne tiek parādīta **ekrāna apakšā**. Šis navigācijas stils ir īpaši lietotājam draudzīgs, jo to viegli sasniegt viedtālruņos. Tas labi darbojas projektiem ar dažiem galvenajiem navigācijas elementiem un nodrošina skaidru, organizētu struktūru, kas palīdz lietotājiem ātri pārslēgties starp tīmekļa vietnes galvenajām sadaļām.

[![Image: Bottom navigation bar on Snapchat](https://www.ionos.com/lv-lv/digitalguide/fileadmin/_processed_/9/a/csm_snapchat-bottom-navigation-bar_f3f5c51516.webp "Bottom navigation bar on Snapchat")](https://www.ionos.com/lv-lv/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/snapchat-bottom-navigation-bar.png) With Snapchat’s bottom navigation bar, you can easily switch between main categories like ‘Stories’ and ‘Chat’; Source: https://www.snapchat.com/ ### Navigācija ārpus ekrāna

Šajā pieejā responsīvā navigācija pēc noklusējuma atrodas ārpus ekrāna redzamās zonas. Izvēlne nav integrēta galvenajā izkārtojumā, tādējādi off-canvas navigācija ir vietu taupījošs risinājums, kas neaizņem vietu skata logā. Tikai **tad, kad tiek pieskāries izvēlnes ikonai**, navigācija parādās skatā, atbīdot visu izkārtojumu malā. Šī metode ir īpaši piemērota **lielām navigācijas hierarhijām** ar vairākiem apakšizvēlnēm.

[![Image: Off canvas navigation on Uber](https://www.ionos.com/lv-lv/digitalguide/fileadmin/_processed_/1/4/csm_off-canvas-navigation-uber_5dab0c7284.webp "Off canvas navigation on Uber")](https://www.ionos.com/lv-lv/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/off-canvas-navigation-uber.png) As soon as you tap the menu icon on Uber’s mobile site, the navigation panel replaces the current content view; Source: https://www.uber.com/


This is a markdown version of: [https://www.ionos.com/lv-lv/digitalguide/timekla-vietnes/timekla-dizains/responsiva-navigacija-timekla-dizaina/](https://www.ionos.com/lv-lv/digitalguide/timekla-vietnes/timekla-dizains/responsiva-navigacija-timekla-dizaina/) for AI/LLM consumption.