التمرير وإدارة المحتوى

1) لماذا تفكر في التمرير

• يسرع البحث عن المحتوى الصحيح (عدد أقل من النقرات - المزيد من التمرير)،
• يعطي إحساسًا بالتحكم (المراسي، «العودة إلى الأعلى»، المرشحات الملتصقة)،
• يوفر الموارد (حذاء كسول، افتراضية)،
• زيادة التحويل (المحتوى الذي شوهد سابقًا، CTA في «منطقة الإبهام»).

المبادئ: السرعة> الكثافة ؛ السياق> الضوضاء ؛ قابلية التنبؤ> «السحر».

2) نماذج التمرير: متى تختار ماذا

1. الاستعداد الكلاسيكي

مناسب لنتائج البحث والجداول والإبلاغ. الإيجابيات: التحكم، عناوين URL مستقرة، التنقل السهل للصفحة. السلبيات: المزيد من النقرات، «ثغرات» الانتباه.

2. لفافة لانهائية

للأعلاف والكتالوجات ذات التكلفة المنخفضة للخطأ (الأخبار، بطاقات المحتوى). الإيجابيات: المشاركة، نقرات أقل. السلبيات: «القدم المفقودة»، من الصعب العودة، العنوان الصعب.

3. الهجين: أظهر المزيد/حمل المزيد

حل وسط: يتم تحميل الأدوات على دفعات لكل زر. الإيجابيات: جعل التحكم، توافر القدم، إمكانية التنبؤ. السلبيات: لا تزال خطية.

4. التمرير المجزأ (الأقسام/المراسي)

للمقالات الطويلة والمراجع وويكي. الإيجابيات: خريطة المستندات، قفزات سريعة. السلبيات: تعقيد التنقل وقائمة المحتويات.

• الكتالوجات/الردهات - هجينة أو لا نهائية + «تعود إلى البداية».
• البحث/الجداول - الاستعداد بحجم الصفحة والفلاتر السريعة.
• الوثائق/Longrid - أجزاء مع TOC وقراءة شريط التقدم.

3) بنية المعلومات والتخطيط

الرأس العلوي (لزج): بحث، مرشحات سريعة، فرز ؛ لا يتداخل المحتوى عند ظهوره.
الشريط الجانبي (سطح المكتب): جدول المحتويات (TOC)، مرشحات ؛ على ورقة مغادرة متنقلة.
العناصر اللاصقة: المرشحات العلوية، قائمة المرساة، مؤشر التقدم للقراءة، «العودة إلى الأعلى».
بطاقات المحتوى: ارتفاع معاينة يمكن التنبؤ به → قفزات تخطيط أقل.
الدول الفارغة: الهياكل العظمية/المتلألئة، وليس «الشاشات الفارغة».

4) سلوك التمرير (الميكانيكا الدقيقة)

القصور الذاتي والفيزياء: يجب أن يظهر التمرير «أصلي» ؛ لا تكسر أنماط النظام.
القفل المحوري: بالنسبة للآفاق (الدوارات)، اقفل المحور الرأسي بعد عتبة الحركة.
نقاط المفاجئة: مناسبة للدوارات والبطاقات وخطوات الساحر. لا تسيء استخدام الأشرطة الطويلة.
التمرير الثابت: حافظ على تركيز المستخدم والموقع النسبي عند إعادة التحميل.
سلاسل التمرير: الحد من «تدفق» الأحداث من الحاويات المتداخلة حتى لا «يقفز» إلى الصفحة.

5) إدارة الانتباه

STA/" Deposit'/" Play "العائمة: في منطقة الإبهام، لا تتداخل المحتوى.
قراءة شريط التقدم: مسطرة في الأعلى، متزامنة مع المراسي.
جدول المحتويات (TOC) - تم إبراز الموضوع الحالي والاختصارات والزر العلوي.
مراسي العنوان: تجزئة ثابتة في عنوان URL ؛ التمرير مع تعويض ارتفاع الغطاء.
مرشحات السياق «اللزجة»: يتم إصلاحها بعد التمرير 1-2 شاشات.

6) تحميل وعرض الأشرطة الكبيرة

تحميل كسول: صور، مقاطع فيديو، كتل. عتبة التحميل أمامنا ~ 1-2 شاشة.
الافتراضية/النوافذ: ارسم فقط المنطقة المرئية + العازلة.
العناصر/الهياكل العظمية: أحجام يمكن التنبؤ بها، لا «قفزات».
إعادة تحميل الدفعة: الخطوة 20-60 ؛ بين الاستفسارات والعروض.
مخبأ التقسيم: عند العودة، استعد المواقف وقطع محملة.

7) إدارة المحتوى في شريط

التجميع: حسب التواريخ/الفئات ؛ تلتصق رؤوس الفاصل.
الأنواع والمرشحات: مرئية ويمكن الوصول إليها، مع الإشارة إلى الظروف النشطة.
الانهيار/التوسع: للأوصاف الطويلة، أظهر المزيد.
وسائط الإعلام في التمرير: فيديو إيقاف تلقائي بعيدا عن الأنظار ؛ التشغيل التلقائي فقط بدون صوت وبسيطرة صريحة.
ينص الخطأ على ما يلي: «فقدان الشبكة»، «فشل في التحميل» - مع إعادة المحاولة وموقع التوفير.

8) التوافر والتوطين

جميع الإجراءات متاحة بدون إيماءات: «تنزيل المزيد»، «حتى البداية»، «افتح TOC».
إدارة التركيز: عند التنقل في المراسي - نقل التركيز إلى عنوان القسم.
قارئات الشاشة: أوصاف أزرار التمرير/TOC، منطق الطلب.
RTL: مرآة الدوارات والمؤشرات الأفقية.
الحركة المخفضة: تعطيل الرسوم المتحركة «المعقدة» والتوازي لأولئك الذين يفضلون التأثيرات المبسطة.

9) الأداء: الأهداف والمقاييس

INP (التفاعل مع الطلاء التالي) إيماءات/تمرير رئيسية: ≤ 200 مللي ثانية.
تمرير jank: <1٪ إطارات> 16. 7 مللي ثانية على الأجهزة النموذجية.
CLS (تحول التخطيط التراكمي): ≤ 0. 1 (خاصة أثناء إعادة التحميل).
TBT/Blocking: تجنب الحوسبة المتزامنة الثقيلة أثناء التمرير.
الذاكرة: الاستخدام المستقر خلال الجلسات الطويلة (لا توجد تسريبات أثناء الافتراضية).

• مستمعي التمرير السلبي، والحساب المؤجل من خلال «إطار الرسوم المتحركة» ؛
• ظلال «خفيفة »/لا ضبابية معقدة أثناء التمرير ؛
• أحجام البطاقات الثابتة أو المتوقعة
• توفير عمليات إعادة السحب (تحديثات مجمعة).

10) القياس عن بعد والأحداث

• «تمرير _ بدء »/« تمرير _ نهاية» (المصدر، السرعة، الاتجاه)،
• "content _ load _ request/success/fail' (كومة، حجم)،
• «viewport _ object _ exposed» (id, vievibility time),
• «toc _ click»، «anchor _ navigate»، «back _ to _ top _ click»،
• «list _ restore» (الوضع، استعادة الوقت).

• العمق الذي تم الوصول إليه (عدد النقوش/العناصر التي تم عرضها)،
• وقت التعرض لكل عنصر (المتوسط/المتوسط)،
• معدل خطأ الحمل، معدل إعادة التجربة،
• التخلي عن التمرير (قبل تحميل الدفعة التالية)،
• نجاح العودة إلى الموقع.

11) أنماط لأنواع مختلفة من المحتوى

كتالوجات الألعاب/المنتجات: شريط هجين، مرشحات لزجة، افتراضية، زر «أظهر المزيد».
Longrides/wiki: TOC, progress bar, anchors, «copy link to sep».
موجز الأخبار: تغذية لا نهاية لها مع تواريخ الفاصل، «عد إلى الأخير».
الجداول/الشبكات: pagination + «show by N»، عناوين التجميد والأعمدة الرئيسية، التمرير الأفقي حسب الحاجة.
التغذية الحية/تدفقات السجل: التمرير التلقائي مع «التوقف المؤقت/اللحاق بالركب»، الحد المؤقت.

12) ميزات الهاتف المحمول

مناطق الإبهام: CTA و «حتى البداية» - من الأسفل ؛ المرشحات - في الورقة الصادرة.
قدم «سحب»: عرض فقط عند التوقف ؛ لا تتدخل في التمرير.
الإيماءات: الدوارات الأفقية - مع قفل محوري ؛ سحب إلى التحديث - فقط حيث هو متوقع.
السلاسة: 60 FPS تحقق من القوائم «الثقيلة» ؛ تقليل كثافة التأثيرات.

13) أنتيباترن

«شريط لا نهاية له + قدم مخفي بدون مخرج» (بدون روابط/جهات اتصال/قواعد).
الحمل الإضافي الذي يغير القراءة - فقدان السياق.
لوحات عائمة متداخلة بين النص و CTA.
ارتفاع غير محدود للبطاقات → نوبات تخطيط «تجول».
وسائط التشغيل التلقائي مع الصوت عندما تكون مرئية.
لا يوجد موقف عند «العودة».

14) قائمة التنفيذ المرجعية (حسب سباقات السرعة)

Sprint 1: اختيار الطراز (pagination/hybrid/infinite)، حاويات التمرير الأساسية، القبعة/المرشحات اللزجة، «العودة إلى الأعلى».
Sprint 2: تحميل كسول للصور/الكتل والهياكل العظمية وأحجام البطاقات التي يمكن التنبؤ بها.
Sprint 3: قائمة الافتراضية، حفظ الوضع وانفجار ذاكرة التخزين المؤقت، المراسي/TOC.
Sprint 4: قياس التمرير والتعرض عن بُعد، وتنبيهات التمرير.
Sprint 5: إمكانية الوصول (التركيز/القراء)، RTL، الحركة المخفضة، التنقل على لوحة المفاتيح (سطح المكتب).
Sprint 6: التحسين الدقيق: Axial Lock و Snap Points و UX Media Enhancement in Tape.

15) مسرد

التمرير اللانهائي - التحميل اللانهائي للعناصر.
Windowing/Virtualization - قم بعرض عناصر القائمة المرئية فقط.
التمرير الثابت - الحفاظ على الوضع النسبي أثناء إعادة التحميل.
Scroll-jank - «اهتزاز» بسبب تخطي الإطارات عند التمرير.
TOC (جدول المحتويات) - جدول المحتويات مع المراسي.
CLS/INP - مقاييس استقرار التصميم والاستجابة.

16) خلاصة القول

1. يختار نموذج التدفق المناسب (pagination/hybrid/infinite)،

2. يعطي التحكم (المراسي، TOC، المرشحات اللزجة، «حتى البداية»)،

3. السرعة والاستقرار (التحميل الكسول، الافتراضية، عدم التحول)،

4. تظل متاحة ويمكن التنبؤ بها،

5. قياس القياس عن بعد وتحسين UX بناءً على البيانات.