التوصية: اعرض النطاق بالضبط في الأعلى، على سبيل المثال 1-20 من 350 عنصرًا، ودع المستخدمين يضبطون حجم الصفحة إلى 10 أو 20 أو 50 بنقرة واحدة. هذا النهج من منظور تجربة المستخدم يقلل من الارتباك وعادة ما يحسن إكمال المهام، وهي مكسب كبير لمعظم المستخدمين.
استخدم بادئة يمكن التنبؤ بها مثل النطاق و الإجمالي للتواصل مع التقدم. النمط المعتاد هو 1-20 من 350، ويتم تحديثه في الوقت الفعلي إذا تغيرت مجموعة البيانات. هذا النهج يبقي المستخدمين على اطلاع مباشر ويقلل من سوء الفهم، مما يساعد على الثقة في الواجهة. كما أنه يقلل من وقت انتظار تحميل المحتوى، خاصة على الاتصالات الأبطأ. يجب اختبار القرارات وتعديلها وفقًا لذلك.
وفر عناصر تحكم مباشرة: الأولى، السابقة، التالية، الأخيرة، وحقل للانتقال إلى صفحة معينة. يمكن لشريط تمرير مدمج الانتقال بسرعة إلى صفحة مستهدفة، ووجود مسار مرئي لأرقام الصفحات يساعد المستخدمين على فهم مكانهم من بداية القائمة. يجب أن يعيد الحل تركيز الانتباه إلى القائمة بعد تغيير الصفحة للحفاظ على السياق، ويعتمد النمط الذي تختاره على سياستك وجمهورك.
إمكانية الوصول والسياسة: تأكد من إمكانية التشغيل باستخدام لوحة المفاتيح وتسميات قارئ الشاشة؛ أعلن عن تحديثات الحالة عبر المناطق المباشرة. نظرًا لأن بعض المستخدمين يعتمدون على التقنيات المساعدة، فإن هذه السياسة أكثر أهمية من الجماليات. على وجه التحديد، وفر سمات ARIA للأدوار والمناطق المباشرة حتى يحصل المستخدمون على ردود فعل دون تأخير. عندما يعرف المستخدمون بالضبط مكانتهم، فإنهم يشعرون بثقة أكبر وأقل إرهاقًا؛ هذا مهم بشكل خاص عندما تكون مجموعة البيانات كبيرة وتأتي من اتصال محمول.
اعتبارات الأداء: جلب الصفحات مسبقًا أو تطبيق تحميل افتراضي خفيف الوزن لتقليل إعادة الرسم. إذا قمت بإزالة العناصر القديمة من العرض، ينخفض استخدام الذاكرة ويرتفع السرعة المتصورة. عادةً ما يوفر جلب الصفحة التالية مسبقًا انتقالًا سلسًا؛ إذا كان البيانات ثقيلة، قم بإزالة المحتوى غير الضروري حتى تصبح الصفحة جاهزة. لم تنفذ بعض الفرق خيارات سهلة الوصول إليها من جميع الجوانب، ولكن الفكرة الأساسية تظل الحفاظ على التدفق سلسًا لمعظم المستخدمين.
قائمة تحقق التنفيذ: حدد سياسة واضحة، احترم تفضيلات المستخدم لحجم الصفحة، وقدم خيارًا احتياطيًا مثل خيار "تحميل المزيد" عند الاقتضاء. لم تنفذ بعض الفرق خيارات سهلة الوصول إليها من جميع الجوانب، ولكن النهج المدروس عادة ما يؤدي إلى تجربة أفضل. النتيجة المحتملة هي زيادة المشاركة والرضا، مع انخفاض قابل للقياس في عمليات البحث المهجورة والوقت المستغرق في الانتظار.
أنماط ترقيم الصفحات وقواعد عملية للقوائم
about هناك قاعدة بسيطة: للقوائم التي تقل عن 100 عنصر، استخدم 20 عنصرًا في الصفحة؛ للكتالوجات الأكبر، وفر خيارات 40 أو 60 عنصرًا واعرض عددًا إجماليًا واضحًا للصفحات؛ يتطلب كتالوج من 3500 عنصر حوالي 59 صفحة بمعدل 60 عنصرًا في الصفحة أو 88 صفحة بمعدل 40 عنصرًا في الصفحة.
ثلاثة أساليب أساسية توفر تنقلًا يمكن التنبؤ به: مستكشف مرقم تقليدي مع فهرس صفحات مرئي ومنتقي لكل صفحة؛ تحكم مدمج للتالي/السابق مع قائمة منسدلة للصفحات؛ وطريقة تحميل تدريجي تكشف عن المزيد من العناصر عند الطلب مع الاستمرار في عرض الإجمالي ونهاية صريحة.
قواعد الموثوقية: حافظ على خيارات كل صفحة متسقة عبر الأقسام؛ سمِّ عناصر التحكم بأرقام صريحة (20، 40، 60)؛ اضمن تركيز لوحة المفاتيح وتسميات قارئ الشاشة؛ على iPhone والأجهزة المحمولة الأخرى، استهدف مناطق اللمس بحد أدنى 44 بكسل وتجنب تحولات التخطيط عند تغيير الصفحات؛ كن حذرًا مع المحتوى الديناميكي الذي يعاد ترتيبه.
مواءمة السياسة مهمة لكل قائمة واجهة مستخدم؛ يجب أن يشعر الأعضاء والعائلات والمستخدمون الفرديون بالرفاهية عند التصفح. في الأسواق ذات الأجهزة المتنوعة (بما في ذلك iPhone)، وفر عناصر تحكم واضحة لكل صفحة وعناصر مسماة حتى يتمكن المستخدمون من جمع بياناتهم الخاصة. إذا ظهر محتوى مثل الاختطاف، قم بتصفيته وسجل التقارير المرسلة. تساعد الأفكار من المستخدمين على زيادة الثقة؛ يجب أن تظل بقية الواجهة مستقرة، أليس المستخدمون مرتبكين بسبب التغييرات المفاجئة؟ ليسوا كذلك إذا قمت بالاختبار سنة تلو الأخرى وحافظت على المصاريف المالية قابلة للتنبؤ. توفر أدوات الاختبار Alpine على الشرفة إشارات واقعية.
عرض الإحصائيات الدقيقة بتنسيق X من Y متسق
اعرض الإحصائيات الدقيقة بتنسيق X من Y في موضع ثابت وبخط متناسق عبر جميع طرق العرض. استخدام كتلة واحدة يمكن التنبؤ بها يحسن الوضوح للآخرين؛ هم أكثر ثقة بشأن مكان البحث بعد مرشح أو حدث. تزيد أحجام مجموعات البيانات الكبيرة من الحاجة إلى الإحصائيات الدقيقة؛ هذا النهج أفضل حقًا للثقة والتعلم. اعرف متى تقوم بتحديث الأرقام بعد اكتمال تحميل البيانات، بحيث يرى المستخدم قيمة ثابتة بدلاً من وميض.
قواعد التنسيق: X و Y عبارة عن أعداد صحيحة؛ املأ بنفس العرض؛ استخدم فواصل الآلاف؛ حافظ على مسافة واحدة حول كلمة "من" وحافظ على محاذاة خط الأساس ثابتة. هذا يقلل من تحولات التخطيط ويجعل العد أسهل في المسح، مما يقلل من العبء المعرفي للقاصرين وكبار السن على حد سواء. يمكن أن ترافق علامة أو أيقونة صغيرة الرقم للإشارة إلى التحديثات دون تشتيت القيمة الرئيسية.
إمكانية الوصول والموثوقية: وفر تسمية ARIA-live مهذبة مثل "العدد الحالي: X من Y عنصراً" واضمن تباينًا عاليًا لسهولة القراءة. عند تحميل البيانات، اعرض حالة هيكلية ولكن اكشف عن الأرقام الدقيقة بعد اكتمال الحدث؛ إذا لم يكن الإجمالي معروفًا، فاستمر في عرض العنصر النائب حتى يصبح الإجمالي الحقيقي متاحًا. هذا النهج متاح للتقنيات المساعدة ويقدره المستخدمون الذين يحتاجون إلى إشارات تقدم دقيقة.
area أمثلة وتأثير: غالبًا ما تعرض لوحات معلومات التذاكر 23 من 500، وهو ما يسهل تتبعه أثناء الأحداث؛ تظهر تحليلات المكاتب 1204 من 1204 عند الوصول إلى المعالم، وتدعم الوضوح التعلم في تقسيمات سنة الميلاد أو المنطقة دون التسبب في تلف سهولة القراءة. بعد تطبيق هذا النهج، أفاد المستخدمون بانخفاض الارتباك، فهم يعرفون موقعهم في المجموعة، والتجربة تبدو أكثر اتساقًا وموثوقية.
اختر نمط ترقيم الصفحات حسب السياق: مرقم، التالي/السابق، أو التمرير اللانهائي
اختر التنقل المرقم للكتالوجات حيث يحتاج المستخدمون إلى الانتقال إلى صفحة دقيقة وتتبع الموقع بعد المرشحات. يوصى بـ 10-40 عنصرًا في الصفحة و 5-7 روابط صفحات مرئية لدعم الذاكرة والعثور السريع. الإشارات المرسلة واضحة: يمكن للمستخدمين القفز، والرجوع، والتقدم بثقة، وعدد الصفحات الإجمالي متاح على الموقع. هناك حاجة ماسة للانتقال بدقة وتذكر الموقع مع تغير المرشحات، مما يجعل هذا النمط قويًا لحاملات البيانات والمحتوى المستقر الذي يمكن التعرف عليه وفحصه علنًا بسرعة. يساعد هذا النمط في إظهار الموقع وما هو التالي.
التالي/السابق يناسب المهام المتدرجة، والكتالوجات الصغيرة، أو المقالات عندما لا يكون الوصول إلى المنتصف ضروريًا. يحافظ على النوافذ الخارجية بسيطة، ويدعم التنقل باستخدام لوحة المفاتيح، ويقلل من ضغط الذاكرة على الأجهزة. استخدم هذا النمط عندما يكون هناك تدفق خطي ويتوقع المستخدمون إكمال تسلسل بدلاً من تصفح مجموعة البيانات بأكملها، مما يساعد في منحنى التعلم ويقلل من العبء المعرفي. أنت تبحث عن بساطة لا تزال تدعم التنقل الواضح.
يقوم التمرير اللانهائي بزيادة المشاركة بشكل متزايد للأخبار والمعارض وأسطح الاكتشاف. يجب أن ينتهي بوضوح أو عنصر تحكم "تحميل المزيد" لتجنب ضغط الذاكرة وتحولات التخطيط. إذا اخترت هذا المسار، فقم بتوفير عناصر تحكم سهلة الوصول، ومؤشر تقدم مرئي، وخيار مباشر للقفز مرة أخرى إلى صفحة معروفة. ما هو التالي: إذا كنت ترغب في الاستكشاف بشكل مختلف، فقم بالتبديل إلى نمط آخر. على الأجهزة المحمولة، يمكن أن يكون مفيدًا بعيدًا عن ترقيم الصفحات الثقيل؛ على سطح المكتب، تأكد من أن الأداء يظل مستقرًا ووفر خيارًا احتياطيًا للتبديل إلى نمط آخر إذا أراد المستخدمون التوقف عن التمرير.
لتحديد القرار، انظر إلى الدروس المستفادة من سلوك المستخدم وشكل البيانات: إذا احتاج المستخدمون إلى التبديل بين المرشحات والعثور على مكان معين، فاختر المسجل؛ إذا كانت الرحلة متسلسلة، فإن التالي/السابق مناسب؛ إذا كان الهدف هو الاكتشاف اللانهائي، فاذهب لا نهائيًا. هنا يمكنك العثور على روابط معايير متاحة للجمهور، مع رؤى تم تحديدها بواسطة فرق عبر النظام البيئي. يجب أن تتماشى الأنماط مع أهداف الموقع، ويجب مراقبة تأثير الذاكرة في الأجهزة الرئيسية والبيئات المتأثرة. إذا حاولت المحاولات الخبيثة استهداف التمرير لاستخراج البيانات أو تضليل المستخدمين، فتعامل مع مخاطر الاحتيال على الفور. لذلك، تواصل بوضوح مع النهج النشط وتأكد من أنه يظل مفيدًا وشفافًا؛ إذا زاد ضغط الذاكرة أو انخفضت المشاركة، فقم بالتبديل وفقًا لذلك واختبر في ظل ظروف حقيقية. إليك: إطار عمل قرار يحترم احتياجات المستخدم والقيود التقنية والنظام البيئي الأوسع. تجنب اختطاف الانتباه عن طريق التحميل التلقائي العدواني؛ حافظ على عناصر التحكم مرئية، ويمكن التنبؤ بها، وتحترم الذاكرة.
ضمان تسميات تنقل واضحة وترتيب صفحات يمكن التنبؤ به

سمِّ كل صفحة بعنوان موجز وموجه للإجراء وحافظ على تسلسل ثابت من البداية إلى النهاية.
هيكل التدفق كدرج بسيط: نظرة عامة، قائمة، تفاصيل، إجراءات. داخل كل قسم، كرر نفس الترتيب لكل فئة مثل الأسواق أو الأحداث الحياتية، بحيث تظهر التذاكر والمنشورات في نفس الموضع عبر الصفحات.
حدِّد التنقل إلى أربع أو خمس خطوات؛ إذا أمضى المستخدم أكثر من ست ثوانٍ في اختيار تسمية، يزداد خطر الأخطاء في النقر والتسرب.
ضمن أسواق معينة، استخدم تسميات خاصة بالمجال: حدث، تذكرة، رحلة، حياة، وقائمة. حافظ عليها متسقة أسبوعًا بعد أسبوع؛ نفس الترتيب يساعد المستخدمين على بناء القيمة بسرعة.
لمنع الإدخالات الاحتيالية، أضف حقل حالة واضح وعلامات؛ يميل المفترسون إلى الظهور في قوائم غير مفحوصة؛ التمييز المرئي يساعد الإدارة على الحفاظ على الثقة.
الخطوة 1: تدقيق التسميات الحالية وتعيين كل صفحة لمهمة واحدة. الخطوة 2: تقليص إلى أربعة مصطلحات عليا تغطي التدفق. الخطوة 3: تطبيق هذه التسميات عبر جميع الصفحات. الخطوة 4: إجراء اختبارات أسبوعية وتعديل.
التسميات المنشأة يجب أن تغطي ما ينشره المستخدمون، مثل المنشورات حول الأحداث أو الرحلات؛ التسمية الصريحة تقلل الارتباك لكل مستخدم وتزيد من إمكانية اكتشاف المحتوى المنشور.
الزيادات المقاسة تظهر القيمة والنمو؛ تعرف الإدارة من أين ينبع النمو وأين تستثمر؛ هذه المرحلة الأولية تنتج تفاعلات أكثر قابلية للاستخدام مع كل تكرار.
تحسين إمكانية الوصول: دعم لوحة المفاتيح، قارئات الشاشة، وإدارة التركيز

good ابدأ بقاعدة واحدة ملموسة: قم بتمكين التنقل الكامل بلوحة المفاتيح لعناصر تحكم ترقيم الصفحات وحافظ على حلقة تركيز مرئية للموضع المركّز. تحصل كل أداة تحكم على اسم وصفي عبر aria-label، وترتيب علامات التبويب يتدفق من الأول إلى السابق، والصفحات المرقمة، والتالي، والأخير، مما يجعل التسلسل كاملاً ويمكن التنبؤ به للمستخدمين ذوي الخبرة والجدد على حد سواء. عامل كل أداة تحكم كعضو في نفس المجموعة، لذا فإن جعل التدفق متسقًا يقلل من العبء المعرفي. تأكد من أن التركيز يهبط قبل منطقة المحتوى ثم ينتقل إلى منطقة النتائج، بحيث لا يترك المسافرون الذين يعتمدون على لوحات المفاتيح في حيرة من أمرهم بشأن مكان القراءة بعد ذلك. استخدم أيقونات صور بسيطة بجوار النص (تفاح كتلميح ودود) لتعزيز المعنى، وحافظ على ضوابط اليسار/اليمين متسقة عبر جميع مجالات النظام البيئي. إذا كان بإمكانك شحن هذا التجديد في غضون أسبوع، فستلبي رغبات المستخدمين الذين يصلون إلى البيانات عبر الأقسام الطبية، والأنساب، والأقسام العامة للموقع، وتشكّل تفضيلاتهم تجربة جيدة وسهلة الوصول إليها تقرأ بوضوح لقارئات الشاشة ومستخدمي لوحة المفاتيح على حد سواء.
بالنسبة لقارئات الشاشة، قم بتمييز المجموعة كمنطقة تنقل باستخدام role="navigation" و aria-label="Pagination". استخدم قائمة حتى تكون كل أداة تحكم منفصلة ويمكن التعرف عليها؛ قم بتسمية كل رابط صفحة برقمها، وبالنسبة للصفحة الحالية، قم بتعيين aria-current="page". يجب أن تتم قراءة تسمية الصفحة الحالية كتلميح واحد وموجز؛ عند تغيير الصفحة، استخدم aria-live="polite" لإعلان التحديث دون مقاطعة المهام الجارية. احتفظ بنص الرابط قصيرًا ووصفيًا للمساعدة في الوصول في الشاشات الكثيفة وضمان أن اسم كل أداة تحكم يبلغ عن الغرض منها عند قراءتها بصوت عالٍ بواسطة التقنيات المساعدة. يدعم هذا النهج مجموعة واسعة من المجالات، بدءًا من النماذج الطبية إلى جداول البيانات، ويظل قابلاً للقراءة حتى عند إخفاء الصور.
بالنسبة لإدارة التركيز، انقل التركيز إلى عنصر له معنى بعد تغيير الصفحة - مثل منطقة الملخص أو العنصر الأول في القائمة المحدثة - لتجنب ترك المستخدمين في حالة ارتباك. لا تسمح للتركيز بالانجراف إلى عناصر تحكم مخفية؛ إذا تم تحديث الواجهة ديناميكيًا، فضع التحديث داخل منطقة حية وأعد التركيز إلى المنطقة الرئيسية عند الانتهاء. حافظ على هيكلية الصفحة وأنسابها حتى يعرف القراء مكانهم داخل الهيكل. قم بتضمين رابط تخطي يصل إلى منطقة ترقيم الصفحات من الأعلى، مما يفيد أولئك الذين يرغبون في التحرك بسرعة دون اجتياز الصفحة بأكملها، وتأكد من أن هذا النمط يظل متسقًا عبر جميع زياراتهم وأجهزتهم.
| عنصر | توصية |
|---|---|
| عناصر التحكم التالي/السابق | اجعلها أزرارًا قابلة للتركيز؛ وفر aria-labels مثل "الصفحة التالية" و "الصفحة السابقة"؛ تأكد من وجود حلقة تركيز مرئية وترتيب متسق يعكس تسلسل الصفحات. |
| روابط الصفحات | سمِّ كل رابط برقم الصفحة؛ طبق aria-current="page" للصفحة النشطة؛ احتفظ باسم واحد واضح لكل رابط للمساعدة في الإخراج الصوتي. |
| رابط التخطي | ضعه في الأعلى تمامًا؛ عند التركيز، انتقل مباشرة إلى منطقة ترقيم الصفحات لتقليل وقت التنقل. |
| منطقة حية | استخدم aria-live="polite" لتحديثات رقم الصفحة الحالي؛ تجنب إزعاج مهام المستخدم. |
| الأيقونات والنصوص | طابق الأيقونات بنصوص تسمي الإجراء؛ وفر اسمًا يمكن الوصول إليه بواسطة قارئات الشاشة لتجنب الغموض في النظام البيئي. |
| السياق والتسمية | حافظ على اسم واحد يمكن التعرف عليه لمجموعة التحكم؛ هذا يساعد التنقل الأيسر والأيمن على البقاء بديهيًا عبر المناطق ويرتبط بنفس السلوك في كل قسم. |
| مناطق المحتوى | تأكد من وجود عناصر التحكم في كل منطقة تظهر فيها النتائج؛ حدد العوامل التي تؤثر على الوصول واختبر مع مستخدمين حقيقيين للتحقق من شمولية رغباتهم واحتياجاتهم. |
اعتبارات الأمان: حماية بيانات المستخدم أثناء تقسيم الصفحات والتخزين المؤقت
استخدم تقسيم الصفحات من جانب الخادم مع ترخيص لكل طلب لمنع الكشف عن مجموعات البيانات الكاملة في ذاكرة المتصفح.
لذلك، قم بتطبيق تدفق تقسيم الصفحات المميز برموز مع شيكات صارمة في كل طلب.
- حدِّد البيانات لكل صفحة؛ اعرض فقط الحقول الضرورية للعرض الحالي؛ قم بتحرير المعرفات الحساسة مثل معرفات الحساب؛ قلل من الكشف عن معلومات القاصرين؛ قم بتحرير تفاصيل الاتصال الشخصية في هذه السجلات.
- طبق عزل ذاكرة لكل مستخدم؛ تجنب ذاكرة التخزين المؤقت متعددة المستخدمين؛ استخدم قيم TTL قصيرة مع إخلاء تلقائي.
- نفّذ رموز تقسيم الصفحات قصيرة العمر؛ اطلب التحقق من جانب الخادم في كل طلب؛ قم بتدوير الرموز عند كل جلب؛ لا تسجل الرموز أبدًا في سجلات المتصفح.
- قم بتهيئة ضوابط ذاكرة التخزين المؤقت HTTP؛ Cache-Control: no-store, private; Pragma: no-cache; Expires: 0; يمنع ذاكرة التخزين المؤقت العامة من تخزين الصفحات ذات البيانات الحساسة.
- تأمين بيانات الجلسة؛ HttpOnly, Secure; SameSite؛ تجنب وضع الرموز في عنوان URL؛ اعتمد على ملفات تعريف الارتباط المرتبطة بجلسة الحساب.
- قلل من البيانات في طرق العرض مثل عروض الشرائح؛ في مكون عرض الشرائح اعرض العنصر الحالي فقط؛ لا تقم بتحميل مجموعة البيانات بأكملها مسبقًا؛ بالنسبة للمنازل والمواقع وقوائم المكتبات اعرض جزءًا صغيرًا لكل صفحة.
- فرض التفويض على كل طلب؛ تحقق من الأدوار والعضويات والملكية قبل تسليم الصفحة؛ هذا يمنع تسرب السجلات والتذاكر والإعجابات؛ قبل عرض صفحة، تحقق من حقوق الوصول؛ تم.
- حدِّد تخزين المتصفح للحقول الحساسة؛ تجنب localStorage للرموز؛ فضل الذاكرة أو ملفات تعريف الارتباط للجلسة؛ قم بتعطيل التخزين المؤقت للصفحات المقيدة عبر رؤوس الاستجابة.
- مسارات التدقيق والمراقبة؛ سجل معرفات المستخدمين، وأوقاتهم، وأرقام الصفحات، ومسارات الموارد؛ قم بتحرير الحقول الحساسة؛ قم بتخزين السجلات بشكل آمن؛ تساعد هذه الإجراءات في الكشف عن التحقيقات الخبيثة؛ يتحسن ملف المخاطر.
- تخفيف مخاطر الكشف العام؛ لا تنشر ما هو مرئي للقاصرين في ذاكرة التخزين المؤقت العامة؛ لذلك انشر فقط العناصر غير الحساسة؛ فرض قيود العمر على محتوى اليوم؛ مواءمة الرؤية مع قوانين الولايات؛ وفر خيارات لإخفاء أو عرض المحتوى في المكتبة؛ احمِ دائمًا السجلات التي تنتمي إلى الحسابات؛ تأكد من أن العناصر المنشورة علنًا لا تكشف أبدًا عن العناوين أو التذاكر أو البيانات الشخصية.
- عناصر تحكم واجهة المستخدم: يقوم زر تقسيم الصفحات بتشغيل طلبات كل صفحة فقط؛ تعطيله عند وجود أذونات غير كافية؛ تجنب الكشف عن الحمولة عبر التخزين من جانب العميل.




