「使用 Google 帳戶登入」品牌宣傳指南

本文說明如何在網站或應用程式中顯示「使用 Google 帳戶登入」按鈕。您的網站或應用程式必須遵守以下規範,才能完成應用程式驗證程序。

我們的 Google Identity Services SDK 會顯示「使用 Google 帳戶登入」按鈕,以符合最新的 Google 品牌宣傳指南。我們建議您透過此方法,在網站或應用程式中顯示「使用 Google 帳戶登入」按鈕。如果您無法使用 Google 算繪的按鈕選項,可以轉譯 HTML 按鈕元素下載 Google 預先核准的品牌資產,或視需要建立自訂「使用 Google 帳戶登入」按鈕

轉譯 HTML 按鈕元素

我們提供的 HTML 設定檔可讓您自訂「使用 Google 帳戶登入」按鈕的外觀。然後下載可在網站上顯示按鈕的 HTML 和 CSS 程式碼片段。

產生 HTML 按鈕元素

  
  

下載已預先核准的品牌圖示

除了使用自訂圖片按鈕之外,您也可以下載我們預先核准的「使用 Google 帳戶登入」按鈕,這些按鈕可為所有平台提供 PNG 和 SVG 格式。

提供的圖片按鈕適用於標準和圖示模式,且包含下列樣式選項:

  • 主題:淺色、中性、深色
  • 形狀:矩形、圓柱
以下是兩個範例:
主題 按鈕 說明
淺色 標準大型主題矩形「使用 Google 帳戶登入」按鈕範例 標準大型主題矩形「使用 Google 帳戶登入」按鈕
深色 標準深色主題藥丸形狀的「使用 Google 帳戶登入」按鈕範例 標準深色主題藥丸形狀「使用 Google 帳戶登入」按鈕
下載已預先核准的品牌圖示

支援的按鈕模式

淺色

淺色主題的圓形圖案「使用 Google 帳戶登入」按鈕

淺色主題方形形狀的「使用 Google 帳戶登入」按鈕

淺色主題藥丸狀圖案「使用 Google 帳戶登入」按鈕

淺色主題矩形形狀的「使用 Google 帳戶登入」按鈕

深色

深色主題圓形圖案「使用 Google 帳戶登入」按鈕

深色主題方形方形的「使用 Google 帳戶登入」按鈕

深色主題圖案形狀的「使用 Google 帳戶登入」按鈕

深色主題矩形形狀的「使用 Google 帳戶登入」按鈕

一般

採用中性主題的圓形圖案「使用 Google 帳戶登入」按鈕

採用中性主題的正方形圖案,形狀為「使用 Google 帳戶登入」按鈕

中性主題藥丸狀圖案「使用 Google 帳戶登入」按鈕

中性主題矩形形狀的「使用 Google 帳戶登入」按鈕

建立自訂「使用 Google 帳戶登入」按鈕

強烈建議您使用 Google Identity Services SDK前幾節所述的其他選項,方便 Google 使用者識別 Google 品牌。使用者越容易辨別動作按鈕,越有可能與按鈕互動。

但是,如果您需要配合應用程式設計調整按鈕,請遵守下列指南。

大小

您可以視需要針對不同的裝置和螢幕大小縮放按鈕,但必須保留顯示比例,以免 Google 標誌延展。

文字

如要鼓勵使用者按下按鈕,建議您使用「使用 Google 帳戶登入」、「透過 Google 帳戶註冊」或「透過 Google 帳戶繼續」的行動號召文字。您必須讓使用者清楚瞭解他們是透過 Google 憑證登入您的應用程式,或使用 Google 憑證註冊應用程式,而非在應用程式中註冊或註冊 Google 帳戶。

顏色

按鈕的預設狀態如下所示。按鈕一律包含 Google 的「G」標準顏色。

主題 範例
淺色 淺色主題藥丸狀圖案「使用 Google 帳戶登入」按鈕 填滿:#FFFFFF
筆劃:#747775 | 1px | 內部
字型:#1F1F1F | Roboto Medium | 14/20
深色 深色主題圖案形狀的「使用 Google 帳戶登入」按鈕 填滿:#131314
筆劃:#8E918F | 1px | 內部
字型:#E3E3E3 | Roboto Medium | 14/20
一般 中性主題藥丸狀圖案「使用 Google 帳戶登入」按鈕 填滿:#F2F2F2
筆劃:無筆觸
字型:#1F1F1F | Roboto Medium | 14/20

Font

按鈕字型為 Roboto Medium,也就是 TrueType 字型。如要安裝,請先下載 Roboto 字型,然後解壓縮下載套件。在 Mac 上,按兩下「Roboto-Medium.ttf」,然後按一下「Install Font」。在 Windows 上將檔案拖曳至「我的電腦」>「Windows」>「字型」資料夾。

邊框間距

Android Google 標誌之前的左側邊框間距為 12px,Google 標誌後方邊框間距為 10px,在「使用 Google 帳戶登入」文字後方邊框間距為 12px
iOS Google 標誌之前的左側邊框間距為 16 像素,Google 標誌後方邊框間距為 12px,「使用 Google 帳戶登入」文字後方的右側邊框間距為 16px
網頁 (行動裝置 + 電腦) Google 標誌之前的左側邊框間距為 12px,Google 標誌後方邊框間距為 10px,在「使用 Google 帳戶登入」文字後方邊框間距為 12px
參考資料 「使用 Google 帳戶登入」按鈕邊框間距參考資料

「使用 Google 帳戶登入」按鈕中的 Google 標誌

無論文字為何,您無法變更 Google「G」標誌的大小或顏色。須為標準顏色版本,且會顯示在白色背景上。如要建立自訂的 Google 標誌尺寸,請先從下載套件內隨附的任何標誌尺寸開始。

Google G 圖示

按鈕設計不正確

品牌宣傳格鬥技巧和甜甜圈圖片範例
正確做法

使用 Google 質感設計 3 設計指南來處理按鈕邊界和色彩配置。

品牌宣傳格鬥技巧和甜甜圈圖片範例
錯誤做法

單獨使用 Google 圖示或標誌,但不要使用按鈕邊界和不含文字來表示使用者動作。

品牌宣傳格鬥技巧和甜甜圈圖片範例
正確做法

在深色、淺色和中立模式中使用 Google 品牌顏色。

品牌宣傳格鬥技巧和甜甜圈圖片範例
錯誤做法

請使用 Google「G」單色版本的按鈕開啟按鈕。

品牌宣傳格鬥技巧和甜甜圈圖片範例
正確做法

在適當顏色模式中,選擇無障礙和顯眼程度的按鈕。

品牌宣傳格鬥技巧和甜甜圈圖片範例
錯誤做法

使用標準顏色的 Google「G」圖示搭配淺色、深色、中性色以外的顏色背景。

品牌宣傳格鬥技巧和甜甜圈圖片範例
正確做法

使用固定的邊框間距和大小,使用 Google 的「G」。

品牌宣傳格鬥技巧和甜甜圈圖片範例
錯誤做法

自行建立按鈕圖示。

品牌宣傳格鬥技巧和甜甜圈圖片範例
正確做法

如有需要,請使用 Google 的「G」做為動作按鈕。

品牌宣傳格鬥技巧和甜甜圈圖片範例
錯誤做法

在按鈕中單獨使用「Google」一詞,代表「使用 Google 帳戶登入」功能的動作。

「使用 Google 帳戶登入」品牌宣傳最佳做法

「使用 Google 帳戶登入」功能和其他第三方登入選項

「使用 Google 帳戶登入」按鈕,至少應與其他第三方登入選項一樣顯眼。舉例來說,按鈕的大小應大致相同,且視覺權重相近。

其他指南

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

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

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

未經 Google 事先書面同意,不得以本文件未明確規範的方式使用 Google 品牌 (詳情請參閱《Google 品牌特徵第三方使用指南》。