20 Best Freebies untuk Pereka Motion Aspiring UX

Pereka antara muka mengambil minat yang lebih besar dalam reka bentuk UX dengan mockups animasi yang meniru tindakan pengguna. UX ini mengolok-olok bergantung kepada gerakan dengan kesan animasi untuk menentukan bagaimana antara muka harus memberi respons kepada input pengguna.

Pereka UX Kebanyakan belajar menggunakan perisian untuk membuat animasi ini. Kedua-dua pilihan yang paling popular ialah Adobe After Effects and Prinsip (OS X sahaja). Awak boleh antara muka reka bentuk mockups dalam program seperti Photoshop, dan memindahkan UI ke dalam program ini untuk animasi.

Sekiranya anda berminat untuk belajar animasi UX, maka freebies akan menjadi aset yang luar biasa. Anda boleh mengkaji karya orang lain, dan bermain dengan reka bentuk mereka untuk melihat bagaimana semuanya berfungsi.

Di bawah ini anda akan menemui hadiah percuma untuk pengguna Prinsip dan AE sahaja masuk ke reka bentuk gerakan UX. Mereka pasti akan membantu anda memahami cara kerja animasi UX, dan bagaimana untuk membina sendiri.

1. Padamkan Tindakan

Swiping adalah tindakan yang sangat biasa dalam aplikasi mudah alih untuk pelbagai tujuan. Tindakan sapu lalai iOS digunakan untuk paparkan pilihan alternatif untuk menyunting / memadam item, dan itulah yang anda dapatkan dalam freebie ini yang dibuat oleh Ramil Derogongun.

Anda boleh memuat turun fail AEP percuma untuk Selepas Kesan, dan cuba sendiri. UI mengikuti a skim wireframe yang sangat asas dengan input pengguna dipaparkan sebagai titik biru. Jenis tingkah laku pengguna ini adalah yang terbaik untuk ditunjukkan melalui animasi kerana ia memberi peluang kepada pemaju untuk melihatnya bagaimana antara muka harus berfungsi.

2. Widget Swipe

Berikut adalah satu lagi mockup animasi sapu yang memfokuskan pada item kereta dalam tayangan slaid. Direka oleh Leon Wu, animasi sapu percuma ini dilengkapi dengan fail PRD yang dibuat untuk Prinsip.

Animasi sangat mudah, dan menunjukkan bagaimana item harus bergerak di skrin apabila tekanan digunakan. Anda juga mendapat rasa untuk kesan pelonggaran setiap kali tindakan sapu dilepaskan.

3. Dualshock UI

Berikut adalah kesan animasi UX yang sangat dinamik yang dikongsi oleh Alexander Boychenko. Mockup ini didasarkan pada PlayStation Controller untuk UI aplikasi mudah alih. Ia termasuk lakaran dan Prinsip fail yang anda boleh muat turun secara percuma.

Freebie ini menunjukkan cara membuat peralihan itu sapu antara skrin. Tetapi anda juga dapat melihat bagaimana elemen halaman bernyawa di sekitar skrin dalam pelbagai arah.

4. Animasi Menu Hamburger

Ikon hamburger masih lagi kemarahan di antara muka mudah alih. Ikon menu freebie ini menunjukkan cara untuk hidupkan ikon tiga bar ke dalam ikon "X".

Ianya adalah animasi yang berulang, jadi "X" juga menghidupkan semula ke dalam ikon menu hamburger. Ini adalah freebie yang hebat untuk dipelajari manipulasi vektor untuk elemen UI.

5. Snapster

Mockup percuma ini adalah untuk aplikasi mudah alih yang dipanggil Snapster. Ia memberi tumpuan pada skrin selamat datang / onboarding di mana pengguna dapat melihat demo aplikasinya, dan ketahui cara ia berfungsi.

Ia adalah fail PRD, dan malangnya ini tidak bermain bagus dengan After Effects, jadi hanya pengguna Prinsip yang boleh mendapat manfaat daripada yang satu ini.

6. Loading Spinners

Berikut ialah AEP After Effects freebie untuk peminat pemuatan mudah alih. Jenis GIF animasi ini menjadi sangat popular apabila Ajax membuat jalan ke pembangunan web arus perdana.

Sekarang pemuat mudah alih ini adalah sedozen, dan mereka juga boleh sangat disesuaikan untuk menyesuaikan antara muka tertentu. Freebie ini dilengkapi dengan fail AEP dan fail lakaran untuk mengedit vektor jika anda ingin mengubahnya.

7. Putar / Jeda Peralihan

Kesan peralihan sering kelihatan sangat mudah tetapi sebenarnya memerlukan jumlah kerja yang baik. Ini permainan / jeda animasi yang dicipta oleh Alex Pronsky adalah contoh yang bagus.

Dengan freebie ini, anda boleh meneliti bagaimana untuk menghidupkan pelbagai ikon garis tipis ke dalam bentuk dan simbol. Sebaik sahaja anda mempelajari program ini, ia menjadi lebih mudah untuk melakukan perkara-perkara seperti ini, jadi ia membantu untuk mendapatkan hadiah percuma untuk penyelidikan anda.

8. Mockup iPhone

Walaupun freebie ini tidak mengandungi animasi secara langsung, ia digunakan untuk digunakan untuk kerja-kerja pengeluaran pada aplikasi iPhone. Ia adalah fail iPhone 5S AEP percuma untuk digunakan dalam After Effects sebagai templat iPhone.

Hanya mengimport mockup antara muka anda, dan buat animasi dalam Selepas Kesan. Kemudian anda boleh memasukkannya ke dalam mockup iPhone ini untuk berkongsi dengan pasukan anda.

9. Templat iPhone

Ini adalah satu lagi Templat Selepas Kesan adat dengan reka bentuk iPhone yang lebih moden. Freebie boleh didapati dari halaman ini di UX in Motion.

Semua dalam templat adalah sangat mudah untuk menyesuaikan. Pada halaman muat turun, anda juga akan menemui bahagian yang dilabel "Arahan Video" di mana anda boleh belajar bagaimana menghidupkan aplikasinya.

10. Mikro Animasi

Walaupun animasi aplikasi terkecil boleh memberi impak besar kepada pengalaman pengguna. Freebie ini memaparkan a "Seperti" animasi mikro setiap kali pengguna "suka" siaran.

Ikon hati mempunyai animasi tersendiri dengan foto profil pengguna ditambah kepada timbunan suka. Freebie ini hanya untuk Prinsip dan anda juga mempunyai .bergerak fail untuk memuat turun jika anda mahu.

11. App Wallet

Dompet digital menjadi lebih popular, dan freebie ini menjadikannya lebih mudah untuk mereka bentuk. Anda mendapat fail lakaran dengan semua unsur vektor mentah, ditambah dengan fail PRD percuma untuk animasi Prinsip.

Freebie ini direka oleh Sergey Bykov sebagai projek sampingan yang menyeronokkan. Tetapi ia boleh menjadi sangat pendidikan jika anda membuangnya, dan bekerja dengan animasi langkah demi langkah.

12. Suis iOS

Dengan iOS 7 Apple, dunia mendapat suis yang baru direka untuk label on / off. Ini membawa kepada banyak kesan yang berbeza termasuk animasi percuma yang meniru suis hidup / mati asli.

Dalam fail ini, anda mendapat kesan animasi yang sangat mudah dengan pelonggaran asas. Suis bergerak ke atas, dan latar belakang bertukar menjadi hijau, kemudian dibalikkan apabila suis dimatikan.

13. Ritter App

Berikut adalah satu lagi freebie besar yang dikeluarkan oleh Sergey Bykov untuk apa yang dia panggil App Ritter. Ini termasuk fail lakaran percuma untuk antara muka vektor, bersama-sama dengan fail PRD percuma untuk animasi Prinsip.

Anda akan mendapat banyak animasi yang berbeza dalam freebie ini, jadi saya fikir ia akan menjadi lebih berguna kepada pereka pertengahan-ke-maju. Pemula boleh belajar banyak dari itu juga, tetapi mungkin mempunyai keluk pembelajaran yang curam.

14. Jemput Rakan

Kita semua tahu dan suka dengan menu flyout ikon Google. Nah, Jardson Almeida mencipta menu Invite Friends berdasarkan konsep Design Material yang mudah.

Segala-galanya direka dalam lakaran, dan diimport ke Prinsip untuk animasi. Anda mendapatkan kedua-dua fail sebagai percuma untuk memuat turun dan mainan dengannya.

15. Kad Swipe

Berikut adalah satu lagi freebie swipe umum yang dibuat hanya untuk pengguna Prinsip. Ini adalah antara muka sapu kad dicipta untuk persembahan slaid umum atau UI aplikasi asli.

Saya fikir ini adalah freebie yang sempurna untuk pemula yang baru masuk ke Prinsip. Ia tidak begitu rumit bahawa anda akan berasa hilang, tetapi tidak begitu mudah bahawa anda akan berasa remeh.

16. Berbual di Peta

Ramai pereka masih menggunakan Photoshop untuk antara muka, dan ia juga benar mengenai freebie perbualan peta ini. Anda boleh memuat turun fail JPA untuk antara muka, dan fail PRD untuk animasi Prinsip.

Ini animasi mengherankan menjinakkan untuk gaya, tetapi masih kelihatan hebat dan berfungsi dengan tepat seperti yang anda harapkan dalam peta mudah / aplikasi geolokasi.

17. Memuatkan Apl

Aplikasi mudah alih sering digunakan memunggah skrin untuk memberitahu pelawat bahawa sesuatu yang berlaku di bahagian belakang. Salah satu hadiah kegemaran saya dalam koleksi ini adalah animasi pemuatan ini yang dibuat oleh Roman Wagner.

Ia memuat elemen individu satu demi satu sekali skrin pemuatan selesai. Animasi ini sangat lancar, dan benar-benar boleh dipercayai dalam bidang reka bentuk aplikasi mudah alih.

18. Kad Onboarding

Onboarding pengguna adalah langkah penting untuk setiap aplikasi mudah alih baru. Ia sentiasa bagus untuk menyertakan beberapa animasi pada tahap ini, itulah sebabnya animasi kad onboarding ini boleh sangat membantu pereka aplikasi.

Ini dibuat oleh Austin Baird, dan dibebaskan secara percuma untuk digunakan pada sebarang projek UI / UX.

19. Prinsip Demo

Ketika anda menyelidiki lebih lanjut ke dalam Prinsip, anda akan mempelajari banyak teknik aliran kerja lanjutan. Salah satu hadiah terbaik untuk pergi lebih jauh adalah yang dicipta untuk pasukan kreatif Yalantis.

Ini adalah sumber yang sepenuhnya bebas bagi pengguna Prinsip untuk memuat turun dan bermain dengannya. Ia merangkumi beberapa helah yang memperlihatkan bagaimana untuk menjadi pro di animasi Prinsip.

20. Menu Dropdown

Menu dropdown sering menggunakan animasi gila untuk menarik perhatian kita. Ini Selepas Kesan freebie menggunakan a animasi tangga jatuh pada menu untuk elemen individu untuk membuatnya jatuh seperti tangga.

Ini mungkin tidak berguna untuk semua orang tetapi sudah pasti cara yang bagus untuk belajar tentang animasi antara muka Selepas Kesan.

Perkataan Akhir

Semua sumber ini benar-benar bebas untuk memuat turun dan mainan dengan projek anda sendiri. Sekiranya anda baru untuk animasi UX saya menjamin anda akan belajar banyak dengan mengkaji ini percuma. Sekiranya anda tahu apa-apa sumber hebat yang lain, jangan lepaskan pautan dalam komen.