Principy animace uživatelského rozhraní: Disney je mrtvá

Fotografie byla předpovídána jako smrt malby (raný Daguerreotype)

(Pokud si přejete dostávat mé články o animaci uživatelského rozhraní e-mailem a přidat je do mého zpravodaje, klikněte sem.)

Nové médium

Když se Paul Delaroche někdy kolem roku 1839 setkal s Daguerreotypem, skvěle prohlásil: „Od dnešního dne je obraz mrtvý!“

Až do té doby byl jediný způsob, jak vizuálně dokumentovat vnější svět, pomocí ručního média aplikovaného na povrch. Po staletí řemeslného zpracování napříč různými obory se objevily četné principy a techniky napříč různými médii. V různých kulturách a v průběhu éry se vyvinul styl a vizuální jazyk toho, jak by „měly vypadat“ vizuální reprezentace - původní vzory designu.

První fotografové, kteří se snažili, aby se jejich obrazy podobaly populárním obrazům dne, často používali kombinaci světelných a tiskových technik ke změkčení svých obrázků a vytvoření malířského vzhledu. Jejich chápání toho, čeho bylo médium fotografie schopné, bylo důvěrně spojeno, ovlivněno a omezeno jejich chápáním světa malby.

Trvalo téměř sto let, než fotografové jako Ansel Adams, Imogen Cunningham, Edward Weston a další ve skupině „f / 64“ udělali významné vniknutí do vizuálního jazyka, který odlišuje fotografii od malby jako jedinečné médium - s vlastním vizuálním jazyk a principy, a tím revolucionizovali oblast fotografie.

Edward Weston, Imogen Cunningham, Ansel Adams

Disney vyřešil jiný problém

Naštěstí se nacházíme v takové revoluci v animaci uživatelského rozhraní.

V roce 1981 Ollie Johnston a Frank Thomas uvedli Disney Animation: Illusion of Life a představili tzv. „12 základních principů animace“. Tyto principy vyřešily problém, jak vytvořit „realistický pohyb“, ke kterému dochází, když organická těla pohybovat se a reagovat ve fyzickém prostoru (zásady se vztahují také na věci jako emoční načasování a přitažlivost charakteru).

Animace uživatelského rozhraní, jako součást uživatelské zkušenosti, je sotva 20 let a stále je v plenkách. Když se objevila doména animace uživatelského rozhraní, jediným dostupným nástrojem pro popis chování uživatelského rozhraní v čase bylo 12 animačních principů. Podobně jako časní fotografové se pokusili porozumět fotografii prostřednictvím pravidel malby, designéři se pokusili porozumět animaci uživatelského rozhraní prostřednictvím pravidel animace Disney.

Na povrchu je to pochopitelné, protože existuje určitý stupeň překrývání. Ulehčený pohyb, jeden z 12 principů animace, posiluje pocit „správnosti“ prostřednictvím pohybu, což je pro uživatelský zážitek rozhodující. Bez uvolnění se animace uživatelského rozhraní cítí neohrabaně a divně.

Úplné rozdělení je zřejmé, když se blíže podíváme na 12 principů v kontextu uživatelského rozhraní.

Squash a Stretch dává objektům váhu a flexibilitu, což je spíše výjimka než pravidlo v uživatelských rozhraních.

Očekávání vytváří pocit, že se něco stane a je téměř zbytečné, pokud jde o uživatelské zkušenosti. Funguje pouze omezeným způsobem pro vybrané mikro interakce a stavy tlačítek.

Staging odkazuje na rozvržení animace, což má smysl pro karikaturu Disney, protože postavy jsou neustále v pohybu, ale v uživatelské zkušenosti se to považuje jen za „design“.

Přímý postup vpřed a Pose to Pose jsou méně principy než přístupy ke skutečnému procesu kreslení / animace: můžete vytvořit plynulejší animaci, pokud nakreslíte souvislé rámečky, nebo pomocí pozice póza postavíte několik klíčových rámců a vyplníte mezery . Podle uživatelských zkušeností se tento proces sotva překládá, pokud nedochází ke skutečné animaci jednotlivých snímků. Ve výchozím nastavení, bez ohledu na nástroj, který používáte, je téměř veškerá animace uživatelského rozhraní vytvořena pomocí klíčových snímků.

Následná a překrývající se akce souvisí s dodržováním zákonů fyziky a setrvačnosti a toho, jak fyzická těla reagují, přičemž obě z nich mají málo společného s uživatelskými rozhraními, pokud nepočítáte s dalším principem, který je ve skupině nejužitečnější. .

Zpomalit a zpomalit říká, že objekty potřebují čas na zrychlení a zpomalení. To je velmi důležité, protože 100% animace uživatelského rozhraní by mělo používat tento princip. Obvykle se označuje jako „uvolňování“ a je nesmírně důležité.

Oblouk (vyžadovaný pro reprodukci fyzického pohybu) je pro animaci uživatelského rozhraní téměř zbytečný a je spíše výjimkou než pravidlem.

Sekundární akce je užitečná a je skvělá pro přechody obrazovky a nastavení vizuální hierarchie.

Načasování je důležité při kreslení postav, ale v uživatelských rozhraních, kde musí být pohyb ostrý, aby se cítil citlivě, se mi zdá lepší se spoléhat na uvolnění při návrhu pocitu interakce, spíše délky.

Přehnání se týká míry realismu nebo karikatury, opět stěží relevantní pro animaci uživatelského rozhraní, protože návrh je předem určen.

Rovnoměrné kreslení je také většinou pochmurné, protože animace uživatelského rozhraní se zabývá chováním objektů rozhraní v čase, nikoli skutečným designem samotných objektů.

Odvolání také hovoří o vizuální léčbě, opět se netýká toho, jak se rozhraní chová v průběhu času.

Závěrem

Otázkou tedy zůstává: proč 12 základních principů animace přesně nepopisuje animaci UI?

Členění lze nejlépe pochopit jednoduchým pozorováním: Animace uživatelského rozhraní nedodržuje stejná pravidla ani stejné zásady jako organická těla pohybující se ve fyzickém prostoru. Animace uživatelského rozhraní je odlišné médium, stejně jako fotografie pochází z malby - s překrývajícími se charakteristikami (fotografie i malba jsou statické vizuální kompozice závislé na světle a kompozici), ale jsou zásadně odlišnými médii.

Jednoduše řečeno, 12 základních principů animace se nevztahuje na animaci uživatelského rozhraní, protože řeší jiný problém.

V následujících několika článcích prozkoumám, co tyto zásady animace uživatelského rozhraní jsou, jaké problémy řeší principy animace uživatelského rozhraní, jak se principy liší od technik a jak můžete navrhovat a používat animaci uživatelského rozhraní ve svých současných a budoucích projektech, aby ovlivnily použitelnost a vytvářet přesvědčivější a efektivnější uživatelské zkušenosti.