docs: add technical design doc 3 - mobile-first screen mockups
This commit is contained in:
apuc committed
1 parent
6586ef34ea
commit
615b466c72
1 file changed
+384
@@ -0,0 +1,384 @@
|
|||||||
|
# Технический проект. Документ 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. **Брендбук** — есть ли гайдлайны «ОПОРА РОССИИ» (цвета, шрифты, логотип)?
|
||||||
|
2. **Графики** — библиотека визуализации (Recharts / Chart.js).
|
||||||
|
3. **Тёмная тема** — нужна ли.
|
||||||
|
4. **PWA** — нужна ли установка на домашний экран.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 18. Следующие шаги
|
||||||
|
|
||||||
|
1. Согласовать макеты.
|
||||||
|
2. Перейти к реализации: каркас проекта (FastAPI + React), Docker Compose, CI/CD.
|
||||||
Reference in new issue
Block a user