如果您正在俄羅斯和日本的使用者開發應用程式,請使用 [儲存至手機] 按鈕,因為 Google 電子錢包並未在這些國家/地區推出。請參閱相關資產和規範。如果您要開發俄羅斯和日本以外的使用者,請下載下列資產來更新「新增至 Google 錢包」按鈕。
本節旨在協助您建立圖片和其他使用者介面元素,並讓這些元素在 Google 錢包應用程式中呈現最佳效果。
[新增至 Google 錢包] 按鈕
當您引導使用者將應用程式或網站中的票證或卡片儲存至錢包時,系統會使用 [新增至 Google 錢包] 按鈕。「新增至 Google 錢包」按鈕必須呼叫其中一個 Google Wallet API 流程。上述流程會顯示 Google 錢包應用程式,使用者可以按照操作說明,將票證儲存至自己的 Android 裝置和 Google 帳戶。您可以在應用程式、網站或電子郵件中使用這個按鈕。
素材
「新增至 Google 錢包」按鈕有 Android XML、SVG 和 PNG 格式。
下載資產 - Android XML 下載資產 - SVG 下載資產 - PNG網站、應用程式或通訊電子郵件中顯示的所有「新增至 Google 錢包」按鈕都必須符合本頁所述的品牌宣傳指南,這些規範包括但不限於:
- 必須根據頁面上其他類似的按鈕或元素設定按鈕大小。
- 按鈕的形狀和顏色不能修改
- 周圍留空
本地化按鈕
凡是提供 Google 錢包服務的市場,都會提供本地化的 Google 錢包按鈕。如果您要為這些市場的使用者開發應用程式,請一律使用上方連結的按鈕。請勿自行建立「新增至 Google 錢包」按鈕版本。如果您的市場並未提供本地化版本按鈕,請使用英文版按鈕。
「儲存至 Google Pay」按鈕 、
本地化名稱
為了方便使用者識別,Google 錢包產品名稱在某些市場均已本地化。如果您要為這些國家/地區的使用者開發應用程式,請務必在網站、電子郵件和列印中使用下列本地化名稱。請勿建立本地化的「Google 錢包」版本。如果您的市場未列於下方,請使用英文的「Google 錢包」。
國家/地區 | 名稱 |
---|---|
白俄羅斯 | Google Кошелек |
巴西 | Carteira do Google |
智利 | Billetera de Google |
捷克 | Peněøenka Google |
希臘 | Πà一份ヶרλλ Google |
香港 | Google 技巧包 |
立陶宛 | Google 拼音 |
波蘭 | Google PortPortel |
葡萄牙 | Google 的 Carteira da Google |
羅馬尼亞 | Google 專屬攜碼轉移程序 |
斯洛伐克 | Peňa 資安 enka Google |
臺灣 | Google 技巧包 |
土耳其 | Google 庫茲丹 |
阿拉伯聯合大公國 | محفكة Google |
烏克蘭 | Google \tаманець |
美國 (西班牙文)
如果 UI 是西班牙文,請在美國使用這個名稱 |
Billetera de Google |
大小
您可以根據版面配置調整「新增至 Google 錢包」按鈕的高度和寬度。如果頁面上還有其他按鈕,「新增至 Google 錢包」按鈕的大小必須大於或等於相同按鈕。請勿讓「新增至 Google 錢包」按鈕小於其他按鈕。
建立風格
「新增至 Google 錢包」按鈕共有兩種樣式:主要和精簡。「新增至 Google 錢包」按鈕只有黑色。提供按鈕的本地化版本。請勿以自行本地化的文字建立按鈕。
主要 | Condensed |
---|---|
![]() |
![]() |
白色和淺色背景請使用主要按鈕。 | 如果主要或全寬度的空間不足,請使用 [壓縮] 按鈕。 |
周圍留空
「新增至 Google 錢包」按鈕四週一律應留空至少 8 dp 的空間。周圍留空的區域當中不得出現圖像或文字。

高度下限
所有「新增至 Google 錢包」按鈕的高度至少要有 48 dp。

建議做法
正確做法 | 建議做法 |
---|---|
正確:一律使用 Google 提供的「新增至 Google 錢包」按鈕。 | Don't:建立自己的「新增至 Google 錢包」按鈕,或以任何方式變更按鈕內的字型、顏色、按鈕半徑或邊框間距。 |
正確:在網站中一律使用相同的按鈕樣式, | Don't:讓「新增至 Google 錢包」按鈕小於其他按鈕。 |
正確:確保「新增至 Google 錢包」按鈕的大小大於或等於其他按鈕。 | Don't:變更按鈕顏色。 |
正確:調整「新增至 Google 錢包」按鈕的大小時保持按鈕比例相同。 | Don't:自由縮放按鈕。 |
正確:使用所提供按鈕的本地化版本。 | Don't:自行建立按鈕的本地化版本。 |
放置按鈕的最佳做法
在確認應用程式畫面、網頁或電子郵件中顯示「新增至 Google 錢包」按鈕。請參閱下列最佳做法,瞭解如何設計使用者介面。
會員卡、禮物卡、優惠
在確認畫面上顯示 [新增至 Google 錢包] 按鈕。您也可以在網站或應用程式中顯示按鈕,或將按鈕納入相關電子郵件中。


在文字中使用 Google 錢包產品名稱
您可以透過文字訊息,通知使用者系統已將會員卡儲存至他們的裝置。
「G」和「W」字首大寫
「Google 錢包」只能加上大寫的「G」和「W」大寫英文字母,後面再接上小寫的英文字母「G」。除非必須配合 UI 字體樣式,否則不要使用完整的全名「Google 錢包」。
不要使用 Google 錢包縮寫
說出「Google」和「錢包」。
配合 UI 字體樣式
設定「Google 錢包」字型與字體樣式,設定與 UI 中的其餘文字相同。不要模仿 Google 的字體樣式。
一律使用本地化的「Google 錢包」版本。
請一律使用我們提供的本地化文案「Google 錢包」;
設計
使用 g:savetoandroidpay
HTML 標記的 height
和 size
欄位,修改「新增至 Google 錢包」按鈕的高度和寬度。對於行動裝置實作或有特殊 UI 需求的情況,請使用 textsize=large
規格大幅增加文字和按鈕大小。
請使用 theme
設定按鈕顏色。下表列出這些設定對「新增至 Google 錢包」按鈕的影響。
標誌
Google 錢包會遮住標誌的圓形。
標誌圖片規範
以下列出有關標誌圖片的使用者介面建議:
規範 | 說明 |
---|---|
建議使用的檔案類型 | PNG |
最小尺寸 | 660 x 660 像素 |
圖片顯示比例 | 1:1 |
藝術品顯示比例 | 1:1 |
實際像素大小 | 根據裝置大小調度資源 |
標誌圓形遮罩 |
標誌會套用遮罩,以符合圓形設計。確認標誌符合安全區域的規定。請勿預先為標誌套用遮罩,標誌需放在含有滿版背景顏色的正方形中。 標誌週邊必須有 15% 的留白,以免套用遮罩時被切掉。 ![]() |
卡片背景顏色
您可以使用 hexBackgroundColor
欄位設定背景顏色。如未設定這個值,演算法會分析標誌、找出主色,並使用該背景顏色。
主角圖片
class.heroImage
欄位會在卡片內文中以全寬度橫幅顯示。
主頁橫幅規範
以下列出有關主頁橫幅的使用者介面建議:
規範 | 說明 |
---|---|
建議使用的檔案類型 | PNG |
建議大小 |
1032x336 像素 使用廣角矩形圖片。 為獲得最佳效果,請使用彩色背景的圖片。 |
長寬比 | 3:1 以上 |
顯示大小 |
資訊卡的全寬度和比例高度。 ![]() |
完整寬度圖片
類別或物件的 *.imageModulesData.mainImage
欄位在票證中會顯示為全寬度圖片。
完整寬度圖片規範
以下為完整寬度圖片的使用者介面建議清單:
規範 | 說明 |
---|---|
建議使用的檔案類型 | PNG |
最小尺寸 |
寬度為 1860 像素,高度可變。 使用寬幅矩形圖片。 為獲得最佳效果,請使用彩色背景的圖片。 |
長寬比 | 變數 |
螢幕大小 |
範本的完整寬度和比例高度。 ![]() |
請使用與標誌相同的色彩配置。 |
條碼圖片
特定產業允許在條碼上方和下方上傳圖片。
在條碼上方顯示的圖片
下方是條碼上方圖片的使用者介面建議清單:
規範 | 說明 |
---|---|
建議使用的檔案類型 | PNG |
高度上限 |
最大 20 dp (最大長寬比) 如有兩張圖片,建議尺寸為高度 80 像素,寬度為 80 至 780 像素。並排顯示。 如果一張正方形是正方形,另一張是矩形,則圖片大小必須是 80x80 像素和 780x80 像素。 |
顯示比例 |
不受限制。如要達到單一圖片的高度和寬度上限 (20 dp),請使用 20:1 的長寬比。 如果您只想在條碼上方顯示一張圖片,請使用完整的寬度 (不含邊框間距)。圖片尺寸必須為 1600x80 像素。 |
顯示大小上限 (單一圖片) | 高度 20 dp,寬度 400 dp |
在條碼下方顯示的圖片
以下是條碼下方圖片的使用者介面建議清單:
規範 | 說明 |
---|---|
建議使用的檔案類型 | PNG |
高度上限 |
最大 20 dp (最大長寬比) 建議大小為 80 像素高和 80 至 1600 像素寬度。 正方形圖片,尺寸為 80x80 像素。 如果是矩形,1600x80 像素。 |
長寬比不受限。如果高度和寬度上限為 20 dp,請使用 20:1 的長寬比。 | 如要採用完整寬度圖片 (不含邊框間距),圖片尺寸必須為 1600x80 像素。 |
顯示大小上限為高度 20 dp,寬度為 400 dp。 |
模組
模組代表範本的特定部分中的一組欄位。下表包含您必須在類別和物件中加入的模組數量指南,確保卡片可在 Google 錢包應用程式中正確顯示。
規範 | 說明 |
---|---|
imageModulesData
|
在您的類別或所建立的物件中只使用一個 imageModulesData 。 |
infoModuleData
|
在您的類別或建立的物件中使用最多兩個
|
linksModuleData
|
在類別或您建立的物件中,最多可使用四個
您可以在類別中使用兩個 |
textModulesData
|
在類別和您建立的物件之間使用最多兩個
您可以在類別中建立一個用於定義程式詳細資料的 |
infoModuleData
InfoModuleData
包含會員和可自訂的資訊,會在展開的檢視畫面中顯示。使用這個模組儲存資訊,例如到期日、第二個點數餘額或已儲存的價值餘額。
linksModuleData
連結模組包含網頁、電話號碼和電子郵件地址的 URI。以下列出有關連結模組的使用者介面建議:
規範 | 範例設定 | 範例圖片 |
---|---|---|
將 URI 指派給網站或 Google 地圖中的地點時,請使用 http: 前置字元。這個前置字串可讓消費者輕觸連結並前往網站,或在 Google 地圖中查看該地點。此外,這個前置字串也會在卡片說明上方顯示連結或地圖圖示。
|
'uri': 'http://maps.google.com/?q=google'
|
![]() |
'uri': 'http://developer.google.com/wallet/'
|
![]() |
|
定義電話號碼時,請使用 tel: 前置字元。這個前置字串可讓消費者輕觸連結來撥打號碼。這個前置字串也會在卡片的文字說明前建立電話圖示。 |
'uri': 'tel:6505555555'
|
![]() |
定義電子郵件地址時,請使用 mailto: 前置字元。這個前置字串可讓消費者輕觸連結,以傳送電子郵件至地址。這個前置字串也會在卡片的文字說明前方建立電子郵件圖示。 |
'uri': 'mailto:jonsmith@email.com'
|
![]() |
標題、標籤和名稱
在標題大小寫中撰寫標題、標籤和名稱,讓每個字詞皆以大寫字母開頭。
內容政策
票證中每個欄位的內容都應符合 Payments 內容政策。類別中參照的網站內容也必須符合這些政策。
合作夥伴平台資料的位置
為確保使用者能存取票證相關功能的應用程式或網站,請務必在票證類別或物件 linksModuleData.*
屬性中,加入應用程式的深層連結或網站。使用者可以透過 Google 錢包中顯示的票證前往您的平台。如要瞭解這項資料的呈現方式,請前往票證類別的「設計」部分。