Questo documento fornisce linee guida su come visualizzare un pulsante Accedi con Google sul tuo sito web o nella tua app. Il tuo sito web o la tua app devono rispettare queste linee guida per completare la procedura di verifica dell'app.
I nostri SDK Servizi di identità Google visualizzano un pulsante Accedi con Google che rispetta sempre le linee guida per il branding di Google più recenti. Sono il modo consigliato per visualizzare il pulsante Accedi con Google sul tuo sito web o nella tua app. Se non riesci a utilizzare l'opzione del pulsante visualizzato da Google, puoi eseguire il rendering di un elemento del pulsante HTML, scaricare le nostre risorse di branding preapprovate o, facoltativamente, creare un pulsante Accedi con Google personalizzato.
Esegui il rendering dell'elemento pulsante HTML
Forniamo un configuratore HTML che ti consente di personalizzare l'aspetto del pulsante Accedi con Google. Puoi quindi scaricare uno snippet HTML e CSS che mostrerà il pulsante sul tuo sito web.Genera elemento pulsante HTML
Scarica le icone di brand preapprovate
In alternativa all'utilizzo di un pulsante con immagine personalizzata, puoi scaricare i nostri pulsanti di Accedi con Google preapprovati, disponibili nei formati PNG e SVG per tutte le piattaforme.I pulsanti delle immagini forniti sono disponibili nelle modalità standard e icona e includono le seguenti opzioni di stile:
- Tema : Chiaro, Neutro, Scuro
- Forma : rettangolare, ovale
| Tema | Pulsanti | Descrizione |
|---|---|---|
| Chiaro |
|
Pulsante Accedi con Google rettangolare standard di grandi dimensioni con tema chiaro |
| Scuro |
|
Pulsante Accedi con Google a forma di pillola standard con tema scuro |
Modalità dei pulsanti supportate
| Chiaro |
|
|
| Scuro |
|
|
| Neutro |
|
|
Creare un pulsante Accedi con Google personalizzato
Ti consigliamo vivamente di utilizzare i nostri SDK di Google Identity Services o una delle altre opzioni descritte nelle sezioni precedenti, in quanto consente agli utenti di Google di identificare più facilmente il brand Google. Quanto più facilmente gli utenti possono identificare un pulsante di azione, più è probabile che interagiscano con esso.
Tuttavia, se devi adattare il pulsante al design dell'app, rispetta le seguenti linee guida.
Dimensioni
Puoi ridimensionare il pulsante in base alle esigenze per dispositivi e dimensioni dello schermo diversi, ma devi mantenere le proporzioni in modo che il logo di Google non venga allungato.
Testo
Per incoraggiare gli utenti a fare clic sul pulsante, consigliamo il testo di invito all'azione "Accedi con Google", "Registrati con Google" o "Continua con Google". L'utente deve essere consapevole di aver eseguito l'accesso alla tua app o di averla registrata con le sue credenziali Google, non di aver creato o registrato un Account Google nella tua app.
Colore
Di seguito è riportato lo stato predefinito dei pulsanti. Il pulsante deve sempre includere il colore standard della "G" di Google.
| Tema | Esempio | |
|---|---|---|
| Chiaro |
|
Colore di riempimento: #FFFFFF Spessore: #747775 | 1 px | all'interno Carattere: #1F1F1F | Roboto Medium | 14/20 |
| Scuro |
|
Colore di riempimento: #131314 Tratto: #8E918F | 1 px | all'interno Carattere: #E3E3E3 | Roboto Medium | 14/20 |
| Neutro |
|
Riempimento: #F2F2F2 Tratto: nessun tratto Carattere: #1F1F1F | Roboto Medium | 14/20 |
Carattere
Il carattere del pulsante è Roboto Medium, un carattere TrueType. Per installarlo, scarica il carattere Roboto e decomprimi il bundle di download. Su Mac, fai doppio clic su Roboto-Medium.ttf e poi su "Installa carattere". Su Windows, trascina il file nella cartella "Computer" > "Windows" > "Caratteri".
Spaziatura interna
| Android |
|
| iOS |
|
| Web (dispositivi mobili e computer) |
|
| Riferimento |
|
Logo di Google nel pulsante "Accedi con Google"
Indipendentemente dal testo, non puoi modificare le dimensioni o il colore del logo "G" di Google. Deve essere la versione a colori standard e apparire su uno sfondo bianco. Se devi creare il tuo logo Google personalizzato, inizia con una delle dimensioni del logo incluse nel pacchetto di download.
Design del pulsante non corretto
 Azione Utilizza le linee guida di progettazione di Google Material 3 per il confine e la combinazione di colori dei pulsanti. |
 Non Utilizza l'icona o il logo di Google da solo, senza il confine del pulsante e senza testo per indicare l'azione dell'utente. |
 Azione Utilizza il colore del brand Google per l'icona Google per le modalità Buio, Luce e Neutra. |
 Non Utilizza le versioni monocromatiche della "G" di Google per il pulsante. |
 Azione Scegli il pulsante nella modalità di colore corretta per l'accessibilità e la stessa evidenza. |
 Non Inserisci l'icona "G" di Google di colore standard su uno sfondo colorato diverso da chiaro, scuro o neutro. |
 Azione Utilizza la "G" di Google con spaziatura e dimensioni fisse. |
 Non Crea la tua icona per il pulsante. |
 Azione Se necessario, utilizza la "G" di Google da sola per il pulsante di azione. |
 Non Utilizza il termine "Google" da solo nel pulsante per rappresentare l'azione di accesso con Google. |
Best practice per il branding di Accedi con Google
Accedi con Google e altre opzioni di accesso di terze parti
Il pulsante Accedi con Google deve essere visualizzato con la stessa evidenza delle altre opzioni di accesso di terze parti. Ad esempio, i pulsanti devono avere dimensioni approssimativamente uguali e un impatto visivo simile.
Altre linee guida
Se richiedi ambiti aggiuntivi, fallo con l'autorizzazione incrementale (Android, iOS, web), chiedendo all'utente di confermare l'autorizzazione solo quando inizia a interagire con una funzionalità che richiede l'accesso all'API.
Se richiedi gli ambiti di YouTube, utilizza un pulsante di 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 previa autorizzazione scritta di Google (per ulteriori informazioni, consulta le linee guida relative all'utilizzo degli elementi distintivi del brand Google da parte di terze parti).