Animasjon

Animasjon kan bidra til å skape minneverdige og overbevisende merkevareopplevelser. Det kan vise oss hvordan ting fungerer og hvor vi skal fokusere. Det kan berolige eller begeistre oss. Det kan forene merkevareuttrykk på tvers av plattformer. Det kan engasjere og koble sammen på et følelsesmessig nivå for å hjelpe kundene våre å oppleve merkevaren på et helt nytt nivå.
Idéen er å skape konsistens og gjenkjennelse på tvers av plattformer og formater gjennom bevegelse.

Dette er den primære modusen for å animere paneler. Dynamisk modus introduserer nytt innhold ved å overlappe det forrige panelet og skyve panelet under fremover, fra venstre til høyre. Alle paneler er inntrodusert inn fra utsiden av rammen. Dynamisk modus er best egnet for plattformer der det er god tid tilgjengelig for å formidle budskap. Kommunikasjon som er ment å bygge merkevaregjenkjenning bør alltid bruke dynamisk modus.

Dette er den sekundære modusen for å animere paneler. Tilkoblet modus introduserer nytt innhold ved å være koblet til hver panel sin venstre og høyre side kant på liggende formater, og til topp og bunn kant på høye formater. Alle paneler er inntrodusert inn fra utsiden av rammen. Tilkoblet modus er best egnet for plattformer der det er begrenset tid tilgjengelig for å formidle budskap, for eksempel taktiske annonser.

Diagrammene viser hvordan “Easing” påvirker en eiendom over tid. Unngå subtile easing funksjoner som Sine og Quad. Easing funksjonene "EXPO" og "QUART" gir energisk og jevn easing som fungerer med motion systemet vårt.

Ikke bruk easing funksjoner som overdriver og simulerer f.eks. sprett og elastisitet.

Alle animasjoner følger:
25 FPS Frame rate. FPS (Frames Per Second)
Lengde 1 sekund = 25 FPS

Animasjonshastigheten som brukes til alle våre designelementer bør føles energisk. Vi anbefaler å holde standard animasjonsvarighet for designelementer mellom 15 og 25 FPS, avhengig av innholdets behov.

Animasjonshastigheten kan justeres for å være litt roligere i visse tilfeller der innholdet krever det. I dette tilfellet anbefaler vi å doble standard animasjonsvarighet.

Se eget kapittel for retningslinjer for animasjon i Zuuvi.

På liggende formater bør panelene følge retningen fra venstre til høyre, og på stående formater bør panelene følge retningen fra bunnen opp.

For å skape en naturlig flyt, bør alle designelementer følge en retning basert på formatet og i retningen panelene beveger seg i. Hvis panelene ikke skal animeres, f.eks. på grunn av lite tilgjengelig tid så bør designelementene fremdeles følge en retning basert på formatet.

På kvadratisk format kan elementer bevege seg horisontalt eller vertikalt, men fremdeles kun følge en retning.

Tommelfingerregel: Hver oppsett bør starte med å animere panelene.

Overskrift tekst nivå blir animert ord for ord med venstre til høyre retning på liggende formater, og fra bunnen opp på stående formater med gjennomsiktighet effekt som går fra 0 til 100%.

Mengdetekst nivå blir animert som en tekstblokk med venstre til høyre retning på liggende formater, og fra bunnen og opp på stående formater med gjennomsiktighet effekt som går fra 0 til 100%.

I layout med både overskrift og brødtekst nivå er det viktig å følge layout hierarkiet i riktig rekkefølge. Overskriften bør alltid bli animert først, og mengdeteksten deretter.

Før du animerer highlighter nivåene er det anbefalt å lese retningslinjer for hvordan highlighter skal brukes. Se separat kapittel.

Highlighter overskrift og highlighter tekst nivå med bare en eller flere linjer blir animert som en tekstblokk fra venstre til høyre retning på liggende formater, og fra bunn til topp på stående formater med gjennomsiktighet effekt som går fra 0 til 100 %.

CTA-knapper og elementer blir animert fra venstre til høyre.
CTA bør først animeres inn og lande på plass før den kan begynne å animere igjen som en “loop”. I tilfeller hvor CTA er synlig fra begynnelsen av en komposisjon så trenger den kun å animeres som en “loop”.
Animerte CTA-er passer best til taktiske annonser.

Det er forskjellige animasjonsregler som gjelder for CTA knyttet til det digitale designsystemet for nettsider.