Tarkibni aylantirish va boshqarish

1) Nima uchun aylantirishni o’ylab ko’rish kerak?

• kerakli kontentni izlashni tezlashtiradi (kamroq bosish - ko’proq skroll),
• nazorat tuyg’usini beradi (langarlar, «boshiga qaytish», yopishib qolgan filtrlar),
• resurslarni tejaydi (dangasa yuklash, virtualizatsiya),
• konversiyani oshiradi (kontent oldinroq ko’rinadi, CTA - «bosh barmoq zonasida»).

Prinsiplar: tezlik> zichlik; kontekst> shovqin; bashorat qilish qobiliyati> «sehr».

2) Aylantirish modellari: qachon tanlash kerak

1. Klassik paginatsiya

Qidiruv natijalari, jadvallar, hisobotlar uchun mos keladi. Ijobiy tomonlari: nazorat, barqaror URLlar, sahifalarda navigatsiya qilish. Kamchiliklar: ko’proq bosish, e’tiborni to’xtatish.

2. Cheksiz lenta (infinite scroll)

Past qiymatli fayllar va kataloglar uchun xato (yangiliklar, kontent kartochkalari). Afzalliklari: jalb qilish, kamroq bosish. Kamchiliklari: «yo’qolgan futer», qaytish qiyin, qiyin manzil.

3. Gibrid: «Yana koʻrsatish «/« Yana yuklash »

Murosa: vidjetlar tugma bo’yicha pachkalar bilan yuklanadi. Afzalliklari: renderlarni nazorat qilish, futerning ochiqligi, oldindan aytish mumkin. Kamchiliklar: hali ham chiziqli.

4. Segmentlangan aylantirish (boʻlimlar/langarlar)

Uzoq maqolalar, maʼlumotlar va wiki uchun. Ijobiy tomonlari: hujjat xaritasi, tez sakrash. Kamchiliklar: navigatsiya va mazmunni murakkablashtirish.

• Kataloglar/lobbi - gibrid yoki cheksiz + «boshiga qaytish».
• Qidirish/jadvallar - sahifa oʻlchamli va tez filtrli paginatsiya.
• Hujjatlar/longrid - TOC va o’qish uchun progress bar bo’lgan segmentlar.

3) Axborot arxitekturasi va joylashtirish

Yuqori shapka (sticky): qidirish, tez filtrlar, saralash; paydo boʻlganda tarkibni qoplamaydi.
Yon panel (desktop): mundarija (TOC), filtrlar; mobilda - chiquvchi sheet.
Sticky elementlari: yuqori filtrlar, langar menyusi, oʻqish uchun progress indikatori, «Back to Top».
Kontent kartochkalari: oldindan taxmin qilinadigan balandlik → maket sakrashlaridan kamroq.
Boʻsh holatlar: «boʻsh ekranlar» emas, balki skeletonlar/shimmerlar.

4) Aylantirishning xatti-harakati (mikromexanika)

Inertsiya va fizika: aylantirish «nativ» ko’rinishi kerak; tizim namunalarini buzmang.
O’q lok: gorizontlarda (karusel) harakatlanish chegarasidan keyin vertikal o’qni to’sib qo’ying.
Snap nuqtalar: karusellar, kartochkalar va ustaning qadamlari uchun mos keladi. Uzun lentalarda suiiste’mol qilmang.
Anchored scrolling: yuklashda foydalanuvchi diqqatini va nisbiy pozitsiyasini saqlang.
Scroll-chaining: Sahifaga sakrab oʻtmaslik uchun ichki konteynerlardagi hodisalarni cheklang.

5) E’tiborni boshqarish

Suzuvchi STA/« Depozit »/» O’ynash »: bosh barmog’ida kontentni to’sib qo’ymaydi.
Oʻqish uchun progress bar: yuqoridan chiziq, langarlar bilan sinxronlashtirilgan.
Sarlavha (TOC): joriy boʻlim yoritilgan, tez havolalar, yuqoriga tugmasi.
Sarlavhalar langarlari: URL dagi barqaror xeshlar; shlyapa balandligini kompensatsiya qilgan holda skroll.
«Yopishqoq» kontekstli filtrlar: 1-2 ekranni aylantirgandan keyin mahkamlash.

6) Katta lentalarni yuklash va rendering

Dangasa yuklash (lazy): rasmlar, videolar, bloklar. Ortish ostonasi - oldinda 1-2 ekran ~.
Virtualizatsiya/oyna renderi (windowing): faqat koʻrinadigan maydonni + buferni chizing.
Pleysholderlar/skeletonlar: oldindan aytib bo’ladigan o’lchamlar, «sakrashlarsiz».
Qo’shimcha yuklash: 20-60 element qadam; so’rovlar va rendyerlar o’rtasidagi balans.
Seksiyalarning keshi: Qaytarilganda joyingizni va yuklangan chankalarni tiklang.

7) Lentadagi kontentni boshqarish

Guruhlash: sana/toifalar bo’yicha; sarlavhalar yopishib qoladi.
Saralash va filtrlar: ochiq va ochiq, aktiv sharoitlarni koʻrsatish.
Burish/yoyish: uzun taʼriflar uchun - «Koʻproq koʻrsatish».
Skrolldagi media: ko’rinadigan joydan tashqarida videoning avto-pauzasi; faqat tovushsiz va aniq boshqariladigan avto-pley.
Xato holatlari: «Tarmoqni yoʻqotish», «Yuklab boʻlmadi» - retry va pozitsiyani saqlash bilan.

8) Foydalanish imkoniyati va mahalliylashtirish

Barcha harakatlar imo-ishorasiz mavjud: «Yana yuklash», «Boshlash», «TOC ochish» tugmalari.
Fokus-menejment: langarlar boʻylab navigatsiya qilishda - fokusni sarlavhaga koʻchirish.
Ekran o’quvchilari: aylantirish/TOS tugmalari uchun tavsiflar, tartib mantig’i.
RTL: gorizontal karusel va indikatorlarni aks ettiring.
Reduced motion: soddalashtirilgan effektlarni afzal koʻrganlar uchun «murakkab» animatsiyalar va parallakslarni oʻchiring.

9) Spektakl: maqsad va metrika

Asosiy imo-ishoralar/skrollning INP (Interaction to Next Paint): ≤ 200 ms.
Scroll-jank (skrollda kadrlarni oʻtkazib yuborish): <1% kadrlar> 16,7 ms namunaviy qurilmalarda.
CLS (sxemaning kumulyativ siljishi): ≤ 0,1 (ayniqsa yuklash vaqtida).
TBT/Blocking: skroll paytida og’ir sinxron hisoblashdan qoching.
Xotira: Uzoq sessiyalarda barqaror foydalanish (virtuallashtirishda oqish yoʻq).

• ’requestAnimationFrame’ orqali hisoblash kechiktirilgan passiv skroll tinglovchilari;
• «yengil» soyalar/aylantirish vaqtida murakkab blursiz;
• kartochkalarning qat’iy belgilangan yoki oldindan aytib bo’ladigan o’lchamlari;
• qayta ishlashni tejash (batched updates).

10) Telemetriya va voqealar

• ’scroll _ start ’/’ scroll _ end’ (manba, tezlik, yo’nalish),
• ’content _ load _ request/success/fail’ (paket, o’lcham),
• ’viewport _ item _ exposed’ (id, koʻrinish vaqti),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• ’list _ restore’ (pozitsiya, tiklash vaqti).

• Depth Reached (qancha ekran/elementlar koʻrilgan),
• Exposure Time per Item (o’rta/median),
• Load Error Rate, Retry Rate,
• Scroll Abandonment (keyingi partiyani yuklashdan oldin chiqarilgan),
• Return-to-Position Success.

11) Kontentning har xil turlari uchun patternlar

O’yinlar/tovarlar kataloglari: gibrid lenta, sticky-filtrlar, virtualizatsiya, «Ko’proq ko’rsatish» tugmasi.
Longrids/wiki: TOC, progress bar, langarlar, «boʻlimga havolani koʻchirish».
Yangiliklar turi: bo’linish sanalari bilan cheksiz lenta, «oxirgisiga qaytish».
Jadvallar/gridlar: paginatsiya + «N bo’yicha ko’rsatish», sarlavhalar va asosiy ustunlarni muzlatish, gorizontal skroll kerak bo’lganda.
Live-lentalar/logstrimlar: avto-podskroll «pauza/quvib yetish», bufer limiti.

12) Mobil xususiyatlar

Bosh barmoq zonasi: CTA va «boshlanishi» - pastdan; filtrlar - chiqayotgan sheetda.
«Tortish» futeri: faqat toʻxtashda koʻrsatish; skrolga xalaqit bermaslik.
Imo-ishoralar: gorizontal karusellar - o’q lokli; pull-to-refresh - faqat kutilgan joyda.
Silliq: «og’ir» ro’yxatlarda 60 FPS tekshirish; effektlar zichligini kamaytiring.

13) Antipatternlar

«Cheksiz lenta + chiqmaydigan yashirin futer» (hech qanday havola/aloqa/qoidalar mavjud emas).
Oʻqilganlarni siljitadigan yuklash - kontekstni yoʻqotish.
Matnni va CTAni yopuvchi suzuvchi panellar.
Kartochkalarning cheksiz balandligi → «sarson» layout-shift’lar.
Ko’rinish sohasida paydo bo’lganda tovushli mediani avtoto’zlashtirish.
Orqaga qaytishda pozitsiyani tiklash mavjud emas.

14) Joriy etish chek-varaqasi (sprintlar bo’yicha)

Sprint 1: model tanlash (paginatsiya/gibrid/cheksiz), bazaviy skroll-konteynerlar, sticky-shapka/filtrlar, «Back to Top».
Sprint 2: tasvir/bloklarni dangasa yuklash, skeletonlar, kartochkalarning oldindan aytib bo’ladigan o’lchamlari.
Sprint 3: ro’yxatlarni virtuallashtirish, pachka, langar/TOS pozitsiyalari va keshini saqlash.
Sprint 4: skroll telemetriyasi va eksponatlar, shuningdek, scroll-jank alertlari.
Sprint 5: qulaylik (fokus/o’quvchilar), RTL, reduced motion, klaviatura navigatsiyasi (desktop).
Sprint 6: nozik optimallashtirish: o’qli lok, snap nuqtalari, lentadagi UX media yaxshilanishi.

15) Glossariy

Infinite Scroll - elementlarni cheksiz yuklash.
Windowing/Virtualization - roʻyxatning faqat koʻrinadigan elementlari renderi.
Anchored Scrolling - yuklashda nisbiy pozitsiyani saqlab qolish.
Scroll-jank - aylantirishda kadrlarni oʻtkazib yuborish tufayli «tortishish».
TOC (Table of Contents) - langarli mundarija.
CLS/INP - maqom barqarorligi va javob berish metrikasi.

16) Jami

1. mos keladigan oqim modelini tanlaydi (paginatsiya/gibrid/cheksiz),

2. nazorat beradi (langarlar, TOC, sticky-filtrlar, «boshlang’ich»),

3. renderit tez va barqaror (dangasa yuklash, virtualizatsiya, siljishlarsiz),

4. ochiq va oldindan aytib bo’lmaydigan bo’lib qoladi,

5. telemetriyani o’lchaydi va ma’lumotlar asosida UXni yaxshilaydi.