Uvod u animaciju u web dizajnu
Animacija više nije samo za crtane filmove. Od pokretnih slika preko cijelog zaslona do malih efekata lebdenja, animacijski dodiri zasipaju se posvuda. Animacija je u trendu, zabava i prema korisnicima.
A prepreke za upotrebu animacije počele su propadati. Uz većinu korisnika na brzim vezama i jednostavnost stvaranja bilo čega, od jednostavnih pokreta ili blesavog gifa do nekoliko minuta akcije, animacije su postale praktični i korisni alati za web dizajn.
Istražite elemente Envatoa
Osnove animacije
Animacija se događa kada se nešto stvoreno u mirnom ili dvodimenzionalnom obliku "oživi" i čini se da se kreće na način koji slijedi zakone fizike. To je način na koji lik crtića hoda preko ekrana ili kako ikona aplikacije skače poput kuglice dok se učitava na radnu površinu vašeg Maca.
Jedna od riječi koja je gotovo sinonim za animaciju je Disney. Početkom osamdesetih dva su vrhunska animatora iz tvrtke napisala knjigu s detaljima o 12 načela animacije. "Iluzija o životu: Disneyjeva animacija" Frank Thomasa i Ollie Johnston i danas pruža okvir za animaciju.
- Squash i stretch
- Predviđanje
- skele
- Ravna akcija i pozicija za poza
- Slijedite kroz i preklapajuće akcije
- Uspori i uspori
- Luk
- Sekundarna radnja
- Vrijeme
- Pretjerivanje
- Čvrsti crtež
- Apel
Web animacije često se spremaju kao GIF, CSS, SVG, WebGL ili video. Oni mogu biti bilo što, od jednostavnog podvlačenja koji se pojavljuje kada pokažite preko riječi na video ili pozadinsku sliku preko cijelog zaslona. Kao i kod bilo koje druge tehnike dizajna, animacije mogu biti suptilne ili bi mogle biti u vašem licu i teško ih je izbjeći.
Trendi u nastajanju 2017. godine
Animacija u web dizajnu nešto je što počinjemo svakog dana. Ključ animacije kao dizajnerskog trenda je umjerenost. Male, jednostavne animacije su zanimljive i zanimljive; korisnik uopće ne može razmišljati o tome da li je to animacija. Animacije velikih razmjera mogu biti zanimljiv vizual koji vas uvlači u dizajn. Ali ako počnete miješati previše različitih kretnih učinaka, to može izazvati potpuni kaos.
Ono što animaciju čini trendi je realizam. U današnjem dizajnerskom krajoliku s toliko dizajna ravnog i minimalnog stila, korisnicima treba više nagovještaja da im kažu što treba raditi. Jednostavni bitovi animacije mogu voditi korisnika bez promjene estetskog. Pomaže u dodavanju uputa i naredbe za dizajniranje shema koje su vizualno previše jednostavne da bi pružile dovoljno smjernica korisnicima. U ovom slučaju animacija stvara sretan medij između srušene jednostavnosti i upotrebljivosti.
Drugi čimbenik koji pridonosi ovom trendu je pristup alatima na stražnjoj i krajnjoj strani dizajna. Flash vam više ne treba za složenije animacije. (Ako i dalje gradite u Flash-u, vrijeme je da se zaustavite.) To se može postići i na brojne druge načine. Današnje animacije ne zatvaraju web stranice ili web poslužitelje, tako da se efekti brzo učitavaju za korisnike, a animacije za brzi pristup internetu ne preskaču da se zaglave na pola puta kroz ciklus događaja.
Velika naspram male animacije
Kada je u pitanju animacija za web, ona se dijeli u dvije jednako razumljive kategorije: velike i male. (Vjerojatno možete pogoditi kako to izgleda.)
Velike animacije su one koje imaju razmjera prema njima. Često u obliku videozapisa s trajanjem animacija velikih razmjera ispunjava značajan dio zaslona i karakteristične su za kratki film. Ove animacije služe kao žarište u cjelokupnom dizajnu. Korisnici često ne moraju obavljati nijednu radnju da bi vidjeli animaciju u pokretu. Ako pažljivo gledate na web mjestu Studio Meta, svaka velika slika zumira dok čitate kopiju.
Male animacije su mali komadići koje otkrijete kad započnete interakciju s web stranicom. Ove divote mogu biti u obliku lebdećih stanja, sićušnih komada ukrasa ili vodiča ili alata za upotrebljivost. Male animacije akcent su koji doprinose cjelokupnoj estetici, ali malo je vjerojatno da će biti u središtu dizajna. Na mjestu za Henryja Brown jednostavna animacija je ta da ako pogledate izbliza, oči na ilustraciji zapravo treptaju.
Kada koristiti animaciju
Problem svakog trenda, uključujući i ovaj, je znati kada ga koristiti. Animacija može biti dobar mali trik za vaš komplet alata za dizajn, ali nije za svaki projekt. Animacija bi trebala biti glatka i bešavna, a ne skakava ili mehanička. To treba služiti svrsi korisniku i ne ometati sadržaj.
Primarni razlog korištenja animacije je povećavanje upotrebljivosti. Jednostavne animacije mogu biti sjajni vodiči koji pomažu ljudima da shvate koje gumbe mogu kliknuti ili kamo dalje na mapi web stranice. Mnogi dizajneri koji koriste složene efekte pomicanja upariju jednostavnu animaciju s korisničkim alatom za pomicanje ili klik. (To uključuje sve, od jednostavne ikone koja skače ili riječi koje iskaču izgovor "pomaknite se prema dolje."
Iskoristivost je u nekoliko oblika:
- Komunikacijska funkcija ili kako koristiti web stranicu
- Pokažite promjenu, poput ispravnog ispunjavanja obrasca ili isticanja da se element može kliknuti
- Stvorite protok ili usmjerite korisnike na poziv na radnju
Drugi razlog korištenja animacije je estetski. Animacija može biti sjajan "ukras". Ponekad je cilj animiranog elementa čisto vizualni i to je prihvatljiva upotreba. Ova dekorativna animacija može vam pomoći ispričati priču ili stvoriti emocionalnu vezu između sučelja i korisnika. Svrha animacije može biti pobuditi vizualni interes i zadržati korisnika koji je angažiran na vašoj web lokaciji dulje vrijeme.
Prilikom stvaranja čisto vizualne animacije razmislite o čemu se radi. Razmislite o vezi koju želite da korisnik ima. Treba li to biti zabavno ili iznenađujuće? Je li to malo jedinstvenog sadržaja koji je stvoren za dijeljenje? Čak bi i čisti vizual trebao imati cilj.
Resursi
Spremni za početak animiranja? Evo nekoliko resursa za daljnje čitanje i alata koji će vam pomoći da započnete s radom.
- Video Illusion of Life prikazuje svaki od 12 principa na način koji je lako razumljiv.
- "Web Animation at Work" s A liste Apart izvrstan je izvor o tome što animacija čini radnom.
- "Uvod u početnike u CSS animaciju" pokazuje vam kako pretvoriti kvadrat u krug koristeći CSS svojstva.
- Elastični animirani SVG elementi je vodič za integriranje i animiranje SVG komponente.
- Prezentacija umjetnosti UI animacija Mark Geyer koristi animaciju za objašnjenje koncepata.
- "15 najboljih HTML5 alata za stvaranje napredne animacije s" odličan je korak na sljedećoj razini i popis alata ako već razumijete osnove.
- Animator Survival Kit podučava osnovne principe koji se primjenjuju na sve oblike animacije.
Zaključak
Kada je u pitanju animacija, glavno pravilo je ovo: Dobra animacija će poboljšati korisničko iskustvo. To može biti u obliku emocionalne povezanosti - poput zabave, pozitivnog iskustva - ili jednostavnijeg korištenja web mjesta.
Animacija je zabavna tehnika koja postaje mnogo standardnija za razne aplikacije. Ako tražite inspiraciju, obavezno se vratite na ovaj članak i klikom na veze do vizualnih primjera, posjetite web stranice i igrajte se s animiranim značajkama na njima. Zabavi se!
