🎨 UI/UX — 75 экранов
Дизайн-система Red Tech · 5 платформ · 75 экранов
PWA, Guest Web, Website, Admin Dashboard, Corporate Panel
75Экранов
5Платформ
95%Дизайн готов
Распределение экранов
| Платформа |
Экранов |
Описание |
| PWA (Mobile) |
36 |
Основное приложение для клиентов |
| Guest Web |
6 |
Гостевая зарядка без регистрации |
| Website / Landing |
7 |
Маркетинговый сайт |
| Admin Dashboard |
20 |
Панель управления для администраторов |
| Corporate Panel |
6 |
Кабинет корпоративных клиентов |
| Итого |
75 |
|
PWA — 36 экранов
Основные (22 экрана)
| # |
ID |
Экран |
Модуль |
| 1 |
PWA-01 |
Splash Screen |
— |
| 2 |
PWA-02 |
Onboarding (3 слайда) |
— |
| 3 |
PWA-03 |
Login (ввод телефона) |
Auth |
| 4 |
PWA-04 |
OTP верификация |
Auth |
| 5 |
PWA-05 |
Регистрация (имя) |
Auth |
| 6 |
PWA-06 |
Главная (карта + список) |
Stations |
| 7 |
PWA-07 |
Карта станций (2GIS) |
Stations |
| 8 |
PWA-08 |
Детали станции |
Stations |
| 9 |
PWA-09 |
Выбор коннектора |
Charging |
| 10 |
PWA-10 |
Установка лимита |
Charging |
| 11 |
PWA-11 |
Подтверждение зарядки |
Charging |
| 12 |
PWA-12 |
Процесс зарядки (realtime) |
Charging |
| 13 |
PWA-13 |
Завершение зарядки + чек |
Charging |
| 14 |
PWA-14 |
Баланс |
Balance |
| 15 |
PWA-15 |
Пополнение (выбор суммы) |
Balance |
| 16 |
PWA-16 |
QR для оплаты Namba |
Balance |
| 17 |
PWA-17 |
Оплата успешна |
Balance |
| 18 |
PWA-18 |
История зарядок |
History |
| 19 |
PWA-19 |
Детали зарядки |
History |
| 20 |
PWA-20 |
Избранные станции |
Favorites |
| 21 |
PWA-21 |
Профиль |
Auth |
| 22 |
PWA-22 |
Настройки + уведомления |
Settings |
Партнёрский кабинет (6 экранов, внутри PWA)
| # |
ID |
Экран |
Описание |
| 23 |
PWA-23 |
Дашборд партнёра |
Обзор станций, доход |
| 24 |
PWA-24 |
Мои станции |
Список с статусами |
| 25 |
PWA-25 |
Детали станции (партнёр) |
Статистика, сессии |
| 26 |
PWA-26 |
Доход и выплаты |
Revenue share |
| 27 |
PWA-27 |
Аналитика |
Графики использования |
| 28 |
PWA-28 |
Уведомления партнёра |
Offline станции, alerts |
Error States (8 экранов)
| # |
ID |
Экран |
Описание |
| 29 |
PWA-29 |
Нет интернета |
Offline mode |
| 30 |
PWA-30 |
Станция offline |
Не отвечает |
| 31 |
PWA-31 |
Ошибка зарядки |
OCPP error |
| 32 |
PWA-32 |
Недостаточно средств |
Low balance |
| 33 |
PWA-33 |
Таймаут OTP |
Код истёк |
| 34 |
PWA-34 |
Коннектор занят |
Busy connector |
| 35 |
PWA-35 |
Ошибка оплаты |
Payment failed |
| 36 |
PWA-36 |
404 / General error |
Fallback |
Guest Web — 6 экранов
| # |
ID |
Экран |
| 1 |
GUE-01 |
Информация о станции |
| 2 |
GUE-02 |
Ввод телефона |
| 3 |
GUE-03 |
Выбор суммы оплаты |
| 4 |
GUE-04 |
QR для оплаты |
| 5 |
GUE-05 |
Процесс зарядки |
| 6 |
GUE-06 |
Завершение + CTA регистрация |
Website — 7 страниц
| # |
ID |
Страница |
| 1 |
WEB-01 |
Главная (hero + features) |
| 2 |
WEB-02 |
Карта станций |
| 3 |
WEB-03 |
Тарифы |
| 4 |
WEB-04 |
Для бизнеса (партнёрам) |
| 5 |
WEB-05 |
FAQ |
| 6 |
WEB-06 |
Контакты |
| 7 |
WEB-07 |
Скачать приложение |
Admin Dashboard — 20 экранов
| # |
ID |
Экран |
| 1 |
DASH-01 |
Mission Control (KPI cards) |
| 2 |
DASH-02 |
Живая карта станций |
| 3 |
DASH-03 |
Список станций |
| 4 |
DASH-04 |
Детали станции |
| 5 |
DASH-05 |
Добавление станции |
| 6 |
DASH-06 |
Пользователи |
| 7 |
DASH-07 |
Детали пользователя |
| 8 |
DASH-08 |
Партнёры |
| 9 |
DASH-09 |
Детали партнёра |
| 10 |
DASH-10 |
Зарядные сессии |
| 11 |
DASH-11 |
Детали сессии |
| 12 |
DASH-12 |
Тарифы |
| 13 |
DASH-13 |
Создание/редакция тарифа |
| 14 |
DASH-14 |
Финансовый отчёт |
| 15 |
DASH-15 |
OCPP логи |
| 16 |
DASH-16 |
Детали OCPP события |
| 17 |
DASH-17 |
Уведомления |
| 18 |
DASH-18 |
Массовая рассылка |
| 19 |
DASH-19 |
Настройки системы |
| 20 |
DASH-20 |
Экспорт данных |
Corporate Panel — 6 экранов
| # |
ID |
Экран |
| 1 |
CORP-01 |
Дашборд (баланс, использование) |
| 2 |
CORP-02 |
Сотрудники |
| 3 |
CORP-03 |
Добавление сотрудника |
| 4 |
CORP-04 |
Лимиты и настройки |
| 5 |
CORP-05 |
Отчёты по использованию |
| 6 |
CORP-06 |
Пополнение корпоративного баланса |
Дизайн-система Red Tech
Цветовая палитра
| Цвет |
HEX |
Использование |
| 🔴 Red Primary |
#EF4444 |
Акцент, CTA, бренд |
| 🔴 Red Dark |
#DC2626 |
Hover, active states |
| 🔵 Blue Info |
#3B82F6 |
Информация, ссылки |
| 🟢 Green Success |
#22C55E |
Успех, online, charged |
| 🟡 Yellow Warning |
#F59E0B |
Предупреждения |
| ⚫ Background |
#0A0E17 |
Основной фон (dark) |
| ⚫ Card |
#111827 |
Карточки |
| ⚫ Border |
#1F2937 |
Границы |
| ⚪ Text |
#F9FAFB |
Основной текст |
| ⚪ Text Dim |
#9CA3AF |
Вторичный текст |
Типографика
| Элемент |
Шрифт |
Размер |
Weight |
| H1 |
Inter |
28px |
700 |
| H2 |
Inter |
24px |
700 |
| H3 |
Inter |
20px |
600 |
| Body |
Inter |
16px |
400 |
| Caption |
Inter |
14px |
400 |
| Button |
Inter |
16px |
600 |
| KPI Number |
Inter |
32px |
700 |
Компоненты
- Button Primary: Red (#EF4444), rounded-xl, h-48px
- Button Secondary: Outline, border-gray-600
- Card: bg #111827, border #1F2937, rounded-xl, p-16
- Input: bg #1F2937, border #374151, rounded-lg, h-48px
- Status Badge: Green (online), Red (offline), Yellow (charging)
- Navigation: Bottom tab bar (PWA), Sidebar (Admin)