Úvod do animace ve webovém designu
Animace již není jen pro karikatury. Od pohyblivých obrázků na celou obrazovku až po malé efekty přechodu se všude objevují doteky animace. Animace je moderní, zábavná a uživatelsky přívětivá.
A překážky v používání animace začaly klesat. U většiny uživatelů vysokorychlostních připojení a snadnosti vytváření všeho od jednoduchých pohybů nebo hloupého gif po několik minut činnosti se animace staly praktickými a užitečnými nástroji pro webový design.
Prozkoumejte prvky Envato
Základy animace
K animaci dochází, když je něco vytvořené ve statické nebo dvourozměrné formě „oživeno“ a zdá se, že se pohybuje způsobem, který dodržuje fyzikální zákony. Je to způsob, jakým kreslená postavička prochází po obrazovce nebo jak ikona aplikace poskakuje jako koule, zatímco se načítá na plochu počítače Mac.
Jedním ze slov, které je téměř synonymem pro animaci, je Disney. Na začátku osmdesátých let dva nejvýznamnější animátoři společností napsali knihu podrobně popisující 12 principů animace. „Illusion of Life: Disney Animation“ od Franka Thomase a Ollie Johnstonové stále poskytuje rámec pro animaci i dnes.
- Squash a protáhnout
- Očekávání
- Představení
- Přímý postup vpřed a Pose to Pose
- Postupujte skrz a překrývající se akci
- Zpomalte a zpomalte
- Oblouk
- Vedlejší akce
- Načasování
- Přehánění
- Plná kresba
- Odvolání
Webové animace jsou často ukládány jako GIF, CSS, SVG, WebGL nebo video. Mohou to být cokoli od jednoduchého podtržení, které se objeví, když umístíte kurzor myši na slovo na celé video nebo obrázek na pozadí. Stejně jako u jakékoli jiné techniky designu mohou být animace jemné, nebo mohou být ve vaší tváři a těžko se jim vyhnout.
Rozvíjející se trend roku 2017
Animace ve webovém designu je něco, co začínáme každý den. Klíčem k animaci jako trendu designu je moderování. Malé, jednoduché animace jsou poutavé a zajímavé; uživatel nemusí ani myslet na to, že je animace vůbec. Animace ve velkém měřítku mohou být zajímavým vizuálem, který vás vtáhne do designu. Pokud však začnete míchat příliš mnoho různých pohybových efektů, může to způsobit úplný chaos.
To, co dělá animaci trendy, je realismus. V dnešním designovém prostředí s tolika plochými a minimálními stylovými vzory potřebují uživatelé více podnětů, aby jim řekli, co mají dělat. Jednoduché kousky animace mohou uživatele vést beze změny estetiky. Pomáhá přidat instrukce a pořadí k návrhům schémat, která mohou být příliš jednoduchá vizuálně, aby poskytla uživatelům dostatečný směr. V tomto případě animace vytváří šťastné médium mezi odstraněnou jednoduchostí a použitelností.
Dalším faktorem, který k tomuto trendu přispívá, je přístup k nástrojům na zadních a uživatelských koncích designu. Pro složitější animace již Flash nepotřebujete. (A pokud stále stavíte ve Flashi, je čas zastavit.) To lze provést mnoha dalšími způsoby. Dnešní animace nezasahují webové stránky ani webové servery, takže uživatelé rychle načtou efekty a animace s vysokorychlostním přístupem k internetu nepřeskočí uvíznutí uprostřed události.
Velké vs. malé animace
Pokud jde o animaci pro web, spadá do dvou stejně snadno pochopitelných kategorií: velká a malá. (Pravděpodobně můžete hádat, jak vypadají.)
Velké animace jsou ty, které mají měřítko. Animace ve velkém měřítku často ve formě videa s dobou běhu vyplňují významnou část obrazovky a jsou charakteristické pro krátký film. Tyto animace slouží jako ohnisko celkového designu. Uživatelé často nemusí provádět žádnou akci, aby mohli vidět animaci v pohybu. Pokud na webu Studio Meta pozorně sledujete, při čtení kopie se každý velký obrázek zvětšuje.
Malé animace jsou malé kousky a kousky, které objevíte při zahájení interakce s webem. Tyto divoty mohou být ve formě stavů vznášejících se, malých kousků ozdob nebo pomocníků nebo nástrojů použitelnosti. Malé animace jsou přízvukem, který přispívá k celkové estetice, ale je nepravděpodobné, že by se zaměřil na design. V místě Henryho Browna je jednoduchá animace taková, že pokud se podíváte pozorně, oči na obrázku skutečně blikají.
Kdy použít animaci
Problémem každého trendu, včetně tohoto, je vědět, kdy jej použít. Animace může být velkým trikem pro vaši sadu nástrojů pro návrh, ale není pro každý projekt. Animace by měla být plynulá a plynulá, neměla by být nervózní ani mechanická. Musí sloužit účelu uživateli a nesmí se bránit obsahu.
Hlavním důvodem použití animace je zvýšení použitelnosti. Jednoduché animace mohou být skvělými vodicími nástroji, které pomáhají lidem pochopit, na která tlačítka kliknout nebo kam dál na mapě webu. Mnoho návrhářů využívajících složité efekty posouvání spáruje jednoduchou animaci s uživatelským nástrojem, který posouvá nebo klepne. (To zahrnuje vše od jednoduché ikony poskakování nebo slov, která se objeví v okně „rolovat dolů“.)
Použitelnost má několik podob:
- Komunikační funkce nebo jak používat web
- Zobrazit změnu, například správné vyplnění formuláře nebo zvýraznění toho, že na prvek lze kliknout
- Vytvořte tok nebo nasměrujte uživatele na výzvu k akci
Druhým důvodem pro použití animace je estetický. Animace může být skvělá „dekorace“. Cíl animovaného prvku je někdy čistě vizuální a to je přijatelné použití. Tato dekorativní animace může pomoci vyprávět příběh nebo vytvořit emoční spojení mezi rozhraním a uživatelem. Účelem animace může být vzbudit vizuální zájem a udržet uživatele v interakci s vaším webem po delší dobu.
Při vytváření čistě vizuální animace zvažte, co má dělat. Přemýšlejte o připojení, které má mít uživatel. Má to být zábava nebo překvapení? Je to trochu jedinečný obsah, který je určen ke sdílení? I čistě vizuální by měl mít cíl.
Zdroje
Jste připraveni začít animovat? Zde je několik zdrojů pro další čtení a nástroje, které vám pomohou začít.
- Video Illusion of Life ukazuje každý z 12 principů způsobem, který je snadno pochopitelný.
- „Webová animace v práci“ od A List Apart je skvělým zdrojem informací o tom, jak animace funguje.
- „Úvod do animace CSS pro začátečníky“ ukazuje, jak pomocí vlastností CSS přeměnit čtverec na kruh.
- Pružné animované elementy SVG je návod, jak integrovat a animovat komponentu SVG.
- Prezentace Art of UI Animations Mark Geyer používá animace k vysvětlení pojmů.
- „15 nejlepších nástrojů HTML5 pro vytvoření pokročilé animace pomocí“ je skvělý krok na další úrovni a seznam nástrojů, pokud již rozumíte základům.
- Sada Animator's Survival Kit učí základní principy, které platí pro všechny formy animace.
Závěr
Pokud jde o animaci, platí toto pravidlo: Dobrá animace zlepší zážitek uživatele. Může to být ve formě emocionálního spojení - jako je zábava, pozitivní zážitek - nebo usnadněním používání webu.
Animace je zábavná technika, která se stává mnohem standardnější pro různé aplikace. Pokud hledáte inspiraci, nezapomeňte se vrátit zpět k tomuto článku a kliknout na odkazy na vizuální příklady v celém textu, navštívit stránky a hrát si s animovanými funkcemi v nich. Bavte se!
