Simetriyi bozmak, projelerinize kontrast ve çekicilik kazandırır. Bu yaklaşımı projelerinize ne zaman ve nasıl uygulayacağınızı öğrenin.
Asimetrik animasyon zamanlaması, hem kişiliğinizi ifade etmenize hem de kullanıcı etkileşimlerine hızlı yanıt vermenize olanak tanıyarak kullanıcı deneyimini iyileştirir. Ayrıca, arayüzün görsel açıdan daha ilgi çekici olmasını sağlayan bir kontrast sağlar.
- Çalışmanıza kişilik ve kontrast katmak için asimetrik animasyon zamanlaması kullanın.
- Her zaman kullanıcının etkileşimini ön planda tutun. Dokunma veya tıklama işlemlerine yanıt verirken daha kısa süreler kullanın ve etkileşim olmadığında daha uzun süreler ayırın.
Animasyonla ilgili çoğu "kural"da 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ın sabırsız olduğu bilinir. Genel kural, kullanıcı etkileşimlerine her zaman hızlı yanıt vermek şeklindedir. Bununla birlikte, kullanıcının hareketi çoğu zaman asimetriktir ve bu nedenle animasyon da asimetrik olabilir.
Örneğin, bir kullanıcı kenar çubuğu gezinme menüsünü göstermek için dokunduğunda bu menüyü yaklaşık 100 ms süreyle mümkün olduğunca hızlı bir şekilde göstermeniz gerekir. Ancak kullanıcı menüyü kapattığında görünümü biraz daha yavaş animasyonla kapatabilirsiniz (ör. 300 ms civarında).
Buna karşılık, modal görünümü açtığınızda genellikle bir hata veya başka bir kritik mesaj gösterilir. Bu gibi durumlarda, görünümü biraz daha yavaş, yine 300 ms civarında göstermek istersiniz ancak kullanıcının tetiklediği kapatma işlemi çok hızlı gerçekleşmelidir.
Bu nedenle, genel kural şudur:
- Kullanıcının etkileşimiyle tetiklenen kullanıcı arayüzü animasyonlarında (ör. görüntü geçişleri veya bir öğenin gösterilmesi) hızlı bir giriş (kısa süre) ve yavaş bir çıkış (uzun süre) olmalıdır.
- Kodunuz tarafından tetiklenen kullanıcı arayüzü animasyonları (ör. hatalar veya modal görünümler) için yavaş bir giriş (daha uzun süre) ve hızlı bir bitiş (daha kısa süre) kullanın.