Tərkibi idarə etmək və idarə etmək

1) Niyə sürüşməni düşünmək lazımdır

• istədiyiniz məzmunun axtarışını sürətləndirir (daha az klik - daha çox ekran),
• nəzarət hissi verir (lövbərlər, «başlanğıc qayıtmaq», yapışmış filtrlər),
• resurslara qənaət edir (tənbəl yükləmə, virtuallaşdırma),
• konversiyanı artırır (məzmun daha əvvəl görünür, CTA - «baş barmaq zonasında»).

Prinsiplər: sürət> sıxlıq; kontekst> səs-küy; proqnozlaşdırma> «sehr».

2) Sürükləmə modelləri: nə zaman seçmək lazımdır

1. Klassik paginasiya

Axtarış nəticələri, cədvəllər, hesabatlar üçün uyğundur. Üstünlüklər: nəzarət, sabit URL, asan səhifə naviqasiyası. Mənfi cəhətləri: daha çox klik, diqqətin «qırılması».

2. Sonsuz lent (infinite scroll)

Fid və kataloqlar üçün aşağı dəyəri səhvlər (xəbərlər, məzmun kartları). Üstünlüklər: cəlb, daha az klik. Mənfi cəhətləri: «itirilmiş futer», geri qayıtmaq çətindir, çətin ünvan.

3. Hibrid: «Daha çox göstər «/« Daha çox yüklə »

Kompromis: widget 'lar düymə ilə paketlərlə yüklənir. Üstünlüklər: render nəzarəti, futerin mövcudluğu, proqnozlaşdırılabilirlik. Mənfi cəhətləri: hələ də xətti.

4. Seqmentləşdirilmiş sürüşmə (bölmələr/lövbərlər)

Uzun məqalələr, referanslar və wiki üçün. Üstünlüklər: sənəd xəritəsi, sürətli atlamalar. Mənfi cəhətləri: naviqasiya və içindəkilərin mürəkkəbləşməsi.

• Kataloqlar/lobbi - hibrid və ya sonsuz + «başlanğıc qayıt».
• Axtarış/cədvəllər - səhifə ölçüsü və sürətli filtrləri olan paginasiya.
• Sənədləşmə/longrid - TOC və proqres-bar oxu ilə seqmentlər.

3) İnformasiya arxitekturası və düzülüşü

Üst şapka (sticky): axtarış, sürətli filtrlər, çeşidləmə; göründüyü zaman məzmunu örtmür.
Yan panel (masaüstü): içindəkilər (TOC), filtrlər; mobil - gediş sheet.
Sticky elementləri: yuxarı filtrlər, lövbər menyusu, mütaliə göstəricisi, «Back to Top».
Məzmun kartları: proqnozlaşdırıla bilən preview hündürlüyü → daha az maket atlama.
Boş hallar: «boş ekranlar» deyil, skeletlər/simmerlər.

4) Sürükləmə davranışı (mikromexanika)

Ətalət və fizika: fırlanma «yerli» görünməlidir; sistem nümunələrini sındırmayın.
Oxlu lok: üfüqlərdə (karusel) hərəkət həddindən sonra şaquli oxu bloklayın.
Snap nöqtələri: karusellər, kartlar və usta addımları üçün uyğun. Uzun lentlərdə sui-istifadə etməyin.
Anchored scrolling: Yükləmə zamanı istifadəçi fokusunu və nisbi mövqeyini saxlayın.
Scroll-chaining: Səhifəyə «sıçramamaq» üçün daxili konteynerlərdən hadisələrin «axınını» məhdudlaşdırın.

5) Diqqətin idarə edilməsi

Üzən STA/« Depozit »/» Oyna »: baş barmaq zonasında, məzmunu örtmür.
Proqres-bar oxu: üst xətt, lövbərlərlə sinxronlaşdırılmışdır.
İçindəkilər (TOC): cari bölmə işıqlandırılır, sürətli linklər, yuxarı düyməsi.
Başlıqlar çapa: URL-də sabit hash; şapka hündürlüyü kompensasiya ilə scroll.
Kontekst «yapışqan» filtrlər: 1-2 ekranları sürüklədikdən sonra bərkidilir.

6) Böyük lentlərin yüklənməsi və render edilməsi

Tənbəl yükləmə (lazy): şəkillər, videolar, bloklar. Yükləmə həddi - qarşıda ~ 1-2 ekran.
Virtualizasiya/pəncərə render (windowing): yalnız görünən sahəni + buferi boyayın.
Pleysholders/skeletonlar: proqnozlaşdırıla bilən ölçülər, «sıçrayışlar» olmadan.
Partiyalar: addım 20-60 element; sorğular və render arasında balans.
Section Cache: geri qayıdarkən mövqelərinizi və yüklənmiş çantaları bərpa edin.

7) Lentdə məzmunun idarə edilməsi

Qruplaşdırma: tarixlərə/kateqoriyalara görə; bölücü başlıqlar yapışır.
Çeşidləmə və filtrlər: aktiv şərtlərin göstəricisi ilə görünür və mövcuddur.
Uzun təsvirlər üçün - «Daha çox göstər».
Scroll Media: görünən sahədən kənarda avtomatik video fasiləsi; yalnız səssiz və aydın nəzarət ilə avto-play.
Səhv halları: «Şəbəkə itkisi», «Yüklənə bilmədi» - retry və mövqeyi saxlama ilə.

8) Mövcudluq və lokalizasiya

Bütün hərəkətlər jestsiz mövcuddur: «Daha çox yükləyin», «Başlanğıc», «TOC açın» düyməsi.
Fokus menecmenti: lövbərlərdə naviqasiya zamanı - fokusun bölmənin başlığına köçürülməsi.
Ekran oxucuları: sürükləmə düymələri/TOS üçün təsvirlər, sifariş məntiqi.
RTL: üfüqi karusel və göstəriciləri güzgü.
Reduced motion: sadələşdirilmiş effektlərə üstünlük verənlər üçün «mürəkkəb» animasiyaları və paralaksları söndürün.

9) Performans: məqsədlər və metriklər

INP (Interaction to Next Paint) əsas jestlər/scroll: ≤ 200 ms.
Scroll-jank (scroll zamanı kadr boşluğu): <1% kadr> 16,7 ms standart cihazlarda.
CLS (məcmu düzən sürüşməsi): ≤ 0,1 (xüsusilə yükləmə zamanı).
TBT/Blocking: scroll zamanı ağır sinxron hesablamalardan çəkinin.
Yaddaş: Uzun sessiyalarda sabit istifadə (virtuallaşdırma zamanı sızma yoxdur).

• passiv scroll dinləyiciləri, 'requestAnimationFrame' vasitəsilə təxirə salınmış hesablamalar;
• «yüngül» kölgələr/sürüşmə zamanı mürəkkəb blur olmadan;
• sabit və ya proqnozlaşdırıla bilən kart ölçüləri;
• repaints qənaət (batched updates).

10) Telemetriya və hadisələr

• 'scroll _ start '/' scroll _ end' (mənbə, sürət, istiqamət),
• 'content _ load _ request/success/fail' (paket, ölçüsü),
• 'viewport _ item _ exposed' (id, görünmə vaxtı),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• 'list _ restore' (mövqe, bərpa vaxtı).

• Depth Reached (neçə ekran/elementlər baxıldı),
• Exposure Time per Item (orta/media),
• Load Error Rate, Retry Rate,
• Scroll Abandonment (növbəti partiyanı yükləmədən əvvəl çıxdı),
• Return-to-Position Success.

11) Müxtəlif məzmun növləri üçün nümunələr

Oyun/məhsul kataloqu: hibrid lent, sticky-filters, virtualizasiya, daha çox göstər düyməsi.
Longrids/wiki: TOC, tərəqqi bar, lövhələr, «bölməyə linki kopyalayın».
Xəbər fid: ayırıcı tarixlərlə sonsuz lent, «sonuncuya qayıt».
Cədvəllər/grids: pagination + «N göstərin», başlıqların və əsas sütunların dondurulması, lazım olduqda üfüqi skroll.
Live-lentlər/log-streams: «fasilə/yetişmək» ilə auto-podscroll, bufer limiti.

12) Mobil xüsusiyyətləri

Baş barmaq zonaları: CTA və «başlanğıc» - aşağıda; filtrlər - gediş sheet.
«Dartma» qutusu: yalnız dayanarkən göstərmək; scroll mane deyil.
Jestlər: üfüqi karusellər - ox dirəyi ilə; pull-to-refresh - yalnız gözlənilən yerdə.
Hamarlığı: «ağır» siyahılarda 60 FPS yoxlama; effektlərin sıxlığını azaltmaq.

13) Antipattern

«Sonsuz lent + çıxışı olmayan gizli örtük» (heç bir link/əlaqə/qaydalar).
Oxuduğunuzu dəyişdirən yükləmə kontekst itkisidir.
Üzən panellər, üst-üstə düşən mətn və CTA.
Limitsiz kart hündürlüyü → «gəzən» layout-shift '.
Görünmə sahəsində göründüyü zaman səsli medianın avtomobil istehsalı.
«Geri» mövqeyi bərpa yoxdur.

14) Giriş çek siyahısı (sprintlər üzrə)

Sprint 1: model seçimi (pagination/hibrid/sonsuz), əsas skroll konteynerləri, sticky-papaq/filtrlər, «Back to Top».
Sprint 2: təsvirlərin/blokların tənbəl yüklənməsi, skeletlər, kartların proqnozlaşdırıla bilən ölçüləri.
Sprint 3: virtuallaşdırma siyahıları, saxlama mövqeyi və paket cache, lövbər/TOS.
Sprint 4: telemetriya scroll və ekspozisiya, eləcə də scroll-jank alertlər.
Sprint 5: əlçatanlıq (fokus/oxucular), RTL, reduced motion, klaviatura naviqasiyası (masaüstü).
Sprint 6: incə optimizasiya: oxlu lok, snap nöqtələri, lentdə UX media yaxşılaşdırılması.

15) Sözlük

Infinite Scroll - sonsuz yükləmə elementləri.
Windowing/Virtualization - siyahıda yalnız görünən elementlərin render.
Anchored Scrolling - yükləmə zamanı nisbi mövqeyi saxlamaq.
Scroll-jank - sürtünmə zamanı kadrların ötürülməsinə görə «çəkilmə».
TOC (Table of Contents) - lövbərləri olan məzmun.
CLS/INP - maket sabitliyi və cavabdehlik metrikləri.

16) Yekun

1. uyğun axın modelini seçir (pagination/hibrid/sonsuz),

2. nəzarət verir (lövbərlər, TOC, sticky-filters, «başlanğıc»),

3. renderit sürətli və stabil (tənbəl yükləmə, virtuallaşdırma, dəyişmədən),

4. əlçatan və proqnozlaşdırıla bilən olaraq qalır,

5. telemetriya ölçür və məlumatlara əsaslanan UX yaxşılaşdırır.