Правила фирменного оформления 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 Кошелек" на английском языке.

Страна	Название
Беларусь	Google Кошелек
Бразилия	Google Кошелек
Чили	Google Кошелек
Чехия	Peněženka Google
Греция	Кошелек Google
Гонконг	Google 錢包
Литва	Google Piniginė
Польша	Portfel Google
Португалия	Google Кошелек
Румыния	Portofel Google
Словакия	Google Кошелек
Тайвань	Google 錢包
Турция	Google Кошелек
ОАЭ	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 Кошелек.

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

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

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

Цвет фона можно задать с помощью поля 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 пикселей в высоту и 400 пикселей в ширину.

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

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

Рекомендация	Описание
Предпочитаемый тип файла	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:6505555555'
При определении адреса электронной почты используйте префикс mailto:. Этот префикс позволяет пользователю нажать на ссылку, чтобы отправить электронное письмо на указанный адрес. Этот префикс также создает значок электронной почты перед текстовым описанием на карточке.	'uri': 'mailto:jonsmith@email.com'

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

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

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

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

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

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