Перейти к содержанию

🎨 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)