20 Nejlepší freebies pro Aspiring UX Motion Designers

Návrháři rozhraní mají větší zájem o design UX s animovanými maketami, které emulují akce uživatele. Tyto makety UX spoléhat na pohyb s animovanými efekty definovat jak by rozhraní mělo reagovat na vstup uživatele.

Většina návrhářů UX se naučí používat software k tvorbě těchto animací. Dvě nejoblíbenější volby jsou Adobe After Effects a Principle (pouze OS X). Můžeš design rozhraní makety v programu, jako je Photoshop, a přesunout UI do těchto programů pro animaci.

Pokud se zajímáte o UX animaci, pak to bude obrovský přínos. Můžete studovat práci druhých a hrát si s jejich návrhy, abyste viděli, jak to všechno funguje.

Níže najdete nejlepší volnosti pro uživatele Zásady a AE dostat se do designu UX pohybu. Určitě vám pomohou pochopit jak UX animace funguje, a jak si vytvořit vlastní.

1. Odstranit akci

Otáčení je velmi běžná akce v mobilních aplikacích pro různé účely. K výchozímu nastavení se používá výchozí akce iOS zobrazit alternativní možnosti pro úpravy / mazání položek, a to je přesně to, co dostanete do tohoto freebie vytvořeného Ramilem Derogongunem.

Můžete si stáhnout bezplatný soubor AEP pro After Effects a vyzkoušet si to sami. Uživatelské rozhraní následuje a velmi základní schéma drátového modelu s uživatelským vstupem zobrazeným jako modrá tečka. Tyto typy chování uživatelů jsou nejvhodnější prostřednictvím animace protože dává vývojářům možnost vidět jak by mělo rozhraní fungovat.

2. Widget Swipe

Zde je další animovaná maketa, která se zaměřuje na položky košíku v prezentaci. Navrhl Leon Wu, tato bezplatná animace přichází s PRD souborem, který je vytvořen pro Princip.

Animace je velmi jednoduchá a ukazuje, jak by se položky měly pohybovat na obrazovce při použití tlaku. Můžete také získat pocit pro efekt uvolnění vždy, když je uvolněna akce swipe.

3. Dualshock UI

Zde je neuvěřitelně dynamický UX animační efekt sdílený Alexandrem Boychenkem. Tato maketa je založena na ovladači PlayStation Controller pro uživatelské rozhraní mobilní aplikace. Obsahuje soubor Skica a Princip, který si můžete zdarma stáhnout.

Tato ukázka ukazuje, jak vytvořit přechody mezi obrazovkami. Ale také se můžete podívat, jak se prvky stránky animují po obrazovce v různých směrech.

4. Hamburger Menu Animace

Ikony Hamburger jsou stále mobilním rozhraním. Tato ikona menu ukazuje, jak animovat tříbarevnou ikonu do ikony "X".

To je opakující se animace, tak “X” také oživí zpět do hamburgerového menu. To je skvělý freebie se dozvědět o vektorová manipulace s prvky uživatelského rozhraní.

5. Snímek

Tato bezplatná maketa je pro mobilní aplikaci s názvem Snapster. Zaměřuje se na úvodní / palubní obrazovce kde si uživatelé mohou prohlédnout ukázky aplikace a zjistit, jak to vlastně funguje.

Je to PRD soubor, a bohužel to nehraje pěkně s After Effects, takže z tohoto mohou mít prospěch pouze uživatelé Zásady.

6. Nakládání spinners

Zde je AEP After Effects freebie pro mobilní zavaděče. Tyto typy animovaných GIFů se staly velmi populární, když se Ajax dostal do hlavního proudu vývoje webu.

Nyní jsou tyto mobilní nakladače desetinásobné a mohou být i silně přizpůsobené přizpůsobit určitým rozhraním. Tento freebie je dodáván se souborem AEP a souborem Skica pro úpravu vektorů, pokud je chcete upravit.

7. Přehrávání / pozastavení přechodu

Přechodové efekty často se zdají být velmi jednoduché, ale ve skutečnosti vyžadují dobré množství práce. Skvělá ukázka této hry / pauzy animace vytvořené Alexem Pronskim.

S tímto freebie můžete zkoumat, jak animovat různé ikony tenké čáry do tvarů a symbolů. Jakmile se naučíte program, stává se mnohem snazším tento druh věcí, takže pomáhá mít k dispozici k dispozici pro výzkum.

8. iPhone Mockup

Zatímco tento freebie neobsahuje přímo animaci, má být použit pro produkční práci na iPhone aplikacích. Je to zdarma iPhone 5S AEP soubor pro použití v After Effects jako iPhone šablonu.

Stačí importovat maketu rozhraní a vytvořit animace v After Effects. Pak jej můžete zapojit do této makety pro iPhone a sdílet se se svým týmem.

9. iPhone šablony

Tohle je další vlastní šablona After Effects s modernější design iPhone. Freebie je k dispozici na této stránce v UX in Motion.

Vše v šabloně je super snadné přizpůsobit. Na stránce pro stahování naleznete také sekci s názvem „Pokyny k videu“, kde se můžete naučit animovat aplikaci.

10. Mikro animace

I ty nejmenší animace aplikací mohou mít velký vliv na uživatelský komfort. Tento freebie zobrazí a "Jako" mikro animace kdykoli uživatel "má rád" příspěvek.

Ikona srdce má svou vlastní animaci s profilovou fotografií uživatele přidanou do zásobníku oblíbených. Tento freebie je pouze pro Princip a máte také .mov soubor ke stažení.

11. Peněženka App

Digitální peněženky se stávají mnohem populárnějšími a tento freebie usnadňuje návrh. Získáte soubor Skica se všemi elementy vektoru plus plus soubor PRD pro animaci principu.

Tento freebie byl navržen Sergey Bykov jako zábavný malý vedlejší projekt. Ale může to být velmi poučné, pokud si to rozdělíte a pracujete s animací krok za krokem.

12. iOS Switch

S Apple iOS 7, svět dostal čerstvě navržený přepínač pro zapnutí / vypnutí štítků. Toto vedlo k mnoha různým efektům včetně volné animace který napodobuje nativní vypínač.

V tomto souboru získáte velmi jednoduchý animační efekt se základním uvolněním. Přepínač se přesune a pozadí se změní na zelenou, poté se vrátí zpět po vypnutí spínače.

13. Ritter App

Zde je další velký freebie vydaný Sergey Bykov za to, co nazývá Ritter App. To zahrnuje bezplatný soubor Skica pro vektorové rozhraní, spolu s volným souborem PRD pro animaci principu.

Dostaneš spousta různých animací v tomto freebie, takže si myslím, že by bylo užitečnější pro středně pokročilého až pokročilého designéra. Začátečníci se z ní mohou také hodně naučit, ale mohou mít strmou křivku učení.

14. Pozvěte přátele

Všichni víme a milujeme plovoucí nabídku ikon plus společnosti Google. Jardson Almeida vytvořil menu Friends Invite založené na jednoduchém konceptu Material Design.

Vše bylo navrženo v náčrtu a importováno do principu animace. Dostanete oba soubory jako zdarma ke stažení a hračku kolem.

15. Přejeďte kartou

Zde je další obecné swiping freebie pouze pro uživatele Princip. Toto je rozhraní karty vytvořené pro prezentace pro obecné účely nebo nativní uživatelské aplikace.

Myslím, že je to perfektní freebie pro začátečníka, který se právě dostává do principu. Není to tak složité, že se budete cítit ztraceni, ale není to tak jednoduché, že se budete cítit trivializovaní.

16. Chat na mapě

Mnoho návrhářů stále používá Photoshop pro rozhraní, a to platí i pro tuto mapu chatu freebie. Můžete si stáhnout soubor PSD pro rozhraní a soubor PRD pro animaci principu.

Je to překvapivě zkreslená animace ve stylu, ale stále vypadá skvěle a funguje přesně tak, jak byste očekávali v jednoduché aplikaci Mapy / Geolokace.

17. Načítání aplikací

Mobilní aplikace se často používají obrazovky říci návštěvníkům, že se něco děje v backendu. Jedním z mých nejoblíbenějších freebies v této sbírce je tato animace, kterou vytvořil Roman Wagner.

Zavádí jednotlivé prvky jeden po druhém Po dokončení načítání obrazovky. Tato animace je velmi hladká a zcela věrohodná v oblasti designu mobilních aplikací.

18. Palubní karty

Uživatel onboarding je zásadní krok pro každou novou mobilní aplikaci. Je to vždy příjemné zahrnout některé animace v této fázi, to je důvod, proč tyto onboarding karty animace mohou být velmi užitečné pro návrháře aplikací.

Toto bylo vytvořeno Austin Baird, a povolený pro volný být použit na nějakém UI / UX projekt.

19. Principy ukázek

Jak se dále pustíte do Principu, naučíte se mnoho pokročilých technik workflow. Jedním z nejlepších freeries, který se dá jít dál, je ten, který byl vytvořen pro kreativní tým Yalantis.

Toto je zcela bezplatný zdroj pro uživatele principů ke stažení a hraní. Pokrývá několik triků, které ukazují, jak se stát profesionálním animátorem.

20. Rozbalovací nabídky

Menu dropdowns často používají bláznivé animace, aby zaujaly naši pozornost. Toto After Effects freebie používá a rozevírací schody animace na menu pro jednotlivé prvky, aby byly jako schody.

To nemusí být užitečné pro každého, ale je to jistě skvělý způsob, jak se dozvědět o animaci rozhraní After Effects.

Závěrečná slova

Všechny tyto zdroje jsou zcela zdarma ke stažení a hračky s vlastními projekty. Pokud jste zbrusu nová animace UX, zaručuji vám, že se naučíte hodně tím, že budete studovat tyto zdarma. Pokud víte, nějaké další skvělé zdroje neváhejte a odkazy v komentářích.