В этом разделе вы узнаете, как правильно настраивать изображения и другие элементы пользовательского интерфейса в приложении Google Pay.
Логотипы
В приложении Google Pay ваш логотип будет обрезан и помещен в круг.
Рекомендации по настройке изображения
Ниже приведены рекомендации по созданию изображений логотипа для пользовательского интерфейса.
| Рекомендация | Пример |
|---|---|
| Предпочтительный тип файла: PNG. | |
| Минимальный размер: 660 × 660 пикс. | |
| Соотношение сторон изображения: 1:1. Соотношение сторон рисунка: 1:1. | |
| Фактический размер изображения в пикселях будет масштабирован в зависимости от размера устройства. | |
| Ваш логотип будет обрезан и помещен в круг. Убедитесь в том, что изображение не выходит за пределы безопасной зоны. Нет необходимости предварительно обрезать логотип. Оставьте его на квадратном поле без рамки. Вокруг логотипа должно оставаться свободное пространство, равное 15 % от его площади. В противном случае края рисунка будут обрезаны. |  |
Цветовое оформление фона карты
Цвет фона можно настроить, изменяя значение поля hexBackgroundColor. Если значение не задано, алгоритм проанализирует логотип и подберет преобладающий цвет для оформления фона карты.
Главные изображения
Изображение, указанное в поле class.heroImage, отображается как баннер во всю ширину карты.
Рекомендации по работе с главными изображениями
Ниже приведены рекомендации по работе с главными изображениями для пользовательского интерфейса.
| Рекомендация | Пример |
|---|---|
| Предпочтительный тип файла: PNG. | |
| Рекомендуемый размер: 1032 × 336 пикс. Используйте широкие прямоугольные изображения. Рекомендуется применять изображения с цветным фоном. | |
| Соотношение сторон: 3:1 или шире. | |
| Карта должна отображаться в полную ширину с пропорционально масштабируемой высотой. |  |
Изображения с заданной шириной
Изображение, указанное в поле *.imageModulesData.mainImage класса или объекта, отображается во всю ширину развернутого шаблона карты постоянного клиента или специального предложения.
Рекомендации по созданию изображения с заданной шириной
Ниже приведены рекомендации по созданию изображений с заданной шириной для пользовательского интерфейса.
| Рекомендация | Пример |
|---|---|
| Предпочтительный тип файла: PNG. | |
| Минимальный размер: 1860 пикс. в ширину, высота масштабируемая. Используйте широкие прямоугольные изображения. Рекомендуется применять изображения с цветным фоном. | |
| Регулируемое соотношение сторон. | |
| Изображение должно отображаться в полную ширину шаблона (фоновой карты белого цвета) с пропорционально масштабируемой высотой. | |
| Используйте цветовую схему, аналогичную той, которая применяется в изображении вашего логотипа. |
Штрихкод
На некоторых ресурсах можно размещать графические элементы над и под штрихкодом.
Изображения над штрихкодом
Ниже приведены рекомендации по выбору изображений над штрихкодом.
| Рекомендация | Пример |
|---|---|
| Предпочтительный тип файла: PNG. | |
| Максимальная высота: 20 dp (при максимальном соотношении сторон). Рекомендуемый размер: 80 пикс. в высоту и 80–780 пикс. в ширину. При таких размерах их можно разместить рядом. | Если одно из прямоугольных изображений квадратное, то его размер должен быть 80 x 80 пикс., а размер второго изображения – 780 x 80 пикс. |
| Нет ограничений по соотношению сторон. Для одного изображения с максимальной высотой и шириной в 20 dp используйте соотношение сторон 20:1. | Если вы хотите расположить над штрихкодом одно изображение, задайте полную ширину (исключите отступ). Размер изображения должен составлять 1600 х 80 пикс. |
| Максимальный размер одного изображения составляет 20 dp в высоту и 400 dp в ширину. |
Изображения под штрихкодом
Ниже приведены рекомендации по выбору изображений под штрихкодом.
| Рекомендация | Пример |
|---|---|
| Предпочтительный тип файла: PNG. | |
| Максимальная высота: 20 dp (при максимальном соотношении сторон). Рекомендуемый размер: 80 пикс. в высоту и 80–1600 пикс. в ширину. | Максимальный размер квадратного изображения: 80 × 80 пикс. Максимальный размер прямоугольного изображения: 1600 × 80 пикс. |
| Нет ограничений по соотношению сторон. При максимальной высоте и ширине в 20 dp соотношение сторон должно составлять 20:1. | Если вы хотите задать для изображения под штрихкодом полную ширину, исключите отступ и используйте изображение размером 1600 х 80 пикс. |
| Максимальный размер отображаемого изображения: 20 dp в высоту и 400 dp в ширину. |
Модули
Модуль состоит из группы полей в определенном разделе шаблона. Таблица ниже содержит рекомендации по количеству модулей, которые необходимо включить в классы и объекты для корректного отображения карт в приложении Google Pay.
| Рекомендация | Пример |
|---|---|
Используйте только один imageModulesData в создаваемом классе или объектах. |
|
Используйте не более двух infoModuleData в создаваемом классе или объектах. |
Модуль infoModuleData может определять информацию об аккаунте пользователя, такую как "Имя участника" и "Номер участника". |
Используйте не более четырех linksModuleData URI в создаваемом классе или объектах. |
У вас может быть два linksModuleData URI в классе: один для URI сайта, а второй – для номера телефона службы поддержки. Можно использовать два linksModuleData URI в объекте для определения информации об аккаунте пользователя и близлежащих местах. |
Используйте не более двух полей textModulesData между создаваемым классом и объектами. |
Можно использовать один textModulesData в классе для определения данных о программе, а другой textModulesData – в объекте для определения информации об аккаунте пользователя. |
infoModuleData
InfoModuleData содержит сведения об участнике и индивидуальную информацию. Отображается при просмотре в расширенном виде. Такие сведения, как дата окончания срока действия, второй баланс баллов или баланс накопленных средств должны храниться в модуле информации.
linksModuleData
Модуль ссылок содержит URI для веб-страниц, телефонных номеров и адресов электронной почты. Ниже приведены рекомендации по настройке модуля ссылок для пользовательского интерфейса.
| Рекомендация | Пример |
|---|---|
Используйте префикс http:, указывая URI для веб-сайта или местоположения на Google Картах. Только при наличии этого префикса пользователь сможет перейти по ссылке на веб-сайт или к просмотру местоположения на Google Картах. Если в URI использован этот префикс, перед текстом описания будет отображаться значок положения на карте или ссылки. |
'uri': 'http://maps.google.com/?q=google''uri': 'http://developer.google.com/pay/passes/' |
Используйте префикс tel:, указывая номер телефона. Только при наличии этого префикса пользователь сможет перейти по ссылке к набору номера. Если в URI использован этот префикс, перед текстом описания карты будет отображаться значок телефона. |
'uri': 'tel:6505555555' |
Используйте префикс mailto:, указывая адрес электронной почты. Только при наличии этого префикса пользователь сможет перейти по ссылке к отправке сообщения по электронной почте. Если в URI использован этот префикс, перед текстом описания карты будет отображаться значок электронной почты. |
'uri': 'mailto:jonsmith@email.com' |
Заголовки, ярлыки и названия
Все слова в заголовках, ярлыках и названиях должны быть написаны с заглавной буквы.
Правила работы с контентом
Содержимое каждого поля карты должно соответствовать Правилам в отношении контента. Контент веб-сайтов, указанных в классе, также должен соответствовать этим правилам.
Кнопка Сохранить в Google Pay
Дизайн
Используйте поля height и size HTML-тега g:savetoandroidpay, чтобы менять высоту и ширину кнопки Сохранить в Google Pay.
При настройке textsize=large размер текста и кнопки значительно увеличивается, что может пригодиться на мобильных устройствах или в случае особенных требований к пользовательскому интерфейсу.
Используйте theme, чтобы настроить цвет кнопок. В таблице ниже показано, как эти настройки влияют на итоговый вид кнопки Сохранить в Google Pay.
| Настройка | Результат |
|---|---|
theme из dark |
|
theme из light |
|
Место размещения
Для того чтобы пользователи могли сохранять, активировать и использовать разработанные вами карты, размещайте кнопки или ссылки Сохранить в Google Pay (S2GP) во всех подходящих процессах. Как правило, кнопку размещают рядом с аналогичными командами, такими как Распечатать предложение.
Ниже приведены проверенные партнерами советы по максимально эффективной интеграции кнопки Сохранить в Google Pay в процессы.
Карты постоянного клиента
Попробуйте разместить кнопку Сохранить в Google Pay около номера карты постоянного клиента или рядом с картой в приложении Android или на веб-сайте. Некоторые партнеры добились отличных результатов, разместив кнопку на экране, возникающем после входа или регистрации в приложении.
Подарочные карты
Попробуйте разместить кнопку Сохранить в Google Pay в окне подтверждения, которое возникает после приобретения подарочной карты на веб-сайте или в приложении. Кроме того, можно добавить кнопку в электронные письма, SMS-сообщения или окно, подтверждающее получение подарочной карты.
Бонусы
Разместите кнопку Сохранить в Google Pay на веб-сайте или в приложении, где пользователь просматривает предложения. Помимо этого, используя наши ссылки на сохранение, кнопку можно добавить в любое электронное письмо или SMS-сообщение с предложением.
Билеты
Можно разместить кнопку в конце процесса покупки билетов на веб-сайте или в приложении, а также добавить ее в электронное письмо или SMS-сообщение с подтверждением оплаты. Попробуйте разместить кнопку Сохранить в Google Pay в том же окне приложения или веб-сайта, где пользователь просматривает билет.
Посадочные талоны
Добавьте кнопку в конце процесса регистрации в стандартной и мобильной версиях сайта или в мобильном приложении. Ее также можно расположить в окне веб-сайта или мобильного приложения, где пользователь просматривает посадочный талон, а также в электронном письме или SMS-сообщении с подтверждением регистрации.
Скачать
Размещайте кнопку Google Pay перед ссылками на скачивание карты постоянного клиента, подарочной карты или специального предложения, чтобы сделать работу с сервисом удобнее. Нажмите кнопку Скачать, чтобы скачать кнопки Google Pay на разных языках, доступные как файлы EPS или SVG:
Скачать (EPS) Скачать (SVG)Размещение данных на платформе партнера
Для того чтобы у пользователей был доступ к вашему приложению или веб-сайту с информацией о карте, поместите ссылку на приложение или сайт в свойство linksModuleData.* класса или объекта. В результате на вашу платформу можно будет перейти из окна карты в приложении Google Pay. Чтобы узнать, как работает эта функция, зайдите в разделы категорий карт.