UI/UX tasarımında micro-interactions, kullanıcı etkileşimini yönlendirmek, geribildirim sağlamak ve erişilebilirliği güçlendirmek için kritik rol oynar. Bu yazı, kapsayıcı bir micro-interaction kütüphanesi oluşturmak için Lottie dosyalarını hazırlama sürecini derinlemesine ele alır. Amacımız, animasyonları performans odaklı, platforma özgü render davranışlarına uyumlu ve tasarım sistemiyle sıkı entegrasyon sağlayacak şekilde üretmektir.
Planlama ve performans odaklı tasarım
– Dosya bütçesi ve hedef platformlar: Lottie dosyaları, web, iOS ve Android üzerinde farklı performans profillerine sahiptir. 2–60 KB aralığında bir bütçe hedeflemek, çoğu micro-interaction için yeterlidir. Ancak tetikleyici sıklığı ve kapsamı arttırıldıkça toplam dosya boyutu ve render maliyeti büyür. Bu nedenle her etkileşim için ayrı bir küçük dosya yerine, benzer hareketleri paylaşan bir dizi modül oluşturmak daha verimlidir.
– State machine temelli tetikleyiciler: Hover, focus, active gibi durum değişimlerini tek bir Lottie dosyası içinde yönetmek yerine, koşullu anahtar kareler yerine state makineleriyle hareketleri organize etmek performansı ve okunabilirliği artırır.
– Erişilebilirlik ayrıntıları: prefers-reduced-motion özelliğine uyum, kullanıcı kontrolü (duraklat, durdur) ve animasyonun boğucu olmaması için kritik. Bu, kullanıcı deneyimini korurken tasarımın estetiğini de sürdürülebilir kılar.
Lottie dosyası mimarisi ve üretim akışı
– Input katmanı: tetikleyici olaylar daha çok React/Native tarafında, buton basımı, dokunuş veya odaklanma gibi olaylar olarak ele alınır. Bu katman, hangi durumun hangi anahtar kareyi tetiklediğini belirler.
– Animasyon katmanı: Bodymovin ile dışa aktarılacak Lottie JSON dosyasıdır. Renkler, boyutlar ve hareket desenleri, tasarım sistemindeki tokenlar ile eşleşmelidir.
– Geri bildirim katmanı: Animasyon sonlandığında state’e bağlı olarak yeniden tetikleme veya kilitleme davranışları için kontrol sağlar. Bu aşama, kullanıcıya net geribildirim verir.
– Performans katmanı: gereksiz kare sayılarının ve katmanların kaldırılması, vektör bazlı içeriklerin tercih edilmesi ve dışa aktarma ayarlarının optimize edilmesiyle elde edilir.
Dışa aktarma ve stil yönetimi
– Vektör temelli içerik önceliklendirilir; raster öğeler dosya boyutunu hızla şişirir. İç içe geçmiş katmanlar yerine basit şekiller ve trim paths gibi non-kompleks efektler kullanılır.
– Global renk tokenları ve stillerle çalışmak, temaları değiştirmeyi kolaylaştırır. Animasyonun renklerini proje düzeyinde token ile bağlamak, tema değişimlerinde tutarlılığı sağlar.
– Frame rate (fr) ve frame range (ip/op) değerleri, tetikleyicilerin uyumlu olması için dikkatli ayarlanır. Aşırı yüksek kare sayısı, cihaz performansını zorlar.
Uygulama aşamaları ve entegrasyon örnekleri
1) Tasarım sistemiyle uyumlu parametreler:
– Renk tokenları: #primary, #secondary gibi değerler; hareket süreleri: duration 150–350 ms aralığında belirlenir.
– Tetkikleyiciler: onTap, onHover, onFocus gibi olaylar için durum makineleri kurulabilir.
2) Üretim süreci:
– Bodymovin ile After Effects’ten dışa aktarım yapılır; minimum kullanım için trim paths ve maskeler tercih edilir.
– Erişilebilirlik entegrasyonu: prefers-reduced-motion kontrolü, kullanıcıya durdurma/geri alma seçenekleri sunar.
3) Entegrasyon örnekleri:
– Web için Lottie Web kütüphanesi veya React tabanlı çözümler kullanılır.
– Mobil için lottie-ios veya lottie-android ile uyumlu sürümler tercih edilir.
Kod parçaları
– Lottie JSON parçacığı (örnek yapı)
{
“v”: “5.7.4”,
“fr”: 30,
“ip”: 0,
“op”: 60,
“w”: 600,
“h”: 200,
“nm”: “micro-interaction-button”,
“ddd”: 0,
“assets”: [],
“layers”: [
{
“ddd”: 0,
“ind”: 1,
“ty”: 4,
“nm”: “ikon”,
“sr”: 1,
“ks”: { “o”: { “a”: 0, “k”: 100 }, “r”: { “a”: 0, “k”: 0 }, “p”: { “a”: 0, “k”: [300,100,0] }, “a”: { “a”: 0, “k”: [0,0,0] }, “s”: { “a”: 0, “k”: [100,100,100] } },
“shapes”: [
{ “ty”: “rc”, “d”: 1, “s”: { “a”: 0, “k”: [40,40] }, “p”: { “a”: 0, “k”: [0,0] }, “r”: { “a”: 0, “k”: 0 }, “nm”: “kutucuk” }
]
}
]
}
– React ile Lottie entegrasyonu (lottie-react kullanımı)
import { Lottie } from ‘lottie-react’;
import animationData from ‘./animations/microInteraction.json’;
function MicroButton() {
const [active, setActive] = useState(false);
return (
);
}
Bu yazıyı beğendiyseniz, sosyal medya hesaplarınızda paylaşarak daha fazla kişiye ulaşmasını sağlayabilirsiniz. 😊
Ayrıca bizi sosyal medyada da takip edebilirsiniz;
Instagram: @lupusoft
Facebook: @lupusoft
X: @lupusoft
LinkedIn: @lupusoft
Current time (ISO): 2026-04-01T10:01:28.024+03:00
Bir yanıt yazın