⌘ K
العربية
أنماط واجهات المستخدم

أنماط التنقل في تطبيقات الجوال: علامات التبويب والقوائم الجانبية والمسارات المتداخلة

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

فريق تحرير ScreenKits5 دقائق قراءة
واجهات جوال تصورية تبرز علامات التبويب السفلية وعنصر تحكم مجزأً وقائمة تنقل جانبية.
عمل فني تحريري تصوري؛ ليس واجهة تطبيق ملتقطة.

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

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

أهم النقاط

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

ابدأ بالبنية، لا بالمكوّن

اسرد وجهات التطبيق واجمعها وفق تصور المستخدم. قد تكون وجهة مثل «البحث» بجانب «الرئيسية» على المستوى نفسه؛ أما تفاصيل عنصر محفوظ فتقع تحت «المحفوظات». إذا احتاج الناس إلى التنقل بين وجهات متكافئة كثيرًا، فأبقِ هذه الخيارات ظاهرة. وإذا كانوا ينتقلون عادةً من مجموعة إلى عنصر ثم يعودون، فإن المكدس أو المسار المتداخل يعبّر عن العلاقة طبيعيًا.

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

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

قارن الأنماط الثلاثة

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

يمكن أن تضم قائمة التنقل الجانبية مجموعة أكبر من الوجهات المصنفة، وأحيانًا تبديل الحساب أو مساحة العمل. توفر القائمة الجانبية المنبثقة مساحة الشاشة، لكنها تتطلب خطوة إضافية للفتح والاختيار وتغطي المحتوى مؤقتًا. وقد تجعل هذه التكلفة الوجهات المتكررة تبدو مدفونة على الهواتف الصغيرة. تفضل إرشادات Android الحالية في Material 3 شريط تنقل لثلاث إلى خمس وجهات على الشاشات الصغيرة، وتكيّف التنقل للأحجام الأكبر؛ فلا تخلط بين إرشادات Material الأقدم التي توصي بالقوائم الجانبية لخمس وجهات أو أكثر وبين حد عام سارٍ حاليًا.

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

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

اختر وفق تكرار المهام وحجم الشاشة

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

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

اجعل تحديد الموضع والعودة موثوقين

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

العودة جزء من التنقل. ميّز سلوك «رجوع» عن «إغلاق»: يعيد «رجوع» تتبع التسلسل، بينما يخرج «إغلاق» من عرض مؤقت أو منبثق. احتفظ بموضع مفيد وبالبيانات المدخلة عند تبديل المناطق الرئيسية أو العودة من التفاصيل. وعندما تكون وجهة فارغة أو غير متاحة مؤقتًا، أبقِ مكانها ثابتًا واشرح الحالة بدل إزالة التنقل أو تعطيله بصمت. وفي المهمة التي قد تُتلف بيانات أو تتكلف شيئًا، وضّح مسار العودة قبل تأكيد المستخدم.

مراجعة عملية للتنقل

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

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

  • هل يستطيع المستخدم الجديد شرح المناطق الرئيسية من تسمياتها وحدها؟
  • هل يسهل التبديل بين الوجهات المتكافئة مع بيان الخيار المحدد بوضوح؟
  • هل تعرض شاشات التفاصيل عنوانًا ذا معنى ومسار رجوع متوقعًا؟
  • هل يحافظ فتح القائمة الجانبية وإغلاقها على السياق وينقل تركيز إمكانية الوصول بصورة معقولة؟
  • هل تظل التسميات ومناطق التفاعل والتباين وحالات الاختيار قابلة للاستخدام مع النص الأكبر والتقنيات المساعدة؟
  • هل يستطيع الشخص العودة من دون فقدان مسودة أو موضع التمرير أو مكان مفيد في التسلسل؟
  • هل تتكيف البنية مع شاشة أكبر من دون تكرار أدوات تنقل رئيسية متنافسة؟

المصادر وقراءات إضافية

حوّل الإلهام إلى مسارك التالي.

تصفح شاشات حقيقية، وقارن الأنماط، وشاهد كيف تتكامل الأجزاء.

استكشف شاشات التطبيقات