Die volledige webanimasie-ontwerpgids

Glo dit of nie, u het nie baie tyd om u besoekers te oortuig om te bly nie. U venster is eintlik baie korter as wat u aanneem.

In wese neem dit reg 0.05 sekondes nadat u bladsy laai vir besoekers om 'n mening te vorm. Meer spesifiek, dit beteken 50 millisekondes. Verbasend kort, nie waar nie?

Ok, sommige van hulle sal vertrek. Maar ander kan kies om te bly.

Dan kom die indrukfase, wat basies duur slegs 10 sekondes. As u werf nie 'n soliede een kan bestuur nie, verloor u die grootste deel van u verkeer voordat hulle selfs met die omskakelingsproses begin. Hulle moet net voortgaan om die rug- of sluitknoppies te druk.

En as u hoop gehad het om dit te herstel, dan is die harde waarheid. 88% van hulle sal waarskynlik nie na 'n slegte ervaring na 'n webwerf terugkeer nie.

Maar hou maar aan. Wie se taak is dit om webverkeer te behou sodra hulle op die werf beland?

Ok, natuurlik is dit net natuurlik om die inhoudbestuurder van die webwerf te blameer. En jy het dalk reg. Maar slegs gedeeltelik.

Dit blyk dat dit alles by die webontwerper begin. Dit het uit die praktyk vasgestel dat 'n studie wat 'n wye verskeidenheid verbruikersterugvoer uitgebreid ondersoek het 94% van die negatiewe was ontwerpverwant.

Wat beteken dit?

Vir die begin kan daar niks ontkom word nie. Die belangrikste verantwoordelikheid lê by u. Benewens die implementering van al die beste ontwerp-praktyke wat ons in die verlede gedoen het, moet u 'n PR-hoed dra en elemente oorweeg wat effektief met die verkeer in verbinding is.

Ek praat oor dinge soos webanimasies.

En waarom stel ons dit spesifiek voor?

Dit is iets wat ek binnekort gaan openbaar. Hierdie gids lei u deur al die kritieke aspekte van webanimasies. Laat ons eers die basiese dinge ondersoek ...

Die basis van webanimasies

Stel jou voor dat u gunsteling tekenprentkarakter oor die skerm loop. Of miskien word die logo van u telefoon rondom die skerm gedans as u die toestel herbegin. Wat het hulle in gemeen?

Wel, dit is albei basiese voorbeelde van animasies.

Animasie vind in wese plaas wanneer 'n stil element 'tot lewe gebring' word. Dit begin dan met die vorm van een of ander beweging.

Ons weet nie presies wanneer hierdie praktyk begin het nie. Maar ons het 'n idee dat die eerste animasieprent in die geskiedenis is meer as 'n eeu gelede gemaak. Die neiging het sedertdien taamlik uitgebreid ontwikkel danksy progressiewe vooruitgang in tegnologie.

Een ding is egter konstant gebly - die beginsels van animasie. In werklikheid het Disney se John Johnston en Frank Thomas later oor hulle geskryf in hul boek, “The Illusion of Life: Disney Animation". Hier is die volledige lys:

  • Appelleer
  • Soliede tekening
  • oordrywing
  • Tydsberekening
  • Sekondêre aksie
  • Arc
  • Stadig in en stadig uit
  • Volg deur en oorvleuelende aksie
  • Reguit aksie en hou in om te hou
  • Stellasies
  • Afwagting
  • Klamp en rek

Die twaalf bied vandag nog die raamwerk vir die ontwerp van animasies, insluitend dié wat op die web as video's, WebGL, SVG, CSS en GIF gepubliseer word.

Nou kan webanimasies so eenvoudig wees soos 'n hoogtepunt wat verskyn wanneer u oor 'n brief hang, na 'n komplekse reeks meerfilms. Met ander woorde, u kan 'n subtiele benadering gebruik, of kies om uit te gaan met dominante animasies wat om aandag skree. Dit hang alles af van die situasie.

En dit laat die vraag ontstaan: wanneer is jy veronderstel om animasies te gebruik?

Wanneer moet u webanimasies gebruik?

Natuurlik is hulle oulik. En dit sal beslis interessante toevoegings tot u webwerf se uitleg wees.

Maar weet jy wat? Die daaropvolgende effektiwiteitsvlakke is heeltemal anders. Dit is vanselfsprekend dat animasies nie geskik is vir alle webwerfprojekte nie. En die belangrikste is dat dit 'n slegte idee is om dit lukraak aan te neem.

Dit gebeur net so 46% van aanlyn verbruikers beoordeel 'n webwerf se geloofwaardigheid op grond van sy algemene visuele aantrekkingskrag en estetika. U kan dit eenvoudig nie bekostig om dit met 'n swak ontwerpte animasieraamwerk saam te stel nie. Terselfdertyd sal dit jammer wees om goue omskakelingsgeleenthede aanhoudend mis te loop deur nie animasies te benut nie.

Wanneer moet u dit gebruik?

Wel, hier is die ding. Webanimasies is hoofsaaklik ideaal as u bruikbaarheid moet verhoog deur miskien aandag te trek of gebruikers te help met die navigasieproses.

Hoe werk dit?

Oor die algemeen neem dit 2.6 sekondes vir besoekers se oë om op die webwerfgedeelte te beland wat hul eerste indruk veral beïnvloed. As u 'n animasie vaardig gebruik, kan u dit egter vinniger maak deur dadelik hul aandag op die mees kritieke dele van die webwerf te vestig.

Animasies kom ook handig te pas wanneer u gebruikers deur die omskakelingstrechter wil rig. Byvoorbeeld, 'n geanimeerde vorm kan 'n deurdagte strategie wees om poslyste op te stel. As dit dan by die koopproses kom, kan u dit oorweeg om video's in te lê. Dit is bewys dat hulle dit oortuig 73% van die kopers om voort te gaan en 'n produk of diens te koop.

Laastens kan u webanimasies slegs vir estetiese doeleindes gebruik. 'N Dekoratiewe animasie wat glad en naatloos is, kan die algemene visuele aantrekkingskrag aansienlik verbeter en dan 'n emosionele verbinding tussen gebruikers en die koppelvlak skep. En dit is hoe u die vlakke van gebruikersbetrokkenheid geleidelik verhoog.

Webanimasie-gereedskap

Gereed om te begin met webanimasies? Perfect! Maar waar moet u begin?

Nou, hoe gaan dit met 'n sterk hulpmiddel om u idees in werklike animasies te omskep? Gelukkig is daar 'n wye verskeidenheid netjiese opsies op die web, wat goed geoptimaliseer is vir verskillende gebruikers en verskillende soorte animasies. Wat u vir u projekte kies, hang af van u vaardighede, primêre doelstellings, begroting en die tipe werf waaraan u werk.

Dit gesê, hier is 'n paar prominente voorbeelde, elk met hul eie unieke gebruiksgeval:

  • js
  • 3D-lyne-animasie met Three.js
  • js
  • Flubber
  • Kleur animasie
  • jqClouds
  • Scrollissimo
  • Cel-animasie
  • js
  • js
  • CSS3-animasie
  • Transform-toe
  • js
  • Rellax
  • AOS
  • js
  • ScrollTrigger
  • Scrollanim
  • js
  • js
  • js
  • js
  • Foxholder
  • Animatelo
  • css
  • Animista
  • js
  • RGOT
  • AnimateMate
  • js
  • Stylie
  • GFX
  • js
  • js
  • js
  • jQuery DrawSVG
  • Ramjet
  • opstopper
  • MixItUp
  • css
  • css
  • js
  • Caesar
  • CSSynth
  • Saffraan
  • CSShake
  • css
  • js
  • Rocket
  • Transit
  • css
  • js
  • Popmotion
  • GSAP deur GreenSock
  • js
  • js
  • CSS Animate
  • Dit is Dinsdag
  • louche
  • js
  • js
  • js
  • js
  • js
  • Wag! Animate
  • Motion UI
  • js
  • Lazy Line Painter
  • js
  • js
  • js
  • Selderie
  • js
  • Magic Animasies
  • css

Ontwerp webanimasies

Hover-effekte

Hover-animasies is ongetwyfeld van die eenvoudigste op die web. Hulle word lewendig en belig geselekteerde elemente wanneer die wyser oor hulle beweeg. Die animasie self kan in verskillende vorme voorkom - soos verskuiwing in grootte of kleurverandering.

Die truuk hier is om die effekte spaarsamig aan te neem. Andersins loop u die risiko om te veel elemente uit te lig, wat gebruikers dan moontlik kan verwar.

Dit is ook raadsaam om een ​​of ander vorm van konsekwent met die metodologie op die hele webwerf te handhaaf. As u tuisbladknoppies byvoorbeeld van groen na rooi verander, gebruik u dieselfde raamwerk vir bykomende hoogtepunte op ander webblaaie.

Agtergrondanimasies

Die inbedding van 'n agtergrondanimasie is 'n effektiewe strategie om opwinding en lewenskrag op u webblad te voeg sonder om noodwendig die belangrikste klem te beïnvloed. U kan alles gebruik van video's tot subtiele beelde wat opeenvolgend skuif.

Die beste benadering hier is om dinge gestruktureerd en eenvoudig te hou. As u kies om 'n video te integreer, verkort dit dienooreenkomstig en handhaaf 'n lus wat relevant is tot u webwerf. Maak dan seker dat die bewegings subtiel genoeg is om aandag te trek sonder om gebruikers te oorweldig.

GIF-styl animasies

'N GIF is die moeite werd om te oorweeg as u veral belangstel in 'n animasie wat buitengewoon maklik is om op te stel. 'N Tipiese een kan miskien iets wees soos teksverskuiwing of 'n glimlaggende nar wat in u inhouduitleg ingebed is.

Al wat u hoef te doen is om 'n deeglike idee te kry, 'n relevante video of beeld te verkry en dit dan om te skakel in 'n perfekte GIF met behulp van 'n geskikte redigeersagteware. As u die resulterende skepping in GIF-formaat oplaai, word 'n video-animasie genereer wat so vinnig as 'n klein prentjie laai.

Oorgangsanimasies

Oorgangsanimasies word gebruik om krag in te stel wanneer gebruikers van een deel van die webwerf na 'n ander beweeg. Dit is soortgelyk aan animasies van die skyfievertoning wat verskyn as u van die een skyfie na die volgende beweeg.

Image krediete: Shutter

Vir 'n perfekte uitkoms, sorg dat die animasies op die hele webwerf glad en konsekwent is. Dit moet ook kort genoeg wees om nie die oorgangsproses te vertraag nie.

Laai animasies

Feit is- 47% van aanlyn verbruikers verwag dat u webbladsye binne twee sekondes sal laai. As u dit nie regkry nie, beteken dit dat elke ekstra sekonde 2% minder omskakelings is.

Deur die huidige gemiddelde laai tyd van 22 sekondes, is dit baie duidelik dat dit redelik moeilik is om aan die verwagting van 2 sekondes te voldoen. U kan egter 'n aansienlike deel van die verkeer red deur hulle besig te hou met animasies, aangesien ander werfelemente aanhou laai.

Fokus op die skep van eenvoudige wat lig genoeg is om byna onmiddellik verkeer te laai, word na u webwerf herlei. Dit moet ontwerp word om besoekers stelselmatig bekend te stel aan die handelsmerk en die algemene webwerf-tema.

Scroll-geaktiveerde animasies

Oogsporingstudies het vasgestel dat gebruikers van die webwerf spandeer 57% van hul tyd bo die vou. Maar dit blyk dat baie van hulle bereid is om af te blaai, solank u 'n gunstige ontwerpstruktuur en -meganisme bied.

En dit is presies waar animasies met blaaigelei kom, en dit begin dadelik begin gebruikers begin blaai om die illusie van 'n gladde, eindelose bladsy te skep. Dit is 'n deurdagte manier om oorgange uit te skakel wat andersins blaai kan ontmoedig.

Navigasie en menu-animasies

Kom ons wees eerlik. Kieslysopsies neem 'n aansienlike hoeveelheid skermruimte in, veral op holisties-dinamiese webwerwe met verskeie keusevlakke. Gelukkig kan u gebruik maak van animasies om die opsies te verberg, en dit dan bloot te openbaar as 'n gebruiker op die ooreenstemmende knoppies klik of hurk.

Hierdie soort animasie stroomlyn en vereenvoudig ook die navigasieproses deur die hele struktuur in visueel gekoppelde menu-opsies saam te druk. Die raamwerk moet ontwerp word met submenu-segmente wat stelselmatig opduik wanneer 'n gebruiker op die menu-opsies vir oorlegsel klik of wys.

Galery en skyfievertonings

Miskien verrassend, die gemiddelde aandagspan van mense is ten minste 8 sekondes, volgens 'n onlangse studie wat deur Microsoft gedoen is. Selfs 'n goudvis kan langer as 'n tipiese individu oplettend bly. Daarom kan u wed dat die meeste besoekers van u werf nie aanhoudend genoeg is om deur al u galleryitems te klik nie.

Maar raai wat? U kan animasies van gallery en skyfievertoning slim gebruik om talle beelde outomaties ten toon te stel, sonder om gebruikers noodwendig te dwing om daardeur te navigeer.

Die belangrikste hier is die tyd vir beeldvertoning. Kort uitstallings met vinnige oorgange sou haastig voel, terwyl lang uitstallings met stadige oorgange blykbaar vervelig en traag sou wees. Met dit in gedagte, ontwerp die algehele uitleg om elke prent vir ongeveer 5 tot 8 sekondes te vertoon voordat u vinnig na die volgende oorgaan.

Gevolgtrekking

In die geheel moet u animasies ontleed aan die hand van hoeveel hulle die gebruikerservaring verbeter. 'N Goeie verbinding moet 'n emosionele verbinding van gebruikers veroorsaak of die navigasieproses vergemaklik. 'N Perfekte een, aan die ander kant, moet albei tegelykertyd gemaklik kan bereik.

Neem dit tyd, neem u tyd om al die relevante parameters krities te beoordeel terwyl u animasies op u webwerf ontwerp en inbed. En onthou - hou dit eenvoudig, lig en goed in lyn met u handelsmerk.

opskrif van hoofde met vergunning van Alfrey Davilla | vaneltia

Bogdan Rancea

Bogdan is 'n stigterslid van Inspired Mag, en het bykans 6 jaar ervaring in hierdie periode opgedoen. In sy vrye tyd studeer hy graag klassieke musiek en verken visuele kuns. Hy is ook behep met fixies. Hy besit al 5.