12 Prinsip Desain Animasi UI yang Wajib Kamu Ketahui
Animasi, seringkali digambarkan sebagai tokoh yang digambar kemudian bergerak dan memiliki alur cerita. Itu adalah film animasi. Tetapi, tahukah kamu kalau animasi kini meluas dan tidak hanya dapat kamu temukan dalam film, lho.
Animasi kini merambat ke dalam desain UI dalam sebuah produk digital. Kamu dapat menyebutnya sebagai UI animasi. Mereka digunakan untuk menambahkan gerakan ke elemen UI untuk meningkatkan interaktivitas produk.
Dalam desain aimasi UI, animasi dapat bersifat fungsional atau dekoratif. Animasi fungsional akan memandu pengguna secara real-time, sedangkan animasi dekoratif adalah alat pencitraan dan branding yang penting bagi sebuah produk.
Lewat artikel ini, kamu akan menjelajahi 12 prinsip untuk membuat desain animasi UI/UX. Simak pembahasannya di bawah ini, ya!
- Pelonggaran (Easing)
Pelonggaran atau easing mengacu pada cara di mana gerakan tween berlangsung. Untuk menerapkan easing ke dalam gerakan tween adalah dengan menggunakan panel Properti. Nilai easing berkisar dari -100 hingga 100. Nilai negatif akan menciptakan perubahan bertahap yang cepat (disebut ease-in). Sementara nilai positif menciptakan perubahan bertahap yang lambat (disebut ease-out).
- Offset dan Delay
Pengguna seringkali abai dan melupakan kemungkinan bahwa setiap elemen dalam UI memiliki fungsinya masing-masing. Maka prinsip Offset dan Delay dapat menciptakan hierarki antara elemen UI. Mereka mengkomunikasikan kepada pengguna bahwa elemen tersebut saling terkait, namun berbeda.
- Parenting
Parenting menghubungkan satu elemen UI dengan properti elemen lainnya. Ketika sebuah properti elemen induk berubah, maka properti yang terhubung dari elemen tersebut juga akan berubah. Kedua elemen tersebut terhubung satu sama lain.
- Transformasi
Transformasi merujuk ketika satu elemen UI berubah menjadi bentuk lainnya. Misalnya, tombol unduh berubah menjadi bilah progres, yang ketika selesai berubah lagi menjadi ikon selesai.
Dari sisi UX, prinsip transformasi merupakan cara efektif untuk menunjukkan status kepada pengguna (visibility of system status). Ini dapat membantu UI menampilkan proses awal dan akhir, misalnya mengunduh file).
- Perubahan Nilai (value change)
Perubahan nilai mengkomunikasikan sifat dinamis dari representasi data dan memberi tahu pengguna bahwa data bersifat interaktif dan dapat dipengaruhi sampai batas tertentu. Saat data (numerik, berbasis teks, ataupun grafik) diperkenalkan dengan gerakan animasi, maka akan meningkatkan keinginan pengguna untuk terlibat dengan data tersebut.
- Dolly dan Zoom
Dolly dan Zoom memungkinkan pengguna untuk ‘bepergian’ melalui elemen UI secara spesifik. Dolly adalah sudut pandang mendekati elemen. Sedangkan Zoom adalah sudut pandang di mana elemen yang mendekat dalam layar pengguna.
- Dimensi (dimensionality)
Dimensi membuat elemen UI seolah memiliki banyak sisi interaktif, seperti objek fisik. Misalnya, elemen dibuat seolah-olah dapat dilipat atau mengambang.
Sebagai perangkat naratif, dimensi menyiratkan keterhubungan antara elemen UI yang berbeda dan membuat transisi layar mulus.
- Masking
Masking adalah pengungkapan pengungkapan dan penyembunyian bagian elemen UI. Dengan mengubah bentuk dan skala elemen, Masking menandakan perubahan guna sambil membuat elemen tersebut tetap dapat diidentifikasi.
- Kloning
Kloning adalah perilaku gerakan di mana satu elemen UI terpisah menjadi elemen lainnya. Kloning berguna untuk menyorot informasi penting dan menampilkan pilihan interaksi bagi pengguna.
- Overlay
Overlay menciptakan ilusi perbedaan latar depan/latar belakang dalam ruang 2D UI. Dengan menstimulasikan kedalaman, Overlay memungkinkan elemen disembunyikan dan ditampilkan sesuai dengan kebutuhan pengguna.
- Pengaburan (obscuration)
Pengaburan bekerja seperti pintu kaca yang kabur. Kita butuh interaksi untuk melihat apa yang ada di pintu tersebut. Nah, pengaburan atau obscuration bekerja dengan cara yang sama. Pengguna memerlukan interaksi dengan mengikuti petunjuk pada layar, seperti menu navigasi, layar kode sandi, dll.
- Paralaks (Parallax)
Paralaks ditampilkan ketika dua (atau lebih) elemen UI bergerak pada waktu yang sama tetapi dengan kecepatan yang berbeda. Ini akan membangun hirarki antar elemen UI.
Demikian adalah 12 prinsip desain animasi UI yang wajib kamu ketahui. Ingin tahu lebih banyak soal dunia animasi atau sedang mencari kuliah animasi di jakarta? Kamu dapat mengikuti program Digital Animation & Games di IDS | International Design School, lho.
Sumber: 12 Prinsip Animasi UI/UX