Lineamientos de marca

Si desarrollas apps para usuarios ubicados en Rusia, usa los botones “Guardar en el teléfono”, ya que la Billetera de Google no está disponible en esos países. Consulta los lineamientos y recursos relevantes. Si desarrollas apps para usuarios fuera de Rusia, descarga los siguientes recursos y actualiza 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 a fin de que se vean muy bien en la app de la Billetera de Google.

Recursos

Botón Agregar a la Billetera de Google

El botón Agregar a la Billetera de Google se usa cuando les indicas a los usuarios 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 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 su Cuenta de Google. Este botón se puede usar en apps, sitios web o correos electrónicos.

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

Descargar recursos - XML de Android 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 ver un pase o una tarjeta que se hayan guardado anteriormente. Este botón se puede usar en apps, sitios web o correos electrónicos.

Los botones para 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 las comunicaciones de tu sitio, app o correo electrónico deben cumplir con los lineamientos de desarrollo de la marca que se describen en esta página. Algunos ejemplos de estos lineamientos son los siguientes:

  • Es el tamaño relativo a otros botones o elementos similares de la página.
  • No se deben modificar la forma ni el color de los botones
  • espacio en blanco

Botones localizados

Los botones localizados de la Billetera de Google 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 una versión localizada del botón no está disponible en tu mercado, usa la versión en inglés del botón.

Los botones para agregar a la Billetera de Google están disponibles en albanés, árabe, español,

Nombre localizado

Para mayor claridad para el usuario, el nombre del producto de la Billetera de Google está localizado en mercados seleccionados. Si desarrollas apps para usuarios de esos países, usa siempre el nombre localizado que aparece a continuación para la Web, el correo electrónico y los materiales impresos. No crees tu propia versión localizada de "Billetera de Google". Si tu mercado no aparece a continuación, 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 ‟Πок️General”
Hong Kong Google 錢包
Lituania Google Pinigineng
Polonia Portfel Google
Portugal Carteira da Google
Rumania Portofel Google
Eslovaquia Pecfaženka, Google
Taiwán Google 錢包
Türkiye Google Cüzdan
EAU
Ucrania Cuenta de Google
Estados Unidos (español)
*Usa este nombre en EE.UU. si tu IU está en español.
Billetera de Google

del vocab.

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 ser de 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.

Estilo

Los botones para 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 Condensed
Botón principal Agregar a la Billetera de Google Botón Agregar a la Billetera de Google condensado
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 el ancho completo.

espacio en blanco

Siempre mantén un 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 en blanco 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 para agregar a la Billetera de Google deben tener una altura mínima de 48 dp.

Sugerencias y precauciones

Lo que debes hacer Incorrecto
Sugerencia: Usa solo los botones Agregar a la Billetera de Google proporcionados por Google. No debes crear tus propios botones Agregar a la Billetera de Google ni alterar la fuente, el color, el radio de los botones o el padding dentro del botón de ninguna manera.
Sugerencia: Usa el mismo estilo de botón en todo tu sitio. Lo que no debes hacer: Haz que los botones Agregar a la Billetera de Google sean más pequeños que otros botones.
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 otros botones. Lo que no debes hacer:Modifica el color del botón.
Sugerencia: Mantén la misma proporción del botón cuando cambies el tamaño de los botones Agregar a la Billetera de Google. Lo que no debes hacer: Escala el botón libremente.
Sugerencia: Usa la versión localizada proporcionada de los botones. No debes crear 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, las páginas web o los correos electrónicos de la app de confirmación. Consulta las siguientes prácticas recomendadas para guiar el diseño de la IU.

Pases genéricos

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

Uso del nombre del producto de la Billetera de Google en el texto

Puedes usar texto para indicar al usuario que su pase genérico se guardó en su dispositivo.

Escribe la letra “G” y la “W” en mayúscula

Usa siempre una “G” mayúscula y una “W” mayúscula seguida de letras minúsculas para hacer referencia a la Billetera de Google. No uses mayúsculas en el nombre completo “Billetera de Google”, a menos que coincida con el estilo tipográfico de tu IU.

No abrevies la Billetera de Google

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

Adapta las palabras al estilo de tu IU

Configura “Billetera de Google” con la misma fuente y estilo tipográfico que el resto del texto en tu IU. No imites el estilo tipográfico de Google.

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

Escribe siempre "Google Wallet" en la copia localizada proporcionada.

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 significativamente el tamaño del texto y de los botones para implementaciones en dispositivos móviles o casos con requisitos especiales de la IU.

Usa theme para establecer el color de los botones. En la siguiente tabla, se muestra cómo esta configuración afecta el botón Agregar a la Billetera de Google.

Hero images

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

Lineamientos para hero image

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

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

1032 x 336 px

Usa imágenes rectangulares anchas.

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

Relación de aspecto 3:1 o más
Tamaño de visualización

El ancho completo de la tarjeta y la altura proporcional.

El tamaño de la pantalla debe usar una relación de aspecto de 3:1 o más ancha.

Imágenes de ancho total

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

Lineamientos para las imágenes de ancho total

La siguiente es una lista de recomendaciones de 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

Usa imágenes rectangulares anchas.

Usa 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 usar una relación de aspecto de 3:1 o más ancha.
Usa el mismo esquema de colores que usas para el logotipo.

Imágenes de código de barras

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

Imágenes arriba del código de barras

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

Guideline Descripción
Tipo de archivo preferido PNG
Altura máxima

20 dp (en la relación de aspecto máxima)

El tamaño recomendado es de 80 px de alto y 80-780 px de ancho si hay dos imágenes. Esto permite que estén una al lado de la otra.

Si una imagen es cuadrada y la otra es rectangular, las imágenes deben tener 80 × 80 px y 780 × 80 px.

Relación de aspecto

Sin restricciones. Para obtener 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, toma el ancho completo (sin incluir el padding). La imagen debe ser de 1600 x 80 px.

Tamaño máximo de la pantalla (una sola imagen) 20 dp de alto y 400 dp de ancho

Imagen debajo del código de barras

La siguiente es una lista de recomendaciones de interfaz de usuario para la imagen que se encuentra debajo del código de barras:

Guideline Descripción
Tipo de archivo preferido PNG
Altura máxima

20 dp (en la relación de aspecto máxima)

El tamaño recomendado es de 80 px de alto y 80-1600 px de ancho.

Si es cuadrada, debe ser de 80 × 80 px.

Si es rectangular, es de 1600 x 80 px.

Relación de aspecto sin restricciones Para obtener 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), esta 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 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.

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 un máximo de cuatro URIs linksModuleData en total, ya sea en tu clase o en los objetos que crees.

Puedes tener 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.

Puedes tener un URI de textModuleData en tu clase que define los detalles del programa y otro textModulesData en el objeto que define los detalles específicos de la cuenta de usuario.

infoModuleData

InfoModuleData contiene información personalizable y de los 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 links contiene URI de páginas web, números de teléfono y direcciones de correo electrónico. La siguiente es una lista de recomendaciones de 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 al consumidor tocar el vínculo y navegar al sitio web, o bien ver la ubicación en Google Maps. Este prefijo también genera el ícono de un vínculo o mapa delante de la descripción de la tarjeta. 'uri': 'http://maps.google.com/?q=google' Un indicador de pin para la 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' Indicador de teléfono de un vínculo telefónico.
Usa el prefijo mailto: cuando definas una dirección de correo electrónico. Este prefijo permite que un 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 delante de 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 encabezados, etiquetas y nombres en mayúsculas de título, de manera 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 Pagos. El contenido de los sitios web a los que hagas referencia en la clase también debe cumplir con estas políticas.

Colocación de datos en la plataforma de socios

Para garantizar 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 la app o el sitio web en la propiedad linksModuleData.* del objeto o la clase del pase. Esto le permite al usuario navegar 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 Pase.