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
| Tema | Pulsanti | Descrizione |
|---|---|---|
| Leggero |
|
Pulsante Accedi con Google standard rettangolare a tema chiaro |
| Scuro |
|
Pulsante Accedi con Google a forma di pillola standard con tema scuro |
Modalità pulsante supportate
| Leggero |
|
|
| Scuro |
|
|
| Normale |
|
|
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 |
|
Riempimento: #FFFFFF Tratto: #747775 | 1 px | interno Carattere: #1F1F1F | Roboto Medium | 14/20 |
| Scuro |
|
Riempimento: #131314 Tratto: #8E918F | 1 px | interno Carattere: #E3E3E3 | Roboto Medium | 14/20 |
| Normale |
|
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 |
|
| iOS |
|
| Web (dispositivi mobili + computer) |
|
| Riferimento |
|
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.
Design non corretto dei pulsanti
 Cosa fare Segui le linee guida per la progettazione di Google Material 3 per i confini e la combinazione di colori dei pulsanti. |
 Cosa non fare Utilizza l'icona o il logo Google senza il bordo del pulsante e senza testo per indicare l'azione dell'utente. |
 Cosa fare Utilizza il colore del brand Google per l'icona di Google per le modalità Buio, Luce e neutro. |
 Cosa non fare Utilizza versioni monocromatiche della "G" di Google per il pulsante. |
 Cosa fare Scegli il pulsante nella modalità colore giusta per l'accessibilità e la stessa evidenza. |
 Cosa non fare Posiziona l'icona "G" di Google nel colore standard su uno sfondo colorato diverso da chiaro, scuro o neutro. |
 Cosa fare Attieniti alla "G" di Google, con spaziatura interna e dimensioni fisse. |
 Cosa non fare Crea la tua icona per il pulsante. |
 Cosa fare Utilizza la "G" di Google da sola come pulsante di azione, se necessario. |
 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).