هندسة الشاشات والتنقل في تطوير تطبيقات الجوال: ما هي، أنواعها وكيف تعمل

ما هي هندسة الشاشات والتنقل

هندسة الشاشات والتنقل هي الهيكل الأساسي لتطبيق الجوال الذي يحدد الشاشات المتاحة وطرق التنقل بينها. كل شاشة تحل مهمة محددة: قائمة المنتجات، بطاقة المنتج، سلة التسوق أو نموذج الدفع. وفقًا لـ Apple Human Interface Guidelines (2025)، فإن التنقل المدروس يقلل العبء المعرفي للمستخدم بنسبة 40%. يُنصح المطورون المبتدئون بالبدء بمخطط بسيط من ثلاث إلى خمس شاشات.

مما تتكون هندسة الشاشات

تتضمن أي هندسة شاشات ثلاثة عناصر أساسية: الشاشات والانتقالات وحاويات التنقل. تعرض الشاشات المحتوى، وتدير الانتقالات رسوم متحركة لتغيير الشاشات، وتخزن الحاويات تاريخ تحركات المستخدم. في Android يؤدي هذا الدور FragmentManager، وفي iOS — UINavigationController. فهم هذه المكونات الثلاثة هو الخطوة الأولى نحو تصميم واجهة سهلة الاستخدام.

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

في تطبيقات الجوال، هناك أربعة أنواع رئيسية للتنقل: الكومة، المشروط، علامات التبويب والإيماءات. نموذج الكومة يعمل مثل كومة من البطاقات — كل شاشة جديدة توضع في الأعلى، وزر "العودة" يزيل البطاقة العلوية. وفقًا لـ Nielsen Norman Group (2024)، فإن التنقل بالكومة هو النمط الأكثر قابلية للتوقع، ويفهمه 94% من المستخدمين دون تدريب. يُوصى بالبدء بالكومة لأنها بديهية للمستخدمين على أي منصة.

متى تستخدم النوافذ المشروطة

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

التنقل في iOS باستخدام UINavigationController

في iOS، يُبنى التنقل حول UINavigationController — وهي وحدة تحكم تدير كومة الشاشات. UINavigationController يضيف تلقائيًا شريط تنقل بعنوان وزر "العودة". وفقًا لـ Apple Developer Documentation (2025)، 85% من التطبيقات في App Store تستخدم UINavigationController كنمط التنقل الرئيسي. يكفي للمطورين المبتدئين في iOS إتقان push و pop مع أساسيات تصميم UX/UI.

كيف تعمل كومة الشاشات في iOS

أثناء الانتقال push، توضع شاشة جديدة في كومة التنقل، ويرى المستخدم حركة انزلاق من اليمين. أثناء الانتقال pop، تُحذف الشاشة الحالية من الكومة ويعود المستخدم إلى الشاشة السابقة. يخزن UINavigationController مراجع لجميع الشاشات في الكومة، مما يسمح بالعودة عدة خطوات للخلف. في IT Sectr، نستخدم هذا الأسلوب في جميع مشاريع iOS لبناء سيناريوهات مستخدم خطية.

كيف يعمل التنقل في Android

في Android، تُنفذ هندسة الشاشات عبر Navigation Component — مكتبة من Google لبناء التنقل. يستخدم Navigation Component رسمًا بيانيًا للتنقل (nav graph)، حيث كل شاشة هي عقدة والانتقالات هي حواف بينها. وفقًا لـ Android Developers Guide (2025)، يقلل Navigation Component أخطاء التنقل بنسبة 60% مقارنة بـ FragmentManager اليدوي. يُوصى المطورون المبتدئون في Android بإتقان Navigation Component فورًا.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

// في nav_graph.xml:
<!-- 
  <fragment android:id="@+id/homeFragment"
    android:name=".HomeFragment" />
  <fragment android:id="@+id/detailFragment"
    android:name=".DetailFragment" />
  <action android:id="@+id/toDetail"
    app:destination="@id/detailFragment" />
-->

// التنقل بالضغط على الزر:
view.findViewById<Button>(R.id.open_detail).setOnClickListener {
    findNavController().navigate(R.id.toDetail)
}

FragmentManager ودوره

قبل Navigation Component، كان المطورون يديرون الانتقالات عبر FragmentManager — فئة نظام لاستبدال الأجزاء (fragments). FragmentManager يعمل مع المعاملات: replace, add, remove لتغيير الأجزاء على الشاشة. ومع ذلك، يتطلب إدارة يدوية للكومة والحالات، مما يؤدي غالبًا إلى أخطاء. توصي Google رسميًا بـ Navigation Component كبديل أكثر أمانًا لـ FragmentManager اليدوي.

الأخطاء الشائعة للمبتدئين في هندسة الشاشات

غالبًا ما يرتكب المطورون المبتدئون أخطاء نموذجية عند تصميم هندسة الشاشات. الأكثر شيوعًا هو عدم وجود مركز تحكم واحد للتنقل، عندما تكون الانتقالات متناثرة في جميع أنحاء الكود. وفقًا لتحليل Google Play Console (2025)، التطبيقات ذات التنقل العشوائي لديها تقارير أعطال مرتبطة بالانتقالات أكثر بنسبة 37%. يحل الموجه الواحد أو الرسم البياني للتنقل هذه المشكلة.

تجاهل زر "العودة"

ينسى العديد من المبتدئين معالجة زر "العودة" النظامي في Android أو إيماءة السحب في iOS. العودة غير المعالجة تؤدي إلى تجميد التطبيق أو خروجه غير المتوقع. في Android، يعالج Navigation Component زر "العودة" تلقائيًا إذا تم تكوين الرسم البياني للتنقل. فيما يلي مثال لمعالجة زر "العودة" باستخدام OnBackPressedDispatcher.

class MyFragment : Fragment() {
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        val callback = OnBackPressedCallback(true) {
            if (isSheetExpanded) {
                collapseSheet()
                isEnabled = false
            } else {
                isEnabled = false
                requireActivity().onBackPressedDispatcher.onBackPressed()
            }
        }
        requireActivity().onBackPressedDispatcher.addCallback(
            viewLifecycleOwner, callback
        )
    }
}

يتحقق الكود مما إذا كانت لوحة Bottom Sheet موسعة: إذا كانت كذلك — يطويها، وإلا — يمرر الحدث إلى موزع النظام. هذا نمط قياسي للمعالجة المخصصة لـ "العودة" في Android.