it-swarm-eu.dev

Jak a kdy byste měli používat animaci v aplikaci?

Někdy mohou aplikace těžit z animací v uživatelském rozhraní.

  • Jaké tipy máte k určení, kdy byste měli používat animaci?
  • Jak můžete maximalizovat užitečnost animací a zabránit zneužití?
12
Dair

Přemýšlejte o příčině a následku. Pokud umístím kurzor nad tlačítko, ráda bych nějakým způsobem poskytla zpětnou vazbu. Pokud něco dokážu přetáhnout, nějak to naznačte. Pokud existuje varování nebo oznámení, nenápadně na mě upozorněte. Kromě toho, pokud nemáte velmi konkrétní důvod pro animaci, nepoužívejte ji. Snažte se vyhnout čemukoli, co by mohlo být nepříjemné, pokud bude pokračovat. Pokud animace není důležitá a odvádí pozornost od hlavního účelu stránky, odstraňte ji.

6
Virtuosi Media

Některá místa, kde může být animace vhodná:

  • Minimalizace panelu na konkrétní místo - animace pomáhá uživatele naučit, kam minimalizovaný panel šel a jak jej obnovit.
  • Automatické skrývání věcí, například navigační lišta - animace upozorňuje uživatele na to, že něco prostě zmizelo a odkud jej lze získat.
  • Aktualizace oblasti, která není bezprostředně poblíž oblasti, kde došlo ke změně, která ji způsobila. Například úprava dat v seznamu/mřížce, která mění vizuální reprezentaci těchto dat v jiném panelu.

Animace (změna/pohyb) upoutá pozornost více než většina ostatních věcí, takže je skvělé, když chcete upozornit na akci, která by jinak mohla upoutat pozornost uživatele.

Avšak i pro výše uvedené položky by stálo za to udělat to hned několikrát - protože oko je k němu automaticky přitahováno, slouží jako rozptýlení, a proto by se mu mělo zabránit po dokončení počátečního „vedení“. .

6
Dan Barak

Vždy byste měli mít nějakou zaneprázdněnou/pracovní animaci, abyste zabránili tomu, aby si uživatel myslel, že aplikace přestala fungovat (zvláště důležité pro aplikace Ajax).

Jednoduché rychlé přechody jsou v pořádku, pokud zvyšují celkovou uživatelskou zkušenost, ale příliš mnoho.

Už jste někdy použili aplikaci, ve které jste si mysleli, že „Přál bych si, aby vývojář věnoval tolik času plánování skutečných funkcí, jako plánoval skvělé efekty uživatelského rozhraní“? Při přidávání animací mějte na paměti.

4
Sruly

Skvělá otázka. Jako obvykle, záleží na aplikaci (hry by pravděpodobně měly používat mnohem více animace uživatelského rozhraní než například aplikace produktivity), ale existují některé obecné zásady.

Když byly iThings nové a horké, všechno muselo být animováno, ale je zajímavé podívat se na VS2010 a Office 2010 a vidět, kolik je ne animováno. Zejména v aplikaci Office 2010 fade-in přechodu vzad/tlačítko (zatímco Office 2007 ano). IMO, cítí se lépe reagovat. Nabídky stále mizí a vystupují (i když stojí za zmínku, že menu mizí přibližně dvakrát tak dlouho, dokud nezmizí , než když mizí v ), což může zvýšit vnímanou vnímavost).

Obecně by měla být použita animace , když se komponenty uživatelského rozhraní pohybují, aniž by je uživatel explicitně přetahoval/posouval . Pokud uživatel přetáhne ikonu na místo, „scootching“ jiné ikony z cesty způsobí účinky akce uživatele (i když někdy stačí dostačující čára). „Informační lišta“ na IE/Firefox tlačí další věci dolů, aby se snížila skokovost a přilákala pozornost uživatelů. Nabídky akordeonů a stromů byly s animací lépe testovány, protože uživatel vidí, kam směřují ostatní prvky.

Jednou jsem viděl studii, která ukázala, že uživatelé na všech úrovních jsou méně ochotni interagovat s elementem UI, který je animovaný (pokud najdu odkaz, aktualizuji to). Takže pokud rozsvítíte tlačítko po dobu 2 sekund, když se na něj uživatel přesune, i když během animace bude tlačítko fungovat , budou uživatelé podvědomě čekat na dokončení animace. Chcete-li si to prohlédnout, podívejte se na ukázku WPF Themes . Některá témata mají delší animace, než ostatní, a můžete okamžitě určit, které z nich se zdají pomalé. Efekty pomalého zeslabování mohou také přispět k tomu, že uživatelé říkají, že se Vista cítil pomalu - na Win7 jsou k dispozici všechny stejné animace (takže je to stejně pomalé na procesoru/grafické kartě), ale mnoho z nich je kratších.

OTOH, nový google.com obsahuje věci, které mizí, a vyhledávání obrázků Google nyní obsahuje lightboxy. Takže trend jde obousměrně.

3
Robert Fraser

Souhrnně řečeno, animace mají dva silné účinky na mozek, které můžete použít:

  • Snižte kognitivní zatížení: Umožňují uživateli vidět, co se stalo mezi dvěma stavy, takže jeho mozek nemusí „vyplňovat mezeru“. Díky tomu má uživatel pocit, že je vše jasnější a snadno použitelné --> Rozsáhle využívejte animace pro přechody (cf Apple software)

  • Chytit pozornost uživatelů: Člověk je opravdu schopen detekovat pohyb na místě, na které se přímo nedívá. To se děje díky našim tyčovým buňkám , buňkám používaným k detekci pohybu, které jsou opravdu husté na vnějších okrajích sítnice (musí mít něco společného s přežitím v nepřátelském prostředí) -> Použijte animaci, pokud se na vzdáleném místě stalo něco opravdu důležitého.

Tento účinek je velmi silný, protože jsou přímo spojeny s naším plazem mozku. Silný a nebezpečný zároveň.

3
user396

Při vytváření animací pro webovou/nativní aplikaci vždy používám přístup githubu, který se téměř na polovinu sekundy rozptyluje, zatímco se obsah načítá. Najděte nejpomalejší části aplikace (zejména ty části, kde stisknete tlačítko a na dobrou půl sekundu se zdá, že se nic neděje, a najděte nějaký způsob, jak udělat animaci, to je minimalizovat frustrace pro uživatele (" Stiskl jsem tlačítko, ale nic se neděje "), mějte na paměti, že nemyslím rotující nakládací kolečko nebo nějaký druh nakládací animace, myslím jako posuvná animace nebo něco podobného, ​​abych vytvořil iluzi klidu , rychlé uživatelské rozhraní, (viz: https://github.com/github/linguist pokaždé, když kliknete na něco, co je tato animace snímku, díky které se github jeví jako super rychlý a hladký), nezapomeňte to přehánět toto (pomocí této techniky na částech vašich aplikací, které zabírají> 500 ms) se cítím jako 500 ms, je magické číslo, ale experimentujte a najděte své.

2
David

Musíte se zeptat: pomáhá tato animace uživateli zjistit, co se děje? Okamžitě jsem vypnul genie účinek OS X, ale oceňuji jednoduchou animaci minimalizace/obnovy, protože je to rychlé a dává další vodítko tomu, co se právě stalo. Stejně jako u prostoru Spaces/Exposé. Nebo možná je to krátký, jednoduchý, měkký přechod s blednutím, který způsobí, že se něco zdá být méně náhlé a lidštější.

Pak zase může být vaše ochranná známka, jako 'Lucas wipe' od Star Wars.

2
John Ferguson

Animace má svůj účel, a to je vizuální změna stavu.

Je snazší se prohloubit, když přemýšlíte o deklarativní animaci, jakou je typ přítomný v moderním CSS, jak jej uvádí webkit. V této souvislosti určíte, jak prvky vypadají v určitém stavu, a pak řeknete CSS, jak vypadají v jiném stavu. Jak určíte státy? S pravidly CSS, jako jsou jména tříd a id. Tak například (a odpusť mi za použití kódu zde!):

.myBox { width: 100px; height: 100px; border: solid 1px red; -webkit-transition: linear .3s; }
.myBox.open { width: 100px; height: 120px; border: solid 3px red; }

Zde popisujeme okno, které se otevře, a říkáme kódu, jak animovat mezi dvěma pravidly CSS. To z nich dělá stavy, a když si to uvědomíte, aplikace animace na vaši aplikaci se náhle stane mnohem logičtější. Namísto přemýšlení o tom, co se animace děje, vidíte animaci jako vedlejší produkt změn stavu; indikátor, že se něco stalo, nebo zpětná vazba uživateli, že dochází ke změně.

Když jsem se naučil rozlišovat mezi čistou „animací“ (z programovacího hlediska) a „změnou stavu“ (z deklarativního hlediska), učinil všechny mé návrhy uživatelského rozhraní mnohem pevnější a logičtější.

1
Rahul