20 Najlepších Freebies pre aspirantov UX Motion Designers

Návrhári rozhrania zaujímajú väčší záujem o dizajn UX s animovanými modelmi, ktoré napodobňujú akcie používateľov. Tieto makety UX spoliehajte sa na pohyb s animovanými efektmi na definovanie ako by rozhranie malo reagovať na vstup používateľa.

Väčšina dizajnérov UX sa naučí používať softvér na vytvorenie týchto animácií. Dve najobľúbenejšie voľby sú Adobe After Effects a Principle (iba OS X). Môžeš návrhové rozhrania mockups v programe ako Photoshop a presunúť používateľské rozhrania do týchto programov pre animáciu.

Ak máte záujem naučiť sa animáciu UX, potom freebies bude obrovským prínosom. Môžete študovať prácu ostatných a hrať si s ich návrhmi, aby ste videli, ako to všetko funguje.

Nižšie nájdete najlepšie freebies pre používateľov Principle a AE dostať sa do návrhu pohybu UX. Určite vám pomôžu pochopiť ako funguje animácia UX, a ako vytvoriť svoje vlastné.

1. Odstrániť akciu

prejdením je veľmi bežná akcia v mobilných aplikáciách na rôzne účely. Predvolená akcia prúdenia iOS sa používa na zobrazovať alternatívne možnosti na úpravu / odstránenie položiek, a to je presne to, čo dostanete v tomto bezplatnom nástroji, ktorý vytvoril Ramil Derogongun.

Môžete si stiahnuť bezplatný súbor AEP pre After Effects a vyskúšať si sami. UI nasleduje a veľmi základný drôtový systém pričom užívateľský vstup sa zobrazí ako modrá bodka. Tieto typy správania používateľa sú najlepšie na zobrazenie prostredníctvom animácie pretože dáva vývojárom šancu vidieť ako by malo fungovať rozhranie.

2. Widget Swipe

Tu je ďalší animovaný obraz, ktorý sa zameriava na košíkoch položky v prezentácii. Navrhol Leon Wu, táto animácia s voľným pohybom prichádza s PRD súborom, ktorý je určený pre princíp.

Animácia je veľmi jednoduchá a ukazuje, ako sa majú položky pohybovať na obrazovke keď je aplikovaný tlak. Môžete tiež cítiť efekt uvoľnenia kedykoľvek sa uvoľní činnosť prstom.

3. Dualshock UI

Tu je neuveriteľne dynamický animovaný efekt UX, ktorý zdieľa Alexander Boychenko. Tento model je založený na ovládači PlayStation pre používateľské rozhranie pre mobilné aplikácie. Obsahuje súbor Sketch a Principle, ktorý si môžete stiahnuť zadarmo.

Toto freebie ukazuje, ako vytvoriť prechody, ktoré presuňte medzi obrazovkami. Ale môžete tiež vidieť, ako prvky stránky animovať okolo obrazovky v rôznych smeroch.

4. Hamburger Menu Animácia

Hamburgerové ikony sú stále v móde v mobilných rozhraniach. Táto ikona ponuky freebie ukazuje, ako animujte ikonu troch pruhov do ikony "X".

Je to opakovanie animácie, tak "X" tiež animuje späť do ikony menu hamburger. To je skvelý freebie sa dozvedieť vektorová manipulácia s prvkami používateľského rozhrania.

5. Snapster

Tento bezplatný model je určený pre mobilnú aplikáciu s názvom Snapster. Zameriava sa na uvítace / na palube obrazovke kde môžu používatelia vidieť ukážky aplikácie a zistiť, ako skutočne fungujú.

Je to súbor PRD a bohužiaľ to s aplikáciami After Effects nie je príjemné, takže z tohto môžu mať prospech iba používatelia princípov.

6. Nakláčanie spinierov

Tu je AEP After Effects freebie pre mobilné nakladače. Tieto typy animovaných GIF sa stali veľmi populárnymi, keď sa Ajax dostal do bežného vývoja webových stránok.

Teraz sú tieto mobilné nakladače desiatkami, a dokonca môžu byť silne prispôsobené aby sa prispôsobili niektorým rozhraniam. Táto bezplatná aplikácia obsahuje súbor AEP a súbor Sketch na úpravu vektorov, ak ich chcete upraviť.

7. Prechod / pozastavenie prechodu

Prechodové efekty často sa zdajú byť veľmi jednoduché, ale skutočne vyžadujú dobré množstvo práce. Táto animácia prehrávania / pauzy, ktorú vytvoril Alex Pronsky, je skvelým príkladom.

Pomocou tejto aplikácie môžete preskúmať, ako animovať rôzne tenké ikony do tvarov a symbolov. Akonáhle sa naučíte program, je to oveľa jednoduchšie urobiť tento typ veci, takže to pomáha mať freebies k dispozícii pre výskum.

8. iPhone Mockup

Zatiaľ čo toto freebie neobsahuje priamo animáciu, je určený na použitie pre výrobné práce na aplikáciách pre iPhone. Je to zadarmo iPhone 5S AEP súbor pre použitie v After Effects ako šablóna pre iPhone.

Jednoducho importujte svoje rozhranie a vytvorte animácie v programe After Effects. Potom ho môžete pripojiť do tohto modelu iPhone a zdieľať s tímom.

9. Šablóna pre iPhone

Toto je iný vlastná šablóna After Effects s modernejší dizajn iPhone. Freebie je k dispozícii na tejto stránke v aplikácii UX in Motion.

Všetko v šablóne je super jednoduché prispôsobiť. Na stránke sťahovania nájdete tiež sekciu s názvom Video inštrukcie, kde sa môžete naučiť animovať aplikáciu.

10. Mikro animácia

Dokonca aj najmenšie animácie aplikácií môžu mať veľký vplyv na používateľskú skúsenosť. Toto freebie zobrazí a "Ako" mikro animácia kedykoľvek používateľ "zaujíma" príspevok.

Ikona srdca má vlastnú animáciu s profilovou fotografiou používateľa, ktorá bola pridaná do stohu likes. Toto freebie je len pre princíp a máte tiež .mov súbor na stiahnutie, ak chcete.

11. Aplikácia peňaľenky

Digitálne peňaženky sú čoraz viac populárne, a to freebie uľahčuje design jeden. Dostanete súbor Skicu so všetkými prvkami surového vektora a bezplatný PRD súbor pre animáciu Princíp.

Toto freebie navrhol Sergey Bykov ako zábavný malý bočný projekt. Ale môže to byť veľmi vzdelávacie, ak si to rozdelíte a pracovať s animáciou krok za krokom.

12. Prepínač iOS

S iOS 7 od spoločnosti Apple získal svet čerstvo navrhnutý prepínač pre štítky zapínania a vypínania. To viedlo k mnohým rôznym účinkom vrátane bezplatnej animácie, ktorá napodobňuje natívne zapnutie / vypnutie.

V tomto súbore získate veľmi jednoduchý animovaný efekt so základným uvoľnením. Prepínač sa posunie a pozadie sa zmení na zelenú, potom sa spustí, keď je vypínač vypnutý.

13. Ritter App

Tu je ďalší veľký freebie, ktorý vydal Sergey Bykov za to, čo nazýva Ritter App. Zahŕňa bezplatný súbor Skic pre vektorové rozhranie spolu s voľným súborom PRD pre animáciu Princíp.

Dostanete to veľa rôznych animácií v tejto voľnej nohe, takže si myslím, že by to bolo užitočné pre stredne pokročilého až pokročilého dizajnéra. Začiatočníci sa z toho môžu naučiť veľa, ale môžu mať strmú krivku učenia.

14. Pozvite priateľov

Všetci vieme a milujeme pop-up menu ikonu plus spoločnosti Google. No, Jardson Almeida vytvoril menu Pozvať priateľov na základe jednoduchej koncepcie materiálového dizajnu.

Všetko bolo navrhnuté v náčrte a importované do animačného princípu. Dostanete oba súbory ako freebies na stiahnutie a hračky okolo.

15. Premiestnenie karty

Tu je ďalšia všeobecná pristupová voľnosť vytvorená iba pre používateľov princípu. Toto je prepojenie karty vytvorené pre všeobecné slideshow alebo užívateľské rozhrania aplikácie natívneho.

Myslím, že je to perfektné freebie pre začiatočníka, ktorý sa práve dostal do Princípu. Nie je to tak zložité, že sa budete cítiť stratený, ale nie je to tak jednoduché, že sa budete cítiť triviálne.

16. Rozhovor na mape

Mnoho návrhárov stále používa Photoshop pre rozhrania, a je to taktiež pravdivé pre túto mapu chat freebie. Môžete si stiahnuť súbor PSD pre rozhranie a PRD súbor pre animáciu Princíp.

Je to prekvapivo zdobená animácia pre štýl, ale stále vyzerá skvele a funguje presne tak, ako by ste očakávali v jednoduchej aplikácii pre mapovanie / geolokáciu.

17. Načítavanie aplikácií

Mobilné aplikácie sa často používajú nakladacie obrazovky Povedzte návštevníkom, že sa niečo deje v backende. Jednou z mojich najobľúbenejších zadarmo v tejto zbierke je táto načítavajúca animácia, ktorú vytvoril Roman Wagner.

Načíta jednotlivé prvky jeden po druhom po ukončení načítavania obrazovky. Táto animácia je veľmi hladká a úplne dôveryhodná v oblasti dizajnu mobilných aplikácií.

18. Na palube karty

Používateľ na palube je rozhodujúcim krokom pre každú novú mobilnú aplikáciu. Je vždy príjemné zahrnúť do tejto fázy animácie, preto tieto animácie na palube karty môžu byť pre projektantov aplikácií veľmi užitočné.

Vytvoril ho Austin Baird a bol bezplatne prepustený na použitie v každom projekte UI / UX.

19. Zásady Demo

Pri ďalšom pokračovaní v princípe sa naučíte množstvo pokročilých techník pracovného postupu. Jedným z najlepších freebies ísť ďalej je tento vytvorený pre tím Yalantis.

Jedná sa o úplne bezplatný zdroj pre používateľov Princípu, na ktorých sa sťahujú a hrajú. Zahŕňa niekoľko trikov, ktoré ukazujú, ako sa stať profesionálom v princípe animácie.

20. Rozbaľovacie ponuky

Rozbaľovacie ponuky často používajú bláznivé animácie na zachytenie našej pozornosti. Táto aplikácia After Effects používa a dropdown schody animácie v ponuke pre jednotlivé prvky, aby sa klesli ako schody.

To nemusí byť užitočné pre každého, ale určite je to skvelý spôsob, ako sa dozvedieť o animácii rozhrania After Effects.

Konečné slová

Všetky tieto zdroje sú úplne zadarmo na stiahnutie a hračky vo vašich vlastných projektoch. Ak ste úplne noví v animácii UX, zaručujem, že sa naučíte veľa tým, že sa zaoberáte týmito freebies. Ak poznáte ďalšie veľké zdroje, môžete v komentároch prepustiť odkazy.