Баннер и графика в Wallet-карте отвечают не за декоративность, а за узнаваемость и читаемость. Клиент открывает карту на кассе в спешке, иногда при ярком освещении, на разных экранах и с разным масштабом текста. Если изображение подготовлено неправильно, карта выглядит неаккуратно, а главное поле с выгодой и кодом визуально теряется. Поэтому вопрос о размере баннера в wallet картах правильнее рассматривать шире: какие изображения действительно нужны, какие требования к ним предъявляют кошельки, и как организовать проверку, чтобы одинаково хорошо смотрелось на iPhone и Android.

В разных Wallet-картах набор графических элементов может отличаться. Где-то используется только фон и логотип, где-то добавляется верхняя полоса/баннер, где-то - миниатюры для уведомлений. Ниже - практичные принципы и безопасные требования, которые помогают подготовить изображения без сюрпризов на устройствах.

Какие изображения обычно используются в Wallet-карте

В большинстве сценариев используются 3-4 вида графики:

1) Логотип
Небольшое изображение бренда, которое помогает быстро узнать карту в списке. Требования: простота, хороший контраст, отсутствие мелких деталей.

2) Фон или "обложка" карты
Цвет или изображение, которое формирует внешний вид карты. Чаще всего это однотонный фон или мягкий градиент. Сложные фотографии работают хуже, потому что ухудшают читаемость текста и кода.

3) Баннер или верхняя графическая зона
Иногда это отдельная картинка в верхней части или элемент, который визуально поддерживает акцию или бренд. Именно с ним чаще всего связаны вопросы о формате баннера и размере баннера.

4) Иконка/миниатюра для уведомлений и списка
Используется в интерфейсе кошелька и push-уведомлениях. Она должна быть максимально простой и читаемой в маленьком размере.

Как подобрать размера баннера в wallet картах

Точные пиксельные значения зависят от конкретного шаблона и того, как ваша платформа формирует карту. Поэтому надежнее опираться на принцип "безопасной области" и на качество исходника:

использовать изображения достаточно высокого разрешения, чтобы не было размытия на Retina-экранах
избегать размещения текста внутри баннера, потому что при масштабировании и обрезке он часто становится нечитаемым
держать ключевые элементы (логотип, важные детали) в центре, оставляя поля по краям

Практический ориентир: готовить баннер/фон в "широком" формате и с запасом по краям. Тогда при адаптации под разные экраны и варианты отображения вы не потеряете важные элементы.

Если вам нужен формальный стандарт внутри команды, можно зафиксировать правило: все основные изображения готовим в высоком качестве и в нескольких вариантах по ширине, а дальше выбираем тот, который лучше выглядит в тестах. Это быстрее и надежнее, чем подгонять один файл "впритык".

Качество изображения: что влияет на восприятие

Резкость и контраст.
На кассе клиент смотрит на карту быстро. Если фон слишком детальный, текст и код теряются. Лучше однотонные фоны или мягкие фактуры без "шума".

Ограничение по весу.
Слишком тяжелые изображения замедляют загрузку и иногда приводят к ошибкам отображения. Для web-выдачи карт удобнее держать файлы оптимизированными, без лишних мегабайт.

Цвет и читаемость текста.
Не стоит делать фон близким по яркости к тексту. Либо используйте темный фон со светлым текстом, либо светлый фон с темным текстом. Самый частый провал - "красиво, но не читается".

Текст на баннере.
Лучше не размещать. Текст должен быть в полях карты, которые кошелек отрисует предсказуемо. В баннере можно оставить только графику и элементы бренда.

Что именно проверять перед публикацией

Проверка "на одном телефоне" почти всегда недостаточна. Минимальная матрица тестов для баннера и графики выглядит так:

iPhone с обычным и большим размером текста
Android с Google Wallet на двух разных моделях (разные экраны и плотность пикселей)
открытие карты из SMS и из QR-кода (в разных браузерах)
отображение в списке карт и в самой карте
видимость кода и основных полей на фоне изображения
скорость открытия страницы добавления и загрузки ассетов

Цель тестов простая: карта должна выглядеть одинаково узнаваемо, а ключевые поля должны читаться сразу.

Типовые ошибки в баннере и как их избежать

Ошибка 1: слишком много деталей на фоне
Фотографии интерьера, людей, текстуры с мелкими элементами ухудшают читабельность. Решение: однотонный фон, градиент, простая графика.

Ошибка 2: логотип слишком мелкий или "теряется"
Если логотип сливается с фоном, карта выглядит безымянной. Решение: контрастная подложка или упрощенная версия логотипа для Wallet.

Ошибка 3: текст в баннере
Текст часто становится нечитаемым из-за обрезки или масштабирования. Решение: текст - только в полях карты, баннер - только графика.

Ошибка 4: нет зоны безопасности по краям
Картинка обрезается на некоторых устройствах, важный элемент уходит. Решение: держать ключевые детали ближе к центру, оставлять поля.

Ошибка 5: слишком большой файл
Может замедлять добавление карты и ухудшать стабильность. Решение: оптимизация и разумный вес без потери качества.

FAQ

Можно ли задать размер баннера в wallet картах один раз и забыть?

Полностью "одним числом" обычно не получается, потому что отображение зависит от шаблона и устройства. Надежнее держать безопасные поля, готовить изображение с запасом и тестировать на iOS и Android.

Можно ли делать баннер с текстом акции?
Не рекомендуется. Текст на изображении часто обрезается или теряет читаемость. Текст акции лучше выводить отдельным полем карты или обновляемым предложением.

Какие изображения важнее - баннер или фон?
Для узнаваемости чаще важнее логотип и базовый фон. Баннер имеет смысл, если вы хотите визуально поддержать кампанию, но он не должен мешать чтению текста и сканированию кода.

Почему на одном телефоне баннер выглядит нормально, а на другом хуже?
Разные размеры экранов, плотность пикселей и системные настройки масштаба меняют восприятие. Поэтому нужен тест минимум на нескольких устройствах.

Как понять, что фон слишком "шумный"?
Если при быстром взгляде клиент не видит бонусы/скидку и не может сразу выделить код, фон нужно упрощать. Карта должна быть читаемой в первую очередь