Правила фирменного оформления Google

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

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

Важно! Мы обновили правила. Ознакомьтесь с новым разделом Рекомендации по созданию карт ниже, чтобы узнать об обновленных требованиях к ограничениям на количество символов, уведомлениям, цветам фона и главным изображениям.

Объекты

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

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

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

Скачать (Android XML) Скачать (SVG) Скачать (PNG)

Кнопка "Посмотреть в Google Кошельке"

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

Кнопки Посмотреть в Google Кошельке доступны в форматах SVG и PNG.

Скачать (SVG) Скачать (PNG)

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

• Кнопки не должны быть больше или меньше других аналогичных по функции элементов интерфейса.
• Нельзя изменять форму и цвет кнопок.
• Свободное пространство

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

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

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

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

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

Страна	Название
Беларусь	Google Кошелек
Бразилия	Google Кошелек
Чили	Billetera de Google
Чехия	Peněženka Google
Греция	Google Кошелек
Гонконг	Google 錢包
Литва	Google Piniginė
Польша	Portfel Google
Португалия	Google Кошелек
Румыния	Portofel Google
Словакия	Google Кошелек
Тайвань	Google 錢包
Турция	Google Cüzdan
ОАЭ	محفظة Google
Украина	Google Гаманець
США (испанский) *Используйте это название в США, если интерфейс на испанском языке.	Billetera de Google

Размер

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

Стиль

Кнопка Добавить в Google Кошелек доступна в двух вариантах: основном и сокращенном. Кнопка Добавить в Google Кошелек может быть только черной. Также есть кнопки с текстом на разных языках. Учтите, что самостоятельно переводить надписи на них нельзя.

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

Свободное пространство

Вокруг кнопки Добавить в Google Кошелек должно быть не менее 8 dp свободного пространства. Следите за тем, чтобы в свободное пространство не попадали графические элементы или текст.

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

Минимальная высота всех кнопок Добавить в Google Кошелек должна составлять 48 dp.

Рекомендации

Dos	Чего делать нельзя
Рекомендуется. Используйте только кнопки Добавить в Google Кошелек, предоставленные Google.	Создавать кнопки Добавить в Google Кошелек самостоятельно или менять существующие.
Рекомендуется. Используйте один и тот же стиль кнопок на всем сайте.	Делать кнопку Добавить в Google Кошелек меньше других кнопок.
Рекомендуется. Устанавливать размер кнопок Добавить в Google Кошелек таким образом, чтобы они были равными другим аналогичным элементам интерфейса или больше их.	Менять цвет кнопки.
Рекомендуется. При изменении размера кнопок Добавить в Google Кошелек сохраняйте их пропорции.	Менять размер кнопки без сохранения масштаба.
Правильно. Используйте локализованные версии кнопок.	Создавать локализованные версии кнопки самостоятельно.

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

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

Программы лояльности, подарочные карты и специальные предложения

Добавьте кнопку Добавить в Google Кошелек на экраны подтверждения. Вы также можете разместить кнопку на своем сайте, в приложении или в электронных письмах.

   

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

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

Сделать заглавными буквы "G" и "W"

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

Не указывайте название Google Кошелька в виде аббревиатуры

Всегда пишите слова "Google" и "Кошелек" полностью.

Соответствие стилю интерфейса

Используйте для названия "Google Кошелек" тот же шрифт и стиль, что и для остального текста в интерфейсе. Не копируйте типографический стиль Google.

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

Всегда пишите "Google Кошелек" в локализованном тексте.

Дизайн

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

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

Примечание. Атрибут text больше не поддерживается. Кнопка выглядит одинаково независимо от вертикали.

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

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

Цвет фона карточки

Цвет фона можно задать с помощью поля hexBackgroundColor. Если вы не зададите значение, алгоритм проанализирует логотип, найдет доминирующий цвет и использует его в качестве цвета фона.

Избегайте высоконасыщенных "ярких" зон (например, неоново-зеленого #00FF00 или электрического голубого #00FFFF). Такие цвета вызывают сильное напряжение глаз, а текст на их фоне становится неразборчивым. Используйте один из рекомендованных цветов.

Рекомендуемые цвета

Темно-серый

#1a1a1a

Средне-серый

#677088

Светло-серый

#e8eaed

Дымчато-белый

#f8f9fa

Белый

#ffffff

Красный

#d6322d

Orange

#f78f48

Желтый

#f9bb2d

Зеленый

#1e7e3b

Синий

#216acf

Фиолетовый

#9147df

Светло-розовый

#fce8e6

Светло-зеленый

#e6fffa

Голубой

#e8f0fe

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

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

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

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

Рекомендации	Описание
Предпочтительный тип файла	PNG. Если вы хотите, чтобы цвет фона карты был виден, используйте прозрачный PNG.
Рекомендуемый размер	1032 x 812 пикс.
Соотношение сторон	1032:812 (примерно 5:4)
Рекомендации	Dos Чего делать нельзя Используйте фотографии или иллюстрации с высоким разрешением. Встраивайте текст в изображения. Этот контент не будет локализован. Добавьте отступы по 20 dp сверху и снизу, чтобы визуально разделить элементы. Основной контент касается верхней и нижней границ изображения. Используйте квадратное или почти квадратное изображение. Используйте узкие прямоугольные изображения.

Контент

Заголовки, подзаголовки, ярлыки полей и данные полей. Чтобы пользователям было проще воспринимать информацию, делайте заголовки и другие поля как можно короче. Ниже приведены ограничения на количество символов для английского языка. При переводе на другие языки количество символов может измениться, поэтому на разных устройствах и в разных регионах объявления могут выглядеть по-разному. Если вы сомневаетесь, упростите контент, но сохраните ключевые детали.

Поле	Ограничение
Метка заголовка	< 47 символов
Ярлык подзаголовка	Менее 88 символов
Название поля (например, "Дата", "Описание", "Класс", "Имя пассажира").	< 20 символов
Ярлык данных наблюдений (например, "19 октября 2026 г., эконом-плюс")	< 15 символов

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

Уведомления

Поле	Ограничение
Название	< 29 символов
Свернутое тело запроса	< 40 символов
Развернутый текст	< 80 символов

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

Логотипы

Требования к логотипам

Google Кошелек вписывает логотип в круг.

Ниже приведен список рекомендаций по оформлению логотипов для пользовательского интерфейса.

Рекомендации	Описание
Предпочтительный тип файла	PNG
Минимальный размер	660 x 660 пкс
Соотношение сторон изображения	1:1
Соотношение сторон обложки	1:1
Фактический размер в пикселях	Масштабировать по размеру устройства
Круглая маска логотипа	Логотип будет вписан в круг. Убедитесь, что логотип находится в пределах безопасной области. Не используйте маски для логотипа. Оставьте логотип в квадрате с фоном без полей. Чтобы логотип не обрезался при маскировании, у него должны быть поля шириной 15 %.

Google Кошелек вписывает логотип в круг.

Требования к широкому логотипу

Широкие логотипы поддерживаются в билетах на мероприятия, посадочных талонах, проездных билетах с QR-кодом, картах постоянного клиента, специальных предложениях, подарочных картах, простых картах и простых частных картах. Ниже приведены рекомендации по использованию широких логотипов в пользовательском интерфейсе.

Рекомендации	Описание
Тип файла	Формат PNG, прозрачный фон.
Рекомендуемый размер	1280 x 400 пкс
Минимальный размер	Высота – 400 пкс, ширина – пропорционально (подробнее см. в разделе о соотношении сторон). Используйте широкие прямоугольные изображения.
Соотношение сторон	16:5
Цвет	Для карт с темным фоном используйте очень светлый цвет с высокой контрастностью (например, белый). Для карт со светлым фоном используйте очень темный цвет с высокой контрастностью (например, черный).

Дополнительные изображения

Поле *.imageModulesData.mainImage в классе или объекте отображается на карте в виде полноразмерного изображения под главным изображением. Используйте его, только если для карты требуется дополнительное изображение, чтобы пользователю было проще ее понять.

Дополнительные рекомендации для изображений

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

Рекомендации	Описание
Предпочтительный тип файла	PNG
Минимальный размер	Ширина – 1860 пкс, высота может быть разной. Используйте широкие прямоугольные изображения. Для наилучших результатов используйте изображение с цветным фоном.
Масштаб изображения на экране	Полная ширина шаблона и пропорциональная высота.

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

В некоторых отраслях разрешено размещать изображения над штрихкодом и под ним.

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

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

Рекомендация	Описание
Предпочтительный тип файла	PNG
Максимальная высота	20 dp (при максимальном соотношении сторон) Рекомендуемый размер: 80 пикселей в высоту и 80–780 пикселей в ширину, если изображений два. Это позволит им быть рядом. Если одно изображение квадратное, а другое прямоугольное, то их размеры должны быть 80 x 80 пкс и 780 x 80 пкс.
Соотношение сторон	Без ограничений. Для изображения с максимальной высотой и шириной 20 dp используйте соотношение сторон 20:1. Если вы хотите разместить над штрихкодом только одно изображение, используйте всю ширину (без отступов). Размер изображения должен быть 1600 x 80 пкс.
Максимальный размер изображения (одно изображение)	20 dp в высоту и 400 dp в ширину;

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

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

Рекомендация	Описание
Предпочтительный тип файла	PNG
Максимальная высота	20 dp (при максимальном соотношении сторон) Рекомендуемый размер: 80 пикселей в высоту и 80–1600 пикселей в ширину. Если квадратное, то 80 x 80 пкс. Прямоугольное: 1600 x 80 пкс.
Соотношение сторон не ограничено. Для максимальной высоты и ширины 20 dp используйте соотношение сторон 20:1.	Если вы хотите, чтобы изображение занимало всю ширину (без полей), его размер должен быть 1600 x 80 пикселей.
Максимальный размер: 20 dp в высоту и 400 dp в ширину.

Модули

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

Рекомендации	Описание
imageModulesData	Используйте только одно свойство imageModulesData – либо в классе, либо в создаваемых объектах.
infoModuleData	Используйте до двух infoModuleData в классе или созданных объектах. В infoModuleData может быть указана информация об аккаунте пользователя, например имя и номер участника.
linksModuleData	В классе или созданных объектах можно использовать до четырех URI linksModuleData. В классе может быть два URI linksModuleData: один для сайта, а другой для номера телефона справочного центра. Два URI linksModuleData в объекте могут определять URI, связанный с аккаунтом пользователя, и ближайшие местоположения.
textModulesData	Используйте до двух полей textModulesData между классом и объектами, которые вы создаете. В классе может быть один URI textModuleData, определяющий сведения о программе, а в объекте – другой URI 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:[phone]'
При определении адреса электронной почты используйте префикс mailto:. Этот префикс позволяет пользователю нажать на ссылку, чтобы отправить электронное письмо на указанный адрес. Этот префикс также создает значок электронной почты перед текстовым описанием на карточке.	'uri': 'mailto:[e-mail]'

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

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

Правила в отношении контента

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

Ссылка на вашу платформу

Чтобы пользователи могли перейти в ваше приложение или на сайт, добавьте ссылку на контент в приложении или URL сайта в свойство linksModuleData.* класса или объекта карты. Это позволит пользователю перейти на вашу платформу из карты, которая отображается в Google Кошельке. Чтобы посмотреть, как они выглядят, перейдите в раздел "Дизайн" для нужного типа карт.

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