Если вы разрабатываете приложение для пользователей из России, пожалуйста, используйте кнопки «Сохранить на телефон», так как Google Wallet недоступен в этих странах. Пожалуйста, ознакомьтесь с соответствующими материалами и рекомендациями . Если вы разрабатываете приложение для пользователей за пределами России, пожалуйста, обновите кнопку « Добавить в Google Wallet» , загрузив материалы, представленные ниже.
Этот раздел документации призван помочь вам создавать изображения и другие элементы пользовательского интерфейса, чтобы они отлично выглядели в приложении Google Wallet.
Ресурсы
Кнопка «Добавить в Google Кошелек»
Кнопка «Добавить в Google Wallet» используется всякий раз, когда вы предлагаете пользователям сохранить пропуск или карту из вашего приложения или веб-сайта в свой кошелек. Кнопка «Добавить в Google Wallet» должна вызывать один из потоков API Google Wallet. Эти потоки отображают приложение Google Wallet, где пользователи могут следовать инструкциям, чтобы сохранить пропуски на свое устройство Android и в свою учетную запись Google. Эту кнопку можно использовать в приложениях, на веб-сайтах или в электронных письмах.
Кнопки «Добавить в Google Wallet» доступны в форматах Android XML, SVG и PNG.
Скачать ресурсы - Android XML Скачать ресурсы - SVG Скачать ресурсы - PNGКнопка «Просмотреть в Google Wallet»
Кнопка «Просмотреть в Google Wallet» используется для прямой ссылки на ранее сохраненный кошелек пользователя, позволяющий просмотреть пароль или карту. Эту кнопку можно использовать в приложениях, на веб-сайтах или в электронных письмах.
Кнопки «Просмотреть в Google Wallet» доступны в форматах SVG и PNG.
Скачать файлы SVG Скачать файлы PNGВсе кнопки, отображаемые на вашем сайте, в приложении или электронных письмах, должны соответствовать фирменным рекомендациям, изложенным на этой странице. Примеры таких рекомендаций включают, помимо прочего, следующее:
- Размер относительно других подобных кнопок или элементов страницы.
- Форму и цвет пуговиц изменять нельзя.
- Свободное пространство
Локализованные кнопки
Для всех рынков, где доступен Wallet, предоставляются локализованные кнопки Google Wallet. Если вы разрабатываете приложение для пользователей на этих рынках, всегда используйте кнопки, ссылки на которые приведены выше. Не создавайте собственные версии кнопок. Если локализованная версия кнопки недоступна на вашем рынке, используйте английскую версию кнопки.
Кнопки «Добавить в Google Wallet» доступны на следующих языках: албанский, арабский, армянский, азербайджанский, боснийский, болгарский, каталанский, китайский (Гонконг), китайский (традиционный), хорватский, чешский, датский, голландский, английский (Индия, Сингапур, Южная Африка, Австралия, Канада, Великобритания, США), эстонский, филиппинский, финский, французский (Канада), французский (Франция), грузинский, немецкий, греческий, иврит, венгерский, исландский, индонезийский, итальянский, японский, казахский, киргизский, латышский, литовский, македонский, малайский, норвежский, польский, португальский (Бразилия), португальский (Португалия), румынский, русский (Беларусь), сербский, словацкий, словенский, испанский (Латинская Америка), испанский (Испания), шведский, тайский, турецкий, украинский, узбекский и вьетнамский.
Локализованное имя
Для большей ясности для пользователей название продукта Google Wallet локализовано на некоторых рынках. Если вы разрабатываете приложение для пользователей в этих странах, всегда используйте локализованное название, указанное ниже, для веб-сайта, электронной почты и печатных изданий. Не создавайте собственную локализованную версию «Google Wallet». Если вашего рынка нет в списке ниже, используйте «Google Wallet» на английском языке.
| Страна | Имя |
|---|---|
| Беларусь | Google Кошелек |
| Бразилия | Карта Google |
| Чили | Билетера де Google |
| Чехия | Peněženka Google |
| Греция | Πορτοφόλι Google |
| Гонконг | Google 錢包 |
| Литва | Google Пинигинė |
| Польша | Портфель Google |
| Португалия | Карта Google |
| Румыния | Портофел Google |
| Словакия | Peňaženka Google |
| Тайвань | Google 錢包 |
| Турция | Google Cüzdan |
| ОАЭ | |
| Украина | Google Гаманець |
| Соединенные Штаты (испанский) *Используйте это название в США, если ваш пользовательский интерфейс на испанском языке. | Билетера де Google |
Размер
Отрегулируйте высоту и ширину кнопки «Добавить в Google Wallet» в соответствии с вашим макетом. Если на странице есть другие кнопки, кнопка «Добавить в Google Wallet» должна быть такого же или большего размера. Не делайте кнопку «Добавить в Google Wallet» меньше, чем другие кнопки.
Стиль
Кнопки «Добавить в Google Wallet» доступны в двух вариантах: основной и сокращенный. Кнопка «Добавить в Google Wallet» доступна только в черном цвете. Предоставляются локализованные версии кнопки. Не создавайте кнопки с собственным локализованным текстом.
| Начальный | Сокращенный |
|---|---|
 |  |
| Используйте основную кнопку на белом и светлом фоне. | Используйте кнопку "Сжатый", если недостаточно места для основного или полноэкранного элемента. |
Свободное пространство
Всегда оставляйте минимальное свободное пространство в 8 dp со всех сторон кнопки «Добавить в Google Wallet» . Убедитесь, что это свободное пространство никогда не нарушается графикой или текстом.
Минимальная высота
Высота всех кнопок «Добавить в Google Wallet» должна составлять не менее 48 dp .
Что можно и чего нельзя делать
| Дос | Не следует |
|---|---|
| Рекомендация: Используйте только кнопки «Добавить в Google Wallet» , предоставленные Google. | Не следует: создавать собственные кнопки «Добавить в Google Wallet» или изменять шрифт, цвет, радиус кнопки или отступы внутри кнопки каким-либо образом. |
| Рекомендация: Используйте кнопки одного стиля на всем сайте. | Не следует: Делать кнопки «Добавить в Google Wallet» меньше, чем остальные кнопки. |
| Рекомендация: Убедитесь, что размер кнопок «Добавить в Google Wallet» остается равным или большим, чем у других кнопок. | Не следует: Изменять цвет кнопки. |
| Рекомендация: Сохраняйте пропорции кнопок «Добавить в Google Wallet» неизменными при изменении их размера. | Не следует: изменять масштаб кнопки по своему усмотрению. |
| Рекомендация: Используйте предоставленную локализованную версию кнопок. | Не следует: Создавать собственную локализованную версию кнопки. |
Рекомендации по размещению кнопок
Отображайте кнопку «Добавить в Google Wallet» на экранах подтверждения в приложениях, на веб-страницах или в электронных письмах. При разработке пользовательского интерфейса руководствуйтесь следующими рекомендациями.
Билеты на мероприятие
Разместите кнопку «Добавить в Google Wallet» в конце процесса покупки или на экранах подтверждения в приложении, на веб-страницах или в электронных письмах. Мы рекомендуем размещать кнопку «Добавить в Google Wallet» там, где пользователи получают доступ к своим билетам в вашем приложении или на веб-сайте.
Использование названия продукта Google Wallet в тексте
Вы можете использовать текст, чтобы сообщить пользователю, что его билет на мероприятие сохранен на его устройстве.
Напишите буквы «G» и «W» заглавными.
При обращении к Google Wallet всегда используйте заглавную букву «G» и заглавную букву «W», за которыми следуют строчные буквы. Не пишите полное название «Google Wallet» с заглавной буквы, если только это не соответствует типографическому стилю вашего пользовательского интерфейса.
Не сокращайте название Google Wallet.
Всегда пишите слова «Google» и «Wallet» полностью.
Подберите стиль, соответствующий вашему пользовательскому интерфейсу.
Используйте тот же шрифт и типографический стиль для надписи «Google Wallet», что и для остального текста в пользовательском интерфейсе. Не копируйте типографический стиль Google.
Всегда используйте локализованную версию Google Wallet.
В предоставленном локализованном варианте текста всегда пишите "Google Wallet".
Дизайн
Используйте поля height и size HTML-тега g:savetoandroidpay , чтобы изменить высоту и ширину кнопок «Добавить в Google Wallet» . Используйте параметр textsize=large , чтобы значительно увеличить размер текста и кнопок для мобильных приложений или в случаях со специальными требованиями к пользовательскому интерфейсу.
Используйте theme , чтобы задать цвет кнопок. В следующей таблице показано, как эти настройки влияют на кнопку «Добавить в Google Wallet» .
Логотипы
Рекомендации по использованию изображений в логотипе
Google Wallet преобразует ваш логотип в круглую форму.
Ниже приведён список рекомендаций по пользовательскому интерфейсу для изображений логотипа:| Руководство | Описание |
|---|---|
| Предпочитаемый тип файла | ПНГ |
| Минимальный размер | 660 x 660 пикселей |
| Соотношение сторон изображения | 1:1 |
| Соотношение сторон изображения | 1:1 |
| Фактический размер пикселя | Масштабирование в соответствии с размером устройства |
| Круглая маска с логотипом | Ваш логотип размещен в круглой области. Убедитесь, что ваш логотип помещается в безопасную область . Не используйте предварительное маскирование логотипа. Оставьте логотип в квадрате с фоновым цветом, полностью занимающим всю площадь. Логотип должен иметь отступ в 15%, чтобы он не обрезался при маскировании.  |
Google Wallet преобразует ваш логотип в круглую форму.
Общие рекомендации по использованию изображений в логотипе
Широкие изображения логотипа поддерживаются билетами на мероприятия, посадочными талонами, проездными QR-кодами, картами лояльности, предложениями, подарочными картами, стандартными пропусками и стандартными индивидуальными пропусками. Ниже приведен список рекомендаций по пользовательскому интерфейсу для широких изображений логотипа:
| Руководство | Описание |
|---|---|
| Предпочитаемый тип файла | ПНГ Для достижения наилучших результатов используйте изображение с фоновым цветом (мы рекомендуем использовать тот же цвет, что и цвет фона вашего пропуска). |
| Рекомендуемый размер | 1280 x 400 пикселей |
| Минимальный размер | Высота 400 пикселей, ширина пропорциональна (более подробные рекомендации см. в разделе рекомендуемого соотношения сторон). Используйте широкие прямоугольные изображения. |
| Рекомендуемое соотношение сторон | Если для изображения не задано рекомендуемое соотношение сторон, оно будет изменено в соответствии с соотношением сторон предоставленного пространства заголовка. На приведенной ниже диаграмме подробно показано, как будет изменяться размер изображения в зависимости от соотношения сторон.  |
Цвет фона открытки
Цвет фона можно задать с помощью поля hexBackgroundColor . Если значение не указано, алгоритм анализирует логотип, определяет доминирующий цвет и использует его в качестве цвета фона.
Главные изображения
Поле class.heroImage отображается в виде баннера во всю ширину карточки.
рекомендации по созданию главного изображения
Ниже приведён список рекомендаций по пользовательскому интерфейсу для главных изображений:
| Руководство | Описание |
|---|---|
| Предпочитаемый тип файла | ПНГ |
| Рекомендуемый размер | 1032x336 пикселей Используйте широкие прямоугольные изображения. Для достижения наилучших результатов используйте изображение с цветным фоном. |
| Соотношение сторон | 3:1 или шире |
| Размер дисплея | Полная ширина карточки и пропорциональная высота.  |
Изображения во всю ширину
Поле *.imageModulesData.mainImage в классе или объекте отображается в проходе как изображение во всю ширину экрана.
Руководящие принципы для изображений во всю ширину
Ниже приведён список рекомендаций по пользовательскому интерфейсу для изображений во всю ширину экрана:
| Руководство | Описание |
|---|---|
| Предпочитаемый тип файла | ПНГ |
| Минимальный размер | Ширина 1860 пикселей, высота переменная. Используйте широкие прямоугольные изображения. Для достижения наилучших результатов используйте изображение с цветным фоном. |
| Соотношение сторон | Переменная |
| Размер дисплея | Полная ширина шаблона и пропорциональная высота. |
| Используйте ту же цветовую схему, что и для вашего логотипа. |
изображения штрихкодов
В некоторых отраслях допускается размещение изображений как над, так и под штрихкодом.
Изображения над штрихкодом
Ниже приведён список рекомендаций по пользовательскому интерфейсу для изображений над штрихкодом:
| Руководство | Описание |
|---|---|
| Предпочитаемый тип файла | ПНГ |
| Максимальная высота | 20 dp (при максимальном соотношении сторон) Рекомендуемый размер — 80 пикселей в высоту и 80–780 пикселей в ширину, если присутствуют два изображения. Это позволяет размещать их рядом. Если одно изображение квадратное, а другое прямоугольное, то размеры изображений должны быть 80x80 пикселей и 780x80 пикселей соответственно. |
| Соотношение сторон | Без ограничений. Для максимальной высоты и ширины одного изображения в 20 dp используйте соотношение сторон 20:1. Если вам нужно разместить только одно изображение над штрихкодом, используйте всю ширину (без учета отступов). Размер изображения должен быть 1600x80 пикселей. |
| Максимальный размер отображаемого изображения (одно изображение) | Высота 20 dp, ширина 400 dp. |
Изображение под штрихкодом
Ниже приведён список рекомендаций по пользовательскому интерфейсу для изображения под штрихкодом:
| Руководство | Описание |
|---|---|
| Предпочитаемый тип файла | ПНГ |
| Максимальная высота | 20 dp (при максимальном соотношении сторон) Рекомендуемый размер: высота 80 пикселей, ширина 80-1600 пикселей. Если квадратное изображение, то размер 80x80 пикселей. Если прямоугольная форма, размер 1600x80 пикселей. |
| Неограниченное соотношение сторон. Для максимальной высоты и ширины 20 dp используйте соотношение сторон 20:1. | Если вам нужно изображение во всю ширину экрана (без учета отступов), его размер должен быть 1600x80 пикселей. |
| Максимальный размер отображаемого изображения составляет 20 dp в высоту и 400 dp в ширину. |
Модули
Модуль представляет собой группу полей в определенном разделе шаблона. В следующей таблице приведены рекомендации по количеству модулей, которые необходимо включить в ваши классы и объекты, чтобы ваши карточки корректно отображались в приложении Google Wallet.
| Руководство | Описание |
|---|---|
imageModulesData | Используйте только один imageModulesData либо в вашем классе, либо в создаваемых вами объектах. |
infoModuleData | Используйте до двух В |
linksModuleData | В вашем классе или в создаваемых вами объектах можно использовать до четырех URI В вашем классе может быть два URI объекта |
textModulesData | Используйте до двух полей В вашем классе может быть один URI |
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.