Kas ir res­ponsī­vā na­vi­gā­ci­ja? Di­na­mis­kas izvēlnes mobilajai pār­lū­ko­ša­nai

Reaģējoša na­vi­gā­ci­ja ir mobilo ierīču op­ti­mi­zā­ci­jas galvenais aspekts. Ja mobilā na­vi­gā­ci­ja nepalīdz lie­to­tā­jiem vienkārši nokļūt no punkta A uz punktu B, viņi, vis­ti­ca­māk, ātri pametīs lapu, kas izraisīs ap­mek­lē­tā­ju skaita sa­ma­zi­nā­ša­nos un, kas vēl svarīgāk, ieņēmumu zau­dē­ju­mus. Dažādi ri­si­nā­ju­mi, piemēram, iz­vel­ka­mās izvēlnes vai apakšējās na­vi­gā­ci­jas joslas, var palīdzēt uzlabot na­vi­gā­ci­ju tīmekļa vietnē.

Kas veido labu, atsaucīgu na­vi­gā­ci­ju?

Laba na­vi­gā­ci­jas sistēma ir jebkuras tīmekļa vietnes pamats — tā palīdz lie­to­tā­jiem atrast viņiem svarīgo in­for­mā­ci­ju. Na­vi­gā­ci­jas ele­men­tiem jā­dar­bo­jas ne­vai­no­ja­mi, tiem jābūt skaidriem un paš­sap­ro­ta­miem, kā arī intuitīvi lie­to­ja­miem. Galvenās problēmas, kas saistītas ar res­ponsī­vo na­vi­gā­ci­ju, ir ie­ro­be­žo­tā ekrāna platība un skārienu mi­jie­dar­bī­ba mobilajās ierīcēs. Tomēr ir vairāki res­ponsī­vi ri­si­nā­ju­mi, kas nodrošina tīmekļa vietnes na­vi­gā­ci­jas pieredzi, kas ir skaidra un lie­to­tā­jam draudzīga.

Res­ponsī­vā tīmekļa dizaina pamatā ir ideja, ka lapas saturs un iz­kār­to­jums dinamiski pie­lā­go­jas ierīces ap­stāk­ļiem un ekrāna izmēram.

Vairumā gadījumu vislabāk ir ievērot „mobile first” pieeju. Šī dizaina stra­tē­ģi­ja dod priekš­ro­ku **tīmekļa projektu mobilajai op­ti­mi­zā­ci­jai,**vispirms pievēršot uzmanību mobilās versijas dizainam, lie­to­ja­mī­bai un veikt­spē­jai, pirms to pie­lā­go­jot datoriem un klēpjda­to­riem. Esošās tīmekļa vietnes na­vi­gā­ci­jas sistēmas pie­lā­go­ša­na mobilajām ierīcēm bieži vien ir sa­rež­ģī­tā­ka un lai­kie­til­pī­gā­ka. Tāpēc, pirms sākat plānot un veidot res­ponsī­vo na­vi­gā­ci­ju, jums jāatbild uz dažiem svarīgiem jau­tā­ju­miem, jo īpaši par na­vi­gā­ci­jas iz­vie­to­ju­mu un kopējo struktūru.

Kur jānovieto na­vi­gā­ci­ja?

Parastās na­vi­gā­ci­jas iz­vie­to­ša­nas metodes ietver na­vi­gā­ci­ju lapas apakšā un iz­vie­to­ša­nu lapas augšdaļā. Na­vi­gā­ci­ja lapas apakšā lie­to­tā­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 na­vi­gā­ci­ja, kas atrodas lapas apakšā, nav ļoti lie­to­tājdrau­dzī­ga: lietotāji sagaida, ka svarīgi na­vi­gā­ci­jas elementi būs viegli pieejami, tāpēc na­vi­gā­ci­ja lapas apakšā kļūst arvien retāka. Šodien mobilā na­vi­gā­ci­ja biežāk atrodas lapas augšdaļā. Šī klasiskā pieeja res­ponsī­vam dizainam ir pazīstama lie­lā­ka­jai daļai lietotāju.

Kā ir struk­tu­rē­ta na­vi­gā­ci­ja?

Na­vi­gā­ci­jas struk­tu­rē­ša­nai ir dažādas iespējas. Divas po­pu­lā­rā­kās iespējas ir saraksta na­vi­gā­ci­ja un res­ponsī­vie tīkli.

Sarakstus var attēlot gan kā vien­lī­me­ņa, gan daudzlī­me­ņu na­vi­gā­ci­ju. Šim formātam ir divas skaidras priekš­ro­cī­bas: pirmkārt, tīmekļa iz­strā­dā­tā­ji var sa­lī­dzi­no­ši vienkārši īstenot sarakstus, un, otrkārt, tas pie­lā­go­jas lietotāja ie­ra­du­miem.

Tīkla na­vi­gā­ci­ja ir ideāli piemērota īsiem na­vi­gā­ci­jas ele­men­tiem un ir īpaši populāra e-komercijā. Elementi tiek parādīti blakus tīkla iz­kār­to­ju­mā, kur kolonnu skaits ir atkarīgs no ekrāna izmēra. Ja plānojat izmantot divu kolonnu tīklu, pār­lie­ci­nie­ties, ka elementu skaits ir pāra, lai iz­vai­rī­tos no asi­met­ris­ka iz­kār­to­ju­ma.

Kādi mobilās na­vi­gā­ci­jas ri­si­nā­ju­mi ir pieejami?

Tagad nonākam pie galvenā jautājuma: kā būtu jāatver mobilā na­vi­gā­ci­jas izvēlne? Kon­cep­ci­ju nosaka veids, kā na­vi­gā­ci­ja tiek parādīta lie­to­tā­jam. Pa­rā­dī­ša­nas iespējas ir dažādas: na­vi­gā­ci­ja var tikt parādīta tieši lapā vai atvērta, pie­ska­ro­ties saitei. Na­vi­gā­ci­ja var pārvietot saturu uz leju vai atrasties virs tā. Šeit esam ap­ko­po­ju­ši dažus piemērus.

Na­vi­gā­ci­ja izvēlnes palīdzībā

Viens no kla­sis­ka­jiem res­ponsī­va­jiem na­vi­gā­ci­jas veidiem ir nolaižamā izvēlne. Tā ir ļoti līdzīga tra­di­cio­nā­la­jai datora na­vi­gā­ci­jai, tāpēc lie­to­tā­jiem ir pazīstama un bieži izvēlas šo na­vi­gā­ci­jas kon­cep­ci­ju. Izvēlni aktivizē, nospiežot pogu vai ikonu, un tā parādās virs satura, to pilnībā ne­aiz­se­dzot.

Slīdošā na­vi­gā­ci­ja

Vēl viens populārs na­vi­gā­ci­jas veids ir izvelkamā izvēlne, kas pazīstama arī kā akordeona vai izplešamā lodziņa na­vi­gā­ci­ja. Kad lietotāji pieskaras izvēlnes pogai, na­vi­gā­ci­ja izvelkas — atšķirībā no no­lai­ža­ma­jām izvēlnēm, tā ne­uz­klā­jas pār saturu, bet gan to pabīda uz leju. Lai gan šī pieeja ir nedaudz sa­rež­ģī­tā­ka īs­te­no­ša­nā, tā tiek uzskatīta par ļoti skalējamu un vietu taupīgu. Pa­tei­co­ties tās spējai iekļaut ap­akš­na­vi­gā­ci­jas elementus, tā piedāvā elegantu ri­si­nā­ju­mu gan vien­kār­šām, gan sa­rež­ģī­tā­kām izvēlnēm.

Apakšējā na­vi­gā­ci­jas josla

Apakšējā na­vi­gā­ci­jas josla ir arvien po­pu­lā­rāks ri­si­nā­jums mobilajām lietotnēm un tīmekļa vietnēm, kur izvēlne tiek parādīta ekrāna apakšā. Šis na­vi­gā­ci­jas stils ir īpaši lie­to­tā­jam draudzīgs, jo to viegli sasniegt viedtāl­ru­ņos. Tas labi darbojas pro­jek­tiem ar dažiem gal­ve­na­jiem na­vi­gā­ci­jas ele­men­tiem un nodrošina skaidru, or­ga­ni­zē­tu struktūru, kas palīdz lie­to­tā­jiem ātri pār­slēg­ties starp tīmekļa vietnes gal­ve­na­jām sadaļām.

Na­vi­gā­ci­ja ārpus ekrāna

Šajā pieejā res­ponsī­vā na­vi­gā­ci­ja pēc no­klu­sē­ju­ma atrodas ārpus ekrāna redzamās zonas. Izvēlne nav integrēta galvenajā iz­kār­to­ju­mā, tādējādi off-canvas na­vi­gā­ci­ja ir vietu taupījošs ri­si­nā­jums, kas neaizņem vietu skata logā. Tikai tad, kad tiek pie­skā­ries izvēlnes ikonai, na­vi­gā­ci­ja parādās skatā, atbīdot visu iz­kār­to­ju­mu malā. Šī metode ir īpaši piemērota lielām na­vi­gā­ci­jas hie­rar­hi­jām ar vairākiem ap­akš­iz­vēlnēm.