Дизайн интерфейса для мобильного приложения

Добрый день!

Необходимо разработать интерфейс донат-магазина, в котором все элементы (кнопки, иконки, рамки, блоки и т.п.) выполнены в векторном формате. Растровые изображения допустимы только для баннеров и товарных превью (предметов). Это обусловлено стремлением минимизировать нагрузку на клиентскую часть.

---

Общие требования:

1. Векторная графика:
   
   
   • Все графические элементы интерфейса (кнопки, иконки, фоновые элементы, рамки, стрелки, категории и т.д.) должны быть выполнены в векторном формате (SVG или аналог).
   • Разрешается использовать растровые изображения исключительно для баннеров и карточек товаров (превью товаров).
   • Все страницы должны отображать верхнюю панель с балансом, кнопками пополнения баланса и обмена валюты.
2. Макет страницы магазина:
   
   • Основная страница (главный экран) содержит:
     • Область отображения баннеров в верхней части экрана.
     • Список категорий товаров (аккуратная лента или колонка с наименованиями категорий).
     • Основную зону с товарами выбранной категории.
3. Баннеры:
   
   
   • Предусмотреть два вида баннеров:
     1. Баннер с кнопкой Call to Action (CTA).
     2. Баннер без кнопки.
   • Баннеры могут быть прокручиваемыми или отображаться слайдером.
   • Формат баннеров: растровые изображения с векторными элементами (например, кнопка CTA векторная, фон баннера – растровый).
4. Категории товаров:
   
   
   • Категорий может быть много, поэтому список категорий должен быть представлен компактно (например, вертикальный список слева или горизонтальная лента сверху, не отвлекающая внимание от товаров).
   • Примеры категорий:
     • Набор новичка
     • Транспорт (по классам)
     • Кейсы
     • Скины
     • Услуги
     • Аксессуары
     • Акции
     • VIP
   • При выборе категории отображаются соответствующие товары в основной зоне.
5. Товары:
   
   
   • Отображать товары единообразно:
     • Карточка товара: векторная рамка, векторные элементы интерфейса (кнопки, иконки), растровое изображение предмета.
     • На карточке указывать название товара, цену (в донат-валюте или рублях) и, при необходимости, краткую информацию.
   • Товары должны быть упорядочены по сетке или в виде списка, оптимально использовать как можно больше пространства под товары.
6. Баланс и операции с валютой:
   
   
   • Отображать два вида валюты:
     1. Донат-валюта
     2. Рубли (или внутриигровые деньги)
   • Предусмотреть кнопки:
     • "Пополнить баланс": открывает окно/попап с вариантами покупки донат-валюты.
     • "Обмен валюты": открывает окно/попап, где можно конвертировать донат-валюту в рубли.
   • Отображать текущий баланс пользователя (донат-валюта и рубли) на верхней панели.
7. Кнопка закрытия:
   
   
   • На экране магазина должна быть предусмотрена кнопка закрытия интерфейса (например, в верхнем углу).

---

Поп-апы при выборе товара:

1. Общий вид:
   
   
   • При выборе товара открывается поп-ап (модальное окно) с более детальной информацией.
   • В поп-апе должна быть представлена основная информация о товаре и возможность совершить покупку.
2. Типы товаров и особенности поп-апа:
   
   
   • Скины:
     • Отображать название скина.
     • Кнопка "Купить".
     • Дополнительных опций не требуется.
   • Транспорт:
     • Отображать название транспорта.
     • Возможность выбора цвета (векторный цветовой селектор или палитра).
     • Кнопка "Купить".
   • Кейсы:
     • Отображать название кейса.
     • Поле ввода или кнопки +/- для выбора количества кейсов.
     • При увеличении количества отобразить соответствующую скидку (процент скидки или снижение цены за единицу при оптовой покупке).
     • Кнопка "Купить".
3. Скидки:
   
   
   • Если для товара предусмотрено изменение цены при увеличении количества (например, кейсы), то в поп-апе должна динамически отображаться итоговая стоимость с учетом скидки и процент скидки.

---

Пополнение доната (отдельный поп-ап):

1. Пакетные варианты:
   • Отобразить несколько предложений пакетов донат-валюты (например, 100 единиц, 500 единиц, 1000 единиц и т.д.).
   • Для каждого пакета указать:
     • Базовую стоимость (в реальных деньгах).
     • Количество донат-валюты, которое получит игрок.
     • Дополнительные бонусы: процент к дополнительному получению (например, +10% к сумме), отобразить итоговую сумму валюты.
2. Иконки валюты:
   • Предусмотреть разные иконки в зависимости от количества приобретаемой валюты (4-5 вариаций), например:
     • Малый пакет (маленькая иконка монетки)
     • Средний пакет (иконка с увеличенным количеством монет)
     • Крупный пакет (иконка сундука с монетами)
3. Отображение иксов:
   • Если есть временные акции с умножением получаемой валюты (x2, x3), отобразить это графически (иконка x2 или x3 рядом с пакетом).

---

Обмен доната на рубли (отдельный поп-ап):

1. Механика обмена:
   • Поле ввода суммы донат-валюты.
   • Мгновенный пересчет итоговой суммы в рублях по заданному курсу.
   • Кнопка "Обменять".

---

Технические детали:

• Макет адаптивен под различные разрешения экранов.
  
• Интерфейс должен быть выполнен с акцентом на минимизацию графической нагрузки:
  
  
  • Максимальное использование векторных изображений.
  • Растровые изображения только для баннеров и товарных превью.
• Все всплывающие окна (поп-апы) делаются в едином стиле, с векторными компонентами UI.
  
• Логика переключения категорий, открытия поп-апов и взаимодействия с балансом продумывается с учетом удобства и понятной навигации для пользователя.