النافذة المنبثقة مقابل الشيت السفلي: متى تستخدم كلًا منهما في تطبيق الجوال
النافذة المنبثقة تحجب، والشيت السفلي يتيح للناس التصفح. السؤال الواحد الذي يحسم الاختيار بينهما، وإعادة بناء النمطين، وجدول قرار لعشر حالات شائعة، وقواعد المنصات خلفه.
النوافذ المنبثقة (modals) والشيتات السفلية (bottom sheets) كلاهما ينزلق فوق الشاشة، ولهذا تعاملهما الفرق كشيء واحد بأشكال مختلفة. هما ليسا كذلك. أحدهما يوقف الناس حتى يجيبوا، والآخر يتيح لهم اختيار شيء ومواصلة طريقهم. إليك السؤال الواحد الذي يحسم الأمر، وإعادة بناء للنمطين، وجدول قرار للحالات التي تظهر في كل تطبيق.
السؤال الواحد: هل يجب الإجابة عنه الآن؟
إذا لم يستطع الشخص المتابعة حتى يختار، فهو modal. وإذا كان بإمكانه تجاهله وتبقى الشاشة منطقية، فهو sheet.
هذا السؤال الوحيد يحسم معظم الحالات قبل أن يتجادل أحد حول الشكل. كما يفسر كل فرق آخر بينهما: الـ modal يقف في المنتصف ويعتم كل شيء لأن لا شيء آخر يهم حتى تتم الإجابة، والـ sheet يصعد من الأسفل ويترك الشاشة ظاهرة لأن الشاشة ما زالت هي الأساس.
الـ modal: قرر قبل أن تتابع
الـ modal، ويسمى dialog في Android وalert في iOS، يقاطع عن قصد. وهو مناسب عندما:
- يجب أن يقرر الناس قبل المتابعة. التطبيق لا يستطيع تخمين الإجابة.
- لا يمكن التراجع عن الإجراء. حذف مشروع يزيل 24 ملفًا للجميع يستحق وقفة.
- هناك خياران على الأكثر. إلغاء والإجراء، مسمّى بفعل: حذف، وليس موافق.
أين يفشل: في أي شيء اختياري. الـ modal الذي يطلب تقييمًا أو يعلن عن ميزة أو يعرض قائمة يحجب الناس عما جاؤوا لفعله، فيتعلمون الضغط على أي شيء يغلقه دون قراءة.
الـ bottom sheet: تصفح ثم اختر
الـ bottom sheet يحمل خيارات تخص ما هو معروض على الشاشة أصلًا. وهو مناسب عندما:
- تخص الخيارات هذه الشاشة. شارك المشروع أو كرره أو انقله أو أرشفه.
- يمكن للناس سحبه بعيدًا للتراجع. لا إجابة مطلوبة.
- هناك أكثر من خيارين. للـ sheet مساحة لقائمة، والقائمة في متناول الإبهام.
أين يفشل: في أي شيء لا يجوز تخطيه. يمكن إغلاق الـ sheet بسحبة عابرة، لذا فتأكيد الإجراء المدمر الذي يعيش في sheet فقط سهل الضياع أو التفعيل بالخطأ.
كثرة الأزرار هي sheet متنكر
خطأ: modal
صحيح: sheet
الشاشة اليسرى هي الخلط الأكثر شيوعًا. ستة أزرار متراصة في صندوق وسط الشاشة تطلب من الناس قراءة قائمة داخل مقاطعة. لا خيار منها عاجل، فلا شيء يستدعي حجب الشاشة. الخيارات نفسها في sheet تُقرأ كقائمة، وتبقى في متناول الإبهام، وتُغلق بسحبة.
قاعدة Material Design قصيرة: يجب ألا يحمل الـ dialog أكثر من إجراءين. وحين تحتاج إلى ثالث، فما لديك قائمة، والقائمة مكانها الـ sheet.
الاثنان معًا: احذف من sheet، وأكّد بـ modal
أولًا، الـ sheet
ثم، الـ modal
النمطان ليسا خصمين. يمكن لخيار مدمر أن يجلس في sheet مع بقية الإجراءات، باللون الأحمر وفي الآخر. الضغط عليه يفتح الـ modal، لأن الآن فقط يوجد قرار لا يمكن التراجع عنه. تصفح في الـ sheet، واحجب في اللحظة التي يهم فيها الأمر.
Modal أم sheet: جدول قرار
| الحالة | الاختيار | السبب |
|---|---|---|
| حذف مشروع للجميع | Modal | لا يمكن التراجع، وخياران |
| تجاهل التغييرات غير المحفوظة | Modal | يجب أن يقرر الناس قبل المغادرة |
| تسجيل الخروج على جهاز مشترك | Modal | نعم أو لا يغيّر الحالة |
| مشاركة، تكرار، نقل، أرشفة | Sheet | خيارات للعنصر المعروض على الشاشة |
| ترتيب قائمة أو تصفيتها | Sheet | يريد الناس رؤية القائمة تتغير خلفه |
| اختيار بطاقة محفوظة عند الدفع | Sheet | أكثر من خيارين، وجزء من الشاشة |
| إضافة صورة من الكاميرا أو المعرض | Sheet | اختيار للمصدر، وسهل التراجع عنه |
| تفاصيل مكان على خريطة | Sheet | تبقى الخريطة هي الأساس |
| قبول شروط جديدة قبل المتابعة | Modal | لا يستطيع التطبيق المتابعة دون إجابة |
| الإعلان عن ميزة جديدة | لا هذا ولا ذاك | لا أحد مضطر للقرار. استخدم banner مضمنًا |
من يجيدها
يمكنك التحقق من هذه على هاتفك اليوم:
- Apple Maps وGoogle Maps يضعان نتائج البحث وتفاصيل المكان في sheet فوق الخريطة، فلا تفقد مكانك أبدًا.
- share sheet في iOS يعرض كل تطبيق وإجراء للشيء الذي تنظر إليه، ويُغلق بسحبة.
- قائمة "المزيد" في Instagram على المنشور تُفتح كـ bottom sheet فيها خيارات ذلك المنشور.
إرشادات Apple ترسم الخط نفسه من الجهة الأخرى: التنبيهات (alerts) للمعلومات الحرجة التي يحتاجها الناس فورًا، بما فيها تحذير من أن إجراءً قد يتلف البيانات، بينما الـ sheets والـ action sheets تحمل خيارات متعلقة بما يفعله الناس.
الأسئلة الشائعة
متى أستخدم bottom sheet بدل modal؟
حين تخص الخيارات الشاشة الحالية، وتزيد على اثنين، ولا يضطر أحد للاختيار كي يتابع. المشاركة والترتيب والتصفية والاختيار من قائمة كلها مهام للـ sheet.
متى أستخدم نافذة modal حوارية؟
حين يجب أن يقرر الناس قبل المتابعة، وغالبًا لأن الإجراء لا يمكن التراجع عنه. اجعلها إجراءين: إلغاء والإجراء مسمّى بفعل.
كم زرًا يجب أن يحمل الـ modal؟
اثنان على الأكثر. يقول Material Design إن الـ dialog يجب أن يحتوي على إجراءين كحد أقصى. وإن احتجت أكثر، فالخيارات قائمة ومكانها الـ sheet.
هل الـ bottom sheet هو modal؟
الـ modal bottom sheet يعتّم الشاشة ويجب إغلاقه قبل أن يستخدم الناس الشاشة من جديد، لكن يمكن إغلاقه بسحبة ولا يطرح سؤالًا. أما الـ dialog فيطرح سؤالًا وينتظر إجابة.
ما الفرق بين alert وaction sheet في iOS؟
الـ alert يقاطع بمعلومة حرجة ومجموعة صغيرة من الأزرار. والـ action sheet يصعد من الأسفل بخيارات متعلقة بإجراء بدأه الناس للتو، مثل خيارات صورة.
المصادر
- Dialogs وBottom sheets، Material Design 3.
- Alerts وSheets وAction sheets، إرشادات واجهة Apple للمستخدم.
- نُشر أولًا كـ carousel على UX Brainy.
Want your app's dialogs, sheets and every other pattern chosen and designed as one system? Our team designs app UI from the first flow to the finished components.
Get Started
