UI-animasjonsprinsipper: Disney is Dead

Fotografi ble spådd å være død av maleri (tidlig Daguerreotype)

(Hvis du vil motta artiklene mine om UI-animasjon via e-post og bli lagt til i nyhetsbrevet, klikk her.)

Et nytt medium

Da Paul Delaroche møtte en Daguerreotype en gang rundt 1839, erklærte han berømt: "Fra i dag er maleri død!"

Fram til den tiden var den eneste måten å visuelt dokumentere den ytre verden gjennom bruk av et medium påført på en overflate for hånd. Århundrer med håndverk på tvers av ulike fagområder hadde resultert i oppdagelsen av en rekke prinsipper og teknikker på tvers av ulike medier. På tvers av kulturer, og etter hvert som epoke utviklet seg, utviklet stilen og det visuelle språket for hvordan visuelle representasjoner ‘skal se ut’ - de originale designmønstrene.

Tidlige fotografer, som forsøkte å få bildene sine til å ligne dagens populære malerier, brukte ofte en kombinasjon av belysning og utskriftsteknikker for å myke opp bildene og skape et malerisk utseende. Deres forståelse av hva fotografiet var i stand til, var intimt knyttet, påvirket og begrenset av deres forståelse av maleriets verden.

Det tok nesten hundre år før fotografer som Ansel Adams, Imogen Cunningham, Edward Weston og andre i 'Group f / 64' gjorde betydningsfulle inngrep i det visuelle språket som skiller fotografering fra å male som et unikt medium - med sitt eget visuelle språk og prinsipper, og på den måten revolusjonerte de fotografiets domene.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney løste et annet problem

Heldigvis befinner vi oss ved en slik revolusjon innen UI-animasjon.

I 1981 ga Ollie Johnston og Frank Thomas ut Disney Animation: The Illusion of Life, og introduserte det som nå er kjent som '12 grunnleggende animasjonsprinsipper. 'Disse prinsippene løste problemet med å skape' realistisk bevegelse 'som oppstår når organiske kropper bevege seg og reagere i fysisk rom (prinsippene dekker også ting som emosjonell timing og karakterappell).

UI-animasjon, som en del av brukeropplevelsen, er knapt 20 år gammel og fremdeles i barndommen. Da domenet til UI-animasjonen dukket opp, var de eneste tilgjengelige verktøyene for å beskrive hvordan brukergrensesnittet oppfører seg i tid, de 12 animasjonsprinsippene. Mye som hvor tidlige fotografer forsøkte å forstå fotografering gjennom maleriets regler, forsøkte designere å forstå UI-animasjon gjennom reglene for Disney-animasjon.

På overflaten er dette forståelig da det er en viss grad av overlapping. Enklere bevegelse, et av de 12 animasjonsprinsippene, forsterker en følelse av 'rettighet' gjennom bevegelse, noe som er kritisk for brukeropplevelsen. Uten å lette føles UI-animasjonen klumpete og rart.

Full oppdeling er tydelig når man ser nærmere på de 12 prinsippene i sammenheng med brukergrensesnittet.

Squash and Stretch gir objekter en vekt og fleksibilitet, noe som er unntaket i stedet for regelen i brukergrensesnitt.

Anticipation skaper en følelse av at noe er i ferd med å skje og også er nesten ubrukelig når det gjelder brukeropplevelser. Det fungerer på en begrenset måte for utvalgte mikrointeraksjoner og knappetilstander.

Staging refererer til animasjonen, som gir mening for en Disney-tegneserie fordi karakterene hele tiden er i bevegelse, men i en brukeropplevelse blir dette bare tenkt som 'designet.'

Rett framover og Pose to Pose er mindre prinsipper enn tilnærminger til selve tegne / animasjonsprosessen: du kan lage en mer flytende animasjon hvis du tegner kontinuerlige rammer, eller bruker posering for å posere for å sette opp noen nøkkelrammer og fylle ut hullene . I brukeropplevelser blir denne prosessen knapt engang oversatt, med mindre det skjer faktisk ramme for ramme-animasjon. Som standard, uansett verktøyet du bruker, opprettes nesten all brukergrensesnitt-animasjon ved hjelp av nøkkelrammer.

Følg gjennom og overlappende handling har å gjøre med å følge lovene om fysikk og treghet, og hvordan fysiske kropper reagerer, som begge har lite å gjøre med brukergrensesnitt, med mindre du regner med neste prinsipp, som er det mest nyttige i gruppen .

Slow In and Slow Out sier at objekter trenger tid for å få fart og sakte. Dette er ekstremt relevant, ettersom 100% av UI-animasjonen bør bruke dette prinsippet. Det blir ofte referert til som "lettelse", og er ekstremt viktig.

Arc (nødvendig for å reprodusere fysisk bevegelse) er nesten ubrukelig for UI-animasjon, og er også unntaket snarere enn regelen.

Sekundær handling er nyttig og er flott for skjermoverganger og for å sette opp visuelt hierarki.

Timing er relevant når jeg tegner tegn, men i brukergrensesnitt, der bevegelsen må være skarp for å føle respons, synes jeg det er bedre å stole på å lette på å utforme følelsen av interaksjonen, heller varigheten.

Overdrivelse knytter seg til graden av realisme eller karikatur, igjen, neppe relevant for UI-animasjon, ettersom designet er forhåndsbestemt.

Solid tegning er også for det meste mye fordi UI-animasjon omhandler oppførselen til grensesnittobjekter over tid, ikke selve utformingen av selve objektene.

Appell snakker også til den visuelle behandlingen, igjen ikke relevant for hvordan grensesnittet oppfører seg over tid.

For å konkludere

Så spørsmålet gjenstår: hvorfor beskriver ikke de 12 grunnleggende prinsippene for animasjon UI-animasjon nøyaktig?

Fordelingen kan best forstås av den enkle observasjonen: UI-animasjon overholder ikke de samme reglene og har heller ikke de samme prinsippene som organiske kropper som beveger seg i det fysiske rommet. UI-animasjon er et distinkt medium, så distinkt som fotografi er fra maleri - med overlappende egenskaper (både fotografering og maleri er statiske visuelle komposisjoner som er avhengige av lys og komposisjon), men er grunnleggende forskjellige medier.

Enkelt sagt, de 12 grunnleggende prinsippene for animasjon gjelder ikke for UI-animasjon fordi de løser for et annet problem.

I løpet av de neste flere artiklene vil jeg undersøke hva disse UI-animasjonsprinsippet er, hvilket problem UI-animasjonsprinsippene løser for, hvordan prinsipper er forskjellige fra teknikker, og hvordan du kan designe og bruke UI-animasjon i nåværende og fremtidige prosjekter for å påvirke brukervennlighet og skape mer overbevisende og effektive brukeropplevelser.