Den ultimative vejledning til web animation
Animation er en af menneskets livslange drømme (hvis nogle historikere skal tro). Teorien begynder med hulmalerier: I nogle hulmalerier er det almindeligt at se væsner tegnet med alt for mange lemmer.
Der er et par teorier bagved dette. Nogle antyder, at dette simpelthen skyldes, at kunstnerne ikke havde nogen midler til at slette lemmerne og efterlade deres fejl på væggene til eftertiden. Andre mener, at disse var de tidligste forsøg på at fange ideen om bevægelse i et statisk billede. Jeg vælger at tro på den anden teori.
Og hvad er mere naturligt end ønsket om at fange bevægelse? Alt i naturen bevæger sig. Folk, vandløb, planter udfolder sig, det eneste der er virkelig konstant i naturen er forandring i form af bevægelse. Noget af det sker i en sløring, og noget af det er for langsomt til at opfatte, men det sker altid.
Animation er ikke længere en nyhed for webdesignere ... det bliver grundlaget for et effektivt interaktionsdesign.
Animation er forandring og bevægelse. Det er det nærmeste, vi kommer til at fange livet i vores kunst. Det vil derfor være, at folk altid siger ting som "animation gør vores hjemmesider (eller præsentationer eller hvad som helst) kommer til live ." Det kan være overbrugt, men det er en sætning, der elegant indfanger formålet med animation i webdesign.
Denne illusion af bevægelse, når den anvendes korrekt, er, hvad der fortæller brugerne, at de faktisk har gjort noget. De har med succes interageret med grænsefladen, og har forårsaget noget at ændre.
Dette udløser de samme følelser (eller i det mindste meget lignende følelser) i dem som dem, de oplever, når de interagerer med fysiske objekter. På en måde er animation skeuomorf. Det er rigtigt, jeg sagde "s" ord.
Når det bruges rigtigt, er animation designet til at efterligne virkelige interaktioner. På en måde er vi kommet i fuld cirkel. Vi bruger muligvis ikke alt for mange læderteksturer længere, men vi forsøger stadig at efterligne den virkelige verden.
Animation på nettet: en kort historie
Før vi går ind på mere praktiske ting, lad os se på, hvordan animation på internettet kom til sin nuværende (og meget cool) tilstand. Det begyndte stort set alt sammen med gifs ...
.gif filer er, det viser sig, ældre end jeg er ved omkring to år. De blev introduceret i 1987, lige i tide til de tidlige dage af internettet som vi ved det (mere eller mindre). Således begyndte æraen med dansende babyer og andre gruber bedst glemt.
Stadig, hvis populariteten af gifs viste os noget, var det, at folk ønskede at bringe animation til deres websider. Mind dig, de fleste havde sandsynligvis endnu ikke overvejet de måder, at animation kunne øge anvendeligheden. Det handlede om at bringe en lille stil og en lille smule af livet til det ellers statiske rige på websiden.
Der har aldrig været en bedre tid til at fokusere på animation i forhold til web-baserede grænseflader og apps.
Når mulighederne for .gif-filer var opbrugt, ønskede folk nye og bedre måder at tilføje animation til deres websteder. Og lyd! Åh, dejlig lyd. Hvor fantastisk ville det være, hvis folk åbnede din webside, og din yndlingssang spillede? Og ligesom den faktiske sang ... ingen af den MIDI crap, right?
Det var Flash, som tillod os at lære den lektion den hårde vej. Lad os ikke glemme, at Flash var temmelig fantastisk til sin dag. Det var faktisk en innovation. Det var fremskridt. Det var sejt .
Ligegyldigt hvor meget det blev misbrugt senere, må det erkendes, at Flash tillod os at gøre ting med internettet, som vi ikke havde kendt før. Det udvidede kreative horisonter, skabte job for mennesker i en helt ny industri, gav os "webkarakterer" og den største ting der nogensinde vil ske i 90'erne (udover Nirvana): Flash-spil. Selv nu finder jeg disse ting meget vanedannende.
Som tiden gik, flyttede mange designere til JavaScript-baseret animation til de mindre ting, som dropdown-menuer og andre navigationselementer. Det var jo mere SEO-venligt, hvis du gjorde det rigtigt. Andre brugte kun JavaScript, fordi det er sådan, hvordan FrontPage og DreamWeaver byttede knapbilleder, men det er stadig fremskridt med langsomme fremskridt.
I midten af det sidste årti arbejdede W3C allerede på at inkludere animation i CSS-specifikationen. I 2009 blev det første offentlige udkast til CSS animationsspecifikationen udgivet.
Og nu? Nu finder vi måder at tvinge hardwaregengivelse på, kombinere CSS-animationer med SVG-filer, JavaScript-biblioteker for at udvide den grundlæggende animationsfunktionalitet og meget mere.
Nu søger vi efter måder at gøre mere end at tilføje stil til hjemmesider. Nu forsøger vi at øge brugervenligheden, informere og uddanne brugerne og gøre det nemmere for dem at finde ud af, hvad de laver.
Animation er ikke længere en nyhed for webdesignere. I film blev det grundlaget for en helt ny form for historiefortælling. For os bliver det grundlaget for et effektivt interaktionsdesign.
Der har aldrig været en bedre tid til at fokusere på animation i forhold til web-baserede grænseflader og apps. Teknologien er endnu ikke fuldt dannet (når er den nogensinde?) Eller fuldt understøttet (når er det nogensinde?), Men vi finder nye måder at levere til folk uden at bruge plugins eller proprietære kode.
Jo mere vi baserer vores animation på åbne standarder, jo flere mennesker vil faktisk kunne se det i første omgang. Og med dette nylige fokus på at bruge det til at køre interaktion, er det en meget, meget god ting.
Det er tid til at være en tidlig adopter.
Typer af web animation
Lad os komme ned til forretningen. Hvilke former for animation taler vi om? Jeg mener, jeg sagde meget om at bruge animation til at forbedre vores brugergrænseflader; men hvad betyder det egentlig?
Det er selvfølgelig ikke nok at kaste animation på vores websideelementer og håber det forbedrer vores konverteringsfrekvens. Det ville være fjollet. Ligesom alle andre aspekter af design, skal du overveje hvilke former for animation du bruger, og når du bruger dem.
Også de faktiske detaljer i implementeringen skal overvejes. Hvis dine animationer er så ressourcekrævede, at de afvejer dine brugers mobilenheder, eller værre, deres desktops, har du et problem. Eller fem.
Lad os begynde med at se på de forskellige typer animationer, der typisk bruges på internettet:
Interface element animation
Jeg ved ikke, om det er den mest almindelige form for animation, men på et gæt er det nok. Og så skal det være. Dette er efter min mening den mest nyttige form for animation, som vi har til rådighed for os.
Som jeg sagde i introduktionen, er det den animation, som lader dine brugere vide, at deres handling (klik for eksempel) er blevet registreret. Deres klik var den nødvendige katalysator for at få noget til at ske, uanset om det navigerer til en anden side, åbner et sidebar eller modal vindue eller sender en e-mail fra din kontaktformular.
Denne feedback er ikke bare rart at have, det er vigtigt nu, i denne verden med fladt design. Folk har brug for at kende forskellen mellem interface og dekoration. Ved at animere vores elementer på enkle og subtile måder efter interaktion får de den feedback, de har brug for.
Det kan være så enkelt som at ændre knap baggrunde, eller få dem til at hoppe. Denne kategori dækker også de animationer, der gør sidebjælker "slide" på siden, og dem der gør modale vinduer blæser sig til eksistens.
Venter animationer
Og endnu en gang handler det om at give feedback til brugeren. Dette er de animationer, som du vil vise til brugeren, når der sker noget i baggrunden, og du vil ikke have, at de freaker ud.
Anvendelsen af disse animationer blev bevist for længe siden, da grafiske brugergrænseflader blev opfundet først. Det startede med den måde, hvorpå musemarkøren ville blive til en times glas og også fremdriftsstænger. Apple introducerede "spinning beach ball of death" på et tidspunkt, og windows viste filer flyver graciøst fra en mappe til en anden.
Disse konventioner blev vedtaget på nettet så hurtigt som muligt og med god grund. Når folk begynder at spekulere på, hvad der foregår, fortsætter de med at klikke eller tappe. Det kan være et udtryk for frustration. De tror måske, at det faktisk gør tingene hurtigere.
Uanset hvad det ved at fortælle din bruger, hvad der sker, selv via en simpel fremdriftslinje, kan lette tankerne betydeligt ... selv for dem af os, der har brugt computere i lang tid.
Beegit, den skriveapp, jeg plejede at skrive og redigere denne artikel, giver mig en handy "progresscirkel" for at fortælle mig, hvornår mine billeder skal gøres uploade, som du kan se i øverste venstre del af modalvinduet:
Story-telling animationer
Nu fortæller fortælling med animation ud over tegneserier. Faktisk taler jeg ikke om dem overhovedet. I stedet udvikler nogle mennesker hjemmesider, så som en bruger interagerer med dem (for eksempel: ved at rulle ned på siden) udløses animationer, som fortæller en historie.
Nogle almindelige eksempler er de sider, der viser et nyt produkt ved at "samle" det før dine øjne. Andre leger mere som en tegneserie, med små tegn efter dig ned på siden og alt.
Effektiviteten af disse animationer er ... diskuterbar. Typisk er de ikke beregnet til at forbedre brugervenligheden, men for at imponere brugeren og give dem en kontekst for emnet på siden. De kan forsøge at vise ud af et produkts håndværk eller dele de erfaringer, der førte til virksomhedens skabelse.
Uanset om de udfører disse ting, vil de sandsynligvis afhænge af kvaliteten af animationerne selv, uanset om de påvirker webstedets ydeevne eller indholdet af selve siden. Hvis en bruger ikke finder det, de leder efter på din hjemmeside, kan alle animationerne i verden ikke løse det.
To eksempler, som jeg kan lide meget, kommer fra mærker, der har stor erfaring med denne slags ting: Apple og Sony.
Siden dedikeret til Mac Pro viser dig præcis, hvad der ligger under emhætten, mens du ruller ned:
I mellemtiden viser de sig på flere forskellige enheder i Sony, at de ikke er så meget "samlet" som at have deres dele smadret sammen, komplet med brandpåvirkninger.
Rent dekorative animationer
For bedre eller værre sætter nogle mennesker animation på deres websted, der ikke tjener andet formål end at blive set. Er det det værd?
Ja og nej…
Jeg ville typisk undgå det, fordi det er distraherende. Du vil have folks øjne trukket til grundene til, at de skal købe, hvad du sælger, og dine opfordringer til handling. Du vil have, at de får det, de kom til. Hvis din hjemmeside ikke tjener noget formål for brugeren, eller hvis de bliver for distraherede, når de forsøger at bestemme deres formål, kan de ikke komme tilbage.
Dekorativ animation skal være helt skjult. Vis det, når folk gennemfører dit opfordring til handling. Du kan også inkludere subtile animationer, der kun udløses, når brugeren gør noget meget specifikt, som at svæve musen over noget lille i overskriften / footeren.
Her på WDD, der svæver over logoet, animerer det, selv om det kunne hævdes, at siden logoet er et link, er det ikke rent dekorativt, men det er et godt eksempel. En simpel Google-søgning vil afsløre, at der er flere websteder, hvor bruger konami-koden vil få noget til at ske (som at gøre Godzilla pop up og brøl ... Jeg er ikke sjov).
Andre eksempler er Googles mange kendte påskeæg , og denne fra photojojo.com:
Rul hele vejen ned til bunden af en hvilken som helst side, og en venlig dinosaur vil "tage dit billede." Hvad mere er, på sider der har det, vil ballonen, der ses i skærmbilledet, flyde subtilt fra side til side.
Animation i reklame, eller: min tarm siger nej, men min tegnebog siger ja
Reklame. For nogle er det deres indkomst ( hoste ahem hoste ), og for andre, en plage. Tilføj animation til en annonce og boom! Øjnene er tiltrukket af det mod deres vilje. Det er en reflekshandling.
Tilføj lyd, og de vil føle hårdt had ... også en reflekshandling.
Men det er næsten uundgåeligt. Hvis du vil få folk til at se på dine annoncer, er det en god måde at animere dem på. Dette kan gøre dig uvelkommen på nogle moderne reklame netværk, der stoler på "diskret annoncer", men hvis animerede annoncer ikke fungerede, ville vi ikke have dem.
Men den animation kommer med det samme problem, der skyldes dekorative animationer: det distraherer brugeren fra deres opgave. I verden af online salg kan distraktion være døden.
I sidste ende vil det være op til dig at veje fordele og ulemper. Ingen annoncer, diskret annoncer eller animerede annoncer, det er helt en afvejning.
Du bemærker måske, at ingen steder på denne liste nævnede jeg skærm animationer. Det er fordi jeg forventer, at alle skal vide bedre.
Implementering Animation
De tekniske aspekter ved implementering gør noget, men om du bruger .gifs, video, CSS, SVG eller endda Flash (shudder), er der nogle principper, der betyder noget mere. Glem det for et øjeblik den teknologi eller teknikker, du planlægger at bruge, og gør dig klar til en lidt mere teori. Dine brugere vil takke dig.
Ydeevne, ydeevne, ydeevne
Du tror måske, "Okay, det lyder indlysende. Animationer skal køre hurtigt, ikke langsomt. "Du har ret, det er indlysende, i teorien. Problemet er, at jeg stadig finder websites, der er bygget med den nyeste teknologi, med hakket animation.
Jeg har et Nvidia GTX 750 TI-kort, der koster mig omkring 200 dollars. Dine animationer bør ikke være hakkete. Jeg var på nogle hjemmesider for nylig, der fik mig til at tænke, "Skyrim kører hurtigere end dette." Og jeg var ikke sjov eller overdriver.
Forestil dig nu, hvordan det ville være at navigere de samme websteder på en tablet eller en smartphone af lav kvalitet. På den ene side ville det være en fantastisk måde at virkelig teste andens karakter på, men på den anden side vil det ikke få de langsomme websteder mere forretning. Hvis dine eneste muligheder er langsom animation eller slet ingen animation, har du det bedre med en grænseflade, der bare sidder der.
Det er ikke at sige noget om hjemmesider, der er bygget med så meget animation og så mange specielle effekter, at de har brug for at læse skærme med progress bar. Ingen skal vente på animationer at indlæse, før de kommer til at se de oplysninger, de ønsker eller har brug for. Nogensinde. At få folk til at vente er, hvordan du mister forretningen.
Lad os bryde alt dette ned til kuglepunkter:
- Hvis Skyrim kører mere glat end din hjemmeside på mit skrivebord, er det dårligt.
- Hvis dit websted har brug for en indlæsningslinje, før brugerne får se hjemmesiden, er det virkelig dårligt.
Og her skal jeg bare give lidt teknisk rådgivning: hvor hardware acceleration og ydeevne er CSS næsten altid bedre end JavaScript. Når du har et valg, brug CSS-baseret animation, og brug JS som en tilbagesendelse.
Start med de små ting
Når man overvejer animation som et designværktøj, snarere end et stilistisk valg, er det bedst at starte små. For den ene spiller mindre og diskret animation bedre (se afsnittet ovenfor). For det andet skal stor og prangende animation have en hensigt ud over at bare "se godt ud" for at være nyttigt.
De fleste hjemmesider behøver ikke nogen animation ud over den art, der bruges til at gøre brug af brugergrænsefladeelementer, føler sig "ægte" og semi-naturlig. Før du begynder at kaste parallax rundt som ris ved et bryllup, så spørg dig selv om det rent faktisk vil forbedre oplevelsen for dine brugere. Ville store og prangende ting flytte rundt på skærmen informere og lede dine brugere bedre end den sædvanlige tekst og smukke billeder?
I de fleste tilfælde er svaret sandsynligvis "nej". Der vil selvfølgelig være undtagelser. Der er næsten altid. Det meste af tiden kan det dog være bedre at bare animere dine knapper, gøre din skjulte navigationsbjælke glide ind og animere helvede ud af den succesmeddelelse, der vises, når nogen bruger din kontaktformular.
Subtilitet er nøglen til godt design, og alligevel så ofte undervurderet. Start der. Og så, hvis det bliver klart, at der gøres noget større og blinkende ville tjene dit formål ud fra et brugeroplevelsessynspunkt, gå alt ud!
Hold varigheden lav, eller: Jeg føler behovet ... behovet for hastighed
Animationer skal være hurtige, eller rettere, de skal ske hurtigt. Jeg taler ikke om forestilling her, men snarere den faktiske tid, en genstand bruger.
Tænk på, hvordan vi interagerer med rigtige objekter. Nogle gange bevæger vi os hurtigere, nogle gange langsommere. Den hastighed, hvormed vi interagerer med et objekt, kan afhænge af dens størrelse, opgaven ved hånden, eller om den er fuld af en væske, vi ikke ønsker at spilde; men generelt vælger vi ting og flytter dem rundt temmelig hurtigt. Individuelle bevægelser kan ske i millisekunder.
"Millisekunder" er generelt den tid, hvor vi vil måle brugergrænseflade animation. Længere, og folk begynder at miste tålmodighed med deres maskine eller dit produkt eller begge dele. Du bliver nødt til at holde det kort, eller ting føler bare langsomt.
Dette gælder især for produkter, som folk skal bruge gentagne gange. Selvom animationen er super sjov og underholdende, vil den miste sin appel ved den tiende gang nogen skal se den. Det er en hoppende knap eller en glidende menu, ikke intro til dit yndlings tv-program. Ingen sang sammen her.
Få ting til at hoppe, en gang imellem
Fysiske genstande hopper. Nogle af dem gør det ikke så godt, men i det mindste taler alle genstande lidt, hvis du lægger dem langt nok på en hård overflade, og hvis der ikke er for meget luftmotstand og ... får du mit punkt.
Interagere med UI-elementer er som at interagere med små, hårde genstande. Du kaster dem til den ene side, de springer lidt. Du slipper dem, de springer lidt.
Derfor kan det være nyttigt, når det er relevant, at gøre dine animationer "hoppe", især hvis de har flyttet lodret. Det handler om at opretholde illusionen.
Ting stopper normalt ikke på en krone
Ting i bevægelse tager normalt lidt tid at stoppe. Stationære genstande sat i bevægelse tager normalt lidt tid til at fremskynde. Yay fysik!
Så husk at give dem en lille smule tid (i millisekunder) for at bremse eller fremskynde når du gør objekter bevæge sig, eller stop med at flytte. Dette kaldes "lettelse", og der er funktionalitet til det bygget direkte ind i CSS.
Links
Ingen Ultimate Guide artikel ville være komplet uden mindst en sektion fuld af links. Så her går du. Vi har links til artikler om grundlæggende teori bag animation i webdesign, tutorials for at komme i gang, og masser af eksempler. God fornøjelse.
Web animationsteori
Ønsker du flere oplysninger, inden du begynder at animere ting? Intet problem. Her er en hel masse råd fra meget kloge mennesker, og nogle generelle spekulationer om fremtiden for animation på internettet.
Animationsprincipper for internettet
Denne artikel over på cssanimation.rocks beskriver de mest grundlæggende principper bag animerende objekter generelt. Sørg for at tjekke resten af deres hjemmeside til eksempler, tutorials og et e-mail kursus. (E-mail-kurset koster penge, selvom.)
Usynlig animation
Steven Fabre fortæller os, hvordan animation, som design selv, burde være dybest set usynlig. Det lyder kun paradoksalt, indtil du læser det. Gør det.
Vil animation være den store UI-trend i 2015?
Et spekulativt stykke med en god, hvis kort, forklaring på nogle af animations vejledende principper.
Animationens rolle i webdesign
Et andet stykke med enkle, grundlæggende råd. Det er kort og enkelt, men måske værd at genlæse, hver gang du skal lave en vigtig animationsrelateret beslutning. Tænk på det som et snydeark for at holde perspektiv.
The State of Animation 2014
Et glimrende overblik over, hvordan web animation (mere eller mindre) i øjeblikket bliver udført af Rachel Nabors. Du vil se hendes navn her et par gange, da hun er noget af en ekspert på emnet.
Fem måder at ansætte ansvarligt på
En anden fantastisk artikel af Rachel Nabors (jeg fortalte dig at du ville se mere af hendes ting ...). I den her går hun over fem måder til at tilføje animation til dit arbejde uden at fremmedgøre dine brugere.
Vejledninger
Få dine keyframes her! Få flere CSS-egenskaber, end du nogensinde troede, mulig / nødvendigt. Lær forskellen mellem easeIn og easeOut - Jeg ved, jeg måtte se den op.
4 enkle CSS3 animationstutorials
Spring introen og gå direkte til de gode ting, hvis det er den måde du arbejder på. Jeg har inkluderet en hel del introduktionsundervisning nedenfor. Hvis du hellere vil komme direkte til nogle grundlæggende kode, skal du starte her.
En Begynder Introduktion til CSS Animation
Præcis hvad det står i titlen. Så længe du har en grundlæggende viden om HTML og CSS, kan du følge denne vejledning og få et kendskab til CSS-baseret animation.
Guide til CSS-animation: Principper og eksempler
Smashing Magazine tager sine læsere gennem en række grundlæggende animationer. Det er simpelt, men værdifuld viden.
Flashless Animation
En anden god introduktion til CSS animation, skrevet af den evigt fantastiske Rachel Nabors. Ja, det er fra 2012, men den eneste forskel mellem da og nu er, at den teknik, hun leverer, har mere browser support.
Codrops tutorials
Jeg kan ikke, og det betyder jeg seriøst, jeg kan simpelthen ikke anbefale gutterne på Codrops nok. De har lavet mange eksempler, beviser på koncepter, ideopsamlinger og ja, selvstudier. De elsker animation, og de gør meget for at dele den kærlighed.
Her er blot et par af de animationsrelaterede tutorials, som de har oprettet:
- Tilted Content Slideshow
- Side preloading effekt
- Sliding Header Layout
- Playful Trampoline Effect
- Sådan oprettes (animeret) tekstfyldninger
CSS3 Overgange, Transformer, Animation, Filtre og meget mere!
En interaktiv, dybtgående tutorial med levende masser af levende eksempler. Kom her, når du er færdig med de mest grundlæggende tutorials. Det giver dig masser af ideer til at øve med.
Overgange & Animationer
En guide til simpel CSS animation med særlig fokus på overgange og overgangsegenskaber.
Skakning op på nettet med CSS3 (Sådan laver Links Shake)
En tutorial med vægt på rystende ting. Jeg mener, der går du.
High Performance Animationer
Denne tutorial, medforfattet af den meget elskede Paul Lewis og Paul Irish, fokuserer på, hvordan man kan animere ting på en måde, der ikke sænker browseren. Da dette kan være særligt vigtigt på mobile enheder, er det meget værd at læse.
Tutorial: Brug animation-fill-mode i dine CSS-animationer
Efter at have lært så meget om, hvordan man får tingene til at bevæge sig, kan det være en god idé at lære om opførelsen af objekter, som enten ikke er flyttet endnu, eller lige har afsluttet deres animation. Nogle gange kan stylingen blive vanskelig, og det er her, hvor animation-fill-mode kommer ind.
Keyframe Animation Syntax
Et stykke udgivet af den altid hjælpsomme css-tricks.com. Kan du ikke huske, hvordan man laver disse keyframe ting gør hvad du vil? Bogmærke dette, og stop med at bekymre dig om det.
Et kig på: Cubic-Bezier I CSS3 Overgang
Dette handler om timing. Jeg mener, den animerede timing af din animation. Mere specifikt handler det hele om at bruge Bezier-kurven for at få din animationstidspunkt lige præcis.
Flip stuff!
Jeg fandt to forskellige fantastiske tutorials om hvordan man laver flip animationer. Hver bringer en anden tilgang til bordet, og nogle ekstramateriale, som den anden ikke gør. Så i stedet for bare at tænke mig, har jeg inkluderet dem begge.
Opret en CSS Flipping Animation
CSS Transitions, Transforms & Animations - Flipping Card
Animerer CSS3 Gradienter
De fleste animationstutorials antager, at du vil animere en objekts geometri eller position på siden. Denne vil lære dig at animere hvad der er inde i dem ... i dette tilfælde en gradient.