Проектирование навигационной структуры мобильного приложения
Навигация — это не только «куда нажать». Это контракт между приложением и пользователем: система обещает, что нажав «назад», он вернётся туда, откуда пришёл; что табы не сбрасывают состояние; что deep link открывает нужный экран, а не главную страницу. Нарушение этого контракта — одна из главных причин низких оценок в App Store и Google Play.
Где навигация ломается
На iOS самая частая ошибка — смешивание push и modal без логики. Пользователь открывает продуктовую карточку через модальный шит, нажимает «Добавить в корзину», попадает в корзину через push — и теряет контекст. Кнопка «Назад» возвращает в корзину, а не в каталог. Это не баг роутинга, это ошибка на этапе проектирования.
На Android — проблемы с Back Stack. Приложение, которое не управляет TaskStackBuilder явно, даёт непредсказуемое поведение при входе через push-уведомление или deep link. Пользователь нажимает системную кнопку Back и уходит не туда — или вообще закрывает приложение.
В React Native и Flutter эти проблемы часто возникают при неправильной конфигурации навигационных библиотек: react-navigation v6 c 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.