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

Добрый день!<br><br>Необходимо разработать интерфейс донат-магазина, в котором все элементы (кнопки, иконки, рамки, блоки и т.п.) выполнены в векторном формате. Растровые изображения допустимы только для баннеров и товарных превью (предметов). Это обусловлено стремлением минимизировать нагрузку на клиентскую часть.<br><br><strong>Общие требования:</strong><br><br><ol><li><strong>Векторная графика:</strong><br><br><ul><li>Все графические элементы интерфейса (кнопки, иконки, фоновые элементы, рамки, стрелки, категории и т.д.) должны быть выполнены в векторном формате (SVG или аналог).</li><li>Разрешается использовать растровые изображения исключительно для баннеров и карточек товаров (превью товаров).</li><li>Все страницы должны отображать верхнюю панель с балансом, кнопками пополнения баланса и обмена валюты.</li></ul></li><li><strong>Макет страницы магазина:</strong><br><ul><li>Основная страница (главный экран) содержит:<ul><li>Область отображения баннеров в верхней части экрана.</li><li>Список категорий товаров (аккуратная лента или колонка с наименованиями категорий).</li><li>Основную зону с товарами выбранной категории.</li></ul></li></ul></li><li><strong>Баннеры:</strong><br><br><ul><li>Предусмотреть два вида баннеров:<ol><li>Баннер с кнопкой Call to Action (CTA).</li><li>Баннер без кнопки.</li></ol></li><li>Баннеры могут быть прокручиваемыми или отображаться слайдером.</li><li>Формат баннеров: растровые изображения с векторными элементами (например, кнопка CTA векторная, фон баннера – растровый).</li></ul></li><li><strong>Категории товаров:</strong><br><br><ul><li>Категорий может быть много, поэтому список категорий должен быть представлен компактно (например, вертикальный список слева или горизонтальная лента сверху, не отвлекающая внимание от товаров).</li><li>Примеры категорий:<ul><li>Набор новичка</li><li>Транспорт (по классам)</li><li>Кейсы</li><li>Скины</li><li>Услуги</li><li>Аксессуары</li><li>Акции</li><li>VIP</li></ul></li><li>При выборе категории отображаются соответствующие товары в основной зоне.</li></ul></li><li><strong>Товары:</strong><br><br><ul><li>Отображать товары единообразно:<ul><li>Карточка товара: векторная рамка, векторные элементы интерфейса (кнопки, иконки), растровое изображение предмета.</li><li>На карточке указывать название товара, цену (в донат-валюте или рублях) и, при необходимости, краткую информацию.</li></ul></li><li>Товары должны быть упорядочены по сетке или в виде списка, оптимально использовать как можно больше пространства под товары.</li></ul></li><li><strong>Баланс и операции с валютой:</strong><br><br><ul><li>Отображать два вида валюты:<ol><li>Донат-валюта</li><li>Рубли (или внутриигровые деньги)</li></ol></li><li>Предусмотреть кнопки:<ul><li><strong>"Пополнить баланс"</strong>: открывает окно/попап с вариантами покупки донат-валюты.</li><li><strong>"Обмен валюты"</strong>: открывает окно/попап, где можно конвертировать донат-валюту в рубли.</li></ul></li><li>Отображать текущий баланс пользователя (донат-валюта и рубли) на верхней панели.</li></ul></li><li><strong>Кнопка закрытия:</strong><br><br><ul><li>На экране магазина должна быть предусмотрена кнопка закрытия интерфейса (например, в верхнем углу).</li></ul></li></ol><strong>Поп-апы при выборе товара:</strong><br><br><ol><li><strong>Общий вид:</strong><br><br><ul><li>При выборе товара открывается поп-ап (модальное окно) с более детальной информацией.</li><li>В поп-апе должна быть представлена основная информация о товаре и возможность совершить покупку.</li></ul></li><li><strong>Типы товаров и особенности поп-апа:</strong><br><br><ul><li><strong>Скины:</strong><ul><li>Отображать название скина.</li><li>Кнопка "Купить".</li><li>Дополнительных опций не требуется.</li></ul></li><li><strong>Транспорт:</strong><ul><li>Отображать название транспорта.</li><li>Возможность выбора цвета (векторный цветовой селектор или палитра).</li><li>Кнопка "Купить".</li></ul></li><li><strong>Кейсы:</strong><ul><li>Отображать название кейса.</li><li>Поле ввода или кнопки +/- для выбора количества кейсов.</li><li>При увеличении количества отобразить соответствующую скидку (процент скидки или снижение цены за единицу при оптовой покупке).</li><li>Кнопка "Купить".</li></ul></li></ul></li><li><strong>Скидки:</strong><br><br><ul><li>Если для товара предусмотрено изменение цены при увеличении количества (например, кейсы), то в поп-апе должна динамически отображаться итоговая стоимость с учетом скидки и процент скидки.</li></ul></li></ol><strong>Пополнение доната (отдельный поп-ап):</strong><br><br><ol><li><strong>Пакетные варианты:</strong><ul><li>Отобразить несколько предложений пакетов донат-валюты (например, 100 единиц, 500 единиц, 1000 единиц и т.д.).</li><li>Для каждого пакета указать:<ul><li>Базовую стоимость (в реальных деньгах).</li><li>Количество донат-валюты, которое получит игрок.</li><li>Дополнительные бонусы: процент к дополнительному получению (например, +10% к сумме), отобразить итоговую сумму валюты.</li></ul></li></ul></li><li><strong>Иконки валюты:</strong><ul><li>Предусмотреть разные иконки в зависимости от количества приобретаемой валюты (4-5 вариаций), например:<ul><li>Малый пакет (маленькая иконка монетки)</li><li>Средний пакет (иконка с увеличенным количеством монет)</li><li>Крупный пакет (иконка сундука с монетами)</li></ul></li></ul></li><li><strong>Отображение иксов:</strong><ul><li>Если есть временные акции с умножением получаемой валюты (x2, x3), отобразить это графически (иконка x2 или x3 рядом с пакетом).</li></ul></li></ol><strong>Обмен доната на рубли (отдельный поп-ап):</strong><br><br><ol><li><strong>Механика обмена:</strong><ul><li>Поле ввода суммы донат-валюты.</li><li>Мгновенный пересчет итоговой суммы в рублях по заданному курсу.</li><li>Кнопка "Обменять".</li></ul></li></ol><strong>Технические детали:</strong><br><br><ul><li>Макет адаптивен под различные разрешения экранов.<br></li><li>Интерфейс должен быть выполнен с акцентом на минимизацию графической нагрузки:<br><br><ul><li>Максимальное использование векторных изображений.</li><li>Растровые изображения только для баннеров и товарных превью.</li></ul></li><li>Все всплывающие окна (поп-апы) делаются в едином стиле, с векторными компонентами UI.<br></li><li>Логика переключения категорий, открытия поп-апов и взаимодействия с балансом продумывается с учетом удобства и понятной навигации для пользователя.<br></li></ul>