Prinsipper for motion design for deg som ikke animerer

Prinsipper for motion design er tommelfingerreglene som får bevegelse til å føles naturlig fremfor tilfeldig. Klassisk figuranimasjon har sine berømte tolv, beskrevet av Disney-animatørene Frank Thomas og Ollie Johnston i The Illusion of Life. For designarbeid, som innlegg, nettsider, logoer og presentasjoner, gjør fem av dem nesten hele jobben: formål, timing, easing, hierarki og måtehold. Du kan bruke dem uten noen gang å åpne et animasjonsprogram.

Formål: hver bevegelse bør ha en oppgave

Bevegelse er høylytt. Alt som beveger seg, trekker til seg blikket, så å bevege noe er å påstå at det er viktig akkurat nå. Før du animerer, setter du navn på oppgaven. Klarer du ikke det, lar du det stå stille.

Timing: hvor lang tid bevegelse bør ta

Varighet er prinsippet de fleste bommer på, vanligvis ved å være for trege på små ting og for raske på store. To regler hjelper. Små, hyppige bevegelser bør være raske, fordi folk ser dem hele tiden. Bevegelser som går lenger eller endrer mer, bør ta lengre tid, fordi øyet trenger tid til å følge med.

En nyttig test: legger folk merke til selve animasjonen i stedet for det den viser, er den for langsom eller for stor. Går de helt glipp av endringen, er den for rask.

Easing: hvorfor ingenting bør bevege seg i konstant fart

Ekte gjenstander øker og senker farten. Bevegelse i én konstant hastighet, kalt lineær, virker mekanisk fordi ingenting i verden beveger seg slik. Easing-kurver legger til akselerasjon og nedbremsing, og det er enkelt å velge riktig når du kjenner tre tilfeller.

• Inn: ease out. Kom raskt og fall mykt til ro, som en bil som stanser. De fleste entreer bruker dette.
• Ut: ease in. Start mykt og fyk av gårde. Sortier kan også være kortere enn entreer.
• Bevegelse innenfor rammen: ease in og out. Start og stopp mykt.
• Looper og rotasjoner: lineær. Kontinuerlig bevegelse bør holde jevnt tempo, ellers ser den ut til å nøle i skjøten.

.panel-enter {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);  /* ease out */
}
.panel-leave {
  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1);  /* ease in, and shorter */
}
.background-drift {
  animation: drift 20s linear infinite;                    /* steady loop */
}

Hierarki: beveg det viktige først

Bevegelse skaper en leserekkefølge, akkurat som størrelse og vekt gjør i et stillestående design. Det som beveger seg først, leses først. Når flere elementer animeres, forskyver du dem i rekkefølge etter viktighet, med et kort opphold på rundt 50 til 150 millisekunder mellom hvert, og lar bare ett element lede om gangen. Visuelt hierarki tar for seg den stillestående versjonen av samme idé.

1. 1

   Bakgrunnen faller til ro

   Flaten beveger seg allerede sakte når innlegget dukker opp. Den setter stemningen uten å be om å bli lest.

2. 2

   Overskriften kommer inn

   Én tydelig entré, med ease out, på under ett sekund.

3. 3

   Støttelinjene følger

   Etiketten og detaljene kommer rett etter, i leserekkefølge, med en mindre bevegelse.

4. 4

   Alt står stille

   Ordene stopper og står i ro lenge nok til å bli lest. Bare bakgrunnen fortsetter å bevege seg.

Måtehold: bruk mindre bevegelse enn du tror

Stillhet er det som får bevegelse til å bety noe. Beveger alt seg, skiller ingenting seg ut, og designet virker urolig. Velg én ledende bevegelse per arbeid, hold avstandene korte, og la ordene stå stille når de har kommet på plass. Måtehold handler også om mennesker: noen opplever bevegelse som ubehagelig eller blir til og med kvalme, så alt du lager, bør fungere med bevegelsen slått av. Redusert bevegelse forklarer hvordan du planlegger for det.

Konsekvens: et lite bevegelsessystem

Merkevarer holder farger og fonter konsekvente, og bevegelse fortjener samme omsorg. Skriv ned et bitte lite system og bruk det om igjen: tre varigheter, to eller tre easing-kurver og én fast bevegelse for bakgrunner. Det hindrer at hvert nytt arbeid finner opp sin egen fart, og det gjør bevegelsen din gjenkjennelig slik bevegelse for stillestående merkevarer beskriver.

:root {
  --motion-quick: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-quick: 1ms;
    --motion-base: 1ms;
    --motion-slow: 1ms;
  }
}

Bruk de samme prinsippene når du animerer en logo, et innlegg eller en toppseksjon på et nettsted. Animerte logoer og animerte innlegg viser dem i bruk.