پیمایش و مدیریت محتوا

1) چرا در مورد پیمایش فکر می کنم

• سرعت جستجو برای محتوای مناسب (کلیک کمتر - پیمایش بیشتر)،
• احساس کنترل (لنگرها، «بازگشت به بالا»، فیلترهای چسبیده)،
• موجب صرفه جویی در منابع (بوت تنبل، مجازی سازی)،
• تبدیل را افزایش می دهد (محتوا که قبلا دیده می شود، CTA در «منطقه انگشت شست»).

اصول: سرعت> تراکم ؛ زمینه> سر و صدا ؛ پیش بینی «جادو»

2) مدل های پیمایش: چه زمانی انتخاب کنید

1. صفحه بندی کلاسیک

مناسب برای نتایج جستجو، جداول، گزارش. مزایا: کنترل، URL های پایدار، ناوبری صفحه آسان. منفی: کلیک بیشتر, توجه «شکاف».

2. پیمایش نامحدود

برای تغذیه و کاتالوگ با هزینه کم خطا (اخبار، کارت های محتوا). مزایا: تعامل، کلیک کمتر. منفی: «پاورقی از دست رفته»، سخت برای بازگشت، آدرس دشوار است.

3. ترکیبی: نمایش بیشتر/بار بیشتر

سازش: ویدجت ها در دسته ها در هر دکمه بارگذاری می شوند. مزایا: ارائه کنترل، در دسترس بودن پاورقی، پیش بینی. معایب: هنوز خطی است.

4. پیمایش تقسیم شده (بخش/لنگر)

برای مقالات طولانی، منابع و ویکی. مزایا: نقشه سند، جهش سریع. معایب: ناوبری پیچیده و جدول محتویات.

• کاتالوگ/لابی - ترکیبی یا بی نهایت + «بازگشت به آغاز».
• جستجو/جداول - صفحه بندی با اندازه صفحه و فیلترهای سریع.
• مستندات/Longrid - بخش با TOC و خواندن نوار پیشرفت.

3) معماری اطلاعات و طرح

هدر بالا (چسبنده): جستجو، فیلترهای سریع، مرتب سازی ؛ محتوای زمانی که به نظر می رسد همپوشانی ندارد.
نوار کناری (دسکتاپ): جدول محتویات (TOC)، فیلترها ؛ در تلفن همراه - ترک ورق.
عناصر چسبنده: فیلترهای بالا، منوی لنگر، نشانگر پیشرفت خواندن، «بازگشت به بالا».
کارت های محتوا: ارتفاع پیش نمایش قابل پیش بینی → جهش طرح کمتر.
کشورهای خالی: اسکلت/سوسو زدن، نه «صفحه نمایش خالی».

4) رفتار پیمایش (میکرومکانیک)

اینرسی و فیزیک: پیمایش باید «بومی» ظاهر شود ؛ الگوهای سیستم را نشکنید.
قفل محوری: برای افق (چرخ فلک)، محور عمودی را پس از آستانه حرکت قفل کنید.
نقاط ضربه محکم و ناگهانی: مناسب برای چرخ فلک، کارت و مراحل جادوگر. از نوارهای طولانی استفاده نکنید.
پیمایش لنگر: هنگام بارگیری مجدد، تمرکز کاربر و موقعیت نسبی را حفظ کنید.
Scroll-chaining: محدود کردن «جریان» رویدادها از ظروف تو در تو به طوری که برای «پرش» به صفحه.

5) مدیریت توجه

STA شناور/» سپرده «/» بازی«: در منطقه انگشت شست، محتوای همپوشانی ندارد.
خواندن نوار پیشرفت: حاکم در بالا، هماهنگ با لنگرها.
فهرست مطالب (TOC) - موضوع فعلی برجسته، میانبرها، دکمه بالا.
لنگرهای عنوان: هش های پایدار در URL ؛ پیمایش با جبران ارتفاع کلاه.
زمینه «چسبنده» فیلتر: رفع پس از پیمایش 1-2 صفحه نمایش.

6) بارگیری و ارائه نوارهای بزرگ

بارگذاری تنبل: تصاویر، فیلم ها، بلوک ها. آستانه بار ~ 1-2 صفحه نمایش پیش رو است.
مجازی سازی/پنجره: فقط منطقه قابل مشاهده + بافر را بکشید.
placeholder/اسکلت: اندازه قابل پیش بینی، هیچ «جهش».
بارگیری مجدد دسته: عناصر مرحله 20-60 ؛ تعادل بین پرس و جو و ارائه.
کش پارتیشن: هنگامی که رفتن به عقب، بازیابی موقعیت و تکه های لود شده.

7) مدیریت محتوا در نوار

گروه بندی: بر اساس تاریخ/دسته بندی ؛ هدر جداکننده چوب.
انواع و فیلترها: قابل مشاهده و در دسترس، با نشانه ای از شرایط فعال.
فروپاشی/گسترش: برای توصیف طولانی، نمایش بیشتر.
رسانه در پیمایش: مکث خودکار ویدیو خارج از دید ؛ پخش خودکار فقط بدون صدا و با کنترل صریح.
خطا بیان می کند: «از دست دادن شبکه»، «بارگیری ناموفق» - با تلاش مجدد و صرفه جویی در موقعیت.

8) در دسترس بودن و محلی سازی

تمام اقدامات بدون حرکات در دسترس هستند: «دانلود بیشتر»، «برای شروع»، «باز کردن TOC».
مدیریت تمرکز: هنگام مرور لنگرها - تمرکز را به عنوان بخش منتقل کنید.
خوانندگان صفحه نمایش: توضیحات برای دکمه های اسکرول/TOC، منطق سفارش.
RTL: چرخ فلک ها و شاخص های افقی آینه.
کاهش حرکت: انیمیشن های «پیچیده» و اختلاف منظر را برای کسانی که جلوه های ساده را ترجیح می دهند غیرفعال کنید.

9) عملکرد: اهداف و معیارها

INP (تعامل با رنگ بعدی) حرکات کلیدی/پیمایش: ≤ 200 میلی ثانیه.
Scroll-jank: <1% فریم> 16. 7 میلی ثانیه در دستگاه های معمولی.
CLS (تغییر طرح تجمعی): ≤ 0. 1 (به خصوص در هنگام بارگیری مجدد).
TBT/Blocking: هنگام پیمایش از محاسبات همزمان سنگین خودداری کنید.
حافظه: استفاده پایدار در طول جلسات طولانی (بدون نشت در طول مجازی سازی).

• شنوندگان پیمایش منفعل، محاسبات معوق از طریق 'requestAnimationFrame' ؛
• سایه های «نور »/بدون تاری پیچیده در حالی که پیمایش ؛
• اندازه کارت های ثابت یا قابل پیش بینی
• صرفه جویی در redraws (به روز رسانی دسته).

10) تله متری و رویدادها

• 'scroll _ start '/' scroll _ end' (منبع، سرعت، جهت)،
• 'content _ load _ request/success/fail' (پشته، اندازه)،
• 'viewport _ item _ exposed' (شناسه، زمان دید)،
• 'toc _ click', 'anchor _ navigate', 'back _ to _ top _ click',
• 'list _ restore' (موقعیت، زمان بازیابی).

• عمق رسیده (چگونه بسیاری از ecraps/عناصر مشاهده شده است)،
• زمان قرار گرفتن در معرض در هر مورد (متوسط/متوسط)،
• بار نرخ خطا، نرخ سعی مجدد،
• حرکت رها (قبل از دسته بعدی لود می شود)،
• بازگشت به موقعیت موفقیت

11) الگوهایی برای انواع مختلف محتوا

کاتالوگ بازی ها/محصولات: نوار ترکیبی، فیلترهای چسبنده، مجازی سازی، دکمه «نمایش بیشتر».
Longrides/ویکی: TOC، نوار پیشرفت، مجریان، «کپی لینک به بخش».
خوراک اخبار: خوراک بی پایان با تاریخ جداکننده، «بازگشت به آخرین».
جداول/شبکه ها: صفحه بندی + «نمایش توسط N»، سرصفحه های انجماد و ستون های کلیدی، پیمایش افقی در صورت نیاز.
feeds/log streams: پیمایش خودکار با «pause/catch up»، حد بافر.

12) ویژگی های تلفن همراه

مناطق انگشت شست: CTA و «به آغاز» - از زیر ؛ فیلترها - در ورق خروجی.
«کشیدن» پاورقی: نشان می دهد تنها زمانی که متوقف شد ؛ با اسکرول کردن دخالت نکنید.
حرکات: چرخ فلک افقی - با قفل محوری ؛ pull-to-refresh - فقط در جایی که انتظار می رود.
صاف بودن: چک 60 FPS در لیست «سنگین» ؛ کاهش تراکم اثرات.

13) ضد گلوله

«نوار بی پایان + پاورقی پنهان بدون خروج» (بدون لینک/مخاطبین/قوانین).
بار اضافی که خواندن را تغییر می دهد - از دست دادن زمینه.
پانل های شناور همپوشانی متن و CTA.
ارتفاع نامحدود از کارت → «سرگردان» طرح تغییر.
پخش خودکار رسانه ها با صدا زمانی که قابل مشاهده است.
بدون بازیابی موقعیت زمانی که «بازگشت».

14) چک لیست پیاده سازی (با سرعت)

Sprint 1: انتخاب مدل (صفحه بندی/ترکیبی/بی نهایت)، ظروف پیمایش اساسی، کلاه/فیلترهای چسبنده، «بازگشت به بالا».
Sprint 2: بارگذاری تنبل تصاویر/بلوک ها، اسکلت ها، اندازه کارت قابل پیش بینی.
Sprint 3: مجازی سازی لیست، ذخیره موقعیت و کش پشت سر هم، لنگرها/TOC.
Sprint 4: پیمایش و قرار گرفتن در معرض تله متری و هشدارهای scroll-jank.
Sprint 5: دسترسی (تمرکز/خوانندگان)، RTL، کاهش حرکت، ناوبری صفحه کلید (دسکتاپ).
Sprint 6: بهینه سازی خوب: قفل محوری، امتیاز ضربه محکم و ناگهانی، افزایش رسانه UX در نوار.

15) واژه نامه

اسکرول بی نهایت - بارگذاری بی نهایت عناصر.
Windowing/Virtualization - فقط آیتم های لیست قابل مشاهده را رندر می کند.
پیمایش لنگر - حفظ موقعیت نسبی در هنگام بارگیری مجدد.
Scroll-jank - «پرش» به دلیل پرش فریم هنگام پیمایش.
TOC (فهرست مطالب) - فهرست مطالب با لنگرها.
CLS/INP - معیارهای ثبات طرح و پاسخگویی.

16) خط پایین

1. انتخاب مدل جریان مناسب (صفحه بندی/ترکیبی/بی نهایت)،

2. می دهد کنترل (مجریان، TOC، فیلترهای چسبنده، «به آغاز»)،

3. ارائه سریع و پایدار (بارگذاری تنبل، مجازی سازی، بدون تغییر)،

4. در دسترس و قابل پیش بینی است،

5. اندازه گیری تله متری و بهبود UX بر اساس داده ها.