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 - PNGTodos 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 |
|---|---|
|
|
| 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.
Altura mínima
Todos 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.
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.
Logotipos
Google Wallet enmascara el logotipo de manera circular.
Lineamientos sobre las imágenes del logotipo
La siguiente es una lista de recomendaciones de la interfaz de usuario para las imágenes de logotipos:
| Lineamientos | 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 en píxeles | Escalar al tamaño del dispositivo |
| Máscara circular con logotipo |
Su logotipo está enmascarado para que quepa en un diseño circular. Asegúrate de que tu logotipo se ajuste al área segura. No enmascares tu logotipo con anterioridad. Deje el logotipo en un cuadrado con un fondo con sangrado completo. El logotipo debe tener un margen del 15% para que no se corte cuando se enmascara. 
|
Color de fondo de la tarjeta
Puedes configurar 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.
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. 
|
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.
|
| 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
Un |
linksModuleData
|
Usa hasta cuatro URI de
Es posible que tengas dos URI |
textModulesData
|
Usa hasta dos campos
Es posible que tengas un URI |
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'
|
|
'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 el ícono de un teléfono frente a la descripción de texto de la tarjeta.
|
'uri': 'tel:6505555555'
|
|
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'
|
|
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.