Sok időt tölthetünk azzal, hogy webhelyünk gyönyörű legyen. Megtervezhetjük a legkáprázatosabb elrendezést, hozzáadhatjuk a legszebb képeket, amelyeket találunk, elegáns tipográfiát alkalmazhatunk, és még többet tehet webhelye nagyszerű megjelenéséért.
De hogyan tehetjük izgalmasabbá, oly módon, hogy az oldalunkra érkező látogató több időt töltsön weblapunkon?
Animációk használatával!
Az animáció(k)nak köszönhetően weboldalunkat életre kelthetjük. Ha megfelelően csináljuk, akkor webhelyünk használatát igazi élménnyé varázsolhatjuk.
Íme néhány ok a sok közül, hogy miért jó ötlet a webhely-animációk használata:
Folyékony mozgások létrehozása: Általában, ha rákattint egy gombra vagy egy hivatkozásra egy webhelyen, az azonnal megnyitja a következő oldalt, űrlapot vagy bármit, amit arra terveztek. Az animációk segítségével becsúsztatható vagy felugró átmenetet hozhat létre, hogy a felhasználók láthassák az eredményül kapott oldalt. Ez különösen akkor hasznos, ha webhelye „fülekkel” ellátott felülettel rendelkezik.
Kontextus megadása: Tegyük fel, hogy sok tartalom van a webhelyen, amihez a felhasználónak le kell görgetnie, hogy többet megtekinthessen. Annak érdekében, hogy az olvasók jelezzék, hogy meg kell tenniük ezt a műveletet, animálhatja a tartalmat, hogy felfelé csússzon az oldalon. Így bárki utalást kap arra, hogy ha lejjebb görget, több tartalom is lehet.
Visszajelzés: Az animációk különösen hasznosak lehetnek, ha sok interaktív elem van a webhelyen. Például animálhat egy gombot, amikor a felhasználó ráviszi az egeret, jelezve, hogy az kattintható. Vagy világosabbá teheti azt a mezőt, amelyet a felhasználó a webhelyén lévő űrlapon gépel. Az ilyen típusú animációkkal kényelmesebb lesz böngészni a webhelyén, mivel visszajelzést ad az alapján, ahogyan az emberek interakcióba lépnek vele.
Az előrehaladás megjelenítéséhez: Ha webhelyének előrehaladást kell mutatnia, például időben, betöltési sávként vagy valami másként, akkor animáció segítségével életre keltheti, hogy megmutassa, hogy ezek az elemek valós időben haladnak előre. Ennek ismeretében hatékonyabban tudja majd eldönteni, hogy melyik animációt hová helyezze el a webhelyén.
Az animáció 7 alapelve a webdesignban
Az effektusok létrehozásához elengedhetetlen, hogy tisztában legyünk azzal, hogy miért létezik minden egyes animáció a webhelyünkön. Tudatosan tervezzünk! Fontos, hogy weboldalunkra érkezők számára oldalunkon való „szörfözés” kellemes élmény legyen.
1. alapelv: Squash és nyújtás
Ez az animációs elv azt jelzi, hogy ha azt szeretné, hogy tárgyai életszerűnek tűnjenek, keltsék bennük azt az érzést, hogy tömegük van. Ezt úgy lehet megmutatni, hogy egy tárgyat „lenyomunk” vagy „nyújtunk”, amikor az interakcióba lép egy másik tárggyal. Például animálhatja a gombokat a webhelyén, hogy azok kattintásra összezsugorodjanak, vagy hogy egy menüelem vagy hivatkozás nagyobb legyen, ha rámutat.
2. alapelv: Előrelátás
Talán észrevetted, hogy bizonyos webhelyeken a dolgok hirtelen történnek. Ha rákattintunk egy linkre, azonnal átlép a webhely másik részébe. Vagy ha rákattint egy gombra, azonnal megjelenik egy felugró ablak az arca előtt, vagy elindul a videó lejátszása. Ha ez megtörténik a webhelyén, akkor ez némileg zavaró hatású lehet. Ennek megoldására „várakozó” animációkat adhat a webhelyéhez. Például, ha valaki rákattint egy linkre, hogy a webhelye következő oldalára lépjen, akkor animálhatja azt úgy, hogy a tartalom balról vagy jobbról becsússzon, és megmutatja látogatóinak, hogy egy oldallal előbbre léptek. Vagy ha van előugró ablaka, akkor „könnyítheti” az animációval, hogy elhalványuljon a képernyőn.
3. alapelv: Színreállítás
Néha azt szeretnénk, ha az emberek felfigyelnének egy adott elemre a képernyőn, például egy cikkre, egy Feliratkozás gombra. Ehhez megteheti az úgynevezett színpadra állítást.
A rendezés során két dolgot tehet:
- A többi elemet maszkolhatja, hogy kiemelje a kívánt elemet. Például elhomályosíthatja webhelye többi részét, miközben az az elem kerül a fókuszba, amelyre szeretné, hogy a személy figyeljen.
- Animálhatjuk az elemet úgy is, hogy mozogjon, míg a többi elem statikus marad. Például, ha van egy feliratkozás gomb a webhelyünkön, akkor animálhatjuk azt, hogy egy kicsit megrázza vagy elmozduljon, hogy az ember szeme ráirányúljon.
4. alapelv: Végrehajtás és átfedő cselekvés
Ezzel az animációs technikával, akárcsak a „Squash és nyújtás” animációval, valósághűbbé tehető a webhely elemei. Ez azt írja elő, hogy nem minden objektum indul és áll meg ugyanazon a helyen. Tegyük fel például, hogy van egy megjegyzésmező a webhelyén. Animálhatja úgy, hogy az új megjegyzések felülről lecsúsznak, leesnek, és egy kicsit ugrálnak, mielőtt megállnának. Vagy tegyük fel, hogy van egy lista a webhelyén, amely rendszeres időközönként érkezik új információkkal. Animálhatja a listát úgy, hogy amikor új elem érkezik, az balról becsúszik, kicsit jobbra mozdul, és visszapattan a helyére. Ez a valósághű mozgás érzetét kelti webhelye elemeiben.
5. alapelv: Időzítés
Az időzítés az animáció fontos része. Minél gyorsabb az animáció, annál világosabb lesz a tárgy. Minél lassabb az animáció, annál nehezebbnek tűnik.
6. alapelv: Túlzás
A túlzás egy nagyszerű animációs technika, amellyel bizonyos elemek súlyát lehet növelni. Ez egy igazán nagyszerű módja annak, hogy a webhely egy elemére helyezzen hangsúlyt. Tegyük fel például, hogy azt a menüpontot szeretné kiemelni, amelyre egy személy rákattintott. Ezt eltúlozva növelheti, ha a felhasználó rákattint.
7. alapelv: Szilárd rajz
Ha valóban életre szeretné kelteni webhelye elemeit, létrehozhat belőlük háromdimenziós változatot – és animálhatja őket, amikor a felhasználó interakcióba lép velük.
Tegyük fel például, hogy valaki a webhelyén lévő kép fölé viszi az egérmutatót. Animálhatja úgy, hogy felforduljon, és az emberek láthassák a másik oldalon lévő tartalmat.
Mit ne tegyünk, ha animációkat adunk hozzá webhelyéhez
- Animációnk sebessége ne legyen túl gyors (v. lassú): Ha a webhely animációnk túl gyorsak vagy túl lassú, az megzavarhatja vagy elkeserítheti a látogatókat. Optimalizálja az animációkat, hogy azok olyan sebességgel működjenek, amely tökéletes a felhasználó számára.
- Használjon gyors animációkat, amikor a felhasználók cselekvést várnak– ne várakoztassuk meg őket: Amikor webhelyünk látogatói egy hivatkozásra vagy gombra kattintanak, vagy bármilyen műveletet végeznek, amely után a webhely válaszát várják – használjon gyors animációt.
- Ne adj hozzá szükségtelenül feltűnő animációt : A furcsa formájú, élénk színű és felbukkanó animációk oda nem illőnek tűnhetnek a webhelyeden. Ha tervezett animációnk túlzottnak véljük, inkább ne használjuk honlapunkon, riasztó lehet a látogató számára.
Ne adjon hozzá olyan animációt, amely tönkreteszi az erőforrásokat : Az animációk extra feldolgozási teljesítményt igényelnek, emiatt a webhely lassan tölthet be
Ne tegyünk animációt csak azért mert jól néz ki. Fontos hogy a felhasználó jól érezze magát weboldalunkon és újra visszatérjen oldalunkra.