Menyebabkan simetri memberikan kontras dan daya tarik bagi project Anda. Pelajari kapan dan cara menerapkannya ke proyek Anda.
Pengaturan waktu animasi asimetris meningkatkan pengalaman pengguna dengan memungkinkan Anda untuk mengekspresikan kepribadian sekaligus merespons interaksi pengguna dengan cepat. Hal ini juga memberikan kontras terhadap nuansa, yang membuat antarmuka lebih menarik secara visual.
- Gunakan pengaturan waktu animasi asimetris untuk menambahkan kepribadian dan kontras ke karya Anda.
- Selalu utamakan interaksi pengguna; gunakan durasi yang lebih singkat saat merespons ketukan atau klik, dan simpan durasi yang lebih lama untuk hal yang tidak penting.
Seperti kebanyakan "aturan" animasi, Anda harus bereksperimen untuk mencari tahu apa yang cocok untuk aplikasi Anda, tetapi dalam hal pengalaman pengguna, pengguna terkenal tidak sabar. Aturan praktisnya adalah selalu respons interaksi pengguna dengan cepat. Meskipun demikian, sering kali tindakan pengguna bersifat asimetris, sehingga animasinya juga demikian.
Misalnya, saat pengguna mengetuk untuk menampilkan navigasi sidebar, Anda harus menampilkannya secepat mungkin, dengan durasi sekitar 100 md. Namun, saat pengguna menutup menu, Anda dapat menganimasikan tampilan dengan sedikit lebih lambat, misalnya sekitar 300 md.
Sebaliknya, saat Anda menampilkan tampilan modal, hal ini biasanya untuk menampilkan pesan {i>error<i} atau beberapa pesan penting lainnya. Dalam kasus semacam ini, Anda sebaiknya membuat tampilan sedikit lebih lambat, juga sekitar 300 md, tetapi penutupan, yang dipicu pengguna, akan terjadi dengan sangat cepat.
Jadi, aturan praktis umumnya adalah sebagai berikut:
- Untuk animasi UI yang dipicu oleh interaksi pengguna, seperti transisi tampilan atau menampilkan elemen, gunakan intro cepat (durasi singkat), tetapi penutup lambat (durasi lebih panjang).
- Untuk animasi UI yang dipicu oleh kode, seperti error atau tampilan modal, gunakan pengantar yang lebih lambat (durasi lebih lama), tetapi proses keluar cepat (durasi singkat).