Проектування навігаційної структури мобільного додатка
Навігація — це не тільки «куди натиснути». Це контракт між додатком і користувачем: система обіцяє, що натиснув «назад», він повернеться туди, звідки прийшов; що таби не скидують стан; що deep link відкриває потрібний екран, а не головну сторінку. Порушення цього контракту — одна з головних причин низьких оцінок в App Store та Google Play.
Де навігація ломається
На iOS найпоширеніша помилка — змішування push та modal без логіки. Користувач відкриває карточку товару через модальний шит, натискає «Додати в корзину», потрапляє в корзину через push — і втрачає контекст. Кнопка «Назад» повертає в корзину, а не в каталог. Це не баг роутинга, це помилка на етапі проектування.
На Android — проблеми з Back Stack. Додаток, який не управляє TaskStackBuilder явно, дає непередбачуване поведінку при вході через push-сповіщення або deep link. Користувач натискає системну кнопку Back і йде не туди — або взагалі закриває додаток.
У React Native та Flutter ці проблеми часто виникають при неправильній конфігурації навігаційних бібліотек: react-navigation v6 з nativeStackNavigator вимагає явного завдання initialRouteName та screenOptions на кожному рівні стека, інакше анімації та жести ведуть себе непослідовно на різних платформах.
Як проектуємо структуру
Спочатку визначаємо навігаційний паттерн під конкретний тип додатка:
- Tab-based — для додатків з 3–5 рівнозначними розділами (соцмережі, маркетплейси). iOS HIG рекомендує Tab Bar, Android Material Design — Bottom Navigation Bar.
- Drawer + Stack — для додатків з великим числом розділів різної частоти використання. Drawer скриває рідко використовувані розділи без захламлення основного UI.
- Single Stack — для лінійних флоу: onboarding, checkout, конфігуратор. Нема бічної навігації, тільки прогрес вперед/назад.
- Hybrid — комбінація, де кожен таб має свій стек. Найпоширеніший паттерн для production-додатків середнього масштабу.
Після вибору паттерну — прорабляємо кожен навігаційний шар:
Глобальна навігація — Tab Bar / Bottom Nav / Drawer. Правила розташування іконок, лейблів, badge-счётчиків. Поведінка при повторному тапі по активному табу (повернення до кореня стека або scroll to top — iOS-конвенція, яку часто ігнорують).
Локальна навігація — стек всередину кожного розділу. Які переходи — push (навігаційна ієрархія), які — modal (незалежні завдання: створення, налаштування, фільтри). Різниця важлива: modal завжди має явну кнопку закриття, push — кнопку назад.
Контекстні переходи — action sheets, bottom sheets, popovers. На iOS — UISheetPresentationController з .medium та .large detents; на Android — BottomSheetDialogFragment або Jetpack Compose ModalBottomSheet.
Deep linking — схема URL для всіх ключових екранів. Це потрібно проробити на етапі проектування, а не додавати потім. yourapp://product/123 повинен відкривати карточку товару з правильним Back Stack, а не білий екран.
Результат — навігаційна схема в Figma з анотаціями: тип кожного переходу, поведінка жестів (swipe back на iOS, передбачувана Back на Android), стани при deep link входе.
Зв'язок з роутингом
Хороша навігаційна схема напряму ложиться в код. Для React Native це конфігурація react-navigation: іменовані навігатори, типізований RootStackParamList, правила linking для deep links. Для Flutter — конфігурація go_router з ShellRoute для Tab-based навігації та redirect для auth guard. Розробник, який отримує таку схему, не приймає навігаційні рішення сам — реалізує те, що вже протестовано.
Строки
Проектування навігаційної структури для додатка середної складності — 1 робочий день. Включає: вибір паттерну з обґрунтуванням, схему всіх навігаційних переходів, анотації для розробника, описання поведінки deep links.