110 lines
9.6 KiB
Markdown
110 lines
9.6 KiB
Markdown
# Спецификация интерфейсов системы бронирования билетов (Fight & Sports)
|
||
|
||
**Общий стиль:** Modern SaaS, Dark Theme.
|
||
**Цветовая палитра:** Фон #121212, Акцентный красный #E32636 (кнопки, активные состояния), Золотой/Желтый (лояльность).
|
||
**Шрифты:** Без засечек (San Francisco / Inter / Roboto), четкая иерархия заголовков.
|
||
|
||
---
|
||
|
||
## I. Клиентское мобильное приложение (Client App)
|
||
|
||
### 01-login.png — Вход в систему
|
||
* **Назначение:** Авторизация и регистрация.
|
||
* **Логика:** Переключатель (Segmented Control) между E-mail и Телефоном. Поля с валидацией. Социальный вход (Apple, Google, VK) в нижней части экрана.
|
||
* **Кнопки:** "Войти" (Primary), "Создать аккаунт" (Secondary/Ghost).
|
||
|
||
### 02-events.png — Главный экран (Каталог)
|
||
* **Назначение:** Поиск и выбор спортивного события.
|
||
* **Логика:** Горизонтальные табы-фильтры («Все», «Ближайшие», «Популярные»). Список карточек с вертикальным скроллом.
|
||
* **Контент карточки:** Миниатюра афиши, название (напр. "Турнир по ММА"), дата/время, площадка, цена "от 2500 ₽".
|
||
|
||
### 03-event-details.png — Страница события
|
||
* **Назначение:** Подробная информация об ивенте перед покупкой.
|
||
* **Логика:** Большая афиша (Hero Image) сверху. Блоки: «Ключевая информация» (возраст 18+, длительность), описание, правила возврата, что включено в билет.
|
||
* **Действие:** Закрепленная внизу кнопка «Выбрать места».
|
||
|
||
### 04-seat-selection.png — Выбор мест (Схема зала)
|
||
* **Назначение:** Интерактивное бронирование мест.
|
||
* **Логика:** Карта арены с секторами. Цветовая индикация: VIP (фиолетовый), Стандарт (синий). Интерактивные точки (кресла).
|
||
* **Панель итогов:** Выбранное место (Ряд/Место), количество и общая стоимость с кнопкой перехода к оплате.
|
||
|
||
### 05-checkout.png — Оформление заказа
|
||
* **Назначение:** Финализация покупки и выбор метода оплаты.
|
||
* **Логика:** Проверка данных заказа. Ввод промокода, тумблер использования бонусных баллов. Выбор Apple Pay или Карты.
|
||
* **Безопасность:** Текст «Все платежи защищены».
|
||
|
||
### 06-my-tickets.png — Список билетов
|
||
* **Назначение:** Хранение купленных билетов пользователя.
|
||
* **Логика:** Табы «Активные» и «История». Карточки с перфорацией (визуальный стиль билета), краткие данные места.
|
||
* **Действие:** Кнопка «Открыть билет» для перехода к QR.
|
||
|
||
### 07-ticket-qr.png — Электронный билет
|
||
* **Назначение:** Контроль доступа на входе.
|
||
* **Логика:** Крупный QR-код. Информация о секторе, ряде и месте продублирована крупным шрифтом для удобства стюардов.
|
||
* **Действие:** Кнопки «Добавить в Wallet» и «Скачать».
|
||
|
||
### 08-profile-loyalty.png — Профиль и лояльность
|
||
* **Назначение:** Личный кабинет и геймификация.
|
||
* **Логика:** Карточка уровня лояльности («Серебро»). Баланс бонусов в рублях. Прогресс-бар до следующего уровня (Золото).
|
||
* **Навигация:** Меню настроек, заказов и реферальной программы.
|
||
|
||
### 09-order-history.png — История заказов
|
||
* **Назначение:** Просмотр прошлых транзакций.
|
||
* **Логика:** Список заказов с датами. Цветовые статусы: Зеленый («Оплачен»), Синий («Завершен»), Красный («Отменен»).
|
||
* **Детали:** Сумма заказа и ссылка на подробности.
|
||
|
||
### 10-notifications.png — Настройки уведомлений
|
||
* **Назначение:** Управление каналами коммуникации.
|
||
* **Логика:** Список переключателей (Switch) для каждого канала: SMS, E-mail, Push, Telegram, WhatsApp.
|
||
* **Группировка:** Отдельно системные уведомления и маркетинговые предложения.
|
||
|
||
---
|
||
|
||
## II. Админ-панель (Admin Interface)
|
||
|
||
### admin-01-dashboard.png — Дашборд аналитики
|
||
* **Назначение:** Оперативный мониторинг продаж.
|
||
* **Виджеты:** KPI (Выручка, Билеты, Конверсия). Линейный график продаж. Круговая диаграмма источников трафика.
|
||
* **Действия:** Быстрые кнопки «Создать событие» и «Рассылка».
|
||
|
||
### admin-02-events.png — Управление событиями
|
||
* **Назначение:** Список и модерация ивентов.
|
||
* **Логика:** Табличное отображение мероприятий. Для каждого: статус (Черновик/Опубликовано), количество проданных мест в %, текущая выручка.
|
||
* **Действия:** Редактировать, Статистика.
|
||
|
||
### admin-03-create-event.png — Форма создания
|
||
* **Назначение:** Добавление нового матча/боя в базу.
|
||
* **Поля:** Название, дата (Datepicker), время, площадка (Dropdown), описание (Textarea), загрузка афиши.
|
||
* **Логика:** Валидация обязательных полей перед публикацией.
|
||
|
||
### admin-04-seat-map.png — Настройка схемы зала
|
||
* **Назначение:** Привязка категорий к местам.
|
||
* **Логика:** Область предпросмотра схемы (SVG). Панель конфигурации: выбор категории (VIP/Стандарт) и выделение соответствующих зон на карте.
|
||
|
||
### admin-05-pricing.png — Управление ценами
|
||
* **Назначение:** Настройка стоимости и динамического ценообразования.
|
||
* **Логика:** Список категорий с полями ввода цены. Блок автоматизации: % наценки при высоком спросе или скидки при низком.
|
||
|
||
### admin-06-segments.png — Сегментация аудитории
|
||
* **Назначение:** Группировка пользователей для маркетинга.
|
||
* **Фильтры:** По городу, LTV (сумме покупок), дате регистрации.
|
||
* **Результат:** Сохраненные сегменты с количеством доступных контактов.
|
||
|
||
### admin-07-campaign-create.png — Создание рассылки
|
||
* **Назначение:** Запуск маркетинговых кампаний.
|
||
* **Логика:** Выбор сегмента из списка. Редактор сообщения с превью (как это увидит пользователь). Выбор каналов доставки.
|
||
* **Действие:** Кнопки «Отправить сейчас» или «Запланировать».
|
||
|
||
### admin-08-campaign-stats.png — Аналитика рассылок
|
||
* **Назначение:** Анализ эффективности маркетинга.
|
||
* **Метрики:** Open Rate (открытия), Click Rate (клики), Conversion (покупки). Графики вовлеченности во времени.
|
||
|
||
### admin-09-users.png — Список пользователей
|
||
* **Назначение:** CRM система.
|
||
* **Логика:** Список клиентов с быстрыми метриками: уровень лояльности, количество билетов, общая сумма трат (LTV).
|
||
* **Поиск:** По имени, телефону или ID.
|
||
|
||
### admin-10-user-profile.png — Карточка клиента (Админ)
|
||
* **Назначение:** Детальная информация и ручное управление.
|
||
* **Логика:** Просмотр всех заказов пользователя, редактирование бонусного баланса, история активности.
|
||
* **Действия:** Кнопки связи и блокировки. |