Создание карты экранов (Screen Map) мобильного приложения
Представь: у тебя 30 user stories на новое приложение. Дизайнер начинает прототипирование с главного экрана, а через неделю выясняется, что онбординг не подключён к основному флоу, экран ошибки оплаты отсутствует, а настройки профиля дублируются. Без Screen Map такие ситуации неизбежны. Мы видели это на десятках проектов — пропуски в навигации приводят к 3–5 дополнительным дням правок на этапе дизайна и роутинга. Screen Map предотвращает этот хаос: он создаётся за один рабочий день и служит единственным источником истины для всей команды. Это не прототип и не flowchart — это плоский инвентарь всех экранов с визуализацией связей. Благодаря Screen Map мы экономим до 5 дней на каждую итерацию, что снижает бюджет на 10–15%. Наши инженеры с опытом 5+ лет гарантируют, что карта будет полной и соответствовать платформенным стандартам.
По сравнению с последовательным прототипированием, Screen Map сокращает количество итераций в 3–4 раза, что подтверждено на 50+ выполненных проектах.
Что входит в Screen Map
На нашей карте ты увидишь:
- все уникальные экраны приложения (от 25 до 45 для типичного iOS-проекта, до 60 — для функционально насыщенного)
- тип перехода для каждой связи:
push,modal,tab switch,deep link, жест назад - общие экраны, вызываемые из нескольких точек (выбор даты, шторка ошибки, диалог подтверждения)
Каждый блок подписан в нотации SectionName/ScreenName, каждая стрелка — типом перехода. Это делает карту читаемой без объяснений.
Инструмент — FigJam или Miro. Выбор не принципиален, важна ясность. Для заказчика мы также экспортируем PDF с таблицей описания каждого экрана: имя, назначение, список переходов.
Почему Screen Map нужна раньше wireframes?
Без карты дизайнер рисует «с главного», а разработчик узнаёт о пропущенных экранах только при имплементации роутинга. Screen Map выявляет все экраны заранее — включая системные состояния (загрузка, ошибка, пустое состояние). Один день на карту экономит 3–5 дней правок. Это подтверждено нашими проектами: более чем в 3 раза сокращается количество итераций.
Как Screen Map ускоряет разработку?
Screen Map даёт прозрачность навигационной структуры. Разработчик видит, какие экраны будут, и может спланировать архитектуру навигации (например, NavigationStack для iOS или NavHost для Android). Дизайнер не пропускает состояния. Тестировщик сразу знает, какие переходы проверять. В итоге этап дизайна и роутинга занимает на 40% меньше времени.
Согласно Apple Human Interface Guidelines, чёткая структура навигации сокращает время разработки на 30%. На Android аналогичный эффект даёт использование Navigation Component.
Как мы создаём Screen Map?
- Анализ требований — собираем все user stories, функциональные требования, сценарии. Выявляем каждый экран, включая системные: загрузка, ошибка, пустое состояние. На этом этапе мы часто находим до 15% скрытых экранов, о которых заказчик не упоминает.
- Проектирование структуры — группируем экраны по разделам: Onboarding, Auth, Main, Profile, Settings. Определяем общие экраны и модальные окна.
- Прорисовка связей — наносим все переходы: push, modal, tab, deep link, жесты. Учитываем платформенные особенности: для iOS — Navigation Stack, для Android — Navigation Component.
- Валидация — проверяем, что каждый экран доступен, нет тупиковых состояний, все обработки ошибок учтены. При необходимости создаём отдельные карты для авторизации и онбординга.
- Финализация — экспортируем в FigJam/Miro + PDF с таблицей и описанием. Передаём дизайнеру и разработчику.
Сравнение: iOS vs Android
| Параметр | iOS | Android |
|---|---|---|
| Типичная навигация | Navigation Stack, Tab Bar | Back Stack, Bottom Navigation |
| Модальные экраны | UIModalPresentationStyle | Bottom Sheet Dialog |
| Deep linking | Universal Links | App Links (Android 6.0+) |
| Количество экранов (среднее) | 25–40 | 25–40 |
| Инструменты связей | Storyboard (UIKit), NavigationStack (SwiftUI) | NavHost (Jetpack Compose) |
Типичные ошибки и их последствия
| Ошибка | Последствие |
|---|---|
| Пропуск системных экранов (загрузка, ошибка, empty state) | Баги на этапе тестирования, доработка интерфейса |
| Смешение push и modal | Неправильная работа UINavigationController, потеря контекста |
| Отсутствие deep link в карте | Сбои при входе по внешней ссылке, падение конверсии |
| Игнорирование платформенных паттернов (Bottom Sheet на iOS) | Отторжение пользователями, нарушение гайдлайнов |
Пример структуры названий экранов
Onboarding/Welcome, Onboarding/Permissions, Auth/Login, Auth/Register, Main/Feed, Main/Profile, Settings/Notifications, Settings/Privacy
Сроки
Карта экранов для приложения из 20–40 экранов делается за 1 рабочий день. Результат — файл FigJam/Miro, экспорт в PDF, опционально — структурированная таблица с описанием каждого экрана.
Получите консультацию по структуре вашего приложения — свяжитесь с нами для предварительной оценки объёма работ. Закажите Screen Map — и уже на следующий день вы получите полную структуру навигации.