أنماط تصميم التنقل: 9 تخطيطات قوائم للويب والموبايل

التنقل ليس مجرد قائمة. إنه وعد بأين تقع الأشياء. حين يعمل بشكل صحيح، ينتقل المستخدمون عبر المنتج دون تفكير. وحين يفشل، يغادرون.

المستخدمون لا يقرأون التنقل. يمسحونه بالنظر، ويثقون به، ولا يلاحظونه إلا حين يخذلهم.

هذه هي مشكلة التصميم الحقيقية. التنقل ليس ميزة تُحتفى بها، بل بنية تحتية يجب أن تكون غير مرئية. اختيار النمط الخاطئ لهندسة معلوماتك أو سياق مستخدمك يُطلق سلسلة تفاعلات: لا يستطيع الناس إيجاد الأقسام، لا يستطيعون توجيه أنفسهم، ولا يبنون أبدًا نموذجًا ذهنيًا لكيفية عمل منتجك.

تسعة أنماط تغطي تقريبًا كل حالة. ما يلي هو تفصيل مباشر لكل منها: ما يُتقنه، وأين يتعثر، ومتى تلجأ إليه.

---

ما التنقل مخصص له فعلًا

التنقل يجيب عن سؤال واحد للمستخدم: إلى أين يمكنني الذهاب من هنا؟ أجب بوضوح وسيتحرك. اجعله يبحث وسيغادر.

الدور الهيكلي للتنقل هو تمثيل هندسة معلوماتك كنظام يمكن للمستخدمين الوثوق به. هذا يعني الاتساق والثبات والانعكاس الصادق لما هو موجود فعلًا في المنتج. التنقل الذي يتغير بين الصفحات، أو يُظهر تسميات مختلفة عن URLs، أو يدفن المسارات الأولية تحت مسارات ثانوية هو فشل في التصميم، بغض النظر عن مدى صقل حركة القائمة المنسدلة. تحتفظ Amazon بنفس التنقل الأساسي على كل صفحة عبر مئات الملايين من المنتجات لهذا السبب بالضبط.

الانعكاس العملي هو أنك تختار نمط التنقل بناءً على مدخلين: عمق وعرض هندسة معلوماتك، والسياق الذي يستخدم فيه الناس المنتج. كل شيء آخر، الأسلوب البصري والحركة واللون، يتبع هذين القرارين.

---

شريط التنقل العلوي

الشريط الأفقي العلوي هو الافتراضي للويب لسبب وجيه. على حجم سطح المكتب يتسع لنحو خمسة إلى سبعة أقسام أولية عبر الرأسية، ويبقيها مرئية في جميع الأوقات، ويعكس طريقة قراءة الناس: من اليسار إلى اليمين، ومن الأعلى إلى الأسفل.

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

نمط الفشل هو الحشو الزائد. شريط علوي بتسعة روابط وقائمتين منسدلتين وقائمة أدوات مساعدة وأيقونة بحث ليس نمط تنقل، بل نوبة قلق. للنمط سقف صارم يقارب ستة أو سبعة عناصر قبل أن يحتاج إعادة هيكلة.

تحتاج الأشرطة العلوية أيضًا إلى بديل مخطط للموبايل. على الشاشات الصغيرة، التخطيط الأفقي لا مكان له للذهاب. إن لم تقرر كيف تبدو التجربة على الشاشات الصغيرة في وقت التصميم، ستنتهي بإضافة قائمة hamburger كفكرة لاحقة، مما يُفضي إلى مشكلات جديدة.

---

قائمة hamburger

قائمة hamburger (ثلاثة خطوط متراكمة، تفتح درجًا أو طبقة عند النقر) تخفي التنقل وراء تفاعل إضافي واحد. توفر مساحة الشاشة. لكنها أيضًا تجعل كل قسم في منتجك أقل قابلية للاكتشاف.

البحث في هذا ليس غامضًا. وجدت NNGroup أن التنقل بعلامات التبويب على الموبايل يتفوق باستمرار على قوائم hamburger في معدلات قابلية الاكتشاف وإتمام المهام. حين تخفي التنقل، يستخدمه الناس أقل. العناصر خلف الـ hamburger تُسجَّل على أنها ذات أولوية أدنى، لأنها بصريًا كذلك.

هذا لا يجعل الـ hamburger خاطئًا. بل يجعله مقايضة. للمواقع ذات الأقسام العميقة التي يُصل إليها بشكل غير متكرر، المقايضة مقبولة. للتطبيقات التي يفتحها الناس يوميًا، عادةً ما تكون خطأ.

جربت Instagram وضع التنقل الأولي خلف hamburger وتراجعت عن ذلك، ونقلت الأقسام الأساسية إلى شريط علامات التبويب السفلي بدلًا من ذلك. الدرس واضح: استخدم الـ hamburger للمسارات الثانوية والإعدادات والوجهات غير المتكررة. لا تستخدمه أبدًا للإجراءات التي تُحدد سبب فتح شخص ما للمنتج.

---

الشريط الجانبي الدائم

الشريط الجانبي الدائم يُثبت عمودًا كاملًا للتنقل على يسار الشاشة ويبقى مرئيًا أثناء تمرير المستخدم للمحتوى. إنه النمط السائد للوحات التحكم وأدوات التصميم والتوثيق العميق، لأن الثبات المكاني هو الميزة بحد ذاتها.

تستخدم مستندات Tailwind CSS هذا بشكل صحيح تمامًا. يحتوي الشريط الجانبي الأيسر على كل قسم من التوثيق، مُجمَّعًا وقابلًا للتمرير، بينما يشغل المحتوى العرض المتبقي. يعرف المستخدمون دائمًا أين هم، وأين يمكنهم الذهاب، وكيف يتنظم الفضاء المعلوماتي بأكمله. الوعي المكاني هذا هو الهدف بالكامل في المواد المرجعية العميقة حيث يقفز الناس بين الأقسام باستمرار.

تستخدم كل من Slack و Notion و Figma أشرطة جانبية دائمة على مستوى التطبيق للسبب ذاته. الشريط الجانبي هو الخريطة. إزالته ستعني أن المستخدمين يعيدون بناء ذلك النموذج الذهني مع كل إجراء تنقل، وهو تكلفة لا ينبغي عليهم دفعها.

التكلفة هي مساحة الشاشة الأفقية. على جهاز كمبيوتر محمول بشاشة 13 بوصة، يستخدم الشريط الجانبي الدائم من 250 إلى 300 بكسل من مساحة المحتوى. على الموبايل، لا مجال له على الإطلاق.

تنهار الأشرطة الجانبية المتجاوبة إلى درج أو hamburger على الشاشات الصغيرة، مما يعيد إدخال نفس مشكلات قابلية الاكتشاف التي كنت تحاول تجنبها. اربطه بـ الرموز التي تحافظ على اتساق التنقل من البداية، وإلا ستصلحه لاحقًا.

---

شريط التبويب السفلي

يُثبت شريط التبويب السفلي من ثلاث إلى خمس أيقونات في أسفل شاشة الموبايل، مباشرةً داخل منطقة الإبهام. إنه المعيار للتطبيقات الأصلية على الموبايل، وابتداءً من 2026، الافتراضي لأي منتج ويب يفتحه الناس يوميًا على هواتفهم.

تستخدم كل من Instagram و Spotify و YouTube هذا النمط لتنقلها الأساسي على الموبايل. هذه ليست مصادفات. الشريط السفلي موجود لأن الجزء العلوي من شاشة الهاتف هو المنطقة الأصعب للوصول إليها بإبهام واحد، والتنقل يُنقر باستمرار. نقل الوجهات الأولية إلى الأسفل يقلل الجهد الجسدي بطريقة تتراكم عبر آلاف الجلسات اليومية.

خمسة عناصر هو الحد الأقصى الصارم. بعد خمسة، تصغر الأيقونات وتُقطع التسميات. إن كان منتجك يحتوي على أكثر من خمسة أقسام أولية، فهذه مشكلة في هندسة المعلومات متنكرة في هيئة مشكلة تنقل. أعد الهيكلة قبل اختيار النمط.

في 2026، شريط التبويب السفلي هو الافتراضي لأي منتج يفتحه الناس على الأقل يوميًا على الموبايل. إن كنت تصمم منتجًا استهلاكيًا للموبايل أو تطبيق ويب تقدمي mobile-first ولا تستخدم شريطًا سفليًا، تحتاج إلى سبب محدد لذلك. "صممنا لسطح المكتب أولًا" ليس ذلك السبب.

---

القائمة الضخمة mega menu

تُوسّع القائمة الضخمة mega menu عنصرًا واحدًا في التنقل العلوي إلى لوحة واسعة متعددة الأعمدة من الروابط والفئات وأحيانًا بلاطات معاينة. إنها مبنية للمواقع ذات الكتالوجات الكبيرة والتسلسلات الهرمية المعقدة التي لا تناسب قائمة منسدلة بسيطة دون أن تصبح غير قابلة للاستخدام.

تشغّل Amazon نسخة متطرفة من هذا تحت قائمة "All". عشرات الفئات مع فئات فرعية، مُنظَّمة في أعمدة ومجموعات، كلها مرئية في لوحة واحدة. يعمل النمط تحت ضغط الكتالوج لأنه يُظهر العمق دون الحاجة إلى نقرات متعددة أسفل التسلسل الهرمي. كل شيء قابل للمسح البصري في عرض واحد.

المشكلة هي أن mega menus هو نمط حصري لسطح المكتب بالتصميم. لوحة منسدلة متعددة الأعمدة لا تترجم إلى الموبايل. المواقع التي تستخدمها تحتاج إلى استراتيجية تنقل منفصلة تمامًا للشاشات الصغيرة، مما يضاعف مساحة التصميم والصيانة.

تفشل mega menus أيضًا على المواقع الضحلة. اثنا عشر صفحة لا تبرر mega menu. النمط يستلزم تعقيدًا يجب أن تكون قد اكتسبته من خلال عمق محتواك الفعلي، وليس مجرد تفاؤل بالنمو المستقبلي.

---

مسار التنقل breadcrumbs

تُظهر breadcrumbs المسار من الصفحة الرئيسية إلى الصفحة الحالية: الرئيسية > CSS > Grid. إنها ليست تنقلًا أوليًا. إنها تنقل توجيه، وتخدم وظيفة دقيقة.

تستخدم MDN breadcrumbs على كل صفحة مرجعية. حين تصل إلى توثيق CSS grid من بحث Google، يُخبرك مسار breadcrumb فورًا أن هذه الصفحة تقع داخل CSS، الذي يقع داخل References. هذا السياق يطوي تسلسلًا هرميًا من ثلاثة مستويات في سطر واحد لا يتطلب أي تفاعل لتحليله.

Breadcrumbs عديمة الفائدة على المواقع المسطحة. إن كان منتجك بالكامل على عمق مستويين، تُضيف breadcrumbs فوضى بصرية دون توفير أي قيمة توجيهية. تكسب مكانها على مواقع التوثيق، وتسلسلات هرمية للتجارة الإلكترونية مثل الرئيسية > رجال > سترات > مقاوم للماء، وأي موقع يصل إليه المستخدمون بشكل منتظم من عمق عبر البحث.

إنها تتزاوج مع أنماط أخرى بدلًا من استبدالها. تجلس breadcrumbs فوق المحتوى، مكملةً شريطًا علويًا أو شريطًا جانبيًا. لمزيد من تحليلات تصميم الويب وواجهة المستخدم، ينطبق المنطق ذاته: عناصر التنقل الثانوية يجب أن تدعم النمط الأساسي، لا أن تنافسه.

---

لوحة الأوامر command palette

لوحة الأوامر command palette هي طبقة مُفعَّلة بلوحة المفاتيح، عادةً تُستدعى بـ Cmd+K أو Ctrl+K، تقبل مدخلات نصية وتُعيد إجراءات مُرتَّبة وأهدافًا للتنقل ونتائج بحث. تُشغّل كل من Linear و Raycast و Slack و Figma هذا كسطح تنقل من الدرجة الأولى.

في 2026، تخرجت لوحة الأوامر command palette من حيلة لمستخدمي الطاقة إلى آلية تنقل أولية في البرامج الإنتاجية الجادة. يوصلك Cmd+K في Linear إلى أي مشكلة أو مشروع أو إجراء في مساحة العمل في أقل من ثانيتين. Raycast مبني بالكامل تقريبًا حول هذا النمط. تتعامل هذه المنتجات مع النية المكتوبة كمسار أكثر مباشرة من أي تسلسل هرمي للقوائم، لأنه للأشخاص ذوي العادات الكيبوردية، هو كذلك.

نمط الفشل هو الخفاء. المستخدمون الذين لا يعرفون اختصار لوحة المفاتيح لن يكتشفوه أبدًا من خلال الاستكشاف. لا يمكن للـ command palettes أن تحل محل التنقل المرئي للمستخدمين الجدد أو أي شخص لا يملك عادات keyboard-first. المنتجات التي تخفي كل التنقل خلف Cmd+K تترك كل مستخدم جديد في حيرة.

الاستخدام الصحيح هو التعزيز، لا الاستبدال. شغّل command palette إلى جانب الشريط الجانبي أو الشريط العلوي. دع مستخدمي لوحة المفاتيح يتخطون القائمة تمامًا.

دع الجميع الآخرين يتنقلون بصريًا. كلا المسارين يجب أن يوجدا.

---

الرأسيات اللاصقة والمتقلصة

الرأسية اللاصقة تبقى ثابتة في أعلى منفذ العرض أثناء تمرير المستخدم. الرأسية المتقلصة تفعل الشيء ذاته لكنها تُقلل ارتفاعها بعد أن يتجاوز المستخدم عتبة التمرير، مستعيدةً مساحة رأسية دون التضحية بإمكانية الوصول إلى التنقل.

كلا النمطين يُبقيان التنقل متاحًا على الصفحات الطويلة دون الحاجة إلى التمرير للأعلى. على الصفحات الكثيفة بالمحتوى، هذا تحسين حقيقي في قابلية الاستخدام. تستخدم GitHub رأسية لاصقة عبر صفحات المستودعات حتى يبقى التنقل الأساسي والبحث وسياق المستودع مرئيًا دائمًا أثناء التمرير عبر المشكلات والكود والنقاشات.

التكلفة هي مساحة الشاشة الرأسية. رأسية لاصقة بارتفاع 60 إلى 70 بكسل تستطلع هذا الارتفاع من كل موضع للتمرير. على تابلت بارتفاع 768 بكسل، هذا قريب من 10 بالمئة من منفذ العرض محتلًا بشكل دائم بالتنقل. تستعيد الرأسيات المتقلصة بعض ذلك بالتقليص إلى نحو 40 بكسل بعد التمرير، لكنها تتطلب تطبيقًا دقيقًا لتبدو متعمدة لا مكسورة.

تجنب الرأسيات اللاصقة على الصفحات القصيرة حيث يصل المستخدم إلى الأسفل بسرعة. النمط يكسب مكانه على الصفحات الطويلة الكثيفة بالمحتوى حيث سيتطلب العودة إلى الأعلى تمريرًا كبيرًا.

---

التذييل الضخم fat footer

التذييل الضخم fat footer هو تذييل واسع متعدد الأعمدة يحتوي على تنقل ثانوي وفئات روابط وصفحات قانونية ومعلومات التواصل. إنه ليس تنقلًا أوليًا. إنه فرصة ثانية للمستخدمين الذين يتمررون عبر المحتوى الرئيسي دون إيجاد ما احتاجوه.

تُشغّل كل من Tailwind CSS و Stripe ومعظم مواقع تسويق SaaS تذييلات ضخمة بأربعة إلى ستة أعمدة تغطي روابط المنتج والتوثيق وصفحات الشركة والصفحات القانونية وروابط التواصل الاجتماعي. لا تكلف شيئًا في ارتفاع منفذ العرض خلال تجربة المحتوى الرئيسية وتوفر خريطة مفيدة للمستخدمين الذين يصلون إلى الأسفل بحثًا عن شيء محدد.

التذييلات الضخمة أكثر أهمية لـ SEO من التنقل الحي. كل رابط في التذييل الضخم هو مسار قابل للزحف. إنها إحدى الطرق الرئيسية التي تكتشف بها محركات البحث الصفحات الثانوية والثالثية على الموقع. من منظور قابلية الاستخدام الصرفة، معظم المستخدمين لا يتمررون أبدًا إلى التذييل، لكن أولئك الذين يفعلون ذلك يبحثون بشكل متعمد.

تخطَّ التذييل الضخم داخل تجارب المنتج لمستخدمين مسجلين دخولهم. لا تُظهر Notion تذييلًا تسويقيًا داخل المحرر. النمط ينتمي إلى مواقع التسويق ومراكز التوثيق حيث يتصفح المستخدمون المجهولون والجدد بحرية.

---

كيف تختار النمط الصحيح

النمط الصحيح للتنقل يتبع مدخلين: عمق هندسة معلوماتك والسياق الذي يستخدم فيه الناس المنتج. كل شيء آخر هو نتيجة لهذين العاملين.

الجمع بين الأنماط طبيعي ومتوقع. معظم المنتجات الجادة تستخدم اثنين أو ثلاثة. تستخدم توثيقات Tailwind CSS شريطًا علويًا للتنقل على مستوى الموقع، وشريطًا جانبيًا دائمًا لتنقل المستندات، وbreadcrumbs لتوجيه مستوى الصفحة. تعالج هذه الأنماط الثلاثة ثلاثة مستويات متمايزة من التسلسل الهرمي للتنقل في آنٍ واحد دون تداخل.

Brainy تساعد المصممين على اتخاذ قرارات أحدّ وأسرع في العمل الذي يُشحن فعلًا. اكتشف ما نبنيه للمبدعين.

---

أخطاء التنقل التي تقتل قابلية الاستخدام بصمت

إخفاء الإجراءات الأولية في قائمة hamburger. إن احتاج المستخدمون إلى ميزة يوميًا، لا يمكنها أن تعيش وراء نقرة إضافية. قِس معدل النقر على الـ hamburger ذاته. إن كان أقل من 30 بالمئة، فالمسارات في داخله غير مرئية لمعظم مستخدميك.

تسميات غير متسقة عبر الأسطح. "Insights" على لوحة التحكم، "Reports" في بريد الإلحاق الإلكتروني، "Analytics" في مستندات المساعدة، كلها تشير إلى الوجهة ذاتها. التنقل هو مفردات. كل مرادف هو علامة استفهام في النموذج الذهني للمستخدم.

لا حالة نشطة للموقع الحالي. المستخدمون يحتاجون أن يعرفوا أين هم. الحالة النشطة على عنصر التنقل الحالي هي أبسط إشارة توجيه متاحة. إغفالها يجبر المستخدمين على قراءة URL، وهو نمط فشل صممته في المنتج.

التنقل الذي يتغير حسب الصفحة أو القسم. إن كان الشريط الجانبي يُعيد ترتيب نفسه بناءً على القسم الذي يوجد فيه المستخدم، فقد كسرت الذاكرة المكانية التي بناها. التنقل يجب أن يكون خريطة ثابتة. المنتجات التي تتغير الخريطة فيها بناءً على الموضع لا تبني ثقة المستخدم، بل تدمره.

الإفراط في التداخل. قائمة منسدلة ذات ثلاثة مستويات عميقة هي دائمًا تقريبًا مشكلة في هندسة المعلومات مُعبَّر عنها بشكل خاطئ في واجهة المستخدم. اجعل البنية مسطحة أولًا. القوائم المتداخلة بطيئة في المسح البصري، مستحيلة الاستخدام باللمس، وتتطلب تحكمًا دقيقًا بالفأرة للبقاء مفتوحة عند التمرير فوقها.

لـ أنماط التخطيط المبنية للمسح البصري، ينطبق المبدأ ذاته: البنية والتوجيه يأتيان قبل الزخرفة. التنقل الذي يفشل في التوجيه هو زخرفة في أحسن الأحوال، واحتكاك في أسوأها.

---

الأسئلة الشائعة

ما هو أكثر أنماط التنقل استخدامًا على الويب؟

شريط التنقل الأفقي العلوي هو النمط الأكثر شيوعًا لمواقع سطح المكتب. للتطبيقات على الموبايل والمنتجات ذات الاستخدام اليومي، أصبح شريط التبويب السفلي هو المعيار. معظم المنتجات الحقيقية تستخدم كليهما، شريطًا علويًا على سطح المكتب وشريطًا سفليًا على الموبايل، فوق هندسة معلومات واحدة متسقة.

متى يجب أن أستخدم قائمة hamburger؟

استخدم قائمة hamburger للتنقل الثانوي أو غير المتكرر الاستخدام على الموبايل، لا للأقسام الأولية. إن كان على المستخدم فتح الـ hamburger لفعل الشيء الأساسي الذي يفعله منتجك، فالهندسة تحتاج إعادة هيكلة، لا أيقونة أفضل.

كم عنصرًا يجب أن يحتوي شريط التنقل؟

خمسة إلى سبعة عناصر هو السقف المقبول للشريط الأفقي العلوي، وخمسة لشريط التبويب السفلي على الموبايل. بعد هذه الأعداد يبدأ النمط في الفشل، تتزاحم العناصر، تُقطع التسميات، ويكلف المسح البصري أكثر مما يُعيد.

هل يمكنني استخدام أنماط تنقل متعددة على موقع واحد؟

ليس فقط يمكنك، بل يجب عليك. معظم المنتجات الحقيقية تستخدم نمطين أو ثلاثة تعالج مستويات مختلفة من التسلسل الهرمي للتنقل. تجمع مواقع التوثيق عادةً بين شريط علوي لتنقل الموقع وشريط جانبي دائم لتنقل الأقسام وbreadcrumbs لموقع الصفحة.

كل نمط يتعامل مع طبقة مميزة دون تداخل. الخطأ هو استخدام أنماط متعددة تتنافس بدلًا من التعاون.

كيف يؤثر التنقل على SEO؟

الروابط في شريطك العلوي والشريط الجانبي والتذييل الضخم تنقل سلطة الصفحة وتساعد محركات البحث على اكتشاف الصفحات وفهرستها. تضيف Breadcrumbs بيانات منظمة يمكنها إظهار معلومات المسار مباشرةً في نتائج البحث. التنقل هو جزء من بنية SEO الخاصة بك ويجب التعامل معه كذلك من اليوم الأول، لا إضافته كترقيع لاحقًا.

---

توقف عن جعل الناس يبحثون

التنقل غير مرئي حين يعمل ومزعج حين لا يعمل. الهدف ليس أبدًا قائمة جميلة. الهدف هو مستخدمون يصلون ويتوجهون وينتقلون ويعودون دون لحظة واحدة من الاحتكاك.

تسعة أنماط تغطي تقريبًا كل شيء: الشريط العلوي للمواقع التسويقية والمراجع الواسعة، والشريط الجانبي الدائم للأدوات والتوثيق العميق، وشريط التبويب السفلي للموبايل اليومي الاستخدام، والـ mega menu لعمق الكتالوج، والـ breadcrumbs للتوجيه الهرمي، ولوحة الأوامر command palette لأدوات الإنتاجية ذات الأولوية للسرعة، والرأسيات اللاصقة للمحتوى الطويل، والـ hamburger كبديل للمسارات الثانوية، والتذييل الضخم كخريطة فرصة ثانية للمواقع التسويقية.

اختر بناءً على عمق هندسة المعلومات وسياق الاستخدام. طبّق نمطين أو ثلاثة حين يكون لمنتجك مستويات متعددة من التسلسل الهرمي للتنقل. تجنب الأخطاء التي تتضاعف بصمت: الإجراءات الأولية المخفية، والتسميات غير المتسقة، وغياب الحالات النشطة، وبنى التنقل المتغيرة، والتداخل المفرط.

استكشف المزيد من تحليلات تصميم الويب وواجهة المستخدم على Brainy Papers، أو ابنِ إلى جانب مجتمع Brainy للمبدعين وصقّل الحرفة مع أكثر من 2 مليون مصمم يهتمون بإتقان الأساسيات.