Pengaturan waktu animasi asimetris

Melanggar simetri memberikan kontras dan daya tarik untuk proyek Anda. Pelajari kapan dan bagaimana 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 pada nuansa, yang membuat antarmuka lebih menarik secara visual.

  • Gunakan pengaturan waktu animasi asimetris untuk menambahkan kepribadian dan kontras dengan pekerjaan Anda.
  • Selalu utamakan interaksi pengguna; gunakan durasi yang lebih singkat ketika merespons ketukan atau klik, dan simpan durasi yang lebih lama untuk hal lainnya.

Seperti kebanyakan "aturan" animasi, Anda harus bereksperimen untuk mencari tahu apa yang cocok untuk aplikasi Anda, tetapi ketika menyangkut pengalaman pengguna, pengguna terkenal tidak sabar. Aturan praktisnya adalah selalu merespons interaksi pengguna dengan cepat. Dengan demikian, sebagian besar tindakan pengguna adalah asimetris, sehingga animasi juga bisa begitu.

Misalnya, saat pengguna mengetuk untuk menampilkan navigasi sidebar, Anda harus menampilkannya secepat mungkin, dengan durasi sekitar 100 milidetik. Namun ketika pengguna menutup menu, Anda bisa menganimasikan tampilan keluar dengan sedikit lebih lambat, misalnya sekitar 300 md.

Sebaliknya, ketika Anda menghadirkan tampilan modal, ini biasanya untuk menampilkan kesalahan atau beberapa pesan penting lainnya. Dalam kasus seperti itu, Anda perlu membuat tampilan sedikit lebih lambat, sekali lagi sekitar 300 md, namun penutupan, yang dipicu pengguna, harus terjadi dengan sangat cepat.

Maka aturan mudahnya adalah sebagai berikut:

  • Untuk animasi UI yang dipicu oleh interaksi pengguna, seperti transisi tampilan atau menampilkan elemen, gunakan proses masuk yang cepat (durasi singkat), tetapi proses keluar yang lambat (durasi lebih lama).
  • Untuk animasi UI yang dipicu oleh kode Anda, seperti error atau tampilan modal, gunakan proses masuk yang lebih lambat (durasi lebih lama), tetapi proses keluar yang cepat (durasi singkat).