Архитектура на екрани и навигация в мобилното разработване: какво е това, видове и как работи

Какво е архитектура на екрани и навигация

Архитектурата на екрани и навигацията е рамката на мобилно приложение, която определя наличните екрани и начините за придвижване между тях. Всеки екран решава конкретна задача: списък с продукти, карта на продукт, количка или формуляр за плащане. Според 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% повече доклади за сривове, свързани с преходи. Единичен рутер или навигационен граф решава този проблем.

Игнориране на бутона "Назад"

Много начинаещи забравят да обработват системния бутон "Назад" на 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.