20 legjobb freebies az UX Motion Designerek számára

Az interfész-tervezők nagyobb érdeklődést tanúsítanak az UX-dizájnnal, a felhasználói akciókat emuláló animált makettekkel. Ezek az UX modellek támaszkodjon a mozgásra animált effektusokkal hogyan kell reagálnia egy felhasználói felületre.

A legtöbb UX-tervező megtanulja, hogy használja ezeket az animációkat. A két legnépszerűbb választás az Adobe After Effects és az Principle (csak OS X). tudsz tervezési felület modellek olyan programban, mint a Photoshop, és mozgassa az UI-ket ezekbe a programba animációhoz.

Ha szeretne megtanulni az UX animációt, akkor a freebies hatalmas eszköz lesz. Megtanulhatja mások munkáját, és játsszon a tervekkel, hogy lássa, hogyan működik minden.

Az alábbiakban megtalálja a legjobb freebies-t az Principe és az AE felhasználók számára UX-es mozgás kialakítása. Biztosan segítenek megérteni hogyan működik az UX animáció, és hogyan készítsd el a sajátodat.

1. Törölje a műveletet

csúsztatása nagyon gyakori művelet a mobilalkalmazásokban különböző célokra. Az alapértelmezett iOS swipe akciót használják az elemek szerkesztésére / törlésére szolgáló alternatív lehetőségek megjelenítése, és pontosan ez az, amit a Ramil Derogongun által létrehozott freebie-ben kapsz.

Letöltheti az ingyenes AEP fájlt az After Effects programhoz, és próbálja ki magát. A felhasználói felület követ egy nagyon egyszerű drótvázrendszer a felhasználói bemenet kék pontként jelenik meg. Az ilyen típusú felhasználói magatartások a legjobbak animáción keresztül mert ez lehetőséget ad a fejlesztők számára hogyan működik az interfész.

2. Widget Swipe

Itt van egy másik csípő animált makett, amely összpontosít a diavetítéskor a kosarába. A Leon Wu által tervezett ingyenesen mozgatható animáció egy PRD-fájlt tartalmaz, amely az alapelvre készült.

Az animáció rendkívül egyszerű, és bemutatja, hogy az elemek hogyan mozoghatnak a képernyőn amikor a nyomást alkalmazzák. Ön is érzi magát a enyhíti a hatást amikor az ujjlenyomat művelet feloldódik.

3. Dualshock felhasználói felület

Itt egy hihetetlenül dinamikus UX animációs hatás, amelyet Alexander Boychenko oszt meg. Ez a makett a mobilalkalmazás felhasználói felületének PlayStation vezérlőjén alapul. Tartalmaz egy vázlatot és alapelvet tartalmazó fájlt, amelyet ingyenesen letölthet.

Ez a freebie megmutatja, hogyan hozhat létre átmeneteket lapozzunk a képernyők között. De meglátod, hogy az oldalelemek hogyan mozognak a képernyő körül különböző irányokban.

4. Hamburger menü animáció

A hamburger ikonok még mindig a mobil interfészek dühében vannak. Ez a menü ikon freebie megmutatja, hogyan kell animálja a három sávot az „X” ikonra.

Ez egy ismétlődő animáció, így az "X" is visszaad egy hamburger menüikonra. Ez egy nagy freebie, hogy megtudja vektor manipuláció az UI elemekhez.

5. Snapster

Ez az ingyenes makett a Snapster nevű mobilalkalmazás. Ez összpontosít az üdvözlő / fedélzeti képernyőn ahol a felhasználók megtekinthetik az alkalmazás demóját, és megtanulják, hogyan működik ténylegesen.

Ez egy PRD fájl, és sajnos ez nem játszik szépen az After Effects segítségével, így csak az Alapvető felhasználók részesülhetnek előnyben.

6. Spinnerek betöltése

Itt van egy AEP After Effects freebie mobil betöltő spinnerek. Az ilyen típusú animált GIF-ek nagyon népszerűvé váltak, amikor az Ajax a webes fejlesztésbe került.

Most ezek a mobil rakodók egy tucatnyi pilóta, és még lehetnek erősen testre szabott bizonyos interfészekhez. Ez a freebie egy AEP-fájlhoz és egy vázlatfájlhoz tartozik a vektorok szerkesztéséhez, ha módosítani szeretné azokat.

7. Lejátszás / szüneteltetés

Átmeneti hatások gyakran nagyon egyszerűnek tűnik, de valójában jó munkát igényel. Az Alex Pronsky által készített játék / szünet animáció nagyszerű példa.

Ezzel a freebie-vel megvizsgálhatja, hogyan lehet animálni a különböző vékony vonalakat formák és szimbólumok. Miután megtanulta a programot, sokkal könnyebbé válik az ilyen jellegű dolgok elvégzése, így segít abban, hogy a freebies a kutatási célra rendelkezésre álljon..

8. iPhone-makett

Bár ez a freebie nem tartalmaz közvetlenül animációt, azt használni kell az iPhone-alkalmazások gyártási munkáira. Ez egy ingyenes iPhone 5S AEP fájl az After Effects alkalmazásban, mint iPhone sablon.

Egyszerűen importálja az interfész modelljét, és hozza létre az animációkat az After Effects programban. Ezután csatlakoztathatja azt ehhez az iPhone-maketthez, hogy megoszthassa a csapatát.

9. iPhone sablon

Ez egy másik Egyéni After Effects sablon val,-vel modern iPhone-design. A freebie ezen az oldalon elérhető az UX in Motion oldalon.

Minden a sablonban van szuper könnyű testreszabható. A letöltési oldalon talál egy "Videó utasítások" c. Részt is, ahol megtudhatja, hogyan kell animálni az alkalmazást.

10. Mikro-animáció

Még a legkisebb alkalmazás animációk is nagy hatással lehetnek a felhasználói élményre. Ez a freebie a "Like" mikro animáció amikor egy felhasználó „szeret” egy bejegyzést.

A szív ikonra saját animációval rendelkezik a felhasználó profilfotójával hozzáadta a tetszőleges veremhez. Ez a freebie csak az alapelvre vonatkozik, és van egy is .mov letölteni kívánt fájl.

11. Mobiltárca alkalmazás

A digitális pénztárcák egyre népszerűbbé válnak, és ez a freebie megkönnyíti a tervezését. Egy vázlatfájlt kap minden nyers vektorelemmel, valamint egy ingyenes PRD fájlt az Alapvető animációhoz.

Ezt a freebie-t Sergey Bykov tervezte szórakoztató kis oldali projektként. De nagyon izgalmas lehet, ha elveszíti egymást, és lépésről lépésre dolgozhat az animációval.

12. iOS kapcsoló

Az Apple iOS 7 rendszerével a világ frissen kialakított kapcsolót kapott a be / ki címkékhez. Ez sok különböző hatáshoz vezetett, beleértve az ingyenes animációt is utánozza a natív on / off kapcsolót.

Ebben a fájlban egy nagyon egyszerű animációs hatás érhető el az alapvető könnyítéssel. A kapcsoló áthalad, és a háttér zöldre vált, majd visszaáll, ha a kapcsoló ki van kapcsolva.

13. Ritter alkalmazás

Itt egy újabb nagy freebie, amit Sergey Bykov kiadott a Ritter App-nek. Ez magában foglalja az ingyenes vázlatfájlt a vektor interfészhez, valamint egy szabad PRD fájlt az Alapvető animációhoz.

Fogsz kapni sok különböző animáció ebben a freebie-ben, ezért úgy gondolom, hogy hasznosabb lenne egy közepes és fejlett tervező számára. A kezdők is sokat tanulhatnak belőle, de meredek tanulási görbe lehet.

14. Barátok meghívása

Mindannyian tudjuk és szeretjük a Google plusz ikont kitörő menüt. Nos, Jardson Almeida létrehozott egy baráti meghívó menüt egy egyszerű Anyagtervezési koncepció alapján.

Mindent a vázlatban terveztek, és az animáció alapelvébe importálták. Mindkét fájlt ingyenesen töltheted le, és letöltheted a játékot.

15. Kártyatörlés

Itt van egy másik, általános elválasztó freebie, amely csak az Alapvető felhasználók számára készült. Ez egy kártya swipe interfész általános célú diavetítéshez vagy natív alkalmazás-felhasználói felülethez készült.

Azt hiszem, ez a tökéletes freebie egy kezdőnek, aki csak bejut az alapelvbe. Nem annyira bonyolult, hogy elveszettnek fogod érezni magát, de nem olyan egyszerű, hogy trivializáltnak érzed magad.

16. Csevegés a térképen

Sok tervező még mindig használja a Photoshop-ot interfészekhez, és ez igaz a térképes chat freebie-re is. Letölthet egy PSD fájlt az interfészhez, és egy PRD fájlt az Alapvető animációhoz.

Ez egy meglepően szelíd animáció a stílushoz, de még mindig jól néz ki, és pontosan úgy működik, ahogyan egy egyszerű térképen / földrajzi elhelyezési alkalmazásban elvárná.

17. Alkalmazás betöltése

A mobilalkalmazások gyakran használatosak képernyők betöltése megmondani a látogatóknak, hogy valami történik a backendben. Az egyik kedvenc freebiesem ebben a gyűjteményben a Roman Wagner által készített betöltő animáció.

Ez betölti az egyes elemeket egyik a másik után a betöltőképernyő befejezése után. Ez az animáció nagyon sima és teljesen hiteles a mobilalkalmazás területén.

18. Onboarding kártyák

Felhasználó a fedélzeten minden új mobilalkalmazás számára kulcsfontosságú lépés. Mindig örülök, hogy ebben a szakaszban néhány animációt is beiktathatunk, ezért ezek az onboarding-animációk nagyon hasznosak lehetnek az app-tervezők számára.

Ezt Austin Baird hozta létre, és szabadon bocsátották ki bármelyik UI / UX projektben.

19. Alapelvek

Ahogy továbbfejlődik az alapelvbe, sok fejlett munkafolyamat-technikát tanulhat meg. Az egyik legjobb freebies, ami tovább megy, a Yalantis kreatív csapat számára készült.

Ez egy teljesen ingyenes erőforrás a felhasználók számára a letöltéshez és a lejátszáshoz. Néhány trükköt mutatja be, hogy hogyan válhat pro-animációban.

20. A legördülő menük

A menü legördülő listái gyakran őrült animációkat alkalmaznak a figyelmünk rögzítésére. Ez az After Effects freebie a legördülő lépcső animáció az egyes elemek menüjében a lépcsőkhöz hasonlóan.

Lehet, hogy ez nem mindenki számára hasznos, de biztosan nagyszerű módja az After Effects felület animációjának megismerésére.

Végső szavak

Mindezek a források teljesen ingyenesen letölthetők és saját játékukban játszhatók le. Ha teljesen új vagy az UX animációra, akkor garantálom, hogy sokat tanulhatsz a freebies tanulmányozásával. Ha bármilyen más nagyszerű erőforrást ismer, nyugodtan hagyja a linkeket a megjegyzésekbe.