{"id":249455,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/navigoinnin-kasittelytekniikat-reagoivassa-suunnittelussa\/"},"modified":"2022-12-25T16:45:00","modified_gmt":"2022-12-25T13:45:00","slug":"navigoinnin-kasittelytekniikat-reagoivassa-suunnittelussa","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/navigoinnin-kasittelytekniikat-reagoivassa-suunnittelussa\/","title":{"rendered":"Navigoinnin k\u00e4sittelytekniikat reagoivassa suunnittelussa"},"content":{"rendered":"

\n Navigointi on responsiivisen suunnittelun kriittinen osa. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 responsiivisen verkkosivuston suunnittelun hy\u00f6dyllisyytt\u00e4 mittaa suurelta osin mobiili- ja ty\u00f6p\u00f6yt\u00e4asettelujen v\u00e4lisen siirtymisen helppous.\n<\/p>\n

\n Tehokas responsiivinen navigointi vaatisi sujuvan koon muuttamisen pienemm\u00e4lle resoluutiolle ja sitten suurentamisen suuremmille n\u00e4yt\u00f6ille, kuten p\u00f6yt\u00e4tietokoneiden n\u00e4yt\u00f6ille.\n<\/p>\n

\n Millainen navigointi on hy\u00f6dyllist\u00e4 responsiivisissa malleissa?\n<\/p>\n

\n Web-sivustojen navigoinnin hallinnassa on erilaisia \u200b\u200btrendej\u00e4 ja tekniikoita.\n<\/p>\n

\n Minimalistinen l\u00e4hestymistapa navigointiin
\n<\/h5>\n

\n T\u00e4t\u00e4 l\u00e4hestymistapaa navigointiin pidet\u00e4\u00e4n minimalistisena, koska navigointiin tehd\u00e4\u00e4n mahdollisimman v\u00e4h\u00e4n ty\u00f6t\u00e4 sujuvan, puhtaan vaihdon varmistamiseksi. Navigoinnin vaihto ei ole \u00e4killinen; melko hienovaraisesti tehty n\u00e4yt\u00f6n koon muuttuessa. L\u00e4hestymistapa on siis sellainen, ett\u00e4 navigointielementtien uudelleenk\u00e4sittely tehd\u00e4\u00e4n mahdollisimman v\u00e4h\u00e4n maksimaalisten, eleganttien ja hienovaraisten tehosteiden aikaansaamiseksi. Navigointilinkit on mitoitettu ja minimoitu, ja ne sopivat hyvin sivulle. T\u00e4t\u00e4 l\u00e4hestymistapaa voidaan k\u00e4ytt\u00e4\u00e4 verkkosivustoille, jotka haluavat keskitty\u00e4 eleganttiin ja yksinkertaisuuteen ja jotka haluavat mainostaa tiettyj\u00e4 ominaisuuksia. Esimerkiksi sivusto CrossTrees<\/strong>n\u00e4ytt\u00e4\u00e4 eritt\u00e4in yksinkertaisen navigointivalikon, joka keskittyy olennaiseen ja s\u00e4ilytt\u00e4\u00e4 suurimman tilan kuvasis\u00e4ll\u00f6n esittelyyn. Se siirt\u00e4\u00e4 k\u00e4ytt\u00e4j\u00e4n huomion p\u00e4\u00e4teemaan, jonka h\u00e4n haluaa v\u00e4litt\u00e4\u00e4, eik\u00e4 anna k\u00e4ytt\u00e4j\u00e4n menett\u00e4\u00e4 keskittymist\u00e4. Kiinteist\u00f6sivustojen lis\u00e4ksi t\u00e4llaisia \u200b\u200bsivustoja voivat k\u00e4ytt\u00e4\u00e4 muun muassa taiteilijat, suunnittelijat ja valokuvaajat.\n<\/p>\n

\n Kuten n\u00e4ette, t\u00e4m\u00e4 sivusto korostaa minimalismia; painopiste on kuvassa ja tunnuslauseessa, joka on ”Townhouse Office Space To Let in Glasgow”.Navigointipalkin helppok\u00e4ytt\u00f6isyys on minimoitu, mutta silti selke\u00e4.\n<\/p>\n

\n Toinen esimerkki on web-suunnittelusivusto Hashtag17<\/strong>, joka tarjoaa my\u00f6s useita muita palveluita. Haasteena on esitell\u00e4 kaikki tarjotut palvelut yhdelle sivulle sotkematta sivua. Viraston mukauttama tekniikka oli n\u00e4ytt\u00e4\u00e4 tilannekuva kaikista palveluista verkkosivuston alaosassa valkoista taustaa vasten, mik\u00e4 auttaa k\u00e4ytt\u00e4j\u00e4\u00e4 navigoimaan mille tahansa 17 sivusta t\u00e4lt\u00e4 yhdelt\u00e4 alueelta.\n<\/p>\n

\"\"<\/a><\/p>\n

\n Etuna t\u00e4ss\u00e4 on se, ett\u00e4 yksi katse n\u00e4ytt\u00e4\u00e4 katsojalle kaikki 17 t\u00e4m\u00e4n yrityksen tarjoamaa palvelua. Valkoinen tausta tarjoaa h\u00e4iri\u00f6tt\u00f6m\u00e4n l\u00e4hestymistavan, ja k\u00e4ytt\u00e4j\u00e4t voivat v\u00e4litt\u00f6m\u00e4sti havaita alueen, josta he saattavat etsi\u00e4 apua.\n<\/p>\n

\n Kun navigointipalkki kest\u00e4\u00e4 verkkosivun painon!
\n<\/h5>\n

\n Useimmat responsiiviset verkkosivustot sijoittavat navigointivalikon yl\u00e4reunaan. T\u00e4m\u00e4n tekemisess\u00e4 on selkeit\u00e4 etuja, kuten helppok\u00e4ytt\u00f6isyys, JavaScript-riippuvuuden puuttuminen ja yksinkertainen CSS. T\u00e4m\u00e4 ei kuitenkaan ole optimaalinen sijainti matkapuhelimille, joissa kiinteist\u00f6 on haaste. Mielenkiintoinen tapa k\u00e4sitell\u00e4 navigointia responsiivisessa sivuston suunnittelussa on ty\u00f6nt\u00e4\u00e4 se sivuston alaosaan, kuten kirjailija Luke Wroblewski ehdotti. Navigointipalkki vie v\u00e4hemm\u00e4n tilaa ty\u00f6p\u00f6yd\u00e4ll\u00e4, joten se voidaan sijoittaa p\u00e4\u00e4lle. Lis\u00e4ksi k\u00e4ytt\u00e4j\u00e4t etsiv\u00e4t sit\u00e4 t\u00e4\u00e4lt\u00e4. Mutta pienemmiss\u00e4 laitteissa on ihanteellinen ty\u00f6nt\u00e4\u00e4 se pohjaan, jossa se ei vie paljon tilaa. Navigointiluettelo sijoitetaan verkkosivuston alatunnisteeseen tai alatunnisteen yl\u00e4puolelle. Sivuston otsikkoosassa on ankkurilinkki siihen.\n<\/p>\n

#access li a {\n   padding: 0;\n   margin: 0;\n   font-size: 16px;\n   height: 57px;\n}\n.container {\n   padding-bottom: 549px;\n   position: relative;\n}\n.nav-strip {\n   position: absolute;\n   bottom: 0;\n}<\/code><\/pre>\n
\n  T\u00e4m\u00e4n etuna on tilaa enemm\u00e4n sis\u00e4ll\u00f6lle verkkosivuston yl\u00e4osan taittoosassa; Samalla navigointi on helpompaa, helposti saatavilla olevaa ja huomaamatonta. Lis\u00e4etuna on, ett\u00e4 k\u00e4ytt\u00e4j\u00e4 voi lukea koko sis\u00e4ll\u00f6n ja selata sivun alareunaan, josta h\u00e4n l\u00f6yt\u00e4\u00e4 navigointipalkin. T\u00e4m\u00e4 antaa heille enemm\u00e4n vaihtoehtoja napsauttaa. Muita etuja ovat, ett\u00e4 t\u00e4m\u00e4 l\u00e4hestymistapa ei vaadi JavaScriptin k\u00e4ytt\u00f6\u00e4 ja on siten helpompi hallita ja vianm\u00e4\u00e4ritys. T\u00e4m\u00e4 menetelm\u00e4 on helpompi suunnitella responsiivisia verkkosivustoja, koska yl\u00e4- ja alatunnisteen sijainti (jotka ovat kiinte\u00e4t) mahdollistavat helpon siirtymisen.\n<\/p>\n
\n  Hankala osa t\u00e4llaisessa navigointielementin j\u00e4rjestelyss\u00e4 on, ett\u00e4 ihmisen t\u00e4ytyy hyp\u00e4t\u00e4 edestakaisin p\u00e4\u00e4st\u00e4kseen linkkeihin. Kyseess\u00e4 on siis hankala vuorovaikutus, joka voi olla mobiilissa melko hankalaa ja voi haitata mobiilinavigoinnin sujuvuutta. Toinen haittapuoli on se, ett\u00e4 jos k\u00e4ytt\u00e4j\u00e4 ei lue sis\u00e4lt\u00f6\u00e4, h\u00e4n ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 vieritt\u00e4\u00e4 n\u00e4yt\u00f6n alareunaan, jolloin h\u00e4n voi j\u00e4tt\u00e4\u00e4 navigointipalkin huomaamatta ja tiet\u00e4\u00e4 nyt, mist\u00e4 sit\u00e4 etsi\u00e4.\n<\/p>\n
\n  T\u00e4m\u00e4 voidaan korjata k\u00e4ytt\u00e4m\u00e4ll\u00e4 Vaihtovalikkoa
\n<\/h5>\n
\n  T\u00e4ss\u00e4 valikko liukuu auki itse otsikossa ja antaa puhtaan, tyylikk\u00e4\u00e4n ilmeen N\u00e4yt\u00e4\/piilota-ominaisuuden avulla. Se on helppo koodata ja se on sujuva siirtym\u00e4. Mutta haasteena on, ett\u00e4 Android ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 tarjoa niin sujuvaa siirtymist\u00e4 CSS-animaatioiden kanssa.\n<\/p>\n
\n  Hyv\u00e4 esimerkki Togglen k\u00e4yt\u00f6st\u00e4 on Starbucks<\/strong> :\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Lis\u00e4ksi, jos valikko on suuri, se voi silti vied\u00e4 paljon tilaa. T\u00e4m\u00e4 ongelma voidaan korjata luomalla eri valikot eri laitteille. Tehokas tapa tehd\u00e4 t\u00e4m\u00e4 on k\u00e4ytt\u00e4\u00e4 Responsive Select Menu -laajennusta.\n<\/p>\n
\n  Toinen tapa on k\u00e4ytt\u00e4\u00e4 Select Menu -l\u00e4hestymistapaa.
\n<\/h5>\n
\n  Toisin kuin muut navigointimenetelm\u00e4t, t\u00e4m\u00e4 tekniikka sis\u00e4lt\u00e4\u00e4 Javascriptin k\u00e4yt\u00f6n. Se tekee meist\u00e4 muotoominaisuuden. Se muuntaa valikkoluettelon valituksi elementiksi. Vaikka se saattaa olla tehokkain elementti jokaisessa selaimessa, koska ne on johdettu avattavista valikoista, suunnittelijat voivat pit\u00e4\u00e4 niit\u00e4 rajoittavina, koska niit\u00e4 on vaikea mukauttaa eri selaimissa. N\u00e4iden valikkojen suurimmat edut responsiivisissa verkkosivustojen suunnittelussa ovat niiden toimivuus. Toinen my\u00f6nteinen asia on, ett\u00e4 niit\u00e4 voidaan k\u00e4ytt\u00e4\u00e4 navigointilinkkien ohjaamiseen, kun niit\u00e4 on liikaa; t\u00e4m\u00e4 voi olla ongelma TopNav-l\u00e4hestymistavassa. Ne vapauttavat my\u00f6s paljon tilaa web-asettelussa, jota voidaan k\u00e4ytt\u00e4\u00e4 web-suunnitteluun. Valitut valikot voidaan r\u00e4\u00e4t\u00e4l\u00f6id\u00e4 eri laitteille – eri mobiiliselaimet k\u00e4sittelev\u00e4t valikoita eri tavoin.\n<\/p>\n
\n  Helppo tapa k\u00e4ytt\u00e4\u00e4 Select Menu -valikkoa on TinyNav<\/strong>, JQuery-laajennus.\n<\/p>\n
\n  Sis\u00e4llyt\u00e4 JS-tiedosto jQuery-versiosi lataamisen j\u00e4lkeen ja kirjoita sitten seuraava koodi:\n<\/p>\n
\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n
\n  Lis\u00e4\u00e4 muutama rivi CSS:\u00e4\u00e4n. Piilota tinynav-luokka. Aseta se n\u00e4ytt\u00e4m\u00e4\u00e4n miss\u00e4 tahansa haluamasi keskeytyspisteess\u00e4:\n<\/p>\n
\/* styles for desktop *\/\n.tinynav { display: none }\n \n\/* styles for mobile *\/\n@media screen and (max-width: 600px) {\n    .tinynav { display: block }\n    #nav { display: none }\n}<\/code><\/pre>\n
\n  Haittapuolena on, ett\u00e4 ne eiv\u00e4t ehk\u00e4 ole yht\u00e4 siistej\u00e4 ja esteettisi\u00e4 kuin muut navigointivalikkotekniikat. Ne ovat parhaita yksinkertaisilla sivuilla, joissa on yksisivuinen asettelu, kuten ApacheCoube<\/strong>.\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Sis\u00e4ll\u00f6nhallinta on eritt\u00e4in t\u00e4rke\u00e4\u00e4 responsiivisten verkkosivustojen tehokkaan navigoinnin kannalta. Kun suunnittelet responsiivisen verkkosivuston kehyskehyst\u00e4, m\u00e4\u00e4rit\u00e4, mit\u00e4 sis\u00e4lt\u00f6\u00e4 ty\u00f6p\u00f6yd\u00e4lle tarvitaan ja mink\u00e4laista sis\u00e4lt\u00f6\u00e4 suositellaan mobiiliasettelulle. Varmista, ett\u00e4 sijoitetaan vain sis\u00e4lt\u00f6, joka t\u00e4ytt\u00e4\u00e4 tietyt tavoitteet. T\u00e4ss\u00e4 suhteessa navigointi voi noudattaa samanlaista l\u00e4hestymistapaa. Mobiililaitteiden responsiivisten navigointivalikoiden virtaviivaistamiseksi varmista, ett\u00e4 mobiilinavigointivalikko n\u00e4ytt\u00e4\u00e4 vain t\u00e4rkeimm\u00e4t linkit. v\u00e4hemm\u00e4n t\u00e4rke\u00e4t on j\u00e4tett\u00e4v\u00e4 pois. N\u00e4in ollen mobiilik\u00e4ytt\u00e4j\u00e4t voivat vain n\u00e4hd\u00e4, mit\u00e4 he haluavat verkkosivuillaan.\n<\/p>\n
\n  Sinun on m\u00e4\u00e4ritett\u00e4v\u00e4, mik\u00e4 sis\u00e4lt\u00f6 on ehdottoman kriittist\u00e4 sijoittaaksesi siihen verkkosivuston osaan, jota ihmiset tarkkailevat maksimaalisesti, joko p\u00f6yt\u00e4koneella tai mobiililaitteella, ja tee se.\n<\/p>\n
\n  Responsiivisella verkkosivustolla ty\u00f6skennelless\u00e4si on muistettava tiettyj\u00e4 t\u00e4rkeit\u00e4 kohtia sujuvan navigoinnin varmistamiseksi:\n<\/p>\n