Ҳаракат ва идоракунии мундариҷа

1) Чаро дар бораи ҳаракат фикр кунед

• ҷустуҷӯи мундариҷаи дурустро суръат мебахшад (кликҳои камтар - ҳаракатҳои бештар),
• ҳисси назоратро медиҳад (лангарҳо, "ба боло", филтрҳои часпонидашуда),
• захираҳоро сарфа мекунад (мӯзаи танбал, виртуализатсия),
• табдилдиҳиро зиёд мекунад (мундариҷаи қаблан дидашуда, CTA дар "минтақаи ангушти калон").

Принсипҳо: суръат> зичӣ; контекст> садо; пешгӯишаванда> "ҷоду".

2) Моделҳои ҳаракаткунанда: кай интихоб кардан лозим аст

1. Пагинатсияи классикӣ

Барои натиҷаҳои ҷустуҷӯ, ҷадвалҳо, ҳисобот мувофиқ аст. Тарафдор: назорат, URL-ҳои устувор, паймоиши осон саҳифа. Омӯз: кликҳои бештар, диққат "холигоҳҳо".

2. Ҳаракати беохир

Барои каналҳо ва каталогҳо бо арзиши ками хатогӣ (ахбор, кортҳои мундариҷа). Тарафдор: Иштирок, кликҳои камтар. Омӯз: "пои гумшуда", бозгашт душвор, суроғаи мушкил.

3. Гибрид: Бештар нишон диҳед/Бештар бор кунед

Созиш: виджетҳо дар як тугма бор карда мешаванд. Тарафдор: назорати интиқол, мавҷудияти пой, пешгӯишаванда. Омӯз: ҳанӯз ҳам хатӣ.

4. Ҷойивазкунии тақсимшуда (қисмҳо/лангарҳо)

Барои мақолаҳои дароз, истинодҳо ва вики. Тарафдор: харитаи ҳуҷҷат, ҷаҳишҳои зуд. Омӯз: мураккабии паймоиш ва ҷадвали мундариҷа.

• Каталогҳо/лоббиҳо - гибрид ё беохир + "ба ибтидо бармегарданд".
• Ҷустуҷӯ/ҷадвалҳо - саҳифа бо андозаи саҳифа ва филтрҳои зуд.
• Ҳуҷҷатгузорӣ/Longrid - сегментҳо бо TOC ва хондани барҳои пешрафт.

3) Меъмории иттилоот ва тарҳ

Сарлавҳаи боло (часпанда): ҷустуҷӯ, филтрҳои тез, навъбандӣ; вақте ки он пайдо мешавад, мундариҷаро такрор намекунад.
Панели тарафӣ (мизи корӣ): ҷадвали мундариҷа (TOC), филтрҳо; дар варақи мобилӣ.
Унсурҳои часпанда: филтрҳои болоӣ, менюи лангар, нишондиҳандаи пешрафти хониш, "Бозгашт ба боло".
Кортҳои мундариҷа: баландии пешгӯишавандаи пешнамоиш → ҷаҳиши камтар аз тарҳ.
Ҳолати холӣ: Скелетҳо/тобишҳо, на "экранҳои холӣ".

4) Рафтори ҳаракат (микромеханика)

Инерсия ва физика: ҳаракат бояд "ватанӣ" пайдо шавад; намунаҳои системаро вайрон накунед.
Қулфи меҳварӣ: Барои уфуқҳо (каруселҳо) меҳвари амудиро пас аз ҳадди ҳаракат қулф кунед.
Нуқтаҳои фаврӣ: Барои каруселҳо, кортҳо ва қадамҳои устод мувофиқанд. Дар наворҳои дароз сӯиистифода накунед.
Ҷойивазкунии лангар: Ҳангоми боркунӣ диққати корбар ва мавқеи нисбии худро нигоҳ доред.
Ҳаракатдиҳӣ: "ҷараёни" ҳодисаҳоро аз контейнерҳои лона маҳдуд кунед, то ба саҳифа "ҷаҳед".

5) Идоракунии диққат

STA шинокунанда/" Амонат "/" Бозӣ": дар минтақаи ангушти калон мундариҷаро такрор намекунад.
Хондани сатри пешрафт: ҳукмрон дар боло, бо лангарҳо ҳамоҳанг карда шудааст.
Ҷадвали мундариҷа (TOC) - Мавзӯи ҷорӣ таъкид шудааст, миёнабурҳо, тугмаи боло.
Лангарҳои унвон: hash устувор дар URL; ҳаракат бо ҷуброни баландии ҳадди аққал.
Филтрҳои матнии "часпанда": пас аз ҳаракат кардани 1-2 экран ислоҳ кунед.

6) Боркунӣ ва пешниҳоди лентаҳои калон

Боркунии танбалӣ: тасвирҳо, видеоҳо, блокҳо. Ҳадди сарборӣ дар пеш 1-2 экран аст.
Виртуализатсия/шамолдиҳӣ: Танҳо майдони намоён + буферро кашед.
Ҷойгоҳҳо/скелетҳо: андозаҳои пешбинишаванда, "ҷаҳиш" нестанд.
Азнавборкунии партия: унсурҳои қадами 20-60; тавозун байни дархостҳо ва пешниҳодкунандагон.
Кэши қисм: Ҳангоми баргаштан, мавқеъҳо ва қисмҳои борбардорро барқарор кунед.

7) Идоракунии мундариҷа дар лента

Гурӯҳбандӣ: аз рӯи санаҳо/категорияҳо; сарлавҳаҳои ҷудосоз часпидаанд.
Навъҳо ва филтрҳо: намоён ва дастрас, бо нишон додани шароити фаъол.
Ҷамъшавӣ/васеъ кардан: Барои тавсифи дароз, бештар нишон диҳед.
ВАО дар ҳаракат: видеои худкор таваққуф аз чашм; худкор бозӣ танҳо бе садо ва бо назорати возеҳ.
Хато мегӯяд: "Аз даст додани шабака", "Боркунӣ ноком шуд" - бо мавқеи такрорӣ ва захиракунӣ.

8) Дастрасӣ ва маҳаллисозӣ

Ҳама амалҳо бидуни имову ишора дастрасанд: "Бештар зеркашӣ кунед", "Дар ибтидо", "TOC кушода".
Идоракунии фокус: ҳангоми паймоиш лангарҳо - интиқол додани фокус ба унвони бахш.
Хонандагони экран: тавсифот барои тугмаҳои ҳаракат/TOC, мантиқи фармоиш.
RTL: Каруселҳои уфуқӣ ва нишондиҳандаҳо.
Ҳаракати коҳишёфта: Аниматсияҳои "мураккаб" ва параллаксро барои онҳое, ки эффектҳои соддакардашударо афзалтар медонанд, хомӯш кунед.

9) Иҷро: Ҳадафҳо ва ченакҳо

INP (Ҳамкорӣ ба Рангҳои навбатӣ) имову ишора/ҳаракат: ≤ 200 мс.
Ҷойивазкунӣ: <1% чорчӯба> 16. 7 мс дар дастгоҳҳои маъмулӣ.
CLS (тағирёбии тарҳбандии маҷмӯӣ): ≤ 0. 1 (махсусан ҳангоми боркунӣ).
TBT/Бастани: Ҳангоми ҳаракат аз ҳисобкунии вазнини синхронӣ худдорӣ кунед.
Хотира: истифодаи устувор дар давоми ҷаласаҳои дароз (ҳеҷ гуна ихроҷ ҳангоми виртуализатсия нест).

• шунавандагони ҳаракатдиҳандаи ғайрифаъол, ҳисобкунии таъхиршуда тавассути 'request
• сояҳои "сабук "/ҳангоми ҳаракатдиҳӣ норавшании мураккаб нест;
• Андозаи кортҳои собит ё пешбинишаванда
• сарфа кардани redraws (навсозиҳои дастаҷамъӣ).

10) Телеметрия ва чорабиниҳо

• 'scroll _ start '/' scroll _ end' (манбаъ, суръат, самт),
• 'content _ load _ request/муваффақият/нокомӣ' (анбор, андоза),
• 'viewport _ item _ foshed' (id, вақти намоён),
• 'toc _ click', 'anchor _ navigate', 'back _ to _ top _ click',
• 'list _ restore' (мавқеъ, вақти барқароркунӣ).

• Чуқурӣ расид (чӣ қадар ecraps/унсурҳо дида шуданд),
• Вақти таъсир барои як ашё (миёна/медианӣ),
• Андозаи хатогиро бор кунед, меъёри такрорӣ,
• Партофтани ҳаракат (пеш аз бор кардани партияи навбатӣ),
• Муваффақияти бозгашт ба мавқеъ.

11) Намунаҳо барои намудҳои гуногуни мундариҷа

Каталогҳои бозиҳо/маҳсулот: лентаи гибридӣ, филтрҳои часпанда, виртуализатсия, тугмаи "Нишон додани бештар".
Longrides/wiki: TOC, бари пешрафт, лангарҳо, "истиноди нусхабардорӣ ба бахш".
Навигариҳои ахбор: хўроки беохир бо санаҳои ҷудосозӣ, "ба охирин баргардед".
Ҷадвалҳо/торҳо: пагинатсия + "намоиш аз ҷониби N", сарлавҳаҳои яхкунӣ ва сутунҳои калидӣ, ҳаракатҳои уфуқӣ дар ҳолати зарурӣ.
Каналҳои мустақим/ҷараёнҳои сабти ном: худкор бо "таваққуф/сайд кардан", маҳдудияти буферӣ.

12) Хусусиятҳои мобилӣ

Минтақаҳои ангушт: CTA ва "то ибтидо" - аз поён; филтрҳо - дар варақи баромад.
Пойгоҳи "кашидан": танҳо ҳангоми истодан нишон диҳед; ба ҳаракат халал нарасонед.
Имову ишора: каруселҳои уфуқӣ - бо қулфи меҳвар; кашидан-ба-тароват - танҳо он ҷое ки интизор буд.
Ҳамворӣ: 60 санҷиши FPS дар рӯйхати "вазнин"; зичии таъсирро кам кунед.

13) Антипаттернҳо

"Лентаи беохир + пойи пинҳоншуда бе баромад" (бе истинод/тамос/қоидаҳо).
Сарбории иловагӣ, ки хонишро иваз мекунад - аз даст додани контекст.
Панелҳои шинокунандаи такрори матн ва CTA.
Баландии номаҳдуди кортҳо → тағиротҳои "саргардон".
Автоплей медиа бо садо ҳангоми намоён.
Барқароркунии мавқеъ ҳангоми "бозгашт".

14) Рӯйхати назорати амалисозӣ (аз рӯи спринтҳо)

Sprint 1: интихоби модел (пагинатсия/гибрид/беохир), зарфҳои асосии ҳаракаткунанда, кулоҳ/филтрҳои часпанда, "Бозгашт ба боло".
Спринт 2: боркунии танбалии тасвирҳо/блокҳо, скелетҳо, андозаи пешгӯишавандаи корт.
Sprint 3: виртуализатсияро номбар кунед, мавқеъро захира кунед ва кэшро канда кунед, лангарҳо/TOC.
Спринт 4: Телеметрияи ҳаракат ва таъсир ва огоҳиҳои ҳаракаткунанда.
Sprint 5: дастрасӣ (фокус/хонандагон), RTL, кам шудани ҳаракат, паймоиши клавиатура (мизи корӣ).
Спринт 6: Оптимизатсияи хуб: Қулфи Axial, Нуқтаҳои фаврӣ, Такмили UX Media дар лента.

15) Луғат

Ҳаракати беохир - боркунии беохири унсурҳо.
Шамол/виртуализатсия - Танҳо ашёҳои намоёни рӯйхатро пешниҳод кунед.
Ҳаракати лангар - нигоҳ доштани мавқеи нисбӣ ҳангоми боркунӣ.
Ҳаракат-jank - "зарба" аз сабаби партофтани чаҳорчӯбаҳо ҳангоми ҳаракат.
TOC (Ҷадвали мундариҷа) - ҷадвали мундариҷа бо лангарҳо.
CLS/INP - ченакҳои устувории тарҳ ва вокуниш.

16) Сатри поён

1. модели мувофиқи ҷараёнро интихоб мекунад (пагинатсия/гибрид/беохир),

2. назорат медиҳад (лангарҳо, TOC, филтрҳои часпанда, "ба ибтидо"),

3. расонидани зуд ва устувор (боркунии танбал, виртуализатсия, баст нест),

4. дастрас ва пешгӯишаванда боқӣ мемонад,

5. телеметрияро чен мекунад ва UX-ро дар асоси маълумот такмил медиҳад.