Lineamientos de desarrollo de la marca de Acceder con Google

En este documento, se proporcionan lineamientos para mostrar un botón de Acceder con Google en tu sitio web o app. Tu sitio web o app debe seguir estos lineamientos para completar el proceso de verificación de app.

Nuestros SDK de los servicios de identidad de Google procesan un botón de Acceder con Google que siempre cumple con los lineamientos de desarrollo de la marca de Google más recientes. Son la forma recomendada de mostrar el botón Acceder con Google en tu sitio web o app. En los casos en que no puedas usar la opción de botón renderizado por Google, puedes renderizar un elemento de botón HTML, descargar nuestros activos de desarrollo de la marca preaprobados o, de manera opcional, crear un botón personalizado de Acceder con Google.

Elemento del botón HTML de renderización

Proporcionamos un configurador de HTML que te permite personalizar el aspecto del botón Acceder con Google. Luego, puedes descargar un fragmento de HTML y CSS que renderizará el botón en tu sitio web.

Elemento de botón Generar HTML

  
  

Descarga íconos de marca previamente aprobados

Como alternativa al uso de un botón de imagen personalizada, puedes descargar nuestros botones Acceder con Google preaprobados que se proporcionan en formatos PNG y SVG para todas las plataformas.

Los botones de imágenes proporcionados están disponibles en los modos estándar y de ícono, e incluyen las siguientes opciones de estilo:

  • Tema : Claro, neutro, oscuro
  • Forma : Rectangular, angular
A continuación, se incluyen dos ejemplos:
Tema Botones Descripción
Claro Ejemplo del botón rectangular de Acceder con Google estándar, grande y con tema claro Botón rectangular de Acceder con Google estándar, grande y con temática clara
Oscuro Ejemplo de botón de Acceder con Google con forma de píldora estándar de tema oscuro Botón de Acceder con Google con forma de píldora estándar de tema oscuro
Descarga íconos de marca preaprobados

Modos de botones compatibles

Claro

botón redondo de tema claro para acceder con Google

Botón de Acceder con Google con tema claro

botón de Acceder con Google con tema claro

Botón de Acceder con Google con tema claro y forma rectangular

Oscuro

botón redondo de tema oscuro para Acceder con Google

botón de Acceder con Google de tema oscuro con forma de cuadrado

botón de Acceder con Google con tema oscuro

botón de Acceder con Google con tema oscuro y forma rectangular

Neutral

Botón de Acceder con Google con tema neutro redondo

Botón de Acceder con Google con tema neutro y forma cuadrada

Botón de Acceder con Google con un tema neutro en forma de píldora

Botón de Acceder con Google con tema neutro rectangular

Crea un botón personalizado de Acceder con Google

Se recomienda usar nuestros SDK de los servicios de identidad de Google o cualquiera de las otras opciones que se trataron en las secciones anteriores, ya que permiten que los usuarios de Google identifiquen la marca de Google con mayor facilidad. Cuanto más fácil sea que los usuarios identifiquen un botón de acción, más probabilidades habrá de que interactúen con él.

Sin embargo, si necesitas adaptar el botón para que coincida con el diseño de tu app, sigue estos lineamientos.

Tamaño

Puedes ajustar el botón según sea necesario para diferentes dispositivos y tamaños de pantalla, pero debes conservar la relación de aspecto para que el logotipo de Google no se extienda.

Texto

Para motivar a los usuarios a hacer clic en el botón, recomendamos usar el texto del llamado a la acción "Acceder con Google", "Registrarse con Google" o "Continuar con Google". Debe quedar claro para el usuario que accede a tu app o se registra en ella con sus credenciales de Google, no que accede a una Cuenta de Google en tu app ni que se registra para obtener una.

Color

A continuación, se muestra el estado predeterminado de los botones. El botón siempre debe incluir el color estándar de la "G" de Google.

Tema Ejemplo
Claro botón de Acceder con Google con tema claro Relleno: #FFFFFF
Trazo: #747775 | 1 px | dentro de
Fuente: #1F1F1F | Roboto Medium | 14/20
Oscuro botón de Acceder con Google con tema oscuro Relleno: #131314
Trazo: #8E918F | 1 px | dentro de
Fuente: #E3E3E3 | Roboto Medium | 14/20
Neutral Botón de Acceder con Google con un tema neutro en forma de píldora Relleno: #F2F2F2
Trazo: Sin trazo
Fuente: #1F1F1F | Roboto Medium | 14/20

Fuente

La fuente del botón es Roboto Medium, una fuente de TrueType. Para instalarla, primero descarga la fuente Roboto y descomprime el paquete de descarga. En Mac, haz doble clic en Roboto-Medium.ttf y, luego, en "Instalar fuente". En Windows, arrastra el archivo a "Mi computadora" > "Windows" > carpeta "Fuentes".

Padding

Android Padding izquierdo de 12 px antes del logotipo de Google, padding derecho de 10 px después del logotipo de Google y padding derecho de 12 px después del texto de Acceder con Google
iOS Padding izquierdo de 16 px antes del logotipo de Google, padding derecho de 12 px después del logotipo de Google y padding derecho de 16 px después del texto de Acceder con Google
Web (dispositivos móviles y computadoras de escritorio) Padding izquierdo de 12 px antes del logotipo de Google, padding derecho de 10 px después del logotipo de Google y padding derecho de 12 px después del texto de Acceder con Google
Reference Referencia de padding del botón de Acceder con Google

Logotipo de Google en el botón “Acceder con Google”

Más allá del texto, no puedes cambiar el tamaño ni el color del logotipo de la "G" de Google. Debe ser la versión en color estándar y aparecer sobre un fondo blanco. Si necesitas crear tu propio logotipo de Google de tamaño personalizado, comienza con cualquiera de los tamaños de logotipo incluidos en el paquete de descarga.

Ícono de la G de Google

Diseño incorrecto del botón

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué debes hacer

Usa los lineamientos de diseño de Google Material 3 para el límite de los botones y el esquema de colores.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué no debes hacer

Usa el ícono o logotipo de Google solo, sin el límite del botón y sin texto para indicar la acción del usuario.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué debes hacer

Usa el color de marca de Google para el ícono de Google en los modos oscuro, claro y neutro.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué no debes hacer

Usa versiones monocromáticas de la "G" de Google para el botón.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué debes hacer

Elige el botón en el modo de color correcto para mayor importancia y accesibilidad.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué no debes hacer

Coloca el ícono de la “G” de color estándar de Google sobre un fondo de color que no sea claro, oscuro o neutro.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué debes hacer

Quédate con la "G" de Google con tamaño y padding fijos.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué no debes hacer

Crea tu propio ícono para el botón.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué debes hacer

Si es necesario, usa la "G" de Google sola para el botón de acción.

muestra de imagen de lo que se debe y hay que hacer durante el desarrollo de la marca
Qué no debes hacer

Usar solo el término "Google" en el botón para representar la acción de Acceder con Google

Prácticas recomendadas de desarrollo de la marca de Acceder con Google

Acceder con Google y otras opciones de acceso de terceros

El botón Acceder con Google debe mostrarse al menos con la misma importancia que las otras opciones de acceso de terceros. Por ejemplo, los botones deben tener aproximadamente el mismo tamaño y tener un peso visual similar.

Otros lineamientos

Si solicitas alcances adicionales, hazlo con la autorización incremental (Android, iOS o Web), y solo pídele al usuario la autorización cuando comience a interactuar con una función que requiere acceso a la API.

Si solicitas permisos para YouTube, usa un botón de YouTube.

Si usas los Servicios de juego de Google Play, consulta también los lineamientos para el desarrollo de la marca de los Servicios de juego de Google Play.

No se permite el uso de las marcas de Google de formas que no se mencionen expresamente en este documento y sin el consentimiento previo por escrito de Google (consulta los Lineamientos para el uso de las características de marca de Google por parte de terceros para obtener más información).