En introduksjon til animasjon i nettdesign
Animasjon er ikke bare for tegneserier lenger. Fra bevegelser på fullskjerm til små sveveeffekter dukker det opp berøringer av animasjon overalt. Animasjon er trendy, morsom og brukervennlig.
Og hindringene for å bruke animasjon har begynt å falle. Med de fleste brukere på høyhastighetsforbindelser og det enkle å lage alt fra enkle bevegelser eller en tullete gif til flere minutters action, har animasjoner blitt praktiske og nyttige verktøy for webdesign.
Utforsk Envato Elements
Grunnleggende om animasjon
Animasjon skjer når noe skapt i stillhet eller todimensjonal form blir "brakt til liv" og ser ut til å bevege seg på en måte som følger fysikkens lover. Det er slik en tegneseriefigur går over skjermen eller hvordan et appikon spretter som en ball mens det lastes på skrivebordet på Mac-en.
Et av ordene som nærmest er synonymt med animasjon er Disney. På begynnelsen av 1980-tallet skrev to av selskapenes beste animatører en bok som beskriver de 12 prinsippene for animasjon. “Illusion of Life: Disney Animation” av Frank Thomas og Ollie Johnston gir fortsatt rammene for animasjon i dag.
- Squash og strekk
- Forventning
- staging
- Rett fram og til og med å posere
- Følg gjennom og overlappende handling
- Sakte inn og sakte ut
- Bue
- Sekundær handling
- timing
- overdrivelse
- Solid tegning
- Anke
Webanimasjoner lagres ofte som GIF, CSS, SVG, WebGL eller video. De kan være alt fra en enkel understreking som vises når du svever over et ord til en fullskjerms video eller bakgrunnsbilde. Som med all annen designteknikk, kan animasjoner være subtile, eller de kan være i ansiktet og vanskelig å unngå.
Emerging Trend for 2017
Animasjon i webdesign er noe vi begynner på hver dag. Nøkkelen til animasjon som designtrend er moderering. Små, enkle animasjoner er engasjerende og interessante; brukeren kan ikke engang tenke på at de i det hele tatt er en animasjon. Storstilt animasjoner kan være en interessant visuell som trekker deg inn i designen. Men hvis du begynner å blande sammen for mange forskjellige bevegelige effekter, kan det føre til fullstendig kaos.
Det som gjør animasjon trendy er realisme. I dagens designlandskap med så mange flate og minimale design, trenger brukere flere ledetråder for å fortelle dem hva de skal gjøre. Enkle animasjonsbiter kan guide brukeren uten å endre det estetiske. Det hjelper deg med å legge til instruksjoner og ordre for å designe ordninger som kan være for enkle visuelt til å gi nok retning for brukerne. I dette tilfellet skaper animasjon et lykkelig medium mellom nedstrippet enkelhet og brukervennlighet.
Den andre medvirkende faktoren til denne trenden er tilgang til verktøy på baksiden og brukerendene av designen. Du trenger ikke Flash for mer kompliserte animasjoner lenger. (Og hvis du fortsatt bygger i Flash, er det på tide å stoppe.) Det kan gjøres på en rekke andre måter. Dagens animasjoner ikke ødelegger nettsteder eller webservere, noe som gjør effekter raske å laste for brukere, og med høyhastighets internettilgang animasjoner ikke hoppe over å sitte fast midtveis i hendelsessyklusen.
Store vs. små animasjoner
Når det gjelder animasjon for nettet, faller det i to like enkle å forstå kategorier: store og små. (Du kan sikkert gjette hvordan disse ser ut.)
Store animasjoner er de som har en skala til seg. Ofte i form av en video med en kjøretid, fyller animasjoner i stor skala en betydelig del av skjermen og er karakteristiske for en kortfilm. Disse animasjonene fungerer som et samlingspunkt i det generelle designet. Brukere trenger ofte ikke å utføre noen handling for å se animasjonen i bevegelse. Hvis du følger nøye med på Studio Meta-nettstedet, zoomer hvert av de store bildene når du leser kopien.
Små animasjoner er de små bitene og bitene du oppdager når du begynner å samhandle med et nettsted. Disse divotene kan være i form av svevetilstander, små ornamentikkbiter eller bruksanvisninger eller verktøy. Små animasjoner er en aksent som bidrar til den generelle estetikken, men som sannsynligvis ikke vil være fokus for designen. På nettstedet til Henry Brown er den enkle animasjonen at hvis du ser nøye, blinker faktisk øynene på illustrasjonen.
Når skal jeg bruke animasjon
Problemet med hver trend, inkludert denne, er å vite når du skal bruke den. Animasjon kan være et stort lite triks for designverktøysettet ditt, men er ikke for hvert prosjekt. Animasjonen skal være jevn og sømløs, ikke hoppende eller mekanisk. Det må tjene et formål for brukeren og ikke komme i veien for innholdet.
Den viktigste grunnen til å bruke animasjon er å øke brukervennligheten. Enkle animasjoner kan være gode veiledningsverktøy for å hjelpe folk til å forstå hvilke knapper de skal klikke på eller hvor de skal gå videre på kartet til et nettsted. Mange designere som bruker komplekse rulleeffekter kobler en enkel animasjon til et brukerverktøy for å bla eller klikke. (Dette inkluderer alt fra et enkelt sprettikon eller ord som dukker opp "si ned.")
Brukervennlighet kommer i noen få former:
- Kommunikasjonsfunksjon eller hvordan du bruker et nettsted
- Vis endring, for eksempel å fylle ut et skjema riktig eller utheve at et element er klikkbart
- Lag flyt eller direkte brukere til en oppfordring til handling
Den andre grunnen til å bruke animasjon er en estetisk. Animasjon kan være en flott "dekorasjon." Noen ganger er målet med et animert element rent visuelt og det er en akseptabel bruk. Denne dekorative animasjonen kan hjelpe deg med å fortelle en historie eller skape en emosjonell forbindelse mellom grensesnittet og brukeren. Hensikten med en animasjon kan være å vekke visuell interesse og holde en bruker engasjert med nettstedet ditt i en lengre periode.
Når du lager en rent visuell animasjon, vurder hva den skal gjøre. Tenk på tilkoblingen du vil at en bruker skal ha. Er det meningen at det skal være morsomt eller overraskende? Er det litt unikt innhold som er designet for deling? Til og med et rent visuelt bør ha et mål.
ressurser
Klar til å begynne å animere? Her er noen ressurser for videre lesing og verktøy for å hjelpe deg i gang.
- Illusion of Life-videoen viser hvert av de 12 prinsippene på en måte som er lett å forstå.
- ”Webanimasjon på jobben” fra A List Apart er en god ressurs om hva som gjør animasjon til å fungere.
- "Nybegynnerens introduksjon til CSS-animasjon" viser deg hvordan du gjør en firkant til en sirkel ved hjelp av CSS-egenskaper.
- Elastiske animerte SVG-elementer er en tutorial om hvordan du integrerer og animerer en SVG-komponent.
- Art of UI Animations-presentasjonen av Mark Geyer bruker animasjon for å forklare konseptene.
- ”15 Topp HTML5-verktøy for å lage avansert animasjon med” er et flott trinn og listen over verktøy hvis du allerede har forstått det grunnleggende.
- Animatorens Survival Kit lærer grunnleggende prinsipper som gjelder alle former for animasjon.
Konklusjon
Når det gjelder animasjon, er tommelfingerregelen denne: God animasjon vil gjøre brukerens opplevelse bedre. Dette kan være i form av en emosjonell forbindelse - for eksempel en morsom, positiv opplevelse - eller ved å gjøre et nettsted enklere å bruke.
Animasjon er en morsom teknikk som er blitt mye mer standard for en rekke bruksområder. Hvis du leter etter inspirasjon, må du huske å gå gjennom denne artikkelen og klikke på lenkene til de visuelle eksemplene i hele, besøke nettstedene og leke med de animerte funksjonene der. Ha det gøy!
