Створення карти екранів (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 дизайнер починає малювати «з головного екрана» і додає екрани по ходу. Підсумок — до моменту прототипування виясняється, що onboarding не підключений до головного флоу, налаштування профіля живуть у двох різних місцях, а екран помилки оплати не спроектований взагалі.
Screen Map цей хаос запобігає. Один день роботи зараз — це 3–5 днів збережених правок на етапі дизайну.
Строки
Карта екранів для додатка з 20–40 екранів робиться за 1 робочий день. Результат — файл FigJam/Miro, експорт у PDF, опціонально — структурована таблиця з описом кожного екрана.