Hareket Tasarımı Prensipleri: 2026'da Arayüzler Gerçekte Nasıl Hareket Etmeli

Hareket, modern arayüz tasarımında en çok suistimal edilen araç. Her ekip bir animasyon showreel'i yayına alıyor, neredeyse hiçbiri bir hareket sistemi yayına almıyor. Sonuç: zıplayan, titreyen ve paralaks yaparak kullanıcının önüne çıkan ürün işleri. Kesilmesi gereken hareket.

Bu yazı çalışan tasarımcının versiyonu. Bir hareketin yerini hak edip etmediğine karar veren yedi prensip, tartışmayı bitiren bir süre ve easing referansı, ve gerçek kullanıcı testlerinde ayakta kalan kısa bir desen listesi. Dribbble döngüleri yok, marka filmleri yok, sadece kullanıcının zamanına saygı duyan ürün hareketi.

Hareket tasarımı aslında nedir

Hareket tasarımı, bir ürünün davranış katmanıdır. Elemanların zaman içinde nasıl girdiğini, çıktığını, tepki verdiğini ve birbiriyle ilişki kurduğunu belirler. İyi yapıldığında hareket, tek bir ekstra kelime metin yazmadan kullanıcıya nerede olduğunu, nereden geldiğini ve nereye gidebileceğini söyler.

Kötü yapıldığında hareket, kullanıcıya tasarımcının Framer'a erişimi olduğunu söyler. Dekoratif animasyon, bitmeyen yaylar ve sesle otomatik oynayan hero videoları farklı kostümler giymiş aynı hatadır. Hareket dikkate, bant genişliğine ve erişilebilirliğe mal olur. Faturayı hak etmesi gerekir.

Görsel hiyerarşi tasarımı yazısı gözün statik bir sayfayı nasıl okuduğunu anlatıyor. Hareket bir sonraki katman. Göze sadece nereye bakacağını değil, ne zaman bakacağını da söyler.

Hareketin iki işi var ve sadece iki

Yayındaki bir üründeki her animasyon iki işten birini yapar. İkisini de yapmıyorsa süstür, ve süs performans değerlendirmesinde kesilecek ilk şeydir.

Birinci iş: durum değişikliğini iletmek. Boşta olan bir buton artık basılı. Var olmayan bir modal artık açık. Boş olan bir satır artık veri tutuyor. Hareket, yeni duruma anında atlamak yerine geçişi göstererek değişimi okunur kılar.

İkinci iş: gözü yönlendirmek. Kullanıcı ileri butonuna dokunduğu için yeni bir eleman sağdan kayarak gelir. Kaydedildiği için bir kart alt navigasyona doğru küçülür. Hareket, kullanıcıya dokümantasyon okutmadan ürünün mekansal modelini öğretir.

Durum iletmeyen ya da gözü yönlendirmeyen hareket, kullanıcının dikkatini bedavaya harcıyor. Kes.

---

Ürün hareketinin yedi prensibi

Bunlar kollar. Birlikte çekersen hareket bilinçli okunur. Hiçbirini çekmezsen ürün kaskatı hissettirir. Çok fazlasını çekersen ürün oyuncağa döner.

Prensip 1: Cilalamadan önce amaç

Her animasyon tek bir soruyu yanıtlar: bu hareket olmasaydı kullanıcı ne kaybederdi? Cevap "hiçbir şey" ise hareket süstür. Cevap "ne olduğunu anlamazlardı" ise hareket yapısaldır ve kalır.

"Şuraya biraz animasyon ekleyelim" diye başlayan tasarımcılar gürültülü hissettiren ürünler çıkarır. "Bu anında atlarsa kullanıcı neyi kaçırır" diye başlayanlar canlı hissettiren ürünler çıkarır.

Prensip 2: Süre etkiyle eşleşir

Küçük olaylar için kısa animasyonlar. Büyükler için daha uzunlar.

Bir buton basışı 100 milisaniyenin altında biter. Bir sayfa geçişi 400'e kadar sürebilir. Tüm görünür alanı kaplayan bir modal 500'ü göze alabilir. Bunun ötesi, ilkinde sinematik hissettirse bile onuncu etkileşimde yavaş hissettirir.

Süre tablosu:

Bir üründe (pazarlama sayfasının aksine) 500 ms'nin üzerindeki her şey, tekrar gelen her kullanıcıya kesilen bir vergidir. İlk görüntüleme sinematiktir. Yüzüncüsü işkence.

Prensip 3: Duyguyu easing taşır

Doğrusal hareket robotiktir. Fiziksel dünya doğrusal hareket etmez, etmeyen arayüzler de mekanik hissettirir. Hareketi insani yapan şey easing eğrileridir.

Üç easing ürün işinin %90'ını karşılar.

• Ease-out: ekrana giren elemanlar için. Başta hızlı, sonda yavaş. Kullanıcının bir nesnenin yerine oturmasından beklediği şeyle örtüşür.
• Ease-in: ekrandan çıkan elemanlar için. Başta yavaş, sonda hızlı. Kullanıcı elemanın ayrılmadan önce çıkışı onayladığını görür.
• Ease-in-out: bir yerden başka bir yere giden elemanlar için. İki uçta da yumuşak. Fiziksel ataletle örtüşür.

Yay eğrileri dördüncü seçenek ve dikkatle kullanılmalı. Yaylar eğlenceli hissettirir ve dostça bir sesi olan tüketici uygulamalarına uyar. Finans yazılımında, sağlıkta ya da aşmanın dengesizlik gibi okunduğu her üründe yanlış hissettirir.

Prensip 4: Hareket, hareket tercihlerine saygı duyar

Her ürün bir prefers-reduced-motion yolu ile yayına çıkar. Vestibüler bozukluğu, migreni ya da dikkat hassasiyeti olan kullanıcılar, diğerlerinin keyif aldığı hareketten zarar görür. Ayarı yok saymak bir stil tercihi değil, erişilebilirlik başarısızlığıdır.

Kural, ayar açıkken hareketi tamamen kaldırmak değil. Mesafe tabanlı hareketi opaklık tabanlı hareketle değiştirmek.

40 piksel kayarak gelen kart, solarak beliren bir karta dönüşür. Durum değişikliği hâlâ iletilir, vestibüler tetikleyici kalkar. Web erişilebilirlik kontrol listesi yazısı bunun tam erişilebilirlik denetiminde nereye oturduğunu anlatıyor.

Prensip 5: Ürün genelinde tutarlılık

Hareket, tek bir ürünün tek bir karar setini verdiği hissini vermeli. İki farklı easing ve süreye sahip iki ekran, birbirine dikilmiş iki ürün gibi hissettirir. Neyin ters olduğunu ifade edemeseler bile kullanıcılar fark eder.

Çözüm bir hareket sistemi. Üç ila beş süre. Üç ila beş easing.

motion.short, motion.medium, motion.long, ease.enter, ease.exit, ease.standard gibi isimli token'lar. Tasarım sistemleri rehberi yazısı bunların renk ve tipografi token'larının yanında nerede durduğunu anlatıyor.

Hareket token'ları 2026'da opsiyonel değil. Ekip büyürken hareketin kaymasını önlemenin tek yolu bunlar. Serbest el animasyon yayınlayan üç kişilik bir ekip, üç görüşlü bir sistem üretir. Sıradaki işe alım dördüncüsünü ekler. Yirminci ekrana gelindiğinde ürünün tutarlı bir davranış katmanı yoktur.

Prensip 6: Hareket mekansal modeli izler

Her ürünün örtük bir haritası vardır. Yeni ekranlar sağda yaşar. Detay görünümleri bir karttan yakınlaşır. Overlay'ler yukarıdan iner. Navigasyon çekmeceleri yaşadıkları ekran kenarından gelir.

Hareket haritayı pekiştirir. Kullanıcının dokunduğu karttan yakınlaşan bir detay ekranı mekansal sürekliliği öğretir. Aynı detay ekranının yukarıdan düşmesi, örtük haritayı bozduğu için kullanıcıyı şaşırtır.

Tasarımcılar bunu yanlış yaptığında neredeyse her zaman animasyonu akışın bağlamında değil, tek başına seçtikleri içindir. Test: her geçişi tutarlı bir mekansal metaforla ilişkilendirebiliyor musun. Hayırsa hareket öğretmiyor, süslüyor.

Prensip 7: Hareketin bir bütçesi var

Her animasyon CPU'ya, bataryaya ve dikkate mal olur. Her birine bütçe koy.

CPU ve batarya bütçesi, sadece transform ve opacity'yi animasyona sokmak, width, height, top, left gibi layout tetikleyen özelliklerden kaçınmak demek. Modern tarayıcılar transform ve opacity'yi GPU'da işler, bu ucuzdur. Layout özelliklerini animasyona sokmak, orta segment Android telefonlarda performansı çökerten yeniden hesaplamalar zorlar.

Dikkat bütçesi eşzamanlı animasyonları sınırlamak demek. Neredeyse her zaman aynı anda tek şey hareket eder. İki hareket zaten fazla, üçü dikkat dağıtıcı.

Her elemanın scroll'da animasyon yaptığı bir sayfa tasarlanmış bir sayfa değil, konsantrasyon için bir tuzak kapağı. Core web vitals sözlüğü, scroll tetiklemeli animasyonun genelde mahvettiği performans rakamlarını anlatıyor.

---

Yerini hak eden desenler

Dribbble'da dolaşan onlarca hareket deseninden kısa bir liste gerçekten ürün işini iyileştirir. Gerisi kostüm.

Input üzerinde mikro etkileşimler

Basınca 2 piksel sıkışan buton, durumlar arasında yaylanan toggle, doğrulama hatasında hafifçe sarsılan input. Bunlar herhangi bir üründeki en ucuz ve en etkili hareketler. Kullanıcının sorusunu (sistem beni duydu mu) hiç metin kullanmadan 150 milisaniyenin altında yanıtlar.

Her birincil kontrolün bir mikro etkileşimi olmalı. Butonlar, toggle'lar, input'lar, checkbox'lar, radyolar, slider'lar. Kontrol kullanıcının dokunuşuna gözle görülür tepki vermiyorsa, backend hızlı olsa bile ürün yavaş hisseder. Focus state sözlüğü bu etkileşimleri yöneten erişilebilirlik kurallarını anlatıyor.

Listeler için kademeli açılışlar

Öğeler arasında 50 ms kademeyle solarak beliren bir kart listesi bilinçli okunur. Aynı listenin bir anda belirmesi ani okunur. Kademelendirme, ilk render'da eklenen birkaç yüz milisaniyeye hemen her zaman değer.

Sınır dört öğe. Dörtten sonra kademeyi katlama çizgisinin altında sürdür ve geri kalanı kullanıcının scroll'una bırak. Yirmi öğeyi sırayla kademelendirmek yavaş hissettirir, kullanıcı çoğunu zaten görmez.

Paylaşılan eleman geçişleri

Kullanıcının dokunduğu kart detay görünümünün başlığına dönüşür. Tam görüntüye genişleyen bir küçük resim. Bu geçişler mekansal modeli yüksek sesle ve ucuza öğretir, ve modern ürün işinde en etkileyici hissettiren tek hareket desenidir. Mühendislik maliyeti de gerektirirler, çoğu ekibin onları kesmesinin sebebi bu. An önemliyse (onboarding, kilit dönüşüm akışı, imza özellik) bedelini öde.

Zamana saygı duyan ilerleme göstergeleri

Uzun işlemlerde gerçek zamanlı ilerleyen progress bar'lar. Yüklenmesi 300 ms'den uzun süren verilerde iskelet ekranlar. Spinner'lar sadece iskeletin yanıp söneceği 1 saniyenin altındaki işlemler için. İlerleme hareketi güven hareketidir. Kullanıcıya sistemin çalıştığını söyler, beklerken umursadıkları tek şey budur.

Anlamlı yükleme durumları

Yükleme durumu tasarımın yokluğu değil, başlı başına bir tasarımdır. Kademeli açıklama sözlüğü, yükleme durumlarının en yavaş parçada bloklanmak yerine içeriği aşamalı olarak nasıl açabileceğini anlatıyor.

---

Dikkat edilmesi gereken hareket hataları

Her hareket incelemesi aynı hataları yakalar. Ürün bunlardan herhangi biriyle yayına çıkıyorsa, hareket sistemi tasarımın geri kalanını baltalıyordur.

Hero'da otomatik oynayan video. Dikkati kaçırır, performansı çökertir ve reduced-motion tercihlerini ihlal eder. Hareketsiz bir görselle ya da kullanıcı tetiklemeli oynatmayla değiştir.

Kimsenin istemediği paralaks. Paralaks, gövde metninde kullanılan marka renginin hareket karşılığıdır. Ekran görüntüsünde premium görünür, gerçek cihazda mide bulandırıcı okunur.

Her durum değişikliğinde zıplamalar. Yay hareketi baharattır, ana malzeme değil. Her butonun zıpladığı, her kartın yaylandığı ve her modalin aştığı bir ürün, öncelik belirleyemeyen bir üründür. Yayları kullanıcının hissetmesi gereken anlara sakla.

Sunucuyu geçen geçişler. Veri 200 ms'de gelirken 500 ms süren bir ekran geçişi, ürünü olduğundan yavaş hissettirir. Hareket gerçek işlemle eşleşmeli ya da onu geriden izlemeli, asla şişirmemeli.

Döngüsel arka plan animasyonu. Sonsuza dek hareket eden bir arka plan sonsuza dek dikkat dağıtıcı okunur. Kullanıcı her geri baktığında odağını kaybeder. Sadece hareketin kendisi amaçsa döngüye sok (bir durum, bir görselleştirme, bir kalp atışı göstergesi).

---

Sistemin içinde hareket

Hareket, renk ve tipografinin yanında tasarım sisteminin içine aittir. Onu geç aşama bir cila katmanı olarak görmek, çoğu ürünün tutarsız hareketle yayına çıkmasının sebebidir. Sistemin sahibi olan ekip, hareket token'larının da sahibidir.

En düşük hareket token seti:

İsimlendir, belgele, tasarım token'ları katmanında değişken olarak yayına al. Üründeki her yeni animasyon bu token'lardan birini kullanır, ya da kullanmamasının yazılı bir gerekçesi vardır. Beş tasarımcı ve yirmi mühendislik ekibinde hareketi tutarlı tutan şey bu disiplindir.

Bir hareket tasarımı nasıl incelenir

Yayına çıkmadan önce her animasyonu dört sorudan geçir.

Durum değişikliğini mi iletiyor, gözü mü yönlendiriyor. İkisi de değilse kes.

Süre tablosuna uyuyor mu. Uzun çalışıyorsa agresif hissedene kadar kısalt, sonra bir adım geri çek.

Bir token kullanıyor mu. Elle yapılmışsa sistemden kayar. Token'a refactor et ya da reddet.

prefers-reduced-motion'ı geçiyor mu. Ayarı aç. Hareket hâlâ vestibüler tepki tetikliyorsa sadece opaklıkla yeniden kur.

Dört soru. Animasyon başına beş dakika. Çoğu ürün bunların hiçbirini sormadan yayına çıkıyor, bu yüzden çoğu ürün tasarlanmış değil, dekore edilmiş gibi hissettiriyor.

Lansman sonrası denetimde hareket kaymasından dolayı özür dilemek yerine bu incelemeyi yayın anında yapan bir ekip istiyorsan, Brainy'yi işe al. Marka, web ve ürün arayüzünü, hareket ilk ekrandan itibaren sistemin içinde olacak şekilde kuruyoruz.

2026 koşullarında hareket

Üç değişim önemli. Hareketin hepsinden sağ çıkması gerek.

Yapay zeka odaklı arayüzler eski UI'lardan daha fazla hareket eder. Akan yanıtlar, canlı akıl yürütme izleri ve dinamik araç çağrıları sürekli ince hareket yaratır. Kural, yapay zeka hareketini öngörülebilir, ürün hareketini sakin tutmak. Her şey aynı anda animasyon yapıyorsa hiçbir şey önemli okunmaz.

Scroll tetiklemeli animasyonlar artık bir tarayıcı özelliği. CSS scroll-timeline, tasarımcıların JavaScript olmadan scroll konumuna göre animasyon yapmasına izin verir. Bu yeni bir kol ve çoğu ekip scroll'da çok fazla elemanı animasyona sokarak yanlış kullanıyor. Kural sayfa başına tek scroll tetiklemeli animasyon, genelde hero, bazen CTA.

Erişilebilirlik düzenlemeleri sıkılaşıyor. Avrupa Erişilebilirlik Yasası ve benzer yasalar reduced-motion'ın olsa iyi olur değil, yaptırıma bağlı olduğu anlamına geliyor. Reduced-motion yolu olmadan ürün yayınlamak bir tasarım görüşü değil, uyum riskidir. WCAG sözlüğü geçerli olan temel çizgileri anlatıyor.

---

SSS

En önemli hareket tasarımı prensipleri nelerdir?

Cilalamadan önce amaç, etkiyle eşleşen süre, duyguyu taşıyan easing, hareket tercihlerine saygı, ürün genelinde tutarlılık, mekansal model farkındalığı ve katı bir performans ve dikkat bütçesi. Yerini hak eden hareketi tek başına hiçbiri değil, yedi prensibin birlikte uygulanması üretir.

Bir UI animasyonu ne kadar sürmeli?

Neredeyse her ürün etkileşimi için 100 ila 500 milisaniye arası. Geri bildirim animasyonları (hover, basış) 100 ila 150 ms sürer. Küçük durum değişiklikleri 150 ila 300 ms. Sayfa ve modal geçişleri 300 ila 500 ms. Daha uzunu, ilk görüntülemede sinematik hissettirse bile tekrar gelen kullanıcılara vergi olur.

Hareket tasarımı ile animasyon arasındaki fark nedir?

Hareket tasarımı bir ürünün davranış katmanıdır, animasyon ise onu üretmek için kullanılan görsel tekniktir. Hareket tasarımı animasyonun hangi durum değişikliğini ilettiğini ve neden gerektiğini sorar. Animasyon hareketin nasıl göründüğünü sorar. Hareket tasarımı strateji, animasyon zanaattır. İyi ürün işi ikisini de ister.

Her etkileşimin animasyonu olmalı mı?

Hayır. Her birincil kontrol (buton, toggle, input) bir mikro etkileşimden fayda görür çünkü kullanıcı dokunuşta geri bildirim bekler. İkincil elemanlar görmez. Test: animasyonu kes ve kullanıcının bilgi kaybedip kaybetmediğine bak. Kaybetmiyorsa kesik kalsın.

prefers-reduced-motion nedir ve nasıl ele alınır?

Bir kullanıcının, genelde vestibüler ya da dikkat sebepleriyle, daha az hareket istediğini bildiren bir işletim sistemi ayarıdır. Doğru ele alış hareketi tamamen kaldırmak değil, mesafe tabanlı animasyonu opaklık tabanlı animasyonla değiştirmektir. Durum değişikliği hâlâ iletilir, vestibüler tetikleyici kalkar.

Hareket sistemi nasıl kurulur?

İsimli token'lar olarak üç süre ve üç easing ile başla. Her birinin nerede kullanıldığını belgele. Token'ları code review'da zorunlu kıl. Yeni token'ı sadece mevcut set gerçekten yanlış bir hareket üretiyorsa ekle, asla tek seferlik bir tasarımcı tercihini karşılamak için değil. Eksen başına üç ila beş token genelde bir ürünün ihtiyacı olan her şeydir.

Hareket bir zanaattır, özellik değil

Hareketi harika olan ürünler canlı hisseder. Olmayanlar kaskatı hisseder. Fazla hareketi olanlar demo showreel'i gibi hisseder. Bu üçü arasındaki mesafe küçük, ve ilkine giden tek yol sert kuralları ve dürüst incelemeleri olan bir sistem.

Yedi prensibi birlikte çek. Süre tablosunun içinde dur. Easing'leri niyetle seç. Renk ve tipografi token'larının yanında bir hareket token katmanı yayına al.

Her animasyonu yayına çıkmadan önce dört sorudan geçir. Ortaya çıkan ürün denemiş gibi görünmeyecek, düşünmüş gibi görünecek.

Marka, web ve ürün arayüzünde bu disiplini tek proje olarak yürüten bir ekip istiyorsan, Brainy'yi işe al. Hareket, her seferinde birinci sınıf bir sistem kararı.

İlgili okumalar

• Görsel Hiyerarşi Tasarımı
• Tasarım Sistemleri Rehberi
• Web Erişilebilirlik Kontrol Listesi
• Figma'dan Geliştiriciye Tasarım Teslimi