Lineamientos de desarrollo de la marca

Si desarrollas aplicaciones para usuarios de RU, usa los botones “Guardar en el teléfono”, ya que la Billetera de Google no está disponible en esos países. Consulta los recursos y lineamientos pertinentes. Si desarrollas para usuarios fuera de RU, descarga los recursos que se encuentran a continuación para actualizar el botón Agregar a la Billetera de Google.

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 a continuación para conocer los requisitos actualizados sobre límites de caracteres, notificaciones, colores de fondo y las imágenes de héroe.

Recursos

Botón Agregar a la Billetera de Google

El botón Agregar a la Billetera de Google se usa siempre que dirijas 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 en 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 a su billetera y ver un pase o una tarjeta guardados 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 muestran en tu sitio, aplicación o comunicaciones por correo electrónico deben cumplir con los lineamientos de la marca que se describen en esta página. Estos son algunos ejemplos de los lineamientos:

• 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

Se proporcionan botones de la Billetera de Google localizados para todos los mercados en los que está disponible la Billetera. Si desarrollas aplicaciones para usuarios de estos mercados, usa siempre los botones vinculados anteriormente. 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: albanés, árabe, armenio, azerí, bosnio, búlgaro, catalán, chino (Hong Kong), chino (tradicional), croata, checo, danés, neerlandés, inglés (India, Singapur, Sudáfrica, Australia, Canadá, Gran Bretaña, Estados Unidos), estonio, filipino, finlandés, francés (Canadá), francés (Francia), georgiano, alemán, griego, hebreo, húngaro, islandés, indonesio, italiano, japonés, kazajo, kirguís, letón, lituano, macedonio, malayo, noruego,, portugués (Brasil), portugués (Portugal), rumano, ruso (Bielorrusia), serbio, eslovaco, esloveno, español (Latinoamérica), español (España), 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 estos países, usa siempre el nombre localizado que se indica a continuación para la Web, el correo electrónico y la impresión. No crees tu propia versión localizada de “Billetera de Google”. Si tu mercado no aparece en la siguiente lista, usa “Billetera de Google” en inglés.

País	Nombre
Bielorrusia	Google Кошелек
Brasil	Carteira do Google
Chile	Billetera de Google
República Checa	Peněženka Google
Grecia	Πορτοφόλι Google
Hong Kong	Billetera de Google
Lituania	Google Piniginė
Polonia	Portfel Google
Portugal	Carteira da Google
Rumania	Portofel Google
Eslovaquia	Peňaženka Google
Taiwán	Billetera de Google
Türkiye	Google Cüzdan
EAU	محفظة Google
Ucrania	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 la página tiene otros botones, el botón Agregar a la Billetera de Google debe tener el mismo tamaño o uno mayor. No crees un botón Agregar a la Billetera de Google más pequeño que los demás 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 de Agregar a la Billetera de Google deben tener una altura mínima de 48 dp.

Qué debes y no debes hacer

Qué hacer	Lo que no debes hacer
Haz lo siguiente: Usa solo los botones de Agregar a la Billetera de Google que proporciona Google.	No lo hagas: No crees tus propios botones de 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.
Qué hacer: Usa el mismo estilo de botón en todo el sitio.	No lo hagas: No hagas que los botones de Agregar a la Billetera de Google sean más pequeños que otros botones.
Hazlo: Asegúrate de que el tamaño de los botones de Agregar a la Billetera de Google siga siendo igual o más grande que el de otros botones.	No lo hagas: No alteres el color del botón.
Acción: Mantén la misma proporción de botones cuando cambies el tamaño de los botones de Agregar a la Billetera de Google.	No lo hagas: No cambies la escala del botón libremente.
Hazlo: Usa la versión localizada de los botones que se proporciona.	No lo hagas: No crees tu propia versión localizada del botón.

Prácticas recomendadas para la posición de los 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.

Entradas para eventos

Muestra el botón Agregar a la Billetera de Google al final del flujo de compra o en las pantallas de confirmación de la app, las páginas web o los correos electrónicos. Te recomendamos que coloques el botón Agregar a la Billetera de Google donde los usuarios accedan a sus boletos en tu app o sitio web.

   

Uso del nombre del producto Billetera de Google en texto

Puedes usar texto para indicarle al usuario que su entrada para evento se guardó en su dispositivo.

Escribe las letras "G" y "W" en mayúscula

Siempre usa la letra "B" y la letra "G" en mayúscula seguidas de letras en minúscula 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 las palabras "Google" y "Wallet" completas.

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"

Siempre escribe "Billetera de Google" en el texto localizado proporcionado.

Diseño

Usa los campos height y size de la etiqueta HTML g:savetoandroidpay para modificar la altura y el ancho de los botones de Agregar a la Billetera de Google. Usa la especificación textsize=large para aumentar significativamente el tamaño del texto y los botones en las implementaciones para dispositivos móviles o en los 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, cumple con los siguientes lineamientos sobre límites de caracteres, notificaciones, colores de fondo e imágenes principales.

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 como color de fondo.

Evita las zonas "Vibrantes" con alta saturación (por ejemplo, verde neón #00FF00 o cian eléctrico #00FFFF). Estos colores generan una fatiga visual intensa y hacen que el texto se "desvanezca" 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 del pase.

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

A continuación, se incluye una lista de recomendaciones para las imágenes de héroe de la interfaz de usuario:

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	1032 x 812 px
Relación de aspecto	1032 x 812 (aproximadamente 5:4)
Qué debes y no debes hacer	Qué hacer Lo que no debes hacer Usa fotografías o ilustraciones en alta resolución. Incrusta 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 e inferior de la imagen. Usa una imagen cuadrada o casi cuadrada. Usa imágenes rectangulares delgadas.

Contenido

Títulos, subtítulos, etiquetas de campos y datos de campos: 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 los diferentes 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 del 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 cumplir con los límites de caracteres para evitar el truncamiento en el caso de los usuarios con dispositivos pequeños o tamaños de fuente aumentados. Consulta Notifications | Mobile | Android Developers para obtener más información.

Logotipos

Lineamientos de imágenes de logotipos

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

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

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 del material gráfico	1:1
Tamaño real del píxel	Ajustar a la escala del dispositivo
Máscara circular del logotipo	Tu logotipo se enmascara para que se ajuste a un diseño circular. Asegúrate de que tu logotipo quepa dentro del área segura. No apliques una máscara previa a 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 aplique la máscara.

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

Lineamientos de imagen de logotipo ancho

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

Lineamiento	Descripción
Tipo de archivo	PNG transparente
Tamaño recomendado	1280 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 rectangulares anchas.
Relación de aspecto	16:5
Color	Usa un color muy claro que tenga un contraste alto (como el blanco) para los pases con un fondo oscuro. Usa un color muy oscuro que tenga un contraste alto (como el negro) para los pases con un fondo claro.

Imágenes adicionales

El campo *.imageModulesData.mainImage en una clase o un objeto aparece como una imagen de ancho completo en un pase debajo de la imagen hero. Solo se debe usar si el 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 para la interfaz de usuario de imágenes adicionales:

Lineamiento	Descripción
Tipo de archivo preferido	PNG
Tamaño mínimo	1860 px de ancho y altura variable Usa imágenes rectangulares anchas. Para obtener 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

Algunas verticales permiten imágenes arriba y debajo del código de barras.

Imágenes arriba del código de barras

A continuación, se incluye una lista de recomendaciones para la interfaz de usuario de 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 cuadrada y la otra es rectangular, las imágenes deben tener un tamaño de 80 × 80 px y 780 × 80 px.
Relación de aspecto	Sin restricciones. Para un máximo de 20 dp de alto y ancho de una sola imagen, usa una relación de aspecto de 20:1. Si solo quieres una imagen sobre el código de barras, toma el ancho completo (excluye el padding). La imagen debe tener un tamaño de 1,600 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 para la interfaz de usuario de 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, debe ser de 80 × 80 px. Si es rectangular, debe tener 1,600 x 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 incluir el padding), la imagen debe tener 1,600 x 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 asegurarte de 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 podría definir información específica de la cuenta del usuario, como "Nombre de miembro" y "Número 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 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 linksModuleData en tu objeto podrían definir un URI específico de la cuenta de usuario y las 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 del usuario.

infoModuleData

InfoModuleData contiene información personalizable y de miembros, 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 valores almacenados.

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 incluye una lista de recomendaciones para la interfaz de usuario del módulo de vínculos:

Lineamiento	Ejemplo de configuración	Imagen de ejemplo
Usa el prefijo http: cuando asignes un URI a un sitio web o a una ubicación en Google Maps. Este prefijo permite que un consumidor toque 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 mapa delante de la descripción en la 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 el consumidor toque el vínculo para marcar el número. Este prefijo también crea un ícono de un 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 el cliente toque 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úsculas al inicio de cada palabra.

Políticas de contenido

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

Colocación de 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, incorpora 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 las 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 la instalaron. Es preferible usar vínculos directos diferidos que dirijan a los usuarios a los detalles pertinentes del pase después de la instalación y el acceso.