Flash Animace Velikosti v Přírodě

Animace je jedním z trvalých snů lidstva. Vysvětluje se to dvěma různými teoriemi: někteří se domnívají, že pravěcí umělci prostě neměli nic, čímž by mohli vymazávat končetiny, které se jim nepovedly, a pro příští pokolení tedy zvěčnili na stěnách své chyby. Jiní věří, že to byly nejranější pokusy vyjádřit ve statickém obrázku zdání pohybu.

Je snad něco přirozenějšího než touha zachytit pohyb? Všechno v přírodě se hýbe. Lidé chodí, voda teče, rostliny rostou, jediné, co v přírodě probíhá opravdu neustále, je změna, ve formě pohybu. Některé změny se stanou vmžiku, jiné jsou tak pomalé, že ani nevnímáte, že se něco hýbe.

Animace je změna, a pohyb. Když chceme ve svých dílech zachytit život, nejblíže se k tomuto cíli asi dostaneme s animací. Právě iluze pohybu, pokud je aplikována správně, říká uživatelům, že skutečně něco udělali. Spouští v nich stejné pocity, jako když jsou v interakci s fyzickými objekty. Animace je svým způsobem skeumorfická. Když se ale animace používá řádně, má napodobovat interakce skutečného světa.

Svým způsobem jsme opsali kruh a vrátili se tam, kde už jsme kdysi byli. Než přikročíme k praktičtějším věcem, podívejme se, jakými cestami se animace na Internetu dostala do svého současného (a velmi skvělého) stavu.

Historie Animace na Internetu

Soubory .gif byly zavedeny v roce 1987, v době, kdy Internet teprve začínal vypadat podobně, jak ho známe dnes. Přesto popularita gifů něco vyjevila. Lidé chtěli dostat na své webové stránky animace. Když byl potenciál souborů .gif vyčerpán, přáli si lidé mít na svých webech nové, lepší animace. A zvuky! Ach, rozkošné zvuky. Jak úžasné by bylo, kdyby lidé otevřeli vaši webovou stránku a hned se jim začala přehrávat vaše nejoblíbenější písnička?

Čtěte také: Vytvořte Pohyblivou Animaci Přírody

Tvrdou školou života byl pro nás v tomto ohledu Flash. Nezapomínejme však, že Flash byl tehdy hodně úžasný. Skutečně, byla to inovace. Byl to pokrok. Bez ohledu na to, jak byl později zneužit, musíme uznat, že Flash umožnil dělat s Internetem takové věci, jaké jsme doposud neznali. Rozvinul kreativní horizonty, vytvořil pracovní příležitosti pro lidi ve zbrusu novém odvětví, dal nám “webové karikatury (web cartoons)” a to nejlepší, co se vynořilo v devadesátých letech (kromě Nirvany): flashové hry.

Jak šel čas, mnozí designéři přešli u menších věcí k animacím založených na JavaScriptu, což je případ rozvíracích menu a jiných navigačních prvků. Bylo to přívětivější pro SEO (optimalizace pro vyhledávače), pokud jste to dělali řádně. Asi uprostřed poslední dekády však už W3C pracovala na zařazení animace do specifikace CSS.

A dnes? Nyní už hledáme víc, nestačí nám jen dodat webům trochu stylovosti. Animace už pro webové designéry není žádnou novinkou. Ve filmu se stala základnou pro zcela nový druh vyprávění příběhů. Zaměřte se na animaci z hlediska jejího vztahu k webově založeným rozhraním a aplikacím, protože nikdy k tomu nebyla vhodnější doba než dnes. Pokud animaci založíme převážně na otevřených standardech, především ji skutečně bude schopno vidět víc lidí.

Druhy Animací

Je evidentní, že nestačí prostě jen přihodit k elementům webové stránky animaci a doufat, že tím zlepšíme konverzní poměr (conversion rate). To by bylo hloupé. Takže musíte také brát v úvahu skutečné detaily implementace. Pokud jsou animace natolik náročné na zdroje, že budou zatěžovat mobilní zařízení uživatelů, nebo, což by bylo ještě horší, jejich desktopové počítače, budete mít problém.

Animace Zpětné Vazby

Právě animace umožňuje uživateli dozvědět se, že jeho akce (například kliknutí) byla zaregistrována. Je pěkné, že máme tuto zpětnou vazbu, znamená ale i něco navíc. V současném světě plochého designu je podstatná. Lidem musí být jasný rozdíl mezi rozhraním a dekorací. Stačí něco jednoduchého, jako že se změní barva pozadí tlačítka nebo tlačítko poskočí. Opět je vše o tom, poskytnout uživateli zpětnou vazbu.

Čtěte také: Využití Animací pro Vysvětlení Energie

Užitečnost těchto animací byla prokázána už dávno, jakmile se objevila první grafická rozhraní. Začínalo se tím, že se kurzor myši změnil na přesýpací hodiny, a také se objevil ukazatel průběhu. Společnost Apple zavedla v jisté době ikonu „duhového větráku“. Tyto konvence byly přijaty na Webu hned, jak to bylo možné, a mělo to dobrý důvod. Když totiž lidé někde klikli nebo ťukli a nic se nestalo, klikali či ťukali pořád dál. Možná tím vyjadřovali svou frustraci.

Animace pro Vyprávění Příběhů

Vyprávět příběhy pomocí animací se už dnes neomezuje jen na karikatury v podobě krátkého komiksu, tzv. cartoons. Jde mi o něco jiného. Běžně se takto postupuje u stránek, které předvádějí nový výrobek tím, že ho “sestaví” přímo před vašima očima. Účinnost těchto animací je … diskutabilní. Typicky není jejich záměrem zlepšit použitelnost, ale udělat dojem na uživatele, a dodat mu trochu kontextu pro předmět stránky.

Dekorativní Animace

Někteří lidé dávají na web animace, které neslouží k ničemu jinému, než být vidět, což může dopadnout všelijak. Já obvykle radím se jich vyvarovat, protože ruší. Přece chcete oči lidí upoutat na důvody, proč by si měli koupit, co prodáváte, a na vaše výzvy k akci. Chcete, aby zde dostali, pro co si sem přišli. Dekorativní animace by měla být naprosto skrytá. Ukažte ji až poté, co lidé dokončí vaši výzvu k akci.

Animace v Reklamách

Přidejte k nějaké reklamě animaci a bum ho! Přitáhne pozornost i proti jejich vůli. Je to ale téměř nevyhnutelné. Chcete-li lidi přimět, aby se dívali na vaše reklamy, skvělý způsob je reklamy animovat. Taková animace však vnáší stejnou potíž, jakou jsme už zmínili u dekorativní animace: ruší uživatele, odvádí pozornost od toho, co chcete, aby udělal. Nakonec to ale zůstane na vás, vy budete muset zvážit všechna pro a proti.

Zásady pro Efektivní Animaci

Na technických aspektech implementace sice záleží, ale ať už používáte .gify, video, CSS, SVG, nebo dokonce Flash (hrůza), existují principy, na nichž záleží víc. Zapomeňte na okamžik na technologii a postupy, které plánujete použít, a připravte se ještě na trochu teorie.

Čtěte také: Zázraky přírody ve vzdělávacích animacích

Rychlost a Výkon

Možná si říkáte, “dobrá, je evidentní, že animace musejí běžet rychle, ne pomalu”. Máte pravdu, je to evidentní, teoreticky. Vaše animace by neměly zadrhávat. Nu a teď si představte, že byste se měli navigovat po těchto webech na nějakém málo kvalitním tabletu nebo na chytrém telefonu. A to už vůbec nemluvím o webech, které jsou vybudované s tolika animacemi a speciálními efekty, že potřebují načítací obrazovku s ukazatelem průběhu.

Nikdo by neměl být nucen čekat, než se načtou animace, že se teprve pak dostane k informacím, které si přeje nebo potřebuje získat. Nikdy. Proto vám teď hodlám dát jednu malou odbornou radu: pokud jde o hardwarové urychlení a výkon, je CSS téměř vždy lepší než JavaScript.

Delikátnost a Funkčnost

Když animaci chápeme jako návrhářský nástroj, ne jako stylistickou volbu, je nejlepší začít s drobnostmi. Zaprvé proto, že malá a nerušivá animace funguje lépe. Než se na to začnete dívat pod zorným úhlem rozhazování rýže o svatbě, zeptejte se sami sebe, zda něco takového skutečně zlepší prožitky uživatelů. Ve většině případů bude patrně odpověď znít “ne”. Samozřejmě se vyskytnou výjimky. Téměř vždy nějaké jsou. Klíčem k dobrému designu je delikátnost, která se stále ještě často podceňuje.

Pravidla pro Návrh Animací

1. Rychlost: Animace musejí být rychlé, nebo spíše, měly by proběhnout rychle. “Milisekundy” je obvykle množství času, ve kterém chceme měřit animaci uživatelského rozhraní. Zejména to platí pro produkty, u nichž se požaduje, aby je lidé používali opakovaně. I když bude animace super legrační a zábavná, pokud ji někdo bude nucen vidět podesáté, ztratí pro něj veškerou přitažlivost.
2. Fyzikální Chování: Interakce s prvky uživatelského rozhraní je něco jako interakce s malými tvrdými objekty. Hodíte je na stěnu, trochu odskočí. Proto může někdy být žádoucí, aby animace “poskočily”, zejména pokud se pohybovaly vertikálně.
3. Zrychlení a Zpomalení: Když se stacionární objekty mají začít pohybovat, chvilku jim trvá, než získají patřičnou rychlost. Takže když nějaký objekt rozjíždíte nebo zastavujete, nezapomínejte mu dát trochu času (v milisekundách) na rozjezd a dojezd (aby mohl zpomalit nebo zrychlit).

Animace a Přechody ve Windows 7

Strategické použití animací a přechodů může usnadnit pochopení programu, pocit plynulejší, přirozenější a vyšší kvality a být poutavější. Animace poskytují vzhled pohybu nebo se mění v průběhu času. Přechody jsou animace, které uživatelům umožňují orientaci při změnách stavu uživatelského rozhraní (UI) a manipulaci s objekty a aby se tyto změny cítily hladce, a neopakujte je.

Obecně platí, že nejlepší animace a přechody se používají ke komunikaci s uživateli, kteří nejsou slovesně, a k provádění změn stavu přirozenější a méně znatelné. Naproti tomu nejméně účinné jsou nepotřebné v tom, že nekomunikují nic nebo nepřitahují zbytečnou pozornost. Animace se nejlépe používají jako sekundární forma komunikace. Zobrazení animace není nezbytné. Ekvivalentní informace lze získat jiným způsobem. Animace nemá vliv na produktivitu uživatele. Není to nudné.

Použití animace komunikuje se stejnými informacemi, ale přirozeným, nerušivým způsobem. Animace a přechody nemusí požadavkem na úspěšnou pozornost. Ve skutečnosti se často používají k tomu, aby se vyhnuly pozornosti programové mechaniky, o které uživatelé nemusí vědět. Mnoho úspěšných animací je tak přirozené, že uživatelé o nich ani neví; uživatelé by si všimli pouze jejich nepřítomnosti.

Principy Kvalitní Animace

• Jsou jasně účelné.
• Vypadají hladce a nepřetržitě.
• Jsou realističtí.
• Jsou autentické.
• Mají osobnost.
• Vzhled a chování reagující.
• Přilákejte správnou úroveň pozornosti.

Doporučení pro Animace ve Windows 7

• Zpětná vazba najetí myší: Pro zobrazení místa interakce.
• Klikněte na zpětnou vazbu: Pro zobrazení, že kliknutelný objekt reaguje a obdržel kliknutí.
• Zpětná vazba k výběru: Chcete-li zobrazit, že je vybrán objekt.
• Zpětná vazba k průběhu: Pro zobrazení, že se provádí úkol.
• Atraktor: Ukázat, že něco vyžaduje pozornost uživatele.
• Relace: K zobrazení vztahu mezi objekty nebo kauzalitou v efektech.
• Ilustrace/náhled: Vysvětlit vizuálně koncept, úkol nebo účinek příkazu.
• Zvětšení nebo zmenšení: Chcete-li hladce změnit velikost nebo stav objektu.
• Zobrazení, skrytí nebo změna obsahu: K hladkému zobrazení, skrytí nebo změně obsahu, obvykle pro progresivní zveřejnění.
• Zobrazení nebo skrytí ovládacích prvků: K hladkému zobrazení nebo skrytí ovládacích prvků nebo jejich cenových cen při najetí myší nebo pohybu myší, aby se zjednodušil normální vzhled vizuálu.
• Přechody scén: Aby přechod scény byl hladký a bezproblémový, aby se zabránilo pozornosti.
• Přechody speciální scény: Upoutat pozornost na změnu scény, aby byla zvláštní.

Animace pro Znázornění Velikostí v Přírodě

Země je jedinečné, ale titěrné místo pro život. Vesmír je gigantický prostor, který se vymyká našim pozemským představám o prostoru. Pohybují se v něm a rotují gigantická tělesa.

Pro lepší představu: Pokud by Zemi reprezentovala kulička o průměru dva centimetry, sluneční soustava by měla rozlohu Prahy. Vysoce realistické vyobrazení sluneční soustavy by každopádně nevypadalo zajímavě. Jednotlivá tělesa proto musejí být přiblížena, aby bylo jasné, co se ve sluneční soustavě odehrává. Slunce není přirozeně vyobrazeno ve své skutečné velikosti vzhledem k planetám. Je tak obrovské, že by animacím dominovalo. Prostor je tak obrovský, že jsou nutné určité kompromisy.

tags: #flash #animace #velikosti #v #prirode

Oblíbené příspěvky:

• Zázraky přírody odhaleny
• Povinnosti při hromadění odpadu
• Inspirace pro samolepky na zeď do dětského pokoje
• Přírodní ráj v Orlických horách
• Ekologická barva na beton