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
Tema | Botones | Descripción |
---|---|---|
Claro | Botón rectangular de Acceder con Google estándar, grande y con temática clara | |
Oscuro | Botón de Acceder con Google con forma de píldora estándar de tema oscuro |
Modos de botones compatibles
Claro |
|
|
Oscuro |
|
|
Neutral |
|
|
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 |
Relleno: #FFFFFF Trazo: #747775 | 1 px | dentro de Fuente: #1F1F1F | Roboto Medium | 14/20 |
|
Oscuro |
Relleno: #131314 Trazo: #8E918F | 1 px | dentro de Fuente: #E3E3E3 | Roboto Medium | 14/20 |
|
Neutral |
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 | |
iOS | |
Web (dispositivos móviles y computadoras de escritorio) | |
Reference |
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.
Diseño incorrecto del botón
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. |
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. |
Qué debes hacer Usa el color de marca de Google para el ícono de Google en los modos oscuro, claro y neutro. |
Qué no debes hacer Usa versiones monocromáticas de la "G" de Google para el botón. |
Qué debes hacer Elige el botón en el modo de color correcto para mayor importancia y accesibilidad. |
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. |
Qué debes hacer Quédate con la "G" de Google con tamaño y padding fijos. |
Qué no debes hacer Crea tu propio ícono para el botón. |
Qué debes hacer Si es necesario, usa la "G" de Google sola para el botón de acción. |
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).