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 metodo consigliato per mostrare 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 visualizzare un elemento pulsante HTML, scaricare i nostri asset di branding preapprovati 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, pillola
| Tema | Pulsanti | Descrizione |
|---|---|---|
| Chiaro |
|
Pulsante Accedi con Google rettangolare standard di grandi dimensioni con tema chiaro |
| Scuro |
|
Pulsante Accedi con Google standard a forma di pillola con tema scuro |
Modalità dei pulsanti supportate
| Chiaro |
|
|
| Scuro |
|
|
| Neutro |
|
|
Crea 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 dell'invito all'azione "Accedi con Google", "Registrati con Google" o "Continua con Google". L'utente deve essere consapevole di accedere alla tua app o di registrarsi alla tua app con le sue credenziali di Google, non di creare un Account Google sulla 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 |
|
Riempimento: #FFFFFF Tratto: #747775 | 1px | 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, quindi fai clic su "Installa carattere". Su Windows, trascina il file nella cartella "Computer" > "Windows" > "Caratteri".
Spaziatura interna
| Android |
|
| iOS |
|
| Web (dispositivi mobili e computer) |
|
| Riferimento |
|
Logo Google nel pulsante "Accedi con Google"
Non puoi modificare le dimensioni o il colore del logo G di Google indipendentemente dal testo. 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 Google da solo, senza il bordo del pulsante e senza testo per indicare l'azione dell'utente. |
 Azione consigliata Utilizza il colore del brand Google per l'icona Google per le modalità Buio, Luce e Neutra. |
 Sconsigliamo di 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. |
 Sconsigliamo di Posiziona l'icona "G" di Google con colore standard su uno sfondo di un colore diverso da chiaro, scuro o neutro. |
 Azione consigliata 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 attivare il pulsante di azione. |
 Non Utilizza il termine "Google" da solo nel pulsante per rappresentare l'azione di Accedi 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 all'incirca le stesse dimensioni e avere un peso 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).