如果您是為俄羅斯的使用者開發，請使用「儲存至手機」按鈕，因為 Google 錢包尚未在這些國家/地區推出。請參閱相關素材資源和規範。如果您是為俄羅斯以外的使用者開發，請下載下列素材資源，更新「新增至 Google 錢包」按鈕。
本節說明如何建立圖片和其他使用者介面元素，讓這些元素在 Google 錢包應用程式中完美呈現。
素材資源
「新增至 Google 錢包」按鈕
只要您引導使用者將應用程式或網站中的票證或卡片儲存至錢包，就會使用「新增至 Google 錢包」按鈕。「新增至 Google 錢包」按鈕必須呼叫其中一個 Google Wallet API 流程。這些流程會顯示 Google 錢包應用程式，使用者可以按照操作說明，將票證儲存到 Android 裝置和 Google 帳戶。這個按鈕可用於應用程式、網站或電子郵件。
「新增至 Google 錢包」按鈕提供 Android XML、SVG 和 PNG 格式。
下載素材資源 - Android XML 下載素材資源 - SVG 下載素材資源 - PNG「在 Google 錢包中查看」按鈕
「在 Google 錢包中查看」按鈕可透過深層連結，將使用者導向錢包，查看先前儲存的票證或卡片。這個按鈕可用於應用程式、網站或電子郵件。
「在 Google 錢包中查看」按鈕提供 SVG 和 PNG 格式。
下載素材資源 - SVG 下載素材資源 - PNG網站、應用程式或電子郵件通訊中顯示的所有按鈕，都必須符合本頁所述的品牌宣傳指南。相關規範包括但不限於：
- 依據其他類似的按鈕或頁面元素設定按鈕尺寸
- 不得變更按鈕的形狀和顏色
- 周圍留空
本地化按鈕
我們為所有可使用 Google 錢包的市場提供本地化 Google 錢包按鈕。如果您是為這些市場的使用者開發應用程式，請一律使用上方連結的按鈕。請勿自行建立按鈕。如果您的市場不提供本地化版本的按鈕，請使用英文版按鈕。
「新增至 Google 錢包」按鈕支援下列語言：阿爾巴尼亞文、阿拉伯文、亞美尼亞文、亞塞拜然文、波士尼亞文、保加利亞文、加泰隆尼亞文、中文 (香港)、繁體中文、克羅埃西亞文、捷克文、丹麥文、荷蘭文、英文 (印度、新加坡、南非、澳洲、加拿大、英國、美國)、愛沙尼亞文、菲律賓文、芬蘭文、法文 (加拿大)、法文 (法國)、喬治亞文、德文、希臘文、希伯來文、匈牙利文、冰島文、印尼文、義大利文、日文、哈薩克文、吉爾吉斯文、拉脫維亞文、立陶宛文、馬其頓文、馬來文、挪威文、波蘭文、葡萄牙文 (巴西)、葡萄牙文 (葡萄牙)、羅馬尼亞文、俄文 (白俄羅斯)、塞爾維亞文、斯洛伐克文、斯洛維尼亞文、西班牙文 (拉丁美洲)、西班牙文 (西班牙)、瑞典文、泰文、土耳其文、烏克蘭文、烏茲別克文和越南文。
本地化名稱
為了方便使用者識別，Google 錢包產品名稱在特定市場中會經過本地化。如果您是為這些國家/地區的使用者開發應用程式，請一律使用下列本地化名稱，用於網頁、電子郵件和印刷品。請勿自行建立「Google 錢包」的本地化版本。如果下方未列出您所在的市場，請使用英文的「Google Wallet」。
| 國家/地區 | 名稱 |
|---|---|
| 白俄羅斯 | Google Кошелек |
| 巴西 | Carteira do Google |
| 智利 | Billetera de Google |
| 捷克 | Peněženka Google |
| 希臘 | Πορτοφόλι Google |
| 香港 | Google 錢包 |
| 立陶宛 | Google Piniginė |
| 波蘭 | Portfel Google |
| 葡萄牙 | Carteira da Google |
| 羅馬尼亞 | Portofel Google |
| 斯洛伐克 | Peňaženka Google |
| 臺灣 | Google 錢包 |
| 土耳其 | Google Cüzdan |
| 阿拉伯聯合大公國 | محفظة Google |
| 烏克蘭 | Google Гаманець |
|
美國 (西班牙文)
*如果使用者介面為西班牙文，請在美國使用這個名稱 |
Billetera de Google |
大小
調整「新增至 Google 錢包」按鈕的高度和寬度，以符合版面配置。如果頁面上有其他按鈕，「新增至 Google 錢包」按鈕的大小必須與其他按鈕相同或更大。「新增至 Google 錢包」按鈕不得小於其他按鈕。
樣式
「新增至 Google 錢包」按鈕有兩種版本：主要和精簡。「新增至 Google 錢包」按鈕只有黑色。我們提供本地化版本的按鈕。請勿以自行翻譯的文字建立按鈕。
| 主要 | 極密 |
|---|---|
|
|
| 在白色和淺色背景上使用主要按鈕。 | 如果空間不足，無法使用主要或全寬按鈕，請使用精簡按鈕。 |
周圍留空
「新增至 Google 錢包」按鈕周圍一律應至少留空 8 dp，且周圍留空的區域當中不得出現圖像或文字。
高度下限
所有「新增至 Google 錢包」按鈕的高度至少須為 48 dp。
正確與錯誤做法
| 正確做法 | 錯誤做法 |
|---|---|
| 建議做法：一律使用 Google 提供的「新增至 Google 錢包」按鈕。 | 不建議：自行建立「新增至 Google 錢包」按鈕，或以任何方式調整按鈕內的字型、顏色、按鈕半徑或邊框間距。 |
| 建議做法：在網站中一律使用相同的按鈕樣式。 | 不建議：「新增至 Google 錢包」按鈕小於其他按鈕。 |
| 建議做法：確認「新增至 Google 錢包」按鈕的大小大於或等於其他按鈕。 | 不建議：變更按鈕顏色。 |
| 建議做法：調整「新增至 Google 錢包」按鈕大小時，請維持相同的按鈕比例。 | 不建議：任意縮放按鈕。 |
| 建議做法：使用我們提供的本地化版本按鈕。 | 不建議：自行建立本地化版本的按鈕。 |
按鈕位置最佳做法
在確認應用程式畫面、網頁或電子郵件中，顯示「新增至 Google 錢包」按鈕。請參閱下列最佳做法，做為 UI 設計的指引。
一般票證
在確認應用程式畫面、網頁或電子郵件中，顯示「新增至 Google 錢包」按鈕。建議您將「新增至 Google 錢包」按鈕，放在應用程式或網站中供使用者存取票證的位置。
在文字中使用 Google 錢包產品名稱
您可以使用文字向使用者表示，一般票證已儲存至裝置。
字首「G」與「W」大寫
提及 Google 錢包時，字首的「G」與「W」一律大寫，其他字母小寫。除非必須配合使用者介面字體樣式，否則請勿使用全部大寫的「Google 錢包」。
不得縮寫 Google 錢包
「Google」與「Wallet」字樣應完整拼寫。
配合 UI 字體樣式
設定「Google 錢包」的字型與字體樣式時，應配合 UI 中的其他文字，不要模仿 Google 的字體樣式。
一律使用「Google 錢包」的本地化版本
請一律使用提供的本地化文字撰寫「Google 錢包」。
設計
使用 g:savetoandroidpay HTML 標記的 height 和 size 欄位，修改「新增至 Google 錢包」按鈕的高度和寬度。使用 textsize=large 規格，可大幅增加文字和按鈕大小，適合在行動裝置上或有特殊 UI 要求時使用。
請使用 theme 設定按鈕的顏色。下表說明這些設定對「新增至 Google 錢包」按鈕有何影響。
票證建立指南
為確保票證外觀精美且功能正常，請遵守下列有關字元限制、通知、背景顏色和主頁橫幅的規範。
卡片背景顏色
您可以使用 hexBackgroundColor 欄位設定背景顏色。如未設定值，演算法會分析標誌，找出主要顏色，並使用該顏色做為背景顏色。
避免使用高飽和度的「鮮豔」區域 (例如霓虹綠 #00FF00 或電光青 #00FFFF)。這些顏色會造成眼睛嚴重疲勞，並導致文字「溢出」或消失在背景中。請改用其中一種建議顏色。
建議顏色
#1a1a1a
#677088
#e8eaed
#f8f9fa
#ffffff
#d6322d
#f78f48
#f9bb2d
#1e7e3b
#216acf
#9147df
#fce8e6
#e6fffa
#e8f0fe
主角圖片
class.heroImage 欄位會以完整寬度圖片的形式，顯示在票證的資料欄位下方。
如果尚未新增圖片，建議您新增。如果您有圖片，請務必遵守下列規格。如未選取圖片，系統會顯示票證類別的備用圖片。
以下是主頁橫幅的使用者介面建議：
| 規範 | 說明 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| 偏好的檔案類型 | PNG。如要顯示票證的背景顏色，請使用透明 PNG。 | ||||||||
| 建議大小 | 1032x812 px | ||||||||
| 顯示比例 | 1032:812 (約 5:4) | ||||||||
| 正確與錯誤做法 |
|
內容
標題、副標題、欄位標籤和欄位資料：為提高使用者理解度，請盡可能縮短標題和其他欄位。下列字元限制適用於英文，但這些字元會翻譯成其他語言，因此在不同裝置和區域的使用者體驗會有所不同。如有疑慮，請簡化內容，但仍要傳達重要細節。
| 欄位 | 限制 |
|---|---|
| 標題標籤 | < 47 個半形字元 |
| 副標題標籤 | < 88 個半形字元 |
| 欄位/標題標籤 (例如日期、說明、艙等、乘客姓名) | < 20 個半形字元 |
| 欄位資料標籤 (例如 2026 年 10 月 19 日，豪華經濟艙) | < 15 個半形字元 |
為確保易讀性，請將資料限制為每列兩個欄位，且盡可能不超過 3 列。
通知
| 欄位 | 限制 |
|---|---|
| 標題 | < 29 個半形字元 |
| 收合的主體 | < 40 個半形字元 |
| 展開內文 | < 80 個半形字元 |
建議您遵守字元限制，以免使用者在小型裝置上或放大字型時，文字遭到截斷。詳情請參閱「通知 | 行動裝置 | Android 開發人員」。
標誌
標誌圖片規範
Google 錢包會將標誌遮罩成圓形。
以下是標誌圖片的使用者介面建議清單：| 規範 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 最小尺寸 | 660 x 660 像素 |
| 圖片顯示比例 | 1:1 |
| 圖片顯示比例 | 1:1 |
| 實際像素大小 | 根據裝置大小調整 |
| 標誌圓形遮罩 |
標誌會經過遮罩處理，以符合圓形設計。請確認標誌位於安全區域內。請勿預先遮蓋標誌。將標誌放在正方形中，並使用全出血背景顏色。 標誌周邊應有 15% 的留白，以免套用遮罩時被切掉。 
|
Google 錢包會將標誌遮罩成圓形。
寬版標誌圖片規範
活動票券、登機證、QR code 大眾運輸票證、會員卡、優惠、禮物卡、一般票證和一般私人憑證，都支援寬版標誌圖片。以下是寬版標誌圖片的使用者介面建議清單：
| 規範 | 說明 |
|---|---|
| 檔案類型 | 透明 PNG 檔案 |
| 建議大小 | 1280 x 400 像素 |
| 最小尺寸 |
高度 400 像素，寬度按比例調整 (詳情請參閱「顯示比例」一節) 請使用寬的長方形圖片。 |
| 顯示比例 |
16:5 
|
| 顏色 |
如果票證背景為深色，請使用高對比度的淺色 (例如白色)。 如果票證背景為淺色，請使用對比度高的深色 (例如黑色)。 
|
其他圖片
類別或物件的 *.imageModulesData.mainImage 欄位在票證中，會以完整寬度圖片的形式顯示在主頁橫幅下方。只有在票證需要額外圖片，才能讓使用者更清楚瞭解時，才使用這個欄位。
其他圖片規範
以下是額外圖片的使用者介面建議清單：
| 規範 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 最小尺寸 |
寬度 1860 像素，高度可變。 請使用寬的長方形圖片。 為求最佳效果，請使用有彩色背景的圖片。 |
| 顯示大小 |
範本的完整寬度，高度則按比例調整。 
|
條碼圖片
某些產業允許在條碼上方和下方顯示圖片。
條碼上方的圖片
以下是條碼上方圖片的使用者介面建議清單：
| 基本原則 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 高度上限 |
20 dp (採用最大顯示比例時) 如有兩張圖片，建議尺寸的高度為 80 px，寬度為 80 至 780 px。這樣一來，兩張圖片就能並列顯示。 如果兩張圖片分別為正方形和長方形，則圖片大小應為 80x80 px 和 780x80 px。 |
| 顯示比例 |
不受限制。如果單一圖片的高度與寬度上限為 20 dp，請使用 20:1 顯示比例。 如果只想在條碼上方顯示一張圖片，請使用完整寬度 (不含邊框間距)。圖片大小必須為 1600x80 像素。 |
| 顯示大小上限 (單一圖片) | 高度 20 dp，寬度 400 dp |
條碼下方的圖片
以下是條碼下方圖片的使用者介面建議清單：
| 基本原則 | 說明 |
|---|---|
| 偏好的檔案類型 | PNG |
| 高度上限 |
20 dp (採用最大顯示比例時) 建議尺寸的高度為 80 像素，寬度為 80 至 1600 像素。 如果是正方形，則為 80x80 px。 如果是長方形，則為 1600x80 像素。 |
| 不限制顯示比例。如果大小達到高度與寬度上限 (20 dp)，請使用 20:1 的長寬比。 | 如要以完整寬度 (不含邊框間距) 顯示圖片，圖片大小必須為 1600x80 px。 |
| 顯示大小上限為高度 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 錢包中顯示的票證前往你的平台。如要查看呈現方式，請前往票證類別的設計部分。