透過基本 profile
或 email
範圍使用 Google 登入功能,並在行動裝置或網頁應用程式中加入下列標準按鈕:
樣式 | 按鈕 | 圖片檔 |
---|---|---|
淺色 |
![]() |
加入 PNG、SVG、EPS 和 Sketch 格式的登入按鈕,而且支援多種解析度。包括基本、懸停和按下狀態。 |
深色 |
![]() |
下載檔案、SSV 和 EPS 檔案皆包含在下載檔案中,方便您翻譯「登入」或「登入」文字。這些檔案需要 Roboto 字型。
如果您要求額外範圍,請使用漸進式授權 (Android、iOS、網路) 來提示,這樣只會在使用者開始與需要 API 存取權的功能互動時,才提示使用者授權。
如要要求 YouTube 範圍,請使用 YouTube 按鈕。
如果您使用 Google Play 遊戲服務,請一併參閱 Google Play 遊戲服務品牌宣傳指南。
Google 登入和其他第三方登入選項
等號
Google 登入按鈕最醒目的位置必須與其他第三方登入選項顯眼。舉例來說,按鈕的大小應大致相同,且視覺高度也差不多。
配合應用程式的樣式
強烈建議您使用標準 Google 登入按鈕,因為 Google 使用者能夠更快辨識出 Google 選項。如果您需要調整按鈕以符合應用程式設計,或翻譯「登入」或「登入」文字,請遵守以下規範。
大小
您可以視需求針對不同裝置和螢幕大小縮放按鈕,但必須保持長寬比,以免 Google 標誌延展。
文字
為鼓勵使用者點擊按鈕,我們建議行動號召文字為「使用 Google 帳戶登入」或「使用 Google 帳戶登入」。使用者應清楚登入,並使用 Google 憑證註冊您的應用程式,而非在應用程式中註冊或註冊 Google 帳戶。
「Google」文字
「在名稱中加入 Google 字樣」一詞可讓文字清楚地傳達這項動作的意思,例如在標題中加上「Google」字樣。例如:
登入身分:
顏色


未按下光源的按鈕顏色為 #FFFFFF (白色)。未按下深色 (藍色) 按鈕的顏色為 #4285F4。按鈕背景可以是藍色或白色,但按鈕一律必須在白色圖塊上加入標準 Google「G」顏色。
字型
按鈕字型是 TrueType 字型的 Roboto 中型。如要安裝,請先下載 Roboto 字型,並將下載套件解壓縮。如果是 Mac,請按兩下 Roboto-Medium.ttf,然後按一下「Install Font」(安裝字型)。在 Windows 上,將檔案拖曳到「My Computer」(我的電腦) >「Windows」>「Fonts」(字型) 資料夾。請勿在按鈕中使用其他字型,除非符合比對應用程式樣式的情況。
如果網站使用自訂登入按鈕,你可以從 Google Fonts 載入 Roboto 字型。
邊框間距
文字左側邊框 (和右側) 的邊框間距應為 8dp。標誌應為 18dp,標誌和按鈕文字之間應有 24dp。

「使用 Google 帳戶登入」按鈕中的 Google 標誌
無論文字為何,您都無法變更 Google「G」標誌的大小或顏色。必須是標準顏色版本,顯示在白色背景中。如果需要自訂尺寸的 Google 標誌,請先從下載套件中的任一標誌尺寸開始。

按鈕設計不正確
![]() ![]() |
請勿在沒有按鈕邊界的情況下使用 Google 圖示或標誌,且不含文字來表示使用者動作。 |
![]() ![]() |
請勿單獨使用 Google 圖示來代表 Google 登入。 |
![]() ![]() |
請勿使用深色或淺色版本的 Google「G」。 |
![]() |
請勿將標準 Google「G」圖示放在彩色背景中, |
![]() |
請勿為按鈕建立自己的圖示。 |
![]() ![]() |
請勿在帶有 Google 圖示的按鈕本身中使用「Google」一詞。 |
未事先獲得 Google 書面同意明確禁止使用 Google 品牌 (詳情請參閱 Google 品牌特徵第三方使用指南)。