Milyen lehet\u0151s\u00e9gek vannak arra, hogy megjelen\u00edts dinamik\u00e1t, \u00e9letet egy statikus, \u00e1ll\u00f3 \u00e9s kiss\u00e9 tal\u00e1n unalmas weboldalon? A UX Planet<\/a> most \u00f6sszeszedett n\u00e9h\u00e1ny lehet\u0151s\u00e9get.<\/p>\n\n\n\n Ha t\u00f6bb blokkot, mez\u0151t \u00e9s m\u00e1s elemet is haszn\u00e1lsz a weboldaladon, melyeknek azonos a st\u00edlusa, akkor ezek k\u00f6z\u00fcl n\u00e9h\u00e1nynak a \u201cmegemel\u00e9se\u201d jav\u00edthat a megjelen\u00e9sen. Ez a technika hasznos lehet az olyan massz\u00edv elemekn\u00e9l, mint a k\u00e1rty\u00e1k, de az olyan kisebb r\u00e9szekn\u00e9l is, mint egy men\u00fcr\u00e9szlet a navig\u00e1ci\u00f3ban.<\/p>\n\n\n\n Egy \u00e1rny\u00e9k mindig dinamik\u00e1t visz egy felhaszn\u00e1l\u00f3i fel\u00fcletbe, an\u00e9lk\u00fcl, hogy val\u00f3di anim\u00e1ci\u00f3t haszn\u00e1lna. <\/p>\n\n\n\n A modern design igyekszik abba az ir\u00e1nyba terelni a felhaszn\u00e1l\u00f3t, hogy tegye meg azt, ami el\u0151ny\u00f6s a weboldaltulajdonos sz\u00e1m\u00e1ra. N\u00f6veli az aktivit\u00e1st a weboldalon vagy az appban. Ez els\u0151sorban az\u00e1ltal tud m\u0171k\u00f6dni, hogy kiemel, illetve megfelel\u0151 sorrendben helyez el bizonyos r\u00e9szeket, blokkokat, gombokat, vagy b\u00e1rmely elemet. <\/p>\n\n\n\n Haszn\u00e1lhatsz kiemel\u00e9seket, kontrasztot egy-egy ism\u00e9tl\u0151d\u0151 elemn\u00e9l az adott csoportban. Egy oszlop egy t\u00e1bl\u00e1zatban, egy ablak, egy sor, melyet ki kell t\u00f6lteni: b\u00e1rmit kiemelhetsz, ami fontos sz\u00e1modra.<\/p>\n\n\n\n Egy-egy anim\u00e1lt elem elhelyez\u00e9se a h\u00e1tt\u00e9rben – legyen sz\u00f3 k\u00f6r\u00f6kr\u0151l, s\u00e1vokr\u00f3l vagy b\u00e1rmilyen vizu\u00e1lis dologr\u00f3l – seg\u00edthet a designnak \u00e9szrevehet\u0151v\u00e9 v\u00e1lni. V\u00e1laszthatsz valamilyen szokatlan geometriai form\u00e1t, mely feldobja a designt. Ez seg\u00edt abban, hogy eml\u00e9kezzenek a weboldalra a felhaszn\u00e1l\u00f3k, mivel ez\u00e1ltal \u00e9rdekesebb\u00e9 v\u00e1lik sz\u00e1mukra.<\/p>\n\n\n\n N\u00e9pszer\u0171ek most a weboldalakon a teljes kijelz\u0151s anim\u00e1ci\u00f3k \u00e9s a vide\u00f3k, melyek jellemz\u0151en a weboldalak f\u0151oldal\u00e1n jelennek meg. Ezek \u00e1ltal\u00e1ban elfoglalj\u00e1k a teljes h\u00e1tteret, ami azt jelenti, hogy megszerzik a felhaszn\u00e1l\u00f3k teljes figyelm\u00e9t. Ez\u00e1ltal az oldal valamif\u00e9le interaktivit\u00e1st is kap, kapcsolatba l\u00e9phet a weboldal a felhaszn\u00e1l\u00f3val, \u00e9s a leghasznosabb inform\u00e1ci\u00f3kat mutathatja meg sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Ha a sz\u00f6veges inform\u00e1ci\u00f3kat egy olyan elrendez\u00e9ssel helyezed el az oldalon, mely a v\u00e9letlenszer\u0171en elrendezett blokkokra \u00e9p\u00fcl, akkor az dinamikus hat\u00e1st kelt, \u00e9s felkelti a felhaszn\u00e1l\u00f3 figyelm\u00e9t. Ha fokoz\u00f3dik az \u00e9rdekl\u0151d\u00e9s, akkor az emberek t\u00fall\u00e9pnek a tartalom megszokott m\u00f3don t\u00f6rt\u00e9n\u0151 befogad\u00e1s\u00e1n. <\/p>\n\n\n\n Ez a m\u00f3dszer alkalmazhat\u00f3 minden olyan designn\u00e1l, ahol sok a sz\u00f6vegmez\u0151, melyet ki kell t\u00f6lteni a felhaszn\u00e1l\u00f3knak. Az egyik mez\u0151 mindig legyen akt\u00edv, ez megmutatja, mire ir\u00e1nyuljon a figyelem, illetve jelezd az \u00e9rv\u00e9nyes\u00edt\u00e9s \u00e1llapot\u00e1t, amikor kit\u00f6lt\u00e9sre ker\u00fclt egy mez\u0151!<\/p>\n\n\n\n Az \u00e1rny\u00e9kok ism\u00e9t n\u00e9pszer\u0171ek lettek, csak a kor\u00e1bbi haszn\u00e1lathoz k\u00e9pest egy sokkal \u00e1tgondoltabb m\u00f3don. Ma m\u00e1r lehets\u00e9ges, hogy sokkal val\u00f3szer\u0171bb\u00e9 tegy\u00fck az \u00e1rny\u00e9kokat, \u00e9s term\u00e9szetesnek t\u0171njenek a designban. <\/p>\n\n\n\n \u00c1rny\u00e9kokat nem csak ablakokhoz, felugr\u00f3khoz, gombokhoz haszn\u00e1lhatsz, hanem b\u00e1rmi kiemelhetsz vel\u00fck, amit csak szeretn\u00e9l. A bet\u0171k is eg\u00e9szen j\u00f3l tudnak kin\u00e9zni n\u00e9ha \u00e1rny\u00e9k haszn\u00e1lat\u00e1val. Ne feledkezz meg azonban a val\u00f3szer\u0171 megjelen\u00e9sr\u0151l!<\/p>\n\n\n\n A parallax effektn\u00e9l<\/a> egy t\u00e1rgy poz\u00edci\u00f3ja m\u00e1shogy v\u00e1ltozik, mint a h\u00e1tt\u00e9r\u00e9 \u00e9s a felhaszn\u00e1l\u00f3\u00e9, a r\u00e9tegek megfelel\u0151 haszn\u00e1lat\u00e1val. A mozg\u00e1st a kurzor helyzete hat\u00e1rozza meg, ak\u00e1r g\u00f6rget\u00e9s, ak\u00e1r az\u00e1ltal, hogy az eg\u00e9rmutat\u00f3 bizonyos blokkok, k\u00e9pek vagy gombok f\u00f6l\u00e9 ker\u00fcl.<\/p>\n\n\n\n A r\u00e9tegek elt\u00e9r\u0151 sebess\u00e9g\u0171 elmozdul\u00e1sa eredm\u00e9nyezi a m\u00e9lys\u00e9g \u00e9s perspekt\u00edva ill\u00fazi\u00f3j\u00e1t. Hat\u00e1sa l\u00e9nyegesen er\u0151sebb, mint az \u00e1rny\u00e9kokkal val\u00f3 j\u00e1t\u00e9k\u00e9, ugyanakkor a fejleszt\u00e9s szempontj\u00e1b\u00f3l is nagyobb kih\u00edv\u00e1s. Ha viszont siker\u00fcl, akkor egy dinamikus \u00e9s leny\u0171g\u00f6z\u0151 weboldal lesz az eredm\u00e9ny.<\/p>\n\n\n\n \u00d3vatosan kell azonban b\u00e1nni a parallax effektekkel is, hogy ne cs\u00fasszon ki a l\u00e1togat\u00f3k l\u00e1ba al\u00f3l a talaj, azaz ne vesz\u00edtsenek el minden stabil pontot a weboldalon. Ott alkalmazd csak, ahol van \u00e9rtelme, nem kell az eg\u00e9sz oldalt er\u0151szakosan t\u00falzs\u00fafolni vele. <\/p>\n\n\n\n \u00d6sszess\u00e9g\u00e9ben teh\u00e1t elmondhat\u00f3, hogy b\u00e1r a felhaszn\u00e1l\u00f3k a legk\u00f6nnyebben az ismert elrendez\u00e9s\u0171 weboldalakat tudj\u00e1k haszn\u00e1lni, ezek unalmasak lehetnek, \u00edgy nem igaz\u00e1n tudj\u00e1k \u0151ket egym\u00e1st\u00f3l megk\u00fcl\u00f6nb\u00f6ztetni. Sz\u00fcks\u00e9g lehet teh\u00e1t valamire, ami egyediv\u00e9 tesz egy weboldalt, \u00e9letet visz bele, amelyt\u0151l dinamikuss\u00e1 v\u00e1lik. Ehhez persze id\u0151 \u00e9s szak\u00e9rtelemre van sz\u00fcks\u00e9g, \u00edgy hasznos, ha gyakorlott fejleszt\u0151 k\u00e9sz\u00edti a weboldalt<\/a>.<\/p>\n\r\nEmelj meg n\u00e9h\u00e1ny weboldal elemet!<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/10\/megemelt-elemek-weboldalon.jpg\")
<\/figure>\n\n\n\nHaszn\u00e1lj kontrasztos sz\u00edneket!<\/h2>\n\n\n\n
Helyezz n\u00e9h\u00e1ny mozg\u00f3 elemet a h\u00e1tt\u00e9rbe!<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/10\/mozgo-elemek-hatterben.jpg\")
<\/figure>\n\n\n\nFigyelj jobban a sz\u00f6vegmez\u0151kre!<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/10\/szovegmezok.jpg\")
<\/figure>\n\n\n\nJ\u00e1tssz az \u00e1rny\u00e9kokkal!<\/h2>\n\n\n\n
Haszn\u00e1lj parallax hat\u00e1st!<\/h2>\n\n\n\n