UI-animationsprincipper: Disney er død

Fotografi blev forudsagt at være maleriets død (tidlig Daguerreotype)

(Hvis du vil modtage mine artikler om UI-animation via e-mail og blive føjet til mit nyhedsbrev, skal du klikke her.)

Et nyt medium

Da Paul Delaroche stødte på en Daguerreotype engang omkring 1839, erklærede han berømt: ”Fra i dag er maleri død!”

Indtil den tid var den eneste måde at visuelt dokumentere den eksterne verden ved at bruge et medium, der blev anvendt på en overflade for hånd. Århundreder med håndværk på tværs af forskellige discipliner havde resulteret i opdagelsen af ​​adskillige principper og teknikker på tværs af forskellige medier. På tværs af kulturer, og som epokerne skred frem, udviklede stilen og det visuelle sprog for, hvordan visuelle repræsentationer 'skulle se ud' - de originale designmønstre.

Tidlige fotografer, der forsøgte at få deres billeder til at ligne dagens populære malerier, brugte ofte en kombination af belysning og udskrivningsteknikker til at blødgøre deres billeder og skabe et malerisk udseende. Deres forståelse af, hvad fotograferingsmediet var i stand til, var tæt forbundet, påvirket og begrænset af deres forståelse af maleriets verden.

Det tog næsten hundrede år, før fotografer som Ansel Adams, Imogen Cunningham, Edward Weston og andre i 'Gruppe f / 64' gjorde betydelige indgreb i det visuelle sprog, der adskiller fotografering fra at male som et unikt medium - med sit eget visuelle sprog og principper, og dermed revolutionerede de fotografiets domæne.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney løste et andet problem

Heldigvis befinder vi os ved en sådan revolution inden for UI-animation.

I 1981 frigav Ollie Johnston og Frank Thomas Disney Animation: The Illusion of Life og introducerede det, der nu er kendt som '12 grundlæggende principper for animation. 'Disse principper løste problemet med, hvordan man skaber' realistisk bevægelse ', der opstår, når organiske kroppe bevæge sig og reagere i det fysiske rum (principperne dækker også ting som følelsesmæssig timing og karakter appel).

UI-animation, som en del af brugeroplevelsen er knap 20 år gammel og er stadig i sin spædbarn. Da domænet for UI-animation opstod, var de eneste tilgængelige værktøjer til at beskrive, hvordan brugergrænsefladen opfører sig i tiden, de 12 animationsprincipper. Meget ligesom, hvor tidlige fotografer forsøgte at forstå fotografering gennem maleriets regler, forsøgte designere at forstå UI-animation gennem reglerne for Disney-animation.

På overfladen er dette forståeligt, da der er en vis overlapning. Lettere bevægelser, et af de 12 animationsprincipper, forstærker en følelse af 'rigtighed' gennem bevægelse, noget som er kritisk for brugeroplevelsen. Uden at lette føles UI-animationen klodset og underlig.

Den fulde opdeling er åbenbar, når man ser nærmere på de 12 principper i forbindelse med brugergrænsefladen.

Squash og Stretch giver objekter en vægt og fleksibilitet, noget der er undtagelsen snarere end reglen i brugergrænseflader.

Anticipation skaber den fornemmelse, at noget er ved at ske, og er også næsten ubrugelig, når det kommer til brugeroplevelser. Det fungerer kun på en begrænset måde til udvalgte mikrointeraktioner og knaptilstande.

Iscenesættelse refererer til layoutet af animationen, der giver mening for en Disney-tegneserie, fordi figurerne konstant er i bevægelse, men i en brugeroplevelse betragtes dette bare som 'designet'.

Straight Ahead Action og Pose to Pose er mindre principper end tilgange til den egentlige tegne / animationsproces: du kan oprette en mere flydende animation, hvis du tegner kontinuerlige rammer, eller bruger posering til at posere til at opsætte et par nøglerammer og udfylde hullerne . I brugeroplevelser oversættes denne proces næppe engang, medmindre der sker faktisk ramme for ramme-animation. Som standard oprettes næsten al UI-animation ved hjælp af nøglerammer, uanset hvilket værktøj du bruger.

Følg gennem og overlappende handling har at gøre med at følge fysikken og inerti-lovene, og hvordan fysiske organer reagerer, som begge har lidt at gøre med brugergrænseflader, medmindre du regner med det næste princip, som er det mest nyttige i gruppen .

Langsom ind og langsom ud siger, at objekter har brug for tid til at fremskynde og bremse. Dette er yderst relevant, da 100% af UI-animationen skal anvende dette princip. Det kaldes almindeligvis 'lettelse' og er ekstremt vigtigt.

Buen (kræves til gengivelse af fysisk bevægelse) er næsten ubrugelig til UI-animation, og er også undtagelsen snarere end reglen.

Sekundær handling er nyttig og er fantastisk til skærmovergange og opsætning af visuelt hierarki.

Timing er relevant, når jeg tegner tegn, men i brugergrænseflader, hvor bevægelsen skal være skarp for at føle respons, finder jeg det bedre at stole på at lette til at designe følelsen af ​​interaktionen, snarere varigheden.

Overdrivelse vedrører graden af ​​realisme eller karikatur, igen, næppe relevant for UI-animation, da designet er forudbestemt.

Fast tegning er ligeledes for det meste skræddersyet, da UI-animation beskæftiger sig med adfærd fra interfaceobjekter over tid, ikke selve designen af ​​selve objekterne.

Appel taler også til den visuelle behandling, igen ikke relevant for, hvordan grænsefladen opfører sig over tid.

Afslutningsvis

Så spørgsmålet er fortsat: hvorfor beskriver ikke de 12 grundlæggende principper for animation UI-animation nøjagtigt?

Opdelingen kan bedst forstås ved den enkle observation: UI-animation overholder ikke de samme regler og har heller ikke de samme principper som organiske organer, der bevæger sig i det fysiske rum. UI-animation er et tydeligt medium, så forskelligt som fotografering er fra maleri - med overlappende egenskaber (både fotografering og maleri er statiske visuelle kompositioner, der er afhængige af lys og komposition), men er grundlæggende forskellige medier.

Enkelt sagt, de 12 grundlæggende principper for animation gælder ikke for UI-animation, fordi de løser for et andet problem.

I løbet af de næste flere artikler vil jeg undersøge, hvad disse UI-animationsprincipper er, hvilke problemer UI-animationsprincipper løser for, hvordan principper adskiller sig fra teknikker, og hvordan du kan designe og bruge UI-animation i dine nuværende og fremtidige projekter for at påvirke anvendeligheden og skabe mere overbevisende og effektive brugeroplevelser.