Den Ultimate Guide to Web Animation
Animasjon er en av menneskets livslange drømmer (hvis noen historikere skal tro). Teorien begynner med hule malerier: I noen hule malerier er det vanlig å se skapninger tegnet med altfor mange lemmer.
Det er et par teorier bak dette. Noen antyder at dette var rett og slett fordi kunstnerne ikke hadde noen midler til å slette lemmer, og forlot sine feil på veggene for ettertiden. Andre mener at disse var de tidligste forsøkene på å fange ideen om bevegelse i et statisk bilde. Jeg velger å tro den andre teorien.
Og hva er mer naturlig enn ønsket om å fange bevegelse? Alt i naturen beveger seg. Folk som går, vann løper, planter utfolder seg, det eneste som er virkelig konstant i naturen er endring, i form av bevegelse. En del av det skjer i uskarphet, og noe av det er for sakte å oppleve, men det skjer alltid.
Animasjon er ikke lenger en nyhet for webdesignere ... det blir grunnlaget for effektiv interaksjonsdesign.
Animasjon er endring, og bevegelse. Det er nærmest vi kommer til å fange livet i vår kunst. Dette vil være grunnen til at folk alltid sier ting som "animasjon gjør at våre nettsider (eller presentasjoner eller hva som helst) kommer til live ." Det kan være for mye, men det er et uttrykk som elegant tar opp formålet med animasjon i webdesign.
Den illusjonen av bevegelse, når den brukes riktig, er det som forteller brukerne at de faktisk har gjort noe. De har vellykket samhandlet med grensesnittet, og har forårsaket noe å endre.
Dette utløser de samme følelsene (eller i det minste veldig lignende følelser) i dem som de opplever når de samhandler med fysiske gjenstander. På en måte er animasjon skeuomorphic. Det er riktig, jeg sa "s" -ordet.
Når det brukes riktig, er animasjon utformet for å etterligne virkelige interaksjoner. På en måte har vi kommet hele sirkelen. Vi kan ikke bruke altfor mange lærtekstur lenger, men vi prøver fortsatt å etterligne den virkelige verden.
Animasjon på nettet: en kort historie
Før vi går inn på mer praktiske ting, la oss se på hvordan animasjon på Internett kom til sin nåværende (og veldig kule) tilstand. Det begynte ganske mye med gifs ...
.gif-filer er, det viser seg, eldre enn jeg er om lag to år. De ble introdusert i 1987, akkurat i tid for de tidlige dagene av Internett som vi vet det (mer eller mindre). Dermed begynte æraen med dansende babyer og andre grusomme som var best glemt.
Likevel, hvis populariteten til gifs viste oss noe, var det at folk ønsket å bringe animasjon til sine nettsider. Mind deg, de fleste hadde nok ikke vurdert mulighetene for at animasjon kunne forbedre brukervennligheten. Det handlet om å bringe en liten stil og en liten bit av livet til det ellers statiske rike på nettsiden.
Det har aldri vært en bedre tid å fokusere på animasjon i forhold til nettbaserte grensesnitt og applikasjoner.
Når evnen til .gif-filer var oppbrukt, ønsket folk nye og bedre måter å legge til animasjon på sine nettsteder. Og lyd! Oh, herlig lyd. Hvor fantastisk ville det være hvis folk åpnet nettsiden din, og din favoritt sang spilte? Og, som den faktiske sangen ... ingen av det MIDI crap, ikke sant?
Det var Flash som tillot oss å lære den leksjonen på den harde måten. La oss ikke glemme at Flash var ganske fantastisk for dagen. Faktisk var det en innovasjon. Det var fremgang. Det var kult .
Uansett hvor dårlig det ble misbrukt senere, må det erkjennes at Flash tillot oss å gjøre ting med Internett som vi ikke hadde kjent før. Den utvidede kreative horisonter, skapte jobber for folk i en helt ny industri, ga oss "web tegneserier" og den største tingen til å skje på 90-tallet (foruten Nirvana): Flash spill. Selv nå finner jeg disse tingene veldig vanedannende.
Etter hvert som tiden gikk, flyttet mange designere til JavaScript-basert animasjon for de mindre tingene, som dropdown-menyer og andre navigasjonselementer. Det var mer SEO-vennlig, tross alt, hvis du gjorde det riktig. Andre brukte bare JavaScript fordi det var hvordan FrontPage og DreamWeaver byttet knappbilder, men det er fortsatt fremgang i langsom fremgang.
I midten av det siste tiåret har W3C imidlertid allerede jobbet med å inkludere animasjon i CSS-spesifikasjonen. I 2009 ble det første offentlige utkastet til CSS animasjonsspesifikasjonen utgitt.
Og nå? Nå finner vi måter å tvinge maskinvaregjengivelse på, kombinere CSS-animasjoner med SVG-filer, JavaScript-biblioteker for å utvide grunnleggende animasjonsfunksjonalitet og mer.
Nå leter vi etter måter å gjøre mer enn å legge stil til nettsteder. Nå prøver vi å øke brukervennligheten, informere og utdanne brukere, og for å gjøre det enklere for dem å finne ut hva de gjør.
Animasjon er ikke lenger en nyhet for webdesignere. I film ble det grunnlaget for en helt ny type historiefortelling. For oss blir det grunnlaget for effektiv interaksjonsdesign.
Det har aldri vært en bedre tid å fokusere på animasjon i forhold til nettbaserte grensesnitt og applikasjoner. Teknologien er ennå ikke fullstendig formet (når er det noen gang?) Eller fullt støttet (når er det noen gang?), Men vi finner nye måter å levere til folk uten å bruke plugins eller proprietær kode.
Jo mer vi baserer vår animasjon på åpne standarder, jo flere mennesker vil faktisk kunne se det i utgangspunktet. Og med dette siste fokuset på å bruke det til å kjøre interaksjon, er det en veldig, veldig god ting.
Det er på tide å være en tidlig adopter.
Typer av web animasjon
La oss komme seg til virksomheten. Hva slags animasjon snakker vi om? Jeg mener, jeg sa mye om bruk av animasjon for å forbedre brukergrensesnittene våre; men hva betyr det egentlig?
Det er åpenbart ikke nok til å kaste animasjon på elementene våre på websiden, og håper det forbedrer konverteringsfrekvensen. Det ville være dumt. Som alle andre aspekter av design, må du nøye vurdere hva slags animasjon du bruker, og når du bruker dem.
Så også må de faktiske detaljer om gjennomføringen bli vurdert. Hvis animasjonene dine er så ressurskrevende at de avveier brukerens mobilenheter, eller verre, deres skrivebord, har du et problem. Eller fem.
La oss begynne med å se på forskjellige typer animasjoner som vanligvis brukes på nettet:
Grensesnittelement animasjon
Jeg vet ikke om dette er den vanligste typen animasjon, men på et gjetning er det sannsynligvis det. Og så skal det være. Dette er etter min mening den mest nyttige typen animasjon som vi har tilgjengelig for oss.
Som jeg sa i introduksjonen, er dette animasjonen som lar brukerne vite at deres handling (klikk, for eksempel) er registrert. Deres klikk var katalysatoren som trengs for å få noe til å skje, om det skulle navigere til en annen side, åpne et sidebar eller modalvindu, eller sende en e-post fra kontaktskjemaet.
Tilbakemeldingen er ikke bare hyggelig å ha, det er viktig nå, i denne verden med flat design. Folk trenger å vite forskjellen mellom grensesnitt og dekorasjon. Ved å animere elementene våre på enkle og subtile måter på samhandling, får de tilbakemeldingene de trenger.
Det kan være så enkelt som å gjøre knappen bakgrunner endre, eller få dem til å hoppe. Denne kategorien dekker også animasjonene som gjør sidebjelker "glid" på siden, og de som gjør modale vinduer blåser seg inn i eksistensen.
Venter animasjoner
Og igjen handler det om å gi tilbakemelding til brukeren. Dette er animasjonene du vil vise til brukeren når noe skjer i bakgrunnen, og du vil ikke at de skal freak out.
Verktøyet til disse animasjonene ble bevist for lenge siden da grafiske brukergrensesnitt ble oppfunnet. Det begynte med måten musemarkøren ville bli til en times glass og også fremdriftsstenger. Apple introduserte "spinning beach ball of death," på et tidspunkt, og windows viste filer som flyr grasiøst fra en mappe til en annen.
Disse konvensjonene ble vedtatt på nettet så snart som mulig, og med god grunn. Når folk begynner å lure på hva som skjer, fortsetter de å klikke eller tappe. Det kan være et uttrykk for frustrasjon. De kan tro at det faktisk gjør tingene raskere.
Uansett, for å fortelle brukeren hva som skjer, selv via en enkel fremdriftslinje, kan du enkelt lindre tankene ... selv for de av oss som har brukt datamaskiner på lang tid.
Beegit, skriveappen jeg pleide å skrive og redigere denne artikkelen gir meg en nyttig "fremdriftssirkel" for å fortelle meg når bildene mine skal lastes opp, som du kan se i øverste venstre del av modalvinduet:
Story-telling animasjoner
Nå forteller historiefortelling med animasjon utover tegneserier. Faktisk snakker jeg ikke om dem i det hele tatt. Snarere utformer noen mennesker nettsteder slik at når en bruker samhandler med dem (for eksempel: ved å bla nedover siden), utløses animasjoner som forteller en historie.
Noen vanlige eksempler er de sidene som vil vise frem et nytt produkt ved å "montere" det foran øynene dine. Andre spiller mer ut som en tegneserie, med små figurer som følger deg ned på siden og alt.
Effektiviteten av disse animasjonene er ... diskutabel. Vanligvis er de ikke ment å forbedre brukervennligheten, men for å imponere brukeren, og gi dem litt kontekst for emnet på siden. De kan prøve å vise frem håndverket til et produkt, eller dele erfaringene som førte til et selskaps opprettelse.
Hvorvidt de oppnår disse tingene, vil trolig avhenge av kvaliteten på animasjonene selv, uansett om de påvirker nettstedets ytelse eller innholdet på selve siden. Hvis en bruker ikke finner det de leter etter på nettstedet ditt, kan alle animasjonene i verden ikke fikse det.
To eksempler som jeg liker, kommer mye fra merker som har stor erfaring med denne typen ting: Apple og Sony.
Siden som er dedikert til Mac Pro, viser deg nøyaktig hva som er under hetten mens du ruller ned:
I mellomtiden, over på Sony, viser de at flere forskjellige enheter er, vel, ikke så mye "samlet" som å ha sine deler knust sammen, komplett med brannvirkninger.
Rent dekorative animasjoner
For bedre eller verre, legger noen mennesker animasjon på deres nettsted som ikke tjener noe annet enn å bli sett. Er det verdt det?
Ja og nei…
Jeg vil vanligvis unngå det fordi det er distraherende. Du vil at folks øyne trekkes til grunnene til at de skal kjøpe hva du selger, og dine anrop til handling. Du vil at de skal få det de kom for. Hvis nettstedet ditt ikke tjener noe formål for brukeren, eller hvis de blir for distrahert når de prøver å bestemme formålet, kan de ikke komme tilbake.
Dekorativ animasjon bør være helt skjult. Vis det når folk fullfører oppfordringen din til handling. Du kan også inkludere subtile animasjoner som bare utløses når brukeren gjør noe veldig spesifikt, som å sveve musen over noe lite i topptekst / bunntekst.
Her på WDD, som beveger seg over logoen, animerer det, selv om det kan hevdes at siden logoen er en lenke, er den ikke rent dekorativ, men det er et godt eksempel likevel. Et enkelt Google-søk vil avsløre at det er flere nettsteder der konami-koden vil få noe til å skje (som å lage Godzilla dukker opp og brøler ... Jeg tuller ikke).
Andre eksempler er Googles mange kjente påskeegg , og denne fra photojojo.com:
Rul hele veien ned til bunnen av en hvilken som helst side, og en vennlig dinosaur vil "ta bildet ditt." På sidene som har det, vil ballongen som ses på skjermbildet, flyte fra side til side.
Animasjon i reklame, eller: min tarm sier nei, men min lommebok sier ja
Reklame. For noen er det deres inntekt ( hoste ahem hoste ), og til andre, en plage. Legg til animasjon i en annonse og boom! Øynene er trukket til det mot deres vilje. Det er en reflekshandling.
Legg til lyd, og de vil føle intenst hat ... også en reflekshandling.
Men det er nesten uunngåelig. Hvis du vil få folk til å se på annonsene dine, er det en god måte å animere dem. Dette kan gjøre deg uvelkommen på noen moderne annonseringsnettverk som stoler på "diskret annonser", men hvis animerte annonser ikke fungerte, ville vi ikke ha dem.
Men den animasjonen kommer med det samme problemet som utgjøres av dekorative animasjoner: det distraherer brukeren fra oppgaven sin. I verden av online salg kan distraksjon være død.
Til slutt vil det være opp til deg å veie fordeler og ulemper. Ingen annonser, diskret annonser eller animerte annonser, det er alt en avgang.
Du kan legge merke til at ingen steder på denne listen nevnte jeg splash screen animasjoner. Det er fordi jeg forventer at alle skal vite bedre.
Gjennomføring av animasjon
De tekniske aspektene ved implementering spiller ingen rolle, men om du bruker .gifs, video, CSS, SVG eller Flash (shudder), er det noen prinsipper som betyr mer. Glem, for et øyeblikk, teknologien eller teknikkene du planlegger å bruke, og gjør deg klar for en litt mer teori. Brukerne vil takke deg.
Ytelse, ytelse, ytelse
Du tror kanskje, "Ok, dette høres tydelig ut. Animasjoner skal løpe fort, ikke sakte. "Du har rett, det er åpenbart, i teorien. Problemet er at jeg fremdeles finner nettsteder, bygget med all den nyeste teknologien, med hakkete animasjoner.
Jeg har et Nvidia GTX 750 TI skjermkort som koster meg rundt 200 dollar. Animasjonene dine bør ikke være hakkete. Jeg var på noen nettsteder nylig som fikk meg til å tenke, "Skyrim går raskere enn dette." Og jeg var ikke fleiper eller overdriver.
Forestill deg nå hvordan det vil være å navigere på de samme nettstedene på en tavle eller smarttelefon av lav kvalitet. På den ene siden ville det være en fin måte å virkelig teste andres karakter på, men på den annen side vil det ikke få de tregte nettstedene til å gjøre noe mer. Hvis dine eneste alternativer er langsom animasjon eller ingen animasjon i det hele tatt, har du det bedre med et grensesnitt som bare sitter der.
Det er ikke å si noe om nettsteder som er bygget med så mye animasjon og så mange spesialeffekter at de trenger å laste skjermer med fremdriftsfelt. Ingen må vente på animasjoner å laste før de kommer til å se informasjonen de vil ha eller trenger. Noen gang. Å få folk til å vente er hvordan du mister forretninger.
La oss kaste alt dette ned til kulepoeng:
- Hvis Skyrim går mer jevnt enn nettstedet ditt på skrivebordet mitt, er det dårlig.
- Hvis nettstedet ditt trenger en lastingslinje før brukerne kommer til å se hjemmesiden, er det virkelig dårlig.
Og her skal jeg bare gi litt teknisk rådgivning: Hvor maskinvare akselerasjon og ytelse er bekymret, er CSS nesten alltid bedre enn JavaScript. Når du har et valg, bruk CSS-basert animasjon, og bruk JS som en tilbakebetaling.
Begynn med de små tingene
Når man vurderer animasjon som et designverktøy, i stedet for et stilistisk valg, er det best å starte små. For en utfører en liten og diskret animasjon bedre (se delen ovenfor). For det andre må stor og prangende animasjon ha en hensikt utover bare "ser bra ut" for å være nyttig.
De fleste nettsteder trenger ikke noen animasjon utover den typen som brukes til å lage brukergrensesnittelementer, føler seg "ekte" og semi-naturlig. Før du begynner å kaste parallax rundt som ris ved et bryllup, spør deg selv om det faktisk vil forbedre opplevelsen for brukerne. Ville store og prangende ting flytte rundt på skjermen informere og lede brukerne bedre enn vanlig tekst og flotte bilder?
I de fleste tilfeller er svaret sannsynligvis "nei." Det vil være unntak, selvfølgelig. Det er nesten alltid. Mesteparten av tiden kan det imidlertid være bedre å bare animere knappene dine, gjøre det skjulte navigeringsfeltet glir inn, og animer helvete ut av suksessmeldingen som vises etter at noen bruker kontaktskjemaet ditt.
Subtilitet er nøkkelen til god design, og likevel så ofte undervurdert. Start der. Og så, hvis det blir klart at å gjøre noe større og flashier ville tjene din hensikt fra et brukeropplevelsessynspunkt, gå alt ut!
Hold varigheten lav, eller: Jeg føler behovet ... behovet for fart
Animasjoner skal være raske, eller rettere sagt, de skal skje raskt. Jeg snakker ikke om ytelse her, men heller den faktiske tiden en gjenstand bruker.
Tenk på hvordan vi samhandler med ekte objekter. Noen ganger beveger vi seg raskere, noen ganger langsommere. Hastigheten som vi samhandler med et objekt på, kan avhenge av størrelsen, oppgaven ved hånden, eller om den er full av en væske som vi ikke vil spyle ut. men generelt plukker vi opp ting og beveger dem rundt ganske fort. Individuelle bevegelser kan skje i millisekunder.
"Millisekunder" er vanligvis hvor mye tid vi vil måle brukergrensesnittets animasjon. Når som helst, og folk begynner å miste tålmodighet med maskinen sin, eller produktet ditt, eller begge deler. Du må holde det kort, eller ting bare føles sakte.
Dette gjelder spesielt for produkter som folk må bruke flere ganger. Selv om animasjonen er super morsom og underholdende, vil den miste sin appell ved tiende gang noen må se den. Det er en hoppende knapp eller en glidende meny, ikke introen til din favoritt TV-show. Ingen sang sammen her.
Gjør ting sprette, en gang i mellom
Fysiske objekter spretter. Noen av dem gjør det ikke veldig bra, men i utgangspunktet spretter alle objekter litt, hvis du slipper dem langt nok på en hard overflate, og hvis det ikke er for mye luftmotstand og ... får du poenget mitt.
Å samhandle med grensesnittelementer er som å samhandle med små, harde objekter. Du kaster dem til den ene siden, de spretter litt. Du slipper dem, de spretter litt.
Derfor kan det være nyttig, når det er hensiktsmessig, å gjøre animasjonene dine "sprette", spesielt hvis de har flyttet vertikalt. Det handler om å opprettholde illusjonen.
Ting stopper ikke normalt på en krone
Ting i bevegelse tar vanligvis litt tid å stoppe. Stasjonære gjenstander som settes i bevegelse, tar vanligvis litt tid for å øke hastigheten. Yay fysikk!
Så, når du lager objekter, eller slutte å flytte, husk å gi dem en liten tid (i millisekunder) for å senke eller øke hastigheten. Dette kalles "lettelse", og det er funksjonalitet for det bygget rett inn i CSS.
lenker
Ingen Ultimate Guide artikkel ville være komplett uten minst en del full av lenker. Så her går du. Vi har lenker til artikler som omhandler den grunnleggende teorien bak animasjon i webdesign, opplæringsprogrammer for å komme i gang, og mange eksempler. Nyt.
Web animasjonsteori
Ønsker du mer informasjon før du begynner å animere ting? Ikke noe problem. Her er en hel masse råd fra veldig smarte mennesker, og noen generelle spekulasjoner på animasjonens fremtid på Internett.
Animasjonsprinsipper for Internett
Denne artikkelen over på cssanimation.rocks skisserer de mest grunnleggende prinsippene bak animerende objekter generelt. Husk å sjekke ut resten av nettstedet deres for eksempler, opplæringsprogrammer og et e-postkurs. (E-post kurset koster penger, skjønt.)
Usynlig animasjon
Steven Fabre forteller oss hvordan animasjon, som design selv, burde være i utgangspunktet usynlig. Det høres bare paradoksalt til du leser det. Gå gjør det.
Vil animasjon være den store UI-trenden i 2015?
Et spekulativt stykke med en god, om kort, forklaring på noen av de ledende prinsippene for animasjon.
Rolle av animasjon i webdesign
Et annet stykke med enkle, grunnleggende råd. Det er kort og enkelt, men kanskje verdt å lese om igjen hver gang du må lage en viktig animasjonsrelatert beslutning. Tenk på det som en jukseplate for å holde perspektivet.
The State of Animation 2014
En utmerket oversikt over hvordan web animasjon (mer eller mindre) for tiden blir gjort av Rachel Nabors. Du får se navnet hennes her noen ganger, siden hun er noe av en ekspert på emnet.
Fem måter å anta ansvarlig
En annen fantastisk artikkel av Rachel Nabors (jeg fortalte deg at du skulle se flere av hennes ting ...). I denne går hun over fem måter å legge til animasjon i arbeidet ditt uten å forandre brukerne.
Guider
Få dine keyframes her! Lær mer CSS egenskaper enn du trodde mulig / nødvendig. Lær forskjellen mellom easeIn og easeOut - Jeg vet at jeg måtte se den opp.
4 enkle CSS3 animasjonsopplæringer
Hopp over introen og gå rett til de gode tingene, hvis det er slik du jobber. Jeg har tatt med noen få introduksjonsveiledninger nedenfor. Hvis du vil ha rett til noen grunnleggende kode, start her.
En nybegynners introduksjon til CSS Animasjon
Nøyaktig hva det står i tittelen. Så lenge du har grunnleggende kunnskaper om HTML og CSS, kan du følge denne opplæringen og få kunnskap om CSS-basert animasjon.
Veiledningen til CSS Animasjon: Prinsipper og eksempler
Smashing Magazine tar sine lesere gjennom en rekke grunnleggende animasjoner. Det er enkelt, men verdifull kunnskap.
Flashless Animasjon
En annen flott introduksjon til CSS animasjon, skrevet av den stadig fantastiske Rachel Nabors. Ja, det er fra 2012, men den eneste forskjellen mellom da og nå er at teknikken hun gir, har mer nettleserstøtte.
Codrops opplæringsprogrammer
Jeg kan ikke, og jeg mener det seriøst, jeg kan ganske enkelt ikke anbefale gutta på Codrops nok. De har gjort mange eksempler, bevis på konsepter, idesamlinger, og ja, opplæringsprogrammer. De elsker animasjon, og de gjør mye for å dele den kjærligheten.
Her er bare noen av animasjonsrelaterte opplæringsprogrammer som de har opprettet:
- Tilted Content Slideshow
- Side forhåndsbelastningseffekt
- Slide Header Layout
- Lekfull Trampolin Effekt
- Slik lager du (animert) tekstfyll
CSS3 Overganger, Transformer, Animasjon, Filtre og mer!
En interaktiv, grundig opplæring med levende masse levende eksempler. Kom hit når du er ferdig med de mest grunnleggende opplæringene. Det gir deg mange ideer til å trene med.
Overganger og animasjoner
En guide til enkel CSS-animasjon med et spesielt fokus på overganger og overgangsegenskaper.
Risting opp på nettet med CSS3 (Slik lager du koblinger rist)
En opplæring med vekt på å riste ting. Jeg mener, det går du.
Høy ytelse Animasjoner
Denne opplæringen, medforfatter av den kjære Paul Lewis og Paul Irish, fokuserer på hvordan å animere ting på en måte som ikke bremser nettleseren. Siden dette kan være spesielt viktig på mobile enheter, er det veldig verdt å lese.
Opplæring: Bruke animasjons-fyll-modus I CSS-animasjonene dine
Etter å ha lært så mye om hvordan du får ting til å bevege seg, kan det være lurt å lære om oppførselen til objekter som ikke har flyttet ennå, eller nettopp ferdig med animasjonen. Noen ganger kan stylingen bli vanskelig, og det er der animasjons-fyll-modus kommer inn.
Keyframe Animasjon Syntax
En brikke levert av den alltid hjelpsomme css-tricks.com. Kan du ikke huske hvordan du gjør de keyframe-tingene, gjør det du vil? Bokmerk dette, og slutte å bekymre deg for det.
En titt på: Cubic-Bezier I CSS3 Overgang
Dette handler om timing. Jeg mener, den bokstavelige timingen av animasjonen din. Mer spesifikt handler det om å bruke Bezier-kurven for å få animasjonstimingen akkurat akkurat.
Flip ting!
Jeg fant to forskjellige, fantastiske opplæringsprogrammer om hvordan du lager flippende animasjoner. Hver bringer en annen tilnærming til bordet, og noen tillegg som den andre ikke gjør. Så i stedet for å bare gjøre meg selv, har jeg tatt med dem begge.
Lag en CSS Flipping Animasjon
CSS Transitions, Transforms & Animations - Flipping Card
Animerer CSS3-gradienter
De fleste animasjonsveiledningene antar at du vil animere objektets geometri eller posisjon på siden. Denne vil lære deg hvordan du animerer hva som er inni dem ... i dette tilfellet en gradient.