Mobil ishlab chiqishda ekran arxitekturasi va navigatsiya: bu nima, turlari va qanday ishlaydi

Ekran arxitekturasi va navigatsiya nima

Ekran arxitekturasi va navigatsiya mavjud ekranlar va ular o'rtasida harakatlanish usullarini belgilaydigan mobil ilova ramkasidir. Har bir ekran muayyan vazifani hal qiladi: mahsulot ro'yxati, mahsulot kartasi, savat yoki to'lov shakli. Apple Human Interface Guidelines (2025) ma'lumotlariga ko'ra, yaxshi o'ylangan navigatsiya foydalanuvchining kognitiv yukini 40% kamaytiradi. Yangi boshlovchi ishlab chiqaruvchilar uch-besh ekranli oddiy sxemadan boshlashlari kerak.

Ekran arxitekturasi nimadan iborat

Har qanday ekran arxitekturasi uchta asosiy elementni o'z ichiga oladi: ekranlar, o'tishlar va navigatsiya konteynerlari. Ekranlar tarkibni ko'rsatadi, o'tishlar ekran o'zgartirish animatsiyalarini boshqaradi va konteynerlar foydalanuvchining harakat tarixini saqlaydi. Android-da bu rolni FragmentManager, iOS-da esa UINavigationController bajaradi. Ushbu uch komponentni tushunish foydalanuvchi uchun qulay interfeysni loyihalash uchun birinchi qadamdir.

Mobil ilovalarda navigatsiyaning asosiy turlari

Mobil ilovalarda navigatsiyaning to'rtta asosiy turi mavjud: stack, modal, tab va imo-ishoraga asoslangan. Stack modeli kartalar to'plami kabi ishlaydi — har bir yangi ekran tepaga qo'yiladi va "Orqaga" tugmasi eng yuqori kartani olib tashlaydi. Nielsen Norman Group (2024) ma'lumotlariga ko'ra, stack navigatsiyasi eng bashorat qilinadigan naqsh bo'lib, foydalanuvchilarning 94% tomonidan o'qitilmasdan tushuniladi. Stack bilan boshlash tavsiya etiladi, chunki u har qanday platforma foydalanuvchilari uchun intuitiv ravishda tushunarli.

Modal oynalardan qachon foydalanish kerak

Modal oynalar asosiy tarkibga qaytishdan oldin harakat talab qiladigan vaqtinchalik ekranlardir. Ular bitta vazifa uchun ishlatiladi: harakatni tasdiqlash, kirish shakli yoki variantni tanlash. Stackdan farqli o'laroq, modal oyna navigatsiya tarixida saqlanmaydi. Navigatsiya turi ilovaning foydalanish stsenariylariga qarab tanlanadi.

UINavigationController bilan iOS-da navigatsiya

iOS-da navigatsiya UINavigationController — ekran stackini boshqaradigan boshqaruvchi atrofida qurilgan. UINavigationController avtomatik ravishda sarlavha va "Orqaga" tugmasi bilan navigatsiya panelini qo'shadi. Apple Developer Documentation (2025) ma'lumotlariga ko'ra, App Store'dagi ilovalarning 85% asosiy navigatsiya naqshi sifatida UINavigationController-dan foydalanadi. Yangi boshlovchi iOS ishlab chiqaruvchilari UX/UI dizayn asoslari bilan birga push va pop-ni o'zlashtirishlari kifoya.

iOS-da ekran stacki qanday ishlaydi

push o'tishi paytida yangi ekran navigatsiya stackiga joylashtiriladi va foydalanuvchi o'ng tomondan siljish animatsiyasini ko'radi. pop o'tishi paytida joriy ekran stackdan olib tashlanadi va foydalanuvchi oldingi ekranga qaytadi. UINavigationController stackdagi barcha ekranlarga havolalarni saqlaydi va foydalanuvchiga bir necha qadam orqaga qaytishga imkon beradi. IT Sectr da biz barcha iOS loyihalarida chiziqli foydalanuvchi stsenariylarini qurish uchun ushbu yondashuvdan foydalanamiz.

Android-da navigatsiya qanday ishlaydi

Android-da ekran arxitekturasi Navigation Component (Google-ning navigatsiya qurish kutubxonasi) orqali amalga oshiriladi. Navigation Component navigatsiya grafigidan (nav graph) foydalanadi, bunda har bir ekran tugun va o'tishlar ular orasidagi qirralardir. Android Developers Guide (2025) ma'lumotlariga ko'ra, Navigation Component qo'lda FragmentManager bilan solishtirganda navigatsiya xatolarini 60% kamaytiradi. Yangi boshlovchi Android ishlab chiqaruvchilariga darhol Navigation Component-ni o'zlashtirish tavsiya etiladi.

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

// nav_graph.xml da:
<!-- 
  <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" />
-->

// Tugmani bosish bilan navigatsiya:
view.findViewById<Button>(R.id.open_detail).setOnClickListener {
    findNavController().navigate(R.id.toDetail)
}

FragmentManager va uning roli

Navigation Component-dan oldin ishlab chiqaruvchilar o'tishlarni FragmentManager (fragmentlarni almashtirish uchun tizim sinfi) orqali boshqarishgan. FragmentManager tranzaktsiyalar bilan ishlaydi: ekranda fragmentlarni o'zgartirish uchun replace, add, remove. Biroq, u qo'lda stack va holat boshqaruvini talab qiladi, bu ko'pincha xatolarga olib keladi. Google rasmiy ravishda qo'lda FragmentManager-ga xavfsizroq muqobil sifatida Navigation Component-ni tavsiya qiladi.

Ekran arxitekturasida yangi boshlovchilarning keng tarqalgan xatolari

Yangi boshlovchi ishlab chiqaruvchilar ko'pincha ekran arxitekturasini loyihalashda odatiy xatolarga yo'l qo'yadilar. Eng keng tarqalgani o'tishlar butun kod bo'ylab tarqalganida yagona navigatsiya boshqaruv markazining yo'qligidir. Google Play Console tahliliga (2025) ko'ra, tartibsiz navigatsiyaga ega ilovalar o'tishlar bilan bog'liq 37% ko'proq buzilish hisobotlariga ega. Yagona yo'naltiruvchi yoki navigatsiya grafigi bu muammoni hal qiladi.

"Orqaga" tugmasini e'tiborsiz qoldirish

Ko'plab yangi boshlovchilar Android-dagi tizim "Orqaga" tugmasini yoki iOS-dagi surish imo-ishorasini boshqarishni unutishadi. Boshqarilmagan qaytish ilovaning muzlashiga yoki kutilmagan tarzda yopilishiga olib keladi. Android-da navigatsiya grafigi sozlangan bo'lsa, Navigation Component "Orqaga" tugmasini avtomatik boshqaradi. Quyida OnBackPressedDispatcher bilan "Orqaga" tugmasini boshqarish namunasi keltirilgan.

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
        )
    }
}

Kod Bottom Sheet paneli kengaytirilganligini tekshiradi: agar kengaytirilgan bo'lsa — uni yig'adi, aks holda — hodisani tizim dispetcheriga uzatadi. Bu Android-da maxsus "orqaga" boshqaruvi uchun standart naqshdir.