أشرطة علامات التبويب والتنقل السفلي: قواعد التصميم التي تصمد
كيفية تصميم أشرطة علامات التبويب والتنقل السفلي على iOS وAndroid: من 3 إلى 5 وجهات، والتنقل وليس الإجراءات، والتسميات، والشارات، والرؤية، والحالات النشطة المتحركة.
الوجبات الجاهزة الأساسية
استخدم شريط علامات التبويب أو التنقل السفلي لثلاث إلى خمس وجهات عالية المستوى، وليس للإجراءات. امنح كل علامة تبويب رمزًا وتسمية، وحافظ على الشريط مرئيًا أثناء تنقل الأشخاص بين الأقسام، وتجنب تجاوز علامات التبويب "المزيد" حيثما أمكنك ذلك، واستخدم الشارات باعتدال. قم بتحريك الحالة النشطة بمهارة حتى يتمكن الأشخاص من رؤية مكانهم.
ماذا تقول المنصات
يقول Material Design 3 أن أشرطة التنقل توفر الوصول إلى ثلاث إلى خمس وجهات، لكل منها رمز وتسمية، ووجهة واحدة نشطة دائمًا. تنص إرشادات Apple على استخدام شريط علامات التبويب للتنقل، وليس لتوفير الإجراءات، وإبقائه مرئيًا أثناء تنقل الأشخاص بين الأقسام (إلا عندما يغطيه الشكل)، ولتجنب علامات التبويب الفائضة.
اختيار علامات التبويب
تمثل علامات التبويب بنية التطبيق:
- اختر الأقسام التي يستخدمها الأشخاص في أغلب الأحيان، وليس كل قسم لديك.
- استخدم الأسماء للوجهات ("المكتبة")، وليس الأفعال للإجراءات ("تحميل").
- ضع الإجراءات على الشاشة نفسها، في شريط أدوات أو زر إجراء عائم.
- إذا كنت بحاجة إلى أكثر من خمسة، فأعد النظر في البنية قبل إضافة علامة التبويب "المزيد".
التسميات والشارات
توفر علامات التبويب ذات الأيقونات فقط المساحة ولكنها تجبر الأشخاص على التخمين. تجعل التصنيفات التنقل أكثر وضوحًا، خاصة بالنسبة للأيقونات الأقل شيوعًا. يجب أن تشير الشارات إلى شيء يحتاج الأشخاص إلى التصرف بناءً عليه؛ الشارة الموجودة دائمًا تتوقف عن ملاحظة ذلك.
الحفاظ على الحالة لكل علامة تبويب
تلاحظ Apple أن أشرطة علامات التبويب تتيح للأشخاص تبديل الأقسام مع الحفاظ على حالة التنقل الحالية داخل كل قسم. يجب أن تُظهر العودة إلى علامة التبويب المكان الذي توقفت عنده، وليس إعادة التعيين إلى الأعلى.
حركة
يساعد الانتقال البسيط على المؤشر النشط، مثل القرص الذي ينزلق أو الرمز الذي يتم ملؤه، الأشخاص على تتبع مكانهم. أبقِ الأمر سريعًا، في أقل من 250 مللي ثانية تقريبًا، وتجنب ارتداد كل رمز في كل نقرة، وقم بتبسيطه عند تشغيل الحركة المنخفضة.
مفتاح Principle للتذكر
- ثلاث إلى خمس وجهات عالية المستوى
- التنقل وليس الإجراءات
- أيقونة بالإضافة إلى التسمية لكل علامة تبويب
- اجعلها مرئية وحافظ على حالة كل علامة تبويب
- حركة الحالة النشطة الدقيقة والسريعة
الأسئلة المتداولة
المصادر
- Navigation bar guidelines — Material Design 3
- Tab bars — إرشادات واجهة Apple البشرية