Создание карты экранов (Screen Map) мобильного приложения
Карта экранов — это не ещё один документ ради документа. Это первый артефакт, который превращает список требований в визуальную структуру: сколько экранов в приложении, как они связаны между собой, откуда можно попасть в каждый. Без неё дизайнер рисует wireframes вслепую, а разработчик узнаёт о пропущенных экранах уже во время имплементации роутинга.
Что входит в Screen Map
Screen Map — это не flowchart с логикой ветвлений и не прототип. Это плоский инвентарь экранов с отображением навигационных связей. На типовой карте видно:
- все уникальные экраны приложения с именами и назначением
- тип перехода — push, modal, tab switch, deep link
- общие экраны (например, модальный выбор даты, шторка ошибки), которые вызываются из нескольких точек
Для iOS-приложения средней сложности обычно 25–45 уникальных экранов. Для Android схожего масштаба — плюс-минус столько же, но с другими паттернами: Back Stack вместо Navigation Stack, Bottom Sheet вместо action sheet.
Рисуем в FigJam или Miro — инструмент без принципиальной разницы, главное что карта читается без объяснений. Каждый блок — экран с именем в нотации SectionName/ScreenName, каждая стрелка — тип перехода.
Зачем это нужно раньше wireframes
Без Screen Map дизайнер начинает рисовать «с главного экрана» и добавляет экраны по ходу. Итог — к моменту прototипирования выясняется, что onboarding не подключён к главному флоу, настройки профиля живут в двух разных местах, а экран ошибки оплаты не запроектирован вообще.
Screen Map этот хаос предотвращает. Один день работы сейчас — это 3–5 дней сэкономленных правок на этапе дизайна.
Сроки
Карта экранов для приложения из 20–40 экранов делается за 1 рабочий день. Результат — файл FigJam/Miro, экспорт в PDF, опционально — структурированная таблица с описанием каждого экрана.