Ma m\u00e1r azonban az anim\u00e1ci\u00f3k eset\u00e9ben t\u00f6bbr\u0151l van sz\u00f3, mint puszt\u00e1n eszt\u00e9tik\u00e1r\u00f3l. Az anim\u00e1ci\u00f3k ugyanis k\u00f6nnyebb\u00e9 teszik a felhaszn\u00e1l\u00f3knak a weboldal haszn\u00e1lat\u00e1t, az interakci\u00f3kat, a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt. Az anim\u00e1ci\u00f3k k\u00e9sz\u00edt\u00e9se ugyanakkor a webdesign egyik legnehezebb feladata.<\/p>\n\n\n\n
Mi az az anim\u00e1ci\u00f3?<\/h2>\n\n\n\n
Anim\u00e1ci\u00f3val nem csak rajzfilmekben tal\u00e1lkozhatsz, hanem weboldalakon is. Ide tartozik egy finomabb hover effekt vagy ak\u00e1r egy teljes kijelz\u0151t elfoglal\u00f3 mozg\u00f3 k\u00e9p. <\/p>\n\n\n\n
Maga az anim\u00e1ci\u00f3 sz\u00f3 a latin anima sz\u00f3b\u00f3l sz\u00e1rmazik, mely lelket jelent. Alapvet\u0151en egy k\u00eds\u00e9rlet arra, hogy \u00e9letet lehelj\u00fcnk egy statikus, mesters\u00e9ges dologba, ahogy az Ovidius k\u00f6ltem\u00e9ny\u00e9ben a ciprusi P\u00fcgmalionnal is megesett, amikor az istenek seg\u00edts\u00e9g\u00e9vel keltette \u00e9letre a maga \u00e1ltal k\u00e9sz\u00edtett szobrot, mivel szerelmes lett bele.<\/p>\n\n\n\n A l\u00e9nyeg azonban az, hogy anim\u00e1ci\u00f3v\u00e1 v\u00e1lik valami, amikor egy mozdulatlan 2D-s \u00e1br\u00e1zol\u00e1s a fizika t\u00f6rv\u00e9nyeinek megfelel\u0151en megmozdul.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3k n\u00e9ha annyira apr\u00f3k, hogy a felhaszn\u00e1l\u00f3k nem is tudatos\u00edtj\u00e1k, hogy anim\u00e1ci\u00f3kr\u00f3l van sz\u00f3. Ugyanakkor megjelenhetnek nagy m\u00e9retben is, mely felkelti a figyelm\u00fcket a weboldal ir\u00e1nt.<\/p>\n\n\n\n Az elm\u00falt \u00e9vekben egyre n\u00e9pszer\u0171bb\u00e9 v\u00e1lt a weboldalakon az anim\u00e1ci\u00f3k alkalmaz\u00e1sa, mely trend m\u00f6g\u00f6tt a a val\u00f3szer\u0171s\u00e9g ill\u00fazi\u00f3j\u00e1nak vonz\u00f3s\u00e1ga \u00e1ll. a val\u00f3s\u00e1g ugyanis k\u00fcl\u00f6n\u00f6sen fontos a jelenlegi minim\u00e1l, flat, material designnal k\u00e9sz\u00fclt oldalak kor\u00e1ban, r\u00e1ad\u00e1sul egy plusz eszk\u00f6z, hogy seg\u00edtse a felhaszn\u00e1l\u00f3kat az oldal haszn\u00e1lat\u00e1ban. An\u00e9lk\u00fcl vezeti ugyanis \u0151ket, hogy nagym\u00e9rt\u00e9kben beleavatkozna az oldal eredeti eszt\u00e9tik\u00e1j\u00e1ba. <\/p>\n\n\n\n Mint a webdesign minden elem\u00e9nek, \u00fagy az anim\u00e1ci\u00f3knak is el\u0151 kell seg\u00edteni\u00fck a felhaszn\u00e1l\u00f3k el\u0151re jut\u00e1s\u00e1t a weboldalon. A j\u00f3 anim\u00e1ci\u00f3 leny\u0171g\u00f6z\u0151 az emberek sz\u00e1m\u00e1ra, ugyanakkor nem rontja, hanem jav\u00edtja a haszn\u00e1lhat\u00f3s\u00e1got. <\/p>\n\n\n\n De l\u00e1ssuk konkr\u00e9tabban!<\/p>\n\n\n\n A bet\u00f6lt\u0151d\u00e9si id\u0151 egyel\u0151re elker\u00fclhetetlen t\u00e9nyez\u0151 a k\u00fcl\u00f6nf\u00e9le digit\u00e1lis term\u00e9kekn\u00e9l. De ki mondta, hogy ennek az id\u0151nek unalmasan kell eltelnie? Ahhoz, hogy az emberek ne t\u00fcrelmetlenkedjenek v\u00e1rakoz\u00e1s k\u00f6zben, el kell terelned valamivel a figyelm\u00fcket err\u0151l. P\u00e9ld\u00e1ul valami sz\u00f3rakoztat\u00f3 vagy v\u00e1ratlan dologgal. Erre megfelel\u0151 megold\u00e1s lehet egy anim\u00e1ci\u00f3 is. Alkalmaz\u00e1sa ugyan a v\u00e1rakoz\u00e1si id\u0151t nem cs\u00f6kkenti, azonban enyh\u00edti a probl\u00e9m\u00e1t: felkelti az emberek figyelm\u00e9t, \u00edgy kev\u00e9sb\u00e9 t\u00f6r\u0151dnek azzal, hogy v\u00e1rakozniuk kell.<\/p>\n\n\n\n Mint az a webdesingban is alapt\u00e9tel: az els\u0151 benyom\u00e1s sokat sz\u00e1m\u00edt. Az emberek pillanatok alatt meg\u00edt\u00e9lik a c\u00e9ged a weboldalad kin\u00e9zete alapj\u00e1n. Egy j\u00f3 anim\u00e1ci\u00f3 pedig nagyon sokat seg\u00edthet azon, hogy az els\u0151 benyom\u00e1s pozit\u00edv legyen.<\/p>\n\n\n\n De nem csak a haszn\u00e1lhat\u00f3s\u00e1got \u00e9rdemes jav\u00edtani a j\u00f3 els\u0151 benyom\u00e1s \u00e9rdek\u00e9ben. Egyediv\u00e9 is teheted vele a weboldalad. Egy \u00e9rdekes anim\u00e1ci\u00f3 r\u00e9v\u00e9n megk\u00fcl\u00f6nb\u00f6ztethet\u0151v\u00e9 v\u00e1lik a weboldalad a konkurensek\u00e9t\u0151l, \u00e9s ez\u00e1ltal azt \u00fczeneted, hogy az \u00e1ltalad k\u00edn\u00e1lt term\u00e9k\u00e9lm\u00e9ny is teljes eg\u00e9sz\u00e9ben m\u00e1s, mint amit a t\u00f6bbiekt\u0151l kaphatnak.<\/p>\n\n\n\n A kreat\u00edv anim\u00e1ci\u00f3k k\u00e9pesek arra, hogy a megszokott interakci\u00f3kat \u00e9lvezhet\u0151bb\u00e9 tegy\u00e9k, \u00e9s r\u00e1b\u00edrj\u00e1k az embereket arra, hogy kapcsolatba l\u00e9pjenek a fel\u00fclettel. A r\u00e9szletekre val\u00f3 odafigyel\u00e9s r\u00e9v\u00e9n jav\u00edthat\u00f3 a haszn\u00e1lhat\u00f3s\u00e1g, valamint vonz\u00f3bb\u00e1 tehet\u0151 a term\u00e9k.<\/p>\n\n\n\n A felhaszn\u00e1l\u00f3k \u00e9rzelmeire val\u00f3 odafigyel\u00e9s sokat sz\u00e1m\u00edt az interakci\u00f3kn\u00e1l. Az anim\u00e1ci\u00f3k haszn\u00e1lat\u00e1val \u00e9rzelmi kapcsolat alak\u00edthat\u00f3 ki az emberekkel, \u00e9s megmutatja sz\u00e1mukra, hogy a design m\u00f6g\u00f6tt val\u00f3di emberek \u00e1llnak.<\/p>\n\n\n\n Hib\u00e1k mindig el\u0151fordulnak, ak\u00e1rmennyire is t\u00f6rekszel a t\u00f6k\u00e9letess\u00e9gre. B\u00e1rmi is az okuk, ezek a hib\u00e1k – \u00e9s a kezel\u00e9s\u00fck – jelent\u0151s hat\u00e1ssal van a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyre. Ugyanakkor egy hiba megfelel\u0151 kezel\u00e9se a buk\u00e1s pillanat\u00e1nak s\u00faly\u00e1t m\u00e9rs\u00e9kelheti, vagy ak\u00e1r pozit\u00edv ir\u00e1nyba tolhatja. Teh\u00e1t, amikor egy v\u00e1ratlan hib\u00e1t vagy k\u00e9nytelen jelezni a felhaszn\u00e1l\u00f3nak, akkor \u00e9rdemes egy vicces anim\u00e1ci\u00f3t is bevetni, a helyzet rendbe t\u00e9tele \u00e9rdek\u00e9ben.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3k k\u00e9pesek arra, hogy egy \u00f6sszetett feladatot cs\u00e1b\u00edt\u00f3 \u00e9lm\u00e9nny\u00e9 alak\u00edtsanak. Erre j\u00f3 p\u00e9lda lehet a Maichimp \u00e1ltal alkalmazott anim\u00e1ci\u00f3, melyet az els\u0151 kamp\u00e1ny kik\u00fcld\u00e9se sor\u00e1n mutat. Emp\u00e1ti\u00e1t jelen\u00edt meg a designban, amikor kombin\u00e1lja az anim\u00e1lt rajzot a po\u00e9nos \u00fczenettel. A Mailchimp itt k\u00e9pes arra, hogy enyh\u00edtse a fesz\u00fclts\u00e9get a felhaszn\u00e1l\u00f3ban, amikor az els\u0151 e-mailj\u00e9t k\u00fcldi ki. \u00c9s erre Te is k\u00e9pes lehetsz az anim\u00e1ci\u00f3k megfelel\u0151 alkalmaz\u00e1s\u00e1val.<\/p>\n\n\n\n Soha se becs\u00fcld le teh\u00e1t az \u00f6r\u00f6m hatalm\u00e1t, amikor a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny jav\u00edt\u00e1s\u00e1r\u00f3l van sz\u00f3. A k\u00fcl\u00f6nbs\u00e9g azon term\u00e9kek k\u00f6z\u00f6tt, melyeket szeret\u00fcnk, \u00e9s amelyeket ink\u00e1bb csak elvisel\u00fcnk gyakran csak az az \u00f6r\u00f6m, melyet okoznak sz\u00e1munkra. Term\u00e9szetesen miel\u0151tt elkezden\u00e9d kialak\u00edtani az \u00e9rzelmi kapcsolatot a felhaszn\u00e1l\u00f3iddal, a webdesign alapokat rendesen le kell rakni.<\/p>\n\n\n\n Ide\u00e1lis esetben ezek az anim\u00e1ci\u00f3k nagyon visszafogottak, nem az\u00e9rt jelennek meg, hogy r\u00e1juk ir\u00e1nyuljon a figyelem a fontos inform\u00e1ci\u00f3k helyett, ugyanakkor b\u00e1tor\u00edtaniuk kell a l\u00e1togat\u00f3kat, hogy megtegy\u00e9k a k\u00f6vetkez\u0151 l\u00e9p\u00e9st a konverzi\u00f3s \u00faton.<\/p>\n\n\n\n Ha egy anim\u00e1ci\u00f3 visszafogott, akkor seg\u00edt a felhaszn\u00e1l\u00f3nak megmutatni, hogyan is m\u0171k\u00f6dik egy rendszer, mik\u00e9nt tud vele kapcsolatba l\u00e9pni. Az anim\u00e1ci\u00f3k a haszn\u00e1lhat\u00f3s\u00e1got jav\u00edthatj\u00e1k, hiszen jelzik, mi t\u00f6rt\u00e9nik a rendszerrel, mik\u00e9nt fognak viselkedni a fel\u00fclet egyes elemei, valamint megmutatj\u00e1k a felhaszn\u00e1l\u00f3nak azt, hogy hol \u00e1ll az inform\u00e1ci\u00f3s t\u00e9rben.<\/p>\n\n\n\n Milyen mikrointerakci\u00f3kr\u00f3l besz\u00e9lhet\u00fcnk, ahol anim\u00e1ci\u00f3t lehet bevetni:<\/p>\n\n\n\n Az egyik legpraktikusabb haszn\u00e1lata az anim\u00e1ci\u00f3knak a bet\u00f6lt\u00e9sekn\u00e9l lehets\u00e9ges. Senki sem szeret v\u00e1rni, de ha egy anim\u00e1ci\u00f3val jelzed a let\u00f6lt\u00e9st, felt\u00f6lt\u00e9st, mutatod a v\u00e1ltoz\u00e1st, akkor azzal egy kicsit lek\u00f6t\u00f6d a felhaszn\u00e1l\u00f3kat, \u00e9s kev\u00e9sb\u00e9 frusztr\u00e1l\u00f3 esem\u00e9nyk\u00e9nt \u00e9lik meg a v\u00e1rakoz\u00e1st.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3val egyedi \u00e9lm\u00e9nyt k\u00edn\u00e1lhatsz a l\u00e1togat\u00f3knak, vagy csak megmutathatod a m\u00e1rk\u00e1d j\u00e1t\u00e9kos oldal\u00e1t. P\u00e9ld\u00e1ul \u00edgy:<\/p>\n\n\n\n Kisebb anim\u00e1ci\u00f3kkal felh\u00edvhatod a felhaszn\u00e1l\u00f3k figyelm\u00e9t egyes weboldal-elemekre, \u00e9s seg\u00edthetsz nekik ellazulni, mik\u00f6zben a weboldaladat haszn\u00e1lj\u00e1k. Ezek az anim\u00e1ci\u00f3k lehetnek interakt\u00edvak vagy sem, arra mindenk\u00e9ppen j\u00f3k, hogy meg\u00e1ll\u00edts\u00e1k a l\u00e1togat\u00f3k frusztr\u00e1ci\u00f3j\u00e1nak fokoz\u00f3d\u00e1s\u00e1t, mik\u00f6zben v\u00e1rnak a weboldal bet\u00f6lt\u0151d\u00e9s\u00e9re.<\/p>\n\n\n\n Min\u00e9l jobban meg tudod lepni, le tudod ny\u0171g\u00f6zni a l\u00e1togat\u00f3idat egy bet\u00f6lt\u00e9si anim\u00e1ci\u00f3val, ann\u00e1l kisebb az es\u00e9lye, hogy a vissza gombra kattintanak a b\u00f6ng\u00e9sz\u0151ben.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3k gyakran seg\u00edtenek abban, hogy egy l\u00e1that\u00f3 visszajelz\u00e9st adjon arr\u00f3l, hogy egy felhaszn\u00e1l\u00f3 cselekv\u00e9st \u00e9szlelt a rendszer. Egy sokszor l\u00e1that\u00f3 p\u00e9lda erre a navig\u00e1ci\u00f3s men\u00fc kiny\u00edl\u00e1sa, amikor a hamburger ikonra kattintunk.<\/p>\n\n\n\n A mozg\u00e1ssal szemben egy statikus vizu\u00e1lis visszajelz\u00e9st nem vesznek \u00e9szre a felhaszn\u00e1l\u00f3k. Teh\u00e1t p\u00e9ld\u00e1ul nem l\u00e1tj\u00e1k, ha egy web\u00e1ruh\u00e1zban a bev\u00e1s\u00e1rl\u00f3kocsi ikonn\u00e1l v\u00e1ltoz\u00e1s t\u00f6rt\u00e9nik, ha a „kos\u00e1rhoz ad\u00e1s” gombra kattintanak. Ha viszont anim\u00e1lva van, akkor egyb\u0151l felfigyelnek a mozg\u00e1sra, \u00edgy l\u00e1tj\u00e1k, hogy reag\u00e1lt a rendszer. <\/p>\n\n\n\n A mozg\u00e1s utalhat arra is, hogy a fel\u00fclet egy m\u00e1sik \u00e1llapotba ker\u00fclt. P\u00e9ld\u00e1ul, egy m\u00f3dv\u00e1lt\u00e1sn\u00e1l. A k\u00fcl\u00f6nb\u00f6z\u0151 „m\u00f3dokat” n\u00e9ha neh\u00e9z a felhaszn\u00e1l\u00f3k fel\u00e9 kommunik\u00e1lni, de egy anim\u00e1ci\u00f3 ezen is seg\u00edt: a m\u00f3dv\u00e1lt\u00e1st \u00e9szlelhet\u0151v\u00e9 teszi, illetve kifejezheti a m\u00f3dv\u00e1lt\u00e1s l\u00e9nyeg\u00e9t is.<\/p>\n\n\n\n Milyen m\u00f3dv\u00e1lt\u00e1sokr\u00f3l besz\u00e9lhet\u00fcnk? P\u00e9ld\u00e1ul, amikor egy mobilos sz\u00f6vegszerkeszt\u0151 alkalmaz\u00e1snak van „szerkeszt\u0151” \u00e9s „\u00faj hozz\u00e1ad\u00e1sa” m\u00f3dja. Ha szerkeszt\u0151 m\u00f3dban vagyunk, akkor egy ceruza ikont l\u00e1tunk, m\u00edg hozz\u00e1ad\u00e1s m\u00f3dban egy + jelet. <\/p>\n\n\n\n Akkor is hasznos az anim\u00e1ci\u00f3, ha a v\u00e1lt\u00e1s nem felhaszn\u00e1l\u00f3i cselekv\u00e9shez kapcsol\u00f3dik, teh\u00e1t p\u00e9ld\u00e1ul egy t\u00f6lt\u00e9sjelz\u0151 azt mutatja, hogy a rendszer m\u00e9g nem \u00e1ll k\u00e9szen az adatok bevitel\u00e9re. Ez lehet ak\u00e1r egy skeleton screen is (ami a fel\u00fclet dr\u00f3tv\u00e1z\u00e1t mutatja tartalom n\u00e9lk\u00fcl), ami nem teljesen statikus.<\/p>\n\n\n\n Egy \u00f6sszetett inform\u00e1ci\u00f3s teret \u00e1ltal\u00e1ban el\u00e9g neh\u00e9z an\u00e9lk\u00fcl k\u00f6zvet\u00edteni, hogy ne terheln\u00e9nk le a felhaszn\u00e1l\u00f3t vagy nem foglalna el t\u00fal nagy helyet a kijelz\u0151n. Az p\u00e9ld\u00e1ul megterhel\u0151 lehet egy felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra, hogy \u00e1tn\u00e9zzen egy navig\u00e1ci\u00f3s men\u00fct vagy ak\u00e1r egy morzsamen\u00fct, \u00e9s ebb\u0151l tal\u00e1lja ki, hogy hol is j\u00e1r az inform\u00e1ci\u00f3s hierarchi\u00e1ban.<\/p>\n\n\n\n Hab\u00e1r egy anim\u00e1ci\u00f3 \u00f6nmag\u00e1ban nem tudja helyettes\u00edteni a men\u00fct, azt jelezni tudja a felhaszn\u00e1l\u00f3nak, hogy milyen ir\u00e1nyba induljon egy folyamaton vagy egy hierarchi\u00e1n bel\u00fcl. A mozg\u00e1s \u00e1ltal v\u00e1lik a navig\u00e1ci\u00f3 intuit\u00edvv\u00e1 \u00e9s \u00e9rthet\u0151bb\u00e9. <\/p>\n\n\n\n P\u00e9ld\u00e1ul, ha egy gal\u00e9ri\u00e1ban j\u00e1r, akkor a k\u00e9pekre kattintva, azok megn\u0151nek \u00e9s bet\u00f6ltik a kijelz\u0151t. A zoom-mozg\u00e1s \u00e1ltal jelzik, hogy \u00e9ppen merre tart a hierarchi\u00e1ban a felhaszn\u00e1l\u00f3. De egy oldalra cs\u00fasz\u00e1st mutat\u00f3 anim\u00e1ci\u00f3 is jelzi a felhaszn\u00e1l\u00f3nak, hogy el\u0151re vagy h\u00e1tra mozog egy folyamatban.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3k abban is seg\u00edtenek, hogy a felhaszn\u00e1l\u00f3 ne vesz\u00edtse el a t\u00e1j\u00e9koz\u00f3d\u00e1si k\u00e9pess\u00e9g\u00e9t egy oldalon, k\u00fcl\u00f6n\u00f6sen mobileszk\u00f6z\u00f6k eset\u00e9ben, ahol a kontextus k\u00f6nnyen elveszik a kism\u00e9ret\u0171 kijelz\u0151 miatt. Ha egy gal\u00e9ria vagy egy teljes kijelz\u0151s men\u00fc mozg\u00e1s n\u00e9lk\u00fcl, hirtelen jelenik meg, akkor a felhaszn\u00e1l\u00f3 elveszhet, hiszen v\u00e1ltoz\u00e1s t\u00f6rt\u00e9nt, de nem l\u00e1tja \u00e1t, mi \u00e9s hogyan t\u00f6rt\u00e9nt: mozg\u00e1s n\u00e9lk\u00fcl nem l\u00e1tja a kapcsolatot az oldal \u00e9s az azt eltakar\u00f3 men\u00fc k\u00f6z\u00f6tt.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3k seg\u00edtenek a felhaszn\u00e1l\u00f3knak meg\u00e9rteni, hogyan l\u00e9pjenek kapcsolatba a felhaszn\u00e1l\u00f3i fel\u00fclet elemeivel. P\u00e9ld\u00e1ul a mozg\u00e1s ir\u00e1nya jelezheti az elfogadhat\u00f3 cselekv\u00e9s t\u00edpus\u00e1t. Gondolj arra, amikor egy k\u00e1rtya a kijelz\u0151 alj\u00e1nak ir\u00e1ny\u00e1b\u00f3l t\u00e1gul a fels\u0151 r\u00e9sz fel\u00e9: ez azt jelzi, hogy lefel\u00e9 h\u00faz\u00e1ssal visszaford\u00edthat\u00f3 a folyamat, azaz bez\u00e1rhat\u00f3 a k\u00e1rtya. Ugyan\u00edgy, ha egy k\u00e1rtya jobbr\u00f3l \u00e9rkezik a kijelz\u0151re, akkor jobbra cs\u00fasztat\u00e1ssal el is t\u00fcntethet\u0151.<\/p>\n\n\n\n Mivel az emberek nagyon \u00e9rz\u00e9kenyek a mozg\u00e1s \u00e9szlel\u00e9s\u00e9re, ez\u00e9rt az anim\u00e1ci\u00f3k k\u00f6nnyen felkeltik a felhaszn\u00e1l\u00f3k figyelm\u00e9t. Egyfel\u0151l ez j\u00f3, m\u00e1sr\u00e9szt azonban lehet rossz is, ha felesleges egy anim\u00e1ci\u00f3 \u00e9s csak megzavarja a felhaszn\u00e1l\u00f3t a feladata elv\u00e9gz\u00e9s\u00e9ben. Sokan persze ezt kihaszn\u00e1lj\u00e1k arra, hogy direkt elterelj\u00e9k a felhaszn\u00e1l\u00f3 figyelm\u00e9t.<\/p>\n\n\n\n A CTA-d az\u00e9rt van az oldaladon, mert azt szeretn\u00e9d, ha a l\u00e1togat\u00f3k r\u00e1kattintan\u00e1nak. Ha anim\u00e1ci\u00f3val dobod fel, akkor nagyobb es\u00e9llyel fognak kattintani r\u00e1, vagy legal\u00e1bbis k\u00edv\u00e1ncsiak lesznek arra, hogy mi t\u00f6rt\u00e9nik.<\/p>\n\n\n\n Ezzel kreat\u00edv m\u00f3don belecsemp\u00e9szheted a m\u00e1rk\u00e1d egy nagyon egyszer\u0171 funkci\u00f3ba. Vagy legal\u00e1bbis felt\u0171n\u0151bben jelzed, hogy egy elem kattinthat\u00f3.<\/p>\n\n\n\n Egy anim\u00e1lt h\u00e1tter\u0171 weboldal remek megold\u00e1s, ha ki akarsz t\u0171nni az egyforma weboldalak t\u00f6meg\u00e9b\u0151l, ahogy p\u00e9ld\u00e1ul itt is teszik<\/a>. Ugyanakkor, mint minden konvencion\u00e1lis megold\u00e1st\u00f3l val\u00f3 elt\u00e9r\u00e9sn\u00e9l, sz\u00e1molni kell a hat\u00e9konys\u00e1g cs\u00f6kken\u00e9s\u00e9vel. Annak \u00e9rdek\u00e9ben, hogy ez minim\u00e1lis legyen figyelned kell arra, hogy ne ess t\u00falz\u00e1sba az anim\u00e1ci\u00f3val. Ez nem csak megzavarja a felhaszn\u00e1l\u00f3kat, hanem az oldalad is lass\u00edthatja.<\/p>\n\n\n\n Ne felejtsd el, hogy az anim\u00e1ci\u00f3nak ki kell eg\u00e9sz\u00edtenie a weboldalt, nem pedig elt\u00e9r\u00edtenie a felhaszn\u00e1l\u00f3t att\u00f3l, amit tenni akar. \u00c9s miel\u0151tt belev\u00e1gn\u00e1l a teljes h\u00e1tt\u00e9r anim\u00e1l\u00e1s\u00e1ba, pr\u00f3b\u00e1lkozz meg el\u0151sz\u00f6r kisebb r\u00e9szletek mozgat\u00e1s\u00e1val.<\/p>\n\n\n\n Egy men\u00fc fontos r\u00e9sze minden weboldalnak, ugyanakkor sok helyet elfoglalhat. Ilyenkor haszn\u00e1lunk rejtett men\u00fct, ami csak akkor bomlik ki, ha a felhaszn\u00e1l\u00f3 is \u00fagy akarja. Haszn\u00e1lhatsz anim\u00e1lt leny\u00edl\u00f3 men\u00fct, ahol az egyes elemek hoverre aktiv\u00e1l\u00f3dnak, ahogy p\u00e9ld\u00e1ul itt l\u00e1tod<\/a>. <\/p>\n\n\n\n Minden azon m\u00falik, hogy mennyire vagy kreat\u00edv, amikor az anim\u00e1lt men\u00fcn dolgozol. A legegyszer\u0171bb megold\u00e1s, amikor csak megv\u00e1ltozik a sz\u00edn vagy a forma, ugyanakkor az lehets\u00e9ges, hogy amikor az eg\u00e9rmutat\u00f3 az elem f\u00f6l\u00e9 \u00e9r, akkor kibomlik a men\u00fc vagy megjelenik egy plusz inform\u00e1ci\u00f3.<\/p>\n\n\n\n Sok helyen lehet p\u00e9ld\u00e1ul tal\u00e1lkozni olyan k\u00e9pekkel a weboldalakon, melyek megfordulnak \u00e9s \u00edgy megjelenik az inform\u00e1ci\u00f3, ami a m\u00e1sik oldalukon tal\u00e1lhat\u00f3. Ezt haszn\u00e1lhatod egy r\u00f3lunk oldalon, ahol a csapattagok f\u00e9nyk\u00e9peihez \u00e9rve azok megfordulnak \u00e9s l\u00e1that\u00f3v\u00e1 v\u00e1lnak az adatok r\u00f3luk.<\/p>\n\n\n\n Ez tal\u00e1n a legegyszer\u0171bb \u00e9s legn\u00e9pszer\u0171bb megold\u00e1sa az anim\u00e1ci\u00f3knak a webdesignban. Hab\u00e1r sokan nem kedvelik \u0151ket, illetve nem felt\u00e9tlen\u00fcl praktikus a haszn\u00e1latuk, azonban egy adott weboldal-ter\u00fcleten t\u00f6bb inform\u00e1ci\u00f3k k\u00e9pesek k\u00f6z\u00f6lni, mint egy\u00e9bk\u00e9nt, n\u00e9mi mozg\u00e1ssal vegy\u00edtve. <\/p>\n\n\n\n Arra \u00e9rdemes figyelni, hogy amikor karuszelt k\u00e9sz\u00edtesz, akkor add meg a lehet\u0151s\u00e9get a felhaszn\u00e1l\u00f3knak arra, hogy \u0151k is ir\u00e1ny\u00edthass\u00e1k azt, vagyis szab\u00e1lyozz\u00e1k, hogy melyik k\u00e9pet akarj\u00e1k l\u00e1tni. Ezen az oldalon is pontok jelzik az egyes k\u00e9peket, mik\u00f6zben persze a lapoz\u00e1s automatikusan is m\u0171k\u00f6dik:<\/p>\n\n\n\n A karuszelek m\u00e1ra olyannyira elterjedtek a weboldalakon, hogy a felhaszn\u00e1l\u00f3k szinte sz\u00e1m\u00edtanak r\u00e1juk, ez\u00e9rt, ha a legalapvet\u0151bb szinten akarsz anim\u00e1ci\u00f3t megjelen\u00edteni a weboldaladon, akkor ezzel \u00e9rdemes kezdeni. B\u00e1rhol bevethetsz karuszelt: ak\u00e1r a term\u00e9keid bemutat\u00e1s\u00e1n\u00e1l, ak\u00e1r a felhaszn\u00e1l\u00f3i visszajelz\u00e9sek sorol\u00e1s\u00e1n\u00e1l, stb. B\u00e1rhol, ahol kisebb helyen akarsz t\u00f6bb inform\u00e1ci\u00f3t megjelen\u00edteni. Karuszelek kialak\u00edt\u00e1s\u00e1r\u00f3l itt \u00edrtunk b\u0151vebben<\/a>.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3k teh\u00e1t sokat tudnak jav\u00edtani egy term\u00e9k vagy egy weboldal felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny\u00e9n, \u00e9s ak\u00e1r \u00f6nmagukban is k\u00e9pesek megoldani design-probl\u00e9m\u00e1kat. Ugyanakkor nem k\u00f6nny\u0171 \u00f6sszehozni egy val\u00f3ban j\u00f3 anim\u00e1ci\u00f3t: sok gondolkod\u00e1st \u00e9s szak\u00e9rtelmet ig\u00e9nyel. Nagyon v\u00e9kony a hat\u00e1rvonal az igaz\u00e1n j\u00f3 \u00e9s az ideges\u00edt\u0151 megold\u00e1sok k\u00f6z\u00f6tt. \u00dagyhogy, amikor anim\u00e1ci\u00f3ban kezdesz gondolkodni, akkor miel\u0151tt nekifutn\u00e1l, az al\u00e1bbiakat fontold meg!<\/p>\n\n\n\n A legfontosabb, hogy az anim\u00e1ci\u00f3idnak legyen valami c\u00e9lja. Annak nem sok \u00e9rtelme, hogy csak az\u00e9rt hozd l\u00e9tre \u0151ket, hogy valami mozogjon a kijelz\u0151n, mert az j\u00f3l n\u00e9z ki. Az anim\u00e1ci\u00f3knak r\u00e9szt kell venni\u00fck a felhaszn\u00e1l\u00f3kkal folytatott kommunik\u00e1ci\u00f3ban.<\/p>\n\n\n\n A val\u00f3 \u00e9letben a legt\u00f6bb dolog nem felt\u0171nik \u00e9s elt\u0171nik, ahogy a digit\u00e1lis vil\u00e1gban alap\u00e9rtelmezett m\u00f3don t\u00f6rt\u00e9nne. Teh\u00e1t, amikor valaminek k\u00e9t vagy h\u00e1rom \u00e1llapota van, akkor a k\u00e9t \u00e1llapot k\u00f6z\u00f6tti \u00e1tmenet \u00e9rz\u00e9keltet\u00e9se k\u00f6nnyebb\u00e9 teszi a felhaszn\u00e1l\u00f3 sz\u00e1m\u00e1ra a v\u00e1ltoz\u00e1s l\u00e9nyeg\u00e9nek meg\u00e9rt\u00e9s\u00e9t. Itt van r\u00e1 egy p\u00e9lda:<\/p>\n\n\n\n Az anim\u00e1ci\u00f3nak fel kell h\u00edvnia mag\u00e1ra a figyelmet, valamint vil\u00e1gosan meg kell mutatnia a v\u00e1ltoz\u00e1s \u00e1llapotait. A j\u00f3l kialak\u00edtott \u00e1tmenet seg\u00edt a felhaszn\u00e1l\u00f3knak a megfelel\u0151 pontra figyelni a megfelel\u0151 id\u0151ben. Az, hogy \u00e9pp mire helyez\u0151dik a hangs\u00faly, a c\u00e9lt\u00f3l is f\u00fcgg. A j\u00f3l megtervezett anim\u00e1ci\u00f3 r\u00e9v\u00e9n a felhaszn\u00e1l\u00f3 nem veszik el az appban, nem azt \u00e9rzi, hogy hirtelen valahol eg\u00e9sz m\u00e1shol j\u00e1r, mint egy pillanattal kor\u00e1bban. Ez seg\u00edt neki megtenni a k\u00f6vetkez\u0151 interakci\u00f3s l\u00e9p\u00e9st.<\/p>\n\n\n\n Az \u00e1tmeneteknek be kell mutatniuk, hogy az egyes elemek mik\u00e9nt kapcsol\u00f3dnak. Akkor j\u00f3 egy anim\u00e1ci\u00f3, ha az \u00fajonnan megjelen\u0151 fel\u00fcletet \u00f6sszek\u00f6ti azzal az elemmel, melyb\u0151l kialakult. Erre j\u00f3 p\u00e9lda, ahogy a Mac OS-ben lekicsiny\u00edthetsz egy ablakot. Az anim\u00e1ci\u00f3ban az els\u0151 \u00e1llapot j\u00f3l l\u00e1that\u00f3an kapcsol\u00f3dik a m\u00e1sodikhoz.<\/p>\n\n\n\n Emellett az is fontos emberek megszokt\u00e1k, hogy a t\u00e1rgyaknak t\u00f6meg\u00fck van, ami kihat arra, mik\u00e9nt mozognak. Mozg\u00e1s k\u00f6zben fokozatosan gyorsulnak, miel\u0151tt el\u00e9rn\u00e9k az \u00e1lland\u00f3 sebess\u00e9g\u00fcket. Ezeket a jellemz\u0151ket figyelembe kellene venned az anim\u00e1ci\u00f3kn\u00e1l is. Ha nem teszed, akkor furcs\u00e1nak fognak t\u0171nni a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3knak cs\u00f6kkentenie kell a felhaszn\u00e1l\u00f3k kognit\u00edv terhel\u00e9s\u00e9t, ami azt jelenti, hogy kevesebbet kell gondolkodniuk egy feladat v\u00e9grehajt\u00e1sa sor\u00e1n. Seg\u00edtenie kell abban, hogy a l\u00e1togat\u00f3 meg\u00e9rtse a fel\u00fclet fel\u00e9p\u00edt\u00e9s\u00e9t, \u00e9s \u00edgy k\u00f6nnyebben haszn\u00e1lja azt.<\/p>\n\n\n\n Erre a legegyszer\u0171bb p\u00e9lda egy hamburger men\u00fc, mely \u00e1ltal\u00e1ban a bal fels\u0151 sarokb\u00f3l ny\u00edlik ki. Ilyenkor vil\u00e1gosan l\u00e1tsz\u00f3dnia kell, hogy honnan ny\u00edlik \u00e9s hova t\u00e9r vissza. Ha egy hamburger men\u00fcn\u00e9l nem haszn\u00e1lsz anim\u00e1ci\u00f3t, akkor a felhaszn\u00e1l\u00f3knak maguknak kell kital\u00e1lni mindezt. Az sem j\u00f3 persze, ha t\u00faler\u0151lteted az anim\u00e1ci\u00f3kat.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3knak fontos szerep\u00fck van a l\u00e1togat\u00f3k figyelm\u00e9nek ir\u00e1ny\u00edt\u00e1s\u00e1ban, hiszen az emberek mindig a mozg\u00f3 t\u00e1rgyakra figyelnek. Ezt pedig ki tudod haszn\u00e1lni, ugyanakkor, ha t\u00fal sok dolog mozog a kijelz\u0151n, akkor m\u00e1r nem tudj\u00e1k mire figyeljenek \u00e9s csak \u00f6sszezavarodnak.<\/p>\n\n\n\n Gyakori hiba, hogy a fel\u00fcleteket t\u00falzs\u00fafolj\u00e1k anim\u00e1ci\u00f3kkal, t\u00fal sokszor jelennek meg, vagy t\u00fals\u00e1gosan \u00f6sszetett interakci\u00f3k k\u00e9sz\u00fclnek. Pedig ha t\u00fal sok a v\u00e1ltoz\u00e1s a fel\u00fcleten, akkor az emberek \u00f6sszezavarodnak, \u00e9s id\u0151be telik nekik, mire kiigazodnak rajta. Ne felejtsd el, hogy minden mozg\u00e1s felkelti a figyelmet, ez\u00e9rt a t\u00fal sok anim\u00e1ci\u00f3t k\u00e1osznak \u00e9rz\u00e9kelik az emberek. Az \u00f6sszetett \u00e1tmenetekn\u00e9l legal\u00e1bb egy elem maradjon stabilan l\u00e1that\u00f3, hogy az emberek ne vesz\u00edts\u00e9k el a talajt a l\u00e1buk al\u00f3l.<\/p>\n\n\n\n De az sem j\u00f3, ha t\u00fal gyakran kell v\u00e9gign\u00e9zni\u00fck egy anim\u00e1ci\u00f3t, mik\u00f6zben \u00e9pp egy feladatot hajtan\u00e1nak v\u00e9gre. Lehet, hogy egyszer-k\u00e9tszer \u00e9rdekl\u0151dve megn\u00e9zik, de amikor m\u00e1r sz\u00e1zadszor l\u00e1tj\u00e1k, pedig tenn\u00e9k a dolgukat, akkor ideges\u00edt\u0151v\u00e9 v\u00e1lik. Ugyan\u00edgy nem \u00e9rdemes t\u00fal hossz\u00fara ny\u00fajtani az anim\u00e1ci\u00f3kat – m\u00e9g, ha Te minden pillanat\u00e1t \u00e9lvezed is a saj\u00e1tod\u00e9nak -, mert az embereket sokszor csak akad\u00e1lyozza. Ez\u00e9rt min\u00e9l gyorsabb, ann\u00e1l jobb.<\/p>\n\n\n\n Ha csak egyetlen elvet haszn\u00e1lsz ezek k\u00f6z\u00fcl az anim\u00e1ci\u00f3k tervez\u00e9s\u00e9n\u00e9l, akkor az legyen a sebess\u00e9g. Ez a legfontosabb t\u00e9nyez\u0151, amikor anim\u00e1ci\u00f3t k\u00e9sz\u00edtesz. Gyorsnak \u00e9s pontosnak kell lenni, akad\u00e1s n\u00e9lk\u00fcl kell m\u0171k\u00f6dnie. A felhaszn\u00e1l\u00f3nak nem szabadna az anim\u00e1ci\u00f3 indul\u00e1s\u00e1ra v\u00e1rnia, ahogy a befejez\u00e9sig is z\u00f6kken\u0151mentesen kell eljutni. Az egyes \u00e1llapotok k\u00f6z\u00f6tt az anim\u00e1ci\u00f3knak gyorsan kell mozogniuk, hogy elker\u00fcld a v\u00e1rakoz\u00e1st. Ugyanakkor m\u00e9g \u00e9rthet\u0151nek kell maradnia a v\u00e1ltoz\u00e1snak. Ez sz\u00e1mszer\u0171s\u00edtve azt jelenti, hogy a felhaszn\u00e1l\u00f3i cselekv\u00e9s ut\u00e1n 0,1 m\u00e1sodperccel el kell indulnia, \u00e9s lehet\u0151leg ne legyen hosszabb 300 ms-n\u00e9l.<\/p>\n\n\n\n Az anim\u00e1ci\u00f3kn\u00e1l is be lehet vetni azokat a megold\u00e1sokat, melyek seg\u00edts\u00e9g\u00e9vel gyorsabbnak l\u00e1tszik az anim\u00e1ci\u00f3, holott nem az. P\u00e9ld\u00e1ul egy skeleton screent mutatsz egy adott pillanatban, mikor m\u00e9g nem t\u00f6lt\u0151d\u00f6tt be a tartalom. Ez\u00e1ltal a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra gyorsabbnak fog t\u0171nni a megjelen\u00e9s, \u00e9s nem \u00e9rz\u00e9kelik, hogy v\u00e1rniuk kell r\u00e1.<\/p>\n\n\n\n Egy anim\u00e1ci\u00f3 arra is k\u00e9pes, hogy megmutassa egy m\u00e1rka szem\u00e9lyis\u00e9g\u00e9t, ahogy azt a bet\u0171t\u00edpusok, sz\u00ednek, ikonok is teszik. Ezek egy\u00fctt egy \u00f6sszehangolt vizu\u00e1lis identit\u00e1st alak\u00edtanak ki. Persze annyif\u00e9le anim\u00e1ci\u00f3s st\u00edlus nincs, mint ah\u00e1ny sz\u00edn, de ha az image-edhez ill\u0151 st\u00edlust tal\u00e1lsz, akkor az jav\u00edtja a k\u00e9pet, ami a felhaszn\u00e1l\u00f3ban keletkezik a m\u00e1rk\u00e1dr\u00f3l.<\/p>\n\n\n\n Mindezek alapj\u00e1n teh\u00e1t l\u00e1ssunk n\u00e9h\u00e1ny p\u00e9ld\u00e1t arra, hogy mik\u00e9nt lesz egy \u00e1tlagos anim\u00e1ci\u00f3b\u00f3l val\u00f3ban kiv\u00e1l\u00f3, a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt jav\u00edt\u00f3 anim\u00e1ci\u00f3. A p\u00e9ld\u00e1kat Pablo Stanley gy\u0171jt\u00f6tte \u00f6ssze, aki az elk\u00e9sz\u00edt\u00e9s\u00fckh\u00f6z felhaszn\u00e1lta a Material Motion<\/a> \u00e9s az IBM anim\u00e1ci\u00f3s elveit<\/a>, valamint a The UX in Motion Manifesto<\/a>-ban foglaltakat. Ezekb\u0151l sz\u00e1modra is vil\u00e1gosan ki fog der\u00fclni, hogy mi\u00e9rt is olyan nagyszer\u0171 \u00e9s hat\u00e9kony egy j\u00f3l kidolgozott anim\u00e1ci\u00f3.<\/p>\n\n\n\n Egy \u00e1tlagos anim\u00e1ci\u00f3 m\u00e1r att\u00f3l is anim\u00e1ci\u00f3, hogy a tartalmak elhalv\u00e1nyulnak \u00e9s feler\u0151s\u00f6dnek, amikor egyik \u00e1llapotb\u00f3l a m\u00e1sikba v\u00e1ltanak. Ugyanakkor enn\u00e9l is jobb megold\u00e1s, amikor l\u00e1tni lehet az \u00e1llapotok k\u00f6z\u00f6tti \u00e1tmenetet, illetve mindez a tartalmi r\u00e9szn\u00e9l is kivitelezhet\u0151.<\/p>\n\n\n\n A l\u00e9nyeg itt az, hogy nem el\u00e9g az \u00e1tmenetet megmutatni k\u00e9t elem k\u00f6z\u00f6tt, hanem a kapcsolatot is jelezni kell az anim\u00e1ci\u00f3val. Ilyen m\u00f3don:<\/p>\n\n\n\n Teh\u00e1t, ha van valami k\u00f6z\u00f6s elem k\u00e9t \u00e1llapot eset\u00e9ben, akkor azzal kapcsold \u00f6ssze \u0151ket az anim\u00e1ci\u00f3 sor\u00e1n.<\/p>\n\n\n\n Vagyis nem felt\u00e9tlen\u00fcl el\u00e9g az, ha egy elem fokozatosan v\u00e1ltoztatja a helyzetet \u00e9s az \u00e1tl\u00e1tsz\u00f3s\u00e1g\u00e1t, hanem jobb megold\u00e1s, ha mozg\u00e1s jelenik meg.<\/p>\n\n\n\n Ez azt jelenti, hogy a tartalom egyes darabjai n\u00e9mi k\u00e9sleltet\u00e9ssel jelennek meg. Persze minden egyes apr\u00f3 elemn\u00e9l nem \u00e9rdemes ezt az effektet bevetni, c\u00e9lszer\u0171 megtartani nagyobb tartalmi csoportok megjelen\u00edt\u00e9s\u00e9re. Az anim\u00e1ci\u00f3 legyen gyors: a Google javaslata szerint az egyes elemek megjelen\u00e9se k\u00f6z\u00f6tt ne teljen el 20ms-n\u00e9l t\u00f6bb id\u0151.<\/p>\n\n\n\n Egy anim\u00e1ci\u00f3 megjelenhet \u00fagy, hogy mozognak \u00e9s felt\u0171nnek elemek, azonban \u00fagy is meg lehet oldani, hogy a megjelen\u0151 \u00faj elemek szemmel l\u00e1that\u00f3an hat\u00e1st gyakorolnak a m\u00e1r jelen l\u00e9v\u0151 elemekre.<\/p>\n\n\n\n Egy anim\u00e1ci\u00f3n\u00e1l megjelenhet \u00fagy a men\u00fc, hogy a gomb ir\u00e1ny\u00e1b\u00f3l egyszer csak felbukkan, ugyanakkor jobb megold\u00e1s, ha a gombb\u00f3l mintegy „kin\u0151”, azaz l\u00e1that\u00f3v\u00e1 v\u00e1lik a kapcsolat vele.<\/p>\n\n\n\n Egy gomb lenyom\u00e1s\u00e1ra bek\u00f6vetkez\u0151 v\u00e1ltoz\u00e1st meg lehet mutatni \u00fagy is, hogy l\u00e1tszik az interakci\u00f3, majd egy sz\u00f6veggel is jelzed, hogy mi t\u00f6rt\u00e9nik. Ugyanakkor maga a gomb is kifejezheti a v\u00e1ltoz\u00e1st:<\/p>\n\n\n\n Vagyis mint l\u00e1that\u00f3, a gombon bel\u00fcl t\u00f6rt\u00e9nik a jelz\u00e9se az \u00e1llapot v\u00e1ltoz\u00e1s\u00e1nak. Teh\u00e1t a l\u00e9nyeg itt az, hogy azt a fel\u00fcletet haszn\u00e1ld jelz\u00e9sre, mellyel a felhaszn\u00e1l\u00f3 am\u00fagy is kapcsolatba l\u00e9p. J\u00f3 megold\u00e1s, ha v\u00e1ltoztatsz a gomb sz\u00edn\u00e9n, majd a v\u00e9g\u00e9n meger\u0151s\u00edted a v\u00e9geredm\u00e9nyt.<\/p>\n\n\n\n Mint arr\u00f3l m\u00e1r sokat besz\u00e9lt\u00fcnk, egy j\u00f3 design a sz\u00ednek, a m\u00e9ret, a negat\u00edv t\u00e9r haszn\u00e1lat\u00e1val felh\u00edvja a felhaszn\u00e1l\u00f3 figyelm\u00e9t a fontos dolgokra. Ugyanakkor anim\u00e1ci\u00f3t is be lehet vetni ennek \u00e9rdek\u00e9ben, m\u00e9gpedig \u00fagy, hogy k\u00f6zben ne v\u00e1ljon zavar\u00f3v\u00e1.<\/p>\n\n\n\n Vagyis, amikor a felhaszn\u00e1l\u00f3nak valami fontosat kellene tennie a weboldaladon, akkor pr\u00f3b\u00e1ld anim\u00e1ci\u00f3val is felh\u00edvni r\u00e1 a figyelm\u00e9t. Kezd egy finom megold\u00e1ssal, majd fokozatosan er\u0151s\u00edtheted a sz\u00ednt, a m\u00e9retet \u00e9s a sebess\u00e9get, att\u00f3l is f\u00fcgg\u0151en, hogy mennyire fontos sz\u00e1modra a kiv\u00e1ltani k\u00edv\u00e1nt cselekv\u00e9s. Azt azonban ne feledd, hogy csak ritk\u00e1n haszn\u00e1ld ezt az eszk\u00f6zt, mert min\u00e9l t\u00f6bbsz\u00f6r jelenik meg az oldaladon, ann\u00e1l ink\u00e1bb cs\u00f6kken a hat\u00e1sa, \u00e9s ann\u00e1l ink\u00e1bb fogja ideges\u00edteni az embereket.<\/p>\n\n\n\n A bet\u00f6lt\u00e9si anim\u00e1ci\u00f3k mutatj\u00e1k meg a felhaszn\u00e1l\u00f3knak, hogy valami \u00e9ppen t\u00f6rt\u00e9nik az oldalon, amire v\u00e1rni kell. Ide\u00e1lis esetben cs\u00f6kkentik benn\u00fck a v\u00e1rakoz\u00e1s miatt kialakul\u00f3 fesz\u00fclts\u00e9get. M\u00e1r az \u00fagynevezett 1.0-\u00e1s web korszak\u00e1ban is jelen voltak a bet\u00f6lt\u0151d\u00e9st jelz\u0151 anim\u00e1ci\u00f3k: Fireworks, Flash \u00e9s persze gif alap\u00fa m\u0171k\u00f6d\u00e9sre is akadt p\u00e9lda. 2010-ben, a CSS3 indul\u00e1s\u00e1val ez \u00e1tvette az el\u0151bbi technol\u00f3gi\u00e1k hely\u00e9t, a designerek pedig elkezdtek a Photoshop Cs5-ben bet\u00f6lt\u00e9si anim\u00e1ci\u00f3kat tervezni. <\/p>\n\n\n\n A bet\u00f6lt\u00e9si anim\u00e1ci\u00f3k alapvet\u0151en h\u00e1rom t\u00edpusba sorolhat\u00f3k be. <\/p>\n\n\n\n Folyamatjelz\u0151 s\u00e1v<\/strong><\/p>\n\n\n\n Amit els\u0151sorban akkor haszn\u00e1lnak, ha a bet\u00f6lt\u00e9si id\u0151t is jelezni lehet. Ez t\u00f6rt\u00e9nhet sz\u00e1mmal vagy puszt\u00e1n vizu\u00e1lis jelz\u00e9ssel, \u00e9s lehet egyszer\u0171 vagy ak\u00e1r kreat\u00edv megold\u00e1s (hogy melyiket v\u00e1laszd, arra k\u00e9s\u0151bb m\u00e9g kit\u00e9r\u00fcnk), a l\u00e9nyeg, hogy megmutassa, mennyi ideig fog tartani egy m\u0171velet. A Gmail p\u00e9ld\u00e1ul nem jelzi sz\u00e1mmal, hogy hol tart a bet\u00f6lt\u00e9s, m\u00e9gis l\u00e1tjuk, hogy mennyi van h\u00e1tra.<\/p>\n\n\n\n Ezeket akkor haszn\u00e1ljuk, ha a bet\u00f6lt\u00e9si id\u0151 ismeretlen. Lehet ez egy egyszer\u0171, alap\u00e9rtelmezett spinner, vagy egy \u00f6tletes anim\u00e1ci\u00f3, a fontos az, hogy megmutassa: zajlik valami a motorh\u00e1ztet\u0151 alatt. Kreat\u00edv megold\u00e1sokn\u00e1l haszn\u00e1lhat\u00f3k a m\u00e1rka vizu\u00e1lis elemei, \u00edgy t\u00e1mogatva brand megjelen\u00edt\u00e9s\u00e9t. \u00c1ltal\u00e1ban loopolt anim\u00e1ci\u00f3kat alkalmaznak megold\u00e1sk\u00e9nt. <\/p>\n\n\n\n Skeleton screen<\/strong><\/p>\n\n\n\n A skeleton screen eset\u00e9ben maga a weboldal l\u00e9p\u00e9sr\u0151l-l\u00e9p\u00e9sre t\u00f6rt\u00e9n\u0151 bet\u00f6lt\u0151d\u00e9se jelzi a halad\u00e1st. Az oldalra \u00e9rkezve csak a placeholderek l\u00e1that\u00f3k, melyek fokozatosan t\u00f6lt\u0151dnek meg sz\u00f6veggel \u00e9s k\u00e9pekkel. Ezt a megold\u00e1st haszn\u00e1lja a Facebook, a LinkedIn vagy a YouTube is t\u00f6bbek k\u00f6z\u00f6tt, mivel \u00e1ltal\u00e1ban jobb felhaszn\u00e1l\u00f3i \u00e9lm\u00e9nyt jelent, mint a fent eml\u00edtett megold\u00e1sok.<\/p>\n\n\n\n Min\u00e9l kevesebb ideig legyen l\u00e1that\u00f3<\/strong><\/p>\n\n\n\n Egyetlen felhaszn\u00e1l\u00f3 sem szereti azzal t\u00f6lteni az idej\u00e9t, hogy egy bet\u00f6lt\u00e9si anim\u00e1ci\u00f3ban gy\u00f6ny\u00f6rk\u00f6dik, b\u00e1rmilyen \u00f6tletes is. A weboldal bet\u00f6lt\u00e9si idej\u00e9nek jav\u00edt\u00e1s\u00e1ra ford\u00edtsd teh\u00e1t az id\u0151d nagyobb r\u00e9sz\u00e9t, \u00e9s ne az anim\u00e1ci\u00f3 kialak\u00edt\u00e1s\u00e1ra!<\/p>\n\n\n\n Adjon id\u0151becsl\u00e9st<\/strong><\/p>\n\n\n\n A bet\u00f6lt\u00e9si anim\u00e1ci\u00f3hoz kapcsol\u00f3djon egy becsl\u00e9s a h\u00e1tral\u00e9v\u0151 id\u0151re vonatkoz\u00f3an. De legal\u00e1bbis jelezze vizu\u00e1lisan, hogy hol tart a bet\u00f6lt\u0151d\u00e9s folyamata. Ezzel cs\u00f6kkenthet\u0151 a v\u00e1rakoz\u00e1s miatti felhaszn\u00e1l\u00f3i frusztr\u00e1ci\u00f3.<\/p>\n\n\n\n Mondd el, mi\u00e9rt kell v\u00e1rni!<\/strong><\/p>\n\n\n\n Az ugyanis nem mindig egy\u00e9rtelm\u0171 a felhaszn\u00e1l\u00f3k sz\u00e1m\u00e1ra, hogy egy weboldal vagy egy app valamely funkci\u00f3ja mi\u00e9rt nem m\u0171k\u00f6dik azonnal. <\/p>\n\n\n\n Tedd min\u00e9l kev\u00e9sb\u00e9 frusztr\u00e1l\u00f3v\u00e1 a v\u00e1rakoz\u00e1st!<\/strong><\/p>\n\n\n\n Ehhez kellenek a kreat\u00edv megold\u00e1sok, melyek felkeltik a felhaszn\u00e1l\u00f3k figyelm\u00e9t.<\/p>\n\n\n\n Kevesebbnek \u00e9rezze a v\u00e1rakoz\u00e1si id\u0151t<\/strong><\/p>\n\n\n\n Ez kapcsol\u00f3dik az el\u0151z\u0151 ponthoz, ugyanis, ha siker\u00fcl felkeltened a felhaszn\u00e1l\u00f3 \u00e9rdekl\u0151d\u00e9s\u00e9t a v\u00e1rakoz\u00e1s k\u00f6zben, akkor \u00fagy \u00e9rzi, hogy gyorsabban telik az id\u0151. Megteheti ezt egy szokatlan sz\u00ednkombin\u00e1ci\u00f3, egy kreat\u00edv vagy kedves \u00f6tlet.<\/p>\n\n\n\n Mutasd meg a m\u00e1rk\u00e1t!<\/strong><\/p>\n\n\n\n Ha m\u00e1r a felhaszn\u00e1l\u00f3nak v\u00e1rnia kell, mi\u00e9rt ne haszn\u00e1ln\u00e1d ki ezt az id\u0151t? Nem kell persze egyb\u0151l aj\u00e1nlatokkal bomb\u00e1zni, ugyanakkor \u00e9rdemes az anim\u00e1ci\u00f3t \u00f6sszhangba hozni a m\u00e1rk\u00e1d vizu\u00e1lis megjelen\u00e9s\u00e9vel.<\/p>\n\n\n\n M\u00e1ra jelent\u0151s teret h\u00f3d\u00edtottak a l\u00e1tv\u00e1nyos, kreat\u00edv bet\u00f6lt\u00e9si anim\u00e1ci\u00f3k, melyeknek meg van az az el\u0151ny\u00fck, hogy a v\u00e1rakoz\u00e1s ideje alatt lefoglalj\u00e1k a felhaszn\u00e1l\u00f3t, \u00edgy az kev\u00e9sb\u00e9 lesz t\u00fcrelmetlen. Egyre t\u00f6bb c\u00e9g engedheti meg mag\u00e1nak, hogy figyeljen az ilyen r\u00e9szletekre is.<\/p>\n\n\n\n Ugyanakkor a legt\u00f6bb alkalmaz\u00e1s vagy weboldal eset\u00e9ben m\u00e9g mindig egyszer\u0171 anim\u00e1ci\u00f3kkal tal\u00e1lkozol, mivel ezek megjelen\u00edt\u00e9se kevesebb er\u0151forr\u00e1st ig\u00e9nyel a rendszert\u0151l, ami k\u00fcl\u00f6n\u00f6sen fontos a weben. Ezeket az alap\u00e9rtelmezett vagy ak\u00e1r nyitott forr\u00e1sk\u00f3d\u00fa bet\u00f6lt\u00e9s-jelz\u0151ket k\u00f6nnyebb alkalmazni, mint egy egyedi anim\u00e1ci\u00f3t megtervezni \u00e9s implement\u00e1lni az oldalba. <\/p>\n\n\n\n Ha rosszul haszn\u00e1lod a weboldaladon az eszt\u00e9tikai megfontol\u00e1sok alapj\u00e1n l\u00e9trehozott anim\u00e1ci\u00f3kat, akkor azok megakasztj\u00e1k a felhaszn\u00e1l\u00f3kat \u00e9s lelass\u00edtj\u00e1k \u0151ket a tartalom fogyaszt\u00e1s\u00e1ban. Ez pedig ideges\u00edti \u0151ket, ami nem j\u00f3 a felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny szempontj\u00e1b\u00f3l.<\/p>\n\n\n\n Azt m\u00e1r r\u00e9g\u00f3ta tudjuk, hogy egy weboldal lass\u00fa bet\u00f6lt\u0151d\u00e9se<\/a> rontja annak haszn\u00e1lhat\u00f3s\u00e1g\u00e1t, zavarja az embereket, \u00e9s befoly\u00e1solja azt a k\u00e9pet, amit az oldalr\u00f3l \u00e9s a c\u00e9gr\u0151l alak\u00edtanak ki. Amikor az id\u0151 csak sz\u0171k\u00f6sen \u00e1ll a rendelkez\u00e9s\u00fckre, akkor m\u00e9g a legkisebb k\u00e9sleked\u00e9s is frusztr\u00e1l\u00f3 lehet az inform\u00e1ci\u00f3 megszerz\u00e9s\u00e9ben.<\/p>\n\n\n\n A jelent\u0151s v\u00e1laszid\u0151 \u00e1ltal\u00e1ban a nagym\u00e9ret\u0171 k\u00e9peknek, felesleges funkci\u00f3knak vagy a szerver k\u00e9s\u00e9s\u00e9nek k\u00f6sz\u00f6nhet\u0151 az \u00f6sszetett adatfeldolgoz\u00e1s miatt. Ugyanakkor a Nielsen Norman Group elv\u00e9gzett haszn\u00e1lhat\u00f3s\u00e1gi tanulm\u00e1ny\u00e1ban<\/a> egy \u00fajabb okra lett figyelmes: m\u00e9gpedig azon vizu\u00e1lis effektre, melynek haszn\u00e1latakor csak a g\u00f6rget\u00e9s ut\u00e1n<\/em> jelenik meg egy bizonyos sz\u00f6veg az oldal adott r\u00e9sz\u00e9n.<\/p>\n\n\n\n Az emberek szavaib\u00f3l kider\u00fclt, hogy nem igaz\u00e1n tetszik nekik, hogy csak azut\u00e1n \u00e1ll \u00f6ssze egy oldal tartalma, miut\u00e1n odag\u00f6rgettek. Ahogy az sem, hogy minden egyes r\u00e9sz k\u00fcl\u00f6n t\u00f6lt\u0151dik be. Hiszen n\u00e9ha csak annyit szeretn\u00e9nek, hogy l\u00e1ss\u00e1k az inform\u00e1ci\u00f3kat, mindenf\u00e9le l\u00e1tv\u00e1nyos anim\u00e1ci\u00f3 n\u00e9lk\u00fcl. A lassul\u00e1snak teh\u00e1t b\u00e1rmilyen oka is van, az eredm\u00e9ny mindig ugyanaz: frusztr\u00e1ci\u00f3 \u00e9s roml\u00f3 felhaszn\u00e1l\u00f3i \u00e9lm\u00e9ny.<\/p>\n\n\n\n Anim\u00e1ci\u00f3kat gyakran csak az\u00e9rt dobnak be a weboldalakon a designerek, hogy felh\u00edvj\u00e1k a figyelmet bizonyos elemekre a fel\u00fcleten, vagy modern \u00e9s innovat\u00edv benyom\u00e1st keltsenek az adott c\u00e9gr\u0151l, m\u00e1rk\u00e1r\u00f3l. Val\u00f3ban, a finom anim\u00e1ci\u00f3k \u00e9s az \u00e1tmenet-effektek vizu\u00e1lisan izgalmasabb\u00e1 tehetik a weboldalt, illetve pozit\u00edv hat\u00e1st gyakorolnak arra, hogy a felhaszn\u00e1l\u00f3 mik\u00e9nt \u00e9rt\u00e9keli az adott c\u00e9get.<\/p>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/11\/animacio-weboldalon.png\")
<\/figure>\n\n\n\nMi\u00e9rt haszn\u00e1lunk anim\u00e1ci\u00f3t?<\/h2>\n\n\n\n
1. Fenntartja az \u00e9rdekl\u0151d\u00e9st a bet\u00f6lt\u0151d\u00e9s alatt<\/h4>\n\n\n\n
![\"(Forr\u00e1s:](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/04\/submit-button.gif\")
2. J\u00f3 els\u0151 benyom\u00e1st kelt<\/h4>\n\n\n\n
3. \u00c9l\u0151bb\u00e9 teszi a felhaszn\u00e1l\u00f3i fel\u00fcletet<\/h4>\n\n\n\n
![\"(Forr\u00e1s:](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/04\/animacio.gif\")
4. \u00c9rzelmeket v\u00e1lt ki<\/h4>\n\n\n\n
5. Seg\u00edt korrig\u00e1lni a v\u00e1ratlan hib\u00e1kat<\/h4>\n\n\n\n
![\"(Forr\u00e1s:](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/04\/404-hiba.gif\")
6. A bonyolult feladatokat k\u00f6nnyebb\u00e9 teszi<\/h4>\n\n\n\n
Mikor \u00e9s hol haszn\u00e1lhatsz anim\u00e1ci\u00f3kat?<\/h2>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/urlap-animacio.gif\")
\u00c1llapot-anim\u00e1ci\u00f3 vagy bet\u00f6lt\u00e9si anim\u00e1ci\u00f3<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/29.gif\")
<\/figure>\n\n\n\nVisszajelz\u00e9sek<\/h4>\n\n\n\n
Az \u00e1llapotv\u00e1ltoz\u00e1s k\u00f6zl\u00e9se<\/h4>\n\n\n\n
Navig\u00e1ci\u00f3<\/h4>\n\n\n\n
A mozg\u00e1s, mint jelz\u00e9s<\/h4>\n\n\n\n
Figyelemfelh\u00edv\u00e1s vagy figyelemelterel\u00e9s<\/h4>\n\n\n\n
Call to action gombok<\/h4>\n\n\n\n
Horgonysz\u00f6veg anim\u00e1ci\u00f3<\/h4>\n\n\n\n
Dinamikus h\u00e1tterek<\/h4>\n\n\n\n
Rejtett elemek felfed\u00e9se<\/h4>\n\n\n\n
Karuszel<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2020\/12\/karuszel-animacio.jpg\")
<\/figure>\n\n\n\nMilyen legyen egy j\u00f3 anim\u00e1ci\u00f3?<\/h2>\n\n\n\n
Sz\u00e1nd\u00e9kos<\/h4>\n\n\n\n
Term\u00e9szetes<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/04\/7.gif\")
<\/figure><\/div>\n\n\n\n![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/04\/mac-oc-animacio.jpg\")
<\/figure><\/div>\n\n\n\nIr\u00e1ny\u00edtja vagy csak megzavarja a felhaszn\u00e1l\u00f3t?<\/h4>\n\n\n\n
![\"Ahol](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2018\/03\/zavaro-animacio.gif\")
Visszafogott<\/h4>\n\n\n\n
Akad\u00e1s-mentes<\/h4>\n\n\n\n
Kifejezi a szem\u00e9lyis\u00e9ged<\/h4>\n\n\n\n
P\u00e9ld\u00e1k arra, mit\u0151l lesz kiv\u00e1l\u00f3 egy anim\u00e1ci\u00f3<\/h2>\n\n\n\n
1. \u00cdgy cs\u00fasszanak a tabokon elhelyezett tartalmak!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/tab-animacio.gif\")
<\/figure><\/div>\n\n\n\n2. Kapcsold \u00f6ssze a k\u00e9t \u00e1llapotot!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/elemek-kozotti-kapcsolat.gif\")
<\/figure><\/div>\n\n\n\n3. Haszn\u00e1ld a „v\u00edzes\u00e9s” effektet az anim\u00e1ci\u00f3kn\u00e1l!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/zuhano-effekt.gif\")
<\/figure><\/div>\n\n\n\n4. A megjelen\u0151 tartalom tolja el a t\u00f6bbi tartalmat!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/megjeleno-tartalom.gif\")
<\/figure><\/div>\n\n\n\n5. Legyen l\u00e1that\u00f3, hogy hov\u00e1 tartozik a men\u00fc!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/kinyilo-menu-animacio.gif\")
<\/figure><\/div>\n\n\n\n6. Haszn\u00e1ld a gombokat a k\u00fcl\u00f6nb\u00f6z\u0151 \u00e1llapotok jelz\u00e9s\u00e9re!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/gomb-allapotjelzo.gif\")
<\/figure><\/div>\n\n\n\n7. H\u00edvd fel a figyelmet arra, ami fontos!<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2017\/11\/figyelem-felhivas-animacioval.gif\")
<\/figure><\/div>\n\n\n\nMilyen legyen egy bet\u00f6lt\u00e9si anim\u00e1ci\u00f3?<\/h2>\n\n\n\n
![\"Flash](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/flash-alapu-betoltesi-animacio-starbucks.jpg\")
Milyen t\u00edpusai vannak?<\/h4>\n\n\n\n
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/gmail-betoltesi-animacio.gif\")
<\/figure><\/div>\n\n\n\nSpinner vagy v\u00e9gtelen\u00edtett anim\u00e1ci\u00f3<\/h4>\n\n\n\n
![\"Skeleton](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/skeleton-screen.png\")
<\/figure><\/div>\n\n\n\nMire figyelj?<\/h4>\n\n\n\n
![\"Bet\u00f6lt\u00e9si](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/betoltesi-animacio-idobecslessel.gif\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/miert-kell-varni-betoltesi-animacio.gif\")
![\"\"](\"http:\/\/blog.webshark.hu\/wp-content\/uploads\/2019\/03\/betoltesi-animacio.gif\")
Egyszer\u0171 legyen vagy kreat\u00edv?<\/h4>\n\n\n\n
Mi\u00e9rt lass\u00edthatj\u00e1k le a felhaszn\u00e1l\u00f3kat az anim\u00e1ci\u00f3k? \u00c9s mi a megold\u00e1s?<\/h2>\n\n\n\n
Az eszt\u00e9tikai c\u00e9lb\u00f3l alkalmazott anim\u00e1ci\u00f3<\/h3>\n\n\n\n