---
title: Interaction Design
category: product
entity_type: skill
price: ₺369
canonical: https://forgehouse.ai/tr/skiller/interaction-design/
lang: tr
hreflang_alt: https://forgehouse.ai/skills/interaction-design/
last_updated: 2026-06-20
---

# Interaction Design

> Design and implement microinteractions, motion design, transitions, and user feedback patterns.

Süslemek yerine iletişim kuran mikro etkileşimler, hareket, geçişler ve kullanıcı geri bildirimi tasarlamak için pratik bir araç seti. Hazır React ve CSS desenlerini zamanlama ölçekleri, easing eğrileri ve erişilebilirlik kurallarıyla birleştirir; böylece her animasyonun bir amacı olur ve 60fps'de kalır.

## Ne için kullanılır
- Anında geri bildirim için buton dokunuşu ve dalga efekti gibi mikro etkileşimler eklemek
- Yükleme durumları için iskelet ekranlar ve ilerleme göstergeleri kurmak
- Akıcı sayfa ve bileşen geçişleri tasarlamak
- Kaydırarak kapatma kartları gibi jest etkileşimleri oluşturmak
- Erişilebilir toggle, açılır menü ve bildirim animasyonları uygulamak
- Tüm uygulamada azaltılmış hareket tercihine saygı göstermek

## Faydalar
- Amaçlı hareketle arayüzleri cilalı ve güven verici hissettirin
- GPU dostu transform ve opacity'ye bağlı kalarak takılan animasyondan kaçının
- Kaygı değil ilerleme ileten yükleme durumlarıyla terk oranını düşürün
- Yerleşik azaltılmış hareket desteğiyle varsayılan olarak erişilebilir kalın

## Ne içerir
- Tutarlı hareket için zamanlama ölçeği ve easing fonksiyonu referansı
- Buton, toggle, sayfa geçişi ve kaydırma jesti için Framer Motion desenleri
- Yükleme durumları için iskelet ekran ve ilerleme çubuğu bileşenleri
- Dalga efekti ve geri bildirim etkileşim kodu
- Azaltılmış hareket CSS ve JavaScript yönetimi
- Takılan layout tetikleyici animasyonları ve aşırı animasyonu kapsayan anti-desen listesi

## Kimler için
Performans ya da erişilebilirlikten ödün vermeden web arayüzlerine hareket ve geri bildirim inceliği ekleyen ön uç geliştiricileri ve UI tasarımcıları.

## Nasıl çalışır
Skill bir arayüze hareket ve geri bildirim eklerken fiilen şu döngüyü çalıştırır. Her animasyon yerini hak etmek zorunda, yaptığı iş bu:
1. Her animasyona yazılmadan önce bir görev atar: geri bildirim (aksiyonun gerçekleştiğini onaylama), yönlendirme (öğeler nereden gelip nereye gidiyor), odak (dikkati çekme) veya süreklilik. Görevi olmayan dekoratif hareket kesilir.
2. Süreleri sabit bir zamanlama ölçeğinden seçer: hover ve tıklama gibi mikro geri bildirim 100-150ms, toggle ve dropdown 200-300ms, modal ve sayfa geçişi 300-500ms; girişte ease-out, çıkışta ease-in.
3. Çekirdek etkileşim kalıplarını uygular: yüklenirken layout'u koruyan skeleton ekranlar, yay fiziğiyle çalışan toggle ve butonlar, AnimatePresence sayfa geçişleri, tıklamada ripple geri bildirimi, 100px eşikli kaydırarak kapatma jestleri.
4. 60fps performans bütçesini zorlar: sadece GPU hızlandırmalı transform ve opacity anime edilir; width, height, top ve left yasaktır çünkü layout yeniden hesaplaması ve gözle görülür takılma tetikler.
5. prefers-reduced-motion desteğini hem CSS hem JS katmanında bağlar; hareketi kapatan kullanıcıda her animasyon anlık durum değişimine iner, aynı bilgiyi renk veya ikon değişimi taşır.
6. Sonucu tarayıcının Performance panelinde profiller: 16ms üzerindeki her kare takılma sayılır ve etkileşim yayınlanmadan kök nedeni düzeltilir.

## Sık sorulanlar
### Framer Motion kullanmıyoruz, sadece düz CSS yazıyoruz. İşe yarar mı?
Yarar. Desenlerin çoğu hem React Framer Motion hem CSS karşılığıyla verilir; zamanlama ölçeği ve easing eğrisi referansları ise kütüphaneden tamamen bağımsızdır. Skeleton ekran, progress göstergesi ve reduced motion desteği düz CSS ile de uygulanır.

### Animasyonları 60fps'te nasıl tutuyor?
Kural basit ama disiplinli: animasyon yalnızca GPU dostu transform ve opacity üzerinde döner. Layout tetikleyen özellikler anti-pattern listesinde tek tek işaretlenmiştir; reduced motion tercihi de hem CSS hem JavaScript tarafında varsayılan olarak ele alınır.

### Markama özel bir motion dili de tasarlar mı?
Hayır. Bu paket mikro etkileşim, geçiş ve geri bildirim desenleri sunar; amaç süsleme değil iletişimdir. Markaya özgü hareket kimliği ve sanat yönetimi ayrı bir tasarım işidir.

## Fiyat
₺369, tek seferlik, abonelik yok. KDV dahil.

İlgili rehber: [Yapay zekâ ile tasarım sistemi](https://forgehouse.ai/tr/rehberler/yapay-zeka-ile-tasarim-sistemi/)