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

本文件提供在網站或應用程式中顯示「使用 Google 帳戶登入」按鈕的規範。網站或應用程式必須遵循這些規範,才能完成應用程式驗證程序。

我們的 Google Identity Services SDK 顯示「使用 Google 帳戶登入」按鈕時,一律會遵守最新的 Google 品牌宣傳指南。這是在網站或應用程式中顯示「使用 Google 帳戶登入」按鈕的建議做法。如果無法使用 Google 轉譯的按鈕選項,您可以轉譯 HTML 按鈕元素下載我們預先核准的品牌素材資源,或視需要建立自訂「使用 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 身分識別服務 SDK前面章節所述的其他選項,讓 Google 使用者更容易辨識 Google 品牌。使用者越容易辨識行動按鈕,就越有可能與其互動。

不過,如果您需要調整按鈕以配合應用程式設計,請遵循下列規範。

大小

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

文字

為鼓勵使用者點選按鈕,建議您使用「使用 Google 帳戶登入」、「使用 Google 帳戶註冊」或「使用 Google 帳戶繼續」等行動號召文字。請務必讓使用者清楚瞭解,他們是使用 Google 憑證登入應用程式或註冊應用程式,而不是在應用程式中註冊或註冊 Google 帳戶。

顏色

下方顯示按鈕的預設狀態。按鈕必須一律包含 Google「G」的標準顏色。

主題 範例
淺色 淺色主題的圓形「使用 Google 帳戶登入」按鈕 填充:#FFFFFF
描邊:#747775 | 1 像素 | 內側
字型:#1F1F1F | Roboto Medium | 14/20
深色 深色主題的圓形「使用 Google 帳戶登入」按鈕 填充:#131314
描邊:#8E918F | 1 像素 |
內部 字型:#E3E3E3 | Roboto Medium | 14/20
普通 中性主題藥物形狀的「使用 Google 帳戶登入」按鈕 填滿:#F2F2F2
筆劃:無筆劃
字型:#1F1F1F | Roboto Medium | 14/20

字型

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

邊框間距

Android Google 標誌前方 12px 左側邊框間距,Google 標誌後方的 10px 右邊框間距,以及「使用 Google 帳戶登入」文字後方的 12px 右邊框間距
iOS Google 標誌前方留有 16 像素的左邊框線,Google 標誌後方留有 12 像素的右邊框線,以及「Sign in with Google」文字後方留有 16 像素的右邊框線
網頁 (行動版 + 電腦版) Google 標誌前方 12px 左側邊框間距,Google 標誌後方的 10px 右邊框間距,以及「使用 Google 帳戶登入」文字後方的 12px 右邊框間距
參考資料 「使用 Google 帳戶登入」按鈕邊框間距參考資料

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

無論文字為何,您都不得變更 Google「G」標誌的大小或顏色。必須是標準彩色版本,並顯示在白色背景上。如果您需要建立自訂大小的 Google 標誌,請先下載下載套件所包含的任何標誌大小。

Google G 圖示

按鈕設計不正確

品牌宣傳授權圖片示例
正確做法

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

品牌宣傳授權圖片示例
不要

使用 Google 圖示或標誌本身,不需加上按鈕邊框,也無需加上文字來表示使用者動作。

品牌宣傳授權圖片示例
正確做法

使用 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 品牌特徵第三方使用指南」)。