Mobil inkişafda ekran arxitekturası və naviqasiya: bu nədir, növləri və necə işləyir

Ekran arxitekturası və naviqasiya nədir

Ekran arxitekturası və naviqasiya mövcud ekranları və onlar arasında hərəkət etmə yollarını müəyyən edən mobil tətbiqin çərçivəsidir. Hər bir ekran müəyyən bir tapşırığı həll edir: məhsul siyahısı, məhsul kartı, səbət və ya ödəniş forması. Apple Human Interface Guidelines (2025)-ə görə, düşünülmüş naviqasiya istifadəçinin idrak yükünü 40% azaldır. Yeni başlayan tərtibatçılar üç-beş ekranlı sadə bir sxemlə başlamalıdır.

Ekran arxitekturası nədən ibarətdir

İstənilən ekran arxitekturası üç əsas elementi əhatə edir: ekranlar, keçidlər və naviqasiya konteynerləri. Ekranlar məzmunu göstərir, keçidlər ekran dəyişmə animasiyalarını idarə edir və konteynerlər istifadəçinin hərəkət tarixçəsini saxlayır. Android-də bu rolu FragmentManager, iOS-da isə UINavigationController yerinə yetirir. Bu üç komponenti başa düşmək istifadəçi dostu interfeys dizayn etmək üçün ilk addımdır.

Mobil tətbiqlərdə naviqasiyanın əsas növləri

Mobil tətbiqlərdə naviqasiyanın dörd əsas növü var: stack, modal, tab və jest əsaslı. Stack modeli kart yığını kimi işləyir — hər yeni ekran üstə qoyulur və "Geri" düyməsi üst kartı çıxarır. Nielsen Norman Group (2024)-ə görə, stack naviqasiyası ən proqnozlaşdırıla bilən nümunədir və istifadəçilərin 94%-i təlimsiz başa düşür. Stack ilə başlamaq tövsiyə olunur, çünki istənilən platformanın istifadəçiləri üçün intuitiv olaraq aydındır.

Modal pəncərələrdən nə vaxt istifadə etməli

Modal pəncərələr əsas məzmuna qayıtmazdan əvvəl hərəkət tələb edən müvəqqəti ekranlardır. Onlar tək bir tapşırıq üçün istifadə olunur: hərəkəti təsdiqləmək, giriş forması və ya seçim seçimi. Stack-dən fərqli olaraq, modal pəncərə naviqasiya tarixçəsində saxlanılmır. Naviqasiya növü tətbiqin istifadə ssenarilərinə əsasən seçilir.

UINavigationController ilə iOS-da naviqasiya

iOS-da naviqasiya UINavigationController — ekran stackini idarə edən nəzarətçi ətrafında qurulur. UINavigationController avtomatik olaraq başlıq və "Geri" düyməsi olan naviqasiya paneli əlavə edir. Apple Developer Documentation (2025)-ə görə, App Store-dakı tətbiqlərin 85%-i əsas naviqasiya nümunəsi olaraq UINavigationController-dan istifadə edir. Yeni başlayan iOS tərtibatçıları yalnız UX/UI dizaynının əsasları ilə birlikdə push və pop-u mənimsəməlidir.

iOS-da ekran stacki necə işləyir

push keçidi zamanı yeni ekran naviqasiya stackinə yerləşdirilir və istifadəçi sağ tərəfdən sürüşmə animasiyası görür. pop keçidi zamanı cari ekran stackdən çıxarılır və istifadəçi əvvəlki ekrana qayıdır. UINavigationController stackdəki bütün ekranlara istinadları saxlayır və istifadəçiyə bir neçə addım geri qayıtmağa imkan verir. IT Sectr-də biz xətti istifadəçi ssenariləri qurmaq üçün bütün iOS layihələrində bu yanaşmadan istifadə edirik.

Android-də naviqasiya necə işləyir

Android-də ekran arxitekturası Navigation Component (Google-ın naviqasiya qurmaq üçün kitabxanası) vasitəsilə həyata keçirilir. Navigation Component bir naviqasiya qrafiki (nav graph) istifadə edir, burada hər ekran bir düyün və keçidlər onlar arasında kənarlardır. Android Developers Guide (2025)-ə görə, Navigation Component əl ilə FragmentManager ilə müqayisədə naviqasiya səhvlərini 60% azaldır. Yeni başlayan Android tərtibatçılarına dərhal Navigation Component-i mənimsəmək tövsiyə olunur.

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

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

// Düyməyə klikləməklə naviqasiya:
view.findViewById<Button>(R.id.open_detail).setOnClickListener {
    findNavController().navigate(R.id.toDetail)
}

FragmentManager və onun rolu

Navigation Component-dən əvvəl tərtibatçılar keçidləri FragmentManager (fragmentləri əvəz etmək üçün sistem sinfi) vasitəsilə idarə edirdilər. FragmentManager əməliyyatlarla işləyir: ekranda fragmentləri dəyişdirmək üçün replace, add, remove. Bununla belə, əl ilə stack və vəziyyət idarəetməsi tələb edir ki, bu da tez-tez səhvlərə səbəb olur. Google rəsmi olaraq əl ilə FragmentManager-a daha təhlükəsiz alternativ olaraq Navigation Component-i tövsiyə edir.

Ekran arxitekturasında yeni başlayanların ümumi səhvləri

Yeni başlayan tərtibatçılar ekran arxitekturasını dizayn edərkən tez-tez tipik səhvlər edirlər. Ən geniş yayılmışı keçidlərin kodun hər yerinə səpələndiyi tək naviqasiya idarəetmə mərkəzinin olmamasıdır. Google Play Console təhlilinə (2025) görə, xaotik naviqasiyalı tətbiqlərdə keçidlərlə bağlı 37% daha çox çökmə hesabatı olur. Tək bir marşrutlaşdırıcı və ya naviqasiya qrafiki bu problemi həll edir.

"Geri" düyməsini gözardı etmək

Bir çox yeni başlayanlar Android-də sistem "Geri" düyməsini və ya iOS-da sürüşdürmə jestini idarə etməyi unudur. İdarə olunmayan qayıdış tətbiqin donmasına və ya gözlənilmədən bağlanmasına səbəb olur. Android-də naviqasiya qrafiki konfiqurasiya edildikdə Navigation Component "Geri" düyməsini avtomatik idarə edir. Aşağıda OnBackPressedDispatcher ilə "Geri" düyməsini idarə etmək nümunəsi verilmişdir.

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 panelinin genişləndirilib-genişləndirilmədiyini yoxlayır: genişləndirilibsə — onu yığır, yoxsa — hadisəni sistem dispetçerinə ötürür. Bu, Android-də xüsusi "geri" idarəetməsi üçün standart bir nümunədir.