Menghancurkan simetri memberikan kontras dan daya tarik pada project Anda. Pelajari kapan dan cara menerapkannya ke project Anda.
Pengaturan waktu animasi asimetris meningkatkan pengalaman pengguna dengan memungkinkan Anda mengekspresikan kepribadian sekaligus merespons interaksi pengguna dengan cepat. Warna ini juga memberikan kontras pada nuansa, yang membuat antarmuka lebih menarik secara visual.
- Gunakan pengaturan waktu animasi asimetris untuk menambahkan kepribadian dan kontras pada karya Anda.
- Selalu prioritaskan interaksi pengguna; gunakan durasi yang lebih singkat saat merespons ketukan atau klik, dan gunakan durasi yang lebih lama saat Anda tidak merespons.
Seperti sebagian besar "aturan" animasi, Anda harus bereksperimen untuk mengetahui apa yang cocok untuk aplikasi Anda, tetapi dalam hal pengalaman pengguna, pengguna terkenal tidak sabar. Prinsip dasarnya adalah selalu merespons interaksi pengguna dengan cepat. Meskipun demikian, sebagian besar tindakan pengguna bersifat asimetris, sehingga animasinya juga dapat asimetris.
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 keluar sedikit lebih lambat, misalnya, sekitar tanda 300 md.
Sebaliknya, saat Anda menampilkan tampilan modal, biasanya untuk menampilkan error atau pesan penting lainnya. Dalam kasus seperti itu, Anda sebaiknya menampilkan tampilan sedikit lebih lambat, lagi-lagi sekitar tanda 300 md, tetapi penutupan, yang dipicu pengguna, harus terjadi dengan sangat cepat.
Jadi, aturan umum adalah sebagai berikut:
- Untuk animasi UI yang dipicu oleh interaksi pengguna, seperti transisi tampilan atau menampilkan elemen, memiliki pengantar yang cepat (durasi singkat), tetapi outro yang lambat (durasi lebih lama).
- Untuk animasi UI yang dipicu oleh kode Anda, seperti error atau tampilan modal, buatlah pengantar yang lebih lambat (durasi lebih lama), tetapi outro yang cepat (durasi singkat).