# Том 3. UX/UI / Дизайн-система / Сценарии пользователя

## 3.1. Принципы UX

1. **Один экран — одна главная задача.**
2. **Сначала картина, потом детали.**
3. **Каждая цифра имеет происхождение и уверенность.**
4. **AI-аватар — проводник, а не болтовня.**
5. **Поддержка сенсора, мыши, клавиатуры, голоса, стилуса.**
6. **Цвет не единственный носитель статуса.**
7. **Доступность:** размер шрифта ≥ 16 px, контраст ≥ 4.5:1, поддержка screen reader.

## 3.2. Визуальный стиль

- **Цвета:** тёмный фон (#0B0F19), акценты флага РК (голубой #00AFC6, жёлтый #FECB00), зелёный для ESG (#00C853), красный аварии (#FF3B30), оранжевый предупреждения (#FF9500).
- **Орнамент:** тонкие казахские геометрические мотивы в рамках панелей, загрузчиках, кнопках; не перегружает.
- **Типографика:** Inter / Roboto + Kazakh/ Cyrillic; заголовки 28–40 px, тело 16–18 px.
- **Иконки:** линейные, единый стиль; промышленные — ISO-стандартные символы.
- **Эффекты:** мягкое свечение, glassmorphism панелей, минимум блёков.

## 3.3. Экраны планшета

### 3.3.1. Splash / Intro (0:00–0:30)
- Чёрный экран → контур Казахстана из линий.
- Появляются горы, степи, Каспий, города, энергосети, нефтепроводы.
- Звук: лёгкая амбиентная музыка, шум ветра.
- AI-Дәулет появляется в круге света: приветствие.

### 3.3.2. Главный экран (0:30–1:00)
- 3D-карта Казахстана с тематическими слоями.
- Кнопки режимов:
  - **Исследовать Казахстан** (свободный режим)
  - **Стратегическая демонстрация** (ведомый 12–20 мин)
  - **Профессиональный кабинет** (инженер/инвестор)
- Быстрые голосовые команды: «Покажи нефтяную отрасль», «Открой Атыраускую область», «Запусти сценарий 2035».

### 3.3.3. Режим «Стратегическая демонстрация»

Экраны по сценарию (подробно в Томе 11):
1. **Макро:** страна, отрасли, цифры.
2. **Регион:** зум в Мангистаускую/Атыраускую область.
3. **Пилотный объект:** Узенское месторождение.
4. **Скважина и качалка:** AI-Серік показывает телеметрию.
5. **ДНС/ЦПСН:** подготовка, накопители.
6. **НПС:** насосы, давление, вибрация.
7. **Магистраль:** трубопровод, маршрут, пропускная способность.
8. **НПЗ:** переработка, продукты, ESG.
9. **Финансовый контур:** AI-Айым распределяет стоимость, цифровой тенге.
10. **Инвестиционный кабинет:** профиль актива, NPV/IRR, data room.
11. **Будущее 2035:** сценарии модернизации.
12. **Финал:** сводный национальный контур.

### 3.3.4. Режим «Исследовать Казахстан»
- Свободная навигация по карте.
- Слои: нефть, газ, уголь, уран, медь, золото, электроэнергетика, ВИЭ, трубопроводы, ЖД, порты, ESG, инвестпроекты.
- Карточка актива: паспорт, метрики, AI-совет, 3D-осмотр.
- Фильтры: регион, отрасль, статус, риск, инвестиционная привлекательность.

### 3.3.5. Профессиональный кабинет

**Инженер:**
- P&ID, 3D-модель, тренды, аварии, журнал событий.
- Сравнение параметров, прогноз отказа.
- Кнопка «Запросить AI-Серіка» → два варианта решения.

**Инвестор:**
- Investor Journey: сектор → регион → актив → сценарий → data room → отчёт.
- Финансовая модель, карта рисков, ESG-score.
- Виртуальный 3D-осмотр.

**Министр:**
- Dashboard: KPI, проблемные зоны, сценарии, сравнение регионов.
- Голос: «Покажи риски энергосистемы», «Сравни два проекта».

### 3.3.6. Панель AI-диалога
- Аватар слева/справа (настраивается).
- Баблы: вопрос, ответ, использованные данные, confidence, источники.
- Кнопки: «Покажи на 3D», «Два варианта», «Подробнее», «Сформируй отчёт».
- История диалога, экспорт в PDF.

## 3.4. Голосовое управление

- **Wake words:** «Дәулет», «Серік», «Айым», «Нұрлан», «Зарина», «Айгерім», «Жалғас», «Батыр».
- **Распознавание:** Whisper-large-v3 (multi-lingual), до 3 с языка.
- **Языки:** казахский, русский, английский; автоопределение.
- **Обратная связь:** текст распознанной команды на экране, подтверждение критических действий.
- **Контекст:** голосовая команда сохраняет контекст текущей сцены.

## 3.5. Customer Journey Map (министр)

| Этап | Действие | Эмоция | Что видит | AI |
|------|----------|--------|-----------|----|
| 1 Открытие | Включает планшет | Впечатление | Контур РК, Дәулет | Приветствие, предложение начать |
| 2 Выбор режима | Нажимает «Демо» | Интерес | 3 карты | Дәулет объясняет |
| 3 Страна | Смотрит на карту | Понимание масштаба | Отрасли, потоки | Общий обзор |
| 4 Регион | Зум в Мангистау | Увлечённость | Месторождения, трубы | Зарина/Нұрлан |
| 5 Объект | Зум в скважину | Удивление | Качалка, датчики | Серік |
| 6 Анализ | AI даёт две опции | Доверие | Графики, цифры | Серік + Айым |
| 7 Финансы | Распределение стоимости | Уверенность | Санкей-диаграмма | Айым |
| 8 Инвестиции | Профиль актива | Вовлечённость | NPV, data room | Жалғас |
| 9 Будущее | 2035 сценарий | Видение | Новые мощности | Нұрлан |
| 10 Финал | Сводный экран | Гордость | Контур РК, итоги | Дәулет |

## 3.6. Дизайн-система

- **Component library:** React + Tailwind + Radix UI / shadcn.
- **Токены:** цвета, типографика, отступы, радиусы, тени, анимации.
- **Storybook** для документирования компонентов.
- **Тёмная тема** по умолчанию; переключение светлой для отчётов.
- **Charts:** Apache ECharts / D3 / Plotly — интерактивные, тёмная тема.
- **Maps:** Mapbox GL JS / CesiumJS / 2GIS; fallback OpenStreetMap.

## 3.7. Требования к адаптивности

| Устройство | Разрешение | Особенности |
|------------|------------|-------------|
| Планшет | 2388×1668 / 2880×1920 | Основной тач, портрет/ландшафт |
| Сенсорный экран 4K | 3840×2160 | Масштабируемые UI-элементы ≥ 64×64 px |
| Веб | 1920×1080+ | Мышь, клавиатура |
| Мобиль (опционально) | 1170×2532 | Упрощённый UI, карта + паспорта |

## 3.8. Accessibility

- WCAG 2.1 AA.
- Поддержка TalkBack/VoiceOver.
- Фокус-индикаторы.
- Возможность отключить анимации.
- Контрастные цвета для статусов.