385 lines
18 KiB
Markdown
385 lines
18 KiB
Markdown
# Технический проект. Документ 3: Макеты экранов (mobile-first)
|
||
|
||
**Проект:** АС «Платформа ОПОРА РОССИИ»
|
||
**Принцип:** mobile-first, ширина 360–430 px (п. 4.1.6 ТЗ)
|
||
**Дата:** 26.09.2026
|
||
**Статус:** черновик к согласованию
|
||
|
||
---
|
||
|
||
## 1. Общие принципы интерфейса
|
||
|
||
- **Mobile-first:** проектирование от смартфона; ПК — адаптивное расширение.
|
||
- **Крупные элементы управления**, удобные для касания (мин. 44×44 px).
|
||
- **Ключевые показатели** — крупными цифрами с подписями: «Точка 0», «Сейчас», «Цель».
|
||
- **Цветовое кодирование зон:**
|
||
- 🟢 динамика (положительный прирост);
|
||
- 🔴 «красная зона» (нет прироста);
|
||
- ⚪ нейтральное состояние.
|
||
- **Пустые состояния** — с подсказками (например, про кнопку «Дать совет для других лидеров» в боте).
|
||
- **Единый визуальный стиль** с брендом «ОПОРА РОССИИ».
|
||
- **Язык:** русский.
|
||
|
||
---
|
||
|
||
## 2. Карта экранов
|
||
|
||
```
|
||
Вход (выбор мессенджера)
|
||
│
|
||
▼
|
||
Главная (меню)
|
||
├── Цели организации ──► Динамика ──► Топ регионов / Красная зона / Советы
|
||
├── Рейтинг регионов ──► Карточка региона
|
||
├── Задачи ──► Детали задачи
|
||
├── Артефакты
|
||
├── База знаний
|
||
├── Календарь событий
|
||
├── Запросы
|
||
├── История платформы
|
||
└── Профиль ──► Ассистент «Зам» / Выйти
|
||
|
||
Админка (отдельный доступ): Пользователи, Рассылки, Выгрузки, Аудит
|
||
```
|
||
|
||
---
|
||
|
||
## 3. Экран «Вход»
|
||
|
||
**Назначение:** вход через мессенджер по одноразовой ссылке (п. 4.2.1 ТЗ).
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ОПОРА РОССИИ │
|
||
│ │
|
||
│ Вход через рабочий бот │
|
||
│ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Войти через MAX │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Войти через Telegram │ │
|
||
│ └───────────────────────┘ │
|
||
│ │
|
||
│ Нет доступа? Начните │
|
||
│ регистрацию через бота │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Состояния:**
|
||
- ожидание подтверждения в боте → «Подтвердите вход в боте…»;
|
||
- успех → автооткрытие личного кабинета;
|
||
- сбой автооткрытия → кнопка «Открыть сайт»;
|
||
- ссылка использована → «Ссылка уже была использована. Запросите новую у координатора».
|
||
|
||
---
|
||
|
||
## 4. Экран «Главная»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ОПОРА РОССИИ [≡] │
|
||
│ Иванов И.И. · ДНР │
|
||
├─────────────────────────────┤
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Цели организации │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Рейтинг регионов │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Задачи │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Артефакты │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ База знаний │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Календарь событий │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Запросы │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ История платформы │ │
|
||
│ └───────────────────────┘ │
|
||
│ ┌───────────────────────┐ │
|
||
│ │ Профиль │ │
|
||
│ └───────────────────────┘ │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 5. Экран «Цели организации»
|
||
|
||
**Назначение:** «что набираем, где есть движение и кому нужна помощь» (п. 4.2.4 ТЗ).
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Цели организации │
|
||
├─────────────────────────────┤
|
||
│ Общая цель │
|
||
│ +1096 к базе членов │
|
||
│ Округа — вкладчики в общий │
|
||
│ результат │
|
||
├─────────────────────────────┤
|
||
│ Вклад в общую цель │
|
||
│ +338 [Открыть] │
|
||
│ Численность: 12 400 │
|
||
│ Зарегистрировано: 3 200 │
|
||
├─────────────────────────────┤
|
||
│ Динамика по цели │
|
||
│ Точка 0 Сейчас Цель │
|
||
│ 1000 1338 2096 │
|
||
├─────────────────────────────┤
|
||
│ Проекты Организации │
|
||
│ Регионов с динамикой: 89 │
|
||
│ Прирост от точки 0: +2594 │
|
||
├─────────────────────────────┤
|
||
│ Топ включившихся регионов │
|
||
│ 1. Москва +224 🟢 │
|
||
│ 2. Башкортостан +217 🟢 │
|
||
│ 3. Санкт-Петербург +159 🟢 │
|
||
│ 4. ДНР +136 🟢 │
|
||
│ 5. Татарстан +132 🟢 │
|
||
├─────────────────────────────┤
|
||
│ Красная зона проектов │
|
||
│ Регионы без прироста │
|
||
│ [Полный список] │
|
||
├─────────────────────────────┤
|
||
│ Советы от регионов │
|
||
│ (пусто) Советов пока нет. │
|
||
│ Когда отделение даст │
|
||
│ динамику, в боте появится │
|
||
│ кнопка «Дать совет…» │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Состояния:**
|
||
- загрузка → скелетон;
|
||
- нет проблемных регионов → «все регионы дали прирост»;
|
||
- нет советов → пустое состояние с подсказкой.
|
||
|
||
---
|
||
|
||
## 6. Экран «Динамика»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Динамика │
|
||
├─────────────────────────────┤
|
||
│ Точка 0: 2026-05-08 │
|
||
│ Текущий срез: 2026-08-07 │
|
||
│ Режим: Автообновление ✅ │
|
||
├─────────────────────────────┤
|
||
│ Накопительная динамика │
|
||
│ регистраций по регионам │
|
||
│ │
|
||
│ ▁▂▃▅▆▇█ │
|
||
│ старт: 11.06.2026 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 7. Экран «Рейтинг регионов»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Рейтинг регионов │
|
||
│ [Все округа ▼] [🔍] │
|
||
├─────────────────────────────┤
|
||
│ № Регион Прирост │
|
||
│ 1 Москва +224 🟢 │
|
||
│ 2 Башкортостан +217 🟢 │
|
||
│ 3 СПб +159 🟢 │
|
||
│ … │
|
||
│ N Регион X 0 🔴 │
|
||
├─────────────────────────────┤
|
||
│ Сортировка: по приросту ▼ │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Фильтры:** округ, «красная зона», сортировка (прирост / численность).
|
||
|
||
---
|
||
|
||
## 8. Экран «Карточка региона»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Донецкая Народная Респ. │
|
||
│ Округ: ЮФО · Статус: актив.│
|
||
├─────────────────────────────┤
|
||
│ Численность: 1 200 [✎] │
|
||
│ Члены: 340 · Резиденты: 45 │
|
||
├─────────────────────────────┤
|
||
│ Ссылки на сообщества/чаты │
|
||
│ • Чат ДНР [→] │
|
||
│ • Сообщество VK [→] │
|
||
│ [+ Добавить ссылку] │
|
||
├─────────────────────────────┤
|
||
│ Члены │
|
||
│ [Список] [+ Добавить] │
|
||
├─────────────────────────────┤
|
||
│ Резиденты │
|
||
│ [Список] [+ Добавить] │
|
||
├─────────────────────────────┤
|
||
│ История изменений │
|
||
│ [Показать] │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Права:** руководитель редактирует только своё отделение; админ — все (п. 4.2.6.1, Вариант 1).
|
||
|
||
---
|
||
|
||
## 9. Экран «Задачи»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Задачи [+ Создать]│
|
||
│ [Мои] [Регион] [Просроч.] │
|
||
├─────────────────────────────┤
|
||
│ ● Подготовить отчёт │
|
||
│ до 01.10 · высокий │
|
||
│ статус: в работе │
|
||
│ ● Собрать данные │
|
||
│ до 05.10 · средний │
|
||
│ статус: новая │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Детали задачи:** название, описание, срок, приоритет, ответственный, статус (`новая → в работе → на проверке → выполнена`), комментарии, артефакты.
|
||
|
||
---
|
||
|
||
## 10. Экран «Артефакты»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Артефакты [↑ Загрузить]│
|
||
│ [Все] [Регион] [Цель] [Задача]│
|
||
├─────────────────────────────┤
|
||
│ 📄 Отчёт_ДНР.pdf │
|
||
│ 1.2 МБ · 26.09.2026 │
|
||
│ 🖼 Фото_мероприятие.jpg │
|
||
│ 3.4 МБ · 25.09.2026 │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Ограничения:** до 50 МБ; изображения, PDF, DOCX, XLSX.
|
||
|
||
---
|
||
|
||
## 11. Экран «База знаний»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← База знаний [🔍] │
|
||
│ [Все] [Инструкции] [Мат-лы]│
|
||
├─────────────────────────────┤
|
||
│ 📘 Как работать с целями │
|
||
│ 📘 Регламент рассылок │
|
||
│ 📘 Методика советов │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 12. Экран «Календарь событий»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Календарь [< Сентябрь >]│
|
||
├─────────────────────────────┤
|
||
│ Пн Вт Ср Чт Пт Сб Вс │
|
||
│ … … … … … … … │
|
||
├─────────────────────────────┤
|
||
│ 26.09 · Вебинар «Цели» │
|
||
│ 30.09 · Дедлайн отчётов │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Напоминания** приходят через бота.
|
||
|
||
---
|
||
|
||
## 13. Экран «Запросы»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Запросы [+ Создать]│
|
||
│ [Мои] [Все] │
|
||
├─────────────────────────────┤
|
||
│ ● Заявка на вступление │
|
||
│ статус: новая │
|
||
│ ● Запрос на поддержку │
|
||
│ статус: в работе │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
**Типы:** вступление, доступ, участие в мероприятии, поддержка.
|
||
|
||
---
|
||
|
||
## 14. Экран «Профиль»
|
||
|
||
```
|
||
┌─────────────────────────────┐
|
||
│ ← Профиль │
|
||
├─────────────────────────────┤
|
||
│ Иванов И.И. │
|
||
│ Регион: ДНР │
|
||
│ Роль: руководитель │
|
||
├─────────────────────────────┤
|
||
│ Ассистент «Зам» │
|
||
│ Статус: подключён ✅ │
|
||
│ [Настроить] [Журнал] │
|
||
├─────────────────────────────┤
|
||
│ [Выйти] │
|
||
└─────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 15. Админка (отдельный доступ)
|
||
|
||
| Раздел | Содержание |
|
||
|---|---|
|
||
| Пользователи | список, роли, статусы, регионы |
|
||
| Рассылки | шаблоны, запуск, прогресс доставки |
|
||
| Выгрузки | загрузка срезов, статус обработки |
|
||
| Аудит | журнал действий пользователей и ассистента |
|
||
|
||
---
|
||
|
||
## 16. Состояния и обратная связь
|
||
|
||
| Состояние | Отображение |
|
||
|---|---|
|
||
| Загрузка | скелетоны, спиннер |
|
||
| Пусто | подсказка с действием |
|
||
| Ошибка | сообщение + «Повторить» |
|
||
| Нет прав | «Недостаточно прав» + возврат |
|
||
| Оффлайн | баннер «Нет соединения» |
|
||
|
||
---
|
||
|
||
## 17. Принятые решения
|
||
|
||
1. **Брендбук** — отсутствует; разработана дизайн-система на основе фирменных цветов opora.ru (см. `docs/design/design-system.md`).
|
||
2. **Графики** — **Recharts**.
|
||
3. **Тёмная тема** — **нужна** (CSS-переменные + переключатель).
|
||
4. **PWA** — **нужна** (установка на домашний экран).
|
||
|
||
---
|
||
|
||
## 18. Следующие шаги
|
||
|
||
1. Согласовать макеты.
|
||
2. Перейти к реализации: каркас проекта (FastAPI + React), Docker Compose, CI/CD.
|