20 Hadiah Gratis Terbaik untuk Desainer Perancang Gerak UX
Desainer antarmuka lebih tertarik pada desain UX dengan maket animasi yang meniru tindakan pengguna. Maket UX ini mengandalkan gerak dengan efek animasi untuk didefinisikan bagaimana antarmuka harus menanggapi input pengguna.
Sebagian besar desainer UX belajar menggunakan perangkat lunak untuk membuat animasi ini. Dua pilihan yang paling populer adalah Adobe After Effects dan Principle (hanya OS X). Kamu bisa desain mockup antarmuka dalam program seperti Photoshop, dan pindahkan UI ke dalam program ini untuk animasi.
Jika Anda tertarik untuk mempelajari animasi UX, maka freebies akan menjadi aset yang luar biasa. Anda dapat mempelajari karya orang lain, dan bermain dengan desain mereka untuk melihat bagaimana semuanya bekerja.
Di bawah ini Anda akan menemukan gratis terbaik untuk pengguna Prinsip dan AE saja masuk ke desain gerak UX. Mereka pasti akan membantu Anda memahami cara kerja animasi UX, dan cara membuat sendiri.
1. Hapus Aksi
Menggesek adalah tindakan yang sangat umum di aplikasi seluler untuk berbagai tujuan. Tindakan gesekan iOS default digunakan untuk tampilkan opsi alternatif untuk mengedit / menghapus item, dan itulah yang Anda dapatkan dari freebie yang dibuat oleh Ramil Derogongun ini.
Anda dapat mengunduh file AEP gratis untuk After Effects, dan mencobanya sendiri. UI mengikuti a skema rangka gambar yang sangat dasar dengan input pengguna ditampilkan sebagai titik biru. Jenis perilaku pengguna ini adalah yang terbaik untuk ditampilkan melalui animasi karena memberi pengembang kesempatan untuk melihatnya bagaimana antarmuka seharusnya bekerja.
2. Gesek Widget
Berikut mockup animasi gesek lain yang berfokus pada item keranjang dalam tayangan slide. Dirancang oleh Leon Wu, animasi gesek gratis ini dilengkapi dengan file PRD yang dibuat untuk Prinsip.
Animasi ini sangat sederhana, dan menunjukkan bagaimana barang harus bergerak di layar ketika tekanan diterapkan. Anda juga merasakan untuk efek pelonggaran setiap kali swipe action dilepaskan.
3. Dualshock UI
Berikut ini adalah efek animasi UX yang sangat dinamis yang dibagikan oleh Alexander Boychenko. Maket ini didasarkan pada PlayStation Controller untuk UI aplikasi seluler. Ini termasuk file Sketsa dan Prinsip yang dapat Anda unduh secara gratis.
Freebie ini menunjukkan cara membuat transisi itu geser di antara layar. Tetapi Anda juga bisa melihat bagaimana elemen halaman digerakkan di sekitar layar di berbagai arah.
4. Hamburger Menu Animasi
Ikon hamburger masih semua kemarahan di antarmuka ponsel. Ikon menu ini gratis menunjukkan bagaimana caranya hidupkan ikon tiga batang menjadi ikon "X".
Itu adalah animasi berulang, jadi "X" juga menghidupkan kembali ikon menu hamburger. Ini adalah freebie yang bagus untuk dipelajari manipulasi vektor untuk elemen UI.
5. Snapster
Mockup gratis ini untuk aplikasi seluler bernama Snapster. Itu fokus di layar sambutan / orientasi tempat pengguna dapat melihat demo aplikasi, dan mempelajari cara kerjanya sebenarnya.
Ini adalah file PRD, dan sayangnya ini tidak cocok dengan After Effects, jadi hanya pengguna Prinsip yang dapat mengambil manfaat dari ini.
6. Memuat Spinners
Berikut ini adalah freepie AEP After Effects untuk pemintal pemuatan seluler. GIF animasi jenis ini menjadi sangat populer ketika Ajax memasuki pengembangan web arus utama.
Sekarang pemuat bergerak ini adalah selusin sepeser pun, dan mereka bahkan bisa sangat disesuaikan agar sesuai dengan antarmuka tertentu. Freebie ini dilengkapi dengan file AEP dan file Sketsa untuk mengedit vektor jika Anda ingin memodifikasinya.
7. Mainkan / Jeda Transisi
Efek transisi seringkali tampak sangat sederhana tetapi sebenarnya membutuhkan jumlah pekerjaan yang baik. Animasi play / pause yang dibuat oleh Alex Pronsky ini adalah contoh yang bagus.
Dengan freebie ini, Anda dapat memeriksa cara menghidupkan berbagai ikon garis tipis menjadi bentuk dan simbol. Setelah Anda mempelajari program ini, menjadi jauh lebih mudah untuk melakukan hal-hal semacam ini, jadi ada baiknya Anda memiliki barang gratis untuk penelitian..
8. iPhone Mockup
Meskipun freebie ini tidak secara langsung mengandung animasi, ini dimaksudkan untuk digunakan untuk pekerjaan produksi pada aplikasi iPhone. Ini adalah file iPhone 5S AEP gratis untuk digunakan dalam After Effects sebagai templat iPhone.
Cukup impor mockup antarmuka Anda, dan buat animasi di After Effects. Kemudian Anda bisa mencolokkannya ke mockup iPhone ini untuk berbagi dengan tim Anda.
9. Template iPhone
Ini yang lain Templat kustom After Effects dengan desain iPhone yang lebih modern. Freebie tersedia dari halaman ini di UX in Motion.
Semua yang ada di templat adalah sangat mudah untuk disesuaikan. Pada halaman unduhan, Anda juga akan menemukan bagian berlabel "Instruksi Video" tempat Anda dapat mempelajari cara menghidupkan aplikasi.
10. Animasi Mikro
Bahkan animasi aplikasi terkecil dapat membuat dampak besar pada pengalaman pengguna. Tampilan gratis ini a Animasi mikro "Suka" setiap kali pengguna "suka" posting.
Ikon hati memiliki animasi sendiri dengan foto profil pengguna ditambahkan ke tumpukan suka. Gratis ini hanya untuk Prinsip dan Anda juga punya .mov file untuk diunduh jika Anda mau.
11. Aplikasi Dompet
Dompet digital menjadi jauh lebih populer, dan freebie ini membuatnya lebih mudah untuk mendesainnya. Anda mendapatkan file Sketsa dengan semua elemen vektor mentah, ditambah file PRD gratis untuk animasi Prinsip.
Freebie ini dirancang oleh Sergey Bykov sebagai proyek sampingan kecil yang menyenangkan. Tapi itu bisa sangat mendidik jika Anda memisahkannya, dan bekerja dengan animasi langkah demi langkah.
12. iOS Switch
Dengan Apple 7 iOS, dunia mendapat saklar yang dirancang baru untuk label on / off. Ini menyebabkan banyak efek yang berbeda termasuk animasi gratis yang meniru tombol nyala / mati asli.
Dalam file ini, Anda mendapatkan efek animasi yang sangat sederhana dengan pelonggaran dasar. Sakelar bergerak, dan latar belakang berubah hijau, lalu kembali ketika sakelar dimatikan.
13. Aplikasi Ritter
Inilah freebie hebat lain yang dirilis oleh Sergey Bykov untuk apa yang ia sebut Ritter App. Ini termasuk file Sketsa gratis untuk antarmuka vektor, bersama dengan file PRD gratis untuk animasi Prinsip.
Anda akan mendapatkannya banyak animasi yang berbeda dalam freebie ini, jadi saya pikir itu akan lebih bermanfaat bagi perancang tingkat menengah ke lanjutan. Pemula dapat belajar banyak dari itu juga, tetapi mungkin memiliki kurva belajar yang curam.
14. Undang Teman
Kita semua tahu dan menyukai menu flyout ikon plus Google. Nah, Jardson Almeida menciptakan menu Friends Invite berdasarkan konsep Material Design yang sederhana.
Semuanya dirancang dalam Sketsa, dan diimpor ke Prinsip untuk animasi. Anda mendapatkan kedua file tersebut gratis untuk diunduh dan digunakan.
15. Gesek Kartu
Berikut ini freebie umum swiping lain yang dibuat hanya untuk pengguna Prinsip. Ini adalah sebuah antarmuka menggesek kartu dibuat untuk tampilan slide tujuan umum atau UI aplikasi asli.
Saya pikir ini adalah freebie yang sempurna untuk pemula yang baru saja masuk ke Prinsip. Tidak begitu rumit sehingga Anda akan merasa tersesat, namun tidak sesederhana itu sehingga Anda akan merasa diremehkan.
16. Mengobrol di Peta
Banyak desainer masih menggunakan Photoshop untuk antarmuka, dan ini juga berlaku untuk freebie peta chat ini. Anda dapat mengunduh file PSD untuk antarmuka, dan file PRD untuk animasi Prinsip.
Ini adalah animasi yang sangat jinak untuk gaya ini, tetapi masih terlihat bagus dan berfungsi persis seperti yang Anda harapkan di aplikasi peta / geolokasi sederhana.
17. Memuat Aplikasi
Aplikasi seluler sering digunakan memuat layar untuk memberi tahu pengunjung bahwa ada sesuatu yang terjadi di backend. Salah satu freebies favorit saya dalam koleksi ini adalah animasi pemuatan yang dibuat oleh Roman Wagner.
Ini memuat elemen individu satu setelah lainnya setelah layar memuat selesai. Animasi ini sangat halus, dan sepenuhnya kredibel dalam ranah desain aplikasi seluler.
18. Kartu Onboarding
Pengguna onboarding adalah langkah penting untuk setiap aplikasi seluler baru. Itu selalu baik untuk memasukkan beberapa animasi pada tahap ini, itu sebabnya ini animasi kartu onboarding bisa sangat membantu bagi desainer aplikasi.
Ini dibuat oleh Austin Baird, dan dirilis secara gratis untuk digunakan pada proyek UI / UX.
19. Demo Prinsip
Saat Anda mempelajari Prinsip lebih lanjut, Anda akan belajar banyak teknik alur kerja tingkat lanjut. Salah satu freebies terbaik untuk melangkah lebih jauh adalah yang ini dibuat untuk tim kreatif Yalantis.
Ini adalah sumber daya yang sepenuhnya gratis untuk diunduh dan dimainkan oleh pengguna Prinsip. Ini mencakup beberapa trik yang menunjukkan bagaimana menjadi pro di animasi Prinsip.
20. Menu Dropdown
Menu dropdown sering menggunakan animasi gila untuk menarik perhatian kita. Ini After Effects freebie menggunakan a animasi tangga dropdown pada menu untuk elemen individual untuk membuatnya jatuh seperti tangga.
Ini mungkin tidak berguna untuk semua orang, tetapi ini tentunya cara yang bagus untuk belajar tentang animasi antarmuka After Effects.
Kata-kata terakhir
Semua sumber daya ini sepenuhnya gratis untuk diunduh dan digunakan dalam proyek Anda sendiri. Jika Anda baru mengenal animasi UX, saya jamin Anda akan belajar banyak dengan mempelajari ini gratis. Jika Anda tahu ada sumber daya hebat lainnya, silakan lepaskan tautan di komentar.
