Linee guida per il branding di Accedi con Google

Questo documento fornisce linee guida su come visualizzare un pulsante Accedi con Google sul tuo sito web o nella tua app. Il sito web o l'app deve seguire queste linee guida per completare la procedura di verifica dell'app.

I nostri SDK per i Servizi di identità Google mostrano un pulsante Accedi con Google che ottempera sempre alle linee guida per il branding di Google più recenti. Sono il modo consigliato per mostrare il pulsante Accedi con Google sul tuo sito web o nella tua app. Nei casi in cui tu non possa utilizzare l'opzione per il pulsante visualizzato da Google, puoi visualizzare un elemento pulsante HTML, scaricare i nostri asset di branding preapprovati o creare un pulsante Accedi con Google personalizzato.

Visualizza elemento pulsante HTML

Forniamo un configuratore HTML che ti consente di personalizzare l'aspetto del pulsante Accedi con Google. Successivamente, puoi scaricare uno snippet HTML e CSS che mostrerà il pulsante sul tuo sito web.

Genera elemento pulsante HTML

  
  

Scarica le icone del brand preapprovate

In alternativa all'utilizzo di un pulsante immagine personalizzato, puoi scaricare i nostri pulsanti Accedi con Google preapprovati, disponibili in formato PNG e SVG per tutte le piattaforme.

I pulsanti immagine forniti sono disponibili in modalità standard e icona e includono le seguenti opzioni di stile:

  • Tema : Chiaro, Neutro, Scuro
  • Forma : rettangolare, a sfere
Di seguito sono riportati due esempi:
Tema Pulsanti Descrizione
Leggero Esempio di pulsante Accedi con Google rettangolare standard a tema chiaro Pulsante Accedi con Google standard rettangolare a tema chiaro
Scuro Esempio di pulsante Accedi con Google standard a forma di pillola con tema scuro Pulsante Accedi con Google a forma di pillola standard con tema scuro
Scarica le icone del brand preapprovate

Modalità pulsante supportate

Leggero

pulsante Accedi con Google a tema chiaro

pulsante Accedi con Google a forma di quadrato a tema chiaro

pulsante Accedi con Google a forma di pillola a tema chiaro

pulsante Accedi con Google a forma di rettangolo con tema chiaro

Scuro

pulsante Accedi con Google di forma rotonda con tema scuro

pulsante Accedi con Google a forma di quadrato con tema scuro

pulsante Accedi con Google a forma di pillola con tema scuro

pulsante Accedi con Google a forma di rettangolo con tema scuro

Normale

pulsante Accedi con Google con tema neutro

pulsante Accedi con Google a forma di quadrato con tema neutro

pulsante Accedi con Google a forma di pillola con tema neutro

Pulsante Accedi con Google a forma di rettangolo con tema neutro

Creare un pulsante Accedi con Google personalizzato

Ti consigliamo vivamente di utilizzare i nostri SDK dei Servizi di identità Google o di qualsiasi altra opzione descritta nelle sezioni precedenti, poiché consentono agli utenti di Google di identificare più facilmente il brand Google. Più facilmente gli utenti riescono a identificare un pulsante di azione, maggiori sono le probabilità che vi interagiscano.

Se, tuttavia, devi adattare il pulsante in modo che si adatti al design dell'app, rispetta le seguenti linee guida.

Dimensioni

Puoi ridimensionare il pulsante in base alle esigenze per dispositivi e dimensioni dello schermo diverse, ma devi mantenere le proporzioni in modo che il logo Google non sia allungato.

Testo

Per incoraggiare gli utenti a fare clic sul pulsante, consigliamo il testo dell'invito all'azione "Accedi con Google", "Registrati con Google" o "Continua con Google". Dovrebbe essere chiaro all'utente che sta eseguendo l'accesso all'app o all'app con le sue credenziali Google, non sta registrando o registrando un Account Google nell'app.

Colore

Di seguito è mostrato lo stato predefinito dei pulsanti. Il pulsante deve includere sempre il colore standard della "G" di Google.

Tema Esempio
Leggero pulsante Accedi con Google a forma di pillola a tema chiaro Riempimento: #FFFFFF
Tratto: #747775 | 1 px | interno
Carattere: #1F1F1F | Roboto Medium | 14/20
Scuro pulsante Accedi con Google a forma di pillola con tema scuro Riempimento: #131314
Tratto: #8E918F | 1 px | interno
Carattere: #E3E3E3 | Roboto Medium | 14/20
Normale pulsante Accedi con Google a forma di pillola con tema neutro Fill: #F2F2F2
Tratto: nessun tratto
Carattere: #1F1F1F | Roboto Medium | 14/20

Carattere

Il carattere dei pulsanti è Roboto Medium, un carattere TrueType. Per l'installazione, scarica il carattere Roboto e decomprimi il bundle di download. Su Mac, fai doppio clic su Roboto-Medium.ttf, quindi su "Installa carattere". Su Windows, trascina il file nella cartella "Computer" > "Windows" > "Caratteri".

Spaziatura interna

Android Spaziatura interna sinistra di 12 px prima del logo Google, 10 px a destra dopo il logo Google e 12 px a destra dopo il testo Accedi con Google
iOS Spaziatura interna sinistra di 16 px prima del logo Google, Spaziatura interna a destra di 12 px dopo il logo Google e Spaziatura interna a destra di 16 px dopo il testo Accedi con Google
Web (dispositivi mobili + computer) Spaziatura interna sinistra di 12 px prima del logo Google, 10 px a destra dopo il logo Google e 12 px a destra dopo il testo Accedi con Google
Riferimento Riferimento per la spaziatura interna dei pulsanti Accedi con Google

Logo di Google nel pulsante "Accedi con Google"

Non è possibile modificare le dimensioni o il colore del logo "G" di Google indipendentemente dal testo. Deve essere la versione a colori standard ed essere su uno sfondo bianco. Se devi creare il tuo logo Google di dimensioni personalizzate, inizia con una delle dimensioni del logo incluse nel pacchetto di download.

Icona G di Google

Design non corretto dei pulsanti

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa fare

Segui le linee guida per la progettazione di Google Material 3 per i confini e la combinazione di colori dei pulsanti.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa non fare

Utilizza l'icona o il logo Google senza il bordo del pulsante e senza testo per indicare l'azione dell'utente.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa fare

Utilizza il colore del brand Google per l'icona di Google per le modalità Buio, Luce e neutro.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa non fare

Utilizza versioni monocromatiche della "G" di Google per il pulsante.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa fare

Scegli il pulsante nella modalità colore giusta per l'accessibilità e la stessa evidenza.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa non fare

Posiziona l'icona "G" di Google nel colore standard su uno sfondo colorato diverso da chiaro, scuro o neutro.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa fare

Attieniti alla "G" di Google, con spaziatura interna e dimensioni fisse.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa non fare

Crea la tua icona per il pulsante.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa fare

Utilizza la "G" di Google da sola come pulsante di azione, se necessario.

Esempio di immagine di cosa da fare e da fare in relazione alla strategia di branding
Cosa non fare

Utilizza il termine "Google" da solo nel pulsante per rappresentare l'azione di Accedi con Google.

Best practice per il branding Accedi con Google

Accedi con Google e altre opzioni di accesso di terze parti

Il pulsante Accedi con Google deve essere mostrato in modo ben visibile quanto altre opzioni di accesso di terze parti. Ad esempio, i pulsanti devono avere all'incirca le stesse dimensioni e un peso visivo simile.

Altre linee guida

Se richiedi ambiti aggiuntivi, fallo con autorizzazione incrementale (Android, iOS, web), chiedendo all'utente l'autorizzazione solo quando inizia a interagire con una funzionalità che richiede l'accesso all'API.

Se richiedi ambiti di YouTube, utilizza un pulsante YouTube.

Se utilizzi i servizi per i giochi di Google Play, consulta anche le linee guida per il branding dei servizi per i giochi di Google Play.

L'utilizzo dei brand Google in modi non espressamente citati in questo documento non è consentito senza previo consenso scritto di Google (per ulteriori informazioni, consulta le Linee guida relative all'utilizzo degli Elementi distintivi del brand Google da parte di terze parti).