9.6 KiB
9.6 KiB
Спецификация интерфейсов системы бронирования билетов (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 — Карточка клиента (Админ)
- Назначение: Детальная информация и ручное управление.
- Логика: Просмотр всех заказов пользователя, редактирование бонусного баланса, история активности.
- Действия: Кнопки связи и блокировки.