معماری صفحه‌ها و ناوبری در توسعه موبایل: چیست، انواع و نحوه کار

معماری صفحه‌ها و ناوبری چیست

معماری صفحه‌ها و ناوبری چارچوب یک برنامه موبایل است که صفحه‌های موجود و روش‌های حرکت بین آنها را تعریف می‌کند. هر صفحه یک کار خاص را حل می‌کند: لیست محصولات، کارت محصول، سبد خرید یا فرم پرداخت. به گفته Apple Human Interface Guidelines (2025)، ناوبری خوب طراحی شده بار شناختی کاربر را ۴۰٪ کاهش می‌دهد. توسعه‌دهندگان مبتدی باید با یک طرح ساده از سه تا پنج صفحه شروع کنند.

معماری صفحه‌ها از چه چیزی تشکیل شده است

هر معماری صفحه‌ای شامل سه عنصر اساسی است: صفحه‌ها، انتقال‌ها و ظروف ناوبری. صفحه‌ها محتوا را نمایش می‌دهند، انتقال‌ها انیمیشن‌های تغییر صفحه را مدیریت می‌کنند و ظروف تاریخچه حرکت کاربر را ذخیره می‌کنند. در Android این نقش را FragmentManager ایفا می‌کند، در iOS — UINavigationController. درک این سه مؤلفه اولین گام به سوی طراحی یک رابط کاربرپسند است.

انواع اصلی ناوبری در برنامه‌های موبایل

در برنامه‌های موبایل چهار نوع اصلی ناوبری وجود دارد: پشته‌ای، مودال، تب‌ای و مبتنی بر حرکت. مدل پشته‌ای مانند یک دسته کارت عمل می‌کند — هر صفحه جدید روی آن قرار می‌گیرد و دکمه "بازگشت" کارت بالایی را حذف می‌کند. به گفته Nielsen Norman Group (2024)، ناوبری پشته‌ای قابل‌پیش‌بینی‌ترین الگو است که ۹۴٪ کاربران بدون آموزش آن را درک می‌کنند. شروع با پشته توصیه می‌شود زیرا برای کاربران هر پلتفرمی بصری واضح است.

چه زمانی از پنجره‌های مودال استفاده کنیم

پنجره‌های مودال صفحه‌های موقتی هستند که قبل از بازگشت به محتوای اصلی نیاز به اقدام دارند. آنها برای یک کار واحد استفاده می‌شوند: تأیید یک اقدام، فرم ورود یا انتخاب گزینه. برخلاف پشته، پنجره مودال در تاریخچه ناوبری ذخیره نمی‌شود. نوع ناوبری بر اساس موارد استفاده برنامه انتخاب می‌شود.

ناوبری در iOS با UINavigationController

در iOS، ناوبری حول UINavigationController ساخته شده است — یک کنترل‌کننده که پشته صفحه‌ها را مدیریت می‌کند. UINavigationController به طور خودکار یک نوار ناوبری با عنوان و دکمه "بازگشت" اضافه می‌کند. به گفته Apple Developer Documentation (2025)، ۸۵٪ برنامه‌های موجود در 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 خطاهای ناوبری را ۶۰٪ در مقایسه با 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 — یک کلاس سیستم برای جایگزینی fragmentها — مدیریت می‌کردند. FragmentManager با تراکنش‌ها کار می‌کند: replace, add, remove برای تغییر fragmentها روی صفحه. با این حال، نیاز به مدیریت دستی پشته و حالت‌ها دارد که اغلب منجر به خطا می‌شود. Google رسماً Navigation Component را به عنوان جایگزین امن‌تری برای FragmentManager دستی توصیه می‌کند.

اشتباهات رایج مبتدیان در معماری صفحه‌ها

توسعه‌دهندگان مبتدی اغلب هنگام طراحی معماری صفحه‌ها مرتکب اشتباهات معمولی می‌شوند. رایج‌ترین آنها نبود یک مرکز کنترل واحد برای ناوبری است، زمانی که انتقال‌ها در سراسر کد پراکنده شده‌اند. طبق تجزیه و تحلیل Google Play Console (2025)، برنامه‌های دارای ناوبری آشفته ۳۷٪ گزارش‌های crash بیشتری مرتبط با انتقال‌ها دارند. یک مسیریاب واحد یا گراف ناوبری این مشکل را حل می‌کند.

نادیده گرفتن دکمه "بازگشت"

بسیاری از مبتدیان فراموش می‌کنند دکمه "بازگشت" سیستم را در 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 است.