Derularea și gestionarea conținutului

1) De ce să vă gândiți la defilare

• accelerează căutarea conținutului potrivit (mai puține clicuri - mai multe defilări),
• oferă un sentiment de control (ancore, „înapoi în sus”, filtre aderate),
• economisește resurse (boot leneș, virtualizare),
• crește conversia (conținut văzut mai devreme, CTA în „zona degetului mare”).

Principii: viteza> densitate; context> zgomot; predictibilitate> „magie”.

2) Defilare modele: când să aleagă ce

1. Paginare clasică

Potrivit pentru rezultatele căutării, tabele, raportare. Pro: control, adrese URL stabile, navigare ușoară pe pagină. Contra: mai multe clicuri, atenție „lacune”.

2. Parcurgere infinită

Pentru feed-uri și cataloage cu un cost scăzut de eroare (știri, carduri de conținut). Pro: Angajament, mai puține clicuri. Contra: „subsol pierdut”, greu de returnat, adresare dificilă.

3. Hibrid: Arată mai mult/Încarcă mai mult

Compromis: widget-urile sunt încărcate în loturi pe buton. Pro: face control, disponibilitate subsol, predictibilitate. Contra: încă liniar.

4. Derulare segmentată (secțiuni/ancore)

Pentru articole lungi, referințe și wiki. Pro: harta documentelor, salturi rapide. Contra: complicarea navigării și a conținutului.

• Cataloage/lobby-uri - hibrid sau infinit + „du-te înapoi la început”.
• Căutare/tabele - paginare cu dimensiunea paginii și filtre rapide.
• Documentație/Longrid - segmente cu citire TOC și bară de progres.

3) Arhitectura și aspectul informației

Antetul superior (lipicios): căutare, filtre rapide, sortare; nu se suprapune conținutului atunci când apare.
Bara laterală (desktop): tabelul conținutului (TOC), filtre; pe mobil - foaie de plecare.
Elemente lipicioase: filtre de top, meniu de ancorare, citire indicator de progres, „Înapoi la partea de sus”.
Carduri de conținut: înălțime previzibilă de previzualizare → mai puține salturi de aspect.
Stări goale: Schelete/strălucitoare, nu „ecrane goale”.

4) Comportamentul de derulare (micromecanica)

Inerția și fizica: defilarea trebuie să apară „nativ”; nu rupe tiparele de sistem.
Blocare axială: Pentru orizonturi (carusele), blocați axa verticală după pragul de mișcare.
Snap puncte: Adecvat pentru caruseluri, carduri și pași expertul. Nu abuza în casete lungi.
Derulare ancorată: Mențineți focalizarea utilizatorului și poziția relativă la reîncărcare.
Scroll-lanț: Limitați „fluxul” de evenimente de la containere imbricate, astfel încât să nu „sari” la pagina.

5) Managementul atenției

Plutitoare STA/” Depozit „/” Play„: în zona degetului mare, nu se suprapune conținutul.
Progress bar reading: riglă pe partea de sus, sincronizat cu ancore.
Tabelul conținutului (TOC) - Subiectul curent evidențiat, comenzi rapide, butonul de sus.
Ancore de titlu: hashes stabil în URL; defilare cu compensarea înălțimii capacului.
Context „lipicios” filtre: fixați după defilare 1-2 ecrane.

6) Încărcarea și redarea benzilor mari

Încărcare leneșă: imagini, videoclipuri, blocuri. Pragul de încărcare este ~ 1-2 ecrane înainte.
Virtualizare/înfăşurare: Desenaţi numai zona vizibilă + tamponul.
Înlocuitori/schelete: dimensiuni previzibile, fără „salturi”.
Reîncărcarea lotului: etapa 20-60 elemente; echilibru între interogări și randări.
Cache partiție: Când merge înapoi, recupera pozițiile și bucăți încărcate.

7) Gestionați conținutul în bandă

Grupare: pe date/categorii; anteturile separatorului se lipesc.
Sortează și filtrează: vizibil și accesibil, cu indicarea condițiilor active.
Colaps/Expand: Pentru descrieri lungi, Arată mai mult.
Media în derulare: auto-pauză video din vedere; auto-redare numai fără sunet și cu control explicit.
Stări de eroare: „Pierderea rețelei”, „Eșec la încărcare” - cu reîncercarea și salvarea poziției.

8) Disponibilitate și localizare

Toate acțiunile sunt disponibile fără gesturi: „Descarcă mai mult”, „La început”, „TOC deschis”.
Managementul focalizării: atunci când navigați pe ancore - focalizarea transferului către titlul secțiunii.
Cititoare de ecran: descrieri pentru butoanele de derulare/TOC, logica comenzii.
RTL: Oglindă caruseluri orizontale și indicatori.
Mișcare redusă: Dezactivați animațiile „complexe” și paralaxa pentru cei care preferă efectele simplificate.

9) Performanță: Obiective și măsurători

INP (Interaction to Next Paint) gesturi cheie/defilare: ≤ 200 ms.
Scroll-jank: <1% cadre> 16. 7 ms pe dispozitive tipice.
CLS (schimbare cumulativă de aspect): ≤ 0. 1 (în special în timpul reîncărcării).
TBT/Blocare: Evitați computerele sincrone grele în timpul derulării.
Memorie: utilizare stabilă în timpul sesiunilor lungi (fără scurgeri în timpul virtualizării).

• ascultători pasivi de derulare, calcul amânat prin „requestAnimationFrame”;
• umbre „ușoare ”/fără estompare complexă în timpul defilării;
• Dimensiuni fixe sau previzibile ale cardurilor
• salvarea redraws (actualizări lotate).

10) Telemetrie și evenimente

• 'scroll _ start '/' scroll _ end' (sursă, viteză, direcţie),
• 'content _ load _ request/success/fail' (stivă, dimensiune),
• 'viewport _ item _ exposed' (id, timp de vizibilitate),
• 'toc _ click', 'anchor _ navigate', 'back _ to _ top _ click',
• 'list _ restore' (poziție, timp de restaurare).

• Adâncime atinsă (câte ecografii/elemente au fost vizualizate),
• Timp de expunere per obiect (medie/mediană),
• Rata de eroare de încărcare, Rata de reîncărcare,
• Scroll Abandonment (înainte ca următorul lot să fie încărcat),
• Succesul Return-to-Position.

11) Modele pentru diferite tipuri de conținut

Cataloage de jocuri/produse: bandă hibridă, filtre lipicioase, virtualizare, buton „Arată mai mult”.
Longrides/wiki: TOC, bara de progres, ancore, „copy link to section”.
Flux de știri: feed nesfârșit cu date separator, „du-te înapoi la ultima”.
Tabele/grile: pagination + „show by N”, rubrici de congelare și coloane cheie, defilare orizontală după cum este necesar.
Fluxuri live/fluxuri jurnal: auto-scroll cu „pauză/prinde din urmă”, limita tampon.

12) Funcții mobile

Zonele degetului mare: CTA și „la început” - de jos; filtre - în foaia de ieșire.
„Tragerea” subsolului: afișați numai atunci când este oprit; nu interfera cu defilarea.
Gesturi: carusele orizontale - cu blocare axiala; pull-to-refresh - numai acolo unde este de așteptat.
Netezime: 60 FPS verifica pe liste „grele”; reduce densitatea efectelor.

13) Antipattern

„Bandă fără sfârșit + subsol ascuns fără ieșire” (fără legături/contacte/reguli).
Sarcină suplimentară care schimbă pierderea contextului.
Panouri plutitoare care se suprapun textului și CTA.
Înălțimea nelimitată a cardurilor → „rătăcitor” layout-schimburi.
Setări automate cu sunet atunci când sunt vizibile.
Nici o recuperare poziție atunci când „înapoi”.

14) Lista de verificare a implementării (prin sprinturi)

Sprint 1: selectarea modelului (paginare/hibrid/infinit), containere de defilare de bază, pălărie/filtre lipicioase, „Înapoi la început”.
Sprint 2: încărcare leneș de imagini/blocuri, schelete, dimensiuni de card previzibile.
Sprint 3: listați virtualizarea, salvați poziția și spargeți memoria cache, ancorele/TOC.
Sprint 4: Scroll și telemetrie de expunere, și scroll-jank alerte.
Sprint 5: accesibilitate (focus/cititoare), RTL, mișcare redusă, navigare la tastatură (desktop).
Sprint 6: Optimizare fină: Axial Lock, Snap Points, UX Media Accesoriu în bandă.

15) Glosar

Infinit Scroll - încărcarea infinită a elementelor.
Windowing/Virtualizare - Redați numai elementele de listă vizibile.
Ancorat Scrolling - menținerea poziției relative în timpul reîncărcării.
Scroll-jank - „convulsie” din cauza sărind peste cadre atunci când defilare.
TOC (Tabelul conținutului) - tabelul conținutului cu ancore.
CLS/INP - măsurători ale stabilității și reacției layout-ului.

16) Linia de jos

1. selectează modelul corespunzător de curgere (paginare/hibrid/infinit),

2. dă control (ancore, TOC, filtre lipicioase, „la început”),

3. redare rapidă și stabilă (încărcare leneșă, virtualizare, fără schimburi),

4. rămâne accesibilă și previzibilă

5. măsoară telemetria și îmbunătățește UX pe baza datelor.