12 Free AE Tutorials for UX Professionals
Moderní webový design zahrnuje spoustu pohyblivých částí, jako je design obsahu, práce s ikonami a Strategie návrhu UX . Jeden novější trend je použití mikrointerakcí na webových a mobilních projektech.
Ty vypadají skvěle v závěrečném projektu, ale s takovým statickým mockupem nejsou tak snadné. Takže designéři vybírají animační programy, jako je After Effects, a vytvářejí pohyblivé modely.
Pokud se snažíte tuto dovednost naučit, doporučuji tyto videa zdarma na YouTube. Nebudou vás naučit všechno, ale zakryjí základy a poskytnou vám pevný základ pro posílení vaší dovednosti.
1. Tlačítko UI animované
To velmi krátké animace uživatelského rozhraní tutoriál je ideální pro začátečníky s malou zkušeností s AE. To vyžaduje nějakou trpělivost pro práci přes rozhraní, ale pokyny jsou křišťálově jasné.
Naučíte se vytvořit efekt animace malého tlačítka, který může fungovat skvěle pro webové stránky nebo mobilní aplikace.
To není něco velkolepého, ale do konce budete mít mnohem silnější uchopení tohoto konceptu.
2. Prototypový pohyb
Další jednoduchá animace, kterou můžete udělat, je posuvná nabídka, jako je V tomto videu . Učí vás, jak animovat nabídku v After Effects a jak pracovat s jednotlivými vrstvami v softwaru.
Je to poměrně dlouhá výuka s více než 40 minutami návodů krok za krokem. Ale stojí za to, když to dokážete vidět až do konce.
3. Animace ikony AE
Malé ikony animací nepřidávají přímo do rozhraní, ale mohou zlepšit uživatelské prostředí. Tyto pohyby ikon se týkají těch malých mikrointerací zmíněných výše.
A tato ikona animace tut mluví o mikrointeracích s jednoduchým sledováním. Můžete dokonce stáhnout zdarma ikony ve formátu PSD / AI a použít je pro animaci.
Ale to je také užitečné pro návrhářů ikon, kteří vytvářejí vlastní ikony od začátku a chtějí je animovat pro výrobu.
4. Animované kurzory UI / UX
Mnoho návrhářů vytváří animace UX, které předvedou, jak by rozhraní mělo fungovat. To by samozřejmě zahrnovalo kliknutí myší / přetahování, protože chcete vidět, jak se obsah pohybuje po celé stránce.
Pokud chceš přidat pohyby kurzoru k vašim mockups pak tento tutoriál je pro vás. Je to docela krátký průvodce, pouhých 15 minut, ale informace jsou velmi hodnotné a relevantní jak pro mobilní, tak pro webovské designéry.
5. Aplikace iPhone App UI
Dalším dobrým příkladem animace zaměřené na uživatele je toto po typickém vstupu aplikace iPhone. Vytváříte cestu uživatele prostřednictvím aplikace pro iPhone, která vyplňuje jednotlivé pole formuláře.
Samotné to nemusí vypadat příliš, protože lidé vědí, jak tento proces vypadá.
Pokud však navrhujete webovou stránku nebo aplikaci, která má jedinečný tok, pomůže zobrazit celkové chování uživatelů při zadávání informací k přihlášení a možná i dalším.
6. Přetahování stránky aplikace
Návrháři mobilních aplikací mohou využít vícestránkových rozhraní. Ty fungují skvěle pro galerie a pro paginované efekty.
v tento stručný návod naučíte se vytvářet animace s nástrojem After Effects pomocí několika málo existujících modelů. Toto video je zdarma UX v pohybu kde mají řadu podobných konzultací a soukromých workshopů.
Téma pohybu UX se na webu příliš netýká, ale tito kluci jsou jedním z mála dobrých, kteří se do podrobností podrobně zabývají. Podívejte se na celý kanál YouTube, pokud se chcete dozvědět více.
7. Jelly UI animace
Pravděpodobně jste viděli v aplikacich pro Android nebo dokonce po celém webu divné nabídky tekuté želé. Ty nejsou super běžné, protože je těžké znovu vytvořit v kódu, ale s tento kurz Jelly UI můžete alespoň vytvořit animace od začátku.
Je to další freebie od společnosti UX in Motion a celkem to trvá asi 5 minut.
Ale dozvíte se hodně o After Effects a celkovém animačním procesu UX. Konkrétně importovat vektory a pracovat s těmito soubory přes časovou osu - opravdu jen základy animace rozhraní.
8. Rozvíjení animace
Zatímco nemohu říci, že tato animace přímo ovlivňuje rozhraní, je to něco, co můžete přidat do loga vašeho webu. Rozvíjení animací se většinou používají ve video introch pro vytvoření vizibilního obrazu.
Webové stránky však mohou mít podobnou rozvinutou animaci SVG grafika a základní animace JS.
Dokonce i když nechcete vytvářet animace loga, tento výukový program vás může stále projít prostým pracovním postupem rozhraní AE. Ideální pro učení lan bez velkého stresu.
9. Základní animace prototypu uživatelského rozhraní
Nabídky mobilní aplikace se dodávají v mnoha různých stylech s různými animačními technikami. Tento tutoriál uživatelského rozhraní vás naučí animovat nabídku ikony bublina.
Toto bylo poprvé připsáno na aplikaci Path, ale od té doby se stalo běžným trendem pro zařízení Android a iOS.
Během tohoto 20minutového videa vyberou nápady pro animaci ikon a návrh menu. Je to docela snadné pracovat s, a můžete použít předem navržené ikony pro workflow ušetřit čas.
10. Rozdělení 3D vrstev
Prezentace animací jsou cenné pro práci s klientem nebo pro sdílení vašich nápadů před týmem. To je tam kde tuto animaci 3D vrstvy tutoriál může pomoci.
Učí vás, jak rozdělit různé prvky vrstvy a oddělit je od úplného rozhraní. Dokonce můžete předvést různé prvky stránky, abyste zobrazili, jak má aplikace / web fungovat.
Neumím si představit, že by to bylo pro osobní práci cenné, ale je skvělý efekt učit se zvláště pro komerční koncerty.
11. Přepínače iOS 8
Animované zapínací / vypínací přepínače se poprvé objevily v raných verzích systému iOS a od té doby se rozšířily na platformy Android a obecné webové stránky.
Nejlepší UI přepínače mají vlastní animace a můžete si vytvořit vlastní podle následujících tento 25minutový výukový program . Předpokládá se, že již máte přepínací grafiku, ale můžete také stáhnout freejoc PSD a místo toho použijte.
Navíc můžete tuto animaci využít pro všechny typy přepínačů, které navrhujete v budoucnu. Skvělý návod pro někoho, kdo se právě dostal do After Effects pro UI / UX.
12. Smooth Icon Animations
Poslední na mém seznamu je tento podrobný pohyb ikony tut pomocí několika různých vektorových tvarů. Je to docela podrobná příručka o celkové délce přesahující 30 minut a pokrývá několik různých technik.
Jakmile budete znát cestu po aplikaci After Effects, můžete tyto nápady aplikovat na jiné styly ikon. Proto je tento návod pro začátečníky tak skvělý; učí vás, jak pracovat v rozhraní AE se specifickými technikami pro návrháře UI / UX.
Ale některý z těchto tutoriálů vám zlepší vaše animační dovednosti UX, takže nezapomeňte uvést záložky, které vás zaujmou.
