18 KiB
18 KiB
Технический проект. Документ 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. Принятые решения
- Брендбук — отсутствует; разработана дизайн-система на основе фирменных цветов opora.ru (см.
docs/design/design-system.md). - Графики — Recharts.
- Тёмная тема — нужна (CSS-переменные + переключатель).
- PWA — нужна (установка на домашний экран).
18. Следующие шаги
- Согласовать макеты.
- Перейти к реализации: каркас проекта (FastAPI + React), Docker Compose, CI/CD.