Selles ägeda konkurentsi tingimustes otsivad ettevõtted meeletult võimalusi inimeste tähelepanu püüdmiseks ja säilitamiseks. Igapäevase elu käigus tekitab lõputu visuaalse stimulatsiooni voog meid tänaval animeeritud reklaamidest, mobiiltelefoni videotest, rääkimata meie sotsiaalmeedia voogudest, tekitab pideva liikumise tunde, mis võistleb meie tähelepanu nimel.

Sekundi murdosa reaktsioon meie keskkonnas liikumisele tekkis ellujäämisvajadusest ning selle käivitasid potentsiaalselt ähvardava või kahjuliku toimega keskkonnast tingitud stiimulid; inimesed pööravad erilist tähelepanu liikuvatele asjadele. Kui tabame midagi silmanurgast kiiresti liikuvat, hoiatab aju meid sekundi murdosa jooksul, sest meie alateadlik aju on ohule reageerinud juba enne, kui meie teadlikul meelel pole olnud aega informatsiooni töödelda.

Reklaamijad teavad seda ja sellepärast meil ka on animeeritud tänavareklaamid bussipeatustes ja metrooplatvormidel sotsiaalmeedia voogudes ilmuvad videoreklaamid ja täisliikuva videoga elektroonilised stendid. Tehnika on üks-kaks löögiefekti, mis on mõeldud turundussõnumite edastamiseks. Esiteks, püüdes meie tähelepanu, ja teiseks video ja animatsiooni abil sõnumi edastamiseks.

Kui staatiline pilt on väärt tuhat sõna, siis kui palju on animatsioon väärt?

Siit tuleb veebianimatsioon. Veebidisainerid loodame püüda meie tähelepanu ja hoida seda ning võib-olla lisada ootamatu rõõmurõõmu. Veebianimatsiooni saab kasutada keeruka protsessi või idee erinevate etappide visualiseerimiseks, lihtsa turundussõnumi illustreerimiseks või veebisaidil olevate asjade loomulikul ja sujuval liigutamisel, kui inimesed kerivad - jällegi, et millelegi tähelepanu juhtida.

Kuidas veebianimatsioon algas, GIF-ide tõus

Ülemaailmse veebi algusaegadel olid asjad üsna staatilised ja igavad. Veebilehed põhinesid peamiselt graafilisel kujundusel ja trükimaailma küljendustel. Mõned disainerid tegid siiski vaatamata tehnilistele ja ribalaiusega seotud väljakutsetele ühiseid jõupingutusi, et kaasata veebianimatsiooni varased vormid, et muuta need dünaamilisemaks ja atraktiivsemaks. Üks esimesi GIF-animatsiooni lisandeid veebisaidile oli sisse lülitatud Jeffrey Zeldman ’Batman Forever 1995. aastal. Külastajaid tervitas Batmani lend nende suunas, animeeritud pildijärjestusena.

Batman Foreveri reklaamsait oli tol ajal üks populaarsemaid saite. See inspireeris teisi veebidisainereid ja -arendajaid lisama GIF-i veebianimatsiooni omapärase ja pilkupüüdva elemendina oma veebisaitidele.

20 aastat edasi ja animeeritud GIF-failid on nüüd kõikjal. Nad on Twitteris, Messengeris, iMessage'is, WhatsAppis, Skype'is, Instagramis ja Facebookis. GIF-failid sobivad lühikese animatsiooni, pildijärjestuste ja isegi lühikeste videosilmuste jaoks. Kahetsusväärne puudus on aga see, et GIF-failivormingul ei ole muutuvat läbipaistvust ja see ei toeta alfakanalit; seetõttu on kõik pikslid kas täielikult läbipaistmatud või täiesti läbipaistvad.

GIF-animatsioonid olid renessansi algus aastal veebidisain , kuid need polnud ideaalsed. Eriti sissehelistamise ja aeglase Interneti-kiiruse algusaegadel olid GIF-id ribalaiusega sigadused. Tulemuseks oli madala eraldusvõimega pikseljärjestus. Disainerite puuduseks, mis pidid GIF-faile võimalikult väikseks pakkima, oli piiratud 8-bitine palett, mille tulemuseks oli palju ditterimist. See muutus, kuna kiire Internet muutus 21. sajandil üha tavalisemaks ja selle tulemusel muutus veebianimatsioon miljonite värvidega paremaks ja suurema kaadrisagedusega sujuvamaks.

Kiire veebianimatsiooni koidik

Suur veebianimatsiooni buum tuli koos Välk aastal 1996 kui Macromedia teatas oma veebipistikprogrammist ja sellega kaasnevast raamipõhisest animatsioonivahendist: Macromedia Flash (pärast nende omandamist FutureSplash Animator , vektoranimatsiooniprogramm). Uute võimete veebi toomisel oli Flashil juhtiv roll. Alates heli ja animatsioonist kuni interaktiivsuse ja videoni aitas Flash edendada Internetti.

Võimalus ehitada tervetele saitidele lihtsaid, lahjaid, vektoripõhiseid veebianimatsioone, mis hõlmasid interaktsioone, lõi selle, mida võiks nimetada veebidisaini barokkperioodiks, kus maastikku tungis (liiga) palju animeeritud elemente. Sellegipoolest pakkus Flash pilgu dünaamika võimalustele veebidisain , vabastades disainerid katsetamiseks ja vabastades veebidisaini kiire arengu perioodi.

võltskrediitkaardi numbrid 2017

Flash-animatsioonid on kerged ja neid on suhteliselt lihtne teha. Vaid mõne kilobaiti suurused levitatakse neid SWF-failivormingus ja failis, kasutades heleda vektorgraafikaga heli. Veebianimatsioonide loomisest sai sujuvam protsess, mis ei lisanud palju veebilehtede laadimisaega. Kuid kõige selle jaoks jäi oluline puudus - selle töötamiseks oli vaja brauseri pistikprogrammi.

Lisaks võimaldas Flashis keerukat suhtlemist JavaScripti sarnane objektorienteeritud programmeerimiskeel ActionScript (AS). ActionScript oli algselt loodud lihtsate 2D vektoranimatsioonide juhtimiseks, kuid arenes seejärel keerukaks tööriistaks.

Kahjuks ei olnud Flash-animatsioon mõeldud reageerivaks, ei töötanud kõigis seadmetes hästi ja lõpuks visati see kõikidest populaarsetest mobiilseadmetest välja. Kuigi faili suurus oli suhteliselt väike, ei olnud Flash optimeeritud hästi ja lõpuks oli protsessor näljane, mis oli probleem ka mobiiltelefonides. Flashi ajastu lõpp saabus Steve Jobsi järel otsustas Flashi mitte toetada Apple'i mobiilseadmetes.

Flash loodi arvutite ajastul - arvutite ja hiirte jaoks. Kuid mobiiliajastu käsitleb väikese energiatarbega seadmeid, puuteliideseid ja avatud veebistandardeid - kõiki valdkondi, kus Flash jääb alla.

Steve Jobs

Veebianimatsioon täna

Kuna Flash on vananenud, on meil veebianimatsiooni vajadused erinevad. Tööriistad peavad olema paindlikud ja kerged. Veebidisainerid peab looma reageeriv ja kohandatav sisu erinevatele seadmetele (lauaarvuti, tahvelarvuti ja mobiil), võttes arvesse erinevaid ekraanimõõtmeid, brausereid, kuvasuhteid, pikslitihedust ja palju muud. Meie veebianimatsiooni meistriteosed peavad töötama 5-tollises 720px mobiilseadmes 9,7-tollise QXGA tahvelarvutini ja 32-tollise Retina 6K ekraanini.

Tehnoloogia on küpsenud punktini, kus isegi vähese võimsusega mobiilseadmetel on ribalaius ja töötlemisvõimsus väga nõudlike veebianimatsioonide ja kõrge eraldusvõimega videosisu käsitsemiseks. See ei tähenda, et veebisaidid peaksid olema ülimalt hõivatud. Nagu ikka, on see animatsiooni, dünaamilise interaktsiooni ja staatiliste elementide vahel õige tasakaalu saavutamine. Asjaolu, et saame täna rakendada palju uhket veebianimatsiooni, ei tähenda, et peaksime seda tegema.

Veebidisainerid / animaatorid peavad arvestama ka platvormidevahelise toega. Kümme aastat tagasi ei pidanud disainerid tagama, et nende looming nii laias seadmete valikus hea välja näeks. Erinevad kuvasuhted, portree ja maastiku orientatsioonid, samuti erinevad pikslitihedus ja vaatamiskaugusi tuleb arvestada. See mured pakuvad veebidisaineritele uusi väljakutseid ja võimalikke lõkse. Kasutaja testimine kulutab kallist aega, paljud platvormid võivad valesti minna ja veebianimatsioonid peavad olema üksikasjalikumad kui kunagi varem.

HTML5, CSS3, JavaScript ja SVG (skaleeritav graafika) näivad olevat parimad lahendused veebianimatsiooni jaoks. Nende kaasaegsete veebitehnoloogiate ja keelte kasutamine aitab toime tulla enamiku, kuid mitte kõigi ülaltoodud probleemidega. Kuid alati on hea mõte hoolikalt tallata, eriti kui see on kaardistamata territooriumil, ning ulatuslik kvaliteedikontroll ja testimine on hädavajalikud.

Miks kasutada veebianimatsiooni?

Veebianimatsioon võib inimeste tähelepanu köita ja hoida kauem kui staatiline veebileht ning edastada ideed või kontseptsiooni selgemalt ja tõhusamalt. Suurepärane veebianimatsioon annab loo iga liigutamise taga. See kõik käib animatsiooni mõtestamise ja 'hingega' (lad. Anima) ellu äratamiseks.

Veebianimatsioon peaks olema sujuv, sisukas ja toetama külastaja teekonda. Veebidisainer / animaator peab olema teadlik sellest, kuidas animatsioon sellesse sobib kasutuskogemus , proovige prognoosida kasutajate tõenäolisi vooge ja seejärel seda mõistlikult toetada.

Veebidisainerid ei tohi vaadata veebianimatsiooni puhtalt tehnilisest vaatenurgast; nad peavad seda vaatama kasutaja vaatenurgast.

Animatsiooni üks olulisi asju on ajastus. Õige ajastus annab animatsioonile füüsilise ja emotsionaalse tähenduse. Kogemus peaks olema sujuv ja loogiline. Kui animatsioon ei ole sujuv (sellel on ajastamisprobleeme), võivad inimesed tajuda seda veana ja kaotada igasuguse motivatsiooni veebisaiti edasi uurida.

Animaator peab kavandatud efekti saavutamiseks kasutama sobivat ajastust. Mitu võtmekaadrit tuleks animatsioonis kasutada? Milline dünaamiline muutus animatsioonis on tingitud külastajate interaktsioonist ja kui kiiresti reageeritakse pärast interaktsiooni? Kas animatsioon on kapriisne, tõsine, meelelahutuslik?

Loogilisest vaatepunktist saame veebianimatsiooni jagada kahte põhitüüpi:

• Staatiline, mitteinteraktiivne veebianimatsioon, näiteks a GIF-animatsioon .
• Dünaamiline veebianimatsioon koos kasutaja seotuse ja interaktiivsusega, mis muutub kasutaja sisendil.

Dünaamilise animatsiooni parim näide on mäng , kus kasutajad manipuleerivad ekraanil kuvatava sisuga. Teine lihtne näide oleks teatud elementide positsiooni muutmine veebisaidi külastajana sirvib läbi parallaksi keriv veebisait. Animatsioon pole passiivne, see varieerub sõltuvalt kasutaja toimingutest.

Dünaamilist veebianimatsiooni kasutatakse veebis animeeritud infograafikute esitamiseks sageli, nii et inimesed pööravad lehe kerimisel suuremat tähelepanu konkreetsetele aladele - see on võimas viis asjakohase teabe esiletoomiseks.

Veebianimatsiooni plussid ja miinused

Siin on mõned veebianimatsiooni tehnikate plussid ja miinused, sealhulgas pärandlahendused, mida enam ei kasutata.

Tehnika	Plussid	Miinused
GIF	See on lihtne ja kõigile kättesaadav. Brauseri pistikprogrammi pole vaja. See võimaldab pildijada animatsiooni, see võib olla videolaadne.	Animeeritud gif-failide suurus võib olla tohutu. Läbipaistmatuse kontroll puudub, alfakanalit pole. Sellel on madal kompressioon. Seda saab piksliseerida.
APNG	Toetab alfakanalit.	Enamik veebibrausereid ei toeta.
Välk	Eksporditud swf-fail võib olla üsna väike. See on kiire, võib olla interaktiivne ja kasutab vektoranimatsiooni.	Enamikul platvormidel seda enam ei toetata.
HTML / CSS3	Lihtne ja lihtne õppida. Hea üleminekute ja teisenduste jaoks. HTML / CSS3 animatsioonid töötavad hästi mobiilseadmetes. See võimaldab vektori või piksli animatsiooni. Oskab manipuleerida ka skaleeritava vektorgraafikaga (SVG).	Kõiki SVG atribuute ei saa CSS-iga animeerida. Selle animatsioonivõimalused on piiratud ja see nõuab sageli JavaScripti või SMIL-i kasutamist. See ei saa reageerida uutele sisenditele ega muutuvale keskkonnale (dünaamiline animatsioon).
NAERDA	See on kompaktne ja võimeline animeerima omadusi, millega CSS ei saa hakkama. Säilitab SVG pildina manustatuna.	Kõiki brausereid ei toetata.
JavaScripti	Muudab veebianimatsiooni hõlpsaks, kui kasutate SVG animatsiooniteeki, mis genereerib pildijada (.png jada)	Pildina manustatuna ei säilita SVG-d.

Aga veebianimatsiooni plussid ja miinused üldiselt? Hästi teostatud veebianimatsioon võib endiselt paigast ära vaadata, nii et enne animatsiooni integreerimist veebisaidi kujundusse on alati mõistlik esitada mõned olulised küsimused (samuti viktoriinikliendid ja teised meeskonnaliikmed).

Esiteks peame kontrollima kuidas animatsioon mõjutab kasutajakogemust. Kas ta saab parandada veebisaidi UX? Disainerid peaks:

• Uurige olemasolevat veebisaidi kujundust (kui see on saadaval)
• Kontrollige sihtrühma ja nende kasutatavaid riistvaraplatvorme
• Kontrollige saidi laadimisaega ja protsessori koormust
• Uurige teisi alternatiive
• Hoidke silma peal kasutatavusel

See on mitte hea mõte kasutada saidil veebianimatsiooni, et lihtsalt trende jälgida.

Veebianimatsiooni kasutamise otsust tuleks käsitleda mis tahes muu kujundusotsusena; veebidisainerid peab kaaluma plusse ja miinuseid ning veenduma, et kasutuskogemust ei kahjustataks. Samuti peaksid nad töötama koos arendajatega koodinõuete väljaselgitamiseks ja tagama, et nad ei jääks kinni ebaefektiivse koodiga, mida võib-olla tuleb teele muuta.

Kaasaegne veebianimatsiooni tehnoloogia on viimase 20 aasta jooksul märkimisväärselt küpsenud - jõudlus, saadaval olev ribalaius ja renderduskvaliteet on tõusnud. Kuid disainerid peaksid hoolikalt tallama ja animatsiooni veebisaidile lisama ainult siis, kui see suurendab kasutajakogemust märkimisväärselt.

• • •

Lisalugemine ApeeScape'i disainiblogist:

• Kuidas luua kohandatud laadimisanimatsioone, et vähendada põrkemäära
• Mõistlike jooniste loomine Sketchi ja Looperi abil pole aega
• Kasutajaliidese animatsiooni samm-sammuline juhend koos põhimõtte ja visandiga
• Logo-animatsiooni inspiratsioonid, et muuta teie bränd meeldivamaks
• Samm-sammuline juhend animeeritud toodete selgitavate videote loomiseks

Põhitõdede mõistmine

Milleks veebianimatsiooni kasutatakse?

Veebianimatsiooni kasutatakse igasugustel veebilehtedel. Need võivad olla väikesed veebianimatsioonid, mis juhtuvad siis, kui külastaja kerib veebilehte, et juhtida tähelepanu elemendile, toodet demonstreerivale animatsioonile või reklaamveebianimatsioonile, mis näitab midagi meelelahutuslikult ja kaasahaaravalt.

Miks on animatsioon veebidisaini valdkonnas oluline?

Veebianimatsiooni saab kasutada tähelepanu äratamiseks, inimeste paremaks kaasamiseks ning selgema ja tõhusama suhtlemise tagamiseks. See võib inimeste tähelepanu köita ja hoida kauem kui ainult staatiline veebileht. Veebianimatsioon peaks olema sujuv, sisukas ja toetama külastaja teekonda.

Millised on veebis levinud põhianimatsiooni tüübid?

Veebianimatsiooni põhitüübid on CSS ja JavaScripti animatsioon, skaleeritav vektorgraafika (SVG), SMIL, GIF, lõuend ja video. Iga veebianimatsiooni tüüpi saab kõige paremini kasutada selleks, milleks see on mõeldud. Näiteks CSS-i üleminekuid ja animatsioone tuleks ideaalis kasutada kasutajaliidese ja põhiülekannete jaoks.

Mis on Flash ja selle kasutusalad?

Flash on animatsioonitööriist ja Adobe'i brauseri pistikprogramm. Veebianimatsiooni koostamiseks kasutatakse raami-põhist ajaskaalat ja sellel võib olla interaktiivsus, mis saavutatakse skriptikeele nimega ActionScript. Enamik mobiilseadmeid ei toeta seda ja kõik veebibrauserid lõpetavad selle toetamise järk-järgult.