{"id":247507,"date":"2022-12-25T16:15:00","date_gmt":"2022-12-25T13:15:00","guid":{"rendered":"https:\/\/inform.click\/navigeerimise-kasitsemise-tehnikad-tundlikes-kujundustes\/"},"modified":"2022-12-25T16:27:00","modified_gmt":"2022-12-25T13:27:00","slug":"navigeerimise-kasitsemise-tehnikad-tundlikes-kujundustes","status":"publish","type":"post","link":"https:\/\/inform.click\/et\/navigeerimise-kasitsemise-tehnikad-tundlikes-kujundustes\/","title":{"rendered":"Navigeerimise k\u00e4sitsemise tehnikad tundlikes kujundustes"},"content":{"rendered":"

\n Navigeerimine on tundliku disaini oluline element. Selle p\u00f5hjuseks on asjaolu, et tundliku veebisaidi kujunduse kasulikkust m\u00f5\u00f5dab suurel m\u00e4\u00e4ral mobiili- ja t\u00f6\u00f6lauapaigutuste vahelise \u00fclemineku lihtsus.\n<\/p>\n

\n T\u00f5hus tundlik navigeerimine n\u00f5uaks sujuvat suuruse muutmist madalama eraldusv\u00f5ime saavutamiseks ja seej\u00e4rel suuremate ekraanide (nt lauaarvutite ekraanide) suurendamist.\n<\/p>\n

\n Milline navigeerimine on tundliku kujunduse jaoks kasulik?\n<\/p>\n

\n Veebisaitidel navigeerimise haldamisel on erinevad suundumused ja tehnikad.\n<\/p>\n

\n Minimalistlik l\u00e4henemine navigeerimisele
\n<\/h5>\n

\n Sellist l\u00e4henemist navigeerimisele peetakse minimalistlikuks, kuna navigeerimisega tehakse minimaalselt t\u00f6\u00f6d, et tagada sujuv, puhas l\u00fclitus. Navigeerimise l\u00fclitus ei ole j\u00e4rsk; pigem delikaatselt tehtud, kuna ekraani suurus muutub. Seet\u00f5ttu on l\u00e4henemine selline, et navigeerimiselementide \u00fcmbert\u00f6\u00f6tamine tehakse minimaalselt, et saavutada maksimaalne, elegantne ja peen efekt. Navigeerimislingid on suurusega ja minimaalsed ning sobivad kenasti lehele. Seda l\u00e4henemisviisi saab kasutada veebisaitide puhul, mis soovivad keskenduda elegantsusele ja lihtsusele ning valivad teatud funktsioonide reklaamimise. N\u00e4iteks veebisait CrossTrees<\/strong>n\u00e4itab v\u00e4ga lihtsat navigeerimismen\u00fc\u00fcd, keskendudes olulisele ja j\u00e4ttes suurema ruumi pildisisu esitlemiseks. See nihutab kasutaja fookuse p\u00f5hiteemale, mida nad soovivad edasi anda, ega lase kasutajal fookust kaotada. Lisaks kinnisvarasaitidele saavad selliseid veebisaite kasutada muu hulgas kunstnikud, disainerid ja fotograafid.\n<\/p>\n

\n Nagu n\u00e4ete, r\u00f5hutab see veebisait minimalismi; fookus on pildil ja tunnuslausel, milleks on “Glasgow's \u00fc\u00fcrile anda linnamaja kontoriruum”. Navigeerimisribale ligip\u00e4\u00e4s on minimaalne, kuid samas selge.\n<\/p>\n

\n Teine n\u00e4ide on veebikujunduse veebisait Hashtag17,<\/strong> mis pakub ka mitmeid muid teenuseid. V\u00e4ljakutse on esitleda k\u00f5iki pakutavaid teenuseid \u00fchel lehel, ilma lehte segamata. Agentuuri kohandatud tehnika seisnes selles, et veebisaidi allosas kuvatakse valgel taustal k\u00f5igi teenuste hetkt\u00f5mmis, mis aitab kasutajal navigeerida selle \u00fcksiku piirkonna 17 lehele.\n<\/p>\n

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

\n Siin on eeliseks see, et \u00fcheainsa pilguga kuvatakse vaatajale k\u00f5ik 17 selle ettev\u00f5tte pakutavat teenust. Valge taust ei sega t\u00e4helepanu ja kasutajad saavad koheselt m\u00e4rgata piirkonna, mille osas nad v\u00f5ivad abi otsida.\n<\/p>\n

\n Kui navigeerimisriba kannab veebilehe raskust!
\n<\/h5>\n

\n Enamik reageerivaid veebisaite paigutab navigeerimismen\u00fc\u00fc \u00fclaossa. Sellel on selged eelised, nagu rakendamise lihtsus, JavaScripti s\u00f5ltuvuse puudumine ja lihtne CSS. See pole aga optimaalne positsioneerimine mobiilidele, kus kinnisvara on v\u00e4ljakutseks. Huvitav viis reageeriva veebisaidi kujunduse puhul navigeerimise haldamiseks on l\u00fckata see saidi p\u00f5hja, nagu soovitas autor Luke Wroblewski. Navigeerimisriba v\u00f5tab t\u00f6\u00f6laual v\u00e4hem ruumi ja seet\u00f5ttu saab selle asetada kohale. Pealegi v\u00f5iksid kasutajad seda ka siit otsida. Kuid v\u00e4iksematel seadmetel on ideaalne l\u00fckata see p\u00f5hja, kus see ei v\u00f5ta palju ruumi. Navigeerimisloend asetatakse veebisaidi jalusesse v\u00f5i vahetult jaluse kohale. Sellele viiv ankurlink on veebisaidi p\u00e4ise osas.\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  Selle eeliseks on ruumi rohkema sisu jaoks veebisaidi \u00fclaosas; samal ajal on navigeerimine lihtsam, ligip\u00e4\u00e4setav ja diskreetne. T\u00e4iendav eelis on see, et kasutaja saab lugeda kogu sisu ja kerida lehe allossa, kust leiab navigeerimisriba. See annab neile kl\u00f5psamiseks rohkem v\u00f5imalusi. Teised eelised on see, et see l\u00e4henemisviis ei n\u00f5ua JavaScripti kasutamist ja seet\u00f5ttu on seda lihtsam hallata ja t\u00f5rkeotsingut teha. See meetod on tundlike veebisaitide kujundamisel lihtsam, kuna p\u00e4ise ja jaluse asukoht (mis on fikseeritud) v\u00f5imaldab h\u00f5lpsat \u00fcleminekut.\n<\/p>\n
\n  Sellise navigeerimiselemendi paigutuse ebamugav osa on see, et inimene peab linkidele juurdep\u00e4\u00e4suks h\u00fcppama edasi-tagasi. Seega on tegemist ebamugava suhtlusega, mis v\u00f5ib mobiilis olla \u00fcsna t\u00fclikas ja takistada mobiilis navigeerimise sujuvust. Veel \u00fcks puudus on see, et kui kasutaja sisu ei loe, ei pruugi ta ekraani allserva kerida ja seega ei pruugi navigeerimisriba n\u00e4ha ning teab n\u00fc\u00fcd, kust seda otsida.\n<\/p>\n
\n  Seda saab parandada l\u00fclitusmen\u00fc\u00fc abil
\n<\/h5>\n
\n  Siin avaneb men\u00fc\u00fc p\u00e4ises endas ja see annab puhta, elegantse v\u00e4limuse koos n\u00e4itamise\/peitmise funktsiooniga. Seda on lihtne kodeerida ja see on sujuv \u00fcleminek. Kuid v\u00e4ljakutse on selles, et Android ei pruugi CSS-animatsioonidega nii sujuvat \u00fcleminekut pakkuda.\n<\/p>\n
\n  Hea n\u00e4ide Toggle'i kasutamisest on Starbucks<\/strong> :\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Veelgi enam, kui men\u00fc\u00fc on suur, v\u00f5ib see siiski palju ruumi v\u00f5tta. Seda probleemi saab lahendada, luues erinevatele seadmetele erinevad men\u00fc\u00fcd. T\u00f5hus viis selleks on pistikprogrammi Responsive Select Menu kasutamine.\n<\/p>\n
\n  Teine meetod on valiku men\u00fc\u00fc kasutamine.
\n<\/h5>\n
\n  Erinevalt teistest navigeerimismeetoditest h\u00f5lmab see tehnika Javascripti kasutamist. See muudab meid vormi omaduseks. See teisendab men\u00fc\u00fcloendi valitud elemendiks. Kuigi see v\u00f5ib olla igas brauseris k\u00f5ige paremini toimiv element, kuna need p\u00e4rinevad rippmen\u00fc\u00fcdest, v\u00f5ivad disainerid pidada neid piiravateks, kuna eri brauserites on neid keeruline kohandada. Nende men\u00fc\u00fcde suurimad eelised tundliku veebisaidi kujunduse puhul on nende toimimine. Veel \u00fcks positiivne punkt on see, et neid saab kasutada navigeerimislinkide juhtimiseks, kui neid on liiga palju; see v\u00f5ib olla TopNavi l\u00e4henemisviisi probleem. Samuti vabastavad need veebipaigutuses palju ruumi, mida saab kasutada veebikujunduseks. Valitud men\u00fc\u00fcsid saab kohandada erinevatele seadmetele \u2013 erinevad mobiilibrauserid k\u00e4sitlevad valitud men\u00fc\u00fcsid erineval viisil.\n<\/p>\n
\n  Lihtne viis valida men\u00fc\u00fcd on JQuery pistikprogrammi TinyNav kaudu.<\/strong>\n<\/p>\n
\n  Kaasake JS-fail p\u00e4rast jQuery versiooni laadimist ja seej\u00e4rel kirjutage j\u00e4rgmine kood:\n<\/p>\n
\n<script>\n<![CDATA[\n\n$(function() {\n\u00a0\u00a0$(\"#nav\").tinyNav();\n});\n]]>\n<\/script><\/code><\/pre>\n
\n  Lisage oma CSS-i paar rida. Peida tinynav klass. M\u00e4\u00e4rake see kuvama mis tahes soovitud katkestuspunktis:\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  Puuduseks on see, et need ei pruugi olla nii korralikud ja esteetilised kui muud navigeerimismen\u00fc\u00fc tehnikad. Need on parimad lihtsatel lehtedel, millel on \u00fche lehe paigutus, n\u00e4iteks ApacheCoube<\/strong>.\n<\/p>\n
\"\"<\/a><\/p>\n
\n  Sisuhaldus on tundlikel veebisaitidel t\u00f5husa navigeerimise jaoks \u00fclioluline. Reageeriva veebisaidi raamistiku kavandamisel m\u00e4\u00e4rake, millist sisu on t\u00f6\u00f6laua jaoks vaja ja millist sisu eelistatakse mobiilipaigutuse jaoks. Veenduge, et paigutataks ainult sisu, mis t\u00e4idab konkreetseid eesm\u00e4rke. Sellega seoses v\u00f5ib navigeerimine j\u00e4rgida sarnast l\u00e4henemisviisi. Mobiilseadmete tundlike navigeerimismen\u00fc\u00fcde sujuvamaks muutmiseks veenduge, et mobiili navigeerimismen\u00fc\u00fcs kuvatakse ainult k\u00f5ige olulisemad lingid; v\u00e4hem olulised tuleb v\u00e4lja j\u00e4tta. Seega saavad mobiilikasutajad oma veebisaitidel lihtsalt n\u00e4ha, mida nad tahavad.\n<\/p>\n
\n  Peate kindlaks m\u00e4\u00e4rama, milline sisu on \u00fclioluline paigutada veebisaidi sellesse ossa, mida inimesed maksimaalselt j\u00e4lgivad, olgu see siis lauaarvutis v\u00f5i mobiilis, ja seda tegema.\n<\/p>\n
\n  Sujuva navigeerimise tagamiseks tuleb tundlikul veebisaidil t\u00f6\u00f6tades meeles pidada teatud p\u00f5hipunkte.\n<\/p>\n