Ievads animācijā tīmekļa dizainā
Animācija vairs nav tikai multfilmām. Sākot ar pilnekrāna režīmā kustīgiem attēliem un beidzot ar maziem kursoriefektiem, visur parādās animācijas pieskārieni. Animācija ir moderna, jautra un lietotājam draudzīga.
Un šķēršļi animācijas izmantošanai ir sākuši krist. Lielākajai daļai lietotāju ir ātrgaitas savienojumi un ir viegli izveidot jebko, sākot no vienkāršām kustībām vai muļķīga gif līdz vairāku minūšu darbības, animācijas ir kļuvušas par praktiskiem un noderīgiem tīmekļa dizaina rīkiem.
Izpētiet Envato elementus
Animācijas pamati
Animācija notiek, kad kaut kas, kas radīts nekustīgā vai divdimensiju formā, tiek “atdzīvināts” un šķiet, ka tas pārvietojas atbilstoši fizikas likumiem. Tas ir veids, kā multfilmas varonis staigā pa ekrānu vai kā lietotnes ikona atlec kā bumba, kamēr tā tiek ielādēta jūsu Mac darbvirsmā.
Viens no vārdiem, kas gandrīz sinonīms animācijai, ir Disnejs. Astoņdesmito gadu sākumā divi no uzņēmumu labākajiem animatoriem uzrakstīja grāmatu, kurā sīki aprakstīti 12 animācijas principi. Frenka Tomasa un Ollijas Džonstonas filma “Dzīves ilūzija: Disneja animācija” joprojām nodrošina animācijas ietvaru.
- Skvošs un stiept
- Paredzēšana
- Iestudējums
- Taisni uz priekšu darbība un poza pozēt
- Sekojiet darbībām, kas pārklājas
- Palēnināt un palēnināt
- Loka
- Sekundārā darbība
- Laiks
- Pārspīlējums
- Solid zīmējums
- Apelācija
Tīmekļa animācijas bieži tiek saglabātas kā GIF, CSS, SVG, WebGL vai video. Tie var būt jebkas, sākot no vienkārša pasvītrojuma, kas parādās, novietojot peles kursoru virs vārda, līdz pilnekrāna video vai fona attēlam. Tāpat kā jebkura cita dizaina tehnika, animācijas var būt smalkas vai arī tās var būt jūsu sejā un no tām grūti izvairīties.
2017. gada jaunās tendences
Animācija tīmekļa dizainā ir kaut kas tāds, ar ko mēs sākam katru dienu. Animācijas kā dizaina tendences atslēga ir mērenība. Mazas, vienkāršas animācijas ir saistošas un interesantas; iespējams, lietotājs nemaz nedomā par to, ka tā ir animācija. Liela mēroga animācijas var būt interesants vizuāls attēls, kas jūs pievelk dizainā. Bet, ja jūs sākat sajaukt pārāk daudz dažādu kustīgu efektu, tas var izraisīt pilnīgu haosu.
Tas, kas animāciju padara modernu, ir reālisms. Mūsdienu dizaina ainavā, kurā ir tik daudz līdzenu un minimālu stila dizainu, lietotājiem ir vajadzīgas vairāk norādes, lai viņiem pateiktu, kas jādara. Vienkārši animācijas biti var vadīt lietotāju, nemainot estētiku. Tas palīdz pievienot instrukcijas un pasūtījumu, lai izstrādātu shēmas, kas vizuāli var būt pārāk vienkāršas, lai lietotājiem sniegtu pietiekami daudz norāžu. Šajā gadījumā animācija rada laimīgu vidi starp noņemto vienkāršību un lietojamību.
Otrs šīs tendences veicinošais faktors ir pieeja instrumentiem dizaina aizmugurē un lietotāja galos. Jums vairs nav nepieciešama Flash, lai veiktu sarežģītākas animācijas. (Un, ja jūs joprojām veidojat Flash, ir pienācis laiks apstāties.) To var paveikt vairākos citos veidos. Mūsdienu animācijas neaizkavē vietnes vai tīmekļa serverus, padarot efektus ātri ielādējamus lietotājiem un izmantojot ātrgaitas interneta piekļuves animācijas, neizlaiž iestrēgšanu notikumu cikla vidū.
Lielas un mazas animācijas
Runājot par tīmekļa animēšanu, to var iedalīt divās vienlīdz viegli saprotamās kategorijās: lieli un mazi. (Jūs droši vien varat uzminēt, kā šie izskatās.)
Lielas animācijas ir tās, kurām ir liela nozīme. Bieži vien liela izmēra animācijas video formā ar izpildīšanas laiku aizpilda ievērojamu ekrāna daļu un ir raksturīgas īsai filmai. Šīs animācijas kalpo kā fokusa punkts kopējā dizainā. Lai redzētu animāciju kustībā, lietotājiem bieži nav jāveic nekādas darbības. Ja jūs cieši vērojaties vietnē Studio Meta, katrs no lielajiem attēliem tiek tuvināts, lasot kopiju.
Mazas animācijas ir mazas detaļas un fragmenti, ko atklājat, kad sākat mijiedarboties ar vietni. Šīs dalījuma vietas var būt novietošanas stāvokļi, sīki rotājumi vai izmantojamības rokasgrāmatas vai instrumenti. Nelielas animācijas ir akcents, kas veicina vispārējo estētiku, taču maz ticams, ka tas būs dizaina uzmanības centrā. Henrija Brauna vietnē vienkāršā animācija ir tāda, ka, ja jūs skatāties cieši, acis ilustrācijā faktiski mirgo.
Kad lietot animāciju
Problēma ar katru tendenci, ieskaitot šo, ir zināt, kad to izmantot. Animācija var būt lielisks mazs triks jūsu dizaina rīku komplektā, bet ne katram projektam. Animācijai jābūt gludai un bezšuvju, nevis lēkājošai vai mehāniskai. Tam ir jākalpo kādam mērķim, kas paredzēts lietotājam, un tam nav jātraucē saturam.
Animācijas izmantošanas galvenais iemesls ir lietojamības palielināšana. Vienkāršas animācijas var būt lieliski orientējoši rīki, lai palīdzētu cilvēkiem saprast, uz kurām pogām noklikšķināt vai kur doties tālāk vietnes kartē. Daudzi dizaineri, kas izmanto sarežģītus ritināšanas efektus, vienkāršu animāciju savieno ar lietotāja rīku, lai ritinātu vai noklikšķinātu. (Tas ietver visu, sākot no vienkāršas veselīgas ikonas vai vārdiem, kas uznirst, sakot “ritiniet uz leju”.)
Izmantojamībai ir vairākas formas:
- Komunikācijas funkcija vai vietnes lietošana
- Rādīt izmaiņas, piemēram, pareizi aizpildīt veidlapu vai uzsvērt, ka uz kāda elementa ir iespējams noklikšķināt
- Izveidojiet plūsmu vai novirziet lietotājus uz aicinājumu uz darbību
Otrs animācijas izmantošanas iemesls ir estētisks iemesls. Animācija var būt lielisks rotājums. Dažreiz animācijas elementa mērķis ir tīri vizuāls, un tas ir pieņemams lietojums. Šī dekoratīvā animācija var palīdzēt izstāstīt stāstu vai radīt emocionālu saikni starp interfeisu un lietotāju. Animācijas mērķis var būt vizuālas intereses aktivizēšana un ilgāku laiku piesaistīt lietotāju jūsu vietnei.
Veidojot tīri vizuālu animāciju, apsveriet, ko tai vajadzētu darīt. Padomājiet par savienojumu, kādu vēlaties lietotājam. Vai tas būtu jautri vai pārsteidzoši? Vai tas ir mazliet unikāls saturs, kas paredzēts kopīgošanai? Pat tīram vizuālam jābūt mērķim.
Resursi
Vai esat gatavs sākt animāciju? Šeit ir daži resursi turpmākai lasīšanai un rīki, kas palīdzēs jums sākt.
- Videoklips Dzīves ilūzija parāda visus 12 principus viegli saprotamā veidā.
- “Web Animation at Work” no saraksta Apart ir lielisks resurss tam, kas padara animāciju darbu.
- “Iesācēja ievads CSS animācijā” parādīts, kā kvadrātu pārvērst lokā, izmantojot CSS rekvizītus.
- Elastīgi animēti SVG elementi ir apmācība, kā integrēt un animēt SVG komponentus.
- Marka Geijera prezentācija UI animāciju māksla izmanto jēdzienu skaidrošanai animāciju.
- ”15 populārākie HTML5 rīki, lai izveidotu uzlabotu animāciju ar” ir lielisks nākamā līmeņa solis un rīku saraksts, ja jūs jau saprotat pamatus.
- Animator Survival Kit māca pamatprincipus, kas piemērojami visiem animācijas veidiem.
Secinājums
Runājot par animāciju, īkšķa noteikums ir šāds: laba animācija uzlabos lietotāja pieredzi. Tas var būt emocionāla savienojuma veidā, piemēram, jautra, pozitīva pieredze, vai arī padarot vietni vieglāk lietojamu.
Animācija ir jautra tehnika, kas ir kļuvusi daudz standartizētāka dažādiem lietojumiem. Ja meklējat iedvesmu, noteikti izlasiet šo rakstu un noklikšķiniet uz saitēm uz vizuālajiem piemēriem visā vietnē, apmeklējiet vietnes un spēlējieties ar animētajām funkcijām tajā. Izklaidējies!
