登入品牌規範

透過基本 profileemail 範圍使用 Google 登入功能,並在行動裝置或網頁應用程式中加入下列標準按鈕:

樣式 按鈕 圖片檔
淺色

加入 PNG、SVG、EPS 和 Sketch 格式的登入按鈕,而且支援多種解析度。包括基本、懸停和按下狀態。

深色

下載檔案、SSV 和 EPS 檔案皆包含在下載檔案中,方便您翻譯「登入」或「登入」文字。這些檔案需要 Roboto 字型

如果您要求額外範圍,請使用漸進式授權 (AndroidiOS網路) 來提示,這樣只會在使用者開始與需要 API 存取權的功能互動時,才提示使用者授權。

如要要求 YouTube 範圍,請使用 YouTube 按鈕

如果您使用 Google Play 遊戲服務,請一併參閱 Google Play 遊戲服務品牌宣傳指南

Google 登入和其他第三方登入選項

等號

Google 登入按鈕最醒目的位置必須與其他第三方登入選項顯眼。舉例來說,按鈕的大小應大致相同,且視覺高度也差不多。

配合應用程式的樣式

強烈建議您使用標準 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 品牌特徵第三方使用指南)。