Kaydırma ve içerik yönetimi

1) Neden kaydırma hakkında düşünün

• Doğru içeriği aramayı hızlandırır (daha az tıklama - daha fazla kaydırma),
• Bir kontrol hissi verir (çapalar, "yukarı doğru", yapışmış filtreler),
• Kaynak tasarrufu (tembel önyükleme, sanallaştırma),
• Dönüşümü artırır (daha önce görülen içerik, "başparmak bölgesinde" CTA).

Prensipler: hız> yoğunluk; bağlam> gürültü; Öngörülebilirlik> "büyü".

2) Kaydırma modelleri: ne zaman seçileceği

1. Klasik pagination

Arama sonuçları, tablolar, raporlama için uygundur. Artıları: kontrol, kararlı URL'ler, kolay sayfa gezinme. Eksileri: daha fazla tıklama, dikkat "boşluklar".

2. Sonsuz kaydırma

Düşük hata maliyetine sahip yayınlar ve kataloglar için (haberler, içerik kartları). Artıları: Etkileşim, daha az tıklama. Eksileri: "Kayıp altbilgi", geri dönüşü zor, zor adresleme.

3. Hibrit: Daha fazla göster/Daha fazla yükle

Uzlaşma: widget'lar düğme başına toplu olarak yüklenir. Artıları: render kontrolü, altbilgi kullanılabilirliği, öngörülebilirlik. Eksileri: hala doğrusal.

4. Bölümlere ayrılmış kaydırma (bölümler/çapalar)

Uzun makaleler, referanslar ve wiki için. Artılar: belge haritası, hızlı atlamalar. Eksileri: gezinme ve içindekiler tablosunu karmaşıklaştırmak.

• Kataloglar/lobiler - melez veya sonsuz + "başlangıca geri dön".
• Arama/tablolar - sayfa boyutu ve hızlı filtrelerle sayfalandırma.
• Dokümantasyon/Longrid - TOC ve ilerleme çubuğu okuma ile segmentler.

3) Bilgi mimarisi ve düzeni

Üst başlık (yapışkan): arama, hızlı filtreler, sıralama; göründüğünde içeriği örtüşmez.
Kenar çubuğu (masaüstü): içindekiler tablosu (TOC), filtreler; Mobil - bırakma sayfasında.
Yapışkan öğeler: üst filtreler, bağlantı menüsü, okuma ilerleme göstergesi, "Başa Dön".
İçerik kartları: öngörülebilir önizleme yüksekliği - daha az düzen atlar.
Boş durumlar: İskeletler/ışıltılar, "boş ekranlar'değil.

4) Kaydırma davranışı (mikromekanik)

Eylemsizlik ve fizik: kaydırma'yerli "görünmelidir; Sistem kalıplarını kırmayın.
Eksenel kilit: Ufuklar (karuseller) için, hareket eşiğinden sonra dikey ekseni kilitleyin.
Yapışma noktaları: Karuseller, kartlar ve sihirbaz adımları için uygundur. Uzun kasetlerde kötüye kullanmayın.
Bağlantılı kaydırma: Yeniden yüklerken kullanıcı odağını ve göreceli konumunu koruyun.
Kaydırma zincirleme: İç içe konteynerlerden gelen olayların "akışını" sınırlayın, böylece sayfaya "atlamayın".

5) Dikkat yönetimi

Yüzen STA/" Deposit "/" Play": başparmak alanında, içeriği örtüşmüyor.
İlerleme çubuğu okuma: üstteki cetvel, çapalarla senkronize edilir.
İçindekiler (TOC) - Mevcut konu vurgulanmış, kısayollar, üst düğme.
Başlık çapaları: URL'de kararlı hash'ler; Kapak yüksekliği telafisi ile kaydırma.
Bağlam "yapışkan" filtreler: 1-2 ekran kaydırdıktan sonra düzeltin.

6) Büyük bantların yüklenmesi ve işlenmesi

Tembel yükleme: görüntüler, videolar, bloklar. Yükleme eşiği ~ 1-2 ekran öndedir.
Sanallaştırma/pencereleme: Yalnızca görünür alanı + arabelleği çizin.
Yer tutucular/iskeletler: öngörülebilir boyutlar, "sıçramalar" yok.
Toplu yeniden yükleme: adım 20-60 elemanlar; sorgular ve render'lar arasındaki denge.
Bölüm Önbelleği: Geri dönerken, pozisyonları ve yüklenen parçaları kurtarın.

7) Teypteki içeriği yönetin

Gruplama: tarihlere/kategorilere göre; Ayırıcı başlıklar yapışır.
Sıralar ve filtreler: görünür ve erişilebilir, aktif koşulların göstergesi ile.
Daralt/Genişlet: Uzun açıklamalar için Daha Fazlasını Göster.
Kaydırmadaki medya: otomatik duraklatma videosu görüş alanı dışında; Sadece ses olmadan ve açık kontrolle otomatik oynatma.
Hata durumu: "Ağ kaybı", "Yüklenemedi" - yeniden deneme ve kaydetme konumu.

8) Kullanılabilirlik ve yerelleştirme

Tüm eylemler jestler olmadan kullanılabilir: "Daha fazla indir", "Başlangıca", "TOC'yi aç".
Odak yönetimi: çapalarda gezinirken - odağı bölüm başlığına aktarın.
Ekran okuyucular: kaydırma düğmeleri/TOC, sipariş mantığı için açıklamalar.
RTL: Ayna yatay karuseller ve göstergeler.
Azaltılmış hareket: Basitleştirilmiş efektleri tercih edenler için "karmaşık" animasyonları ve paralaksı devre dışı bırakın.

9) Performans: Hedefler ve Metrikler

INP (Interaction to Next Paint) tuş hareketleri/kaydırma: ≤ 200 ms.
Scroll-jank: <1 % frames> 16. Tipik cihazlarda 7 ms.
CLS (kümülatif mizanpaj kayması): ≤ 0. 1 (özellikle yeniden yükleme sırasında).
TBT/Engelleme: Kaydırma sırasında ağır senkron hesaplamadan kaçının.
Bellek: Uzun oturumlar sırasında kararlı kullanım (sanallaştırma sırasında sızıntı yok).

• Pasif kaydırma dinleyicileri, 'requestAnimationFrame' aracılığıyla ertelenmiş hesaplama;
• "hafif" gölgeler/kaydırırken karmaşık bulanıklık yok;
• Sabit veya öngörülebilir kart boyutları
• Yeniden çizimleri kaydetme (toplu güncellemeler).

10) Telemetri ve olaylar

• 'scroll _ start'/' scroll _ end' (kaynak, hız, yön),
• 'content _ load _ request/success/fail' (yığın, boyut),
• 'viewport _ item _ exposed' (id, görünürlük süresi),
• 'toc _ click', 'anchor _ navigate', 'back _ to _ top _ click',
• 'list _ restore' (konum, zamanı geri yükle).

• Ulaşılan Derinlik (kaç ecraps/elementin görüntülendiği),
• Öğe başına Maruz Kalma Süresi (ortalama/medyan),
• Yük Hata Oranı, Yeniden Deneme Oranı,
• Kaydırma Vazgeçme (bir sonraki parti yüklenmeden önce dışarı),
• Pozisyona Dönüş Başarısı.

11) Farklı içerik türleri için desenler

Oyun/ürün katalogları: hibrit bant, yapışkan filtreler, sanallaştırma, "Daha fazlasını göster" düğmesi.
Longrides/wiki: TOC, ilerleme çubuğu, çapalar, "bölüme bağlantıyı kopyala".
Haber akışı: ayırıcı tarihleri olan sonsuz besleme, "sona geri dön".
Tablolar/ızgaralar: sayfalama + "N ile göster", başlıkları ve anahtar sütunları dondurma, gerektiğinde yatay kaydırma.
Canlı yayınlar/günlük akışları: "pause/catch up", arabellek sınırı ile otomatik kaydırma.

12) Mobil özellikler

Başparmak bölgeleri: CTA ve "başlangıca" - aşağıdan; Filtreler - giden sayfada.
"Çekme" altbilgi: sadece durdurulduğunda göster; kaydırma işlemine müdahale etmeyin.
Hareketler: yatay karuseller - eksenel kilitli; Pull-to-refresh - sadece beklendiği yerde.
Pürüzsüzlük: 60 FPS'ağır "listelerde kontrol; Etkilerin yoğunluğunu azaltır.

13) Antipatterns

"Sonsuz bant + çıkışı olmayan gizli altbilgi" (bağlantı/kişi/kural yok).
Okuma - bağlam kaybını değiştiren ek yük.
Metin ve CTA örtüşen kayan paneller.
Sınırsız kart yüksekliği - "dolaşan" düzen kaymaları.
Göründüğünde sesli otomatik oynatma ortamı.
"Geri" geldiğinde pozisyon kurtarma yok.

14) Uygulama kontrol listesi (sprintlerle)

Sprint 1: model seçimi (pagination/hybrid/infinite), temel kaydırma kapları, yapışkan şapka/filtreler, "Back to Top".
Sprint 2: Görüntülerin/blokların tembel yüklenmesi, iskeletler, öngörülebilir kart boyutları.
Sprint 3: sanallaştırmayı listeleyin, konum kaydedin ve önbellek açın, çapalar/TOC.
Sprint 4: Kaydırma ve pozlama telemetrisi ve kaydırma-jank uyarıları.
Sprint 5: erişilebilirlik (odak/okuyucular), RTL, azaltılmış hareket, klavye navigasyonu (masaüstü).
Sprint 6: İnce Optimizasyon: Eksenel Kilit, Yapışma Noktaları, Bantta UX Ortam Geliştirme.

15) Sözlük

Sonsuz Kaydırma - öğelerin sonsuz yüklenmesi.
Pencereleme/Sanallaştırma - Yalnızca görünür liste öğelerini oluşturun.
Bağlantılı Kaydırma - yeniden yükleme sırasında göreceli konumu korur.
Scroll-jank - kaydırırken karelerin atlanması nedeniyle "sarsıntı".
TOC (İçindekiler) - ankrajlı içindekiler tablosu.
CLS/INP - düzen istikrarı ve yanıt verme metrikleri.

16) Alt satır

1. uygun akış modelini seçer (pagination/hybrid/infinite),

2. Kontrol sağlar (çapalar, TOC, yapışkan filtreler, "başlangıca"),

3. Hızlı ve kararlı hale getirme (tembel yükleme, sanallaştırma, vardiya yok),

4. erişilebilir ve öngörülebilir kalır,

5. Telemetriyi ölçer ve verilere dayanarak UX'i geliştirir.