Princípy animácie používateľského rozhrania: Disney je mŕtva

Fotografia bola predpovedaná ako smrť maľby (skorý Daguerreotype)

(Ak chcete dostávať moje články o animácii používateľského rozhrania e-mailom a pridať sa k môjmu informačnému bulletinu, kliknite sem.)

Nové médium

Keď sa Paul Delaroche niekedy okolo roku 1839 stretol s Daguerreotypom, skvele vyhlásil: „Od dnešného dňa je maľba mŕtva!“

Dovtedy bol jediný spôsob vizuálneho zdokumentovania vonkajšieho sveta prostredníctvom použitia média aplikovaného na povrch ručne. Po stáročiach remeselného spracovania v rôznych odboroch sa objavili početné princípy a techniky v rôznych médiách. V celej kultúre a v priebehu éry sa vyvinul štýl a vizuálny jazyk toho, ako by „vizuálne reprezentácie“ mali vyzerať - vyvinuli sa pôvodné vzory dizajnu.

Prví fotografi, ktorí sa snažili, aby sa ich obrázky podobali populárnym obrazom dňa, často používali kombináciu svetelných a tlačových techník na zjemnenie svojich obrázkov a vytvorenie maliarskeho vzhľadu. Ich chápanie toho, čo médium fotografie bolo schopné, bolo úzko spojené, ovplyvnené a obmedzené ich chápaním sveta maľby.

Trvalo takmer sto rokov, kým fotografi ako Ansel Adams, Imogen Cunningham, Edward Weston a ďalší v skupine „f / 64“ urobili významné vniknutie do vizuálneho jazyka, ktorý odlišuje fotografiu od maľby ako jedinečné médium - s vlastným vizuálnym jazyka a zásad, a tým revolucionalizovali oblasť fotografie.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney vyriešil iný problém

Našťastie sa nachádzame v takej revolúcii v animácii používateľského rozhrania.

V roku 1981 Ollie Johnston a Frank Thomas vydali Disney Animation: Illusion of Life a predstavili tzv. 12 základných princípov animácie. Tieto princípy vyriešili problém, ako vytvoriť „realistický pohyb“, ku ktorému dochádza v prípade organických telies. pohybovať sa a reagovať vo fyzickom priestore (zásady sa vzťahujú aj na veci, ako je emočné načasovanie a príťažlivosť charakteru).

Animácia používateľského rozhrania, ako súčasť používateľskej skúsenosti, má sotva 20 rokov a stále je v plienkach. Keď sa objavila doména animácie používateľského rozhrania, jedinými dostupnými nástrojmi na opis správania používateľského rozhrania v čase bolo 12 animačných princípov. Podobne ako sa začínajúci fotografi pokúšali porozumieť fotografii prostredníctvom pravidiel maľovania, aj návrhári sa pokúsili porozumieť animácii používateľského rozhrania prostredníctvom pravidiel animácie Disney.

Na povrchu je to pochopiteľné, pretože existuje určitý stupeň prekrývania. Uľahčený pohyb, jeden z 12 princípov animácie, posilňuje pocit „správnosti“ prostredníctvom pohybu, čo je rozhodujúce pre spokojnosť používateľa. Animácia používateľského rozhrania sa bez uvoľnenia cíti neohrabaná a čudná.

Úplné rozdelenie je zrejmé, keď sa bližšie pozrieme na 12 princípov v kontexte používateľského rozhrania.

Squash a Stretch dáva objektom váhu a flexibilitu, čo je skôr výnimkou ako pravidlom v používateľských rozhraniach.

Očakávanie vytvára pocit, že sa niečo deje a je takmer zbytočné, pokiaľ ide o skúsenosti používateľov. Funguje iba obmedzeným spôsobom pre vybrané mikro interakcie a stavy tlačidiel.

Inscenácia odkazuje na rozloženie animácie, čo má zmysel pre karikatúru Disney, pretože postavy sú neustále v pohybe, ale podľa užívateľskej skúsenosti sa to iba považuje za „dizajn“.

Priama predná akcia a Pose to Pose sú menej princípy ako prístupy k skutočnému procesu kreslenia / animácie: ak kreslíte súvislé snímky, môžete vytvoriť plynulejšiu animáciu alebo pomocou pózy predstavovať niekoľko kľúčových snímok a vyplniť medzery. , Podľa používateľských skúseností sa tento proces sotva prekladá, pokiaľ nenastane skutočná animácia snímok po snímke. V predvolenom nastavení, bez ohľadu na nástroj, ktorý používate, sa takmer všetky animácie používateľského rozhrania vytvárajú pomocou kľúčových snímok.

Akcie sledujúce a prekrývajúce sa musia súvisieť s dodržiavaním zákonov fyziky a zotrvačnosti a toho, ako reagujú fyzické telá, pričom obe z nich majú málo spoločného s používateľskými rozhraniami, pokiaľ sa nespoliehate na ďalší princíp, ktorý je v skupine najužitočnejší. ,

Slow In a Slow Out hovorí, že objekty potrebujú čas na zrýchlenie a spomalenie. Je to mimoriadne dôležité, pretože 100% animácií používateľského rozhrania by malo využívať tento princíp. Obyčajne sa označuje ako „uvoľnenie“ a je mimoriadne dôležité.

Oblúk (potrebný na reprodukciu fyzického pohybu) je pre animáciu používateľského rozhrania takmer zbytočný a je skôr výnimkou ako pravidlom.

Sekundárna akcia je užitočná a je vynikajúca pre prechody obrazovky a nastavenie vizuálnej hierarchie.

Načasovanie je dôležité pri kreslení znakov, ale v používateľských rozhraniach, kde musí byť pohyb ostrý, aby sa cítil citlivý, považujem za lepšie spoliehať sa na uľahčenie návrhu pocitu interakcie, skôr ako na trvanie.

Zveličovanie sa vzťahuje na stupeň realizmu alebo karikatúry, opäť ťažko súvisiaci s animáciou používateľského rozhrania, pretože dizajn je vopred určený.

Kreslenie plných plôch je väčšinou väčšinou nepravidelné, pretože animácia používateľského rozhrania sa zaoberá správaním sa objektov rozhrania v priebehu času, nie skutočným dizajnom samotných objektov.

Odvolanie tiež hovorí o vizuálnom zaobchádzaní, opäť nie je relevantné pre správanie sa rozhrania v priebehu času.

Na záver

Otázkou teda zostáva, prečo 12 základných princípov animácie presne neopisuje animáciu používateľského rozhrania?

Členenie možno najlepšie pochopiť jednoduchým pozorovaním: Animácia používateľského rozhrania nedodržiava rovnaké pravidlá ani rovnaké zásady ako organické telá pohybujúce sa vo fyzickom priestore. Animácia používateľského rozhrania je odlišné médium, rovnako ako fotografia pochádza z maľby - s prekrývajúcimi sa charakteristikami (fotografia aj maľba sú statické vizuálne kompozície závislé od svetla a kompozície), ale sú zásadne odlišné médiá.

Jednoducho povedané, 12 základných princípov animácie sa nevzťahuje na animáciu používateľského rozhrania, pretože riešia iný problém.

V nasledujúcich niekoľkých článkoch preskúmam, čo sú tieto princípy animácie používateľského rozhrania, aké problémové princípy animácie používateľského rozhrania riešia, ako sa princípy líšia od techník a ako môžete navrhovať a používať animáciu používateľského rozhrania vo svojich súčasných a budúcich projektoch, aby ovplyvnili použiteľnosť a vytvárať presvedčivejšie a efektívnejšie skúsenosti používateľov.