Ang Kumpletong Gabay sa Disenyo ng Animasyon sa Web

Maniwala ka o hindi, wala kang maraming oras upang kumbinsihin ang mga bisita sa iyong site na manatili sa paligid. Ang iyong window ay talagang mas maikli kaysa sa iyong ipinapalagay.

Sa kakanyahan, tumatagal ito nang makatarungan 0.05 segundo pagkatapos mag-load ang iyong pahina para sa mga bisita upang makabuo ng isang opinyon. Mas partikular, isinalin iyon sa 50 milliseconds. Nakakagulat na maikli, tama?

Ok, ang ilan sa kanila ay aalis. Ngunit ang iba ay maaaring pumili upang manatili.

Pagkatapos ay darating ang yugto ng impression, na karaniwang tumatagal lamang ng 10 segundo. Kung hindi mapamahalaan ng iyong site ang isang solid, mawawala sa iyo ang karamihan ng iyong trapiko bago sila magsimula sa proseso ng conversion. Ang mga ito ay upang magpatuloy upang ma-hit ang likod o isara ang mga pindutan.

At kung mayroon kang anumang pag-asa na mabawi ang mga ito, narito ang matigas na katotohanan. 88% sa kanila ay hindi malamang na bumalik sa isang website pagkatapos ng isang hindi magandang karanasan.

Ngunit, hawakan ang isang minuto. Kaninong trabaho ito upang mapanatili ang trapiko sa web sa sandaling mapunta sila sa site?

Ok, syempre, natural lamang na sisihin ang content manager ng site. At baka tama ka. Ngunit bahagyang lamang.

Lumalabas na ang lahat ay nagsisimula sa taga-disenyo ng web. Bilang isang bagay ng katotohanan, isang pag-aaral na malawak na nagsuri sa isang malawak na hanay ng feedback ng consumer ang nagtatag nito 94% ng mga negatibo nauugnay ang disenyo.

Ano ang ibig sabihin nito?

Para sa mga nagsisimula, walang makatakas na ito. Nasa iyo ang punong responsibilidad. Bilang karagdagan sa pagpapatupad ng lahat ng mga pinakamahusay na kasanayan sa disenyo na sakop namin sa aming nakaraang mga piraso, magsuot ka ng isang sumbrero ng PR at isaalang-alang ang mga elemento na mabisang kumonekta sa trapiko.

Pinag-uusapan ko ang tungkol sa mga bagay tulad ng mga animasyon sa web.

At bakit partikular namin itong iminumungkahi?

Kaya, iyon ang isang bagay na ilalabas ko sa ilang sandali. Magagalak ka ng gabay na ito sa lahat ng mga kritikal na aspeto ng mga animasyon sa web. Ngunit una, tuklasin natin ang mga pangunahing kaalaman ...

Ang Mga Pangunahing Kaalaman sa Mga Animation sa Web

Larawan ang iyong paboritong cartoon character na namamasyal sa buong screen. O marahil ang logo ng iyong telepono ay sumasayaw sa paligid ng screen kapag na-restart mo ang aparato. Ano ang pagkakatulad nila?

Sa gayon, pareho silang pangunahing mga halimbawa ng mga animasyon.

Mahalagang nangyayari ang animasyon kapag ang isang pa rin na elemento ay "binuhay". Nagsisimula na itong magpakita ng ilang uri ng paggalaw.

Hindi namin alam eksakto kung kailan nagsimula ang kasanayang ito. Ngunit, mayroon kaming ideya na ang unang animated na pelikula sa kasaysayan ay nagawa higit sa isang daang nakalipas. Ang kalakaran ay umunlad nang lubos mula noon, salamat sa mga progresibong pagsulong sa tech.

Gayunpaman, isang bagay ang nanatiling pare-pareho - ang mga prinsipyo ng animasyon. Sa katunayan, sumunod ang isinulat nina Disney John Ollie at Frank Thomas tungkol sa kanila sa kanilang libro, "The Illusion of Life: Disney Animation". Narito ang kumpletong listahan:

  • Mag-apela
  • Solid na pagguhit
  • Pagmamalabis
  • Tiyempo
  • Pangalawang aksyon
  • Arko
  • Mabagal at mabagal
  • Sundin ang at magkasanib na aksyon
  • Deretso na pagkilos at magpose na magpose
  • Paghahanda
  • Gunamgunam
  • Squash at mag-inat

Ang labindalawa ay nagbibigay pa rin ng balangkas para sa disenyo ng mga animasyon ngayon, kabilang ang mga na-publish sa web bilang mga video, WebGL, SVG, CSS, at GIF.

Ngayon, ang mga animasyon sa web ay maaaring maging kasing simple ng isang highlight na lalabas kapag nag-hover ka sa isang sulat, sa isang kumplikadong serye ng multilayered na mga full-screen na video. Sa madaling salita, maaari kang kumuha ng isang banayad na diskarte, o piliing lumabas nang may mga nangingibabaw na mga animasyon na sumisigaw para sa pansin. Ang lahat ay nakasalalay sa sitwasyon.

At nagtatanong iyon- kailan ka pa dapat gumamit ng mga animasyon?

Kailan Ka Dapat Gumamit ng Mga Animation sa Web?

Syempre, ang cute nila. At tiyak na magiging kagiliw-giliw silang mga karagdagan sa layout ng iyong site.

Ngunit, alam mo kung ano? Ang kanilang kasunod na mga antas ng espiritu ay isang iba't ibang mga bagay sa kabuuan. Kaya't, hindi sinasabi na ang mga animasyon ay hindi angkop para sa lahat ng mga proyekto sa website. At ang pinakamahalaga, magiging isang masamang ideya na gamitin ang mga ito nang hindi sinasadya.

Nagkataon lang na ganun 46% ng mga online consumer hatulan ang kredibilidad ng isang site batay sa pangkalahatang visual na apela at estetika nito. Hindi mo lang kayang isama iyon sa isang hindi magandang disenyo ng balangkas ng animasyon. Sa parehong oras, magiging kapus-palad na patuloy na makaligtaan ang mga ginintuang pagkakataon sa pag-convert sa pamamagitan ng kabiguang mapakinabangan sa mga animasyon.

Kaya, kailan mo dapat ia-leverage ang mga ito?

Kaya, narito ang bagay. Ang mga animasyon sa web ay pangunahing perpekto kapag kailangan mong palakasin ang kakayahang magamit sa pamamagitan ng marahil pagguhit ng pansin o pagtulong sa mga gumagamit sa proseso ng pag-navigate.

Paano?

Pangkalahatan, kinakailangan 2.6 segundo para sa mga mata ng isang bisita na mapunta sa seksyon ng website na pangunahing nakakaimpluwensya sa kanilang unang impression. Ang may kasanayang paggamit ng isang animation, gayunpaman, ay maaaring mapabilis ang mga bagay sa pamamagitan ng agarang pagguhit ng kanilang pansin sa mga pinaka-kritikal na lugar ng site.

Magagamit din ang mga animasyon kapag naghahanap ka upang idirekta ang mga gumagamit sa pamamagitan ng funnel ng conversion. Ang isang animated na form na pop up, halimbawa, ay magiging isang maalalahanin na diskarte para sa pagbuo ng mga listahan ng pag-mail. Pagkatapos pagdating sa proseso ng pagbili, maaari mong isaalang-alang ang pag-embed ng mga video. Napatunayan silang makumbinsi 73% ng mga mamimili upang magpatuloy at bumili ng isang produkto o serbisyo.

Panghuli, maaari mong gamitin ang mga animasyon sa web pulos para sa mga layuning pang-estetiko. Ang isang pandekorasyon na animasyon na makinis at seamless ay maaaring mapabuti ang pangkalahatang visual na apila nang lubos na makabuluhan, at pagkatapos ay magtatag ng isang emosyonal na koneksyon sa pagitan ng mga gumagamit at ang interface. At iyan kung paano mo mapapalitan ang mga antas ng pakikipag-ugnayan ng gumagamit.

Mga Tool sa Animasyon ng Web

Handa nang simulang lumikha ng mga animasyon sa web? Perpekto! Ngunit, saan ka dapat magsimula?

Kaya, paano ang tungkol sa paghahanap ng isang matatag na tool upang mai-convert ang iyong mga ideya sa aktwal na mga animasyon? Sa kabutihang palad, mayroong isang malawak na hanay ng mga maayos na pagpipilian sa web, na mahusay na na-optimize para sa iba't ibang mga gumagamit at iba't ibang uri ng mga animasyon. Ang pipiliin mo para sa iyong mga proyekto ay nakasalalay sa iyong mga kasanayan, pangunahing layunin, badyet, at uri ng site na iyong pinagtatrabahuhan.

Sinabi nito, narito ang ilang kilalang mga halimbawa, bawat isa ay may sariling natatanging kaso ng paggamit:

  • js
  • 3D Lines Animation na may Tatlo.js
  • js
  • Flubber
  • Kulay ng animasyon
  • jqClouds
  • Scrollissimo
  • Cel-animasyon
  • js
  • js
  • Animasyon ng CSS3
  • Pagbabago-kailan
  • js
  • Rellax
  • AOS
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • CAAT
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • Ramjet
  • Wallop
  • MixItUp
  • css
  • css
  • js
  • Ceaser
  • CSSynth
  • Kulay-dalandan
  • CSShake
  • css
  • js
  • Kuwitis
  • transit
  • css
  • js
  • Popmotion
  • GSAP ng GreenSock
  • js
  • js
  • CSS Pagalawin
  • Martes na
  • Shifty
  • js
  • js
  • js
  • js
  • js
  • Teka lang! Buhayin
  • Motion UI
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • AnijS
  • js
  • Magic Animations
  • css

Pagdidisenyo ng Mga Animasyon sa Web

hover Effects

Ang mga hover na animasyon ay walang alinlangan na ilan sa pinakasimpleng sa web. Nabuhay sila at na-highlight ang mga napiling elemento kapag gumalaw ang pointer sa kanila. Ang animasyon mismo ay maaaring maganap sa iba't ibang anyo- tulad ng paglilipat ng laki o pagbabago ng kulay.

Ang lansihin dito ay upang gamitin ang mga epekto ng matipid. Kung hindi man, ipagsapalaran mo ang pag-highlight ng napakaraming mga elemento, na kung saan ay maaaring malito ang mga gumagamit.

Maipapayo rin na panatilihin ang ilang anyo ng pare-pareho sa pamamaraan sa buong site. Kung ang iyong mga pindutan ng homepage ay nagiging berde hanggang pula, halimbawa, gamitin ang parehong balangkas para sa karagdagang mga highlight sa iba pang mga web page.

Mga Animasyon sa Background

Ang pag-embed ng isang background na animasyon ay isang mabisang diskarte upang magdagdag ng kaguluhan at sigla sa iyong web page nang hindi kinakailangang makagambala sa pangunahing diin. Maaari mong gamitin ang anuman mula sa mga video hanggang sa banayad na mga imahe na lumilipat nang sunud-sunod.

Ang pinakamahusay na diskarte dito ay pinapanatili ang mga bagay na nakabalangkas at simple. Kung pipiliin mong isama ang isang video, paikliin ito nang naaayon at mapanatili ang isang loop na nauugnay sa iyong site. Pagkatapos ay tiyakin na ang mga galaw ay sapat na banayad upang makaakit ng pansin nang hindi napakalaki ng mga gumagamit.

Mga Animation na Estilo ng GIF

Ang isang GIF ay nagkakahalaga ng isasaalang-alang kung partikular kang interesado sa isang animation na may pambihirang madaling i-set up. Ang isang tipikal na marahil ay maaaring maging isang bagay tulad ng paglilipat ng teksto o isang nakangiting clown na naka-embed sa loob ng iyong layout ng nilalaman.

Ang kailangan mo lang gawin ay magkaroon ng isang solidong ideya, kumuha ng isang nauugnay na video o imahe, at pagkatapos ay i-convert ito sa isang perpektong GIF gamit ang isang naaangkop na software sa pag-edit. Ang pag-upload ng resulta ng paglikha sa format na GIF ay bumubuo ng isang tulad ng video na animasyon na naglo-load nang mas mabilis hangga't isang maliit na imahe.

Mga Transitional Animation

Ginagamit ang mga transitional animation upang ipakilala ang lakas kapag ang mga gumagamit ay lilipat mula sa isang seksyon ng site patungo sa isa pa. Ang mga ito ay katulad ng mga animasyon sa slideshow na lilitaw sa paglipat mo mula sa isang slide patungo sa susunod.

Ng Imahe kredito: Shutterstock

Para sa isang perpektong kinalabasan, tiyakin na ang mga animasyon ay makinis at pare-pareho sa buong site. Dapat din silang maging sapat na maikli upang hindi maantala ang aktwal na proseso ng paglipat.

Naglo-load ng Mga Animasyon

Ang totoo ay- 47% ng mga online consumer asahan na mai-load ang iyong mga web page nang hindi bababa sa 2 segundo. Kung nabigo kang makamit ito, ang bawat karagdagang segundo ay isasalin sa 7% mas kaunting mga conversion.

Pupunta sa pamamagitan ng kasalukuyang average na oras ng paglo-load ng 22 segundo, maliwanag na ang pagtugon sa 2-segundong inaasahan ay medyo mahirap. Ngunit, maaari mong mai-save ang isang malaking tipak ng trapiko sa pamamagitan ng pagpapanatiling abala sa mga ito sa animasyon habang patuloy na naglo-load ang iba pang mga elemento ng site.

Ituon ang paglikha ng mga simpleng may sapat na magaan upang mai-load kaagad ang trapiko ay nai-redirect sa iyong site. Dapat silang idinisenyo upang sistematikong ipakilala ang mga bisita sa tatak at pangkalahatang tema ng website.

Mga naka-scroll na Animation

Ang mga pag-aaral sa pagsubaybay sa mata ay nagtatag na ginugugol ng mga gumagamit ng website 57% ng kanilang oras sa itaas ng kulungan. Ngunit, lumalabas na marami sa kanila ang handang mag-scroll pababa- basta magbigay ka ng isang kanais-nais na istraktura at mekanismo ng disenyo.

At iyan mismo kung saan papasok ang mga animasyon na na-trigger ng pag-scroll. Nag-iikot sila agad na nagsisimulang mag-scroll ang mga gumagamit upang lumikha ng ilusyon ng isang maayos, hindi nagwawalang pahina. Ito ay isang maalalahanin na paraan upang matanggal ang mga paglilipat na maaaring hindi makapagpahina ng loob sa pag-scroll.

Pag-navigate at Mga Animation ng Menu

Maging tapat tayo. Ang mga pagpipilian sa menu ay tumatagal ng isang malaking halaga ng espasyo sa screen, partikular sa mga holistically dynamic na site na may maraming antas ng mga pagpipilian. Sa kasamaang palad, maaari mong mapakinabangan ng malaki ang mga animasyon upang maitago ang mga pagpipilian, pagkatapos ay ihayag lamang ito kapag nag-click ang isang gumagamit o nag-hover sa mga kaukulang pindutan.

Ang ganitong uri ng animation ay streamline din at pinadadali ang proseso ng pag-navigate sa pamamagitan ng pag-compress ng buong istraktura sa mga pagpipilian sa menu na konektado sa biswal. Ang balangkas ay dapat na idinisenyo gamit ang mga segment ng submenu na sistematikong pop up tuwing ang isang gumagamit ay nag-click o tumuturo sa mga pagpipilian sa menu na overlay.

Gallery at Mga Slideshow

Marahil ay hindi nakakagulat, ang average span ng pansin ng mga tao ay 8 segundo- hindi bababa sa ayon sa isang kamakailang pag-aaral na isinagawa ng Microsoft. Kahit na ang isang goldpis ay may kakayahang manatiling matulungin nang mas mahaba kaysa sa isang tipikal na indibidwal. Samakatuwid, maaari mong pusta na ang karamihan sa mga bisita ng iyong site ay hindi magiging paulit-ulit na mag-click sa lahat ng iyong mga item sa gallery.

Pero alam mo ba? Maaari mong matalinong magamit ang mga gallery ng gallery at slideshow upang awtomatikong ipakita ang maraming mga imahe, nang hindi kinakailangang pinipilit ang mga gumagamit na mag-navigate sa kanila.

Ang pinakamahalagang bagay dito ay ang oras ng pagpapakita ng imahe. Ang mga maiikling pagpapakita na may mabilis na mga paglilipat ay pakiramdam na madali, habang ang mahabang pagpapakita na may mabagal na paglipat ay magiging nakakainip at mabagal. Sa pag-iisip na iyon, idisenyo ang pangkalahatang layout upang maipakita ang bawat imahe nang halos 5 hanggang 8 segundo, bago mabilis na lumipat sa susunod.

Konklusyon

Sa kabuuan, dapat mong pag-aralan ang mga animasyon batay sa kung gaano karami nilang pinapahusay ang karanasan ng gumagamit. Ang isang mahusay ay dapat na mag-trigger ng isang pang-emosyonal na koneksyon mula sa mga gumagamit o padaliin ang proseso ng pag-navigate. Ang isang perpekto, sa kabilang banda, ay dapat na maabot nang komportable nang pareho sa parehong oras.

Upang makamit iyon, maglaan ng iyong oras upang masuri nang kritikal ang lahat ng mga nauugnay na parameter habang nagdidisenyo at nag-embed ka ng mga animasyon sa iyong site. At tandaan- panatilihing simple, magaan at maayos na nakahanay sa iyong tatak.

imahe ng header sa kabutihang loob ng Alfrey Davilla | vaneltia

Bogdan Rancea

Si Bogdan ay isang founding member ng Inspired Mag, na naipon ang halos 6 na taong karanasan sa panahong ito. Sa kanyang bakanteng oras gusto niyang mag-aral ng klasikal na musika at galugarin ang visual arts. Medyo nahuhumaling rin siya sa mga fixies. Nagmamay-ari na siya ng 5.