Архітектура екранів і навігація в мобільній розробці: що це таке, які типи та як працює

Що таке архітектура екранів і навігація

Архітектура екранів і навігація — це каркас мобільного додатка, який визначає доступні екрани та способи переміщення між ними. Кожен екран вирішує конкретне завдання: список товарів, картка товару, кошик або форма оформлення замовлення. За даними 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 — системний клас для заміни фрагментів. FragmentManager працює з транзакціями: replace, add, remove для зміни фрагментів на екрані. Однак він вимагає ручного керування стеком і станами, що часто призводить до помилок. Google офіційно рекомендує Navigation Component як більш безпечну альтернативу ручному FragmentManager.

Поширені помилки новачків в екранній архітектурі

Початківці часто допускають типові помилки при проєктуванні архітектури екранів. Найпоширеніша — відсутність єдиного центру керування навігацією, коли переходи розкидані по всьому коду. За даними аналізу Google Play Console (2025), додатки з хаотичною навігацією мають на 37% більше 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.