Lineamientos de marca

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Si desarrollas apps para usuarios de Rusia y Japón, usa los botones “Guardar en el teléfono”, ya que Google Wallet no está publicado en estos países. Consulta los recursos y lineamientos relevantes. Si desarrollas apps para usuarios fuera de RU y JP, actualiza el botón Agregar a la Billetera de Google y descarga los elementos que aparecen 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, de modo que se vean geniales en la aplicación Google Wallet.

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 agregar uno de los flujos de la API de la Billetera de Google. 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 Cuenta de Google. Este botón se puede usar en apps, sitios web o correos electrónicos.

Recursos

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

Descargar elementos - Android XML Descargar elementos - SVG Descargar elementos - PNG

Todos los botones Agregar a la Billetera de Google que se muestran en tu sitio, app o comunicaciones por correo electrónico deben cumplir con los lineamientos de marca que se describen en esta página. Estos son algunos ejemplos de estos lineamientos:

  • Tamaño relacionado con otros botones o elementos similares de la página
  • No se debe alterar la forma ni el color de los botones
  • Espacio libre

Botones localizados

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

Los botones de conversión se ubican en el menú de opciones

Nombre localizado

Para mayor claridad, el nombre del producto de Google Wallet se localiza en determinados mercados. Si desarrollas apps para usuarios de estos países, usa siempre el nombre localizado para la Web, el correo electrónico y la impresión. No crees tu propia versión localizada de "Google Wallet". Si tu mercado no aparece en la siguiente lista, usa "Google Wallet" en inglés.

País Nombre
Bielorrusia Google Кошелек
Brasil Carteira do Google
Chile Billetera de Google
República Checa Peněženka Google
Grecia E
Hong Kong Google 錢包
Lituania Google Piniginė
Polonia Portfel Google
Portugal Carteira de Google
Rumania Portofel Google
Eslovaquia Peňaženka Google
Taiwán Google 錢包
Turquía Google Cüzdan
Emiratos Árabes Unidos مححظة Google
Ucrania Google Гаманець
Estados Unidos (español)
*Usa este nombre en EE.UU. si la 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 adaptarlo a tu diseño. Si hay otros botones en la página, el botón Agregar a la Billetera de Google debe tener un tamaño igual o más grande. No hagas que el botón Agregar a la Billetera de Google sea más pequeño que otros botones.

Pestaña Style

Los botones para agregar a Google Wallet están disponibles en dos variantes: principal y condensada. 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 Condensed
Botón Agregar a Google Wallet principal Botón "Agregar a Google Wallet" abreviado
Usa el botón principal sobre fondos blancos y claros. Usa el botón condensado si no hay suficiente espacio para el ancho principal o completo.

Espacio libre

Mantén siempre el espacio libre mínimo de 8 dp en todos los lados del botón Agregar a la Billetera de Google. Asegúrate de que el espacio libre nunca se rompa con gráficos o texto.

Los botones para agregar a la Billetera de Google deben tener 8 dp de espacio en todos los lados.

Altura mínima

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

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

Sugerencias y precauciones

Lo que debes hacer Lo que no se debe hacer
Sugerencia: Utiliza solo los botones Agregar a la Billetera de Google que proporciona Google. No:puedes crear tus propios botones Agregar a la Billetera de Google o modificar la fuente, el color, el radio del botón o el relleno dentro del botón de cualquier manera.
Sugerencia: Usa el mismo estilo de botón en todo el sitio. No; haz que los botones Agregar a la Billetera de Google sean más pequeños que otros.
Sugerencia: Asegúrate de que el tamaño de los botones Agregar a la Billetera de Google sea igual o mayor que el de otros botones. No:altera el color del botón.
Sugerencia: Mantén la misma proporción de botón cuando cambies el tamaño de los botones Agregar a la Billetera de Google. No:ajusta el botón libremente.
Sugerencia: Usa la versión localizada de los botones. No:Crea tu propia versión localizada del botón.

Prácticas recomendadas para la ubicación de botones

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

Lealtad, tarjetas de regalo, ofertas

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 incluirlo en correos electrónicos relevantes.

Tarjeta de regalo     Tarjeta de lealtad para café

Uso del nombre del producto de Google Wallet en el texto

Puedes usar texto para indicarle al usuario que su tarjeta de lealtad está guardada en su dispositivo.

Usar mayúsculas para las letras “G” y “W”

Utiliza siempre una "G" mayúscula y una W mayúscula seguida de letras minúsculas para hacer referencia a Google Wallet. No escribas con mayúscula el nombre completo "Google Wallet" a menos que coincida con el estilo tipográfico de la IU.

No abrevie Google Wallet

Escribe siempre las palabras "Google" y "Wallet".

Haga coincidir el estilo en su IU

Establece Google Wallet en la misma fuente y en el mismo estilo tipográfico que el resto del texto en la IU. No imite el estilo tipográfico de Google.

Usar siempre la versión localizada de "Google Wallet"

Escribe siempre &Google Wallet en la copia localizada proporcionada.

Diseñar

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 a fin de 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 afectan estas opciones al botón Agregar a la Billetera de Google.

Hero image

El campo class.heroImage aparece como un banner de ancho completo en el cuerpo de la tarjeta.

Lineamientos sobre las imágenes hero

La siguiente es una lista de recomendaciones de la interfaz de usuario para las hero images:

Lineamientos Descripción
Tipo de archivo preferido PNG
Tamaño recomendado

1032 x 336 px

Utilice imágenes anchas y rectangulares.

Use una imagen con un fondo de color para obtener mejores resultados.

Relación de aspecto 3:1 o mayor
Tamaño de visualización

El ancho completo de la tarjeta y la altura proporcional.

El tamaño de la pantalla debe ser de 3 a 1, o bien más ancho.

Imágenes de ancho completo

El campo *.imageModulesData.mainImage de una clase o de un objeto aparece como una imagen de ancho completo en un pase.

Lineamientos de imagen de ancho total

La siguiente es una lista de recomendaciones de la interfaz de usuario para imágenes de ancho completo:

Lineamientos Descripción
Tipo de archivo preferido PNG
Tamaño mínimo

1860 px de ancho y altura variable.

Utilice imágenes anchas y rectangulares.

Use una imagen con un fondo de color para obtener mejores resultados.

Relación de aspecto Variable
Tamaño de visualización

El ancho completo de la plantilla y la altura proporcional.

El tamaño de la pantalla debe ser de 3 a 1, o bien más ancho.
Use el mismo esquema de colores que usa para su logotipo.

Imágenes de códigos de barras

Algunas verticales permiten el uso de imágenes encima y debajo del código de barras.

Imágenes sobre el código de barras

La siguiente es una lista de recomendaciones de la interfaz de usuario para las imágenes que se encuentran encima del código de barras:

Guideline 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 presentes. Esto les permite estar uno al lado del otro.

Si una imagen es cuadrada y la otra es un rectángulo, las imágenes deben ser de 80 x 80 px y de 780 x 80 px.

Relación de aspecto

Sin restricciones. Para obtener una altura de 20 dp como máximo de una sola imagen, usa una relación de aspecto de 20:1.

Si solo deseas una imagen arriba del código de barras, toma el ancho completo (sin incluir padding). La imagen debe tener 1600 x 80 px.

Tamaño máximo de la pantalla (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 debajo del código de barras:

Guideline 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 80-1,600 px de ancho.

Si el cuadrado es de 80 x 80 px

Si es rectangular, debe ser de 1600 x 80 px.

Proporción 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 (no incluye padding), debe ser de 1,600 x 80 px.
El tamaño máximo de la pantalla 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. La siguiente tabla contiene lineamientos para la cantidad de módulos que debes incluir en tus clases y objetos a fin de asegurarte de que tus tarjetas se muestren correctamente en la aplicación Google Wallet.

Lineamientos 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 de usuario, como “Nombre del miembro” y “Número de membresía”.

linksModuleData

Usa hasta cuatro URI de linksModuleData en total en tu clase o en los objetos que crees.

Es posible que tengas dos URI linksModuleData en tu clase: uno para el URI de tu sitio web y otro para el número de teléfono del centro de ayuda. Dos URI de linksModuleData en tu objeto pueden 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 personalizable y de miembros, y aparece en la vista expandida. Usa este módulo para almacenar información como fechas de vencimiento, saldos de segundos puntos o saldos de valores almacenados.

linksModuleData

El módulo de vínculos contiene URI para páginas web, números de teléfono y direcciones de correo electrónico. La siguiente es una lista de recomendaciones de la interfaz de usuario para el módulo de vínculos:

Guideline Ejemplo de configuración 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 el consumidor toque el vínculo y navegue al sitio web o vea la ubicación en Google Maps. Este prefijo también genera un ícono de un vínculo o mapa delante de la descripción de tu tarjeta. 'uri': 'http://maps.google.com/?q=google' Un indicador de pin para una ubicación en el mapa.
'uri': 'http://developer.google.com/wallet/' Un indicador de globo terráqueo para un sitio web.
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 el ícono de un teléfono frente a la descripción de texto de la tarjeta. 'uri': 'tel:6505555555' Un indicador de teléfono para un vínculo telefónico.
Usa el prefijo mailto: cuando definas una dirección de correo electrónico. Este prefijo permite que el consumidor toque el vínculo para enviar un correo electrónico a la dirección. Este prefijo también crea el ícono de un correo electrónico frente a la descripción de texto de la tarjeta. 'uri': 'mailto:jonsmith@email.com' Un indicador de correo electrónico de un vínculo para enviar un correo electrónico.

Encabezados, etiquetas y nombres

Escribe títulos, etiquetas y nombres en mayúsculas para que cada palabra comience con mayúscula.

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 haces referencia en la clase también debe cumplir con estas políticas.

Posición de datos de la plataforma del socio

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 o el sitio web de la app en la propiedad linksModuleData.* del objeto o la clase de Pass. Esto le permite al usuario navegar hasta tu plataforma desde el pase, que aparece en Google Wallet. Para ver cómo se procesa, ve a las secciones de diseño de las verticales de pase.