Мазмұнды жылжыту және басқару

1) Неге айналдыруды ойластыру керек

• қажетті мазмұнды іздеуді жеделдетеді (аз басу - көп скролл),
• бақылау сезімін береді (зәкірлер, «басынан қайту», жабысқан сүзгілер),
• ресурстарды үнемдейді (жалқау жүктеме, виртуалдандыру),
• конверсияны ұлғайтады (контент бұрын көрінеді, CTA - «бас саусақ аймағында»).

Қағидаттар: жылдамдық> тығыздық; контекст> шу; болжамдылық> «сиқыр».

2) Жылжыту модельдері: қашан таңдау керек

1. Классикалық пагинация

Іздеу нәтижелеріне, кестелерге, есептілікке жарамды. Артықшылықтары: бақылау, тұрақты URL, беттер бойынша жеңіл навигация. Кемшіліктері: көп басу, «үзілулер».

2. Шексіз таспа (infinite scroll)

Төмен құны бар фидтер мен каталогтар үшін қателер (жаңалықтар, контент карточкалары). Артықшылықтары: тарту, аз басу. Кемшіліктері: «жоғалған футер», оралу қиын, мекенжайы күрделі.

3. Гибрид: «Тағы көрсетілсін «/« Тағы жүктеу »

Компромисс: виджеттер түйме бойынша бумалармен жүктеледі. Артықшылықтары: рендерлерді бақылау, футердің қолжетімділігі, болжамдылығы. Кемшіліктері: әлі сызықтық.

4. Сегменттелген айналдыру (бөлімдер/зәкірлер)

Ұзын мақалалар, анықтамалар және wiki үшін. Артықшылықтары: құжат картасы, жылдам секіру. Кемшіліктері: навигация мен мазмұнды күрделендіру.

• Каталогтар/лобби - гибрид немесе шексіз + «басынан қайту».
• Іздеу/кестелер - бет өлшемі мен жылдам сүзгілері бар пагинация.
• Құжаттама/лонгрид - TOC және оқу прогресі бар сегменттер.

3) Ақпараттық сәулет және орналастыру

Жоғарғы қалпақ (sticky): іздеу, жылдам сүзгілер, сұрыптау; пайда болғанда мазмұн жабылмайды.
Бүйір панелі (desktop): мазмұны (TOC), сүзгілер; мобайльде - шығатын sheet.
Sticky элементтері: жоғарғы сүзгілер, зәкір мәзірі, оқу индикаторы, «Back to Top».
Мазмұн карточкалары: болжамды превью биіктігі → орналасу секірулерінен аз.
Бос жай-күйлер: «бос экрандар» емес, скелетондар/шиммерлер.

4) Жылжыту мінез-құлқы (микромеханика)

Инерция және физика: айналдыру «ұлттық» болып көрінуі тиіс; жүйелік үлгілерді бұзбаңыз.
Осьтік лок: көкжиектерде (карусельде) қозғалыс шегінен кейін тік осьті бұғаттаңыз.
Snap-нүктелер: карусельдер, карточкалар және шебердің қадамдары үшін қолайлы. Ұзын ленталарды асыра пайдаланбаңыз.
Anchored scrolling: жүктеу кезінде пайдаланушының фокусын және салыстырмалы позициясын сақтаңыз.
Scroll-chaining: бетке «секіріп» кетпеу үшін, ішкі контейнерлердегі оқиғаларды шектеңіз.

5) Назар аударуды басқару

Жүзетін СТА/« Депозит »/» Ойнау »: бас саусақ аймағында, контентті жабпайды.
Оқу прогресі: жоғарыдағы сызғыш, зәкірлермен үндестірілген.
Мазмұны (TOC): ағымдық бөлім жарықтандырылған, жылдам сілтемелер, «жоғары» түймешігі.
Тақырып зәкірлері: URL-дегі тұрақты хэштер; құлақшынның биіктігін компенсациялайтын скролл.
«Жабысқақ» контекстік сүзгілер: 1-2 экранды жылжытқаннан кейін бекіту.

6) Үлкен таспаларды жүктеу және рендерлеу

Жалқау жүктеу (lazy): суреттер, бейнелер, блоктар. Жүктеу шегі - алдынан 1-2 экран ~.
Виртуалдандыру/терезе рендері (windowing): тек көрінетін аумақты + буферді сызыңыз.
Плейсхолдер/скелетондар: болжамды өлшемдер, «секірулерсіз».
Партиялармен қосымша жүктеу: 20-60 элемент қадам; сұраулар мен рендерлер арасындағы теңгерім.
Секция кэші: артқа қайтқан кезде орындар мен жүктелген күбілерді қалпына келтіріңіз.

7) Лентадағы мазмұнды басқару

Топтау: күндері/санаттары бойынша; бөлгіш тақырыптар жабысады.
Сұрыптау және сүзгілер: белсенді жағдайларды индикациялаумен көрінетін және қол жетімді.
Бүктеу/өрістету: ұзын сипаттамалар үшін - «Көбірек көрсету».
Скроллдағы медиа: көрінетін аумақтан тыс бейнені авто-тоқтату; тек дыбыссыз және анық басқарылатын авто-плей.
Қателер күйі: «Желіні жоғалту», «Қотару мүмкін болмады» - retry және позицияны сақтау.

8) Қол жетімділік және оқшаулау

Барлық әрекеттер қимылсыз қол жетімді: «Тағы жүктеу», «Бастау үшін», «TOC ашу» түймешігі.
Фокус-менеджмент: зәкірлер бойынша навигация кезінде - фокусты бөлім тақырыбына көшіру.
Экран оқырмандары: айналдыру/ТОС батырмаларының сипаттамалары, реттік логика.
RTL: көлденең карусельдер мен индикаторларды бейнелеңіз.
Reduced motion: жеңілдетілген әсерлерді қалайтындар үшін «күрделі» анимациялар мен параллакстерді өшіріңіз.

9) Перформанс: мақсаттар мен метрика

Негізгі қимылдардың/скролдың INP (Interaction to Next Paint): ≤ 200 мс.
Scroll-jank (скролл кезінде кадрларды жіберу): <1% кадр> үлгілік девайстарда 16,7 мс.
CLS (жиынтық орналасуы): ≤ 0,1 (әсіресе қосымша жүктеу кезінде).
TBT/Blocking: скролл кезінде ауыр синхронды есептеуден аулақ болыңыз.
Жады: ұзын сессияларда тұрақты пайдалану (виртуалдандыру кезінде жылыстау жоқ).

• пассивті скролл тыңдаушылары, 'requestAnimationFrame' арқылы кейінге қалдырылған есептеулер;
• «жеңіл» көлеңке/жылжыту кезінде күрделі blur жоқ;
• карточкалардың тіркелген немесе болжамды мөлшері;
• қайта суреттеуді үнемдеу (batched updates).

10) Телеметрия және оқиғалар

• 'scroll _ start '/' scroll _ end' (көзі, жылдамдығы, бағыты),
• 'content _ load _ request/success/fail' (бума, өлшем),
• 'viewport _ item _ exposed' (id, көріну уақыты),
• `toc_click`, `anchor_navigate`, `back_to_top_click`,
• 'list _ restore' (орны, қалпына келтіру уақыты).

• Depth Reached (қанша экрап/элемент қаралды),
• Exposure Time per Item (орта/медиана),
• Load Error Rate, Retry Rate,
• Scroll Abandonment (келесі топтаманы жүктегенге дейін шықты),
• Return-to-Position Success.

11) Әртүрлі контент түрлеріне арналған паттерндер

Ойындар/тауарлар каталогтары: гибридті лента, sticky-сүзгілер, виртуалдандыру, «Тағы көрсету» түймешігі.
Лонгридтер/wiki: TOC, прогресс-бар, зәкірлер, «бөлімге сілтемені көшіру».
Жаңалықтар фид: бөлгіш күндері бар шексіз таспа, «соңғысына оралу».
Кестелер/гридтер: пагинация + «N бойынша көрсету», тақырыптар мен негізгі бағандарды қатыру, қажеттілік бойынша көлденең скролл.
Live-таспалар/лог-стримдер: авто-подскролл «үзіліс/қуып жету», буфер лимиті.

12) Мобильді ерекшеліктері

Бас саусақтың аймағы: CTA және «басында» - төменнен; сүзгілер - шығатын sheet.
«Созу» футері: тек тоқтағанда көрсету; скроллға кедергі жасамаңыз.
Қимылдар: көлденең карусельдер - осьтік шынтағы бар; pull-to-refresh - бұл күтілетін жерде ғана.
Тегістігі: «ауыр» тізімдерде 60 FPS тексеру; әсерлердің тығыздығын төмендетіңіз.

13) Антипаттерндер

«Шексіз таспа + шығуы жоқ жасырын футер» (сілтемелер/контактілер/ережелер жоқ).
Оқылғанды жылжытатын қосымша жүктеме - контекстің жоғалуы.
Мәтін мен CTA жабатын қалқымалы тақталар.
Карточкалардың шексіз биіктігі → «қаңғыған» layout-shift '.
Көрiну аймағында пайда болған кезде дыбысы бар медианы автоөндiру.
«Артқа» күйін қалпына келтірудің болмауы.

14) Енгізу чек-парағы (спринттер бойынша)

Спринт 1: модельді таңдау (пагинация/гибрид/шексіз), базалық скролл контейнерлер, sticky-қалпақ/сүзгілер, «Back to Top».
2-спринт: бейнелерді/блоктарды жалқау жүктеу, скелетондар, карточкалардың болжамды өлшемдері.
3-спринт: тізімдерді виртуалдандыру, бумаларды, зәкірлерді/ТОС позициясын және кэшін сақтау.
4-спринт: скролл телеметриясы және экспонаттау, сондай-ақ scroll-jank бойынша алерталар.
Спринт 5: қолжетімділік (фокус/оқырмандар), RTL, reduced motion, клавиатуралық навигация (desktop).
Спринт 6: жұқа оңтайландыру: осьтік лок, snap-нүктелер, таспадағы UX медиа жақсарту.

15) Глоссарий

Infinite Scroll - элементтерді шексіз жүктеу.
Windowing/Virtualization - тек көрінетін элементтердің рендері.
Anchored Scrolling - жүктеу кезінде салыстырмалы позицияны сақтау.
Scroll-jank - айналдыру кезінде кадрлардың өтіп кетуіне байланысты «тартылу».
TOC (Table of Contents) - зәкірлері бар мазмұн.
CLS/INP - орналасу тұрақтылығы мен сезімталдық өлшемдері.

16) Жиынтық

1. қолайлы ағын моделін таңдайды (пагинация/гибрид/шексіз),

2. бақылау береді (зәкірлер, TOC, sticky-сүзгілер, «басында»),

3. рендерит тез және тұрақты (жалқау жүктеме, виртуалдандыру, жылжусыз),

4. қолжетімді және болжамды болып қала береді,

5. телеметрияны өлшейді және деректер негізінде UX жақсартады.