Sissejuhatus animatsiooni veebidisainis
Animatsioon pole enam ainult koomiksite jaoks. Alates täisekraanil liikuvatest piltidest kuni väikeste hõljukiefektideni ilmub animatsiooni puudutusi igal pool. Animatsioon on trendikas, lõbus ja kasutajasõbralik.
Ja takistused animatsiooni kasutamisel on hakanud langema. Kuna enamik kasutajaid on kiirel ühendusel ja on hõlbus luua kõike alates lihtsatest liigutustest või tobedast gifist kuni mitmeminutilise tegevuseni, on animatsioonidest saanud praktilised ja kasulikud veebidisaini tööriistad.
Uurige Envato elemente
Animatsiooni põhitõed
Animatsioon juhtub siis, kui midagi liikumatult või kahemõõtmeliselt loodud loomingut “tuuakse ellu” ja tundub, et see liigub füüsikaseadusi järgides. See on viis, kuidas koomiksitegelane mööda ekraani kõnnib või kuidas rakenduse ikoon põrkub nagu pall, kui see teie Mac'i töölauale laaditakse.
Üks sõnadest, mis on peaaegu animatsiooni sünonüümiks, on Disney. 1980. aastate alguses kirjutasid kaks ettevõtte tipp-animaatorit raamatu, milles kirjeldati animatsiooni 12 põhimõtet. Frank Thomase ja Ollie Johnstoni “Elu illusioon: Disney animatsioon” loob animatsiooni raamistiku ka tänapäeval.
- Squash ja venitage
- Ennetamine
- Lavastus
- Otsene tegevus ja poseerige
- Järgige ja kattuvaid tegevusi
- Aeglustada ja aeglustada
- Kaar
- Teisene tegevus
- Ajastus
- Liialdus
- Tahke joonis
- Apellatsioon
Veebianimatsioone salvestatakse sageli GIF-, CSS-, SVG-, WebGL- või videofailidena. Need võivad olla mis tahes, alates lihtsast allajoonimisest, mis kuvatakse, kui hõljutate sõna üle täisekraani video või taustpildi. Nagu kõigi muude kujundusvõtete puhul, võivad ka animatsioonid olla peent või need võivad olla teie näos ja neid on raske vältida.
2017. aasta kujunemisjärgus trend
Animatsioon veebidisainis on asi, millega alustame iga päev. Animatsiooni kui kujundustrendi võti on modereerimine. Väikesed lihtsad animatsioonid on kaasahaaravad ja huvitavad; võib-olla ei mõtle kasutaja üldse, et nad on animatsioonid. Suuremahulised animatsioonid võivad olla huvitavad visuaalid, mis tõmbavad teid disaini. Kuid kui hakkate segama liiga palju erinevaid liikuvaid efekte, võib see põhjustada täieliku kaose.
Animatsiooni muudab trendikaks realism. Tänapäeva disainimaastikul, kus on nii palju tasaseid ja minimaalse stiili kujundusi, vajavad kasutajad rohkem näpunäiteid, et öelda neile, mida teha. Animatsiooni lihtsad bitid võivad kasutaja suunata esteetilisi muutusi tegemata. See aitab lisada juhiseid ja tellimusi skeemide kujundamiseks, mis võivad visuaalselt olla liiga lihtsad, et kasutajatele piisavalt suunata. Animatsioon loob sel juhul õnneliku keskmise lihtsustatud ja kasutatavuse vahel.
Teine suundumust soodustav tegur on juurdepääs tööriistadele disainilahenduse taga- ja kasutajaotstes. Keerukamate animatsioonide jaoks ei vaja te Flashit. (Ja kui ehitate endiselt Flashi, on aeg lõpetada.) Seda saab teha mitmel muul viisil. Tänapäeva animatsioonid ei takista veebisaite ega veebiservereid, muutes efektid kasutajatele kiireks laadimiseks ja kiire Interneti-juurdepääsuga animatsioonid ei jäta sündmustetsükli keskel takerdudes vahele.
Suured vs väikesed animatsioonid
Veebi animeerimiseks jaguneb see kaheks võrdselt hõlpsasti mõistetavaks kategooriaks: suur ja väike. (Võite arvata, kuidas need välja näevad.)
Suured animatsioonid on need, millel on oma ulatus. Sageli täidavad suuremahulised animatsioonid käitamisajaga video kujul olulise osa ekraanist ja on iseloomulikud lühifilmile. Need animatsioonid on keskpunktiks üldises kujunduses. Animatsiooni liikumiseks ei pea kasutajad sageli ühtegi toimingut tegema. Kui vaatate tähelepanelikult stuudio Meta saiti, suumib koopia lugemise ajal iga suur pilt.
Väikesed animatsioonid on pisikesed tükid, mis leiate, kui hakkate veebisaidiga suhtlema. Need jaotused võivad olla hõljumisriikide, pisikeste kaunistuste või kasutatavuse juhiste või tööriistade kujul. Väikesed animatsioonid on aktsent, mis aitavad kaasa üldisele esteetikale, kuid tõenäoliselt pole need disaini keskmes. Henry Browni saidil on lihtne animatsioon see, et kui te vaatate tähelepanelikult, siis silmad illustratsioonil vilguvad tegelikult.
Millal kasutada animatsiooni
Iga suundumuse, sealhulgas selle, probleem on teadmine, millal seda kasutada. Animatsioon võib olla teie disaini tööriistakomplekti jaoks suurepärane väike trikk, kuid mitte iga projekti jaoks. Animatsioon peaks olema sujuv ja õmblusteta, mitte hüplik ega mehaaniline. See peab teenima eesmärki kasutaja jaoks ja mitte segama sisu.
Animatsiooni kasutamise peamine põhjus on kasutatavuse suurendamine. Lihtsad animatsioonid võivad olla suurepärased suunavad tööriistad, mis aitavad inimestel mõista, milliseid nuppe veebisaidi kaardil klõpsata või kuhu järgmisena minna. Paljud disainerid, kes kasutavad keerulisi kerimisefekte, ühendavad kerimise või klõpsamise lihtsa animatsiooni kasutaja tööriistaga. (See hõlmab kõike alates lihtsast kopsakas ikoonist või sõnadest, mis hüpikstavad ütlust „kerige alla”.)
Kasutatavus on saadaval mitmes vormis:
- Suhtlusfunktsioon või kuidas veebisaiti kasutada
- Näita muudatusi, näiteks vormi õige täitmine või elemendi klõpsamise esiletõstmine
- Looge voog või suunake kasutajad tegevusele kutsumiseks
Animatsiooni kasutamise teine põhjus on esteetiline. Animatsioon võib olla suurepärane „dekoratsioon“. Mõnikord on animeeritud elemendi eesmärk puhtalt visuaalne ja see on aktsepteeritav kasutamine. See dekoratiivne animatsioon võib aidata loo rääkida või luua emotsionaalse ühenduse kasutajaliidese ja kasutaja vahel. Animatsiooni eesmärk võib olla visuaalse huvi esilekutsumine ja kasutaja pikema aja jooksul teie saidiga seotuse hoidmine.
Puhtalt visuaalse animatsiooni loomisel mõelge, mida see peaks tegema. Mõelge ühendusele, mida soovite kasutajal luua. Kas see peaks olema lõbus või üllatav? Kas see on jagamiseks mõeldud ainulaadne sisu? Isegi puhtal visuaalil peaks olema eesmärk.
Ressursid
Kas olete valmis animatsiooni alustama? Siin on mõned allikad edasiseks lugemiseks ja tööriistad, mis aitavad teil alustada.
- Video Illusion of Life näitab kõiki 12 põhimõtet hõlpsasti mõistetaval viisil.
- A List Aparti veebianimatsioon tööl on suurepärane ressurss selle kohta, mis paneb animatsiooni tööle.
- “CSS-i animatsiooni algaja tutvustus” näitab teile, kuidas muuta ruut CSS-i atribuutide abil ringiks.
- Elastsed animeeritud SVG-elemendid on õpetus SVG-komponendi integreerimiseks ja animeerimiseks.
- Mark Geyeri esitlus Art UI Animations kasutab mõistete selgitamiseks animatsiooni.
- ”15 parimat HTML5 tööriista täpsema animatsiooni loomiseks” on suurepärane järgmise taseme samm ja tööriistade loend, kui olete juba põhitõdedest aru saanud.
- Animaatori ellujäämiskomplekt õpetab põhiprintsiipe, mida kohaldatakse kõigi animatsioonide vormide suhtes.
Järeldus
Animatsiooni osas on rusikareegel järgmine: hea animatsioon muudab kasutaja kogemuse paremaks. See võib toimuda emotsionaalse ühenduse vormis - näiteks lõbus, positiivne kogemus - või muutes saidi hõlpsamaks kasutamiseks.
Animatsioon on lõbus tehnika, mis on muutunud paljudes rakendustes palju standardsemaks. Kui otsite inspiratsiooni, lugege kindlasti seda artiklit tagasi ja klõpsake kogu visuaalsete näidete linke, külastage saite ja mängige seal olevate animeeritud funktsioonidega. Lõbutse hästi!
