Animasjoner
Animasjon er et kraftig verktøy som effektivt veileder brukere og styrer oppmerksomheten mot det essensielle. Gjennom å skape sømløse overganger tilfører animasjon en moderne dimensjon til vår visuelle profil. Vi bruker animasjon for å skape særpreg som gir en helhetlig brukeropplevelse, kamuflere nedlastningstid og skape fokus i brukergrensesnittet.
Animasjonshastighet
Animasjonshastighet refererer til hvor raskt eller sakte bevegelsene i en animasjon utføres. Det påvirker opplevelsen av animasjonen og brukerens persepsjon. Riktig animasjonshastighet er avgjørende for å oppnå ønsket effekt: for rask animasjon kan virke kaotisk eller forvirrende, mens for treg animasjon kan føles kjedelig eller ineffektiv. Tilpasning av animasjonshastigheten er en viktig designdel, og det bør balanseres for å gi en smidig, engasjerende og brukervennlig opplevelse
Animate-short (100 ms)
En rask animasjonshastighet på 100 millisekunder bidrar til å opprettholde flyt i brukeropplevelsen, samtidig som den gir en følelse av umiddelbar respons, noe som forbedrer interaktiviteten og opplevelsen av responsivt design.
Animate-medium (300ms)
Animate-medium (300ms) En animasjonshastighet på 300 millisekunder gir en balansert opplevelse av respons og smidighet i brukergrensesnittet. Den moderate hastigheten tillater jevne overganger og gir brukerne tilstrekkelig tid til å registrere endringer uten å oppleve forsinkelse.
Animate-long (600 ms)
Animate-long (600 ms) En animasjonshastighet på 600 millisekunder passer godt for lengre animasjoner, da den gir tilstrekkelig tid til å tydelig formidle komplekse eller detaljerte bevegelser.
Den langsommere hastigheten gir brukerne muligheten til å absorbere informasjonen gradvis uten å føle seg overveldet.
Valget av animasjonshastighet bør tilpasses den spesifikke konteksten, bruksområdet og den ønskede brukeropplevelsen for å sikre en harmonisk og engasjerende interaksjon.
Animering i Figma
Komponenter fra deisgnsystemet er allerede ferdig animert i forskjellige states. Skal du lage andre animasjoner anbefales det å velge en av tre hastigheter i forhold til komplekisteten.
All animasjon skal settes som enten; dissolve, eller smart animate (Ease in & out) + duration (100ms, 300ms eller 600ms).
Les om fler designelementer på