Ghidul complet de proiectare a animației web

Credeți sau nu, nu aveți mult timp pentru a convinge vizitatorii site-ului dvs. să rămână în jur. Fereastra dvs. este de fapt mult mai scurtă decât vă presupuneți.

În esență, este nevoie doar de 0.05 secunde după ce pagina dvs. se încarcă pentru ca vizitatorii să-și formeze o opinie. Mai precis, asta se traduce prin 50 de milisecunde. Surprinzător de scurt, nu?

Ok, unii dintre ei vor pleca. Dar alții ar putea alege să rămână.

Apoi vine etapa de impresie, care practic durează doar 10 secunde. Dacă site-ul dvs. nu poate gestiona unul solid, veți pierde cea mai mare parte a traficului înainte de a începe chiar și procesul de conversie. Ei doar pentru a continua să apese butoanele din spate sau să închidă.

Și dacă ați avut speranțe să le recuperați, iată adevărul greu. 88% dintre ei nu este posibil să se întoarcă la un site web după o experiență proastă.

Dar stai un minut. Cui loc de muncă este să păstreze traficul web după ce aterizează pe site?

Bine, bineînțeles, este firesc să dai vina pe managerul de conținut al site-ului. Și s-ar putea să ai dreptate. Dar doar parțial.

Se pare că totul începe cu designerul web. De fapt, un studiu care a analizat pe larg o gamă largă de feedback-uri ale consumatorilor a stabilit acest lucru 94% dintre cele negative au fost legate de proiectare.

Ce înseamnă?

Pentru început, nu se poate scăpa de acest lucru. Responsabilitatea principală revine dvs. În plus față de implementarea tuturor celor mai bune practici de proiectare pe care le-am acoperit în piesele noastre anterioare, trebuie să purtați o pălărie PR și să luați în considerare elemente care se conectează eficient cu traficul.

Vorbesc despre lucruri precum animațiile web.

Și de ce sugerăm în mod special asta?

Ei bine, asta voi dezvălui în scurt timp. Acest ghid vă va prezenta prin toate aspectele critice ale animațiilor web. Dar mai întâi, să explorăm elementele de bază ...

Bazele animațiilor web

Imaginați-vă personajul preferat de desene animate care se plimba pe ecran. Sau poate sigla telefonului dvs. dansând pe ecran atunci când reporniți dispozitivul. Ce au in comun?

Ei bine, ambele sunt exemple de bază de animații.

Animația apare în esență atunci când un element fix este „adus la viață”. Apoi începe să prezinte o formă de mișcare.

Nu știm exact când a început această practică. Dar avem o idee că primul film de animație în istorie a fost făcută acum peste un secol. Tendința s-a dezvoltat destul de mult de atunci, datorită progreselor progresive în tehnologie.

Cu toate acestea, un lucru a rămas constant - principiile animației. De fapt, Ollie Johnston și Frank Thomas au scris mai târziu despre ei în cartea lor, „Iluzia vieții: animație Disney". Iată lista completă:

  • Apel
  • Desen solid
  • Exagerare
  • Sincronizare
  • Acțiune secundară
  • Arc
  • Încet și încet
  • Urmăriți acțiuni și suprapuneți
  • Acțiune directă și pozează pentru a poziționa
  • Înscenare
  • Anticipare
  • Squash și întindeți

Cele douăsprezece oferă în continuare cadrul pentru proiectarea animațiilor astăzi, inclusiv cele publicate pe web ca videoclipuri, WebGL, SVG, CSS și GIF.

Acum, animațiile web pot fi la fel de simple ca un punct culminant care apare atunci când treceți cu mouse-ul peste o scrisoare, la o serie complexă de straturi video cu ecran complet. Cu alte cuvinte, puteți adopta o abordare subtilă sau puteți alege să ieșiți cu animații dominante care țipă pentru atenție. Totul depinde de situație.

Și asta pune întrebarea - când ar trebui să folosești chiar animații?

Când ar trebui să utilizați animații web?

Desigur, sunt drăguți. Și cu siguranță ar fi adăugiri interesante la aspectul site-ului dvs.

Dar tu stii ce? Nivelul lor de eficacitate ulterior este cu totul altceva. Deci, este de la sine înțeles că animațiile nu sunt potrivite pentru toate proiectele site-ului web. Și cel mai important, ar fi o idee proastă să le adopți la întâmplare.

Se întâmplă asta 46% din consumatorii online judecați credibilitatea unui site pe baza atracției sale vizuale și a esteticii sale generale. Pur și simplu nu vă puteți permite să includeți acest lucru cu un cadru de animație prost conceput. În același timp, ar fi regretabil să pierdeți în permanență oportunitățile de conversie de aur, nereușind să valorificați animațiile.

Deci, când ar trebui să le folosiți?

Ei bine, iată chestia. Animațiile web sunt în principal ideale atunci când aveți nevoie pentru a crește gradul de utilizare, atrăgând poate atenția sau ajutând utilizatorii cu procesul de navigare.

Cum?

În general, este nevoie 2.6 secunde pentru ca ochii unui vizitator să ajungă pe secțiunea site-ului web care influențează în primul rând prima lor impresie. Cu toate acestea, folosind abil o animație, puteți accelera lucrurile atrăgându-le imediat atenția asupra celor mai critice zone ale site-ului.

Animațiile sunt utile, de asemenea, atunci când căutați să direcționați utilizatorii prin pâlnia de conversie. Un formular animat pop-up, de exemplu, ar fi o strategie atentă pentru construirea listelor de discuții. Atunci când vine vorba de procesul de cumpărare, ați putea lua în considerare încorporarea videoclipurilor. S-a dovedit că conving 73% dintre cumpărători pentru a continua și a cumpăra un produs sau serviciu.

În cele din urmă, puteți utiliza animații web doar în scopuri estetice. O animație decorativă care este netedă și fără probleme poate îmbunătăți atractivitatea vizuală generală destul de semnificativ, apoi, prin urmare, poate stabili o conexiune emoțională între utilizatori și interfață. Și așa ajungi să crești progresiv nivelurile de implicare a utilizatorilor.

Instrumente de animație web

Sunteți gata să începeți să creați animații web? Perfect! Dar, de unde ar trebui să începi?

Ei bine, ce zici de căutarea unui instrument robust pentru a vă converti ideile în animații reale? Din fericire, există o gamă largă de opțiuni îngrijite pe web, care sunt bine optimizate pentru diferiți utilizatori și diferite tipuri de animații. Ceea ce alegeți pentru proiectele dvs. depinde de abilitățile dvs., obiectivele principale, bugetul și tipul de site la care lucrați.

Acestea fiind spuse, iată câteva exemple proeminente, fiecare cu propriul caz de utilizare unic:

  • js
  • Animație 3D Lines cu Three.js
  • js
  • Flubber
  • Animație color
  • jqClouds
  • Scrollissimo
  • Cel-animație
  • js
  • js
  • Animație CSS3
  • Transform-când
  • 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
  • statoreactor
  • snopi
  • MixItUp
  • CSS
  • CSS
  • js
  • Ceaser
  • CSSynth
  • Saffron
  • CSShake
  • CSS
  • js
  • Rachetă
  • Tranzit
  • CSS
  • js
  • Popmotion
  • GSAP de GreenSock
  • js
  • js
  • CSS Animate
  • Este marți
  • Şmecher
  • js
  • js
  • js
  • js
  • js
  • Aștepta! Anima
  • Propunere UI
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • AnijS
  • js
  • Magic Animații
  • CSS

Proiectarea animațiilor web

Efecte de hover

Animațiile Hover sunt, fără îndoială, unele dintre cele mai simple de pe web. Ei prind viață și evidențiază elementele selectate atunci când indicatorul se deplasează deasupra lor. Animația în sine poate apărea sub diferite forme - cum ar fi schimbarea dimensiunii sau schimbarea culorii.

Trucul aici este să adopți efectele cu moderare. În caz contrar, riscați să evidențiați prea multe elemente, ceea ce ar putea deruta ulterior utilizatorii.

De asemenea, este recomandabil să mențineți o anumită formă de metodologie în conformitate cu metodologia pe tot site-ul. Dacă butoanele paginii dvs. de pornire se transformă de la verde la roșu, de exemplu, utilizați același cadru pentru evidențieri suplimentare în alte pagini web.

Animații de fundal

Încorporarea unei animații de fundal este o strategie eficientă pentru a adăuga emoție și vitalitate paginii dvs. web fără a interfera neapărat cu accentul principal. Puteți folosi orice, de la videoclipuri la imagini subtile care se schimbă secvențial.

Cea mai bună abordare aici este păstrarea lucrurilor structurate și simple. Dacă alegeți să integrați un videoclip, scurtați-l corespunzător și mențineți o buclă relevantă pentru site-ul dvs. Apoi asigurați-vă că mișcările sunt suficient de subtile pentru a atrage atenția fără utilizatori copleșitori.

Animații în stil GIF

Un GIF merită luat în considerare dacă sunteți interesat în mod special de o animație care este extrem de ușor de configurat. Un tipic poate fi ceva ca schimbarea textului sau un clovn zâmbitor încorporat în aspectul conținutului.

Tot ce trebuie să faceți este să veniți cu o idee solidă, să obțineți un videoclip sau o imagine relevantă și apoi să îl convertiți într-un GIF perfect folosind un software de editare adecvat. Încărcarea creației rezultate în format GIF generează o animație de tip video care se încarcă la fel de repede ca o imagine mică.

Animații tranzitorii

Animațiile tranzitorii sunt folosite pentru a introduce vigoare atunci când utilizatorii se mută dintr-o secțiune a site-ului în alta. Sunt similare cu animațiile de prezentare de diapozitive care apar pe măsură ce treceți de la un diapozitiv la altul.

Fotografie credite: Shutterstock

Pentru un rezultat perfect, asigurați-vă că animațiile sunt fluide și consistente pe tot site-ul. De asemenea, acestea ar trebui să fie suficient de scurte pentru a nu întârzia procesul de tranziție efectiv.

Se încarcă animații

Faptul este că 47% din consumatorii online așteptați-vă că paginile dvs. web se vor încărca în cel puțin 2 secunde. Dacă nu reușiți să obțineți acest lucru, fiecare secundă suplimentară se traduce cu 7% mai puține conversii.

Trecând prin timpul mediu de încărcare curent de 22 de secunde, este destul de evident că îndeplinirea așteptărilor de 2 secunde este destul de dificilă. Dar, puteți salva o parte substanțială din trafic, menținându-i ocupați cu animații, pe măsură ce alte elemente ale site-ului continuă să se încarce.

Concentrați-vă pe crearea celor simple, suficient de ușoare pentru a încărca aproape imediat, traficul este redirecționat către site-ul dvs. Acestea ar trebui să fie concepute pentru a introduce în mod sistematic vizitatorilor marca și tema generală a site-ului web.

Animații declanșate cu derulare

Studiile de urmărire a ochilor au stabilit că utilizatorii site-ului web cheltuiesc aproximativ 57% din timpul lor deasupra plăcii. Dar, se pare că mulți dintre ei sunt dispuși să deruleze în jos - atâta timp cât furnizați o structură și un mecanism de proiectare favorabile.

Și tocmai aici intervin animațiile declanșate de derulare. Acestea intră în acțiune imediat utilizatorii încep să deruleze pentru a crea iluzia unei pagini netede și nesfârșite. Este un mod atent de a elimina tranzițiile care altfel ar descuraja derularea.

Navigare și animații de meniu

Sa fim cinstiti. Opțiunile din meniu ocupă o cantitate considerabil mare de spațiu pe ecran, în special pe site-urile dinamice holistic, cu mai multe niveluri de selecții. Din fericire, puteți valorifica animațiile pentru a ascunde opțiunile, apoi le puteți dezvălui numai atunci când un utilizator face clic sau trece peste butoanele corespunzătoare.

Acest tip de animație simplifică și simplifică procesul de navigare prin comprimarea întregii structuri în opțiuni de meniu conectate vizual. Cadrul ar trebui să fie conceput cu segmente de submeniu care apar în mod sistematic ori de câte ori un utilizator face clic sau indică opțiunile meniului suprapus.

Galerie și prezentări

Poate în mod surprinzător, durata medie de atenție a ființelor umane este de 8 secunde - cel puțin conform unui studiu recent realizat de Microsoft. Chiar și un pește de aur este capabil să rămână atent mai mult timp decât un individ tipic. Prin urmare, puteți paria că majoritatea vizitatorilor site-ului dvs. nu vor fi suficient de persistenți pentru a face clic pe toate articolele din galerie.

Dar ghicește ce? Puteți utiliza în mod inteligent galeria și animațiile de prezentare pentru a prezenta automat numeroase imagini, fără a forța neapărat utilizatorii să navigheze prin ele.

Cel mai important lucru aici este timpul de afișare a imaginii. Ecranele scurte cu tranziții rapide s-ar simți grăbite, în timp ce afișajele lungi cu tranziții lente s-ar dovedi a fi plictisitoare și lente. Având în vedere acest lucru, proiectați aspectul general pentru a afișa fiecare imagine timp de aproximativ 5 până la 8 secunde, înainte de a trece rapid la următoarea.

Concluzie

Una peste alta, ar trebui să analizați animațiile în funcție de cât de mult îmbunătățesc ulterior experiența utilizatorului. Una excelentă ar trebui fie să declanșeze o conexiune emoțională de la utilizatori, fie să ușureze procesul de navigare. Unul perfect, pe de altă parte, ar trebui să fie capabil să le atingă confortabil pe amândouă în același timp.

Pentru a realiza acest lucru, luați-vă timp pentru a evalua critic toți parametrii relevanți pe măsură ce proiectați și încorporați animații pe site-ul dvs. Și nu uitați - păstrați-l simplu, ușor și bine aliniat la marca dvs.

imaginea antetului prin amabilitatea Alfrey Davilla | vaneltia

Bogdan Rancea

Bogdan este membru fondator al Inspired Mag, acumulând aproape 6 ani de experiență în această perioadă. În timpul liber îi place să studieze muzică clasică și să exploreze artele vizuale. Este destul de obsedat și de fixe. El deține deja 5.