Lineamientos de desarrollo de la marca

Si desarrollas apps para usuarios de Rusia, usa los botones “Guardar en el teléfono”, ya que la Billetera de Google no está disponible en ese país. Consulta los recursos y lineamientos pertinentes. Si desarrollas para usuarios fuera de Rusia, actualiza el botón Agregar a la Billetera de Google descargando los recursos que se incluyen a continuación.

Esta sección de la documentación está diseñada para ayudarte a crear imágenes y otros elementos de la interfaz de usuario para que se vean bien en la app de la Billetera de Google.

Importante: Actualizamos nuestros lineamientos. Revisa la nueva sección Lineamientos para la creación de pases que aparece a continuación para conocer los requisitos actualizados sobre los límites de caracteres, las notificaciones, los colores de fondo y las imágenes hero.

Recursos

Botón Agregar a la Billetera de Google

El botón Agregar a la Billetera de Google se usa cada vez que diriges a los usuarios para que guarden un pase o una tarjeta de tu app o sitio web en su billetera. El botón Agregar a la Billetera de Google debe llamar a uno de los flujos de la API de Google Wallet. Estos flujos muestran la app de la Billetera de Google, en la que los usuarios pueden seguir las instrucciones para guardar pases en su dispositivo Android y su Cuenta de Google. Este botón se puede usar en apps, sitios web o correos electrónicos.

Los botones Agregar a la Billetera de Google están disponibles en formatos XML, SVG y PNG para Android.

Descargar recursos - Android XML Descargar recursos - SVG Descargar recursos - PNG

Botón Ver en la Billetera de Google

El botón Ver en la Billetera de Google se usa para vincular directamente a un usuario con su billetera para que vea un pase o una tarjeta que guardó anteriormente. Este botón se puede usar en apps, sitios web o correos electrónicos.

Los botones Ver en la Billetera de Google están disponibles en formato SVG y PNG.

Descargar recursos (SVG) Descargar recursos (PNG)

Todos los botones que se muestren en tu sitio, app o comunicaciones por correo electrónico deben cumplir con los lineamientos de la marca que se describen en esta página. Entre los ejemplos de estos lineamientos, se incluyen los siguientes:

• Tamaño en relación con otros botones o elementos similares de la página
• No se deben alterar la forma ni el color de los botones.
• espacio en blanco

Botones localizados

Los botones de la Billetera de Google localizados se proporcionan para todos los mercados en los que está disponible la Billetera. Si desarrollas apps para usuarios de esos mercados, usa siempre los botones vinculados más arriba. No crees tu propia versión de los botones. Si no hay una versión localizada del botón disponible en tu mercado, usa la versión en inglés.

Los botones Agregar a la Billetera de Google están disponibles en los siguientes idiomas: alemán, albanés, árabe, armenio, azerbaiyano, bosnio, búlgaro, catalán, chino (Hong Kong), chino (tradicional), croata, checo, danés, eslovaco, esloveno, español (Latinoamérica), español (España), estonio, filipino, finlandés, francés (Canadá), francés (Francia), georgiano, griego, hebreo, húngaro, indonesio, inglés (Australia, Canadá, Estados Unidos, Gran Bretaña, India, Singapur y Sudáfrica), islandés, italiano, japonés, kazajo, kirguís, letón, lituano, macedonio, malayo, neerlandés, noruego,, portugués (Brasil), portugués (Portugal), rumano, ruso (Bielorrusia), serbio, sueco, tailandés, turco, ucraniano, uzbeko y vietnamita.

Nombre localizado

Para brindarles claridad a los usuarios, el nombre del producto Billetera de Google se localiza en determinados mercados. Si desarrollas aplicaciones para usuarios de esos países, usa siempre el nombre localizado que se indica a continuación para la Web, el correo electrónico y el material impreso. No crees tu propia versión localizada de “Billetera de Google”. Si tu mercado no aparece en la lista que se incluye a continuación, usa “Google Wallet” en inglés.

País	Nombre
Bielorrusia	Billetera de Google
Brasil	Carteira do Google
Chile	Billetera de Google
República Checa	Billetera de Google
Grecia	Πορτοφόλι Google
Hong Kong	Google 錢包
Lituania	Billetera de Google
Polonia	Billetera de Google
Portugal	Carteira da Google
Rumania	Billetera de Google
Eslovaquia	Billetera de Google
Taiwán	Google 錢包
Türkiye	Billetera de Google
EAU	محفظة Google
Ucrania	Billetera de Google
Estados Unidos (español) *Usa este nombre en EE.UU. si tu IU está en español	Billetera de Google

Tamaño

Ajusta la altura y el ancho del botón Agregar a la Billetera de Google para que se adapte a tu diseño. Si hay otros botones en la página, el botón Agregar a la Billetera de Google debe tener el mismo tamaño que estos, o uno mayor. No crees un botón Agregar a la Billetera de Google más pequeño que los otros botones.

Estilo

Los botones Agregar a la Billetera de Google están disponibles en dos variantes: principal y condensado. El botón Agregar a la Billetera de Google solo está disponible en negro. Se proporcionan versiones localizadas del botón. No crees botones con tu propio texto localizado.

Principal	Condensada
Usa el botón principal en fondos blancos y claros.	Usa el botón condensado si no hay suficiente espacio para el botón principal o con el ancho total.

espacio en blanco

Siempre mantén un espacio libre de 8 dp en todos los lados del botón Agregar a la Billetera de Google. Asegúrate de que el espacio libre nunca incluya elementos gráficos o texto.

Altura mínima

Todos los botones Agregar a la Billetera de Google deben tener una altura mínima de 48 dp.

Qué debes y no debes hacer

Qué debes hacer	Lo que no debes hacer
Qué hacer: Usa solo los botones Agregar a la Billetera de Google que proporciona Google.	No hagas lo siguiente: No crees tus propios botones Agregar a la Billetera de Google ni alteres la fuente, el color, el radio del botón ni el padding dentro del botón de ninguna manera.
Correcto: Usa el mismo estilo de botón en todo tu sitio.	Incorrecto: No crees botones Agregar a la Billetera de Google más pequeños que los demás.
Qué hacer: Asegúrate de que el tamaño de los botones Agregar a la Billetera de Google sea igual o mayor que el de los demás botones.	Incorrecto: No alteres el color del botón.
Qué hacer: Mantén la misma proporción del botón cuando cambies el tamaño de los botones Agregar a la Billetera de Google.	No hagas lo siguiente: No cambies el tamaño del botón de forma libre.
Qué hacer: Usa la versión localizada de los botones que se proporciona.	No hagas lo siguiente: No crees tu propia versión localizada del botón.

Prácticas recomendadas para la colocación de botones

Muestra el botón Agregar a la Billetera de Google en las pantallas de confirmación de la app, las páginas web o los correos electrónicos. Consulta las siguientes prácticas recomendadas para guiar el diseño de tu IU.

Tarjetas de regalo, ofertas y programas de lealtad

Muestra el botón Agregar a la Billetera de Google en las pantallas de confirmación. También puedes mostrar el botón en tu sitio web o app, o bien incluirlo en correos electrónicos pertinentes.

   

Uso del nombre del producto Billetera de Google en texto

Puedes usar texto para indicarles a los usuarios que sus ofertas están guardadas en sus dispositivos.

Escribe la letras "B" y "G" en mayúscula

Usa siempre las letras "B" y "G" en mayúscula seguidas de las letras en minúsculas para hacer referencia a la Billetera de Google. No escribas todo el nombre "Billetera de Google" en mayúscula, a menos que sea para que coincida con el estilo tipográfico de tu IU.

No abrevies Billetera de Google

Siempre escribe completos "Billetera", "de" y "Google".

Adapta las palabras al estilo de tu IU

Configura "Billetera de Google" en el mismo estilo tipográfico y de fuente que el resto del texto de tu IU. No imites el estilo tipográfico de Google.

Usa siempre la versión localizada de "Billetera de Google"

Escribe siempre "Billetera de Google" en el texto localizado que se proporciona.

Diseño

Usa los campos height y size de la etiqueta HTML g:savetoandroidpay para modificar la altura y el ancho de los botones Agregar a la Billetera de Google. Usa la especificación textsize=large para aumentar drásticamente los tamaños de texto y botones en implementaciones para dispositivos móviles o casos con requisitos especiales de IU.

Usa theme para establecer el color de los botones. En la siguiente tabla, se muestra cómo estos parámetros de configuración afectan el botón Agregar a la Billetera de Google.

Nota: El atributo text dejó de estar disponible. El botón se renderiza de la misma manera, independientemente de la vertical en particular.

Lineamientos para la creación de pases

Para asegurarte de que tus pases se vean bien y funcionen correctamente, sigue los siguientes lineamientos sobre límites de caracteres, notificaciones, colores de fondo e imágenes hero.

Color de fondo de la tarjeta

Puedes establecer el color de fondo con el campo hexBackgroundColor. Si no estableces el valor, un algoritmo analiza el logotipo, encuentra el color dominante y lo usa para el color de fondo.

Evita las zonas "vibrantes" de alta saturación (por ejemplo, verde neón #00FF00 o cian eléctrico #00FFFF). Estos colores crean una fatiga visual intensa y hacen que el texto se "desborde" o desaparezca en el fondo. En su lugar, usa uno de los colores recomendados.

Colores recomendados

Gris oscuro

#1a1a1a

Gris medio

#677088

Gris claro

#e8eaed

Blanco tiza

#f8f9fa

Blanco

#ffffff

Rojo

#d6322d

Orange

#f78f48

Amarillo

#f9bb2d

Verde

#1e7e3b

Azul

#216acf

Púrpura

#9147df

Rosa claro

#fce8e6

Verde claro

#e6fffa

Celeste

#e8f0fe

Imágenes hero

El campo class.heroImage aparece como una imagen de ancho completo debajo de los campos de datos de tu pase.

Considera agregar una imagen si aún no lo hiciste. Si tienes una imagen, asegúrate de seguir las especificaciones que se indican a continuación. Si no seleccionas una imagen, mostraremos una imagen de resguardo de la categoría del pase.

A continuación, se incluye una lista de recomendaciones de interfaz de usuario para las imágenes hero:

Lineamiento	Descripción
Tipo de archivo preferido	PNG. Si quieres que se vea el color de fondo del pase, usa un PNG transparente.
Tamaño recomendado	1,032 × 812 px
Relación de aspecto	1032:812 (aproximadamente 5:4)
Qué debes y no debes hacer	Qué debes hacer Lo que no debes hacer Usa fotografías o ilustraciones de alta resolución. Incorpora texto en tus imágenes. Este contenido no se localizará. Incluye un padding de 20 dp en la parte superior e inferior para que haya espacio visual. El contenido principal de la imagen debe tocar la parte superior y la inferior. Usa una imagen que sea cuadrada o casi cuadrada. Usa imágenes rectangulares delgadas.

Contenido

Títulos, subtítulos, etiquetas de campo y datos de campo: Para aumentar la comprensión del usuario, mantén los títulos y otros campos lo más cortos posible. Los siguientes límites de caracteres se aplican al inglés, pero se traducirán a otros idiomas, lo que generará una experiencia del usuario variada en todos los dispositivos y regiones. En caso de duda, simplifica el contenido sin dejar de transmitir los detalles clave.

Campo	Límite
Etiqueta de título	< 47 caracteres
Etiqueta de subtítulo	< 88 caracteres
Etiqueta de campo o título (p.ej., fecha, descripción, clase, nombre del pasajero)	< 20 caracteres
Etiqueta de datos de campo (p.ej., 19 de octubre de 2026, Economy Plus)	< 15 caracteres

Para garantizar la legibilidad, limita los datos a dos campos por fila y hasta 3 filas, si es posible.

Notificaciones

Campo	Límite
Título	< 29 caracteres
Cuerpo contraído	< 40 caracteres
Cuerpo expandido	< 80 caracteres

Se recomienda respetar los límites de caracteres para evitar que se trunquen los textos de los usuarios con dispositivos pequeños o tamaños de fuente aumentados. Consulta Notificaciones | Dispositivos móviles | Desarrolladores de Android para obtener más información.

Logotipos

Lineamientos para las imágenes de logotipos

La Billetera de Google enmascara tu logotipo en una forma circular.

A continuación, se incluye una lista de recomendaciones de interfaz de usuario para las imágenes de logotipo:

Lineamiento	Descripción
Tipo de archivo preferido	PNG
Tamaño mínimo	660 px por 660 px
Relación de aspecto de la imagen	1:1
Relación de aspecto de la portada	1:1
Tamaño real en píxeles	Ajustar al tamaño del dispositivo
Máscara circular del logotipo	Tu logotipo se enmascara para que se ajuste a un diseño circular. Asegúrate de que el logotipo se ajuste al área segura. No enmascares previamente tu logotipo. Deja el logotipo en un cuadrado con un color de fondo con sangrado completo. El logotipo debe tener un margen del 15% para que no se corte cuando se enmascare.

La Billetera de Google enmascara tu logotipo en una forma circular.

Lineamientos para las imágenes de logotipos anchos

Las imágenes de logotipos anchos se admiten en entradas para eventos, tarjetas de embarque, pases de transporte público con código QR, tarjetas de lealtad, ofertas, tarjetas de regalo, pases genéricos y pases privados genéricos. A continuación, se incluye una lista de recomendaciones de interfaz de usuario para las imágenes de logotipos anchos:

Lineamiento	Descripción
Tipo de archivo	PNG transparente
Tamaño recomendado	1,280 px por 400 px
Tamaño mínimo	400 px de altura, el ancho es proporcional (más orientación en la sección de relación de aspecto) Usa imágenes anchas y rectangulares.
Relación de aspecto	16:5
Color	Usa un color muy claro que tenga un contraste alto (como el blanco) para los pases con fondo oscuro. Usa un color muy oscuro que tenga un contraste alto (como el negro) para los pases con fondo claro.

Imágenes adicionales

El campo *.imageModulesData.mainImage de una clase o un objeto aparece como una imagen de ancho completo en un pase debajo de la imagen hero. Solo úsala si tu pase requiere una imagen adicional para que el usuario lo comprenda mejor.

Lineamientos de imagen adicionales

A continuación, se muestra una lista de recomendaciones de interfaz de usuario para las imágenes adicionales:

Lineamiento	Descripción
Tipo de archivo preferido	PNG
Tamaño mínimo	1,860 px de ancho, altura variable Usa imágenes anchas y rectangulares. Para obtener los mejores resultados, usa una imagen con un fondo de color.
Tamaño de la pantalla	El ancho completo de la plantilla y la altura proporcional

Imágenes de códigos de barras

Ciertas verticales permiten imágenes por encima y por debajo del código de barras.

Imágenes sobre el código de barras

A continuación, se incluye una lista de recomendaciones de interfaz de usuario para las imágenes que se encuentran sobre el código de barras:

Lineamiento	Descripción
Tipo de archivo preferido	PNG
Altura máxima	20 dp (con la relación de aspecto máxima) El tamaño recomendado es de 80 px de alto y de 80 a 780 px de ancho si hay dos imágenes. Esto permite que estén uno al lado del otro. Si una imagen es un cuadrado y la otra es un rectángulo, las imágenes deben ser de 80 × 80 px y 780 × 80 px.
Relación de aspecto	Sin restricciones. Para una altura y un ancho máximos de 20 dp de una sola imagen, usa una relación de aspecto de 20:1. Si solo quieres una imagen sobre el código de barras, usa todo el ancho (excluye el padding). La imagen debe ser de 1600 x 80 px.
Tamaño máximo de visualización (imagen única)	20 dp de alto y 400 dp de ancho

Imagen debajo del código de barras

A continuación, se incluye una lista de recomendaciones de la interfaz de usuario para la imagen que se encuentra debajo del código de barras:

Lineamiento	Descripción
Tipo de archivo preferido	PNG
Altura máxima	20 dp (con la relación de aspecto máxima) El tamaño recomendado es de 80 px de alto y de 80 a 1,600 px de ancho. Si es cuadrada, 80 × 80 px. Si es rectangular, 1,600 × 80 px
Relación de aspecto sin restricciones. Para una altura y un ancho máximos de 20 dp, usa una relación de aspecto de 20:1.	Si quieres una imagen de ancho completo (sin padding), debe ser de 1,600 × 80 px.
El tamaño máximo de visualización es de 20 dp de alto y 400 dp de ancho.

Módulos

Un módulo representa un grupo de campos en una sección específica de una plantilla. En la siguiente tabla, se incluyen lineamientos sobre la cantidad de módulos que debes incluir en tus clases y objetos para garantizar que tus tarjetas se muestren correctamente en la app de la Billetera de Google.

Lineamiento	Descripción
imageModulesData	Usa solo un imageModulesData en tu clase o en los objetos que crees.
infoModuleData	Usa hasta dos infoModuleData, ya sea en tu clase o en los objetos que crees. Un infoModuleData puede definir información específica de la cuenta del usuario, como "Nombre del miembro" y "Nº de membresía".
linksModuleData	Usa hasta cuatro URIs de linksModuleData en total, ya sea en tu clase o en los objetos que crees. Es posible que tengas dos URIs de linksModuleData en tu clase: uno para el URI de tu sitio web y otro para un número de teléfono de tu centro de ayuda. Dos URIs de linksModuleData en tu objeto podrían definir un URI específico de la cuenta de usuario y ubicaciones cercanas.
textModulesData	Usa hasta dos campos textModulesData entre la clase y los objetos que crees. Es posible que tengas un URI textModuleData en tu clase que defina los detalles del programa y otro textModulesData en el objeto que defina los detalles específicos de la cuenta de usuario.

infoModuleData

InfoModuleData contiene información de miembros y personalizable, y aparece en la vista expandida. Usa este módulo para almacenar información, como fechas de vencimiento, saldos de puntos secundarios o saldos de valor almacenado.

Nota: Solo usamos una columna para enumerar los módulos de información.

linksModuleData

El módulo de vínculos contiene URIs a páginas web, números de teléfono y direcciones de correo electrónico. A continuación, se muestra una lista de recomendaciones de interfaz de usuario para el módulo de vínculos:

Lineamiento	Configuración de ejemplo	Imagen de ejemplo
Usa el prefijo http: cuando asignes un URI a un sitio web o una ubicación en Google Maps. Este prefijo permite que un consumidor presione el vínculo y navegue al sitio web o vea la ubicación en Google Maps. Este prefijo también hace que aparezca un ícono de un vínculo o un mapa delante de la descripción en tu tarjeta.	'uri': 'http://maps.google.com/?q=google'
	'uri': 'http://developer.google.com/wallet/'
Usa el prefijo tel: cuando definas un número de teléfono. Este prefijo permite que un consumidor presione el vínculo para marcar el número. Este prefijo también crea un ícono de teléfono delante de la descripción de texto en la tarjeta.	'uri': 'tel:[phone]'
Usa el prefijo mailto: cuando definas una dirección de correo electrónico. Este prefijo permite que un consumidor presione el vínculo para enviar un correo electrónico a la dirección. Este prefijo también crea un ícono de un correo electrónico delante de la descripción de texto en la tarjeta.	'uri': 'mailto:[e-mail]'

Encabezados, etiquetas y nombres

Escribe los encabezados, las etiquetas y los nombres con mayúscula inicial en cada palabra.

Políticas de contenido

El contenido de cada campo de un pase debe cumplir con las políticas de contenido de Payments. El contenido de los sitios web a los que hagas referencia en la clase también debe cumplir con estas políticas.

Posición de los datos de la plataforma de socios

Para asegurarte de que los usuarios puedan acceder a tu app o sitio web con muchas funciones sobre el pase, asegúrate de incorporar el vínculo directo de tu app o sitio web en la propiedad linksModuleData.* de la clase o el objeto del pase. Esto permite que un usuario navegue a tu plataforma desde el pase, que aparece en la Billetera de Google. Para ver cómo se renderiza, ve a las secciones de diseño de los verticales de pases.

Nota: Asegúrate de que el vínculo directo dirija a los usuarios a instalar tu app en Play Store, si aún no lo hicieron. Se prefieren las vinculaciones directas diferidas que dirigen a los usuarios a los detalles del pase pertinente después de la instalación y el acceso.