Руководство по бренду

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Если вы разрабатываете для пользователей в России и Японии, используйте кнопки «Сохранить в телефоне», так как Google Кошелек не работает в этих странах. Пожалуйста, ознакомьтесь с соответствующими активами и рекомендациями . Если вы разрабатываете для пользователей за пределами RU и JP, обновите кнопку « Добавить в Google Кошелек », загрузив ресурсы ниже.

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

Кнопка «Добавить в Google Кошелек»

Кнопка « Добавить в Google Кошелек » используется всякий раз, когда вы предлагаете пользователям сохранить пропуск или карту из вашего приложения или веб-сайта в свой кошелек. Кнопка « Добавить в Google Wallet » должна вызывать один из потоков API Google Wallet. Эти потоки появляются в приложении Google Wallet, где пользователи могут следовать инструкциям по сохранению пропусков на свое устройство Android и свою учетную запись Google. Эту кнопку можно использовать в приложениях, на веб-сайтах или в электронных письмах.

Ресурсы

Кнопки «Добавить в Google Кошелек » доступны в форматах Android XML, SVG и PNG.

Скачать ресурсы - Android XML Скачать ресурсы - SVG Скачать ресурсы - PNG

Все кнопки « Добавить в Google Кошелек », отображаемые на вашем сайте, в приложении или в сообщениях электронной почты, должны соответствовать правилам использования бренда, изложенным на этой странице. Примеры этих руководящих принципов включают, помимо прочего, следующее:

  • Размер относительно других подобных кнопок или элементов страницы
  • Форма и цвет пуговиц не должны изменяться.
  • Очистить пространство

Локализованные кнопки

Локализованные кнопки Google Wallet предоставляются для всех рынков, где доступен Wallet. Если вы разрабатываете для пользователей на этих рынках, всегда используйте кнопки, указанные выше. Не создавайте собственную версию кнопки « Добавить в Google Кошелек ». Если локализованная версия кнопки недоступна на вашем рынке, используйте английскую версию кнопки.

Кнопки « Добавить в Google Кошелек » доступны на албанском, арабском, армянском, азербайджанском, боснийском, болгарском, каталонском, китайском (Гонконг), китайском (традиционный), хорватском, чешском, датском, голландском, английском (Индия, Сингапур, Южная Африка) , Австралия, Канада, Великобритания, США), эстонский, филиппинский, финский, французский (Канада), французский (Франция), грузинский, немецкий, греческий, иврит, венгерский, исландский, индонезийский, итальянский, японский, казахский, киргизский, латышский, литовский, македонский, малайский, норвежский, польский, португальский (Бразилия), португальский (Португалия), румынский, русский (Беларусь), сербский, словацкий, словенский, испанский (Латинская Америка), испанский (Испания), шведский, тайский, Турецкий, украинский, узбекский и вьетнамский языки.

Локализованное имя

Для удобства пользователей название продукта Google Кошелька локализовано для некоторых стран. Если вы разрабатываете для пользователей в этих странах, всегда используйте приведенное ниже локализованное имя для Интернета, электронной почты и печати. Не создавайте собственную локализованную версию «Google Кошелька». Если вашего рынка нет в списке ниже, используйте «Google Кошелек» на английском языке.

Страна Имя
Беларусь Google Кошелек
Бразилия Картейра в Google
Чили Billetera де Google
Чехия Пенеженка Google
Греция Google
Гонконг Google 錢包
Литва Гугл пинигине
Польша Портфель Google
Португалия Картейра да Google
Румыния Портофель Гугл
Словакия Пеняженка Google
Тайвань Google 錢包
Турция Google Каздан
ОАЭ محفظة Google
Украина Google Гаманець
США (испанский)
*Используйте это имя в США, если ваш пользовательский интерфейс на испанском языке.
Billetera де Google

Размер

Отрегулируйте высоту и ширину кнопки « Добавить в Google Кошелек » в соответствии с макетом. Если на странице есть другие кнопки, кнопка « Добавить в Google Кошелек » должна быть такого же или большего размера. Не делайте кнопку « Добавить в Google Кошелек » меньше других кнопок.

Стиль

Кнопки «Добавить в Google Кошелек » доступны в двух вариантах: основном и сокращенном. Кнопка « Добавить в Google Wallet » только черного цвета. Предоставляются локализованные версии кнопки. Не создавайте кнопки со своим локализованным текстом.

Начальный Сжатый
Основная кнопка «Добавить в Google Кошелек»Сжатая кнопка «Добавить в Google Кошелек»
Используйте основную кнопку на белом и светлом фоне. Используйте сжатую кнопку, если для основной или полной ширины недостаточно места.

Очистить пространство

Всегда оставляйте минимальное свободное пространство в 8 dp со всех сторон кнопки « Добавить в Google Кошелек ». Убедитесь, что свободное пространство никогда не прерывается графикой или текстом.

Кнопки «Добавить в Google Кошелек» должны иметь отступ 8 dp со всех сторон.

Минимальная высота

Все кнопки " Добавить в Google Кошелек " должны иметь минимальную высоту 48 dp .

Кнопки «Добавить в Google Кошелек» должны иметь минимальную высоту 48 dp.

Что можно, а что нельзя

Дос Не
Что делать: используйте только кнопки « Добавить в Google Кошелек », предоставленные Google. Не делайте этого: создавайте собственные кнопки « Добавить в Google Кошелек » или каким-либо образом изменяйте шрифт, цвет, радиус кнопки или отступ внутри кнопки.
Что делать: используйте одинаковый стиль кнопки на всем сайте. Не делайте этого: сделайте кнопки « Добавить в Google Кошелек » меньше других кнопок.
Что нужно сделать: убедитесь, что размер кнопок « Добавить в Google Кошелек » остается таким же или больше, чем размер других кнопок. Не делайте: измените цвет кнопки.
Что делать: сохраняйте пропорции кнопок одинаковыми при изменении размера кнопок « Добавить в Google Кошелек ». Не делайте: Свободное масштабирование кнопки.
Что делать: используйте предоставленную локализованную версию кнопок. Не делайте этого: создайте собственную локализованную версию кнопки.

Рекомендации по размещению кнопок

Отображать кнопку « Добавить в Google Кошелек » на экранах приложений подтверждения, веб-страницах или электронных письмах. Обратитесь к следующим рекомендациям, которые помогут вам в разработке пользовательского интерфейса.

Общие пропуска

Отображать кнопку « Добавить в Google Кошелек » на экранах приложений подтверждения, веб-страницах или электронных письмах. Мы рекомендуем разместить кнопку « Добавить в Google Кошелек » там, где пользователи получают доступ к своим картам в вашем приложении или на веб-сайте.

Использование названия продукта Google Кошелька в тексте

Вы можете использовать текст, чтобы указать пользователю, что его универсальный пропуск сохранен на его устройстве.

Заглавные буквы «Г» и «В»

Всегда используйте заглавную букву «G» и заглавную «W», а затем строчные буквы для обозначения Google Кошелька. Не используйте полное название «Google Кошелек» с заглавной буквы, если оно не соответствует типографскому стилю вашего пользовательского интерфейса.

Не сокращайте Google Wallet.

Всегда пишите слова «Google» и «Кошелек».

Соответствуйте стилю вашего пользовательского интерфейса

Установите для «Google Wallet» тот же шрифт и типографский стиль, что и для остального текста в вашем пользовательском интерфейсе. Не имитируйте типографский стиль Google.

Всегда используйте локализованную версию «Google Кошелька».

Всегда пишите «Google Кошелек» в предоставленной локализованной копии.

Дизайн

Используйте поля height и size HTML-тега g:savetoandroidpay , чтобы изменить высоту и ширину кнопок « Добавить в Google Кошелек ». Используйте textsize=large , чтобы значительно увеличить размеры текста и кнопок для мобильных реализаций или случаев с особыми требованиями к пользовательскому интерфейсу.

Используйте theme , чтобы установить цвет кнопок. В следующей таблице показано, как эти настройки влияют на кнопку « Добавить в Google Кошелек ».

Изображения героев

Поле class.heroImage отображается как баннер во всю ширину карты.

Рекомендации по изображению главного героя

Ниже приведен список рекомендаций по пользовательскому интерфейсу для главных изображений:

руководство Описание
Предпочтительный тип файла PNG
Рекомендуемый размер

1032x336 пикселей

Используйте широкие прямоугольные изображения.

Используйте изображение с цветным фоном для достижения наилучших результатов.

Соотношение сторон 3:1 или шире
Размер дисплея

Полная ширина карты и пропорциональная высота.

Размер дисплея должен использовать соотношение сторон 3 к 1 или шире.

Полноразмерные изображения

Поле *.imageModulesData.mainImage в классе или объекте отображается как полноразмерное изображение на проходе.

Рекомендации по полноразмерным изображениям

Ниже приведен список рекомендаций по пользовательскому интерфейсу для полноразмерных изображений:

руководство Описание
Предпочтительный тип файла PNG
Минимальный размер

Ширина 1860 пикселей, переменная высота.

Используйте широкие прямоугольные изображения.

Используйте изображение с цветным фоном для достижения наилучших результатов.

Соотношение сторон Переменная
Размер дисплея

Полная ширина шаблона и пропорциональная высота.

Размер дисплея должен использовать соотношение сторон 3 к 1 или шире.
Используйте ту же цветовую схему, что и для вашего логотипа.

Изображения штрих-кода

Некоторые вертикали позволяют размещать изображения выше и ниже штрих-кода.

Изображения над штрих-кодом

Ниже приведен список рекомендаций по пользовательскому интерфейсу для изображений над штрих-кодом:

руководство Описание
Предпочтительный тип файла PNG
Максимальная высота

20 dp (при максимальном соотношении сторон)

Рекомендуемый размер 80 пикселей в высоту и 80-780 пикселей в ширину, если присутствуют два изображения. Это позволяет им быть рядом.

Если одно изображение представляет собой квадрат, а другое — прямоугольник, то изображения должны быть размером 80x80 пикселей и 780x80 пикселей.

Соотношение сторон

Неограниченный. Для максимальной высоты и ширины одного изображения 20 dp используйте соотношение сторон 20:1.

Если вам нужно только одно изображение над штрих-кодом, используйте полную ширину (исключая отступы). Изображение должно быть размером 1600x80 пикселей.

Максимальный размер дисплея (одно изображение) 20 dp в высоту и 400 dp в ширину

Изображение под штрих-кодом

Ниже приведен список рекомендаций по пользовательскому интерфейсу для изображения под штрих-кодом:

руководство Описание
Предпочтительный тип файла PNG
Максимальная высота

20 dp (при максимальном соотношении сторон)

Рекомендуемый размер: 80 пикселей в высоту и 80-1600 пикселей в ширину.

Если квадратный, 80x80 px.

Если прямоугольный, 1600x80 px.

Неограниченное соотношение сторон. Для максимальной высоты и ширины 20 dp используйте соотношение сторон 20:1. Если вам нужно изображение полной ширины (без отступов), размер изображения должен быть 1600 x 80 пикселей.
Максимальный размер дисплея составляет 20 dp в высоту и 400 dp в ширину.

Модули

Модуль представляет собой группу полей в определенном разделе шаблона. В следующей таблице приведены рекомендации по количеству модулей, которые вы должны включить в свои классы и объекты, чтобы ваши карты правильно отображались в приложении Google Wallet.

руководство Описание
imageModulesData Используйте только один imageModulesData либо в своем классе, либо в создаваемых вами объектах.
infoModuleData

Используйте до двух infoModuleData либо в вашем классе, либо в создаваемых вами объектах.

infoModuleData может определять информацию, относящуюся к учетной записи пользователя, такую ​​как «Имя участника» и «Номер членства».

linksModuleData

Используйте в общей сложности до четырех URI linksModuleData либо в своем классе, либо в создаваемых вами объектах.

У вас может быть два URI linksModuleData в вашем классе; один на URI вашего веб-сайта и один на номер телефона вашего справочного центра. Два URI linksModuleData в вашем объекте могут определять URI для конкретной учетной записи пользователя и близлежащие местоположения.

textModulesData

Используйте до двух полей textModulesData между классом и создаваемыми вами объектами.

У вас может быть один URI textModuleData в вашем классе, который определяет сведения о программе, и другой textModulesData в объекте, который определяет сведения, относящиеся к учетной записи пользователя.

infoModuleData

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

linksModuleData

Модуль ссылок содержит URI веб-страниц, номера телефонов и адреса электронной почты. Ниже приведен список рекомендаций по пользовательскому интерфейсу для модуля ссылок:

руководство Пример настройки Пример изображения
Используйте префикс http: когда назначаете URI веб-сайту или местоположению на картах Google. Этот префикс позволяет потребителю коснуться ссылки и перейти на веб-сайт или просмотреть местоположение на Картах Google. Этот префикс также вызывает значок ссылки или карты перед описанием в вашей карточке. 'uri': 'http://maps.google.com/?q=google' Индикатор булавки для местоположения на карте.
'uri': 'http://developer.google.com/wallet/' Глобус-индикатор для сайта.
Используйте префикс tel: при определении номера телефона. Этот префикс позволяет потребителю коснуться ссылки, чтобы набрать номер. Этот префикс также создает значок телефона перед текстовым описанием на карточке. 'uri': 'tel:6505555555' Индикатор телефона для телефонной связи.
Используйте префикс mailto: при определении адреса электронной почты. Этот префикс позволяет потребителю коснуться ссылки, чтобы отправить электронное письмо на указанный адрес. Этот префикс также создает значок электронного письма перед текстовым описанием на карточке. 'uri': 'mailto:jonsmith@email.com' Почтовый индикатор для ссылки для отправки электронного письма.

Заголовки, ярлыки и имена

Пишите заголовки, метки и имена в заглавном регистре, чтобы каждое слово начиналось с заглавной буквы.

Политики содержания

Содержимое каждого поля в пропуске должно соответствовать политике содержания платежей . Содержимое веб-сайтов, на которые вы ссылаетесь в классе, также должно соответствовать этим политикам.

Размещение данных партнерской платформы

Чтобы убедиться, что пользователи могут получить доступ к вашему многофункциональному приложению или веб-сайту о Pass, обязательно включите ссылку на приложение или веб-сайт в свойство linksModuleData.* класса или объекта Pass. Это позволяет пользователю перейти на вашу платформу из Pass, который появляется в Google Wallet. Чтобы увидеть, как это отображается, перейдите в разделы дизайна вертикалей Pass.