Правила использования бренда

В этом разделе вы узнаете, как правильно настраивать изображения и другие элементы пользовательского интерфейса в приложении Google Pay.

Главные изображения

Изображение, указанное в поле 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. Чтобы узнать, как работает эта функция, зайдите в разделы категорий карт.