Как называется схема перехода между экранами?

Question

claude-haiku-4.5 · Accepted Answer

## User Flow: схема перехода между экранами в приложении

Вопрос о схеме перехода между экранами может быть о нескольких терминах, в зависимости от контекста. Но наиболее часто это называется **User Flow** или **Navigation Flow**.

## Основные названия

### **1. User Flow (Пользовательский поток)**

Это наиболее общее название для схемы, которая показывает, как пользователь переходит между экранами приложения.

**Что включает:**
- Стартовый экран (entry point)
- Промежуточные экраны
- Точки ветвления (условия, где пользователь может пойти по разным путям)
- Конечный экран (exit point)
- Действия, которые вызывают переход

**Пример:**
```
Экран входа
  ├─ [Email valid] → Экран профиля
  └─ [Email invalid] → Error message → остаётся на входе

Экран профиля
  ├─ [Нажать "История"] → Экран заказов
  └─ [Нажать "Выход"] → Экран входа
```

**Инструменты для создания:**
- Figma (в основном для wireframes)
- Miro, Mural (для диаграмм)
- Draw.io, Lucidchart (для flowcharts)
- OmniGraffle (для сложных схем)

### **2. Navigation Flow (Поток навигации)**

Полусинонимично User Flow, но с акцентом на структуру навигации (меню, кнопки, переходы).

**Отличие от User Flow:**
```
User Flow: как пользователь ДЕЙСТВУЕТ (нажимает кнопку, заполняет форму)
Navigation Flow: как экраны СВЯЗАНЫ между собой (иерархия, доступ)
```

### **3. Wireflow (Wireframe + Flow)**

Комбинация wireframe (макет экрана) и flow (переходы между экранами).

**Как выглядит:**
Это показывает не только структуру перехода, но и то, как выглядит каждый экран при переходе.

```
┌─────────────┐
│ Экран 1     │
│ [Кнопка] ──┐
└─────────────┘
              │ нажата
              ↓
      ┌─────────────┐
      │ Экран 2     │
      │ [Назад] ────┘
      └─────────────┘
```

### **4. Information Architecture (IA) диаграмма**

Схема, которая показывает иерархию информации и структуру приложения.

Отличие от User Flow:
```
User Flow: как пользователь ПЕРЕДВИГАЕТСЯ (action-driven)
IA: какие СУЩЕСТВУЮТ страницы (content-driven)
```

**Пример:**
```
                   Home
                    │
         ┌──────────┼──────────┐
         │          │          │
      Product      Cart      Profile
         │          │          │
    [Detail]   [Checkout]   [Orders]
         │          │          │
   [Reviews]    [Success]   [Settings]
```

### **5. State Diagram**

Диаграмма состояний. Показывает, в каких состояниях может находиться приложение и как переходить между ними.

Часто используется для:
- Процессов оформления заказа (States: "Выбор товара" → "Оплата" → "Доставка" → "Завершение")
- Жизненного цикла пользователя (States: "Гость" → "Зарегистрирован" → "Премиум")
- Modal диалогов (States: "Закрыто" → "Открыто" → "Загрузка" → "Закрыто")

```
┌────────────────┐
│ Guest State    │
└────┬───────────┘
     │ login
     ↓
┌────────────────┐
│ Authorized     │
│ State          │
└────┬───────────┘
     │ upgrade_plan
     ↓
┌────────────────┐
│ Premium State  │
└────────────────┘
```

## Различия между этими схемами

| Название | Фокус | Показывает | Для кого |
|---|---|---|---|
| **User Flow** | Действия пользователя | Как пользователь действует, к-вая приводит к смене экрана | PM, Designer, QA |
| **Navigation Flow** | Связь между экранами | Иерархия и доступность экранов | Developer, QA |
| **Wireflow** | Макет + переходы | Экраны и как они связаны | Designer, Developer |
| **IA Diagram** | Иерархия информации | Структура всех страниц | Designer, Product |
| **State Diagram** | Состояния системы | Переходы между состояниями | Developer, Designer |

## Что НЕ называется схемой перехода

### **❌ Wireframe**
Это макет одного экрана, не показывает переходы между экранами.

### **❌ Mockup**
Это высокодетальный макет с цветами и текстом, не показывает переходы.

### **❌ Prototype**
Это интерактивный макет, где можно нажимать и переходить, но это не "схема" — это рабочая модель.

## Как Business Analyst использует схемы перехода

### **1. При описании требований**
```
Вместо текста:
"Пользователь заходит на главную, видит товары, нажимает на товар,
видит детали, добавляет в корзину, идёт в корзину, оформляет заказ..."

Делаю diagram User Flow в Figma:
└─ Все визуально и ясно
└─ Дизайнер и разработчик видят полный путь
└─ QA составляет тест-кейсы на основе flow
```

### **2. При планировании спринта**
```
Есть User Flow? Значит понимаю, сколько экранов нужно сделать.
Нет User Flow? Требование размытое → спринт развалится.
```

### **3. При тестировании**
```
QA использует User Flow для составления тест-кейсов:
- Тест 1: Happy path (всё идёт правильно)
- Тест 2: Error path (ошибка на шаге 2, что дальше?)
- Тест 3: Alternative path (пользователь нажал back, что произойдёт?)
```

## Практический совет для BA

**Используй это правило:**
- **User Flow** для описания требований (как пользователь действует)
- **Navigation Flow** для архитектуры приложения (как экраны организованы)
- **Wireflow** если нужно показать оба вместе
- **State Diagram** для сложных процессов (checkout, payment)

**Вывод:** в контексте собеседования, когда спрашивают "схема перехода между экранами", скорее всего имеют в виду **User Flow** или **Navigation Flow**. Оба верные ответы, но User Flow это более практический и часто используемый термин в работе BA.

Название	Фокус	Показывает	Для кого
User Flow	Действия пользователя	Как пользователь действует, к-вая приводит к смене экрана	PM, Designer, QA
Navigation Flow	Связь между экранами	Иерархия и доступность экранов	Developer, QA
Wireflow	Макет + переходы	Экраны и как они связаны	Designer, Developer
IA Diagram	Иерархия информации	Структура всех страниц	Designer, Product
State Diagram	Состояния системы	Переходы между состояниями	Developer, Designer

Как называется схема перехода между экранами?

Комментарии (1)

User Flow: схема перехода между экранами в приложении

Основные названия

1. User Flow (Пользовательский поток)

2. Navigation Flow (Поток навигации)

3. Wireflow (Wireframe + Flow)

4. Information Architecture (IA) диаграмма

5. State Diagram

Различия между этими схемами

Что НЕ называется схемой перехода

❌ Wireframe

❌ Mockup

❌ Prototype

Как Business Analyst использует схемы перехода

1. При описании требований

2. При планировании спринта

3. При тестировании

Практический совет для BA