Simetriyi kırmak, projelerinize kontrast ve çekicilik katar. Bunu projelerinize ne zaman ve nasıl uygulayacağınızı öğrenin.
Asimetrik animasyon zamanlaması, kişiliğinizi ifade ederken aynı zamanda kullanıcı etkileşimlerine hızlı bir şekilde tepki vermenize olanak tanıyarak kullanıcı deneyimini iyileştirir. Ayrıca, arayüze zıtlık katarak arayüzün görsel açıdan daha çekici olmasını sağlıyor.
- Çalışmanıza kişilik ve kontrast eklemek için asimetrik animasyon zamanlamasını kullanın.
- Her zaman kullanıcı etkileşimine öncelik verin; dokunma veya tıklamalara yanıt verirken daha kısa süreler kullanın; istemediğiniz zamanlar için daha uzun süreler ayırın.
Animasyonların çoğu "kuralında" olduğu gibi, uygulamanız için neyin işe yaradığını bulmak üzere denemeler yapmalısınız. Ancak kullanıcı deneyimi söz konusu olduğunda kullanıcılar pek sabırsızdır. Genel kural, kullanıcı etkileşimine her zaman hızlı yanıt vermektir. Bununla birlikte, kullanıcının eylemi çoğu zaman asimetrik olduğundan animasyon da asimetrik olabilir.
Örneğin, bir kullanıcı kenar çubuğu menüsünü görüntülemek için dokunduğunda, bunu yaklaşık 100 ms süreyle mümkün olduğunca hızlı bir şekilde görüntülemelisiniz. Ancak kullanıcı menüyü kapattığında, görünümü biraz daha yavaş bir şekilde, örneğin 300 ms işareti civarında canlandırabilirsiniz.
Buna karşın, kalıcı bir görünüm açtığınızda bu normalde bir hata veya kritik başka bir mesajı görüntülemek için kullanılır. Bu tür durumlarda, görünümü biraz daha yavaş, tekrar 300 ms. civarında oluşturmak isteyebilirsiniz, ancak kullanıcının tetiklediği kapatma işlemi çok hızlı bir şekilde gerçekleştirilmelidir.
Genel kural olarak şudur:
- Görüntüleme geçişleri veya bir öğe gösterme gibi kullanıcının etkileşimiyle tetiklenen kullanıcı arayüzü animasyonlarında hızlı giriş (kısa süreli) ancak yavaş bir kapanış (daha uzun süre) kullanın.
- Hatalar veya kalıcı görüntülemeler gibi kodunuz tarafından tetiklenen kullanıcı arayüzü animasyonlarında daha yavaş bir giriş (daha uzun süre) ancak hızlı bir kapanış (kısa süreli) vardır.