Asimetrik animasyon zamanlaması

Simetriyi kırmak, projelerinize kontrast ve ilgi çekicilik kazandırır. Bunu projelerinize ne zaman ve nasıl uygulayacağınızı öğrenin.

Paul Lewis

Asimetrik animasyon zamanlaması, kişiliğinizi ifade etmenize ve kullanıcı etkileşimlerine hızlı yanıt vermenize olanak tanıyarak kullanıcı deneyimini iyileştirir. Ayrıca hisle kontrast oluşturarak arayüzü görsel olarak daha çekici hale getirir.

  • Çalışmanıza kişilik ve kontrast eklemek için asimetrik animasyon zamanlaması kullanın.
  • Kullanıcının etkileşimine her zaman öncelik verin; dokunma veya tıklamalara yanıt verirken daha kısa süreler kullanın ve olmayan zamanlar için daha uzun süreler ayırın.

Animasyonun çoğu "kuralında" olduğu gibi, uygulamanız için neyin işe yaradığını bulmak için denemeler yapmalısınız. Ancak, kullanıcı deneyimi söz konusu olduğunda, kullanıcılar genellikle sabırsızdır. Genel kural, kullanıcı etkileşimine her zaman hızlı yanıt vermektir. Bununla birlikte, kullanıcının eylemleri çoğu zaman asimetrik olur ve bu nedenle animasyon da olabilir.

Örneğin, bir kullanıcı kenar çubuğu gezinme çubuğunu görüntülemek için dokunduğunda onu mümkün olduğunca hızlı bir şekilde ve yaklaşık 100 ms süreyle göstermelisiniz. Bununla birlikte, kullanıcı menüyü kapattığında, görünüme biraz daha yavaş animasyon uygulayabilirsiniz, örneğin yaklaşık 300 ms.

Bunun aksine, kalıcı görünüm sunduğunuzda bu, normalde bir hata veya başka bir kritik mesaj göstermek için kullanılır. Bu gibi durumlarda, görünümü biraz daha yavaş, yani yaklaşık 300 ms civarında getirmek isteyebilirsiniz, ancak kullanıcının tetiklediği kapatma işleminin çok hızlı bir şekilde gerçekleşmesi gerekir.

Bu durumda genel kural şudur:

  • Görüntüleme geçişleri veya bir öğe gösterme gibi kullanıcı etkileşimi tarafından tetiklenen kullanıcı arayüzü animasyonlarında hızlı giriş (kısa süreli) ancak yavaş bir kapanış (daha uzun süreli) olur.
  • Kodunuz tarafından tetiklenen kullanıcı arayüzü animasyonlarının (hatalar veya kalıcı görünümler gibi) girişi daha yavaş (daha uzun süreli) ancak hızlı dönüşü (kısa süreli) olur.