2.5التنقّل: المراسي، القوائم والتمرير
الأساسي في 30 ثانية
- القوائم = التنقّل الرئيسيّ (الترويسة)؛ المراسي = روابط نحو قسم محدّد في الصفحة نفسها.
- التمرير السلس (smooth scroll) يُحرّك بلطف الوصول إلى مرساة.
- على الجوّال، تتكيّف القائمة (غالبًا قائمة «هامبرغر») — تُختبَر.
الخيط الناظم — نادية تربط الصفحة الرئيسية
الصفحة الرئيسية للنجّار طويلة: تعريف، أعمال، تواصل. تضيف نادية قائمة مراسٍ في الأعلى («الأعمال»، «التواصل»): نقرة تُمرّر بلطف إلى القسم الصحيح. على الجوّال، تتحقّق من أن قائمة الهامبرغر تُفتَح جيدًا وأن المراسي تعمل بالإصبع.
الخطوة الأخيرة من المستوى 2 — جعل الصفحة الطويلة قابلة للتنقّل.
1. قوائم، مراسٍ، تمرير
القائمة الرئيسية (في الترويسة) تبني التنقّل بين الصفحات. والمراسي (روابط إرساء) تقود إلى قسم محدّد في الصفحة نفسها: تضع «مرساة قائمة» على قسم، ثم رابطًا نحوها (مثلًا #realisations). والتمرير السلس (smooth scroll) يجعل الوصول ناعمًا بدل قفزة حادّة.
تضع نادية مراسي على «الأعمال» و«التواصل»، ثم تنشئ روابط نحوها في قائمة رئيسية صغيرة. والروابط عمومًا (أزرار، ودجات) يمكنها الإشارة إلى صفحات، مراسٍ، بريد أو هاتف.
2. التنقّل على الجوّال
على الجوّال، يُطوى التنقّل غالبًا في قائمة «هامبرغر» (أيقونة بثلاثة خطوط). يجب الاختبار: هل تُفتَح القائمة؟ هل تقود المراسي إلى المكان الصحيح؟ هل الأهداف كبيرة كفاية للإصبع؟
التنقّل الجيّد يُرشد الزائر دون أن يُضيّعه: مدخلات قليلة، تسميات واضحة، وسلوك متطابق على الحاسوب والجوّال.
🔎 مثال ملموس — قائمة مراسٍ لصفحة طويلة (حالة نادية)
الأقسام: #presentation، #realisations، #contact
قائمة رئيسية: «الأعمال» → #realisations، «التواصل» → #contact
التمرير السلس مُفعّل.
الجوّال: قائمة هامبرغر مُختبَرة، مراسٍ OK بالإصبع.
زر «اتصال» → tel:+213...النتيجة: صفحة طويلة سهلة التصفّح.
الدرس: مراسٍ + تمرير سلس + اختبار جوّال.
مفردات القسم
- القوائم
- التنقّل الرئيسيّ للموقع (الترويسة)، بين الصفحات.
مثال بسيط: الرئيسية · الأعمال · التواصل في الترويسة.
ما ليس كذلك: خلط قائمة الصفحات بالمراسي الداخلية.
رد فعل: قائمة = صفحات الموقع.
- المراسي (روابط الإرساء)
- روابط تقود إلى قسم محدّد في الصفحة نفسها.
مثال بسيط: «الأعمال» → #realisations في الرئيسية.
ما ليس كذلك: استخدام مرساة للذهاب إلى صفحة أخرى.
رد فعل: مرساة = الصفحة نفسها؛ #قسم.
- التمرير السلس (smooth scroll)
- التمرير المُتحرّك والناعم نحو مرساة.
مثال بسيط: نقر «التواصل» → انزلاق ناعم إلى الأسفل.
ما ليس كذلك: قفزة حادّة مزعجة.
رد فعل: فعّل التمرير السلس على المراسي.
- الروابط
- الأزرار والودجات يمكنها الإشارة إلى صفحة، مرساة، بريد أو هاتف.
مثال بسيط: زر «اتصال» → tel:+213…
ما ليس كذلك: رابط فارغ أو مكسور.
رد فعل: اختر الهدف حسب النيّة (صفحة/مرساة/هاتف/بريد).
- التنقّل على الجوّال (هامبرغر)
- القائمة المطويّة في أيقونة على الجوّال، تُختبَر بالإصبع.
مثال بسيط: قائمة هامبرغر تُفتَح وتعمل مراسيها.
ما ليس كذلك: قائمة جوّال لا تُفتَح أو بأهداف صغيرة جدًا.
رد فعل: اختبر قائمة الجوّال فعلًا.
في التطبيق — جعل صفحة طويلة قابلة للتنقّل
- ضَع مراسي قائمة على أقسامك (مثلًا #realisations، #contact).
- أنشئ روابط (قائمة أو أزرار) نحو هذه المراسي.
- فعّل التمرير السلس.
- اختبر على الجوّال: قائمة هامبرغر، مراسٍ بالإصبع، أهداف كبيرة كفاية.
نصّ جاهز للقول — تقديم التنقّل للزبون (20 ث)
«صفحتك الرئيسية طويلة قليلًا، فأضفتُ لها قائمة صغيرة: نقرة على «الأعمال» أو «التواصل» تُمرّر بلطف إلى القسم الصحيح. على الجوّال، تُطوى هذه القائمة بنظافة وتحقّقتُ من أنها تعمل جيدًا بالإصبع.»
أظهري أن التنقّل يُرشد الزائر، خاصّة على الجوّال.
قالب للنسخ واللصق — خطّة تنقّل
القائمة الرئيسية (صفحات): _______________
مراسٍ (الصفحة نفسها): #________ #________ #________
روابط نحو المراسي (قائمة/أزرار): _______________
التمرير السلس: مُفعّل / مُعطّل
زر هاتف (tel:) / بريد (mailto:): _______________
اختبار جوّال (هامبرغر + مراسٍ بالإصبع): تمّ / للإنجازصفحة طويلة (one-page)
قائمة مراسٍ لا غنى عنها للتنقّل بين الأقسام.
موقع متعدّد الصفحات
قائمة صفحات في الترويسة؛ مراسٍ كتكملة على الصفحات الطويلة.
تواصل مباشر
أزرار tel:/mailto: للوصول إلى الحرفيّ بنقرة، خاصّة على الجوّال.
الجوّال
قائمة هامبرغر واضحة، مدخلات قليلة، أهداف واسعة للإصبع.
✓ ممارسات جيدة
- استخدم المراسي للصفحات الطويلة.
- فعّل التمرير السلس.
- اختبر القائمة والمراسي على الجوّال.
✗ أخطاء شائعة
- خلط مرساة (الصفحة نفسها) ورابط صفحة.
- نسيان اختبار قائمة الجوّال.
- تسميات قائمة غامضة أو كثيرة جدًا.
النقاط الأساسية
- القوائم = صفحات؛ المراسي = أقسام في الصفحة نفسها.
- تمرير سلس لوصول ناعم.
- روابط نحو صفحة، مرساة، هاتف، بريد.
- اختبر التنقّل على الجوّال (هامبرغر).
تحدّي 48 ساعة — طبّق غدًا
على صفحة طويلة، ضَع مرساتَين، أنشئ روابط نحوهما، فعّل التمرير السلس، ثم اختبر قائمة الهامبرغر والمراسي على هاتف حقيقي. 20 دقيقة.
- أنشئ مراسي وروابط داخلية.
- أُفعّل التمرير السلس.
- أختبر التنقّل على الجوّال.
أسئلة شائعة
ما الفرق بين مرساة ورابط صفحة؟
المرساة تقود إلى قسم في الصفحة نفسها (#قسم)؛ ورابط الصفحة يقود إلى صفحة أخرى في الموقع. الخلط يكسر التنقّل.
كيف أنشئ قائمة تُمرّر إلى قسم؟
تضع «مرساة قائمة» على القسم، ثم تنشئ رابطًا نحو مُعرّفها (#مرساة). بتفعيل التمرير السلس، يكون الوصول ناعمًا.
هل أختبر القائمة على الجوّال؟
نعم: على الجوّال، تُطوى القائمة غالبًا في هامبرغر. تحقّق من أنها تُفتَح، وأن المراسي تعمل، وأن الأهداف كبيرة كفاية للإصبع.
تريد نادية أن تقود نقرة على «الأعمال» إلى قسم الأعمال في الصفحة نفسها، بلطف. ماذا تضع؟